/* =========================================================
   TL-02 COMPLETELY NEW ARCHITECTURE:
   "TOY COLLECTOR TRADING CARD & INTERACTIVE CONSOLE DECK"
   (Totally distinct layout from TL-01 Bangkok Timeline)
   ========================================================= */

:root {
  --bg-main: #f4ebd9;
  --bg-tex: radial-gradient(#cbb692 1.2px, transparent 1.2px);
  --ink: #2d1e17;
  --ink-muted: #6e5041;
  --primary: #d9381e;
  --primary-fg: #fff9eb;
  --secondary: #f59e0b;
  --panel-bg: #fffdf8;
  --panel-border: #4a3328;
  --border-w: 3px;
  --radius-lg: 14px;
  --radius-sm: 6px;
  --shadow: 7px 7px 0px #3d271d;
  --font-display: 'Charmonman', cursive;
  --font-body: 'Sarabun', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --screen-bg: #fdf5e6;
  --screen-border: #8b5a2b;
}

/* 15 ERA THEMES - Changing Fonts, Colors, Borders, & Console Bezel */
body[data-theme="paper60s"] {
  --bg-main: #f4ebd9;
  --bg-tex: radial-gradient(#b89f78 1.5px, transparent 1.5px);
  --ink: #3e2723;
  --ink-muted: #6d4c41;
  --primary: #b91c1c;
  --primary-fg: #fef3c7;
  --secondary: #047857;
  --panel-bg: #fffdf7;
  --panel-border: #5d4037;
  --radius-lg: 4px;
  --shadow: 6px 6px 0px rgba(62, 39, 35, 0.25);
  --font-display: 'Charmonman', cursive;
  --screen-bg: #fcf3df;
  --screen-border: #8d6e63;
}

body[data-theme="tintoy70s"] {
  --bg-main: #facc15;
  --bg-tex: repeating-linear-gradient(45deg, rgba(220,38,38,0.07) 0 14px, transparent 14px 28px);
  --ink: #1c1917;
  --ink-muted: #78350f;
  --primary: #dc2626;
  --primary-fg: #fef08a;
  --secondary: #0284c7;
  --panel-bg: #fffbeb;
  --panel-border: #1c1917;
  --radius-lg: 2px;
  --shadow: 8px 8px 0px #1c1917;
  --font-display: 'Pridi', serif;
  --screen-bg: #fef08a;
  --screen-border: #dc2626;
}

body[data-theme="lcd81"] {
  --bg-main: #7f1d1d;
  --bg-tex: radial-gradient(circle at 50% 30%, #991b1b 0%, #450a0a 100%);
  --ink: #292524;
  --ink-muted: #57534e;
  --primary: #7f1d1d;
  --primary-fg: #fde68a;
  --secondary: #b45309;
  --panel-bg: #fde68a;
  --panel-border: #b45309;
  --radius-lg: 12px;
  --shadow: inset 0 2px 0 #fef9c3, 0 10px 0 #451a03;
  --font-display: 'Chakra Petch', monospace;
  --screen-bg: #9ca38f;
  --screen-border: #3f3f46;
}

body[data-theme="holo86"] {
  --bg-main: #3b0764;
  --bg-tex: linear-gradient(135deg, #4c1d95 0%, #831843 50%, #1e3a8a 100%);
  --ink: #1e1b4b;
  --ink-muted: #5b21b6;
  --primary: #db2777;
  --primary-fg: #fef08a;
  --secondary: #eab308;
  --panel-bg: #ffffff;
  --panel-border: #facc15;
  --radius-lg: 14px;
  --shadow: 0 0 0 4px #ec4899, 8px 8px 0px #facc15;
  --font-display: 'Kanit', sans-serif;
  --screen-bg: linear-gradient(135deg, #fef08a 0%, #fbcfe8 35%, #bae6fd 70%, #bbf7d0 100%);
  --screen-border: #eab308;
}

body[data-theme="famicom88"] {
  --bg-main: #090d16;
  --bg-tex: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px);
  --ink: #f8fafc;
  --ink-muted: #93c5fd;
  --primary: #dc2626;
  --primary-fg: #fef08a;
  --secondary: #facc15;
  --panel-bg: #0f172a;
  --panel-border: #f8fafc;
  --radius-lg: 0px;
  --radius-sm: 0px;
  --shadow: 0 0 0 3px #dc2626, 8px 8px 0px #facc15;
  --font-display: 'Press Start 2P', 'Chakra Petch', monospace;
  --screen-bg: #1e1b4b;
  --screen-border: #facc15;
}

body[data-theme="gameboy92"] {
  --bg-main: #cbd5e1;
  --bg-tex: radial-gradient(#94a3b8 1px, transparent 1px);
  --ink: #0f380f;
  --ink-muted: #306230;
  --primary: #9d174d;
  --primary-fg: #ffffff;
  --secondary: #1e3a8a;
  --panel-bg: #8bac0f;
  --panel-border: #0f380f;
  --radius-lg: 10px 10px 36px 10px;
  --shadow: 8px 8px 0px #334155;
  --font-display: 'Chakra Petch', monospace;
  --screen-bg: #9bbc0f;
  --screen-border: #0f380f;
}

body[data-theme="tamiya95"] {
  --bg-main: #071930;
  --bg-tex:
    linear-gradient(rgba(56, 189, 248, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.14) 1px, transparent 1px);
  --ink: #f8fafc;
  --ink-muted: #7dd3fc;
  --primary: #ef4444;
  --primary-fg: #ffffff;
  --secondary: #38bdf8;
  --panel-bg: #0f294a;
  --panel-border: #38bdf8;
  --radius-lg: 6px;
  --shadow: -6px 0 0 #ef4444, 6px 0 0 #2563eb;
  --font-display: 'Kanit', sans-serif;
  --screen-bg: #081c36;
  --screen-border: #ef4444;
}

body[data-theme="tamagotchi97"] {
  --bg-main: #fbcfe8;
  --bg-tex: radial-gradient(circle at 20% 20%, #fef08a 0%, #fbcfe8 55%, #bae6fd 100%);
  --ink: #831843;
  --ink-muted: #be185d;
  --primary: #ec4899;
  --primary-fg: #fef08a;
  --secondary: #0284c7;
  --panel-bg: #ffffff;
  --panel-border: #f472b6;
  --radius-lg: 38px;
  --radius-sm: 20px;
  --shadow: 0 10px 0 #f472b6, 0 18px 30px rgba(236,72,153,0.2);
  --font-display: 'Mitr', sans-serif;
  --screen-bg: #ecfccb;
  --screen-border: #38bdf8;
}

body[data-theme="ps199"] {
  --bg-main: #27272a;
  --bg-tex: radial-gradient(#3f3f46 1.5px, transparent 1.5px);
  --ink: #18181b;
  --ink-muted: #52525b;
  --primary: #1d4ed8;
  --primary-fg: #ffffff;
  --secondary: #ef4444;
  --panel-bg: #d4d4d8;
  --panel-border: #71717a;
  --radius-lg: 10px;
  --shadow: inset 3px 3px 0 #f4f4f5, inset -3px -3px 0 #71717a, 0 12px 28px rgba(0,0,0,0.5);
  --font-display: 'Chakra Petch', sans-serif;
  --screen-bg: #18181b;
  --screen-border: #52525b;
}

body[data-theme="anime02"] {
  --bg-main: #090d16;
  --bg-tex: radial-gradient(circle at 70% 20%, #1e3a8a 0%, #090d16 70%);
  --ink: #fef08a;
  --ink-muted: #93c5fd;
  --primary: #eab308;
  --primary-fg: #0f172a;
  --secondary: #38bdf8;
  --panel-bg: #172554;
  --panel-border: #facc15;
  --radius-lg: 12px;
  --shadow: 0 0 22px rgba(250, 204, 21, 0.35);
  --font-display: 'Kanit', sans-serif;
  --screen-bg: #0f172a;
  --screen-border: #38bdf8;
}

body[data-theme="mmorpg04"] {
  --bg-main: #dbeafe;
  --bg-tex: linear-gradient(180deg, #eff6ff 0%, #bfdbfe 100%);
  --ink: #1e3a8a;
  --ink-muted: #2563eb;
  --primary: #2563eb;
  --primary-fg: #ffffff;
  --secondary: #ec4899;
  --panel-bg: #ffffff;
  --panel-border: #60a5fa;
  --radius-lg: 12px;
  --shadow: 0 6px 0 #93c5fd, 0 14px 30px rgba(37, 99, 235, 0.15);
  --font-display: 'Prompt', sans-serif;
  --screen-bg: #f0f9ff;
  --screen-border: #3b82f6;
}

body[data-theme="audition07"] {
  --bg-main: #18072c;
  --bg-tex: radial-gradient(circle at 30% 30%, #581c87 0%, #18072c 70%);
  --ink: #fdf2f8;
  --ink-muted: #f472b6;
  --primary: #ec4899;
  --primary-fg: #ffffff;
  --secondary: #06b6d4;
  --panel-bg: rgba(46, 16, 101, 0.9);
  --panel-border: #ec4899;
  --radius-lg: 24px;
  --shadow: 0 0 25px rgba(236, 72, 153, 0.5);
  --font-display: 'Mitr', sans-serif;
  --screen-bg: #0f0720;
  --screen-border: #06b6d4;
}

/* 2008: Special Force / Point Blank / DotA (Tactical Camo & Radar Green HUD) */
body[data-theme="tactical08"] {
  --bg-main: #142218;
  --bg-tex:
    linear-gradient(rgba(34, 197, 94, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 197, 94, 0.08) 1px, transparent 1px);
  --ink: #ecfdf5;
  --ink-muted: #4ade80;
  --primary: #16a34a;
  --primary-fg: #052e16;
  --secondary: #eab308;
  --panel-bg: #1b2e21;
  --panel-border: #22c55e;
  --radius-lg: 4px;
  --shadow: 6px 6px 0px #052e16;
  --font-display: 'Chakra Petch', monospace;
  --screen-bg: #0a140d;
  --screen-border: #eab308;
}

/* 2010: FarmVille & Blythe Doll (Warm Country Barn Wood & Pastel Doll Pink) */
body[data-theme="farmblythe10"] {
  --bg-main: #fef3c7;
  --bg-tex: repeating-linear-gradient(90deg, rgba(180, 83, 9, 0.06) 0 18px, transparent 18px 36px);
  --ink: #451a03;
  --ink-muted: #92400e;
  --primary: #db2777;
  --primary-fg: #ffffff;
  --secondary: #16a34a;
  --panel-bg: #fffbeb;
  --panel-border: #b45309;
  --radius-lg: 20px;
  --shadow: 0 8px 0 #d97706, 0 14px 24px rgba(180, 83, 9, 0.15);
  --font-display: 'Pridi', serif;
  --screen-bg: #f0fdf4;
  --screen-border: #ec4899;
}

/* 2011: Angry Birds, Fruit Ninja & Furby (Touchscreen Wood Dojo & Furby Purple) */
body[data-theme="touch11"] {
  --bg-main: #fff1f2;
  --bg-tex: radial-gradient(circle at 80% 20%, #fde047 0%, #ffe4e6 55%, #f3e8ff 100%);
  --ink: #3b0764;
  --ink-muted: #9f1239;
  --primary: #dc2626;
  --primary-fg: #fef08a;
  --secondary: #7c3aed;
  --panel-bg: #ffffff;
  --panel-border: #7c3aed;
  --radius-lg: 22px;
  --shadow: 6px 6px 0px #dc2626;
  --font-display: 'Kanit', sans-serif;
  --screen-bg: #fef9c3;
  --screen-border: #dc2626;
}

body[data-theme="candy13"] {
  --bg-main: #dcfce7;
  --bg-tex: radial-gradient(#86efac 2px, transparent 2px);
  --ink: #064e3b;
  --ink-muted: #047857;
  --primary: #06c755;
  --primary-fg: #ffffff;
  --secondary: #f97316;
  --panel-bg: #ffffff;
  --panel-border: #4ade80;
  --radius-lg: 28px;
  --shadow: 0 8px 0 #86efac, 0 16px 32px rgba(6, 199, 85, 0.15);
  --font-display: 'Mitr', sans-serif;
  --screen-bg: #f0fdf4;
  --screen-border: #06c755;
}

/* 2015: DIY Slime, Squishy & Yo-kai Watch (Gooey Mint/Lavender Pastel Bubble) */
body[data-theme="slime15"] {
  --bg-main: #ccfbf1;
  --bg-tex: radial-gradient(circle at 25% 75%, #fbcfe8 0%, #ccfbf1 55%, #fef9c3 100%);
  --ink: #115e59;
  --ink-muted: #0d9488;
  --primary: #0d9488;
  --primary-fg: #ffffff;
  --secondary: #f43f5e;
  --panel-bg: rgba(255, 255, 255, 0.92);
  --panel-border: #2dd4bf;
  --radius-lg: 34px;
  --shadow: 0 10px 0 #5eead4, 0 16px 28px rgba(13, 148, 136, 0.16);
  --font-display: 'Mitr', sans-serif;
  --screen-bg: #fdf2f8;
  --screen-border: #f472b6;
}

/* 2016: Pokémon GO AR Radar Map (Teal Night Map & Cyan PokéStop Glow) */
body[data-theme="pokego16"] {
  --bg-main: #042f2e;
  --bg-tex:
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #042f2e 0%, #0f172a 100%);
  --ink: #ecfeff;
  --ink-muted: #67e8f9;
  --primary: #06b6d4;
  --primary-fg: #083344;
  --secondary: #ef4444;
  --panel-bg: rgba(15, 23, 42, 0.88);
  --panel-border: #22d3ee;
  --radius-lg: 18px;
  --shadow: 0 0 22px rgba(34, 211, 238, 0.35);
  --font-display: 'Prompt', sans-serif;
  --screen-bg: #083344;
  --screen-border: #34d399;
}

/* 2017: Fidget Spinner & PUBG Battle Royale (Military Steel & Airdrop Orange/Yellow) */
body[data-theme="pubg17"] {
  --bg-main: #1c1917;
  --bg-tex: repeating-linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0 16px, transparent 16px 32px);
  --ink: #fafaf9;
  --ink-muted: #fdba74;
  --primary: #ea580c;
  --primary-fg: #ffffff;
  --secondary: #facc15;
  --panel-bg: #292524;
  --panel-border: #f97316;
  --radius-lg: 6px;
  --shadow: 6px 6px 0px #ea580c;
  --font-display: 'Chakra Petch', sans-serif;
  --screen-bg: #18181b;
  --screen-border: #facc15;
}

body[data-theme="esports18"] {
  --bg-main: #090d16;
  --bg-tex: linear-gradient(125deg, rgba(0, 195, 227, 0.18) 0%, #090d16 45%, rgba(255, 69, 84, 0.18) 100%);
  --ink: #f8fafc;
  --ink-muted: #94a3b8;
  --primary: #eab308;
  --primary-fg: #090d16;
  --secondary: #00c3e3;
  --panel-bg: #1e293b;
  --panel-border: #eab308;
  --radius-lg: 14px;
  --shadow: -5px 0 20px rgba(0, 195, 227, 0.3), 5px 0 20px rgba(255, 69, 84, 0.3);
  --font-display: 'Prompt', sans-serif;
  --screen-bg: #0f172a;
  --screen-border: #ff4554;
}

/* 2020: Among Us, Animal Crossing & Pop It (Deep Space Starfield & Alert Red) */
body[data-theme="among20"] {
  --bg-main: #090a10;
  --bg-tex: radial-gradient(#ffffff 1.2px, transparent 1.2px);
  --ink: #f8fafc;
  --ink-muted: #fca5a5;
  --primary: #ef4444;
  --primary-fg: #ffffff;
  --secondary: #38bdf8;
  --panel-bg: #181824;
  --panel-border: #ef4444;
  --radius-lg: 22px;
  --shadow: 0 8px 0 #991b1b, 0 0 25px rgba(239, 68, 68, 0.3);
  --font-display: 'Kanit', sans-serif;
  --screen-bg: #0f172a;
  --screen-border: #38bdf8;
}

/* 2022: Roblox, Minecraft & Thai Pokémon TCG (Voxel Block Grid & Robux Gold) */
body[data-theme="voxel22"] {
  --bg-main: #eff6ff;
  --bg-tex:
    linear-gradient(rgba(37, 99, 235, 0.08) 2px, transparent 2px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.08) 2px, transparent 2px);
  --ink: #0f172a;
  --ink-muted: #1d4ed8;
  --primary: #2563eb;
  --primary-fg: #ffffff;
  --secondary: #eab308;
  --panel-bg: #ffffff;
  --panel-border: #1e293b;
  --radius-lg: 8px;
  --shadow: 7px 7px 0px #1e293b;
  --font-display: 'Chakra Petch', sans-serif;
  --screen-bg: #fef9c3;
  --screen-border: #1e293b;
}

body[data-theme="arttoy25"] {
  --bg-main: #fdf4ff;
  --bg-tex: radial-gradient(circle at 20% 20%, #fce7f3 0%, #f3e8ff 50%, #e0f2fe 100%);
  --ink: #3b0764;
  --ink-muted: #7e22ce;
  --primary: #db2777;
  --primary-fg: #ffffff;
  --secondary: #8b5cf6;
  --panel-bg: rgba(255, 255, 255, 0.88);
  --panel-border: #f472b6;
  --radius-lg: 28px;
  --shadow: 0 20px 45px rgba(126, 34, 206, 0.14);
  --font-display: 'Prompt', sans-serif;
  --screen-bg: #ffffff;
  --screen-border: #e879f9;
}

/* =========================================================
   NEW SPLIT-SCREEN ARCADE & COLLECTOR BINDER LAYOUT
   ========================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  background-image: var(--bg-tex);
  background-size: 24px 24px, 100% 100%;
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.45s ease, color 0.35s ease;
  overflow-x: hidden;
}

/* Top Arcade Marquee Header */
.arcade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 26px;
  background: var(--panel-bg);
  border-bottom: var(--border-w) solid var(--panel-border);
  gap: 14px;
  flex-wrap: wrap;
  z-index: 20;
}

.arcade-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.level-badge {
  background: var(--primary);
  color: var(--primary-fg);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--panel-border);
}

.arcade-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.theme-indicator-chip {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  background: rgba(0,0,0,0.07);
  border: 1.5px solid var(--panel-border);
}

.header-nav-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.toy-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 3px 3px 0px var(--panel-border);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.toy-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--panel-border);
}

.toy-btn:active,
.toy-btn.active {
  background: var(--primary);
  color: var(--primary-fg);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--panel-border);
}

/* =========================================================
   CARTRIDGE SHELF (TOP HORIZONTAL GAME / TOY SELECTOR)
   ========================================================= */
.cartridge-shelf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.08);
  border-bottom: 2px solid var(--panel-border);
}

.cartridge-tab {
  flex-shrink: 0;
  padding: 6px 13px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 2px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.72;
  transition: all 0.2s ease;
}

.cartridge-tab:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.cartridge-tab.active {
  opacity: 1;
  background: var(--primary);
  color: var(--primary-fg);
  transform: translateY(-3px);
  box-shadow: 0 4px 0 var(--panel-border);
}

.cartridge-year {
  font-family: var(--font-mono);
  font-weight: 800;
}

/* =========================================================
   MAIN WORKSPACE: LEFT CONSOLE POD + RIGHT TRADING CARD
   ========================================================= */
.toybox-workspace {
  flex: 1;
  max-width: 1420px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 26px;
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 26px;
  align-items: stretch;
}

/* LEFT COLUMN: Interactive Toy / Console Display Frame */
.console-pod {
  background: var(--panel-bg);
  border: var(--border-w) solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.4s ease;
}

.console-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.year-stamp-box {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.big-year-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}

.sub-year-be {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.rarity-stars {
  background: var(--primary);
  color: var(--primary-fg);
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Screen Viewport inside the Console Pod */
.console-screen {
  flex: 1;
  min-height: 290px;
  background: var(--screen-bg);
  border: 4px solid var(--screen-border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px;
  overflow: hidden;
  cursor: grab;
  transition: all 0.4s ease;
}

.console-screen:active {
  cursor: grabbing;
}

.screen-watermark {
  position: absolute;
  font-family: var(--font-display);
  font-size: 7.5rem;
  font-weight: 900;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

.toy-illustration-holder {
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  animation: floatToy 4s ease-in-out infinite;
}

.item-svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  max-height: 255px;
}

@keyframes floatToy {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

.era-badge-ribbon {
  margin-top: 8px;
  z-index: 3;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 99px;
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  text-align: center;
}

/* Physical Handheld D-Pad & A/B Buttons Below the Screen */
.console-controls-deck {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px dashed var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dpad-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dpad-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 2.5px solid var(--panel-border);
  background: var(--ink);
  color: var(--panel-bg);
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--panel-border);
}

.dpad-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--panel-border);
}

.console-scroll-hint {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-align: center;
}

.ab-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.round-action-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 2.5px solid var(--panel-border);
  background: var(--primary);
  color: var(--primary-fg);
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--panel-border);
}

.round-action-btn.btn-b {
  background: var(--secondary);
  color: #1c1917;
}

/* =========================================================
   RIGHT COLUMN: COLLECTOR TRADING CARD & NOSTALGIA MANUAL
   ========================================================= */
.collector-card {
  background: var(--panel-bg);
  border: var(--border-w) solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.4s ease;
}

.card-header-block {
  border-bottom: 2px solid var(--panel-border);
  padding-bottom: 12px;
}

.card-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.card-main-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}

body[data-theme="famicom88"] .card-main-title {
  font-size: 1.25rem;
  line-height: 1.45;
  color: #facc15;
}

.card-quote {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.04);
  padding: 10px 14px;
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 4-Spec RPG Stat Grid */
.rpg-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stat-box {
  background: rgba(0, 0, 0, 0.04);
  border: 1.5px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}

.stat-box-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-muted);
  margin-bottom: 2px;
}

.stat-box-val {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Nostalgia Story & Highlights Directly Visible in Card */
.nostalgia-story-section {
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px dashed var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.story-subhead {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--primary);
}

body[data-theme="famicom88"] .story-subhead {
  font-size: 0.85rem;
  color: #38bdf8;
}

.story-body-text {
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 10px;
}

.highlights-list {
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.6;
}

.highlights-list li {
  margin-bottom: 3px;
}

.card-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-muted);
  padding-top: 8px;
  border-top: 1.5px solid var(--panel-border);
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 980px) {
  .toybox-workspace {
    grid-template-columns: 1fr;
  }
}