.neufeld-wood-clock {
    --nwc-size: 360px;
    --nwc-pivot-x: 50%;
    --nwc-pivot-y: 50%;
    position: relative;
    display: inline-block;
    width: var(--nwc-size);
    height: var(--nwc-size);
    max-width: 100%;
}

.neufeld-wood-clock .nwc-face {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
}

.neufeld-wood-clock .nwc-bg-layer {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.neufeld-wood-clock .nwc-hand-wrap {
    position: absolute;
    left: var(--nwc-pivot-x);
    top: var(--nwc-pivot-y);
    transform-origin: 50% 100%;
    z-index: 3;
    will-change: transform;
}

.neufeld-wood-clock .nwc-hour-wrap {
    width: 12%;
    height: 30%;
}

.neufeld-wood-clock .nwc-minute-wrap {
    width: 8%;
    height: 41%;
}

.neufeld-wood-clock .nwc-second-wrap {
    width: 2%;
    height: 30%;
    z-index: 4;
}

.neufeld-wood-clock .nwc-hand-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.nwc-hour path:first-of-type,
.nwc-minute path:first-of-type {
    fill: #f5d7ad;
    stroke: #2b160c;
    stroke-width: 5;
    paint-order: stroke fill;
}

/* belső árnyék hatás */
.nwc-hour path:last-of-type,
.nwc-minute path:last-of-type {
    fill: rgba(0,0,0,0.15);
    opacity: 0.4;
}

.nwc-hour path:first-of-type,
.nwc-minute path:first-of-type {
    fill: #D69F5C;                 /* kicsit világosabb fa */
    stroke: #2b160c;               /* sötétbarna kontúr */
    stroke-width: 20;               /* erősebb kontúr */
    paint-order: stroke fill;
    stroke-linejoin: round;        /* szebb szélek */
    stroke-linecap: round;
}

.neufeld-wood-clock .nwc-second {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, #ff4d4d, #b30000);
    box-shadow: 0 1px 4px rgba(0,0,0,0.28);
    outline: 1px solid #4a0000;
}

.neufeld-wood-clock .nwc-second::before {
    content: "";
    position: absolute;
    top: 1%;
    left: 50%;
    width: 5px;
    height: 5px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #e32828;
    border: 1px solid #4a0000;
}

.neufeld-wood-clock .nwc-second::after {
    content: "";
    position: absolute;
    bottom: -16%;
    left: 50%;
    width: 5px;
    height: 14%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, #ff6d6d 0%, #ad0f0f 100%);
    border: 1px solid #4a0000;
}

.neufeld-wood-clock .nwc-center-cap {
    position: absolute;
    z-index: 6;
    left: var(--nwc-pivot-x);
    top: var(--nwc-pivot-y);
    width: 7.5%;
    height: 7.5%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #a97144 0%, #7b4d2d 55%, #4b2a17 100%);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.18), 0 1px 7px rgba(0,0,0,0.35);
}

@media (max-width: 480px) {
    .neufeld-wood-clock {
        width: min(var(--nwc-size), 100%);
        height: auto;
        aspect-ratio: 1 / 1;
    }
}