/* ====================================================================
   SLAM WOW Network — styles.css
   CSS-coded bunker · fluid TV · canvas warp · hub
   ==================================================================== */

/* ── RESET ─────────────────────────────────────────────────── */
html, body { height: 100%; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Courier New', monospace;
    background: #030305;
    color: #e0e0e0;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

/* ── SCENE CONTAINER ───────────────────────────────────────── */
.scene {
    display: none;
    position: fixed;
    inset: 0;
}
.scene.active { display: block; }

/* ====================================================================
   LANDING — Room
   ==================================================================== */

.room {
    width: 100%;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height for mobile address bar */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: clamp(16px, 3vh, 50px);
}

/* ====================================================================
   CSS-CODED BUNKER BACKGROUND
   Layered radial/linear gradients, box-shadows, filters, blend modes
   ==================================================================== */

/* Base concrete wall */
.wall {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Concrete base — stacked linear gradients for texture striations */
    background:
        /* Vertical concrete panel seams */
        linear-gradient(90deg,
            transparent 19.8%, rgba(0,0,0,0.15) 20%, rgba(0,0,0,0.08) 20.2%,
            transparent 20.4%,
            transparent 49.8%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 50.2%,
            transparent 50.4%,
            transparent 79.8%, rgba(0,0,0,0.15) 80%, rgba(0,0,0,0.08) 80.2%,
            transparent 80.4%
        ),
        /* Horizontal strata / water stains */
        linear-gradient(180deg,
            #0c0b0f 0%,
            #0e0d11 8%,
            #0a090d 15%,
            #0d0c10 22%,
            #090810 35%,
            #0b0a0e 48%,
            #080710 62%,
            #0a090d 75%,
            #070610 88%,
            #050408 100%
        ),
        /* Base color */
        #080710;
    box-shadow:
        /* Ceiling shadow — heavy dark band at top */
        inset 0 80px 120px -40px rgba(0,0,0,0.85),
        /* Floor shadow — grounding darkness */
        inset 0 -60px 100px -30px rgba(0,0,0,0.7),
        /* Left wall recession */
        inset 80px 0 100px -50px rgba(0,0,0,0.5),
        /* Right wall recession */
        inset -80px 0 100px -50px rgba(0,0,0,0.5),
        /* Inner vignette for depth */
        inset 0 0 200px 40px rgba(0,0,0,0.4);
}

/* Overhead industrial light — warm amber spill from left-center */
.wall::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* Primary overhead light cone — warm amber */
        radial-gradient(
            ellipse 35% 50% at 38% 0%,
            rgba(180,120,50,0.08) 0%,
            rgba(140,90,30,0.04) 30%,
            rgba(100,60,20,0.015) 55%,
            transparent 80%
        ),
        /* Secondary cool fluorescent — right side, cyan tint */
        radial-gradient(
            ellipse 30% 55% at 72% 5%,
            rgba(40,120,160,0.06) 0%,
            rgba(30,80,130,0.03) 35%,
            rgba(20,50,100,0.01) 55%,
            transparent 75%
        ),
        /* Floor reflection — dim bounce from below */
        radial-gradient(
            ellipse 60% 20% at 50% 100%,
            rgba(20,18,30,0.3) 0%,
            transparent 80%
        ),
        /* Center depth haze — very subtle to give z-depth */
        radial-gradient(
            ellipse 50% 40% at 50% 55%,
            rgba(15,12,25,0.2) 0%,
            transparent 70%
        );
    pointer-events: none;
}

/* Noise / concrete grain texture overlay */
.wall::after {
    content: '';
    position: absolute;
    inset: -5%;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    opacity: 0.045;
    mix-blend-mode: overlay;
    pointer-events: none;
    filter: contrast(1.4) brightness(0.8);
}

/* ── Floor surface ────────────────────────────────────────── */
.bunker-floor {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 35%;
    z-index: 1;
    background:
        /* Concrete floor gradient — darker, grittier */
        linear-gradient(180deg,
            rgba(8,7,12,0.0) 0%,
            rgba(6,5,10,0.7) 15%,
            rgba(5,4,8,0.92) 35%,
            #040308 60%,
            #030206 100%
        );
    pointer-events: none;
}

/* Floor texture — scratches and wear */
.bunker-floor::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Scattered floor scratches */
        linear-gradient(87deg, transparent 30%, rgba(255,255,255,0.006) 30.1%, transparent 30.3%),
        linear-gradient(93deg, transparent 55%, rgba(255,255,255,0.005) 55.1%, transparent 55.3%),
        linear-gradient(91deg, transparent 70%, rgba(255,255,255,0.004) 70.1%, transparent 70.3%),
        linear-gradient(88deg, transparent 15%, rgba(255,255,255,0.005) 15.1%, transparent 15.3%);
    pointer-events: none;
    opacity: 0.6;
}

/* Floor reflection zone — where the TV light bounces */
.bunker-floor::after {
    content: '';
    position: absolute;
    top: 0; left: 25%; right: 25%;
    height: 40%;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(40,100,130,0.04) 0%,
        rgba(30,70,100,0.02) 30%,
        transparent 70%
    );
    pointer-events: none;
    filter: blur(20px);
}

/* ── Heavy Radial Vignette — forces eye to TV center ──────── */
.room-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        ellipse 55% 60% at 50% 65%,
        transparent 0%,
        transparent 30%,
        rgba(0,0,0,0.3) 60%,
        rgba(0,0,0,0.7) 85%,
        rgba(0,0,0,0.9) 100%
    );
    transition: all 1.5s ease;
}

/* ── TV Light Cone — upward glow behind TV ────────────────── */
.tv-light-cone {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 50%;
    background: radial-gradient(
        ellipse 40% 80% at 50% 100%,
        rgba(40,120,180,0.06) 0%,
        rgba(30,80,140,0.03) 30%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 2;
    transition: all 1s ease;
}

/* ── TV Light Spill — screen glow on floor surface ────────── */
.tv-light-spill {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 15%;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(40,140,200,0.06) 0%,
        rgba(30,100,170,0.03) 40%,
        transparent 80%
    );
    pointer-events: none;
    z-index: 2;
    filter: blur(15px);
    transition: all 1s ease;
}

/* ── Dust Motes — tiny particles catching TV light ────────── */
.dust-motes {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.dust-mote {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    filter: blur(0.5px);
}

.dust-mote:nth-child(1) {
    left: 35%; top: 40%;
    animation: dustFloat1 12s ease-in-out infinite;
}
.dust-mote:nth-child(2) {
    left: 55%; top: 55%;
    animation: dustFloat2 15s ease-in-out infinite 2s;
}
.dust-mote:nth-child(3) {
    left: 42%; top: 30%;
    animation: dustFloat3 18s ease-in-out infinite 5s;
}
.dust-mote:nth-child(4) {
    left: 60%; top: 45%;
    animation: dustFloat1 14s ease-in-out infinite 8s;
}

@keyframes dustFloat1 {
    0%, 100% { transform: translate(0, 0); opacity: 0.15; }
    25% { transform: translate(15px, -20px); opacity: 0.25; }
    50% { transform: translate(-10px, -35px); opacity: 0.1; }
    75% { transform: translate(8px, -15px); opacity: 0.2; }
}
@keyframes dustFloat2 {
    0%, 100% { transform: translate(0, 0); opacity: 0.1; }
    33% { transform: translate(-20px, -15px); opacity: 0.2; }
    66% { transform: translate(10px, -30px); opacity: 0.12; }
}
@keyframes dustFloat3 {
    0%, 100% { transform: translate(0, 0); opacity: 0.12; }
    50% { transform: translate(25px, -25px); opacity: 0.22; }
}

/* ── Intensification classes — toggled by JS on tape insert ── */
.room-vignette.intensified {
    background: radial-gradient(
        ellipse 45% 50% at 50% 65%,
        transparent 0%,
        transparent 25%,
        rgba(0,0,0,0.4) 55%,
        rgba(0,0,0,0.8) 80%,
        rgba(0,0,0,0.95) 100%
    );
}

.tv-light-cone.intensified {
    height: 60%;
    background: radial-gradient(
        ellipse 45% 85% at 50% 100%,
        rgba(40,140,200,0.10) 0%,
        rgba(30,90,160,0.05) 30%,
        transparent 70%
    );
}

.tv-light-spill.intensified {
    width: 60%;
    height: 20%;
    filter: blur(20px);
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(40,160,220,0.10) 0%,
        rgba(30,120,180,0.05) 40%,
        transparent 80%
    );
}

/* ── Station (TV + VCR + tape group) — PINNED TO BOTTOM ───── */
.station {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* The station must fit within available viewport height */
    max-height: calc(100vh - clamp(16px, 3vh, 50px));
    max-height: calc(100dvh - clamp(16px, 3vh, 50px));
}

/* ── TV + VCR stack ────────────────────────────────────────── */
.tv-vcr-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ── TV HALO — screen glow spills onto the bunker wall ─── */
.tv-halo {
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 160%;
    height: 130%;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(50,120,170,0.10) 0%,
        rgba(35,80,140,0.05) 25%,
        rgba(20,50,100,0.02) 45%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    transition: all 0.8s ease;
    animation: haloBreathe 5s ease-in-out infinite;
}

@keyframes haloBreathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Halo intensifies when tape is inserted */
.tv-halo.intensified {
    animation: none;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(50,200,230,0.22) 0%,
        rgba(35,150,200,0.12) 20%,
        rgba(20,90,160,0.06) 40%,
        transparent 65%
    ) !important;
}

