/* ===== THEMES =====
   All look-and-feel lives in variables. Arcade (default) is defined on
   :root; Cinema and Paper override via html[data-theme=...], which is set
   by an inline script in index.html before first paint. */

@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/press-start-2p.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('../fonts/vt323.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* Arcade: neon pixels + CRT scanlines */
  --bg: #0b0616;
  --bg-image: radial-gradient(ellipse at 50% -20%, #2a1650 0%, transparent 55%);
  --panel: #160e2c;
  --panel2: #241645;
  --line: #3b2a6b;
  --text: #e8ecf4;
  --muted: #8f83b8;
  --accent: #00f0ff;   /* links, section heads, episode titles */
  --accent2: #ff2d95;  /* app title, sheet frame, hovers */
  --hot: #ffe600;      /* primary actions, active tab, air dates */
  --ok: #39ff14;
  --red: #ff4040;

  --heading: 'Press Start 2P', monospace;
  --body: 'VT323', monospace;
  --fw-head: 400;
  --case: uppercase;
  --tracking: 1px;

  --radius: 0px;
  --radius-sm: 0px;
  --bw: 3px;
  --bw-sm: 2px;
  --shadow-btn: 3px 3px 0 #000;
  --shadow-card: 4px 4px 0 #000;
  --press: translate(3px, 3px);
  --scanlines: block;

  --glow-h1: 0 0 6px var(--accent2), 0 0 18px rgba(255, 45, 149, 0.6);
  --glow-h2: 0 0 6px rgba(0, 240, 255, 0.7);
  --glow-h3: 0 0 6px rgba(255, 230, 0, 0.5);
  --glow-tab: 0 0 6px var(--hot);

  --btn-bg: var(--panel2);
  --btn-fg: var(--text);
  --btn-primary-bg: var(--hot);
  --btn-primary-fg: #1a1500;
  --btn-primary-border: var(--hot);
  --btn-primary-shadow: 3px 3px 0 rgba(255, 45, 149, 0.8);
  --check-on-bg: var(--ok);
  --check-on-fg: #041a00;
  --check-on-glow: 0 0 10px rgba(57, 255, 20, 0.7);

  --input-bg: #000;
  --input-fg: var(--ok);
  --input-ph: #3d5c3d;
  --input-focus: var(--ok);
  --input-focus-glow: 0 0 10px rgba(57, 255, 20, 0.4);

  --tabbar-bg: #0d0820;
  --tabbar-line: var(--accent2);
  --tabbar-shadow: 0 -2px 16px rgba(255, 45, 149, 0.35);
  --bar-bg: #000;
  --bar-fill: repeating-linear-gradient(to right, var(--ok) 0 6px, transparent 6px 8px);
  --toast-bg: #000;
  --toast-fg: var(--ok);
  --toast-border: var(--ok);
  --toast-shadow: 0 0 14px rgba(57, 255, 20, 0.5), 4px 4px 0 #000;
  --sheet-border: var(--accent2);
  --sheet-shadow: 0 0 24px rgba(255, 45, 149, 0.4);
  --overlay-bg: rgba(4, 2, 10, 0.8);
  --eprow-line: #1e1438;

  /* Pixel fonts render huge, so arcade sizes are tiny */
  --fs-body: 1.2rem;
  --fs-h1: 0.95rem;
  --fs-h2: 0.7rem;
  --fs-h3: 0.58rem;
  --fs-btn: 0.55rem;
  --fs-btn-sm: 0.5rem;
  --fs-name: 0.6rem;
  --fs-cardname: 0.52rem;
  --fs-surprise: 0.75rem;
  --fs-tab: 0.42rem;
  --fs-epnum: 0.5rem;
  --fs-toast: 0.55rem;
  --fs-lg: 1.25rem;
  --fs-md: 1.1rem;
  --fs-sm: 0.95rem;
}

html[data-theme="cinema"] {
  /* Cinema: dark auditorium, gold marquee, serif headings */
  --bg: #121014;
  --bg-image: radial-gradient(ellipse at 50% -20%, #251c17 0%, transparent 60%);
  --panel: #1c1820;
  --panel2: #28222e;
  --line: #3a3342;
  --text: #f0eae0;
  --muted: #a99f92;
  --accent: #e0b05c;
  --accent2: #e0b05c;
  --hot: #e0b05c;
  --ok: #58b87c;
  --red: #e06060;

  --heading: Georgia, 'Times New Roman', serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fw-head: 600;
  --case: none;
  --tracking: 0.4px;

  --radius: 14px;
  --radius-sm: 9px;
  --bw: 1px;
  --bw-sm: 1px;
  --shadow-btn: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.45);
  --press: scale(0.97);
  --scanlines: none;

  --glow-h1: none;
  --glow-h2: none;
  --glow-h3: none;
  --glow-tab: none;

  --btn-bg: var(--panel2);
  --btn-fg: var(--text);
  --btn-primary-bg: #e0b05c;
  --btn-primary-fg: #241a06;
  --btn-primary-border: #e0b05c;
  --btn-primary-shadow: 0 2px 10px rgba(224, 176, 92, 0.35);
  --check-on-bg: #58b87c;
  --check-on-fg: #06180c;
  --check-on-glow: none;

  --input-bg: #0d0b0f;
  --input-fg: var(--text);
  --input-ph: #6f6678;
  --input-focus: #e0b05c;
  --input-focus-glow: 0 0 0 3px rgba(224, 176, 92, 0.18);

  --tabbar-bg: rgba(18, 16, 20, 0.97);
  --tabbar-line: #3a3342;
  --tabbar-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5);
  --bar-bg: #0c0a0e;
  --bar-fill: linear-gradient(to right, #e0b05c, #c98f3a);
  --toast-bg: #28222e;
  --toast-fg: var(--text);
  --toast-border: #4a4154;
  --toast-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --sheet-border: #3a3342;
  --sheet-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
  --overlay-bg: rgba(8, 6, 10, 0.75);
  --eprow-line: #28222e;

  --fs-body: 1rem;
  --fs-h1: 1.2rem;
  --fs-h2: 1.05rem;
  --fs-h3: 0.9rem;
  --fs-btn: 0.8rem;
  --fs-btn-sm: 0.72rem;
  --fs-name: 0.95rem;
  --fs-cardname: 0.82rem;
  --fs-surprise: 1.25rem;
  --fs-tab: 0.62rem;
  --fs-epnum: 0.8rem;
  --fs-toast: 0.85rem;
  --fs-lg: 1.05rem;
  --fs-md: 0.95rem;
  --fs-sm: 0.85rem;
}

html[data-theme="paper"] {
  /* Paper: light zine — cream stock, ink borders, coral & teal */
  --bg: #f6f1e7;
  --bg-image: none;
  --panel: #fffdf8;
  --panel2: #efe7d8;
  --line: #2a2733;
  --text: #2a2733;
  --muted: #8a8274;
  --accent: #0e7a6f;
  --accent2: #e2564a;
  --hot: #e2564a;
  --ok: #2e9e5b;
  --red: #c93c3c;

  --heading: 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fw-head: 800;
  --case: none;
  --tracking: 0;

  --radius: 12px;
  --radius-sm: 8px;
  --bw: 2px;
  --bw-sm: 2px;
  --shadow-btn: 3px 3px 0 rgba(42, 39, 51, 0.18);
  --shadow-card: 4px 4px 0 rgba(42, 39, 51, 0.15);
  --press: translate(2px, 2px);
  --scanlines: none;

  --glow-h1: none;
  --glow-h2: none;
  --glow-h3: none;
  --glow-tab: none;

  --btn-bg: #fffdf8;
  --btn-fg: #2a2733;
  --btn-primary-bg: #e2564a;
  --btn-primary-fg: #fff;
  --btn-primary-border: #2a2733;
  --btn-primary-shadow: 3px 3px 0 rgba(42, 39, 51, 0.18);
  --check-on-bg: #2e9e5b;
  --check-on-fg: #fff;
  --check-on-glow: none;

  --input-bg: #fff;
  --input-fg: #2a2733;
  --input-ph: #b5ac9c;
  --input-focus: #0e7a6f;
  --input-focus-glow: 0 0 0 3px rgba(14, 122, 111, 0.15);

  --tabbar-bg: #fffdf8;
  --tabbar-line: #2a2733;
  --tabbar-shadow: 0 -4px 14px rgba(42, 39, 51, 0.12);
  --bar-bg: #e6ddcc;
  --bar-fill: linear-gradient(to right, #2e9e5b, #2e9e5b);
  --toast-bg: #2a2733;
  --toast-fg: #fffdf8;
  --toast-border: #2a2733;
  --toast-shadow: 3px 3px 0 rgba(42, 39, 51, 0.2);
  --sheet-border: #2a2733;
  --sheet-shadow: 0 -8px 30px rgba(42, 39, 51, 0.25);
  --overlay-bg: rgba(42, 39, 51, 0.45);
  --eprow-line: #efe7d8;

  --fs-body: 1rem;
  --fs-h1: 1.2rem;
  --fs-h2: 1.05rem;
  --fs-h3: 0.9rem;
  --fs-btn: 0.8rem;
  --fs-btn-sm: 0.72rem;
  --fs-name: 0.95rem;
  --fs-cardname: 0.82rem;
  --fs-surprise: 1.25rem;
  --fs-tab: 0.62rem;
  --fs-epnum: 0.8rem;
  --fs-toast: 0.85rem;
  --fs-lg: 1.05rem;
  --fs-md: 0.95rem;
  --fs-sm: 0.85rem;
}

/* ===== BASE ===== */

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

html { height: 100%; }

body {
  font-family: var(--body);
  font-size: var(--fs-body);
  background: var(--bg);
  background-image: var(--bg-image);
  color: var(--text);
  min-height: 100%;
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}

/* CRT scanlines (arcade only) */
body::after {
  content: '';
  display: var(--scanlines);
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 4px);
}

body.noscroll { overflow: hidden; }

a { color: var(--accent); }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 10px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: linear-gradient(var(--bg) 75%, transparent);
}
.topbar h1 {
  font-family: var(--heading);
  font-weight: var(--fw-head);
  font-size: var(--fs-h1);
  color: var(--accent2);
  text-shadow: var(--glow-h1);
  letter-spacing: var(--tracking);
}

