.rn-vintage-clock-wrap {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.rn-clock-shadow .rn-vintage-clock {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 3px rgba(255, 255, 255, 0.15);
}

.rn-clock-shadow .rn-clock-ring {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.25);
}

.rn-clock-shadow .rn-vintage-clock:has(.rn-clock-ring) {
    box-shadow: none;
}

.rn-clock-shadow:has(.rn-clock-ring) {
    filter:
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.rn-vintage-clock {
    position: relative;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    --hand-color: #2c1a0e;
    --second-color: #8b0000;
    --clock-size: 300px;
}

.rn-clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(0deg) translateZ(0);
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.4, 2.08, 0.55, 0.44);
    border-radius: 4px 4px 2px 2px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.rn-hand-hour {
    width: 6px;
    height: calc(var(--clock-size) * 0.28);
    background-color: var(--hand-color);
    border-radius: 4px 4px 3px 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 3;
}

.rn-hand-minute {
    width: 4px;
    height: calc(var(--clock-size) * 0.38);
    background-color: var(--hand-color);
    border-radius: 3px 3px 2px 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    z-index: 4;
}

.rn-hand-second {
    width: 2px;
    height: calc(var(--clock-size) * 0.42);
    background-color: var(--second-color);
    border-radius: 2px 2px 1px 1px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    z-index: 5;
    transition: none;
}

.rn-hand-second::after {
    content: '';
    position: absolute;
    bottom: calc(var(--clock-size) * -0.07);
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--clock-size) * 0.035);
    height: calc(var(--clock-size) * 0.07);
    background-color: var(--second-color);
    border-radius: 2px;
}

.rn-clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--clock-size) * 0.06);
    height: calc(var(--clock-size) * 0.06);
    background-color: var(--hand-color);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 480px) {
    .rn-vintage-clock-wrap {
        padding: 6px;
    }
}

.rn-clock-ring {
    position: absolute;
    inset: calc(var(--border-width) * -1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    box-sizing: border-box;
    -webkit-mask: radial-gradient(
        circle,
        transparent calc(var(--clock-size) / 2),
        black       calc(var(--clock-size) / 2 + 1px)
    );
    mask: radial-gradient(
        circle,
        transparent calc(var(--clock-size) / 2),
        black       calc(var(--clock-size) / 2 + 1px)
    );
}

.rn-border-flat {
    border: var(--border-width) solid var(--border-color);
}

.rn-border-gradient-gold {
    background: conic-gradient(
        #3d2200 0deg,
        #c8860a 40deg,
        #f5e6a0 80deg,
        #ffd700 120deg,
        #f5e6a0 160deg,
        #c8860a 200deg,
        #8b6914 240deg,
        #c8860a 280deg,
        #f5e6a0 320deg,
        #3d2200 360deg
    );
}

.rn-border-gradient-silver {
    background: conic-gradient(
        #2a2a2a 0deg,
        #aaaaaa 45deg,
        #eeeeee 90deg,
        #ffffff 135deg,
        #cccccc 180deg,
        #888888 225deg,
        #eeeeee 270deg,
        #aaaaaa 315deg,
        #2a2a2a 360deg
    );
}

.rn-border-gradient-custom {
    background: conic-gradient(
        var(--border-color)  0deg,
        var(--border-color2) 90deg,
        var(--border-color)  180deg,
        var(--border-color2) 270deg,
        var(--border-color)  360deg
    );
}

.rn-border-pseudo3d {
    border: var(--border-width) solid var(--border-color);
    box-shadow:
        calc(var(--border-width) * 0.3)   calc(var(--border-width) * 0.3)   calc(var(--border-width) * 0.6)  rgba(0,0,0,0.6),
        calc(var(--border-width) * -0.2)  calc(var(--border-width) * -0.2)  calc(var(--border-width) * 0.4)  rgba(255,255,255,0.35),
        inset calc(var(--border-width) * 0.15)  calc(var(--border-width) * 0.15)  calc(var(--border-width) * 0.3)  rgba(0,0,0,0.5),
        inset calc(var(--border-width) * -0.1)  calc(var(--border-width) * -0.1)  calc(var(--border-width) * 0.2)  rgba(255,255,255,0.3);
}

.rn-border-texture-knurl {
    background: repeating-conic-gradient(
        var(--border-color)  0deg 4deg,
        var(--border-color2) 4deg 8deg
    );
}

.rn-border-texture-lines {
    background:
        repeating-conic-gradient(
            var(--border-color) 0deg 2deg,
            transparent        2deg 6deg
        ),
        var(--border-color2);
}

.rn-vintage-clock[class*="rn-glass-"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}

.rn-glass-clear::after {
    background:
        radial-gradient(ellipse 55% 35% at 35% 22%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 40%, transparent 70%),
        radial-gradient(ellipse 40% 20% at 65% 75%, rgba(255,255,255,0.12) 0%, transparent 100%);
    box-shadow:
        inset 0 2px 6px rgba(255,255,255,0.45),
        inset 0 -1px 4px rgba(0,0,0,0.08);
}

.rn-glass-glare::after {
    background:
        radial-gradient(ellipse 60% 38% at 32% 20%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.35) 35%, transparent 65%),
        radial-gradient(ellipse 50% 25% at 68% 78%, rgba(255,255,255,0.18) 0%, transparent 100%),
        radial-gradient(ellipse 80% 80% at 50% 60%, transparent 50%, rgba(0,0,0,0.12) 100%);
    box-shadow:
        inset 0 3px 10px rgba(255,255,255,0.5),
        inset 0 -3px 10px rgba(0,0,0,0.12);
}

