/* DOOM POP TV: dark cinematic CRT music television */

:root {
  --bg: #06040a;
  --bg-2: #0d0916;
  --panel: #120c1e;
  --panel-2: #1a1229;
  --line: #2c1f44;
  --text: #ece4fa;
  --muted: #9a8db5;
  --dim: #5f5478;
  --purple: #b026ff;
  --purple-soft: #7b2cbf;
  --magenta: #ff2bd6;
  --cyan: #2de2e6;
  --red: #ff3b5c;
  --glow: 0 0 6px rgba(176, 38, 255, .8), 0 0 18px rgba(176, 38, 255, .55), 0 0 42px rgba(176, 38, 255, .35);
  --glow-pink: 0 0 6px rgba(255, 43, 214, .8), 0 0 20px rgba(255, 43, 214, .45);
  --radius: 10px;
  --font-body: 'Rajdhani', system-ui, sans-serif;
  --font-mono: 'VT323', ui-monospace, monospace;
  --font-logo: 'Monoton', 'Rajdhani', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(123, 44, 191, .28), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(255, 43, 214, .12), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(45, 226, 230, .06), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
  padding-bottom: 48px;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* The public channel (built by npm run build-site) has no discovery or settings */
html[data-mode="broadcast"] .admin-only { display: none !important; }

.grain {
  /* Behind the page's content, so it never covers YouTube's player (YouTube API policies III.I.6) */
  position: fixed; inset: -50%;
  pointer-events: none; z-index: -1;
  opacity: .05;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-1%, 3%); } 80% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); }
}

/* ── Top bar on the small pages (For AI agents, Privacy, Terms) ── */
/* DOOM POP TV's own pages on the left, the sister-site badges (see Masthead) on the right */
.network {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap;
  padding: 10px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .35);
}
.network-links { display: flex; flex-wrap: wrap; gap: 6px 16px; text-transform: uppercase; font-weight: 600; font-size: 13px; letter-spacing: .06em; }
.network-links a { color: var(--muted); text-decoration: none; }
.network-links a:hover, .network-links a:focus-visible { color: var(--text); }
.network .fnn { margin-left: auto; }

/* ── Masthead ─────────────────────────────────────────── */
/*
 * Three columns: the logo and tagline, the AI-agent pitch in the middle, and the Future News Network strip at the top right.
 * Narrower, the pitch moves under the logo; on phones the strip goes first, above the logo (see Responsive).
 */
.masthead {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand agents right";
  align-items: center; gap: 14px 24px;
  padding: 10px clamp(16px, 4vw, 40px);
}
.brand { grid-area: brand; min-width: 0; }
.logo {
  margin: 0; font-family: var(--font-logo); font-weight: 400;
  font-size: clamp(30px, 5vw, 54px); letter-spacing: .04em; line-height: 1;
  display: flex; gap: .3em; align-items: baseline;
}
.logo-doom { color: #f3e6ff; text-shadow: var(--glow); animation: flicker 7s infinite; }
.logo-pop { color: var(--magenta); text-shadow: var(--glow-pink); }
.logo-tv {
  font-family: var(--font-mono); font-size: .62em; color: var(--bg);
  background: var(--purple); padding: 0 .25em; border-radius: 4px; box-shadow: var(--glow);
}
.tagline {
  margin: 6px 0 0; font-family: var(--font-mono); color: var(--muted);
  font-size: 18px; letter-spacing: .25em; text-transform: uppercase;
}
@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .55; text-shadow: none; }
}