/* Stronger glow when screen is active */
.tv-vcr-stack.screen-on .tv-halo {
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(50,170,210,0.18) 0%,
        rgba(35,130,190,0.10) 20%,
        rgba(20,80,150,0.05) 40%,
        transparent 65%
    );
}

/* ── Contact shadow — hard at base, anchors TV to floor ───── */
.tv-contact-shadow {
    width: 105%;
    height: 20px;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.6) 25%,
        rgba(0,0,0,0.25) 55%,
        transparent 100%
    );
    margin-top: -4px;
    pointer-events: none;
    z-index: 0;
    filter: blur(3px);
}

/* ====================================================================
   TV UNIT — FLUID SIZING
   The TV width is viewport-aware: clamp(320px, 50vw, 820px)
   Everything inside scales proportionally via em or %
   ==================================================================== */

.tv-unit {
    position: relative;
    z-index: 2;
    /* Fluid width: constrained by BOTH vw AND vh.
       min(50vw, 62vh) ensures the TV fits vertically on short screens
       AND horizontally on narrow screens. Then clamped to pixel bounds. */
    width: clamp(280px, min(46vw, 62vh), 700px);
}

.tv-unit.jitter {
    animation: tvJitter 0.15s ease-in-out;
}

@keyframes tvJitter {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-4px, 2px); }
    20%  { transform: translate(3px, -3px); }
    30%  { transform: translate(-3px, 4px); }
    40%  { transform: translate(4px, -3px); }
    50%  { transform: translate(-3px, 2px); }
    60%  { transform: translate(2px, -4px); }
    70%  { transform: translate(-4px, -2px); }
    80%  { transform: translate(3px, 3px); }
    90%  { transform: translate(-2px, -2px); }
    100% { transform: translate(0, 0); }
}

/* ── Pound zone ────────────────────────────────────────────── */
.pound-zone {
    position: absolute;
    top: -4px; left: -8px; right: -8px;
    height: 8%;
    min-height: 30px;
    z-index: 15;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
}

.pound-zone.hinting {
    animation: poundPulse 1.8s ease-in-out infinite;
}

@keyframes poundPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: inset 0 -2px 12px rgba(255,255,255,0.04); }
}

/* ── CRT Shell ─────────────────────────────────────────────── */
.crt-shell {
    position: relative;
    width: 100%;
}

/* ── CRT Bezel — fills parent width, proportional padding ─── */
.crt-bezel {
    width: 100%;
    background:
        /* Subtle vertical brushed-plastic texture */
        linear-gradient(92deg,
            rgba(255,255,255,0.008) 0%, transparent 2%,
            transparent 18%, rgba(255,255,255,0.005) 18.5%, transparent 19%,
            transparent 38%, rgba(255,255,255,0.008) 38.5%, transparent 39%,
            transparent 60%, rgba(255,255,255,0.006) 60.5%, transparent 61%,
            transparent 80%, rgba(255,255,255,0.005) 80.5%, transparent 81%
        ),
        /* Main body gradient — warm dark plastic with visible contour */
        linear-gradient(180deg,
            #353230 0%, #2e2c2a 6%, #292726 14%, #252322 25%,
            #212019 40%, #1d1c1a 55%, #1a1917 70%, #161514 82%,
            #131210 92%, #100f0d 100%
        );
    border-radius: 10px 10px 6px 6px;
    padding: 4.2% 4.5% 9%;
    position: relative;
    box-shadow:
        /* Top bevel highlight */
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 2px 6px rgba(255,255,255,0.03),
        /* Bottom inner shadow */
        inset 0 -4px 12px rgba(0,0,0,0.8),
        /* Left/right inner bevel */
        inset 3px 0 8px rgba(0,0,0,0.3),
        inset -3px 0 8px rgba(0,0,0,0.3),
        /* Hard drop shadow — close */
        0 4px 8px rgba(0,0,0,0.7),
        /* Medium shadow — body */
        0 12px 35px rgba(0,0,0,0.85),
        /* Ambient shadow — far */
        0 25px 70px rgba(0,0,0,0.6),
        /* Outline — subtle 1px border effect */
        0 0 0 1px rgba(60,55,50,0.4);
}

/* Top edge highlight — specular catch */
.crt-bezel::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.04) 15%,
        rgba(255,255,255,0.10) 40%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.10) 60%,
        rgba(255,255,255,0.04) 85%,
        transparent 100%
    );
    border-radius: 10px 10px 0 0;
}

/* Bezel rim light — faint cyan edge highlight when screen is active */
.crt-bezel.rim-light {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 2px 6px rgba(255,255,255,0.03),
        inset 0 -4px 12px rgba(0,0,0,0.8),
        inset 3px 0 8px rgba(0,0,0,0.3),
        inset -3px 0 8px rgba(0,0,0,0.3),
        0 4px 8px rgba(0,0,0,0.7),
        0 12px 35px rgba(0,0,0,0.85),
        0 25px 70px rgba(0,0,0,0.6),
        0 0 0 1px rgba(60,55,50,0.4),
        /* Rim light — cyan edge glow from screen */
        0 -2px 12px rgba(0,200,255,0.06),
        inset 0 0 4px rgba(0,200,255,0.03);
    transition: box-shadow 0.8s ease;
}

/* Chin molding line */
.crt-bezel::after {
    content: '';
    position: absolute;
    bottom: 7.5%; left: 4%; right: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), rgba(255,255,255,0.04), rgba(255,255,255,0.03), transparent);
}

/* ── Recessed frame ────────────────────────────────────────── */
.crt-inner-frame {
    width: 100%;
    aspect-ratio: 4/3;
    background: #030303;
    border-radius: 8px;
    padding: 3px;
    box-shadow:
        inset 0 4px 12px rgba(0,0,0,0.98),
        inset 0 -3px 6px rgba(0,0,0,0.8),
        inset 4px 0 10px rgba(0,0,0,0.7),
        inset -4px 0 10px rgba(0,0,0,0.7),
        0 1px 0 rgba(255,255,255,0.015);
}

/* ── CRT Screen ────────────────────────────────────────────── */
.crt-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 50px rgba(0,0,0,0.97),
        inset 0 0 100px rgba(0,0,0,0.5);
}

.crt-screen.glow {
    box-shadow:
        inset 0 0 50px rgba(0,0,0,0.97),
        inset 0 0 100px rgba(0,0,0,0.5),
        0 0 20px rgba(60,170,220,0.12),
        0 0 50px rgba(40,140,200,0.08),
        0 0 100px rgba(30,100,180,0.04),
        0 0 180px rgba(20,60,140,0.02);
}

/* ── CRT Controls (chin area) ──────────────────────────────── */
.crt-controls {
    position: absolute;
    bottom: 2%; left: 4.5%; right: 4.5%;
    display: flex;
    align-items: center;
    gap: 1.5%;
}

.crt-brand {
    font-size: clamp(8px, 1.4vw, 13px);
    color: #444;
    letter-spacing: clamp(3px, 0.8vw, 7px);
    font-weight: bold;
    text-transform: uppercase;
}

.crt-power-led {
    width: 6px; height: 6px;
    background: #120000;
    border-radius: 50%;
    border: 1px solid #220000;
    margin-left: 1.5%;
}

.crt-power-led.on {
    background: #ff2200;
    box-shadow: 0 0 4px rgba(255,34,0,0.7), 0 0 10px rgba(255,34,0,0.25);
}

.control-knobs {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.control-knob {
    width: clamp(14px, 2.5vw, 26px);
    height: clamp(12px, 2vw, 22px);
    background: linear-gradient(180deg, #2a2827, #1a1817);
    border-radius: 2px;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.6),
        0 1px 1px rgba(255,255,255,0.02),
        0 2px 5px rgba(0,0,0,0.4);
    position: relative;
}

.control-knob::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 40%; height: 1px;
    background: #333;
    transform: translate(-50%, -50%);
}

/* ── CRT Base ──────────────────────────────────────────────── */
.crt-base {
    width: 100%;
    height: clamp(10px, 2.2%, 18px);
    background: linear-gradient(180deg, #222020, #1a1817, #121010);
    border-radius: 0 0 6px 6px;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 4px 15px rgba(0,0,0,0.7),
        0 8px 30px rgba(0,0,0,0.4);
}

.crt-feet {
    display: flex;
    justify-content: space-between;
    padding: 0 13%;
    position: absolute;
    bottom: -6px;
    left: 0; right: 0;
}

.crt-foot {
    width: 7%;
    height: 6px;
    background: linear-gradient(180deg, #1a1816, #0e0c0a);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.7);
}

/* ── CANVAS ────────────────────────────────────────────────── */
#crtCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    filter: saturate(1.15) contrast(1.1);
}

/* ====================================================================
   CRT OVERLAY STACK
   ==================================================================== */

.crt-fisheye {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.35) 100%);
    border-radius: 5px;
}

.crt-glass {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background:
        linear-gradient(155deg,
            rgba(255,255,255,0.035) 0%, transparent 22%,
            transparent 72%, rgba(255,255,255,0.012) 100%
        ),
        radial-gradient(ellipse at 22% 12%, rgba(255,255,255,0.025) 0%, transparent 30%);
}

.crt-scanlines {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: repeating-linear-gradient(0deg,
        rgba(0,0,0,0.14) 0px, rgba(0,0,0,0.14) 1px,
        transparent 1px, transparent 2.5px
    );
}

.crt-vignette {
    position: absolute; top: -6%; left: -6%; right: -6%; bottom: -6%;
    z-index: 5; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.75) 100%);
}

