/* Pool TV, direction B: neon arcade. Loaded after each page's base styles and overrides them.
   House neon red from thirstyai.live, amber marquee bulbs, acid green for "correct / on air".
   Fonts: Khand (display, scoreboard condensed) + Satoshi (body) from Fontshare, Azeret Mono (labels). */
@import url("https://api.fontshare.com/v2/css?f[]=khand@500,600,700&f[]=satoshi@500,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;600&display=swap");

:root{
  --bg:#050507; --panel:#0c0b10; --tile:#100f15; --tile-hi:#17161e; --line:#23212b; --line-hi:#3a3744;
  --ink:#f3efe6; --dim:#8c8794; --red:#ff1f3d; --red-deep:#a8001c; --red-ink:#ffe3e7; --amber:#ffb000; --green:#9dff2e; --green-ink:#eaffd0;
  --ok:var(--green);
  --title:'Khand',Impact,sans-serif; --label:'Satoshi',system-ui,sans-serif; --mono:'Azeret Mono',ui-monospace,monospace;
  --glow-red:0 0 6px rgba(255,31,61,.9),0 0 18px rgba(255,31,61,.55),0 0 42px rgba(255,31,61,.3);
  --glow-green:0 0 6px rgba(157,255,46,.9),0 0 18px rgba(157,255,46,.5);
  --glow-amber:0 0 4px rgba(255,176,0,.9),0 0 12px rgba(255,176,0,.5);
}
html{background:var(--bg)}
body{background:
  radial-gradient(1200px 600px at 50% -10%, rgba(255,31,61,.12), transparent 60%),
  radial-gradient(800px 400px at 50% 110%, rgba(255,31,61,.08), transparent 60%),
  var(--bg);color:var(--ink);font-family:var(--label)}
/* CRT: scanlines + grain, one layer, never in the way */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);mix-blend-mode:multiply;opacity:.6}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:51;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}

h1,.brand,.big,.q .text,.lb .row,.card .v,.tile,.scenes button,.tvpick button,.modes button,button.big,.ans,.game .t{font-family:var(--title)}
h1{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-shadow:var(--glow-red);font-size:30px}
h1 a{font-family:var(--mono);text-shadow:none}
.now,.who,.msg,.pts,.meta,.clock,.sub,.card h3,.bot,.players,.toast,.gate p,.gate .err,.game .w{font-family:var(--mono)}
.dot{border-radius:0;box-shadow:0 0 8px currentColor}
.dot.on{background:var(--green);color:var(--green);box-shadow:var(--glow-green)}
.dot.bad{background:var(--red);color:var(--red);box-shadow:var(--glow-red)}