.rn-hands-sword .rn-hand-hour {
    width: 6px;
    clip-path: polygon(50% 0%, 100% 100%, 50% 88%, 0% 100%);
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.rn-hands-sword .rn-hand-minute {
    width: 4px;
    clip-path: polygon(50% 0%, 100% 100%, 50% 90%, 0% 100%);
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.rn-hands-sword .rn-hand-second {
    width: 2px;
    clip-path: polygon(50% 0%, 100% 100%, 50% 92%, 0% 100%);
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
.rn-hands-sword .rn-hand-second::after { display: none; }

.rn-hands-baton .rn-hand-hour {
    width: 10px;
    clip-path: polygon(50% 0%, 85% 30%, 100% 55%, 85% 80%, 50% 100%, 15% 80%, 0% 55%, 15% 30%);
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4));
}
.rn-hands-baton .rn-hand-minute {
    width: 8px;
    clip-path: polygon(50% 0%, 85% 25%, 100% 55%, 85% 80%, 50% 100%, 15% 80%, 0% 55%, 15% 25%);
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.35));
}
.rn-hands-baton .rn-hand-second {
    width: 4px;
    clip-path: polygon(50% 0%, 90% 35%, 100% 60%, 90% 85%, 50% 100%, 10% 85%, 0% 60%, 10% 35%);
    border-radius: 0;
    box-shadow: none;
}
.rn-hands-baton .rn-hand-second::after { display: none; }

.rn-hands-arrow .rn-hand-hour {
    width: 7px;
    clip-path: polygon(50% 0%, 100% 22%, 100% 100%, 0% 100%, 0% 22%);
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.rn-hands-arrow .rn-hand-minute {
    width: 5px;
    clip-path: polygon(50% 0%, 100% 18%, 100% 100%, 0% 100%, 0% 18%);
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.rn-hands-arrow .rn-hand-second {
    width: 3px;
    clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%);
    border-radius: 0;
    box-shadow: none;
}
.rn-hands-arrow .rn-hand-second::after { display: none; }

.rn-hands-thin .rn-hand-hour {
    width: 2px;
    border-radius: 1px 1px 0 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.rn-hands-thin .rn-hand-minute {
    width: 1.5px;
    border-radius: 1px 1px 0 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.rn-hands-thin .rn-hand-second {
    width: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.rn-hands-thin .rn-hand-second::after { width: 3px; }

.rn-clock-hand svg,
svg.rn-clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(0deg) translateZ(0);
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.4, 2.08, 0.55, 0.44);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: visible;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.rn-hands-dauphine svg.rn-hand-hour,
.rn-hands-breguet svg.rn-hand-hour,
.rn-hands-cathedral svg.rn-hand-hour,
.rn-hands-skeleton svg.rn-hand-hour,
.rn-hands-royal svg.rn-hand-hour {
    width: calc(var(--clock-size) * 0.28);
    height: calc(var(--clock-size) * 0.30);
    background: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
    z-index: 3;
}

.rn-hands-dauphine svg.rn-hand-minute,
.rn-hands-breguet svg.rn-hand-minute,
.rn-hands-cathedral svg.rn-hand-minute,
.rn-hands-skeleton svg.rn-hand-minute,
.rn-hands-royal svg.rn-hand-minute {
    width: calc(var(--clock-size) * 0.24);
    height: calc(var(--clock-size) * 0.40);
    background: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.40));
    z-index: 4;
}

.rn-hands-dauphine svg.rn-hand-second,
.rn-hands-breguet svg.rn-hand-second,
.rn-hands-cathedral svg.rn-hand-second,
.rn-hands-skeleton svg.rn-hand-second,
.rn-hands-royal svg.rn-hand-second {
    width: calc(var(--clock-size) * 0.16);
    height: calc(var(--clock-size) * 0.44);
    background: none;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
    z-index: 5;
    transition: none;
}

.rn-hands-skeleton svg path {
    fill: none;
    stroke: var(--hand-color);
    stroke-width: 0.8;
}

.rn-hands-skeleton svg.rn-hand-second path {
    stroke: var(--second-color);
}