/* Views */
.view { padding: 4px 16px 24px; max-width: 900px; margin: 0 auto; }
.hidden { display: none !important; }

h2 {
  font-family: var(--heading);
  font-weight: var(--fw-head);
  font-size: var(--fs-h2);
  margin: 20px 0 12px;
  color: var(--accent);
  text-shadow: var(--glow-h2);
  text-transform: var(--case);
  letter-spacing: var(--tracking);
}
h3 {
  font-family: var(--heading);
  font-weight: var(--fw-head);
  font-size: var(--fs-h3);
  margin: 16px 0 10px;
  color: var(--hot);
  text-shadow: var(--glow-h3);
  text-transform: var(--case);
}
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

.rowhead { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 10px; flex-wrap: wrap; }
.rowhead h2 { margin: 0; }
.rowhead .cardbtns { margin-top: 0; }

.empty { text-align: center; padding: 48px 16px; color: var(--muted); font-size: var(--fs-lg); }
.empty .btn { margin-top: 18px; }

/* Buttons */
.btn {
  font-family: var(--heading);
  font-weight: var(--fw-head);
  font-size: var(--fs-btn);
  text-transform: var(--case);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  background: var(--btn-bg); color: var(--btn-fg);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
}
.btn.primary {
  background: var(--btn-primary-bg); color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow);
}
.btn.danger { background: transparent; color: var(--red); border-color: var(--red); }
.btn.small { padding: 6px 8px; font-size: var(--fs-btn-sm); }
.btn:active { transform: var(--press); box-shadow: none; }
.btn:disabled { opacity: 0.5; }

