/* =========================================
   01. GLOBAL VARIABLES & THEMES
   ========================================= */
:root {
    --page-bg: #050505; 
    
    /* Vinyl Player Base Palette */
    --deck-base: #15161a; 
    --deck-shadow: #0d0e11;
    --deck-trim: #222328; 
    --rose-gold: #c68a95; 
    --rose-gold-dark: #9a6670;
    --text-main: #f4f4f2; 
    --text-sub: #5a5f6b;
    --platter: #0a0b0d; 
    --grooves: #16171a; 
    --led-off: #2a0808; 
    --led-on: #c68a95; 
}

/* --- TAPE THEMES --- */
.theme-rosegold {
    --deck-text: #050505;
    --theme-accent: #c68a95; 
    --shell-body: #e6e6ea; 
    --shell-extrusion: #a0a0a5; 
    --trapezoid-line: #c68a95; 
    --screw-color: #c68a95; 
    --label-bg-top: #ffffff; 
    --label-bg-bottom: #ffffff; 
    --label-ruled-lines: #d0d0d5; 
    --label-text-accent: #c68a95; 
    --label-text-main: #050505; 
    --window-housing: #111111;
    --spool-outer-ring: #a0a0a5;
    --spool-inner-gear: #c68a95;
    --tape-fill: #1a1a1a;
    --tape-border: #c68a95;
}

.theme-scifi {
    --deck-text: #0f172a;
    --theme-accent: #0ea5e9; 
    --shell-body: #e2e8f0; 
    --shell-extrusion: #94a3b8; 
    --trapezoid-line: #0ea5e9; 
    --screw-color: #64748b; 
    --label-bg-top: #ffffff; 
    --label-bg-bottom: #ffffff; 
    --label-ruled-lines: #cbd5e1; 
    --label-text-accent: #0ea5e9; 
    --label-text-main: #0f172a; 
    --window-housing: #050505; 
    --spool-outer-ring: #ffffff;
    --spool-inner-gear: #0ea5e9;
    --tape-fill: #111111;
    --tape-border: #0ea5e9;
}

.theme-teal-copper {
    --deck-text: #b87333; 
    --theme-accent: #b87333;
    --shell-body: #0d242b; 
    --shell-extrusion: #061216;  
    --trapezoid-line: #b87333; 
    --screw-color: #b87333; 
    --label-bg-top: #ffffff; 
    --label-bg-bottom: #b87333; 
    --label-ruled-lines: #204b59; 
    --label-text-accent: #050505; 
    --label-text-main: #000000; 
    --window-housing: #000000;
    --spool-outer-ring: #204b59;
    --spool-inner-gear: #b87333;
    --tape-fill: #111111;
    --tape-border: #b87333;
}

.theme-mono {
    --deck-text: #ffffff; 
    --theme-accent: #ffffff;
    --shell-body: #0f0f0f;
    --shell-extrusion: #1a1a1a;
    --trapezoid-line: #2a2a2a;
    --screw-color: #3a3a3a;
    --label-bg-top: #eaeaea;
    --label-bg-bottom: #eaeaea;
    --label-ruled-lines: #bcbcbc;
    --label-text-accent: #000000;
    --label-text-main: #000000;
    --window-housing: #000000;
    --spool-outer-ring: #2f2f2f;
    --spool-inner-gear: #5a5a5a;
    --tape-fill: #000000;
    --tape-border: #dadada;
}

.theme-bone-crimson {
    --deck-text: #000000; 
    --theme-accent: #bd1e24;
    --shell-body: #d9d0c1; 
    --shell-extrusion: #a69e90; 
    --trapezoid-line: #b5ac9c; 
    --screw-color: #7a7263; 
    --label-bg-top: #ffffff; 
    --label-bg-bottom: #bd1e24; 
    --label-ruled-lines: #d1c8b8; 
    --label-text-accent: #464440; 
    --label-text-main: #2b2823; 
    --window-housing: #1a1816;
    --spool-outer-ring: #e8e3d8;
    --spool-inner-gear: #8c8474;
    --tape-fill: #4a3124;
    --tape-border: #261912;
}