/* buttons: arcade keys, raised, pressed state sinks + glows */
button{border:1px solid var(--line-hi);background:linear-gradient(180deg,var(--tile-hi),var(--tile));color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 3px 0 #000,0 4px 10px rgba(0,0,0,.6);transition:transform .06s,box-shadow .06s,border-color .15s}
button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 0 #000}
button:disabled{opacity:.35;box-shadow:none}
.pwr{color:var(--red);border-color:var(--red-deep);text-shadow:var(--glow-red)}
.pwr.off{color:var(--dim);text-shadow:none;border-color:var(--line-hi)}

/* tv picker: neon tab strip */
.tvpick button{font-family:var(--title);font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.tvpick button.on{color:var(--red-ink);border-color:var(--red);text-shadow:var(--glow-red);box-shadow:inset 0 0 0 1px var(--red),0 0 14px rgba(255,31,61,.35)}

/* scenes */
.scenes button{font-size:17px;letter-spacing:.1em;text-transform:uppercase}
.scenes button.lockbtn{color:var(--amber);border-color:var(--amber);text-shadow:var(--glow-amber)}

/* tiles: neon-outlined arcade panels, brand stripe becomes a lit edge */
.tile{background:linear-gradient(180deg,#121118,#0b0a0f);border:1px solid var(--line-hi);font-size:20px;letter-spacing:.08em;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 3px 0 #000}
.tile::before{height:3px;box-shadow:0 0 8px var(--brand,#444),0 0 18px var(--brand,#444)}
.tile.live{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red),0 0 16px rgba(255,31,61,.45),0 3px 0 #000}
.tile.live::after{background:var(--red);color:var(--red-ink);font-family:var(--mono);text-shadow:none;box-shadow:var(--glow-red);animation:onair 1.6s ease-in-out infinite}
@keyframes onair{0%,100%{opacity:1}50%{opacity:.55}}
.tile.skel{background:linear-gradient(90deg,#0d0c11 0%,#17161e 50%,#0d0c11 100%);background-size:200% 100%;border-color:transparent;box-shadow:none}
.lockbar{background:var(--amber);color:#1a1200;font-family:var(--mono);box-shadow:var(--glow-amber)}
.lockbar button{border-color:#1a1200;color:#1a1200;background:transparent;box-shadow:none}

/* d-pad cluster */
.dpad button,.col button,.row button{font-family:var(--mono);font-weight:500;letter-spacing:.08em}
.dpad .ok{color:var(--red);border-color:var(--red-deep);text-shadow:var(--glow-red)}
.typebox{border:1px solid var(--line-hi);background:var(--tile)} .typebox input{font-family:var(--mono)}

/* sheets, gate */
.sheet{background:var(--bg)} .sheet h1{font-size:34px}
.game{background:var(--tile);border:1px solid var(--line-hi)} .game.live{border-color:var(--red);box-shadow:0 0 14px rgba(255,31,61,.35)}
.gate h1{font-size:64px;line-height:1}
.gate input{font-family:var(--title);font-size:44px;letter-spacing:.5em;border:1px solid var(--line-hi);background:var(--tile)}
.gate input:focus{border-color:var(--red);box-shadow:0 0 14px rgba(255,31,61,.35)}
.toast{background:var(--red);color:var(--red-ink);box-shadow:var(--glow-red)}

/* remote must fit one screen: tile rows shrink, never the page */
.deck{grid-template-rows:auto auto auto minmax(0,1fr) auto!important;gap:8px}
.sources{grid-auto-rows:minmax(0,1fr)}
.tile{font-size:clamp(14px,4vw,19px);padding:6px 8px;line-height:1}
.row{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,2fr)!important}
.typebox input{min-width:0;width:100%}
h1{font-size:28px}
/* guest page: buzzer answers */
button.big{font-size:24px;letter-spacing:.06em;padding:20px 18px}
.buzz{background:linear-gradient(180deg,#2a0612,#12040a);border:2px solid var(--red-deep);color:var(--red-ink);box-shadow:0 6px 0 #4d0010,0 10px 24px rgba(255,31,61,.25)}
.buzz:active{transform:translateY(5px);box-shadow:0 1px 0 #4d0010}
.buzz.mine{border-color:var(--red);box-shadow:inset 0 0 0 2px var(--red),0 0 24px rgba(255,31,61,.6),0 6px 0 #4d0010}
.buzz.right{border-color:var(--green);color:var(--green-ink);box-shadow:inset 0 0 0 2px var(--green),var(--glow-green),0 6px 0 #1f3d00}
.buzz.wrong{opacity:.4;filter:grayscale(.7)}
.buzz.right:disabled,.buzz.mine:disabled{opacity:1}
.buzz{text-shadow:0 0 8px rgba(255,31,61,.5);min-height:72px}
main{align-content:stretch}
.flash{position:fixed;inset:0;pointer-events:none;z-index:60;background:var(--red);opacity:0}

/* host */
.modes button{font-size:16px;letter-spacing:.08em}
.modes button.on{color:var(--red-ink);border-color:var(--red);text-shadow:var(--glow-red);box-shadow:inset 0 0 0 1px var(--red)}
button.danger{color:var(--red);border-color:var(--red-deep)}

/* board (tv): marquee bulb border, neon title, scoreboard numerals */
.stage{background:transparent}
.stage::before{content:"";position:absolute;inset:14px;pointer-events:none;border:2px solid #2a1116;
  background-image:radial-gradient(circle, var(--amber) 0 3px, transparent 4px);background-size:28px 28px;background-position:-14px -14px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:5px;
  animation:chase 1.1s steps(2) infinite;opacity:.9;filter:drop-shadow(0 0 4px var(--amber))}
@keyframes chase{50%{background-position:0 0}}
.top{border-bottom:1px solid var(--line-hi)} .bot{border-top:1px solid var(--line-hi)}
.brand{font-size:40px;letter-spacing:.06em;text-transform:uppercase;text-shadow:var(--glow-red)}
.brand i{background:var(--red);box-shadow:var(--glow-red);border-radius:50%}
.clock{font-size:34px;color:var(--ink)}
.big{font-size:150px;font-weight:700;letter-spacing:.02em;text-shadow:var(--glow-red)}
.card{background:linear-gradient(180deg,#121118,#0b0a0f);border:1px solid var(--line-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.card h3{color:var(--red);text-shadow:var(--glow-red);letter-spacing:.2em}
.card .v{font-size:34px;font-weight:600;line-height:1.05}
.card{padding:16px 24px!important;gap:6px!important}
.card .v small{font-size:16px!important}
.mid{padding:18px 0!important}
.stage::before{background-image:radial-gradient(circle, var(--amber) 0 4px, transparent 5px)!important}
.bot .url{font-family:var(--title);font-size:36px;letter-spacing:.06em;text-shadow:var(--glow-red)}
.bot .url i{background:var(--green);box-shadow:var(--glow-green)}
.q .text{font-size:54px;font-weight:600;line-height:1.1} .q .text.long{font-size:40px}
.q .meta{font-size:22px} .q .meta b{color:var(--red);text-shadow:var(--glow-red)}
.ans{background:linear-gradient(180deg,#121118,#0b0a0f);border:2px solid var(--line-hi);font-size:34px;font-weight:600;letter-spacing:.03em}
.ans i{color:var(--amber);text-shadow:var(--glow-amber);font-family:var(--title);font-size:30px}
.ans.right{border-color:var(--green);box-shadow:inset 0 0 0 2px var(--green),var(--glow-green);color:var(--green-ink)}
.bar{background:#1a1016} .bar i{background:var(--red);box-shadow:var(--glow-red)}
.lb .row{font-size:38px;font-weight:600} .lb .row span{font-family:var(--title);color:var(--amber);text-shadow:var(--glow-amber);font-size:38px}
.lb .row.top{color:var(--green-ink)} .lb .row.top span{color:var(--green);text-shadow:var(--glow-green)}
.pts b{color:var(--green);text-shadow:var(--glow-green)}

/* logo tiles: brand mark centered, small name underneath */
.tile.haslogo{display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;padding:8px 6px 6px}
.tile .logo{width:78%;height:58%;max-height:46px;display:block}
.tile .logo.mask{background:var(--tint);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tint) 55%,transparent))}
.tile .logo img{width:100%;height:100%;object-fit:contain;display:block}
.tile .logo.inv img{filter:invert(1) hue-rotate(180deg)}
.tile .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--dim);justify-self:start}
.tile.live .lbl{color:var(--red-ink)}

#now{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68vw;display:block}
.tvpick button{font-size:14px}