.crt-chromatic {
    position: absolute; inset: 0; z-index: 6; pointer-events: none;
    box-shadow:
        inset 2px 0 6px rgba(255,0,0,0.05),
        inset -2px 0 6px rgba(0,0,255,0.05);
}

.crt-color-bleed {
    position: absolute; inset: 0; z-index: 7; pointer-events: none;
    background: linear-gradient(90deg,
        rgba(255,0,0,0.012), rgba(0,255,0,0.012), rgba(0,0,255,0.012)
    );
    mix-blend-mode: screen;
}

.crt-tracking-lines {
    position: absolute; inset: 0; z-index: 8; pointer-events: none;
    background: linear-gradient(
        transparent 0%, transparent 47%,
        rgba(255,255,255,0.02) 48%, rgba(255,255,255,0.02) 52%,
        transparent 53%, transparent 100%
    );
    background-size: 100% 200%;
    animation: trackingScroll 8s linear infinite;
}

@keyframes trackingScroll {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

.osd-layer {
    position: absolute; inset: 0; z-index: 10; pointer-events: none;
}

.osd-hint {
    position: absolute;
    top: 8%; left: 50%;
    transform: translateX(-50%);
    color: #00ffff;
    font-size: clamp(10px, 1.6vw, 14px);
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.4s;
    text-shadow: 0 0 8px rgba(0,255,255,0.5);
    white-space: nowrap;
}
.osd-hint.show { opacity: 1; }

.osd-counter {
    position: absolute;
    bottom: 4%; right: 4%;
    color: #fff;
    font-size: clamp(9px, 1.2vw, 12px);
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.3s;
    text-shadow: 0 0 4px rgba(255,255,255,0.35);
}
.osd-counter.show { opacity: 1; }

/* Screen reflection glint — simulates light catching the glass */
.crt-glint {
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.015) 15%,
        transparent 40%,
        transparent 100%
    );
    border-radius: 5px;
}

.crt-film-grain {
    position: absolute; inset: -5%;
    z-index: 20; pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: grainShift 0.08s steps(4) infinite;
}

@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3px, 2px); }
    50%  { transform: translate(2px, -3px); }
    75%  { transform: translate(-1px, -2px); }
    100% { transform: translate(0, 0); }
}

/* ====================================================================
   VCR — fluid, matches TV width
   ==================================================================== */

.vcr-unit {
    z-index: 1;
    margin-top: -3px;
    width: 100%;
}

.vcr-body {
    width: 100%;
    height: clamp(44px, 9vw, 85px);
    background: linear-gradient(180deg,
        #282828 0%, #222 20%, #1c1c1c 50%, #161616 80%, #111 100%
    );
    border-radius: 2px;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.06),
        inset 0 -2px 6px rgba(0,0,0,0.5),
        0 6px 25px rgba(0,0,0,0.7),
        0 0 0 1px #0a0a0a;
    display: flex;
    align-items: center;
    padding: 0 3%;
    gap: 2.5%;
    position: relative;
}

.vcr-body::before {
    content: '';
    position: absolute;
    top: 12%; left: 3%; right: 3%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
}

.vcr-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vcr-display {
    width: clamp(50px, 10vw, 100px);
    height: clamp(22px, 4vw, 36px);
    background: #001500;
    border: 1px solid #002800;
    border-radius: 2px;
    color: #00ff00;
    font-size: clamp(11px, 1.8vw, 18px);
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 10px rgba(0,255,0,0.1);
    letter-spacing: 2px;
}

.vcr-brand {
    font-size: clamp(5px, 0.8vw, 9px);
    color: #444;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
}

/* Clip wrapper — contains the slot, preserves flex layout */
.vcr-slot-clip {
    flex: 1;
    max-width: 40%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.vcr-slot {
    width: 100%;
    height: 65%;
    background: linear-gradient(180deg, #000, #040404, #080808);
    border: 2px solid #1a1a1a;
    border-radius: 3px;
    position: relative;
    transition: all 0.3s ease;
}

.slot-mouth {
    position: absolute;
    top: 50%; left: 8%; right: 8%;
    height: 2px;
    background: #060606;
    transform: translateY(-50%);
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.02);
}

.vcr-slot.proximity {
    border-color: #00ffff;
    box-shadow: 0 0 18px rgba(0,255,255,0.45), 0 0 40px rgba(0,255,255,0.18);
}

/* RED glow — "oh shit" moment when tape locks in */
.vcr-slot.inserted {
    border-color: #ff2244;
    box-shadow: 0 0 20px rgba(255,34,68,0.6), 0 0 50px rgba(255,34,68,0.25), 0 0 80px rgba(255,0,0,0.1);
}
.vcr-slot.inserted .slot-highlight {
    background: rgba(255,34,68,0.15);
    opacity: 1;
}

.slot-highlight {
    position: absolute; inset: 0;
    background: rgba(0,255,255,0.08);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.vcr-slot.proximity .slot-highlight { opacity: 1; }

.vcr-right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.vcr-buttons {
    display: flex;
    gap: 5px;
}

.vcr-btn {
    width: clamp(14px, 2.2vw, 22px);
    height: clamp(12px, 2vw, 20px);
    background: linear-gradient(180deg, #282828, #141414);
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.015);
}

.vcr-btn--play {
    background: linear-gradient(180deg, #2e2e2e, #1a1a1a);
    border: 1px solid #2a2a2a;
}

.vcr-indicator {
    width: 7px; height: 7px;
    background: #001500;
    border-radius: 50%;
    border: 1px solid #002800;
    animation: ledBreathe 4s ease-in-out infinite;
}

@keyframes ledBreathe {
    0%, 100% { background: #001500; box-shadow: none; }
    50% { background: #004400; box-shadow: 0 0 3px rgba(0,255,0,0.15); }
}

.vcr-indicator.active {
    background: #00ff00;
    box-shadow: 0 0 6px rgba(0,255,0,0.5);
    animation: none;
}

/* ====================================================================
   VHS TAPE — bigger single tape with idle animation
   ==================================================================== */

.tape-row {
    display: flex;
    justify-content: center;
    padding-top: clamp(8px, 1.5vh, 18px);
    /* Fixed min-height prevents layout collapse when tape goes position:fixed */
    min-height: clamp(80px, 9vw, 120px);
}

.vhs-tape {
    cursor: grab;
    z-index: 10;
    touch-action: none;
    position: relative;
    animation: tapeFloat 3s ease-in-out infinite;
}

@keyframes tapeFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(-0.5deg); }
}

.vhs-tape:hover {
    animation: none;
    transform: translateY(-8px) rotate(-1.5deg);
    transition: transform 0.2s ease;
}

.vhs-tape.dragging {
    cursor: grabbing;
    z-index: 100;
    animation: none;
    transition: none;
}
.vhs-tape.dragging:hover { transform: none; }

.vhs-body {
    width: clamp(120px, min(13vw, 16vh), 170px);
    height: clamp(72px, min(8vw, 10vh), 105px);
    background: linear-gradient(145deg, #1c1c1c, #0c0c0c);
    border-radius: 4px;
    box-shadow:
        0 6px 20px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.07);
    position: relative;
    padding: 6% 6%;
}

.vhs-label {
    border-radius: 2px;
    padding: 5%;
    height: 52%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.label-text {
    font-size: clamp(12px, 1.4vw, 16px);
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.label-text-sub {
    font-size: clamp(6px, 0.7vw, 8px);
    margin-top: 2px;
    letter-spacing: 1px;
    opacity: 0.8;
}

.vhs-window {
    position: absolute;
    bottom: 10%;
    left: 8%; right: 8%;
    height: 16%;
    background: rgba(0,0,0,0.85);
    border-radius: 2px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 14%;
}

.vhs-reel {
    width: 10px; height: 10px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: rgba(255,255,255,0.25);
    border-radius: 50%;
    animation: reelSpin 4s linear infinite;
}
.vhs-reel--right {
    border-color: rgba(255,255,255,0.05);
    border-top-color: rgba(255,255,255,0.15);
    animation-duration: 5s;
    animation-direction: reverse;
}

@keyframes reelSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vhs-grip {
    position: absolute;
    bottom: 3%; left: 50%;
    transform: translateX(-50%);
    width: 32%; height: 4px;
    background: #060606;
    border-radius: 2px;
}

/* Tape glow — under the tape for visual weight */
.tape-glow {
    position: absolute;
    bottom: -8px;
    left: 10%; right: 10%;
    height: 16px;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(0,204,204,0.15) 0%,
        rgba(0,204,204,0.05) 50%,
        transparent 100%
    );
    pointer-events: none;
    filter: blur(4px);
    transition: all 0.3s ease;
}

/* Glow intensifies on pickup */
.vhs-tape.dragging .tape-glow,
.vhs-tape.lifted .tape-glow {
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(0,204,204,0.35) 0%,
        rgba(0,204,204,0.12) 50%,
        transparent 100%
    );
    height: 24px;
    filter: blur(6px);
}

/* Tape elevation shadow — sits below tape, grows on drag */
.tape-shadow {
    position: absolute;
    bottom: -12px;
    left: 5%; right: 5%;
    height: 8px;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(0,0,0,0.5) 0%,
        rgba(0,0,0,0.2) 50%,
        transparent 100%
    );
    pointer-events: none;
    filter: blur(3px);
    transition: all 0.3s ease;
}

.vhs-tape.dragging .tape-shadow,
.vhs-tape.lifted .tape-shadow {
    bottom: -20px;
    left: -5%; right: -5%;
    height: 14px;
    filter: blur(6px);
    opacity: 0.7;
}

/* SLAM WOW tape colors */
.tape--slamwow .vhs-label { background: linear-gradient(135deg, #00cccc, #cc00cc); position: relative; }
.tape--slamwow .label-text { color: #fff; }
.tape--slamwow .label-text-sub { color: rgba(255,255,255,0.8); }


/* ── Tape prompt — fades in after delay ────────────────────── */
.tape-prompt {
    font-size: clamp(9px, 1.1vw, 12px);
    color: rgba(0,255,255,0.0);
    letter-spacing: 3px;
    margin-top: 10px;
    text-align: center;
    transition: color 1s ease;
    text-shadow: 0 0 8px rgba(0,255,255,0.0);
}

.tape-prompt.visible {
    color: rgba(0,255,255,0.5);
    text-shadow: 0 0 8px rgba(0,255,255,0.2);
}

.tape-prompt.hidden {
    color: rgba(0,255,255,0.0) !important;
    text-shadow: none !important;
    transition: color 0.4s ease;
}

/* ── Tape Insertion — animation is inline-style-driven from JS ─── */
/* No CSS classes needed — JS uses transition: all 0.35s ease */

/* ====================================================================
   WARP OVERLAY — fullscreen canvas tunnel
   ==================================================================== */

.warp-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: #000;
}

.warp-overlay.active {
    visibility: visible;
    opacity: 1;
}

#warpCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ====================================================================
   HUB SCENE
   ==================================================================== */

#hub-scene {
    background: #060608;
    overflow-y: auto;
}

#hub-scene.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.hub-container {
    width: 100%;
    max-width: 960px;
    min-height: 100vh;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 16px;
    border-bottom: 1px solid rgba(0,255,255,0.1);
}

.hub-logo {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: bold;
    color: #00ffff;
    letter-spacing: 4px;
    text-shadow: 0 0 12px rgba(0,255,255,0.3);
}

.hub-logo-sub {
    font-size: 12px;
    color: #ff00ff;
    letter-spacing: 3px;
    margin-left: 4px;
    text-shadow: 0 0 8px rgba(255,0,255,0.3);
}

.hub-eject-btn {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #ff3333;
    background: none;
    border: 1px solid rgba(255,51,51,0.3);
    padding: 6px 16px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.2s;
}

.hub-eject-btn:hover {
    background: rgba(255,51,51,0.1);
    border-color: #ff3333;
    text-shadow: 0 0 8px rgba(255,51,51,0.4);
}

.hub-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hub-ritual-btn {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #00ffcc;
    background: none;
    border: 1px solid rgba(0,255,255,0.2);
    padding: 6px 12px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.hub-ritual-btn:hover {
    background: rgba(0,255,255,0.08);
    border-color: rgba(0,255,255,0.4);
    text-shadow: 0 0 6px rgba(0,255,255,0.3);
}

.hub-ritual-btn.ritual-on {
    color: #ff00ff;
    border-color: rgba(255,0,255,0.3);
}

.hub-ritual-btn.ritual-on:hover {
    background: rgba(255,0,255,0.08);
    border-color: rgba(255,0,255,0.5);
    text-shadow: 0 0 6px rgba(255,0,255,0.3);
}

.hub-tabs {
    display: flex;
    gap: 0;
    padding: 16px 0 0;
}

.hub-tab {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #668888;
    background: none;
    border: 1px solid rgba(0,255,255,0.08);
    border-bottom: none;
    padding: 10px 24px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 0.2s;
    position: relative;
}

.hub-tab:hover {
    color: #00ffff;
    background: rgba(0,255,255,0.03);
}

.hub-tab.active {
    color: #00ffff;
    background: rgba(0,255,255,0.05);
    border-color: rgba(0,255,255,0.15);
    text-shadow: 0 0 8px rgba(0,255,255,0.3);
}

.hub-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: #060608;
}

.hub-content {
    flex: 1;
    border: 1px solid rgba(0,255,255,0.08);
    border-top: 1px solid rgba(0,255,255,0.15);
    padding: 20px;
    min-height: 400px;
    background: rgba(0,255,255,0.01);
    font-family: 'Courier New', monospace;
    color: #00ffff;
}

.hub-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 28px;
    border-top: 1px solid rgba(0,255,255,0.08);
    font-size: 9px;
    color: #444;
    letter-spacing: 1px;
}

/* Subscribe + Booking buttons */
.hub-footer-actions { display: flex; gap: 8px; }

.hub-subscribe-btn {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: #ff2244;
    letter-spacing: 3px;
    text-decoration: none;
    border: 1px solid rgba(255,34,68,0.4);
    padding: 7px 20px;
    background: rgba(255,0,40,0.06);
    transition: all 0.3s ease;
    text-shadow: 0 0 6px rgba(255,34,68,0.2);
}

.hub-subscribe-btn:hover {
    background: rgba(255,0,40,0.18);
    border-color: #ff2244;
    color: #fff;
    box-shadow: 0 0 18px rgba(255,34,68,0.2);
    text-shadow: 0 0 10px rgba(255,34,68,0.5);
    animation: subscribePulse 0.4s ease;
}

@keyframes subscribePulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* Booking button in footer */
.hub-booking-btn {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    color: #ffcc00;
    letter-spacing: 3px;
    border: 1px solid rgba(255,204,0,0.35);
    padding: 7px 20px;
    background: rgba(255,204,0,0.06);
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 6px rgba(255,204,0,0.2);
}

.hub-booking-btn:hover {
    background: rgba(255,204,0,0.15);
    border-color: #ffcc00;
    color: #fff;
    box-shadow: 0 0 18px rgba(255,204,0,0.15);
    text-shadow: 0 0 10px rgba(255,204,0,0.5);
}

/* Booking reveal panel */
.hub-booking-reveal {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    width: 100%;
    order: 10;
}

.hub-booking-reveal.show {
    max-height: 100px;
    opacity: 1;
}

.hub-booking-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    text-align: center;
}