.theme-hazard {
    --deck-text: #ff6f00; 
    --theme-accent: #ff6f00;
    --shell-body: #2d3238; 
    --shell-extrusion: #16191c; 
    --trapezoid-line: #ff6f00; 
    --screw-color: #8c9399; 
    --label-bg-top: #ffffff; 
    --label-bg-bottom: #ff6f00; 
    --label-ruled-lines: #d84516; 
    --label-text-accent: #000000; 
    --label-text-main: #000000; 
    --window-housing: #111111;
    --spool-outer-ring: #2d3238;
    --spool-inner-gear: #ff6f00;
    --tape-fill: #1a1a1a;
    --tape-border: #ff6f00;
}

.theme-synthwave {
    --deck-text: #52ff00; 
    --theme-accent: #a954ff;
    --shell-body: #321c4a;
    --shell-extrusion: #1d0f2e; 
    --trapezoid-line: #52ff00; 
    --screw-color: #52ff00; 
    --label-bg-top: #f4f5f8;
    --label-bg-bottom: #f4f5f8; 
    --label-ruled-lines: #9c63d4; 
    --label-text-accent: #000000; 
    --label-text-main: #111111; 
    --window-housing: #0a0a0a;
    --spool-outer-ring: #1d0f2e;
    --spool-inner-gear: #52ff00;
    --tape-fill: #111111;
    --tape-border: #9c63d4;
}

.theme-milspec {
    --deck-text: #ff3300; 
    --theme-accent: #4b5320;
    --shell-body: #3b4231; 
    --shell-extrusion: #24291c; 
    --trapezoid-line: #ff3300; 
    --screw-color: #1a1c14; 
    --label-bg-top: #e0d8c8; 
    --label-bg-bottom: #c2baaa; 
    --label-ruled-lines: #4b5320; 
    --label-text-accent: #ff3300; 
    --label-text-main: #24291c; 
    --window-housing: #111111;
    --spool-outer-ring: #4b5320;
    --spool-inner-gear: #ff3300;
    --tape-fill: #111111;
    --tape-border: #24291c;
}

.theme-akira {
    --deck-text: #ff2a2a;
    --theme-accent: #ff2a2a;
    --shell-body: #161618;
    --shell-extrusion: #0a0a0c; 
    --trapezoid-line: #ff2a2a; 
    --screw-color: #555555;
    --label-bg-top: #f4f4f4;
    --label-bg-bottom: #e0e0e0; 
    --label-ruled-lines: rgba(255, 42, 42, 0.4); 
    --label-text-accent: #ff2a2a; 
    --label-text-main: #111111; 
    --window-housing: #050505;
    --spool-outer-ring: #222222;
    --spool-inner-gear: #ff2a2a;
    --tape-fill: #000000;
    --tape-border: #ff2a2a;
}

/* =========================================
   02. SCROLL ARCHITECTURE
   ========================================= */
.scroll-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent; 
    box-sizing: border-box;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

/* =========================================
   03. SECTION 1: LISTENING ROOM (VINYL)
   ========================================= */
.listening-section {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* --- Layout & Typography --- */
.hero-container {
    position: relative; width: 100%; max-width: 1800px; 
    height: 100%; margin: 0 auto; display: flex; align-items: center; 
    justify-content: flex-end; padding: 0 5vw; box-sizing: border-box; z-index: 1;
}

.hero-typography {
    position: absolute; left: 5vw; top: 50%; transform: translateY(-50%);
    z-index: 1; display: flex; flex-direction: column;
    pointer-events: none; user-select: none;
    
    /* THE BLEED FIX: Gradient Shadow Mask */
    width: 85vw; 
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 95%);
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 95%);
    
    clip-path: inset(0 100% 0 0); 
    transition: clip-path 1.2s cubic-bezier(0.8, 0, 0.2, 1);
}

.hero-title {
    font-size: clamp(85px, 13vw, 215px); 
    font-weight: 700; line-height: 1.0; 
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15); 
    text-transform: uppercase; 
    font-family: 'Arial Black', Impact, 'Noto Sans JP', sans-serif;
    letter-spacing: -4px; white-space: nowrap;
}

.hero-artist {
    font-size: clamp(26px, 3.2vw, 44px); font-weight: 700;
    color: rgba(255, 255, 255, 0.6); text-transform: uppercase;
    margin-top: 5px; 
    letter-spacing: 6px; padding-left: 10px;
    font-family: Arial, Helvetica, 'Noto Sans JP', sans-serif;
}

.ambient-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw; height: 80vh;
    background-size: cover; background-position: center;
    filter: blur(150px); 
    opacity: 0; 
    z-index: 0; pointer-events: none;
    transition: opacity 1.5s ease, background-image 1s ease-in-out;
}