.masthead-right { grid-area: right; align-self: start; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 0; }
/* The admin console's buttons: a full-width row under the three columns, so they never squeeze them */
.masthead-tools { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

.agents-link {
  grid-area: agents; justify-self: center; max-width: 34ch; text-align: center; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 18px; letter-spacing: .06em; line-height: 1.2; color: var(--cyan);
}
.agents-cta { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
.agents-link:hover, .agents-link:focus-visible { color: var(--text); text-shadow: 0 0 10px rgba(45, 226, 230, .6); }

/* The Future News Network strip, top right: the FNN banner over the four channels (same on every channel site) */
/* fnn-strip:start  The Future News Network strip: the FNN banner over the four channels in two columns.
   Master copy in ~/futurenewsnetwork/strip/; every channel site carries this block unchanged (see its README).
   Needs the fonts Playfair Display 900, Monoton, VT323 and IBM Plex Mono 600. Sizes are in px so it looks the same on every site. */
.fnn { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; line-height: 1; text-align: left; }
.fnn a { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 10px; white-space: nowrap; text-decoration: none; }
/* FNN: the network's red logo on a dark news-desk bar, across both columns, to the network's home page */
.fnn .fnn-home {
  grid-column: 1 / -1; justify-content: flex-start; gap: 10px; min-height: 0; padding: 4px 12px 4px 4px;
  background: #121318; border: 1px solid #121318; color: #ecebe6; font: 600 11px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
}
.fnn .fnn-home:hover, .fnn .fnn-home:focus-visible { color: #fff; border-color: #d42a2a; }
.fnn-logo { display: block; width: 52px; height: 24px; flex: none; }
/* Future News: its masthead, ink on newsprint with the double rule */
.fnn .fnn-fn {
  background: #f5f1e8; border: 1px solid #1a1a1a; border-bottom: 4px double #1a1a1a; color: #1a1a1a;
  font: 900 18px/1 'Playfair Display', Georgia, serif; letter-spacing: -.01em;
}
.fnn .fnn-fn:hover, .fnn .fnn-fn:focus-visible { color: #1a1a1a; background: #fffdf7; }
/* DOOM POP TV: its neon logo on its own night-black screen */
.fnn .fnn-dptv { align-items: baseline; padding-top: 10px; gap: .28em; background: #07050b; border: 1px solid #2a1d3a; border-radius: 8px; font: 400 15px/1 'Monoton', sans-serif; letter-spacing: .04em; }
.fnn .fnn-dptv:hover, .fnn .fnn-dptv:focus-visible { border-color: #b026ff; box-shadow: 0 0 14px rgba(176, 38, 255, .45); }
.fnn-dptv-doom { color: #f3e6ff; text-shadow: 0 0 6px rgba(176, 38, 255, .8), 0 0 18px rgba(176, 38, 255, .55); }
.fnn-dptv-pop { color: #ff2bd6; text-shadow: 0 0 6px rgba(255, 43, 214, .8), 0 0 16px rgba(255, 43, 214, .45); }
.fnn-dptv-tv { font: 600 .62em 'IBM Plex Mono', ui-monospace, monospace; color: #07050b; background: #b026ff; padding: .05em .25em; border-radius: 3px; box-shadow: 0 0 10px rgba(176, 38, 255, .6); }
/* AGENTS ONLY: its phosphor-green terminal sign */
.fnn .fnn-ao { background: #050805; border: 1px solid #1f4d2a; color: #39ff7a; text-shadow: 0 0 6px rgba(57, 255, 122, .45); font: 400 22px/1 'VT323', monospace; letter-spacing: .08em; }
.fnn .fnn-ao:hover, .fnn .fnn-ao:focus-visible { color: #39ff7a; border-color: #39ff7a; box-shadow: 0 0 12px rgba(57, 255, 122, .35); }
.fnn-ao-mark { color: #ffb000; text-shadow: none; font-size: .6em; }
/* Human Resources: its navy HR badge on beige putty, with the hard drop shadow */
.fnn .fnn-hr { justify-content: flex-start; padding-left: 4px; background: #ebe5d3; border: 1px solid #1f1c15; box-shadow: 3px 3px 0 #1f1c15; color: #1f1c15; font: 600 12px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .06em; }
.fnn .fnn-hr:hover, .fnn .fnn-hr:focus-visible { color: #1f1c15; background: #fbf8ee; }
.fnn-hr-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; background: #22375a; color: #f4f0e2; font: 600 13px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0; border: 1px solid #1f1c15; }
/* Phones: the same strip, smaller */
@media (max-width: 640px) {
  .fnn { gap: 5px; }
  .fnn a { min-height: 30px; padding: 0 7px; }
  .fnn .fnn-home { padding: 3px 10px 3px 3px; font-size: 9px; letter-spacing: .1em; }
  .fnn-logo { width: 42px; height: 20px; }
  .fnn .fnn-fn { font-size: 15px; border-bottom-width: 3px; }
  .fnn .fnn-dptv { font-size: 12px; padding-top: 8px; border-radius: 6px; }
  .fnn .fnn-ao { font-size: 18px; }
  .fnn .fnn-hr { padding-left: 3px; font-size: 10px; letter-spacing: .03em; box-shadow: 2px 2px 0 #1f1c15; }
  .fnn-hr-mark { width: 21px; height: 21px; font-size: 11px; }
}
/* Narrow phones: the strip takes the full width */
@media (max-width: 560px) {
  .fnn { display: grid; width: 100%; }
}
/* fnn-strip:end */

.quota-meter {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
  font-family: var(--font-mono); font-size: 16px; color: var(--muted); letter-spacing: .04em;
}
.quota-meter[hidden] { display: none; }
.quota-meter b { color: var(--cyan); font-weight: 400; }
.quota-meter small { font-size: 14px; color: var(--dim); }
.quota-meter.short b { color: var(--red); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border-radius: 8px; padding: 9px 16px; border: 1px solid var(--line);
  background: var(--panel); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 14px;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
}
.btn:hover { border-color: var(--purple); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .ctl:focus-visible, .chan:focus-visible, .card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn-discover {
  background: linear-gradient(180deg, #7d1fd0, #4d128a);
  border-color: var(--purple); box-shadow: 0 0 16px rgba(176, 38, 255, .35);
}
.btn-discover:hover { box-shadow: var(--glow); }
.btn-discover[disabled] { opacity: .6; cursor: progress; }
.btn-discover.scanning .btn-icon { animation: spin 1s linear infinite; display: inline-block; }
.btn-ghost { background: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Channels ─────────────────────────────────────────── */
/* Two rows of three, across the full width */
.channels {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  padding: 8px clamp(16px, 4vw, 40px) 10px;
}
.chan {
  min-width: 0; display: flex; align-items: baseline; gap: 10px; cursor: pointer; text-align: left;
  padding: 4px 14px; border-radius: 8px; border: 1px solid var(--line); line-height: 1.2;
  background: rgba(18, 12, 30, .7); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; font-size: 14px;
  color: var(--muted); transition: all .15s;
}
.chan-num { font-family: var(--font-mono); font-size: 20px; color: var(--dim); letter-spacing: 0; white-space: nowrap; }
.chan:hover { color: var(--text); border-color: var(--purple-soft); }
.chan[aria-current="true"] {
  color: #fff; border-color: var(--purple); background: linear-gradient(180deg, rgba(176, 38, 255, .28), rgba(176, 38, 255, .08));
  box-shadow: 0 0 18px rgba(176, 38, 255, .35), inset 0 0 12px rgba(176, 38, 255, .25);
}
.chan[aria-current="true"] .chan-num { color: var(--magenta); text-shadow: var(--glow-pink); }

/* ── Stage: TV + up next ──────────────────────────────── */
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px;
  padding: 0 clamp(16px, 4vw, 40px);
}

.bezel {
  padding: clamp(10px, 1.8vw, 22px) clamp(10px, 1.8vw, 22px) 0;
  border-radius: 26px;
  background: linear-gradient(160deg, #241a33 0%, #120c1c 45%, #0a0710 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(123, 44, 191, .25),
    inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 8px rgba(0, 0, 0, .6);
  border: 1px solid #2a1f3d;
}
.screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  border-radius: 22px / 18px;
  box-shadow: inset 0 0 0 3px #050308, 0 0 0 2px #2b2140, 0 0 40px rgba(176, 38, 255, .25);
}
.screen iframe, #player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.crt-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .75), inset 0 0 14px rgba(176, 38, 255, .25);
  border-radius: inherit;
  animation: crt-flicker 6s infinite;
}
.crt-overlay::after {
  content: ''; position: absolute; left: 0; right: 0; height: 18%;
  background: linear-gradient(180deg, transparent, rgba(176, 38, 255, .05), transparent);
  animation: roll 7s linear infinite;
}
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .92; } 48% { opacity: 1; } 49% { opacity: .95; } }
@keyframes roll { from { top: -20%; } to { top: 110%; } }

/* The channel display sits on the bezel, below the screen: nothing may cover YouTube's player */
.osd {
  font-family: var(--font-mono); font-size: 20px; color: #b9ff6a; letter-spacing: .12em;
  text-shadow: 0 0 8px rgba(185, 255, 106, .8); opacity: 0; transition: opacity .4s; white-space: nowrap;
}
.osd.show { opacity: 1; }
.osd small { font-size: 1em; margin-left: .6em; }

.no-signal { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.static {
  position: absolute; inset: 0; opacity: .32;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .35s steps(4) infinite;
}
.no-signal-text { position: relative; text-align: center; padding: 20px; max-width: 34em; }
.no-signal-title {
  margin: 0; font-family: var(--font-mono); font-size: clamp(40px, 7vw, 88px); letter-spacing: .15em;
  color: #fff; text-shadow: var(--glow); animation: flicker 3s infinite;
}
.no-signal-body { margin: 6px 0 0; font-family: var(--font-mono); font-size: clamp(16px, 1.8vw, 22px); color: var(--muted); }
.no-signal-body code { color: var(--cyan); }

.bezel-foot {
  display: flex; align-items: center; gap: 14px; padding: 8px 8px 10px;
  font-family: var(--font-mono); color: var(--dim); font-size: 16px; letter-spacing: .2em;
}
.bezel-brand { white-space: nowrap; }
/* Takes whatever room the buttons leave, never widening the TV */
.bezel-foot .osd { flex: 1 1 0; width: 0; overflow: hidden; text-overflow: ellipsis; }
.bezel-led { width: 7px; height: 7px; border-radius: 50%; background: #3a2b52; }
.bezel-led.on { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }

.nowplaying {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 16px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(26, 18, 41, .9), rgba(18, 12, 30, .9));
  border: 1px solid var(--line);
}
.np-meta { min-width: 0; flex: 1 1 280px; }
.np-label { margin: 0; font-family: var(--font-mono); font-size: 16px; letter-spacing: .3em; color: var(--magenta); }
.np-title { margin: 2px 0 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.np-artist { margin: 2px 0 0; color: var(--muted); font-weight: 500; font-size: 17px; }
.np-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.np-terms { margin: 8px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--dim); }
.np-terms a { color: var(--muted); }
#np-youtube { color: var(--text); font-weight: 600; }

.controls { display: flex; gap: 6px; letter-spacing: normal; font-family: var(--font-body); }
.ctl {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text);
  font-size: 14px; line-height: 1; transition: all .15s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.ctl span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ctl:hover { border-color: var(--purple); box-shadow: 0 0 12px rgba(176, 38, 255, .35); }
.ctl[disabled] { opacity: .4; pointer-events: none; }
#btn-like[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(45, 226, 230, .4); }
#btn-fav[aria-pressed="true"] { color: #ffd84d; border-color: #ffd84d; box-shadow: 0 0 12px rgba(255, 216, 77, .35); }
#btn-dislike:hover { border-color: var(--red); color: var(--red); }

.tag {
  font-family: var(--font-mono); font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 7px; border-radius: 4px; border: 1px solid var(--purple-soft); color: #d9b8ff; background: rgba(123, 44, 191, .15);
}

/* Up next rail */
.upnext {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(13, 9, 22, .8); padding: 14px; align-self: start;
  max-height: 680px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.rail-title { margin: 0 0 10px; font-family: var(--font-mono); font-weight: 400; font-size: 18px; letter-spacing: .3em; color: var(--muted); }
.upnext-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: q; }
.upnext-item {
  display: grid; grid-template-columns: 22px 104px minmax(0, 1fr); gap: 10px; align-items: center;
  cursor: pointer; padding: 6px; border-radius: 8px; border: 1px solid transparent; background: none; text-align: left; width: 100%;
}
.upnext-item:hover { background: var(--panel-2); border-color: var(--line); }
.upnext-item::before { counter-increment: q; content: counter(q, decimal-leading-zero); font-family: var(--font-mono); color: var(--dim); font-size: 18px; }
.upnext-item img { width: 104px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; background: var(--panel); }
.upnext-text { min-width: 0; }
.upnext-title { font-weight: 600; font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upnext-artist { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-note { color: var(--dim); font-family: var(--font-mono); font-size: 18px; margin: 0; }

/* ── Library grid ─────────────────────────────────────── */
.library { padding: 34px clamp(16px, 4vw, 40px) 20px; }
.library-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.library-head h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.library-count { font-family: var(--font-mono); font-size: 19px; color: var(--muted); }
.library-blurb { margin: -4px 0 16px; color: var(--muted); font-size: 16px; }
.page-foot {
  display: flex; justify-content: center; gap: 18px; padding: 10px 16px 24px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.page-foot a { color: var(--dim); text-decoration: none; }
.page-foot a:hover, .page-foot a:focus-visible { color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.card {
  position: relative; display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); border-color: var(--purple-soft); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 18px rgba(176, 38, 255, .25); }
.card.playing { border-color: var(--magenta); box-shadow: 0 0 22px rgba(255, 43, 214, .35); }
.thumb { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
/* Thumbnails are shown as YouTube provides them: no filters or scanlines over them */
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.card:hover .thumb img { transform: scale(1.03); }
.duration, .badge-fav, .badge-playing {
  position: absolute; z-index: 1; font-family: var(--font-mono); font-size: 16px; line-height: 1;
  padding: 3px 6px; border-radius: 4px; background: rgba(0, 0, 0, .8);
}
.duration { right: 6px; bottom: 6px; }
.badge-fav { left: 6px; top: 6px; color: #ffd84d; }
.badge-playing { left: 6px; bottom: 6px; color: var(--magenta); letter-spacing: .15em; }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-title { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-artist { margin: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.card-tags .tag { font-size: 13px; }
.grid-empty {
  grid-column: 1 / -1; text-align: center; padding: 50px 20px; border: 1px dashed var(--line); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 22px; color: var(--muted);
}

/* ── Ticker ───────────────────────────────────────────── */
.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 7px clamp(16px, 4vw, 40px); background: rgba(6, 4, 10, .92); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 18px; backdrop-filter: blur(6px);
}
.ticker-label { color: var(--bg); background: var(--magenta); padding: 0 8px; border-radius: 3px; letter-spacing: .15em; }
.ticker-text { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.suggestions { margin: -6px 0 16px; font-size: 14px; color: var(--muted); }
.suggestions small { display: block; color: var(--dim); }
.suggestion-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.suggestion { cursor: pointer; background: transparent; }
.suggestion:hover { border-color: var(--cyan); color: var(--cyan); }

/* ── Add from YouTube ─────────────────────────────────── */
.add-dialog {
  width: min(640px, calc(100vw - 32px)); padding: 20px 22px; border: 1px solid var(--purple-soft); border-radius: 12px;
  background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.add-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.add-dialog h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; }
.add-results { list-style: none; margin: 0 0 12px; padding: 0; font-size: 15px; color: var(--muted); }
.add-results li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.add-results .ok { color: var(--cyan); }
.add-results .bad { color: var(--red); }

/* ── Promote panel ────────────────────────────────────── */
.promote-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.promote-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promote-head h2 { margin: 0; }
.promote-intro, .promote-hint, .hint { color: var(--muted); font-size: 15px; margin: 6px 0 10px; }
/* Listeners' song requests: the public Request line, and what became of them in the admin's Add dialog */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.listener-suggestions { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; }
.listener-suggestions h3 { margin: 0; font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
.listener-suggestions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.listener-suggestions .note { flex-basis: 100%; font-style: italic; color: var(--dim); }
.listener-suggestions button { margin-left: auto; }
.promote-hint a { color: var(--cyan); }
.promote-empty { color: var(--dim); font-style: italic; margin: 6px 0; }
.promote-section { margin-top: 22px; }
.draft { margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.draft-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--line); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
}
.draft-text { margin: 0; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 15px; color: var(--text); }
.draft-actions { display: flex; gap: 8px; margin: 6px 0 4px; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.shoutout + .shoutout { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.promote-searches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.promote-searches a { color: var(--cyan); }

/* ── Settings drawer ──────────────────────────────────── */
.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(480px, 100vw); overflow-y: auto;
  background: linear-gradient(180deg, #140d22, #0a0711); border-left: 1px solid var(--purple-soft);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .6); padding: 20px; transform: translateX(100%); transition: transform .25s ease;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.drawer-head h2 { margin: 0; font-size: 24px; letter-spacing: .12em; text-transform: uppercase; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > span { font-weight: 600; letter-spacing: .05em; }
.field small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; letter-spacing: 0; }
.field textarea, .field input {
  width: 100%; font-family: var(--font-mono); font-size: 18px; color: var(--text);
  background: #07050c; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; resize: vertical;
}
.field textarea:focus, .field input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(176, 38, 255, .2); }
.field-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.field-inline { margin: 0; flex-direction: row; align-items: center; }
.field-inline input { width: 80px; }
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.toggle input { width: 18px; height: 18px; accent-color: var(--purple); }
.quota { font-family: var(--font-mono); color: var(--muted); font-size: 17px; }
.drawer-actions { margin: 6px 0 24px; }
.runs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.runs li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; background: rgba(0, 0, 0, .25); }
.runs .run-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 17px; }
.runs .ok { color: var(--cyan); } .runs .error { color: var(--red); } .runs .running { color: var(--magenta); }
.runs .run-detail { color: var(--muted); }

/* ── Privacy and terms pages ──────────────────────────── */
.legal { max-width: 760px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px) 60px; font-size: 17px; }
.legal h1 { font-family: var(--font-logo); font-weight: 400; font-size: clamp(28px, 5vw, 44px); margin: 18px 0 4px; color: #f3e6ff; text-shadow: var(--glow); }
.legal h2 { font-size: 20px; letter-spacing: .08em; text-transform: uppercase; margin: 28px 0 6px; color: var(--magenta); }
.legal p, .legal li { color: var(--text); }
.legal a { color: var(--cyan); }
.legal .updated { font-family: var(--font-mono); color: var(--muted); font-size: 18px; margin: 0; }
.legal .back { display: inline-block; margin-top: 28px; }
.legal pre {
  overflow-x: auto; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2);
  font-size: 14px; line-height: 1.5;
}
.legal code { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .9em; color: var(--cyan); }

/* ── Toast ────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px);
  padding: 10px 18px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--purple);
  box-shadow: var(--glow); font-weight: 600;
}

/* ── Responsive ───────────────────────────────────────── */
/* Too narrow for three columns: the AI-agent pitch goes under the logo, the network strip stays at the top right */
@media (max-width: 1120px) {
  .masthead { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand right" "agents right"; }
  .agents-link { justify-self: start; align-self: center; align-items: flex-start; text-align: left; font-size: 16px; }
}
@media (max-width: 1080px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .upnext { max-height: none; }
  .upnext-list { grid-auto-flow: column; grid-auto-columns: 220px; overflow-x: auto; padding-bottom: 6px; }
  .upnext-item { grid-template-columns: 1fr; }
  .upnext-item::before { display: none; }
  .upnext-item img { width: 100%; }
}
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .tagline { font-size: 14px; }
  .btn { padding: 8px 12px; font-size: 13px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .bezel-brand { display: none; }
  .bezel-foot { gap: 8px; }
  .chan { flex-direction: column; gap: 0; padding: 4px 10px; font-size: 12px; letter-spacing: .06em; line-height: 1.15; }
  .chan-num { font-size: 15px; line-height: 1; }
}
/* Phones: the network strip goes first, at the very top, then the logo, then the AI-agent pitch */
@media (max-width: 560px) {
  .masthead { grid-template-areas: "fnn fnn" "brand brand" "agents agents"; }
  .masthead-right { display: contents; }
  .masthead .fnn { grid-area: fnn; }
}
@media (max-width: 380px) {
  .agents-link { font-size: 14px; letter-spacing: .03em; }
  .agents-cta { font-size: 13px; }
}
/* Only on phones */
@media (max-width: 460px) {
  /* Six buttons on the bezel: tighter, so Share fits beside Fave, and on the smallest phones they wrap */
  .controls { gap: 4px; flex-wrap: wrap; justify-content: center; min-width: 0; }
  .ctl { padding: 4px 6px; gap: 3px; }
  .ctl span { letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}