.icon-btn {
  font-family: var(--heading);
  border: var(--bw) solid var(--line); background: var(--panel); color: var(--accent);
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem; cursor: pointer;
  box-shadow: var(--shadow-btn);
}
.icon-btn:active { transform: var(--press); box-shadow: none; }

.btn.check {
  width: 42px; height: 42px; padding: 0;
  font-size: 1rem; flex-shrink: 0;
  background: var(--panel2); color: var(--muted);
  border: var(--bw) solid var(--line);
}
.btn.check.on, .btn.check:hover {
  background: var(--check-on-bg); color: var(--check-on-fg); border-color: var(--check-on-bg);
  box-shadow: var(--check-on-glow);
}

/* Episode cards (Up Next) */
.epcard {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 10px; margin-bottom: 14px; cursor: pointer;
}
.epcard:hover { border-color: var(--accent); }
.epcard .still {
  width: 120px; aspect-ratio: 16/9; object-fit: cover;
  flex-shrink: 0; background: var(--panel2);
  border: var(--bw-sm) solid var(--line);
  border-radius: var(--radius-sm);
}
.epcard.upcoming .poster {
  width: 52px; aspect-ratio: 2/3; object-fit: cover; flex-shrink: 0;
  border: var(--bw-sm) solid var(--line);
  border-radius: var(--radius-sm);
}
.epinfo { flex: 1; min-width: 0; }
.showname { font-family: var(--heading); font-weight: var(--fw-head); font-size: var(--fs-name); line-height: 1.5; color: var(--text); }
.eptitle { font-size: var(--fs-md); color: var(--accent); margin: 3px 0 1px; }
.airdate { color: var(--hot); font-size: var(--fs-md); }

.still.placeholder, .poster.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; background: var(--panel2); color: var(--muted);
}