/* --- Vinyl Hardware --- */
.deck-wrapper {
    position: relative;
    width: 800px; height: 480px;
    margin-left: auto; 
    transform-origin: center center;
    z-index: 2;
}

.turntable-slab {
    width: 100%; height: 100%; 
    background-color: var(--deck-base); border-radius: 8px; 
    border-top: 1px solid var(--deck-trim); border-left: 1px solid var(--deck-trim);
    position: relative; z-index: 2;
    box-shadow: inset -2px -2px 10px rgba(0,0,0,0.5), 20px 20px 60px rgba(0,0,0,0.9);
    
    /* Radial Materialization */
    clip-path: circle(0px at 240px 240px); 
    transition: clip-path 1s cubic-bezier(0.6, 0.05, 0.2, 1);
}

.platter-target {
    position: absolute; top: 50px; left: 50px;
    width: 380px; height: 380px;
    background-color: var(--deck-shadow); border-radius: 50%;
    box-sizing: border-box; border: 1px solid var(--deck-trim);
    box-shadow: inset 5px 5px 15px rgba(0,0,0,0.9), 0 0 0 4px #111215; 
    display: flex; justify-content: center; align-items: center;
    z-index: 10;
}

.vinyl-record {
    width: 370px; height: 370px; border-radius: 50%;
    background: repeating-radial-gradient( var(--platter), var(--platter) 3px, var(--grooves) 4px, var(--platter) 5px );
    display: flex; justify-content: center; align-items: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    animation: spin 3s linear infinite;
    animation-play-state: paused;
}

.record-label {
    width: 120px; height: 120px; border-radius: 50%;
    background-color: #111; 
    background-size: cover; background-position: center;
    border: 2px solid #000; display: flex; justify-content: center; align-items: center;
}

.spindle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 12px; height: 12px; 
    background: linear-gradient(135deg, #e5e7eb, #9ca3af); 
    border-radius: 50%; z-index: 20; box-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}

.tonearm-mech {
    position: absolute; top: 70px; left: 450px; 
    width: 60px; height: 280px; z-index: 30;
}

.tonearm-pivot {
    position: absolute; top: 0; left: 5px; width: 50px; height: 50px; 
    background: linear-gradient(135deg, var(--deck-trim), var(--deck-shadow));
    border-radius: 50%; border: 1px solid #111;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}

.tonearm-cap {
    width: 20px; height: 20px; 
    background: linear-gradient(135deg, var(--rose-gold), var(--rose-gold-dark));
    border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(255,255,255,0.2); z-index: 2;
}

.tonearm-rod {
    position: absolute; top: 25px; left: 23px; width: 4px; height: 210px; 
    background: linear-gradient(90deg, #b0b5bd, #686b74);
    border-radius: 2px; transform-origin: top center; transform: rotate(0deg); 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 3px 3px 8px rgba(0,0,0,0.6);
}

.headshell {
    position: absolute; bottom: -24px; left: -10px; width: 24px; height: 40px; 
    background-color: #0d0e11; border-radius: 2px;
    border-top: 4px solid var(--rose-gold); box-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}

.power-control {
    position: absolute; bottom: 50px; left: 50px;
    display: flex; align-items: center; gap: 16px; cursor: pointer; z-index: 40;
}

.power-led {
    width: 6px; height: 6px; border-radius: 50%; background-color: var(--led-off); 
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.9); transition: all 0.3s ease;
}

.power-dial {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #1a1b20, #0d0e11);
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.05), 2px 2px 5px rgba(0,0,0,0.8); 
    border: 1px solid #0a0a0c; display: flex; justify-content: center; align-items: center;
}

.power-dial::after {
    content: ''; width: 12px; height: 12px; border-radius: 50%;
    background: #111; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.9);
}
.power-control:active .power-dial { transform: scale(0.95); }

.oled-screen {
    position: absolute; top: 60px; right: 50px; width: 220px; 
    background-color: rgb(0, 0, 0); border-radius: 4px; border: none;
    box-shadow: inset 2px 2px 10px rgba(0,0,0,0.6);
    padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px;
    opacity: 0.2; transition: opacity 0.3s ease; z-index: 10;
    font-family: 'Share Tech Mono', 'Noto Sans JP', monospace; 
}

