/* 3D Cylinder Drum — Slot-Machine Reel styling
   Goal: read as a physical mechanical reel behind a chrome-framed viewing
   slot, not a flat list of bars. Active symbol sits large/bright/flat-on;
   neighbors are visibly smaller, dimmer, and desaturated — as if curving
   away around the back of a spinning cylinder — with a metallic housing
   (bezel + rivets + brushed texture) wrapping the whole thing. */

/* The outer drum housing that creates the 3D perspective */
.drum-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image:
        radial-gradient(circle 5px at 14px 14px, #cbd5e1 0%, #64748b 60%, transparent 100%),
        radial-gradient(circle 5px at calc(100% - 14px) 14px, #cbd5e1 0%, #64748b 60%, transparent 100%),
        radial-gradient(circle 5px at 14px calc(100% - 14px), #cbd5e1 0%, #64748b 60%, transparent 100%),
        radial-gradient(circle 5px at calc(100% - 14px) calc(100% - 14px), #cbd5e1 0%, #64748b 60%, transparent 100%),
        radial-gradient(ellipse at 50% 0%, rgba(148, 163, 184, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(148, 163, 184, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, #0b1220 0%, #1a2540 18%, #263454 50%, #1a2540 82%, #0b1220 100%);
    background-repeat: no-repeat;
    box-shadow:
        inset 0 0 36px rgba(0, 0, 0, 0.65),
        inset 12px 0 20px -10px rgba(0, 0, 0, 0.9),
        inset -12px 0 20px -10px rgba(0, 0, 0, 0.9);
    border-radius: 16px;
    border: 3px solid #64748b;
    border-image: linear-gradient(180deg, #94a3b8 0%, #475569 30%, #94a3b8 50%, #475569 70%, #94a3b8 100%) 1;
    /* Shorter perspective distance = stronger vanishing-point taper on rotated
       panels — this is what makes off-center symbols visibly bow inward like
       they're wrapping around a cylinder, rather than just dimming in place. */
    perspective: 360px;
    perspective-origin: 50% 50%;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.drum-stage:active {
    cursor: grabbing;
}

/* Chrome side bezel, brushed-metal texture — sells "physical housing" */
.drum-stage::before,
.drum-stage::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    z-index: 200;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0px, transparent 1px, transparent 3px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent);
}

.drum-stage::before {
    left: 0;
}

.drum-stage::after {
    right: 0;
    background-image:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0px, transparent 1px, transparent 3px),
        linear-gradient(270deg, rgba(0, 0, 0, 0.8), transparent);
}

/* The glass lens overlay — a chrome-framed viewing slot cut into the housing */
.drum-lens {
    position: absolute;
    top: 50%;
    left: 6px;
    right: 6px;
    height: 66px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: linear-gradient(
        180deg,
        rgba(11, 18, 32, 0.78) 0%,
        transparent 28%,
        transparent 72%,
        rgba(11, 18, 32, 0.78) 100%
    );
    pointer-events: none;
    z-index: 150;
    /* Beveled chrome edge: several stacked hairline shadows instead of a flat
       solid border, so the slot frame itself reads as a rounded metal lip. */
    box-shadow:
        0 -3px 0 0 #f1f5f9,
        0 -4px 0 0 #94a3b8,
        0 -6px 6px -2px rgba(0, 0, 0, 0.6),
        0 3px 0 0 #f1f5f9,
        0 4px 0 0 #94a3b8,
        0 6px 6px -2px rgba(0, 0, 0, 0.6),
        inset 0 0 18px rgba(255, 255, 255, 0.05);
}

/* Glossy highlight streak across the slot glass */
.drum-lens::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 3px;
    right: 3px;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);
    pointer-events: none;
}

/* The rotating cylinder axle.
   top: calc(50% - 30px) positions the axle so that the transform-origin of
   each panel (center of its 60px height = 30px below the axle top) lands
   exactly at the stage vertical center — where the lens is.
   transform is set inline by Blazor: rotateX(selectedIndex * -35deg) */
.drum-axle {
    position: absolute;
    top: calc(50% - 30px);
    left: 0;
    width: 100%;
    height: 60px;
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Individual drum panels — each is a face of the cylinder. Inset from the
   housing walls with rounded (pill) ends, rather than a flush-edge full-width
   rectangle: this reads as "a segment sitting inside a round tube" — you can
   see the dark curved housing peeking past both ends of the symbol — which
   sells the cylinder far more directly than perspective math alone. */
.drum-panel {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transform-origin: center center;
    /* Non-uniform scale (narrower vertically than horizontally) reads as a
       symbol curving away at a raking angle, rather than just "shrunk" —
       real foreshortened circular objects compress more in one axis. */
    transform: rotateX(var(--panel-angle)) translateZ(var(--drum-radius, 100px)) scale(0.82, 0.6);
    backface-visibility: hidden;

    background-image:
        /* horizontal ridge lines — brushed-reel texture, riding on each face */
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0px, transparent 2px, transparent 9px, rgba(0, 0, 0, 0.18) 11px),
        linear-gradient(180deg, #313f58 0%, #4a5875 50%, #313f58 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(203, 213, 225, 0.55);
    opacity: 1;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: -1px;
    cursor: pointer;
    user-select: none;
    filter: brightness(0.6) saturate(0.55) blur(0.2px);
    transition: transform 0.3s ease, filter 0.3s ease, color 0.3s ease, width 0.3s ease, left 0.3s ease;
}

.drum-panel::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 6px;
    height: 2px;
    background: rgba(148, 163, 184, 0.5);
    transform: translateY(-50%);
}

/* Active (selected) panel — sits flat-on and full-size in the viewing slot,
   color driven by --wheel-active-color CSS variable. The scale(1.1) vs.
   neighbors' scale(0.78), combined with the tighter perspective above, is
   what reads as "this one is facing you, the rest curve away around the
   reel" rather than a flat list dimming in place. */
.panel-active {
    left: 1% !important;
    width: 98% !important;
    border-radius: 10px !important;
    transform: rotateX(var(--panel-angle)) translateZ(var(--drum-radius, 100px)) scale(1.12, 1.15) !important;
    opacity: 1 !important;
    filter: brightness(1) saturate(1) !important;
    background-image:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0px, transparent 2px, transparent 9px, rgba(0, 0, 0, 0.1) 11px),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--wheel-active-color, #2563eb) 70%, black) 0%,
            var(--wheel-active-color, #2563eb) 50%,
            color-mix(in srgb, var(--wheel-active-color, #2563eb) 70%, black) 100%
        ) !important;
    color: white !important;
    box-shadow:
        0 0 24px color-mix(in srgb, var(--wheel-active-color, #2563eb) 65%, transparent),
        inset 0 0 10px rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    z-index: 100;
}

/* Drum text content */
.drum-text {
    font-size: clamp(0.7rem, 1.8cqw, 1.1rem);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-align: center;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    color: inherit;
}