.hub-booking-label {
    font-size: 7px;
    color: rgba(255,204,0,0.4);
    letter-spacing: 3px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.hub-booking-email {
    font-size: 13px;
    color: #ffcc00;
    letter-spacing: 1.5px;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(255,204,0,0.3);
    transition: all 0.2s ease;
    padding: 4px 12px;
    border: 1px solid rgba(255,204,0,0.2);
    background: rgba(255,204,0,0.04);
}

.hub-booking-email:hover {
    color: #fff;
    background: rgba(255,204,0,0.12);
    border-color: rgba(255,204,0,0.4);
    box-shadow: 0 0 15px rgba(255,204,0,0.15);
}

.hub-booking-hint {
    font-size: 7px;
    color: rgba(180,170,200,0.3);
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
}

/* Social links — bigger, yellow, dance on hover */
.hub-footer-links { display: flex; gap: 20px; }

.hub-footer-links .hub-social-link {
    color: #e6c832;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(230,200,50,0.15);
    transition: all 0.2s ease;
    display: inline-block;
}

.hub-footer-links .hub-social-link:hover {
    color: #ffe14d;
    text-shadow:
        0 0 8px rgba(255,225,77,0.4),
        0 0 20px rgba(255,225,77,0.15);
    animation: socialDance 0.5s ease;
}

@keyframes socialDance {
    0%   { transform: translateY(0) rotate(0deg); }
    15%  { transform: translateY(-3px) rotate(-3deg); }
    30%  { transform: translateY(-1px) rotate(2deg); }
    45%  { transform: translateY(-4px) rotate(-2deg); }
    60%  { transform: translateY(-1px) rotate(1.5deg); }
    75%  { transform: translateY(-3px) rotate(-1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Hub CRT overlays (subtle) */
.hub-scanlines {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 100;
    background: repeating-linear-gradient(0deg,
        rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px,
        transparent 1px, transparent 3px
    );
    opacity: 0.4;
}

.hub-noise {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 101;
    opacity: 0.01;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: grainShift 0.1s steps(3) infinite;
}

/* ====================================================================
   HUB CONTENT — Sub-page styles
   ==================================================================== */

.hub-content .section-title {
    font-size: 20px; color: #00ffff; letter-spacing: 3px;
    margin-bottom: 6px; text-align: center;
    text-shadow: 0 0 8px rgba(0,255,255,0.4);
}

/* ====================================================================
   CULT 45 — Prevue/TV Guide Channel × Late Night Infomercial Hybrid
   90s channel guide grid + dark neon broadcast energy
   ==================================================================== */

.hub-content .c45-station {
    font-family: 'Courier New', monospace;
    color: #c8c8c8;
}

/* ═══════════════════════════════════════════════════════════════
   PROMO ZONE — Top half (like Prevue "Tonight" promo area)
   Deep purple/blue gradient + CULT 45 branding
   ═══════════════════════════════════════════════════════════════ */

.hub-content .c45-promo {
    background:
        /* Subtle CRT scanline texture */
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px,
            transparent 1px, transparent 3px
        ),
        /* Deep purple-blue gradient like Prevue promo area */
        linear-gradient(160deg, #0a0020 0%, #0f0035 25%, #180040 50%, #0d0028 75%, #080018 100%);
    border: 1px solid rgba(100,60,200,0.25);
    border-bottom: none;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* Ambient glow on promo zone */
.hub-content .c45-promo::before {
    content: '';
    position: absolute;
    top: -50%; left: -20%; right: -20%; bottom: -50%;
    background: radial-gradient(ellipse at 60% 30%,
        rgba(100,40,200,0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
}

/* ── Promo Header: Logo + Clock row ───────────────────────── */
.hub-content .c45-promo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(100,60,200,0.15);
    position: relative;
    z-index: 1;
}

.hub-content .c45-promo-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hub-content .c45-logo-mark {
    font-size: 26px;
    font-weight: bold;
    color: #ff2244;
    letter-spacing: 3px;
    text-shadow:
        0 0 10px rgba(255,34,68,0.6),
        0 0 30px rgba(255,34,68,0.2),
        2px 0 0 rgba(0,255,255,0.12),
        -2px 0 0 rgba(255,0,255,0.12);
    line-height: 1;
}

.hub-content .c45-logo-mark span {
    color: #ff6600;
    text-shadow: 0 0 8px rgba(255,102,0,0.5);
}

.hub-content .c45-tagline {
    font-size: 7px;
    color: rgba(180,140,255,0.5);
    letter-spacing: 3px;
}

.hub-content .c45-promo-live {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.hub-content .c45-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,0,0,0.12);
    border: 1px solid rgba(255,0,0,0.35);
    padding: 2px 8px;
    font-size: 9px;
    color: #ff3344;
    letter-spacing: 2px;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(255,51,68,0.5);
}

.hub-content .c45-live-dot {
    width: 5px; height: 5px;
    background: #ff0033;
    border-radius: 50%;
    display: inline-block;
    animation: c45LivePulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 4px rgba(255,0,51,0.8);
}

@keyframes c45LivePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hub-content .c45-clock {
    font-size: 18px;
    font-weight: bold;
    color: #ffcc00;
    letter-spacing: 2px;
    text-shadow:
        0 0 8px rgba(255,204,0,0.4),
        0 0 20px rgba(255,204,0,0.15);
    font-variant-numeric: tabular-nums;
}

/* ── Promo Body: Video + Info side-by-side ────────────────── */
.hub-content .c45-promo-body {
    display: flex;
    gap: 14px;
    padding: 12px 14px 14px;
    position: relative;
    z-index: 1;
}

.hub-content .c45-promo-video {
    flex: 1;
    min-height: 200px;
    aspect-ratio: 16/9;
    background: #000;
    border: 2px solid rgba(100,60,200,0.3);
    overflow: hidden;
    position: relative;
    box-shadow:
        0 0 20px rgba(100,40,200,0.1),
        0 4px 20px rgba(0,0,0,0.5),
        inset 0 0 30px rgba(0,0,0,0.4);
}

.hub-content .c45-promo-video iframe {
    width: 100%; height: 100%; border: none;
}

.hub-content .c45-rec-badge {
    position: absolute;
    top: 6px; right: 8px;
    font-size: 9px;
    color: #ff0033;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255,0,51,0.8);
    animation: c45LivePulse 1.2s ease-in-out infinite;
    z-index: 2;
}

.hub-content .c45-promo-info {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.hub-content .c45-promo-label {
    font-size: 9px;
    color: #cc66ff;
    letter-spacing: 3px;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(204,102,255,0.3);
}

.hub-content .c45-promo-title {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow:
        0 0 8px rgba(255,255,255,0.2);
    line-height: 1.1;
}

.hub-content .c45-promo-desc {
    font-size: 10px;
    color: rgba(180,170,210,0.6);
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.hub-content .c45-promo-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.hub-content .c45-meta-tag {
    font-size: 7px;
    color: #cc66ff;
    letter-spacing: 2px;
    border: 1px solid rgba(204,102,255,0.2);
    padding: 2px 7px;
    background: rgba(204,102,255,0.06);
}

.hub-content .c45-promo-tune {
    font-size: 8px;
    color: rgba(255,204,0,0.5);
    letter-spacing: 2px;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   TICKER BAR — divider between promo and guide
   ═══════════════════════════════════════════════════════════════ */

.hub-content .c45-ticker {
    background: linear-gradient(90deg, #100020, #08001a, #100020);
    border: 1px solid rgba(100,60,200,0.15);
    border-top: 2px solid rgba(255,102,0,0.4);
    border-bottom: 2px solid rgba(100,60,200,0.3);
    padding: 4px 0;
    overflow: hidden;
    white-space: nowrap;
}

.hub-content .c45-ticker-inner {
    display: inline-block;
    font-size: 10px;
    color: #ff9933;
    letter-spacing: 2px;
    animation: c45Scroll 18s linear infinite;
    text-shadow: 0 0 6px rgba(255,153,51,0.3);
    padding-left: 100%;
}

@keyframes c45Scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ═══════════════════════════════════════════════════════════════
   CHANNEL GUIDE — Bottom half, Prevue-style scrolling grid
   Blue background, white/cyan text, bordered cells
   ═══════════════════════════════════════════════════════════════ */

.hub-content .c45-guide {
    background:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px,
            transparent 1px, transparent 3px
        ),
        linear-gradient(180deg, #060825 0%, #080a30 50%, #050720 100%);
    border: 1px solid rgba(60,80,200,0.2);
    border-top: none;
    margin-bottom: 12px;
}

/* ── Guide Header — column labels ─────────────────────────── */
.hub-content .c45-guide-header {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 1fr;
    background: linear-gradient(180deg, #1a1e60, #12155a, #0e1050);
    border-bottom: 2px solid rgba(80,100,255,0.35);
}

.hub-content .c45-guide-ch-col,
.hub-content .c45-guide-time-col {
    padding: 6px 10px;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #aab4ff;
    border-right: 1px solid rgba(80,100,255,0.15);
    text-shadow: 0 0 4px rgba(170,180,255,0.2);
}

.hub-content .c45-guide-time-col:last-child {
    border-right: none;
}

.hub-content .c45-guide-now {
    color: #ffcc00;
    text-shadow: 0 0 6px rgba(255,204,0,0.3);
}

/* ── Guide Rows — static channel listings ─────────────────── */
.hub-content .c45-guide-rows {
    /* No scroll, no max-height — all rows visible */
}

.hub-content .c45-guide-row {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 1fr;
    border-bottom: 1px solid rgba(60,80,200,0.12);
    transition: background 0.2s ease;
}

.hub-content .c45-guide-row:last-child {
    border-bottom: none;
}

.hub-content .c45-guide-row:hover {
    background: rgba(60,80,200,0.08);
}

/* Channel number + call sign */
.hub-content .c45-guide-ch {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 10px 8px;
    background: rgba(20,25,80,0.4);
    border-right: 1px solid rgba(60,80,200,0.15);
    flex-direction: column;
    justify-content: center;
}

.hub-content .c45-guide-ch .c45-ch-num {
    font-size: 20px;
    font-weight: bold;
    color: #ffcc00;
    text-shadow:
        0 0 6px rgba(255,204,0,0.4),
        0 0 14px rgba(255,204,0,0.15);
    line-height: 1;
    letter-spacing: 1px;
}

.hub-content .c45-guide-ch .c45-ch-call {
    font-size: 7px;
    color: #8898dd;
    letter-spacing: 2px;
    margin-top: 3px;
    text-transform: uppercase;
}

/* Program cells */
.hub-content .c45-guide-cell {
    padding: 10px;
    font-size: 11px;
    color: #bcc4ee;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(60,80,200,0.08);
    display: flex;
    align-items: center;
}

.hub-content .c45-guide-cell:last-child {
    border-right: none;
}

/* NOW column highlight */
.hub-content .c45-guide-cell--now {
    color: #fff;
    background: rgba(80,100,255,0.06);
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255,255,255,0.1);
}

/* Clickable program links */
.hub-content .c45-guide-link {
    color: #00ccff;
    text-decoration: none;
    transition: all 0.2s ease;
    text-shadow: 0 0 4px rgba(0,204,255,0.2);
    cursor: pointer;
}

.hub-content .c45-guide-link:hover {
    color: #fff;
    text-shadow:
        0 0 6px rgba(0,204,255,0.5),
        0 0 15px rgba(0,204,255,0.2);
}

/* TikTok links get a subtle pink tint */
.hub-content .c45-guide-link[data-video^="tt:"] {
    color: #ee5599;
    text-shadow: 0 0 4px rgba(238,85,153,0.2);
}

.hub-content .c45-guide-link[data-video^="tt:"]:hover {
    color: #ffaacc;
    text-shadow:
        0 0 6px rgba(255,170,204,0.5),
        0 0 15px rgba(255,170,204,0.2);
}

.hub-content .c45-guide-link[data-video^="tt:"]::after {
    content: ' TT';
    font-size: 6px;
    color: rgba(238,85,153,0.4);
    letter-spacing: 1px;
    vertical-align: super;
}

/* Active guide link — currently playing in promo zone */
.hub-content .c45-guide-link.active {
    color: #ffcc00;
    text-shadow:
        0 0 6px rgba(255,204,0,0.5),
        0 0 14px rgba(255,204,0,0.2);
    position: relative;
}

.hub-content .c45-guide-link.active::before {
    content: '▶ ';
    font-size: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.hub-content .c45-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 7px;
    color: rgba(140,130,200,0.3);
    letter-spacing: 3px;
    border-top: 1px solid rgba(100,60,200,0.1);
}

/* ====================================================================
   KALEIDE — Full MySpace Overhaul
   Neon purple/pink, deep modules, Top 8, live comments, samurai avatar
   ==================================================================== */

.hub-content .myspace-layout {
    background: transparent;
    position: relative;
}

/* ── Profile Header ──────────────────────────────────────── */
.hub-content .myspace-header {
    background:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px,
            transparent 1px, transparent 3px
        ),
        linear-gradient(135deg, #1a0028 0%, #2a0a3a 30%, #3a1050 50%, #2a0a3a 70%, #1a0028 100%);
    border-bottom: 2px solid #ff44cc;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Neon glow line across header */
.hub-content .myspace-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff44cc, #cc44ff, #ff44cc, transparent);
    box-shadow: 0 0 8px rgba(255,68,204,0.4), 0 0 20px rgba(255,68,204,0.15);
}

.hub-content .myspace-header h1 {
    font-size: 20px;
    color: #ff88dd;
    letter-spacing: 4px;
    text-shadow:
        0 0 10px rgba(255,136,221,0.5),
        0 0 30px rgba(255,136,221,0.2),
        2px 0 0 rgba(0,255,255,0.08),
        -2px 0 0 rgba(255,0,255,0.08);
    margin: 0;
}

.hub-content .ms-header-meta {
    display: flex;
    gap: 12px;
    font-size: 8px;
    color: rgba(200,160,220,0.4);
    letter-spacing: 1px;
}

/* ── Grid Layout ─────────────────────────────────────────── */
.hub-content .myspace-grid {
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.hub-content .myspace-left { width: 230px; flex-shrink: 0; }
.hub-content .myspace-right { flex: 1; min-width: 0; }

/* ── Module Base ─────────────────────────────────────────── */
.hub-content .myspace-module {
    background:
        linear-gradient(145deg, rgba(30,10,40,0.95), rgba(10,5,15,0.98));
    border: 1px solid rgba(180,80,220,0.15);
    margin-bottom: 8px;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.02);
    transition: border-color 0.3s ease;
}

.hub-content .myspace-module:hover {
    border-color: rgba(180,80,220,0.3);
}

.hub-content .module-header {
    background: linear-gradient(180deg, #4a1a5a, #3a0a4a);
    border-bottom: 1px solid rgba(255,68,204,0.2);
    padding: 6px 10px;
    font-size: 10px;
    font-weight: bold;
    color: #ff88dd;
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(255,136,221,0.3);
}

.hub-content .module-body { padding: 10px; }

/* ── Profile Card ────────────────────────────────────────── */
.hub-content .profile-avatar {
    width: 164px; height: 164px;
    background: #000;
    border: 2px solid #ff44cc;
    margin: 0 auto 8px;
    box-shadow:
        0 0 10px rgba(255,68,204,0.2),
        inset 0 0 20px rgba(0,0,0,0.8);
    overflow: hidden;
    position: relative;
}

.hub-content .profile-avatar canvas {
    width: 100%; height: 100%;
    display: block;
}

.hub-content .profile-tagline {
    color: #ff88dd;
    font-size: 11px;
    font-style: italic;
    text-align: center;
    margin-bottom: 8px;
    text-shadow: 0 0 6px rgba(255,136,221,0.2);
}

.hub-content .ms-profile-details {
    margin-bottom: 8px;
}

.hub-content .ms-detail-row {
    font-size: 9px;
    color: #998;
    padding: 2px 0;
    border-bottom: 1px dotted rgba(180,80,220,0.1);
}

.hub-content .ms-detail-label {
    color: #cc88ee;
    font-weight: bold;
    letter-spacing: 1px;
}

.hub-content .ms-mood {
    color: #ff44cc;
    text-shadow: 0 0 4px rgba(255,68,204,0.3);
}

.hub-content .status-chip {
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.3);
    color: #00ff88;
    padding: 4px 10px;
    font-size: 8px;
    letter-spacing: 2px;
    text-align: center;
    border-radius: 2px;
    text-shadow: 0 0 6px rgba(0,255,136,0.3);
    animation: msOnlinePulse 2s ease-in-out infinite;
}

@keyframes msOnlinePulse {
    0%, 100% { box-shadow: 0 0 4px rgba(0,255,136,0.1); }
    50% { box-shadow: 0 0 12px rgba(0,255,136,0.25); }
}

/* ── Contact Buttons ─────────────────────────────────────── */
.hub-content .myspace-btn {
    display: block;
    width: 100%;
    background: linear-gradient(145deg, #1e0a28, #0e0518);
    border: 1px solid rgba(180,80,220,0.2);
    color: #a88898;
    padding: 5px 8px;
    margin-bottom: 3px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    letter-spacing: 1px;
}

/* Real link buttons glow on hover */
.hub-content .myspace-btn.ms-btn-real:hover {
    border-color: #ff44cc;
    color: #ff88dd;
    background: rgba(255,68,204,0.08);
    box-shadow: 0 0 10px rgba(255,68,204,0.1);
    text-shadow: 0 0 6px rgba(255,136,221,0.3);
}

/* Easter egg buttons — different hover to hint they're special */
.hub-content .myspace-btn.ms-btn-egg {
    color: #665;
    border-color: rgba(100,80,80,0.15);
}

.hub-content .myspace-btn.ms-btn-egg:hover {
    color: #ff4466;
    border-color: rgba(255,68,102,0.3);
    background: rgba(255,0,40,0.04);
}

/* ── Interests ───────────────────────────────────────────── */
.hub-content .interests-module p {
    color: #a88898;
    font-size: 10px;
    line-height: 1.7;
    margin-bottom: 3px;
}
.hub-content .interests-module strong {
    color: #cc88ee;
    letter-spacing: 0.5px;
}

/* ── TOP 8 FRIENDS ───────────────────────────────────────── */
.hub-content .ms-top8-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.hub-content .ms-top8-friend {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px 2px;
}

.hub-content .ms-top8-friend:hover {
    transform: translateY(-2px);
}

.hub-content .ms-friend-avatar {
    width: 36px; height: 36px;
    border: 1px solid rgba(180,80,220,0.3);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 3px;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #1a0a2a, #0a0518);
}

.hub-content .ms-top8-friend:hover .ms-friend-avatar {
    border-color: #ff44cc;
    box-shadow: 0 0 8px rgba(255,68,204,0.3);
}

.hub-content .ms-friend--cult45 {
    background: linear-gradient(135deg, #330011, #1a0008);
    color: #ff2244;
    text-shadow: 0 0 4px rgba(255,34,68,0.4);
}

.hub-content .ms-friend--merch {
    background: linear-gradient(135deg, #002828, #001515);
    color: #00ffff;
    text-shadow: 0 0 4px rgba(0,255,255,0.4);
}

.hub-content .ms-friend--social {
    background: linear-gradient(135deg, #1a0028, #0a0018);
    color: #cc88ee;
}

.hub-content .ms-friend--spotify {
    background: linear-gradient(135deg, #0a2a0a, #051a05);
    color: #1db954;
    text-shadow: 0 0 4px rgba(29,185,84,0.4);
}

.hub-content .ms-friend--empty .ms-friend-avatar {
    border-style: dashed;
    color: #333;
    background: transparent;
}

.hub-content .ms-friend-name {
    font-size: 7px;
    color: #887;
    letter-spacing: 0.5px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-content .ms-top8-friend:hover .ms-friend-name {
    color: #ff88dd;
}

/* ── Player ──────────────────────────────────────────────── */
.hub-content .myspace-player { margin-bottom: 4px; }

.hub-content .myspace-player iframe {
    border: 1px solid rgba(180,80,220,0.2) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* ── Bulletins ───────────────────────────────────────────── */
.hub-content .bulletin-post {
    background: rgba(8,4,12,0.8);
    border-left: 2px solid #6a2a8a;
    padding: 6px 8px;
    margin-bottom: 4px;
    font-size: 10px;
    color: #a88898;
    transition: border-color 0.2s ease;
}

.hub-content .bulletin-post:hover {
    border-left-color: #ff44cc;
    background: rgba(255,68,204,0.02);
}

.hub-content .bulletin-post strong { color: #cc88ee; }

.hub-content .bulletin-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.hub-content .bulletin-date {
    font-size: 7px;
    color: #554;
    letter-spacing: 1px;
}

.hub-content .bulletin-badge {
    font-size: 6px;
    letter-spacing: 1px;
    padding: 1px 5px;
    font-weight: bold;
    border-radius: 1px;
}

.hub-content .ms-badge-new {
    background: rgba(255,68,204,0.15);
    color: #ff44cc;
    border: 1px solid rgba(255,68,204,0.3);
    text-shadow: 0 0 4px rgba(255,68,204,0.4);
}

.hub-content .ms-badge-soon {
    background: rgba(255,170,0,0.1);
    color: #ffaa00;
    border: 1px solid rgba(255,170,0,0.25);
}

.hub-content .bulletin-link {
    color: #a88898;
    text-decoration: none;
    transition: color 0.2s ease;
}

.hub-content .bulletin-link:hover {
    color: #ff88dd;
    text-shadow: 0 0 4px rgba(255,136,221,0.2);
}

/* ── Comments ────────────────────────────────────────────── */
.hub-content .ms-comment-form {
    display: flex;
    gap: 4px;
    margin-bottom: 3px;
}

.hub-content .ms-comment-input {
    flex: 1;
    background: rgba(8,4,12,0.9);
    border: 1px solid rgba(180,80,220,0.2);
    color: #d8a8c8;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    padding: 5px 8px;
    outline: none;
    transition: border-color 0.2s ease;
}

.hub-content .ms-comment-input::placeholder {
    color: #443;
    font-style: italic;
}

.hub-content .ms-comment-input:focus {
    border-color: #ff44cc;
    box-shadow: 0 0 8px rgba(255,68,204,0.15);
}

.hub-content .ms-comment-submit {
    background: linear-gradient(180deg, #5a2a6a, #3a1a4a);
    border: 1px solid rgba(255,68,204,0.3);
    color: #ff88dd;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hub-content .ms-comment-submit:hover {
    background: linear-gradient(180deg, #7a3a8a, #5a2a6a);
    border-color: #ff44cc;
    box-shadow: 0 0 10px rgba(255,68,204,0.2);
}

.hub-content .ms-char-count {
    font-size: 7px;
    color: #443;
    text-align: right;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.hub-content .ms-comment-list {
    max-height: 200px;
    overflow-y: auto;
}

/* Scrollbar styling for comments */
.hub-content .ms-comment-list::-webkit-scrollbar { width: 4px; }
.hub-content .ms-comment-list::-webkit-scrollbar-track { background: #0a0510; }
.hub-content .ms-comment-list::-webkit-scrollbar-thumb { background: #3a1a4a; border-radius: 2px; }

.hub-content .comment {
    background: rgba(8,4,12,0.6);
    border: 1px solid rgba(180,80,220,0.06);
    border-left: 2px solid rgba(180,80,220,0.12);
    padding: 5px 6px;
    margin-bottom: 3px;
    font-size: 10px;
    color: #776;
    transition: all 0.15s ease;
    word-break: break-word;
}

.hub-content .comment:hover {
    border-left-color: rgba(255,68,204,0.3);
    background: rgba(255,68,204,0.015);
}

.hub-content .comment .comment-user {
    color: #cc88ee;
    font-weight: bold;
    font-size: 9px;
    margin-right: 4px;
}

/* New comments get a flash */
.hub-content .comment.ms-new {
    animation: msCommentFlash 0.6s ease;
}

@keyframes msCommentFlash {
    0% { background: rgba(255,68,204,0.1); border-left-color: #ff44cc; }
    100% { background: rgba(8,4,12,0.6); border-left-color: rgba(180,80,220,0.12); }
}

/* ── Easter Egg Popup ────────────────────────────────────── */
.hub-content .ms-egg-popup {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #1a0028, #0a0518);
    border: 2px solid #ff44cc;
    box-shadow:
        0 0 30px rgba(255,68,204,0.3),
        0 0 80px rgba(255,68,204,0.1);
    padding: 20px 30px;
    z-index: 10000;
    font-family: 'Courier New', monospace;
    text-align: center;
    color: #ff88dd;
    font-size: 13px;
    letter-spacing: 2px;
    animation: msPopIn 0.3s ease;
    cursor: pointer;
    max-width: 340px;
}

.hub-content .ms-egg-popup.show { display: block; }

.hub-content .ms-egg-popup .ms-egg-dismiss {
    display: block;
    font-size: 8px;
    color: #554;
    margin-top: 10px;
    letter-spacing: 1px;
}

@keyframes msPopIn {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ── Footer ──────────────────────────────────────────────── */
.hub-content .myspace-footer {
    text-align: center;
    padding: 8px;
    color: #332;
    font-size: 7px;
    letter-spacing: 1px;
    border-top: 1px solid rgba(180,80,220,0.08);
}

/* ====================================================================
   MERCH — Streetwear Drop Culture × Retro Terminal
   Dark, clean, high-contrast with cyan + white accents
   ==================================================================== */

.hub-content .merch-container {
    max-width: 100%;
    font-family: 'Courier New', monospace;
    color: #c8c8c8;
}

/* ═══ MERCH HEADER — branded banner ═══════════════════════════ */

.hub-content .merch-header {
    text-align: center;
    padding: 20px 14px 16px;
    background:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px,
            transparent 1px, transparent 3px
        ),
        linear-gradient(160deg, #080818 0%, #0a0a20 50%, #060614 100%);
    border: 1px solid rgba(0,255,255,0.1);
    border-bottom: 2px solid rgba(0,255,255,0.2);
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

.hub-content .merch-header::before {
    content: '';
    position: absolute;
    top: -50%; left: -20%; right: -20%; bottom: -50%;
    background: radial-gradient(ellipse at 50% 40%,
        rgba(0,255,255,0.04) 0%, transparent 60%);
    pointer-events: none;
}

.hub-content .merch-header-brand {
    position: relative;
    z-index: 1;
}

.hub-content .merch-logo {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 8px;
    text-shadow:
        0 0 15px rgba(255,255,255,0.15),
        3px 0 0 rgba(0,255,255,0.1),
        -3px 0 0 rgba(255,0,255,0.1);
    line-height: 1;
}

.hub-content .merch-logo-sub {
    font-size: 12px;
    color: #00ffff;
    letter-spacing: 12px;
    text-shadow: 0 0 8px rgba(0,255,255,0.3);
    margin-top: 2px;
}

.hub-content .merch-header-tagline {
    font-size: 8px;
    color: rgba(0,255,255,0.35);
    letter-spacing: 4px;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

/* ═══ DROP WINDOW — announcement zone ═════════════════════════ */

.hub-content .drop-window {
    background:
        repeating-linear-gradient(0deg,
            rgba(0,255,255,0.01) 0px, rgba(0,255,255,0.01) 1px,
            transparent 1px, transparent 4px
        ),
        linear-gradient(135deg, #0a0a1a, #060612, #0a0a1a);
    border: 1px solid rgba(0,255,255,0.15);
    border-top: none;
    padding: 0;
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.hub-content .drop-window-inner {
    padding: 18px 16px;
    position: relative;
    z-index: 1;
}

.hub-content .drop-signal-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hub-content .drop-signal-dot {
    width: 4px;
    height: 4px;
    background: #00ffff;
    border-radius: 50%;
    animation: dropPulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(0,255,255,0.6);
}

@keyframes dropPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.hub-content .drop-signal-text {
    font-size: 7px;
    color: rgba(0,255,255,0.45);
    letter-spacing: 4px;
    font-weight: bold;
}

.hub-content .drop-banner {
    font-size: 22px;
    color: #00ffff;
    letter-spacing: 6px;
    margin-bottom: 6px;
    text-shadow:
        0 0 10px rgba(0,255,255,0.4),
        0 0 30px rgba(0,255,255,0.1);
    font-weight: bold;
}

.hub-content .drop-status {
    font-size: 13px;
    color: #fff;
    letter-spacing: 3px;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255,255,255,0.15);
}

.hub-content .drop-subtext {
    font-size: 9px;
    color: rgba(180,180,200,0.4);
    letter-spacing: 1px;
    margin-top: 8px;
}

.hub-content .drop-highlight {
    color: #00ffff;
    text-shadow: 0 0 4px rgba(0,255,255,0.3);
}

/* ═══ SECTION LABELS ══════════════════════════════════════════ */

.hub-content .merch-section-label {
    font-size: 9px;
    color: rgba(0,255,255,0.4);
    letter-spacing: 4px;
    font-weight: bold;
    padding: 8px 0 6px;
    border-bottom: 1px solid rgba(0,255,255,0.08);
    margin-bottom: 12px;
}

/* ═══ CAPSULE CARDS — product grid ════════════════════════════ */

.hub-content .capsules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.hub-content .capsule-card {
    background:
        linear-gradient(180deg, #0c0c1a 0%, #080812 100%);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.hub-content .capsule-card:hover {
    border-color: rgba(0,255,255,0.3);
    box-shadow: 0 0 20px rgba(0,255,255,0.06);
    transform: translateY(-2px);
}

.hub-content .capsule-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hub-content .capsule-card:hover::after { opacity: 1; }

/* Capsule image area */
.hub-content .capsule-image {
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.hub-content .capsule-image-inner {
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg,
            rgba(255,255,255,0.01) 0px,
            rgba(255,255,255,0.01) 1px,
            transparent 1px,
            transparent 8px
        ),
        linear-gradient(135deg, #0a0a16 0%, #12121e 50%, #0a0a16 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.hub-content .capsule-card:hover .capsule-image-inner {
    background:
        repeating-linear-gradient(45deg,
            rgba(0,255,255,0.02) 0px,
            rgba(0,255,255,0.02) 1px,
            transparent 1px,
            transparent 8px
        ),
        linear-gradient(135deg, #0c0c1e 0%, #141428 50%, #0c0c1e 100%);
}

.hub-content .capsule-run-num {
    font-size: 48px;
    font-weight: bold;
    color: rgba(255,255,255,0.06);
    letter-spacing: 4px;
    font-family: 'Courier New', monospace;
    transition: color 0.3s ease;
}

.hub-content .capsule-card:hover .capsule-run-num {
    color: rgba(0,255,255,0.12);
}

/* Active run image glow */
.hub-content .capsule-image--active {
    background:
        radial-gradient(ellipse at center, rgba(0,255,255,0.04) 0%, transparent 70%),
        repeating-linear-gradient(45deg,
            rgba(0,255,255,0.01) 0px,
            rgba(0,255,255,0.01) 1px,
            transparent 1px,
            transparent 8px
        ),
        linear-gradient(135deg, #0a0a16 0%, #12121e 50%, #0a0a16 100%);
}

/* Lookbook image style */
.hub-content .capsule-image--lookbook {
    background:
        repeating-linear-gradient(-45deg,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 1px,
            transparent 6px
        ),
        linear-gradient(135deg, #10101e 0%, #0a0a16 100%);
}

/* SOLD OUT stamp overlay */
.hub-content .capsule-sold-stamp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-size: 22px;
    font-weight: bold;
    color: rgba(255,40,60,0.35);
    letter-spacing: 6px;
    border: 2px solid rgba(255,40,60,0.2);
    padding: 4px 16px;
    pointer-events: none;
    text-shadow: 0 0 10px rgba(255,40,60,0.15);
}

/* Capsule info area */
.hub-content .capsule-info {
    padding: 12px;
}

.hub-content .capsule-card h3 {
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: 3px;
    font-weight: bold;
}

.hub-content .capsule-desc {
    color: rgba(180,180,200,0.5);
    font-size: 9px;
    margin-bottom: 8px;
    line-height: 1.5;
    letter-spacing: 0.3px;
}

.hub-content .capsule-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.hub-content .capsule-meta-item {
    font-size: 7px;
    color: rgba(0,255,255,0.4);
    letter-spacing: 2px;
    border: 1px solid rgba(0,255,255,0.12);
    padding: 2px 6px;
    background: rgba(0,255,255,0.03);
}

.hub-content .capsule-status {
    display: inline-block;
    background: #00ffff;
    color: #000;
    padding: 3px 10px;
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: bold;
}

.hub-content .capsule-status.sold-out {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.08);
}

.hub-content .capsule-status--view {
    background: transparent;
    color: #00ffff;
    border: 1px solid rgba(0,255,255,0.3);
}

/* Sold out card dim */
.hub-content .capsule--soldout {
    opacity: 0.6;
}

.hub-content .capsule--soldout:hover {
    opacity: 0.8;
}

/* ═══ DETAILS GRID — sizing, materials, shipping ══════════════ */

.hub-content .merch-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.hub-content .merch-detail-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 14px 12px;
    text-align: center;
    transition: border-color 0.2s ease;
}

.hub-content .merch-detail-card:hover {
    border-color: rgba(0,255,255,0.15);
}

.hub-content .merch-detail-icon {
    font-size: 16px;
    color: rgba(0,255,255,0.3);
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-weight: bold;
}

.hub-content .merch-detail-title {
    font-size: 10px;
    color: #fff;
    letter-spacing: 3px;
    font-weight: bold;
    margin-bottom: 6px;
}

.hub-content .merch-detail-text {
    font-size: 9px;
    color: rgba(180,180,200,0.45);
    line-height: 1.6;
    letter-spacing: 0.3px;
}

/* ═══ NOTIFY SECTION ══════════════════════════════════════════ */

.hub-content .merch-notify {
    text-align: center;
    padding: 16px 14px;
    background: rgba(0,255,255,0.02);
    border: 1px solid rgba(0,255,255,0.08);
    margin-bottom: 14px;
}

.hub-content .merch-notify-label {
    font-size: 11px;
    color: #00ffff;
    letter-spacing: 4px;
    font-weight: bold;
    margin-bottom: 6px;
    text-shadow: 0 0 6px rgba(0,255,255,0.2);
}

.hub-content .merch-notify-text {
    font-size: 9px;
    color: rgba(180,180,200,0.4);
    letter-spacing: 0.5px;
    line-height: 1.5;
}

/* ═══ SOCIALS ═════════════════════════════════════════════════ */

.hub-content .merch-socials {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 10px;
    margin-bottom: 10px;
}

.hub-content .social-link {
    color: #00ffff;
    font-size: 10px;
    letter-spacing: 2px;
    text-decoration: none;
    border: 1px solid rgba(0,255,255,0.2);
    padding: 7px 18px;
    transition: all 0.25s ease;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    background: rgba(0,255,255,0.03);
}

.hub-content .social-link:hover {
    background: #00ffff;
    color: #000;
    box-shadow: 0 0 15px rgba(0,255,255,0.15);
    text-shadow: none;
}

/* ═══ MERCH FOOTER ════════════════════════════════════════════ */

.hub-content .merch-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 7px;
    color: rgba(140,150,180,0.25);
    letter-spacing: 3px;
    border-top: 1px solid rgba(0,255,255,0.06);
}

/* ====================================================================
   RESPONSIVE — tablet
   ==================================================================== */

@media (max-width: 768px) {
    /* Bunker is pure CSS now — no image swap needed */
    .bunker-floor { height: 30%; }
}

/* ====================================================================
   RESPONSIVE — small screens
   ==================================================================== */

@media (max-width: 600px) {
    /* Station is flex-end aligned — no margin-top needed */

    .vhs-window { display: none; }
    .vhs-grip { display: none; }

    .hub-container { padding: 0 12px; }
    .hub-logo { font-size: 18px; letter-spacing: 2px; }
    .hub-logo-sub { font-size: 10px; }
    .hub-tabs { flex-wrap: wrap; }
    .hub-tab { font-size: 11px; padding: 8px 14px; letter-spacing: 1px; }
    .hub-content { padding: 12px; }

    /* CULT 45 Prevue guide — stack promo vertically, compact grid */
    .hub-content .c45-promo-body { flex-direction: column; }
    .hub-content .c45-promo-info { flex: none; }
    .hub-content .c45-promo-header { flex-direction: column; gap: 6px; text-align: center; }
    .hub-content .c45-promo-live { align-items: center; }
    .hub-content .c45-guide-header,
    .hub-content .c45-guide-row { grid-template-columns: 60px 1fr 1fr; }
    .hub-content .c45-guide-cell:last-child,
    .hub-content .c45-guide-time-col:last-child { display: none; }
    .hub-content .c45-guide-ch .c45-ch-num { font-size: 13px; }
    .hub-content .c45-guide-cell { font-size: 10px; padding: 8px; }
    .hub-content .capsules-grid { grid-template-columns: 1fr; }
    .hub-content .merch-details-grid { grid-template-columns: 1fr; }
    .hub-content .merch-logo { font-size: 22px; letter-spacing: 4px; }
    .hub-content .merch-logo-sub { font-size: 10px; letter-spacing: 6px; }
    .hub-content .drop-banner { font-size: 16px; letter-spacing: 3px; }

    /* KALEIDE MySpace — stack columns, widen Top 8 */
    .hub-content .myspace-grid { flex-direction: column; }
    .hub-content .myspace-left { width: 100%; }
    .hub-content .myspace-header { flex-direction: column; gap: 6px; text-align: center; }
    .hub-content .ms-header-meta { justify-content: center; }
    .hub-content .ms-top8-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .hub-content .profile-avatar { width: 140px; height: 140px; }
    .hub-content .ms-egg-popup { max-width: 280px; font-size: 11px; padding: 16px 20px; }

    .hub-footer { flex-wrap: wrap; gap: 10px; justify-content: center; text-align: center; }
    .hub-footer-links { gap: 14px; }
    .hub-footer-links .hub-social-link { font-size: 11px; }
    .hub-subscribe-btn { font-size: 10px; padding: 6px 16px; }

    /* Smaller dust motes on mobile */
    .dust-mote { width: 1px; height: 1px; }
}

/* ====================================================================
   REDUCED MOTION — respect user preferences
   ==================================================================== */

@media (prefers-reduced-motion: reduce) {
    .vhs-tape { animation: none; }
    .crt-film-grain { animation: none; }
    .crt-tracking-lines { animation: none; }
    .hub-noise { animation: none; }
    .hub-content .c45-ticker-inner { animation: none; }
    .hub-content .c45-live-dot { animation: none; }
    .hub-content .c45-rec-badge { animation: none; }
    /* c45-guide-scroll removed — guide is now static */
    .hub-content .status-chip { animation: none; }
    .hub-content .comment.ms-new { animation: none; }
    .tv-unit.jitter { animation: none; }
    .hub-footer-links .hub-social-link:hover { animation: none; }
    .hub-subscribe-btn:hover { animation: none; }

    /* New animations — disabled for reduced motion */
    .vhs-reel { animation: none; }
    .vcr-indicator { animation: none; }
    .tv-halo { animation: none; }
    .dust-mote { animation: none; opacity: 0.15; }
    .tv-light-cone, .tv-light-spill, .room-vignette { transition: none; }

    /* Tape insertion/eject — handled via JS reduced-motion check */
}

/* ═══════════════════════════════════════════════════════════════
   MUSIC VIDEO PLAYER (temporary — remove this block to revert)
   ═══════════════════════════════════════════════════════════════ */

.custom-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
  border: 1px solid #3a1a3a;
}

#musicVideoCanvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

.custom-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 0.5s ease;
  cursor: pointer;
}

.video-play-btn {
  width: 80px;
  height: 80px;
  background: rgba(255, 0, 100, 0.2);
  border: 3px solid #ff0066;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.video-play-btn:hover {
  background: rgba(255, 0, 100, 0.4);
  border-color: #ff00aa;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 0, 100, 0.6);
}

.video-play-btn:active {
  transform: scale(0.95);
}

.play-icon {
  font-size: 32px;
  color: #ff0066;
  margin-left: 4px;
  text-shadow:
    0 0 10px rgba(255, 0, 100, 0.8),
    0 0 20px rgba(255, 0, 100, 0.4);
  animation: playIconPulse 2s ease-in-out infinite;
}

@keyframes playIconPulse {
  0%, 100% {
    opacity: 1;
    text-shadow:
      0 0 10px rgba(255, 0, 100, 0.8),
      0 0 20px rgba(255, 0, 100, 0.4);
  }
  50% {
    opacity: 0.7;
    text-shadow:
      0 0 15px rgba(255, 0, 100, 1),
      0 0 30px rgba(255, 0, 100, 0.6);
  }
}

.video-play-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  animation: scanlineScroll 8s linear infinite;
}

@keyframes scanlineScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

#musicVideoAudio {
  display: none;
}

@media (max-width: 768px) {
  .video-play-btn {
    width: 60px;
    height: 60px;
  }
  .play-icon {
    font-size: 24px;
  }
}

/* ═══ END MUSIC VIDEO PLAYER ═══ */