.oled-label { color: var(--text-sub); font-size: 10px; letter-spacing: 2px; }
.oled-title { 
    color: var(--text-main); font-size: 14px; font-weight: bold; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.eq-visualizer { display: flex; align-items: flex-end; gap: 4px; height: 16px; margin-top: 4px; }
.eq-bar { width: 4px; background-color: var(--rose-gold); height: 2px; border-radius: 1px; transition: height 0.1s; }

.pitch-fader-container {
    position: absolute; bottom: 50px; right: 135px; width: 40px; height: 180px;
    display: flex; justify-content: center; align-items: center; z-index: 10;
}

.pitch-fader-container::before {
    content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 6px;
    background: repeating-linear-gradient(to bottom, #333, #333 1px, transparent 1px, transparent 12px);
    opacity: 0.3;
}

.pitch-fader {
    width: 8px; height: 100%; background-color: #060608; border-radius: 4px; 
    border: 1px solid #1a1a1a; box-shadow: inset 2px 2px 8px rgba(0,0,0,0.9);
    display: flex; justify-content: center; position: relative;
}

.fader-knob {
    position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 20px;
    background: linear-gradient(135deg, var(--rose-gold), var(--rose-gold-dark));
    border-radius: 2px; box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 1px 1px 2px rgba(255,255,255,0.3); 
    cursor: grab; border: 1px solid #111;
}
.fader-knob:active { cursor: grabbing; }
.fader-knob::after {
    content: ''; position: absolute; top: 50%; left: 10%; right: 10%; height: 2px; 
    background-color: #222; transform: translateY(-50%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}

/* --- SVG Boot Overlay --- */
#boot-overlay {
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; z-index: 50; pointer-events: none;
    transition: opacity 0.5s ease;
}

.anim-circle {
    fill: none; stroke: var(--rose-gold); stroke-width: 2px;
    stroke-dasharray: 1194; stroke-dashoffset: 1194; 
    transform-origin: 240px 240px; 
    transform: rotate(-90deg); 
}

.anim-rect {
    fill: none; stroke: var(--rose-gold); stroke-width: 2px;
    stroke-dasharray: 2560; stroke-dashoffset: 2560; 
}

#boot-overlay.draw-phase-1 .anim-circle {
    transition: stroke-dashoffset 1.2s cubic-bezier(0.6, 0.05, 0.2, 1); 
    stroke-dashoffset: 0; 
}
#boot-overlay.draw-phase-2 .anim-circle {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
    transform: rotate(-90deg) scale(0.95); 
    filter: drop-shadow(0px 15px 20px rgba(198, 138, 149, 0.9));
}
#boot-overlay.draw-phase-3 .anim-rect {
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
    stroke-dashoffset: 0; 
}

/* --- Active States & Animations --- */
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulseEQ { 0% { height: 2px; } 100% { height: 16px; } }

.turntable-slab.is-on .vinyl-record { animation-play-state: running; }
.turntable-slab.is-on .tonearm-rod { transform: rotate(25deg); } 
.turntable-slab.is-on .power-led { background-color: var(--led-on); box-shadow: 0 0 12px rgba(198, 138, 149, 0.6); }
.turntable-slab.is-on .oled-screen { opacity: 1; }
.turntable-slab.is-on .eq-bar { animation: pulseEQ 0.5s infinite alternate ease-in-out; }
.turntable-slab.is-on .eq-bar:nth-child(1) { animation-duration: 0.4s; }
.turntable-slab.is-on .eq-bar:nth-child(2) { animation-duration: 0.7s; }
.turntable-slab.is-on .eq-bar:nth-child(3) { animation-duration: 0.5s; }
.turntable-slab.is-on .eq-bar:nth-child(4) { animation-duration: 0.6s; }
.turntable-slab.is-on .eq-bar:nth-child(5) { animation-duration: 0.3s; }

/* JavaScript Triggered Reveal States */
body.is-ready .listening-section.is-active-zone .ambient-glow { opacity: 0.15; }
body.is-ready .hero-typography { clip-path: inset(0 0 0 0); }
body.is-ready .turntable-slab { clip-path: circle(1200px at 240px 240px); }

/* Crossfade Switch States */
.hero-title, .hero-artist, .oled-title, .record-label, .ambient-glow { transition: opacity 0.6s ease-in-out; }
body.is-switching .hero-title, 
body.is-switching .hero-artist, 
body.is-switching .oled-title, 
body.is-switching .record-label,
body.is-switching .ambient-glow { opacity: 0 !important; }