/* Poster grids */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.card { cursor: pointer; }
.card .poster {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  background: var(--panel2); display: block;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.card:hover .poster { border-color: var(--accent2); }
.card .poster.placeholder { aspect-ratio: 2/3; display: flex; }
.cardname { font-family: var(--heading); font-weight: var(--fw-head); font-size: var(--fs-cardname); line-height: 1.6; margin-top: 8px; }
.cardbtns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cardbtns.pad { padding: 14px 16px 0; }
.cardbtns.center { justify-content: center; }

/* Progress bar */
.bar {
  height: 8px; background: var(--bar-bg);
  border: var(--bw-sm) solid var(--line); border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  position: relative; overflow: hidden;
}
.bar .fill { height: 100%; background: var(--bar-fill); }

/* Tab bar */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
  display: flex;
  background: var(--tabbar-bg);
  border-top: var(--bw) solid var(--tabbar-line);
  box-shadow: var(--tabbar-shadow);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; border: 0; background: none; color: var(--muted);
  font-family: var(--heading); font-weight: var(--fw-head);
  font-size: var(--fs-tab); text-transform: var(--case);
  padding: 9px 0 11px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tab span { font-size: 1.15rem; filter: grayscale(1) opacity(0.6); }
.tab.active { color: var(--hot); text-shadow: var(--glow-tab); }
.tab.active span { filter: none; }

/* Overlay + sheets */
.overlay {
  position: fixed; inset: 0; z-index: 96;
  background: var(--overlay-bg);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--bg); width: 100%; max-width: 700px;
  max-height: 92vh; overflow-y: auto;
  border: var(--bw) solid var(--sheet-border); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--sheet-shadow);
  padding: 16px;
}
.sheet.detail { padding: 0 0 24px; }
.sheethead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sheethead h2 { margin: 0; }

input[type="search"], input[type="text"] {
  width: 100%; padding: 10px 12px;
  font-family: var(--body); font-size: var(--fs-lg);
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm);
  background: var(--input-bg); color: var(--input-fg);
  margin-bottom: 12px;
  caret-color: var(--input-fg);
}
input::placeholder { color: var(--input-ph); }
input:focus { outline: none; border-color: var(--input-focus); box-shadow: var(--input-focus-glow); }

.result {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: var(--bw-sm) solid var(--line);
}
.result .poster {
  width: 46px; aspect-ratio: 2/3; object-fit: cover; flex-shrink: 0;
  border: var(--bw-sm) solid var(--line);
  border-radius: var(--radius-sm);
}
.result .poster.placeholder { font-size: 1rem; }

/* Surprise pick */
.surprise { text-align: center; padding: 8px 0 16px; }
.surprise .poster {
  width: min(240px, 60vw); aspect-ratio: 2/3; object-fit: cover;
  margin: 0 auto 14px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.surprise img.poster { display: block; }
.surprisename {
  font-family: var(--heading); font-weight: var(--fw-head);
  font-size: var(--fs-surprise); line-height: 1.6; margin-bottom: 4px;
}
.surprise .cardbtns { margin-top: 14px; }

/* Show detail */
.detailhero {
  background-size: cover; background-position: center;
  background-color: var(--panel2);
  padding: 16px; padding-top: 56px; min-height: 170px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative;
  border-bottom: var(--bw) solid var(--accent);
}
.detailhero h2 {
  margin: 0 0 6px; font-size: var(--fs-h1); color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.detailhero p { font-size: var(--fs-md); color: rgba(255, 255, 255, 0.8); }
.detailhero .close { position: absolute; top: 12px; right: 12px; }
.pad { padding: 14px 16px 0; }

.season {
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px; overflow: hidden;
}
.season summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font-family: var(--heading); font-weight: var(--fw-head); font-size: var(--fs-name);
}
.season summary::-webkit-details-marker { display: none; }
.season[open] summary { border-bottom: var(--bw-sm) solid var(--line); color: var(--accent); }
.eprow {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-top: var(--bw-sm) solid var(--eprow-line);
}
.eprow.seen .epname { color: var(--muted); text-decoration: line-through; }
.eprow.future { opacity: 0.6; }
.epnum { color: var(--accent2); font-family: var(--heading); font-weight: var(--fw-head); font-size: var(--fs-epnum); width: 36px; flex-shrink: 0; }
.epname { flex: 1; font-size: var(--fs-md); line-height: 1.15; min-width: 0; }

/* Panels (settings) */
.panel {
  background: var(--panel);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px; margin-bottom: 16px;
}
.panel h3 { margin-top: 0; color: var(--hot); }
.panel p { margin-bottom: 10px; font-size: var(--fs-md); line-height: 1.25; }

/* Toast */
.toast {
  position: fixed; bottom: calc(84px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); z-index: 97;
  background: var(--toast-bg); color: var(--toast-fg);
  border: var(--bw) solid var(--toast-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--toast-shadow);
  padding: 10px 18px;
  font-family: var(--heading); font-weight: var(--fw-head);
  font-size: var(--fs-toast); text-transform: var(--case);
  max-width: 90vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .overlay { align-items: center; }
  .sheet { border-bottom: var(--bw) solid var(--sheet-border); border-radius: var(--radius); max-height: 86vh; }
}