/* ==========================================================================
   TL-03: ไทม์ไลน์วงการเพลงไทย & เครื่องเล่นเพลงในตำนาน (1940–2025)
   Layout: Vintage Hi-Fi Receiver + Morphing Audio Deck + Gatefold J-Card Liner Notes + FM Radio Tuning Dial
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-main: #140e0a;
  --bg-grad-1: #23160d;
  --bg-grad-2: #0c0705;
  --deck-surface: #2b1d12;
  --deck-border: #b8862d;
  --liner-bg: #f6ecd9;
  --liner-text: #25170b;
  --liner-muted: #694b30;
  --liner-card: rgba(184, 134, 45, 0.13);
  --accent: #e5a93c;
  --accent-2: #b91c1c;
  --accent-glow: rgba(229, 169, 60, 0.45);
  --dial-bg: #120c07;
  --dial-scale: #f7e2b4;
  --font-heading: 'Charmonman', 'Pridi', serif;
  --font-body: 'Sarabun', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   16 DISTINCT ERA THEMES & GOOGLE FONTS (1940–2025)
   ========================================================================== */

/* 1. 1940: แผ่นครั่ง 78 รอบ & สุนทราภรณ์ (Brass & Shellac Mahogany) */
body[data-theme="era-1940"] {
  --bg-main: #180f08;
  --bg-grad-1: #2f1d10;
  --bg-grad-2: #0e0804;
  --deck-surface: linear-gradient(145deg, #3e2211, #1f1007);
  --deck-border: #d49b27;
  --liner-bg: #f6ead2;
  --liner-text: #271609;
  --liner-muted: #6e4f35;
  --liner-card: rgba(168, 107, 24, 0.12);
  --accent: #f0b429;
  --accent-2: #881313;
  --accent-glow: rgba(240, 180, 41, 0.45);
  --dial-bg: #191008;
  --dial-scale: #ffe4a0;
  --font-heading: 'Charmonman', cursive;
  --font-body: 'Pridi', serif;
}

/* 2. 1958: ตู้เพลง Jukebox วังบูรพา (50s Chrome, Ruby Neon & Turquoise) */
body[data-theme="era-1958"] {
  --bg-main: #12091c;
  --bg-grad-1: #2a1036;
  --bg-grad-2: #08121e;
  --deck-surface: linear-gradient(145deg, #381128, #141a38);
  --deck-border: #22d3ee;
  --liner-bg: #fff8eb;
  --liner-text: #1e132a;
  --liner-muted: #6b4c7b;
  --liner-card: rgba(239, 68, 68, 0.1);
  --accent: #22d3ee;
  --accent-2: #ef4444;
  --accent-glow: rgba(34, 211, 238, 0.5);
  --dial-bg: #110b22;
  --dial-scale: #fde047;
  --font-heading: 'Pridi', serif;
  --font-body: 'Sarabun', sans-serif;
}

/* 3. 1969: แผ่นเสียงไวนิล LP & สตริงคอมโบ (70s Warm Tangerine & Vintage Amber) */
body[data-theme="era-1969"] {
  --bg-main: #1e1107;
  --bg-grad-1: #3b1d09;
  --bg-grad-2: #120904;
  --deck-surface: linear-gradient(145deg, #43220c, #241308);
  --deck-border: #f97316;
  --liner-bg: #fef3dc;
  --liner-text: #2e1505;
  --liner-muted: #7c4722;
  --liner-card: rgba(249, 115, 22, 0.12);
  --accent: #fb923c;
  --accent-2: #eab308;
  --accent-glow: rgba(251, 146, 60, 0.48);
  --dial-bg: #1c0f06;
  --dial-scale: #fed7aa;
  --font-heading: 'Mitr', sans-serif;
  --font-body: 'Pridi', serif;
}

/* 4. 1982: ตลับเทปคาสเซ็ท & วิทยุเทปกระเป๋าหิ้ว ( Silver Boombox & Crimson LED) */
body[data-theme="era-1982"] {
  --bg-main: #181316;
  --bg-grad-1: #2b1d24;
  --bg-grad-2: #0e0d12;
  --deck-surface: linear-gradient(145deg, #333842, #1b1f26);
  --deck-border: #ef4444;
  --liner-bg: #f8f5f0;
  --liner-text: #1c1917;
  --liner-muted: #57534e;
  --liner-card: rgba(220, 38, 38, 0.1);
  --accent: #ef4444;
  --accent-2: #facc15;
  --accent-glow: rgba(239, 68, 68, 0.45);
  --dial-bg: #111318;
  --dial-scale: #86efac;
  --font-heading: 'Mitr', sans-serif;
  --font-body: 'Sarabun', sans-serif;
}

/* 5. 1986: ซาวด์อะเบาท์ Sony Walkman & พี่เบิร์ด (Cobalt Blue & Foam Orange) */
body[data-theme="era-1986"] {
  --bg-main: #0a152c;
  --bg-grad-1: #132852;
  --bg-grad-2: #070d1c;
  --deck-surface: linear-gradient(145deg, #1d3b78, #0f1f42);
  --deck-border: #f97316;
  --liner-bg: #f0f7ff;
  --liner-text: #0f172a;
  --liner-muted: #3b5578;
  --liner-card: rgba(37, 99, 235, 0.11);
  --accent: #fb923c;
  --accent-2: #38bdf8;
  --accent-glow: rgba(251, 146, 60, 0.5);
  --dial-bg: #081226;
  --dial-scale: #bae6fd;
  --font-heading: 'Kanit', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* 6. 1994: ยุคทองล้านตลับ RS vs Grammy (90s Hot Magenta, Neon Yellow & Purple) */
body[data-theme="era-1994"] {
  --bg-main: #1f0926;
  --bg-grad-1: #3b0d45;
  --bg-grad-2: #11051b;
  --deck-surface: linear-gradient(145deg, #4a1259, #240930);
  --deck-border: #f472b6;
  --liner-bg: #fff5fb;
  --liner-text: #2a082e;
  --liner-muted: #79367d;
  --liner-card: rgba(236, 72, 153, 0.12);
  --accent: #f472b6;
  --accent-2: #facc15;
  --accent-glow: rgba(244, 114, 182, 0.55);
  --dial-bg: #170621;
  --dial-scale: #fbcfe8;
  --font-heading: 'Chakra Petch', sans-serif;
  --font-body: 'Kanit', sans-serif;
}

/* 7. 1997: ยุคอัลเทอร์เนทีฟ Bakery Music & CD Discman (Emerald Grunge & Metallic Silver) */
body[data-theme="era-1997"] {
  --bg-main: #0b1b18;
  --bg-grad-1: #13312b;
  --bg-grad-2: #07100e;
  --deck-surface: linear-gradient(145deg, #273e3a, #142220);
  --deck-border: #34d399;
  --liner-bg: #f2fbf8;
  --liner-text: #0f2922;
  --liner-muted: #3e6b5e;
  --liner-card: rgba(16, 185, 129, 0.12);
  --accent: #34d399;
  --accent-2: #a78bfa;
  --accent-glow: rgba(52, 211, 153, 0.48);
  --dial-bg: #081512;
  --dial-scale: #a7f3d0;
  --font-heading: 'Prompt', sans-serif;
  --font-body: 'Sarabun', sans-serif;
}

/* 8. 2001: แผ่นซีดี MP3 พันธุ์ทิพย์ & โปรแกรม Winamp (Matrix Green & Dark Charcoal Skin) */
body[data-theme="era-2001"] {
  --bg-main: #09130c;
  --bg-grad-1: #132719;
  --bg-grad-2: #050a07;
  --deck-surface: linear-gradient(145deg, #1e2822, #0f1612);
  --deck-border: #4ade80;
  --liner-bg: #eefcf2;
  --liner-text: #0a2612;
  --liner-muted: #366343;
  --liner-card: rgba(34, 197, 94, 0.12);
  --accent: #4ade80;
  --accent-2: #facc15;
  --accent-glow: rgba(74, 222, 128, 0.52);
  --dial-bg: #071109;
  --dial-scale: #86efac;
  --font-heading: 'Chakra Petch', monospace;
  --font-body: 'Kanit', sans-serif;
}

/* 9. 2004: โหลดริงโทน *4922 & iPod Click Wheel (Ice Blue Backlight & Polyphonic Silver) */
body[data-theme="era-2004"] {
  --bg-main: #091929;
  --bg-grad-1: #102b46;
  --bg-grad-2: #050e18;
  --deck-surface: linear-gradient(145deg, #1d364f, #0e1e2f);
  --deck-border: #38bdf8;
  --liner-bg: #f3faff;
  --liner-text: #0c253b;
  --liner-muted: #436a8a;
  --liner-card: rgba(14, 165, 233, 0.12);
  --accent: #38bdf8;
  --accent-2: #818cf8;
  --accent-glow: rgba(56, 189, 248, 0.5);
  --dial-bg: #071422;
  --dial-scale: #bae6fd;
  --font-heading: 'Chakra Petch', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* 10. 2007: ยุค Kamikaze & โค้ดเพลง Hi5 (Bubblegum Pink, Cyber Aqua & Y2K Pop) */
body[data-theme="era-2007"] {
  --bg-main: #220921;
  --bg-grad-1: #3d103b;
  --bg-grad-2: #120518;
  --deck-surface: linear-gradient(145deg, #4b1548, #230a2b);
  --deck-border: #f43f5e;
  --liner-bg: #fff2f9;
  --liner-text: #2e0a27;
  --liner-muted: #823872;
  --liner-card: rgba(244, 63, 94, 0.12);
  --accent: #fb7185;
  --accent-2: #38bdf8;
  --accent-glow: rgba(251, 113, 133, 0.55);
  --dial-bg: #18061a;
  --dial-scale: #fecdd3;
  --font-heading: 'Mitr', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* 11. 2011: ยุค YouTube ร้อยล้านวิว & Room39 (Crimson Studio & Warm Acoustic Wood) */
body[data-theme="era-2011"] {
  --bg-main: #1b0c0c;
  --bg-grad-1: #331414;
  --bg-grad-2: #100707;
  --deck-surface: linear-gradient(145deg, #3c1919, #1f0d0d);
  --deck-border: #ef4444;
  --liner-bg: #fff6f5;
  --liner-text: #291010;
  --liner-muted: #784242;
  --liner-card: rgba(239, 68, 68, 0.11);
  --accent: #f87171;
  --accent-2: #fbbf24;
  --accent-glow: rgba(248, 113, 113, 0.48);
  --dial-bg: #160909;
  --dial-scale: #fecaca;
  --font-heading: 'Kanit', sans-serif;
  --font-body: 'Sarabun', sans-serif;
}

/* 12. 2014: ยุค Streaming แรกเริ่ม Joox / Spotify (Spotify Neon Green & Matte Dark) */
body[data-theme="era-2014"] {
  --bg-main: #071912;
  --bg-grad-1: #0c2d20;
  --bg-grad-2: #040d09;
  --deck-surface: linear-gradient(145deg, #123628, #091d15);
  --deck-border: #10b981;
  --liner-bg: #f2fdf8;
  --liner-text: #082419;
  --liner-muted: #386b56;
  --liner-card: rgba(16, 185, 129, 0.12);
  --accent: #10b981;
  --accent-2: #34d399;
  --accent-glow: rgba(16, 185, 129, 0.5);
  --dial-bg: #05130d;
  --dial-scale: #a7f3d0;
  --font-heading: 'Prompt', sans-serif;
  --font-body: 'Kanit', sans-serif;
}

/* 13. 2017: BNK48 คุกกี้เสี่ยงทาย & ยุคทอง Thai Rap (Pastel Lavender Orchid & Gold) */
body[data-theme="era-2017"] {
  --bg-main: #1a0b28;
  --bg-grad-1: #2f1447;
  --bg-grad-2: #0e0617;
  --deck-surface: linear-gradient(145deg, #3c1a5b, #1d0c2e);
  --deck-border: #c084fc;
  --liner-bg: #fbf5ff;
  --liner-text: #220b38;
  --liner-muted: #6c4291;
  --liner-card: rgba(168, 85, 247, 0.12);
  --accent: #c084fc;
  --accent-2: #f472b6;
  --accent-glow: rgba(192, 132, 252, 0.55);
  --dial-bg: #140820;
  --dial-scale: #e9d5ff;
  --font-heading: 'Mitr', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* 14. 2020: เพลงฮิตไวรัล TikTok & ยุค Three Man Down (Neon Cyan & Glitch Rose) */
body[data-theme="era-2020"] {
  --bg-main: #08121e;
  --bg-grad-1: #0e2238;
  --bg-grad-2: #14081c;
  --deck-surface: linear-gradient(145deg, #132a42, #1c0f2b);
  --deck-border: #22d3ee;
  --liner-bg: #f2fcff;
  --liner-text: #0b1c2c;
  --liner-muted: #3e6282;
  --liner-card: rgba(6, 182, 212, 0.12);
  --accent: #22d3ee;
  --accent-2: #f43f5e;
  --accent-glow: rgba(34, 211, 238, 0.55);
  --dial-bg: #07101b;
  --dial-scale: #a5f3fc;
  --font-heading: 'Kanit', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* 15. 2023: T-Pop ฟีเวอร์ & แท่งไฟคอนเสิร์ต (Arena Coral Pink, Sky Blue & Gold) */
body[data-theme="era-2023"] {
  --bg-main: #1e0916;
  --bg-grad-1: #381029;
  --bg-grad-2: #0c1024;
  --deck-surface: linear-gradient(145deg, #421432, #171836);
  --deck-border: #fb7185;
  --liner-bg: #fff5f8;
  --liner-text: #290b1d;
  --liner-muted: #7a3b5e;
  --liner-card: rgba(244, 63, 94, 0.12);
  --accent: #fb7185;
  --accent-2: #38bdf8;
  --accent-glow: rgba(251, 113, 133, 0.55);
  --dial-bg: #150713;
  --dial-scale: #fecdd3;
  --font-heading: 'Chakra Petch', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* 16. 2025: Spatial Audio 360° & Global Stage (Deep Atmos Indigo, Violet & Electric Cyan) */
body[data-theme="era-2025"] {
  --bg-main: #08091e;
  --bg-grad-1: #141642;
  --bg-grad-2: #050512;
  --deck-surface: linear-gradient(145deg, #1b1e54, #0d0f2b);
  --deck-border: #818cf8;
  --liner-bg: #f5f6ff;
  --liner-text: #0f1238;
  --liner-muted: #464b8c;
  --liner-card: rgba(99, 102, 241, 0.12);
  --accent: #818cf8;
  --accent-2: #22d3ee;
  --accent-glow: rgba(129, 140, 248, 0.58);
  --dial-bg: #07081a;
  --dial-scale: #c7d2fe;
  --font-heading: 'Chakra Petch', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* 17. 1999: ร็อกล้านตลับ & VCD Karaoke (Amber Flame & CRT Karaoke Blue) */
body[data-theme="era-1999"] {
  --bg-main: #1b0e07;
  --bg-grad-1: #36190b;
  --bg-grad-2: #0c0704;
  --deck-surface: linear-gradient(145deg, #42200e, #1f1109);
  --deck-border: #f97316;
  --liner-bg: #fff7ed;
  --liner-text: #2b1206;
  --liner-muted: #7c3a19;
  --liner-card: rgba(234, 88, 12, 0.12);
  --accent: #fb923c;
  --accent-2: #38bdf8;
  --accent-glow: rgba(251, 146, 60, 0.5);
  --dial-bg: #150b05;
  --dial-scale: #fed7aa;
  --font-heading: 'Mitr', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* 18. 2009: ยุคทองอินดี้ Smallroom & Big Mountain ครั้งที่ 1 (Indie Mustard Yellow & Charcoal) */
body[data-theme="era-2009"] {
  --bg-main: #181509;
  --bg-grad-1: #2e260e;
  --bg-grad-2: #0d0b05;
  --deck-surface: linear-gradient(145deg, #382f12, #1c180a);
  --deck-border: #facc15;
  --liner-bg: #fefce8;
  --liner-text: #1c1917;
  --liner-muted: #655622;
  --liner-card: rgba(234, 179, 8, 0.13);
  --accent: #facc15;
  --accent-2: #ef4444;
  --accent-glow: rgba(250, 204, 21, 0.48);
  --dial-bg: #141107;
  --dial-scale: #fef08a;
  --font-heading: 'Kanit', sans-serif;
  --font-body: 'Sarabun', sans-serif;
}

/* 19. 2012: ขอใจเธอแลกเบอร์โทร & Gangnam ฟีเวอร์ (Stage Gold & Festival Red) */
body[data-theme="era-2012"] {
  --bg-main: #1f1006;
  --bg-grad-1: #3d1e0a;
  --bg-grad-2: #120804;
  --deck-surface: linear-gradient(145deg, #47210c, #241006);
  --deck-border: #fbbf24;
  --liner-bg: #fffbeb;
  --liner-text: #291305;
  --liner-muted: #78350f;
  --liner-card: rgba(217, 119, 6, 0.12);
  --accent: #fbbf24;
  --accent-2: #dc2626;
  --accent-glow: rgba(251, 191, 36, 0.52);
  --dial-bg: #180c04;
  --dial-scale: #fde68a;
  --font-heading: 'Mitr', sans-serif;
  --font-body: 'Kanit', sans-serif;
}

/* 20. 2015: ยุค 400 ล้านวิว YouTube & ซินธ์ป๊อป Polycat (80s Synthwave Sunset Magenta & Cyan) */
body[data-theme="era-2015"] {
  --bg-main: #140924;
  --bg-grad-1: #2b124c;
  --bg-grad-2: #090514;
  --deck-surface: linear-gradient(145deg, #34155c, #180a2e);
  --deck-border: #f472b6;
  --liner-bg: #fdf4ff;
  --liner-text: #240a36;
  --liner-muted: #70348c;
  --liner-card: rgba(236, 72, 153, 0.12);
  --accent: #f472b6;
  --accent-2: #38bdf8;
  --accent-glow: rgba(244, 114, 182, 0.52);
  --dial-bg: #10071e;
  --dial-scale: #fbcfe8;
  --font-heading: 'Chakra Petch', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* 21. 2018: ยุคแร็ปเปอร์ครองชาร์ต & รักติดไซเรน (Trap Gold, Siren Red & Neon Blue) */
body[data-theme="era-2018"] {
  --bg-main: #141107;
  --bg-grad-1: #29210c;
  --bg-grad-2: #0a0905;
  --deck-surface: linear-gradient(145deg, #33270f, #171308);
  --deck-border: #facc15;
  --liner-bg: #fffdf2;
  --liner-text: #1c1917;
  --liner-muted: #665426;
  --liner-card: rgba(234, 179, 8, 0.12);
  --accent: #facc15;
  --accent-2: #ef4444;
  --accent-glow: rgba(250, 204, 21, 0.5);
  --dial-bg: #110e06;
  --dial-scale: #fef08a;
  --font-heading: 'Chakra Petch', sans-serif;
  --font-body: 'Kanit', sans-serif;
}

/* 22. 2021: เพลง 'ทน' ติดชาร์ต Billboard Global & กำเนิด T-Pop Stage (Emerald Teal & Gold) */
body[data-theme="era-2021"] {
  --bg-main: #061919;
  --bg-grad-1: #0d3331;
  --bg-grad-2: #040e0e;
  --deck-surface: linear-gradient(145deg, #11403d, #082120);
  --deck-border: #2dd4bf;
  --liner-bg: #f0fdfa;
  --liner-text: #082f2c;
  --liner-muted: #2d6a65;
  --liner-card: rgba(20, 184, 166, 0.12);
  --accent: #2dd4bf;
  --accent-2: #f59e0b;
  --accent-glow: rgba(45, 212, 191, 0.52);
  --dial-bg: #051414;
  --dial-scale: #99f6e4;
  --font-heading: 'Prompt', sans-serif;
  --font-body: 'Kanit', sans-serif;
}

/* 23. 2024: ปรากฏการณ์ T-Pop เต็มราชมังฯ, BUS, Jeff Satur & หมีเนย (Butter Gold & Stadium Rose) */
body[data-theme="era-2024"] {
  --bg-main: #1b1207;
  --bg-grad-1: #36220c;
  --bg-grad-2: #0e0904;
  --deck-surface: linear-gradient(145deg, #42290e, #1f1408);
  --deck-border: #fbbf24;
  --liner-bg: #fffbeb;
  --liner-text: #271706;
  --liner-muted: #784d1b;
  --liner-card: rgba(245, 158, 11, 0.13);
  --accent: #fbbf24;
  --accent-2: #f43f5e;
  --accent-glow: rgba(251, 191, 36, 0.55);
  --dial-bg: #140d05;
  --dial-scale: #fde68a;
  --font-heading: 'Chakra Petch', sans-serif;
  --font-body: 'Prompt', sans-serif;
}

/* ==========================================================================
   BASE PAGE SHELL
   ========================================================================== */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 28% 35%, var(--bg-grad-1) 0%, var(--bg-main) 58%, var(--bg-grad-2) 100%);
  color: #f8fafc;
  font-family: var(--font-body);
  transition: background 0.55s ease, color 0.4s ease;
  user-select: none;
}

/* Ambient acoustic studio grid & subtle scanlines */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.14) 50%, transparent 50%);
  background-size: 24px 24px, 100% 4px;
  z-index: 0;
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100vw;
  height: 100vh;
  max-width: 1720px;
  margin: 0 auto;
  padding: 10px 18px 12px;
  gap: 10px;
}

/* ==========================================================================
   TOP BAR: VINTAGE HI-FI RECEIVER FACEPLATE & VU METERS
   ========================================================================== */
.hifi-receiver-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(30, 32, 38, 0.94) 0%, rgba(15, 16, 20, 0.96) 100%);
  border: 2px solid var(--deck-border);
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: border-color 0.4s ease;
}

.receiver-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hub-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #f8fafc;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.hub-btn:hover {
  background: var(--accent);
  color: #09090b;
  border-color: var(--accent);
  transform: translateY(-1px);
}

.receiver-brand {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.receiver-model {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
}

.receiver-title {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Center: Dual Analog VU Meters + Dynamic LED Equalizer */
.receiver-meters {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #090b10;
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.85);
}

.vu-meter-box {
  position: relative;
  width: 68px;
  height: 36px;
  background: radial-gradient(circle at 50% 95%, #fef3c7 0%, #f59e0b 85%, #b45309 100%);
  border-radius: 6px;
  border: 1.5px solid #475569;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(180, 83, 9, 0.65);
}

.vu-scale {
  position: absolute;
  top: 4px;
  left: 6px;
  right: 6px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 800;
  color: #1c1917;
}

.vu-scale .vu-red {
  color: #dc2626;
}

.vu-label {
  position: absolute;
  bottom: 3px;
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 800;
  color: #451a03;
}

.vu-needle {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 2px;
  height: 31px;
  background: #dc2626;
  transform-origin: bottom center;
  transform: rotate(-28deg);
  animation: vuBounceLeft 1.15s ease-in-out infinite alternate;
}

.vu-meter-box.vu-right .vu-needle {
  animation: vuBounceRight 0.92s ease-in-out infinite alternate;
}

@keyframes vuBounceLeft {
  0% { transform: rotate(-34deg); }
  35% { transform: rotate(8deg); }
  65% { transform: rotate(-12deg); }
  100% { transform: rotate(26deg); }
}

@keyframes vuBounceRight {
  0% { transform: rotate(-28deg); }
  40% { transform: rotate(18deg); }
  70% { transform: rotate(-6deg); }
  100% { transform: rotate(30deg); }
}

.led-eq-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  padding: 2px 4px;
}

.led-bar {
  width: 5px;
  background: linear-gradient(to top, #22c55e 0%, #eab308 68%, #ef4444 100%);
  border-radius: 2px;
  animation: eqPulse 0.65s ease-in-out infinite alternate;
}

.led-bar:nth-child(1) { height: 45%; animation-duration: 0.48s; }
.led-bar:nth-child(2) { height: 85%; animation-duration: 0.62s; }
.led-bar:nth-child(3) { height: 65%; animation-duration: 0.39s; }
.led-bar:nth-child(4) { height: 95%; animation-duration: 0.55s; }
.led-bar:nth-child(5) { height: 50%; animation-duration: 0.71s; }
.led-bar:nth-child(6) { height: 80%; animation-duration: 0.44s; }
.led-bar:nth-child(7) { height: 60%; animation-duration: 0.58s; }
.led-bar:nth-child(8) { height: 90%; animation-duration: 0.51s; }

@keyframes eqPulse {
  0% { transform: scaleY(0.28); opacity: 0.75; }
  100% { transform: scaleY(1); opacity: 1; }
}

.era-mode-badge {
  display: flex;
  flex-direction: column;
  padding: 3px 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-mono);
}

.era-mode-badge .badge-top {
  font-size: 0.62rem;
  color: #94a3b8;
}

.era-mode-badge .badge-val {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent);
}

/* Right Controls on Receiver */
.receiver-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deck-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: linear-gradient(180deg, #2e323b, #181a20);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: #f1f5f9;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.deck-ctrl-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.deck-ctrl-btn.active {
  background: var(--accent);
  color: #09090b;
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}

/* ==========================================================================
   MAIN STAGE: LEFT SPINNING AUDIO DECK + RIGHT GATEFOLD J-CARD LINER NOTES
   ========================================================================== */
.main-stage {
  display: grid;
  grid-template-columns: minmax(390px, 47%) 1fr;
  gap: 18px;
  min-height: 0;
  align-items: stretch;
}

/* ==========================================================================
   LEFT ZONE: MORPHING PHYSICAL AUDIO PLAYER DECK
   ========================================================================== */
.audio-deck-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--deck-surface);
  border: 3px solid var(--deck-border);
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.65),
    inset 0 1px 2px rgba(255, 255, 255, 0.22);
  overflow: hidden;
  transition: background 0.5s ease, border-color 0.4s ease;
}

/* Corner Brushed Metal Screws */
.deck-screw {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #cbd5e1 0%, #475569 100%);
  border: 1px solid #1e293b;
  z-index: 2;
}
.deck-screw.tl { top: 10px; left: 10px; }
.deck-screw.tr { top: 10px; right: 10px; }
.deck-screw.bl { bottom: 10px; left: 10px; }
.deck-screw.br { bottom: 10px; right: 10px; }

/* Deck Top Status Header */
.deck-top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  z-index: 3;
}

.deck-format-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: blinkDot 1.2s infinite alternate;
}

@keyframes blinkDot {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

.deck-bitrate-readout {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.75);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* THE MORPHING PLATTER / PLAYER STAGE */
.deck-platter-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  margin: 6px 0;
}

/* Shared SVG Center Artwork container */
.era-svg-figure {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.era-svg-figure svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   MODE 1: VINYL / SHELLAC / JUKEBOX TURNTABLE (1940, 1958, 1969)
   -------------------------------------------------------------------------- */
.player-mechanism {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.audio-deck-zone[data-deck="vinyl"] .mech-vinyl {
  display: flex;
}

.turntable-platter-base {
  position: relative;
  width: min(295px, 68vh);
  height: min(295px, 68vh);
  border-radius: 50%;
  background: radial-gradient(circle, #334155 0%, #0f172a 70%, #cbd5e1 96%, #475569 100%);
  padding: 10px;
  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.75),
    0 0 24px var(--accent-glow);
}

/* Strobe dots rim */
.turntable-platter-base::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.vinyl-disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      #111113 0px,
      #111113 3px,
      #1e1e24 4px,
      #0c0c0e 6px
    );
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spinPlatter 7s linear infinite;
}

.audio-deck-zone.paused .vinyl-disc {
  animation-play-state: paused;
}

/* Vinyl sheen light reflection */
.vinyl-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 35deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.15) 25deg,
    transparent 55deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.15) 205deg,
    transparent 235deg
  );
  pointer-events: none;
}

.vinyl-center-label {
  position: relative;
  z-index: 2;
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
}

.vinyl-spindle-hole {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #09090b;
  border: 2px solid #e2e8f0;
  z-index: 4;
}

/* 45 RPM Jukebox large spider spindle adapter for 1958 */
.audio-deck-zone[data-subtype="jukebox-45"] .vinyl-spindle-hole {
  width: 34px;
  height: 34px;
  background: #facc15;
  border: 3px solid #1e1b4b;
}

.vinyl-year-stamp {
  position: absolute;
  bottom: 8px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.78);
  color: #fde047;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 99px;
}

/* Pivoting Tonearm */
.tonearm-assembly {
  position: absolute;
  top: 12px;
  right: 18px;
  width: 90px;
  height: 210px;
  pointer-events: none;
  z-index: 6;
}

.tonearm-pivot {
  position: absolute;
  top: 0;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #e2e8f0 0%, #64748b 75%, #1e293b 100%);
  border: 2px solid #94a3b8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

.tonearm-rod {
  position: absolute;
  top: 22px;
  right: 28px;
  width: 6px;
  height: 158px;
  background: linear-gradient(90deg, #94a3b8, #f8fafc, #475569);
  border-radius: 4px;
  transform-origin: top center;
  transform: rotate(22deg);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: -4px 6px 10px rgba(0, 0, 0, 0.55);
}

.audio-deck-zone.paused .tonearm-rod {
  transform: rotate(2deg);
}

.tonearm-headshell {
  position: absolute;
  bottom: -10px;
  left: -5px;
  width: 16px;
  height: 26px;
  background: #dc2626;
  border: 1.5px solid #fef08a;
  border-radius: 3px;
  transform: rotate(18deg);
}

/* --------------------------------------------------------------------------
   MODE 2: CASSETTE TAPE DECK WINDOW (1982, 1986, 1994)
   -------------------------------------------------------------------------- */
.audio-deck-zone[data-deck="cassette"] .mech-cassette {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cassette-shell {
  position: relative;
  width: min(390px, 94%);
  height: 238px;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 3px solid var(--accent);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.72),
    inset 0 2px 6px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Transparent 90s shell for 1994 */
.audio-deck-zone[data-subtype="million-94"] .cassette-shell {
  background: linear-gradient(160deg, rgba(131, 24, 67, 0.78), rgba(49, 16, 66, 0.85));
}

.cassette-label-sticker {
  position: relative;
  background: #fef9c3;
  border-radius: 10px;
  padding: 8px 12px 10px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  color: #1c1917;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: inset 0 -6px 0 var(--accent);
}

.cassette-label-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid #1c1917;
  padding-bottom: 3px;
}

.cassette-side-box {
  background: #1c1917;
  color: #fef08a;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 4px;
}

.cassette-title-strip {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  color: #7c2d12;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cassette Center Window with 2 Rotating Spoked Reels & SVG Art */
.cassette-window {
  display: grid;
  grid-template-columns: 68px 1fr 68px;
  align-items: center;
  gap: 8px;
  background: #090d16;
  border: 2px solid #475569;
  border-radius: 999px;
  padding: 6px 14px;
  height: 86px;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.9);
}

.tape-reel {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 6px solid #f8fafc;
  background: radial-gradient(circle, #1e293b 35%, #991b1b 36%, #7f1d1d 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spinPlatter 3.4s linear infinite;
}

.audio-deck-zone.paused .tape-reel {
  animation-play-state: paused;
}

.audio-deck-zone.rewinding .tape-reel {
  animation: spinPlatterReverse 0.45s linear infinite;
}

/* Reel teeth spokes */
.tape-reel::before,
.tape-reel::after {
  content: "";
  position: absolute;
  background: #f8fafc;
}
.tape-reel::before {
  width: 100%;
  height: 5px;
}
.tape-reel::after {
  width: 5px;
  height: 100%;
}

.cassette-center-art {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cassette-center-art svg {
  width: 68px;
  height: 68px;
}

/* Bottom trapezoid magnetic head shield */
.cassette-head-trapezoid {
  height: 30px;
  margin: 0 36px;
  background: rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px 6px 2px 2px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #fde047;
}

.pencil-rewind-btn {
  align-self: center;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px dashed #facc15;
  background: rgba(250, 204, 21, 0.14);
  color: #fef08a;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pencil-rewind-btn:hover {
  background: #facc15;
  color: #1c1917;
  transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   MODE 3: IRIDESCENT OPTICAL CD DISCMAN / WINAMP MP3 (1997, 2001)
   -------------------------------------------------------------------------- */
.audio-deck-zone[data-deck="cd"] .mech-cd {
  display: flex;
}

.discman-housing {
  position: relative;
  width: min(300px, 68vh);
  height: min(300px, 68vh);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #64748b, #1e293b 80%);
  border: 4px solid #cbd5e1;
  padding: 14px;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.72),
    0 0 24px var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
}

.optical-cd-disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #e2e8f0,
    #6ee7b7,
    #38bdf8,
    #c084fc,
    #f472b6,
    #fde047,
    #e2e8f0,
    #6ee7b7,
    #38bdf8,
    #f472b6,
    #e2e8f0
  );
  border: 2px solid #ffffff;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spinPlatter 2.4s linear infinite;
}

.audio-deck-zone.paused .optical-cd-disc {
  animation-play-state: paused;
}

.cd-art-overlay {
  width: 58%;
  height: 58%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.cd-clamping-hub {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #0f172a 32%, rgba(255, 255, 255, 0.78) 35%, #94a3b8 100%);
  border: 2px solid #f8fafc;
  z-index: 4;
}

.discman-lcd-pill {
  position: absolute;
  bottom: -6px;
  background: #052e16;
  border: 2px solid #4ade80;
  color: #4ade80;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  z-index: 6;
}

/* --------------------------------------------------------------------------
   MODE 4: iPOD CLICK WHEEL & Y2K MP3/MP4 PLAYER (2004, 2007)
   -------------------------------------------------------------------------- */
.audio-deck-zone[data-deck="ipod"] .mech-ipod {
  display: flex;
}

.ipod-chassis {
  width: 236px;
  height: 318px;
  background: linear-gradient(145deg, #f8fafc 0%, #cbd5e1 100%);
  border: 3px solid #94a3b8;
  border-radius: 26px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.7),
    inset 0 2px 4px #ffffff;
}

.audio-deck-zone[data-subtype="kamikaze-07"] .ipod-chassis {
  background: linear-gradient(145deg, #f43f5e 0%, #9d174d 100%);
  border-color: #fbcfe8;
}

.ipod-lcd-screen {
  width: 100%;
  height: 136px;
  background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
  border: 2.5px solid #334155;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 20px 1fr;
  box-shadow: inset 0 2px 6px rgba(2, 132, 199, 0.3);
}

.ipod-status-bar {
  background: #0284c7;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}

.ipod-screen-body {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  padding: 6px 8px;
  gap: 8px;
  color: #0f172a;
}

.ipod-mini-art {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #0284c7;
}

.ipod-track-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ipod-track-year {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0369a1;
}

.ipod-track-name {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tactile Click Wheel */
.ipod-click-wheel {
  position: relative;
  width: 134px;
  height: 134px;
  border-radius: 50%;
  background: #e2e8f0;
  border: 2px solid #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18);
}

.audio-deck-zone[data-subtype="kamikaze-07"] .ipod-click-wheel {
  background: #1e1b4b;
  border-color: #fb923c;
}

.wheel-btn {
  position: absolute;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  color: #475569;
  cursor: pointer;
}

.audio-deck-zone[data-subtype="kamikaze-07"] .wheel-btn {
  color: #fb923c;
}

.wheel-btn:hover {
  color: #0284c7;
  transform: scale(1.12);
}

.wheel-btn.menu { top: 8px; }
.wheel-btn.prev { left: 8px; }
.wheel-btn.next { right: 8px; }
.wheel-btn.play { bottom: 8px; }

.wheel-center-select {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f8fafc, #cbd5e1);
  border: 1.5px solid #94a3b8;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   MODE 5: MODERN STREAMING HOLOGRAM VINYL & CONCERT LIGHTSTICK (2011–2025)
   -------------------------------------------------------------------------- */
.audio-deck-zone[data-deck="streaming"] .mech-streaming {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.streaming-holo-platter {
  position: relative;
  width: min(268px, 60vh);
  height: min(268px, 60vh);
  border-radius: 50%;
  padding: 12px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.65) 100%);
  border: 2px solid var(--accent);
  box-shadow:
    0 0 32px var(--accent-glow),
    inset 0 0 22px var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animated orbital equalizer ring */
.streaming-holo-platter::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px dashed var(--accent-2);
  animation: spinPlatterReverse 14s linear infinite;
  pointer-events: none;
}

.streaming-art-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ffffff;
  animation: spinPlatter 9s linear infinite;
}

.audio-deck-zone.paused .streaming-art-disc {
  animation-play-state: paused;
}

/* Interactive T-Pop Concert Lightstick on the right of the platter */
.concert-lightstick-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 6px;
  border-radius: 12px;
  transition: transform 0.2s ease;
}

.concert-lightstick-widget:hover {
  transform: scale(1.06) rotate(-4deg);
}

.lightstick-globe {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 10%, var(--accent) 65%, var(--accent-2) 100%);
  border: 2px solid #ffffff;
  box-shadow: 0 0 24px var(--accent), 0 0 42px var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  animation: lightstickWave 1.6s ease-in-out infinite alternate;
}

.lightstick-handle {
  width: 16px;
  height: 64px;
  background: linear-gradient(90deg, #e2e8f0, #94a3b8, #475569);
  border-radius: 4px 4px 10px 10px;
  border: 1px solid #cbd5e1;
  position: relative;
}

.lightstick-handle::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.lightstick-caption {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--accent);
  text-align: center;
}

@keyframes lightstickWave {
  0% { transform: translateY(-3px) rotate(-6deg); }
  100% { transform: translateY(3px) rotate(6deg); }
}

@keyframes spinPlatter {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spinPlatterReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Deck Bottom Transport Piano Keys */
.deck-transport-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  z-index: 3;
}

.transport-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.piano-key-btn {
  padding: 6px 12px;
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 3px solid #020617;
  border-radius: 7px;
  color: #f8fafc;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.piano-key-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.piano-key-btn:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
}

.piano-key-btn.play-toggle {
  background: var(--accent);
  color: #09090b;
  border-color: #ffffff;
}

.deck-counter-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #020617;
  border: 1.5px solid #475569;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fde047;
}

/* ==========================================================================
   RIGHT ZONE: FOLD-OUT CASSETTE J-CARD / VINYL GATEFOLD LINER NOTES
   ========================================================================== */
.liner-notes-zone {
  position: relative;
  background: var(--liner-bg);
  color: var(--liner-text);
  border-radius: 18px;
  border: 3px solid var(--deck-border);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.65),
    inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  display: grid;
  grid-template-columns: 38px 1fr;
  min-height: 0;
  overflow: hidden;
  transition: background 0.45s ease, color 0.4s ease, border-color 0.4s ease;
}

/* Left J-Card Spine Strip ("สันปกตลับเทป / สันปกแผ่นเสียง") */
.jcard-spine {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-right: 2px dashed rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.spine-code {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.spine-dolby {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.65);
  color: #fef08a;
  padding: 4px 3px;
  border-radius: 4px;
}

/* Main Liner Notes Content Area */
.liner-body {
  padding: 14px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

/* Top Era Header inside J-Card */
.liner-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.14);
  padding-bottom: 8px;
}

.liner-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.liner-year-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: #18181b;
  color: #ffffff;
  padding: 3px 12px;
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.liner-year-ad {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
}

.liner-year-be {
  font-size: 0.86rem;
  font-weight: 600;
  color: #e2e8f0;
}

.liner-era-tag {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--liner-card);
  border: 1px solid rgba(0, 0, 0, 0.18);
  color: var(--liner-text);
}

.liner-main-title {
  font-family: var(--font-heading);
  font-size: clamp(1.32rem, 2.05vw, 1.78rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--liner-text);
  transition: font-family 0.3s ease;
}

.liner-subtitle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--liner-muted);
}

/* 4 Audio Specs Grid */
.audio-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.spec-box {
  background: var(--liner-card);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-left: 4px solid var(--accent-2);
  border-radius: 10px;
  padding: 7px 11px;
}

.spec-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--liner-muted);
  margin-bottom: 2px;
}

.spec-val {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--liner-text);
  line-height: 1.3;
}

/* Nostalgic Liner Story */
.liner-story-box {
  background: rgba(255, 255, 255, 0.52);
  border: 1px dashed rgba(0, 0, 0, 0.22);
  border-radius: 12px;
  padding: 10px 14px;
}

.liner-story-text {
  font-size: 0.91rem;
  line-height: 1.62;
  color: var(--liner-text);
}

/* Tracklist ความทรงจำ (3 Iconic Tracks) */
.tracklist-section {
  background: rgba(0, 0, 0, 0.045);
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  padding: 8px 12px;
}

.tracklist-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--liner-muted);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.tracklist-rows {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.track-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.84rem;
  transition: transform 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.track-row:hover {
  background: #ffffff;
  transform: translateX(3px);
}

.track-no {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  background: #18181b;
  color: var(--accent);
  text-align: center;
  padding: 2px 4px;
  border-radius: 4px;
}

.track-name {
  font-weight: 600;
  color: var(--liner-text);
  line-height: 1.32;
}

.track-time {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--liner-muted);
}

/* ==========================================================================
   BOTTOM TIMELINE SCRUBBER: FM RADIO TUNING DIAL SCALE (FM 88.0 - 108.0 MHz)
   ========================================================================== */
.fm-tuner-footer {
  position: relative;
  background: var(--dial-bg);
  border: 2px solid var(--deck-border);
  border-radius: 14px;
  padding: 8px 16px 10px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.65),
    inset 0 2px 10px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tuner-top-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.tuner-band-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dial-scale);
  font-weight: 700;
}

.stereo-beacon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #f87171;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
}

.stereo-beacon::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

.tuner-freq-digital {
  color: var(--accent);
  font-weight: 800;
  font-size: 0.82rem;
}

/* The Illuminated FM Dial Track & Glowing Red Needle */
.fm-dial-scale-wrap {
  position: relative;
  padding: 6px 6px 2px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
}

/* Glowing Red Tuning Needle */
.fm-tuning-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ef4444;
  box-shadow: 0 0 10px #ef4444, 0 0 20px #f87171;
  z-index: 5;
  pointer-events: none;
  transition: left 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.fm-tuning-needle::before {
  content: "▼";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  color: #ef4444;
  font-size: 0.68rem;
  text-shadow: 0 0 6px #ef4444;
}

.fm-stations-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(23, 1fr);
  gap: 2px;
}

.fm-station-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.58);
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.2s ease;
}

.fm-station-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.fm-station-btn .tick-mark {
  width: 2px;
  height: 8px;
  background: rgba(255, 255, 255, 0.35);
  margin-bottom: 1px;
}

.fm-station-btn.active .tick-mark {
  height: 12px;
  width: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.fm-station-btn .station-freq {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  opacity: 0.72;
}

.fm-station-btn .station-year {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
}

.fm-station-btn.active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1080px) {
  html, body {
    overflow-y: auto;
    height: auto;
  }
  .app-shell {
    height: auto;
    min-height: 100vh;
  }
  .hifi-receiver-bar {
    flex-wrap: wrap;
  }
  .main-stage {
    grid-template-columns: 1fr;
  }
  .fm-stations-grid {
    grid-template-columns: repeat(8, 1fr);
    row-gap: 6px;
  }
  .fm-tuning-needle {
    display: none;
  }
}

@media (max-width: 640px) {
  .audio-specs-grid {
    grid-template-columns: 1fr;
  }
  .receiver-meters {
    display: none;
  }
  .fm-stations-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}