/* =========================================
   04. SECTION 2: TELEMETRY DECK (STATS)
   ========================================= */
.stats-section {
    display: flex; justify-content: center; align-items: center;
    padding: 0 5vw; 
    overflow: hidden; 
}

/* --- Interactive Grid --- */
.interactive-grid {
    position: absolute; inset: 0; 
    pointer-events: none; z-index: 0;
    background-image: 
        linear-gradient(var(--theme-accent) 1px, transparent 1px),
        linear-gradient(90deg, var(--theme-accent) 1px, transparent 1px);
    background-size: 50px 50px; 
    opacity: 0; 
    transition: opacity 1s ease 0.3s; 
    mask-image: radial-gradient(circle 250px at var(--mouse-x, -1000px) var(--mouse-y, -1000px), black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, -1000px) var(--mouse-y, -1000px), black 0%, transparent 100%);
}

.stats-section.is-active-zone .interactive-grid { opacity: 0.15; }

.dashboard-container {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 5vw; width: 100%; max-width: 1600px;
    position: relative; z-index: 10;
}

/* --- Cassette Hardware --- */
.cassette-wrapper {  
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    perspective: 1000px;
}

.cassette { 
    width: 470px; height: 270px; 
    background-color: var(--shell-body); border-radius: 12px; 
    position: relative; display: flex; flex-direction: column; align-items: center; 
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);  
    cursor: pointer; transform: scale(1.05); 
    box-shadow:  
        0.5px 0.5px 0 var(--shell-extrusion), 1px 1px 0 var(--shell-extrusion), 1.5px 1.5px 0 var(--shell-extrusion), 
        2px 2px 0 var(--shell-extrusion), 2.5px 2.5px 0 var(--shell-extrusion), 3px 3px 0 var(--shell-extrusion), 
        3.5px 3.5px 0 var(--shell-extrusion), 4px 4px 0 var(--shell-extrusion), 4.5px 4.5px 0 var(--shell-extrusion), 
        5px 5px 0 var(--shell-extrusion), 15px 15px 30px rgba(0,0,0,0.8); 
} 
.cassette:hover { transform: scale(1.05) translateY(-8px); } 
.cassette:active { 
    transform: scale(1.05) translateY(2px) translateX(2px); 
    box-shadow: 0.5px 0.5px 0 var(--shell-extrusion), 1px 1px 0 var(--shell-extrusion), 2px 2px 10px rgba(0,0,0,0.9); 
} 

.cassette.is-ejecting {
    transform: translateY(-60px) scale(0.95) rotateX(10deg);
    opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cassette.is-inserting {
    transform: translateY(40px) scale(1.1);
    opacity: 0; transition: none; 
}

.screw { width: 14px; height: 14px; background-color: var(--screw-color); border-radius: 50%; position: absolute; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s; }
.screw::after { content: ''; width: 8px; height: 2px; background-color: var(--shell-body); }
.screw.top-left { top: 12px; left: 12px; transform: rotate(45deg); }
.screw.top-right { top: 12px; right: 12px; transform: rotate(135deg); }
.screw.bottom-left { bottom: 12px; left: 12px; transform: rotate(45deg); }
.screw.bottom-right { bottom: 12px; right: 12px; transform: rotate(135deg); }
.screw.bottom-mid { bottom: 32px; left: 50%; transform: translateX(-50%) rotate(10deg); z-index: 10; }

.label { width: 88%; height: 175px; margin-top: 35px; border-radius: 8px; position: relative; background-color: var(--label-bg-top); display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.label-lines { position: absolute; left: 15%; width: 80%; height: 60px; background-image: linear-gradient(to bottom, transparent 24px, var(--label-ruled-lines) 24px); background-size: 100% 25px; background-repeat: repeat-y; }
.label-color-block { position: absolute; top: 80px; width: 100%; height: 100px; background-color: var(--label-bg-bottom); box-sizing: border-box; }
.side-indicator { position: absolute; top: 25px; left: 20px; font-size: 24px; font-weight: 900; color: var(--label-text-accent); }
.label-title { font-family: 'Caveat', cursive; font-size: 34px; color: var(--label-text-main); position: absolute; top: 10px; left: 55%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; }

.tape-window-housing { width: 280px; height: 70px; background-color: var(--window-housing); position: absolute; bottom: 35px; border-radius: 8px; display: flex; justify-content: center; align-items: center; }
.css-spool { width: 50px; height: 50px; border-radius: 50%; border: 5px solid var(--spool-inner-gear); background-color: var(--window-housing); position: absolute; display: flex; justify-content: center; align-items: center; box-sizing: border-box; z-index: 2; animation: spinSpool 3s linear infinite; transition: border-color 0.2s; }
.css-spool.left { left: 10px; }
.css-spool.right { right: 10px; }
.tooth { position: absolute; width: 8px; height: 100%; background-color: var(--spool-inner-gear); transition: background-color 0.2s; }
.tooth.t1 { transform: rotate(0deg); }
.tooth.t2 { transform: rotate(60deg); }
.tooth.t3 { transform: rotate(120deg); }
.spindle-hole { position: absolute; width: 18px; height: 18px; background-color: var(--spool-inner-gear); border-radius: 50%; z-index: 2; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s; }
.spindle-hole::after { content: ''; width: 6px; height: 6px; background-color: var(--window-housing); border-radius: 50%; }

@keyframes spinSpool { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes tapeShrink { 0% { r: 82px; } 100% { r: 37px; } }
@keyframes tapeGrow { 0% { r: 37px; } 100% { r: 82px; } }

.center-cutout { width: 120px; height: 50px; background-color: var(--page-bg); position: relative; overflow: hidden; display: flex; }
.tape-vector { width: 100%; height: 100%; }
.tape-svg-left { fill: var(--tape-fill); stroke: var(--tape-border); stroke-width: 2px; animation: tapeShrink 8s ease-in-out infinite alternate; transition: stroke 0.2s; }
.tape-svg-right { fill: var(--tape-fill); stroke: var(--tape-border); stroke-width: 2px; animation: tapeGrow 8s ease-in-out infinite alternate; transition: stroke 0.2s; }

.bottom-section { position: absolute; bottom: 0; width: 100%; height: 80px; display: flex; justify-content: center; }
.trapezoid-outline { position: absolute; bottom: 0; width: 340px; height: 55px; background-color: var(--trapezoid-line); transition: background-color 0.2s; clip-path: polygon(60px 0, 280px 0, 340px 70px, 336px 70px, 278px 3px, 62px 3px, 4px 70px, 0 70px); }
.holes-container { position: absolute; bottom: 16px; display: flex; justify-content: center; align-items: center; gap: 45px; width: 100%; }
.hole { background-color: var(--page-bg); }
.hole.circle { width: 12px; height: 12px; border-radius: 50%; transform: translateY(8px); }
.hole.square { width: 12px; height: 12px; border-radius: 3px; }

/* --- Tape Controls --- */
.tape-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 15px; margin-top: 35px; font-family: 'Share Tech Mono', monospace;
}
.tape-btn {
    background: #0a0b0d; border: 1px solid #222; border-radius: 4px;
    color: #555; font-size: 14px; width: 40px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.05), 2px 2px 5px rgba(0,0,0,0.5);
}
.tape-btn:hover {
    color: var(--theme-accent); border-color: var(--theme-accent);
    box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 4px var(--theme-accent);
    transform: translateY(-2px);
}
.tape-btn:active { transform: translateY(1px); box-shadow: inset 2px 2px 5px rgba(0,0,0,0.9); }

.playlist-display {
    font-size: 14px; letter-spacing: 4px; color: var(--theme-accent); 
    text-shadow: 0 0 4px var(--theme-accent); 
    width: 200px; text-align: center;
    padding: 8px 0; border: 1px solid #333; background: #0a0b0d;
    transition: color 0.3s, text-shadow 0.3s;
}

/* --- Chassis & Display Layout --- */
.led-chassis {
    flex-grow: 1; max-width: 800px;
    background-color: var(--shell-body); 
    border-radius: 12px; padding: 30px;
    box-shadow:  
        0.5px 0.5px 0 var(--shell-extrusion), 1px 1px 0 var(--shell-extrusion), 1.5px 1.5px 0 var(--shell-extrusion), 
        2px 2px 0 var(--shell-extrusion), 2.5px 2.5px 0 var(--shell-extrusion), 3px 3px 0 var(--shell-extrusion), 
        3.5px 3.5px 0 var(--shell-extrusion), 4px 4px 0 var(--shell-extrusion), 4.5px 4.5px 0 var(--shell-extrusion), 
        5px 5px 0 var(--shell-extrusion), 15px 15px 30px rgba(0,0,0,0.8);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), filter 0.15s ease-in-out, box-shadow 0.15s;      
    display: flex; flex-direction: column; gap: 20px;
    font-family: 'Share Tech Mono', 'Noto Sans JP', monospace;
}

.led-chassis.is-rebooting {
    transform: scale(0.98) translateY(4px);
    filter: brightness(0.6); 
    box-shadow:  
        0.5px 0.5px 0 var(--shell-extrusion), 1px 1px 0 var(--shell-extrusion), 2px 2px 0 var(--shell-extrusion), 
        3px 3px 0 var(--shell-extrusion), 5px 5px 15px rgba(0,0,0,0.9);
}

.deck-top-panel { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; }
.deck-branding { color: var(--deck-text); font-size: 16px; font-weight: bold; letter-spacing: 2px; opacity: 0.8; }

.sync-btn {
    background: var(--label-bg-top); border: 2px solid var(--shell-extrusion); border-radius: 4px; 
    cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: 14px; font-weight: bold;
    padding: 8px 16px; letter-spacing: 1px; transition: all 0.1s;
    box-shadow: 2px 2px 0 var(--shell-extrusion);
}
.sync-btn:active { transform: translateY(2px) translateX(2px); box-shadow: 0px 0px 0 var(--shell-extrusion); }

.lcd-screen {
    background-color: var(--window-housing); border-radius: 8px; padding: 30px;
    border: 3px solid var(--shell-extrusion);
    box-shadow: inset 4px 4px 15px rgba(0,0,0,0.9);
    background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 15px 15px;
    position: relative; overflow: hidden;
}

/* Phosphor Bleed Sensor */
.lcd-screen::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; 
    background: var(--theme-accent); opacity: 0.08; z-index: 0;
    mask-image: radial-gradient(circle 100px at var(--lcd-mouse-x, -1000px) var(--lcd-mouse-y, -1000px), black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 100px at var(--lcd-mouse-x, -1000px) var(--lcd-mouse-y, -1000px), black 0%, transparent 100%);
    transition: opacity 0.3s;
}

.led-header, .led-nav, .led-display { position: relative; z-index: 10; }

.led-header {
    display: flex; justify-content: space-between;
    border-bottom: 1px dashed rgba(255,255,255,0.15); padding-bottom: 20px; margin-bottom: 20px;
}
.stat-block { display: flex; flex-direction: column; gap: 5px; }
.led-label { color: #5a5f6b; font-size: 12px; letter-spacing: 3px; }
.led-value { color: var(--theme-accent); font-size: 36px; text-shadow: 0 0 6px var(--theme-accent); }

.led-nav {
    display: flex; justify-content: flex-start; margin-bottom: 30px;
    border-bottom: 1px dashed rgba(255,255,255,0.15); padding-bottom: 15px;
}
.led-modes { display: flex; gap: 20px; }
.mode-btn { background: none; border: none; cursor: pointer; font-family: 'Share Tech Mono', monospace; font-size: 14px; color: #5a5f6b; padding: 0; letter-spacing: 2px; }
.mode-btn:hover { color: #888; }
.mode-btn.is-active { color: var(--theme-accent); text-shadow: 0 0 4px var(--theme-accent); }

.led-display { display: flex; flex-direction: column; gap: 25px; transition: opacity 0.3s ease, transform 0.3s ease;}
.led-row { display: flex; align-items: center; font-size: 16px; color: #f4f4f2; padding-bottom: 8px; border-bottom: 1px dashed rgba(255,255,255,0.05); }
.led-rank { width: 40px; color: #5a5f6b; font-size: 14px;}
.led-name { 
    width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    letter-spacing: 1px; font-family: 'Share Tech Mono', 'Noto Sans JP', monospace; 
}
.led-plays { width: 100px; font-size: 14px; color: var(--theme-accent); opacity: 0.85; }
.led-plays .dim { font-size: 10px; color: #5a5f6b; letter-spacing: 2px; margin-left: 4px; }

.telemetry-bar { flex-grow: 1; height: 2px; background-color: #1a1c23; position: relative; display: flex; align-items: center; }
.telemetry-fill { height: 2px; background-color: var(--theme-accent); box-shadow: 0 0 4px var(--theme-accent); position: relative; }
.telemetry-fill::after {
    content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; background-color: #fff; border-radius: 50%; 
    box-shadow: 0 0 3px #fff, 0 0 6px var(--theme-accent);
}

/* --- Chassis Boot Animations --- */
.led-display.is-refreshing {
    opacity: 0 !important; transform: translateY(5px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.system-off .css-spool,
.system-off .tape-svg-left,
.system-off .tape-svg-right {
    animation-play-state: paused !important;
}

.system-off .led-header,
.system-off .led-nav,
.system-off .led-row {
    opacity: 0; transform: translateY(15px);
}

.lcd-screen .led-header { transition: opacity 0.6s ease-out 0.1s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s; }
.lcd-screen .led-nav { transition: opacity 0.6s ease-out 0.2s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; }
.lcd-screen .led-row:nth-child(1) { transition: opacity 0.5s ease-out 0.3s, transform 0.5s ease-out 0.3s; }
.lcd-screen .led-row:nth-child(2) { transition: opacity 0.5s ease-out 0.4s, transform 0.5s ease-out 0.4s; }
.lcd-screen .led-row:nth-child(3) { transition: opacity 0.5s ease-out 0.5s, transform 0.5s ease-out 0.5s; }
.lcd-screen .led-row:nth-child(4) { transition: opacity 0.5s ease-out 0.6s, transform 0.5s ease-out 0.6s; }
.lcd-screen .led-row:nth-child(5) { transition: opacity 0.5s ease-out 0.7s, transform 0.5s ease-out 0.7s; }

.telemetry-fill { transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s, background-color 0.3s, box-shadow 0.3s; }

/* The Instant Power Cut (Overrides boot delays on shutdown) */
.system-off .telemetry-fill { width: 0 !important; }
.system-off .led-header,
.system-off .led-nav,
.system-off .led-row,
.system-off .telemetry-fill { transition: all 0.1s ease-out !important; }

/* =========================================
   05. RESPONSIVE DESIGN
   ========================================= */

/* --- GLOBAL COMPONENT SCALING (Max-width: 1100px) --- */
@media (max-width: 1100px) {
    /* Section 1: Vinyl Player */
    .hero-container {
        flex-direction: column; 
        justify-content: center;
        padding: 0 4vw;
    }
    .ambient-glow {
        background-size: contain; background-repeat: no-repeat;
    }
    .hero-typography {
        position: relative; top: auto; left: auto; transform: none;
        align-items: center; text-align: center;
        width: 100%; max-width: 100vw; margin-bottom: 5vh;
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    }
    .hero-title { 
        font-size: clamp(32px, 10vw, 80px); white-space: nowrap; 
        overflow: hidden; width: 100%; display: block; letter-spacing: 0px;
    }
    .hero-artist { 
        font-size: clamp(14px, 4vw, 24px); padding-left: 0; white-space: nowrap; 
        overflow: hidden; width: 100%; display: block;
    }
    .deck-wrapper {
        margin-left: 0; 
        transform: scale(var(--deck-scale, 1)); 
        margin-top: calc(-240px * (1 - var(--deck-scale, 1)));
        margin-bottom: calc(-240px * (1 - var(--deck-scale, 1)));
    }
}

/* --- TABLET SPECIFIC: TELEMETRY DECK (769px - 1100px) --- */
@media (max-width: 1100px) and (min-width: 769px) {
    .dashboard-container {
        flex-direction: column-reverse; 
        gap: 60px; width: 90vw; max-width: 800px;
        transform: none !important;
        margin: 0 auto;
    }
    .led-chassis {
        width: 100%; max-width: 100%; margin: 0; padding: 40px; box-sizing: border-box;
    }
    .cassette-wrapper { margin-top: 0; }
}

/* --- MOBILE PHONES (Max-width: 768px) --- */
@media (max-width: 768px) {
    /* Section 1 */
    .ambient-glow { display: none !important; }

    /* Section 2: The Rigid Canvas */
    .dashboard-container {
        flex-direction: column-reverse; gap: 50px; width: 500px; flex-shrink: 0; 
        transform: scale(var(--dash-scale)); /* Shrunk universally by JS engine */
        transform-origin: center center;
        align-items: center; justify-content: center; margin: 0 auto; 
    }
    .led-chassis {
        width: 470px; max-width: 470px; flex-shrink: 0; margin: 0; padding: 30px; box-sizing: border-box;
    }
    .cassette-wrapper { margin-top: 0; flex-shrink: 0; }
    .led-name { width: 160px; }
    .led-header { flex-direction: column; align-items: center; gap: 15px; }
    .stat-block { text-align: center !important; }
}