/* Shared styles for PubLiga game pages (on top of /assets/site.css) */
body.game { justify-content:flex-start; padding:5px 16px 40px; position:relative; }
/* home link and language switcher sit in the corners and scroll with the page */
body.game .home, body.game .langs { position:absolute; top:12px; }
/* on narrow phones the corners would touch the logo, so push it down a bit */
@media (max-width:520px) { body.game { padding-top:44px; } }
.game header { text-align:center; margin-bottom:20px; }
.game header .logo { font-size:clamp(36px,9vw,52px); }
.game header h1 { margin-top:4px; font-size:28px; }
.game header p { margin-top:6px; font-size:15px; }
.home { position:fixed; top:16px; left:16px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; }
#app { width:100%; max-width:440px; }
.card { background:var(--card); border:1px solid #3a2f26; border-radius:16px; padding:20px; margin-bottom:14px; }
.center { text-align:center; }
.card h2 { font-size:20px; margin-bottom:12px; }
.card h3 { font-size:17px; margin-bottom:8px; }
.big { font-size:34px !important; margin:6px 0 18px !important; }
.muted { color:var(--muted); margin:0; font-size:15px; line-height:1.5; }
.small { font-size:13px; }
.warn { color:#ffb648; font-weight:700; margin:6px 0; font-size:15px; }
.err { color:#ff7b6b; font-size:14px; min-height:18px; margin:8px 0 0; }
button { font:inherit; cursor:pointer; border-radius:12px; border:0; padding:14px 18px; font-weight:700; font-size:16px; }
.primary { background:var(--amber); color:#1a1300; width:100%; margin-top:12px; }
.danger { background:#d9473b; color:#fff; width:100%; margin-top:12px; }
.ghost { background:transparent; color:var(--muted); border:1px solid #3a2f26; margin-top:10px; }
.quit { display:block; margin:6px auto 0; font-size:13px; padding:8px 14px; }
.two { display:flex; gap:10px; }
.two button { flex:1; }
.row { display:flex; gap:8px; margin-bottom:8px; }
.row input { flex:1; font:inherit; font-size:16px; padding:12px 14px; border-radius:10px; border:1px solid #3a2f26; background:#14110f; color:var(--text); }
.row .x { margin:0; padding:0 14px; }
.lives { display:flex; justify-content:space-between; align-items:center; margin-top:16px; color:var(--muted); }
.lives select { font:inherit; font-size:16px; padding:8px 10px; border-radius:8px; background:#14110f; color:var(--text); border:1px solid #3a2f26; }
.rules summary { cursor:pointer; font-weight:700; }
.rules ol { margin:12px 0 0 18px; color:var(--muted); font-size:15px; line-height:1.55; }
.rules li { margin-bottom:6px; }
.scores { list-style:none; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; }
.scores li { background:var(--card); border:1px solid #3a2f26; border-radius:10px; padding:6px 10px; font-size:13px; display:flex; flex-direction:column; align-items:center; }
.scores li span { color:var(--amber); letter-spacing:1px; }
.scores li.cur { border-color:var(--amber); }
.scores li.out { opacity:.35; text-decoration:line-through; }
.claim { font-size:44px; font-weight:800; color:var(--amber); margin:6px 0 4px; }
.claim.small { font-size:26px; }
.dice { display:flex; gap:16px; justify-content:center; margin:14px 0; }
.die { width:72px; height:72px; background:#f7f2ea; border-radius:14px; display:grid; grid-template-columns:repeat(3,1fr);
       grid-template-rows:repeat(3,1fr); padding:10px; box-shadow:0 6px 0 #b9ada0; }
.die span { display:block; }
.die .pip { background:#1a1300; border-radius:50%; margin:3px; }
.die.spin { transform:rotate(12deg); }
.secret { border-color:#ffb648; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.opt { background:#14110f; color:var(--text); border:1px solid #3a2f26; padding:12px 4px; font-size:15px; display:flex; flex-direction:column; align-items:center; }
.opt small { font-size:10px; color:var(--amber); font-weight:600; }
.opt.truth { border-color:var(--amber); }
.verdict { font-size:18px; font-weight:700; margin-top:14px; }
.verdict.bad { color:#ff7b6b; }
.verdict.good { color:#7fd18b; }
.playbtn { display:inline-block; margin-top:14px; color:var(--amber); font-weight:700; text-decoration:none; border:2px solid var(--amber); padding:10px 22px; border-radius:10px; }

/* --- shared extras: selectable / set-aside dice (used by 30) --- */
.dice { flex-wrap:wrap; }
.dice.pick .die { cursor:pointer; }
.die.sel { background:var(--amber); box-shadow:0 6px 0 #a87500; transform:translateY(-4px); }
.die.kept { opacity:.9; }
.die.dim { opacity:.35; }
.small-dice { gap:8px; }
.small-dice .die { width:40px; height:40px; padding:5px; border-radius:9px; box-shadow:0 3px 0 #b9ada0; }
.small-dice .die .pip { margin:2px; }
.pick .die { width:56px; height:56px; padding:8px; border-radius:12px; }
button:disabled { opacity:.45; cursor:not-allowed; }
.gamelinks { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.die { flex:0 0 auto; }
.dice.pick { gap:8px; }
.pick .die { width:52px; height:52px; padding:7px; }

/* --- Yatzy --- */
.die.blank { opacity:.35; }
.boxes { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.box { display:flex; justify-content:space-between; align-items:center; background:#14110f; color:var(--text);
       border:1px solid #3a2f26; padding:10px 12px; font-size:14px; font-weight:600; border-radius:10px; }
.box b { font-size:16px; }
.box.good { border-color:var(--amber); }
.box.good b { color:var(--amber); }
.box.zero b { color:#7d7166; }
.box.used { opacity:.4; cursor:default; }
.tablewrap { overflow-x:auto; margin-top:10px; }
table.yt { width:100%; border-collapse:collapse; font-size:13px; }
.yt th, .yt td { padding:5px 8px; border-bottom:1px solid #3a2f26; text-align:right; white-space:nowrap; }
.yt th:first-child, .yt td:first-child { text-align:left; color:var(--muted); }
.yt th.cur { color:var(--amber); }
.yt tr.sub td { color:var(--muted); font-style:italic; }
.yt tr.tot td { font-weight:800; color:var(--amber); border-bottom:0; }

/* --- shared setup options / Træmand / Snyd / Bar Røv --- */
.opts-title { margin-top:18px; }
.opt-row { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; color:var(--muted); font-size:15px; }
.opt-row select { font:inherit; font-size:15px; padding:8px 10px; border-radius:8px; background:#14110f; color:var(--text); border:1px solid #3a2f26; max-width:60%; }
.variants-line { text-align:center; margin:-6px 0 10px; }
.pickgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.pickgrid .ghost { margin:0; color:var(--text); }
.rulelist { text-align:left; margin:8px 0 0 18px; color:var(--muted); font-size:15px; line-height:1.5; }
.tiny { padding:2px 8px; font-size:12px; margin:0 0 0 6px; }
.standings { text-align:left; margin:8px 0 16px 22px; line-height:1.8; }
.stepper { display:flex; align-items:center; justify-content:center; gap:18px; margin:8px 0; }
.stepper b { font-size:36px; min-width:56px; color:var(--amber); }
.stepper .ghost { margin:0; width:52px; height:52px; font-size:24px; padding:0; }
.faces { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:6px 0 4px; }
.facebtn { background:transparent; padding:4px; border:2px solid transparent; border-radius:14px; }
.facebtn .die { width:42px; height:42px; padding:6px; border-radius:9px; box-shadow:0 3px 0 #b9ada0; }
.facebtn .die .pip { margin:2px; }
.facebtn.on { border-color:var(--amber); }
.cuprow { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0; text-align:left; }
.cuprow b { min-width:70px; font-size:14px; }
.cuprow .dice { margin:0; justify-content:flex-start; flex:1; }

/* --- win tally --- */
.wins-badge { color:var(--amber); font-weight:700; font-size:12px; }
.winsbox { margin-top:18px; border-top:1px solid #3a2f26; padding-top:12px; }
.winlist { list-style:none; margin:6px 0 4px; }
.winlist li { display:flex; justify-content:space-between; padding:5px 4px; border-bottom:1px solid #2a221c; font-size:15px; }
.winlist li span { color:var(--amber); font-weight:800; }

/* --- Den endeløse landevej --- */
.road { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:10px 0; }
.road span { min-width:28px; padding:5px 0; border-radius:7px; background:#14110f; border:1px solid #3a2f26; font-size:13px; font-weight:700; text-align:center; }
.road span.x { color:#7d7166; text-decoration:line-through; opacity:.6; }
.road span.x.new { opacity:1; color:var(--amber); border-color:var(--amber); }
.road span.next { border-color:var(--amber); color:var(--amber); }

/* --- front page game list --- */
.gamestitle { margin-top:28px; font-size:14px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.gamelinks { margin-top:4px; }
.gamelinks .playbtn { margin-top:8px; padding:9px 16px; font-size:15px; }

/* --- playing cards --- */
.pcs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0; }
.pc { width:58px; height:82px; border-radius:9px; background:#f7f2ea; color:#1a1300; display:flex; flex-direction:column; align-items:center; justify-content:center;
      box-shadow:0 4px 0 #b9ada0; font-weight:800; line-height:1; flex:0 0 auto; }
.pc b { font-size:22px; } .pc span { font-size:24px; margin-top:4px; }
.pc.red { color:#c4302b; }
.pc.joker span { font-size:10px; letter-spacing:1px; }
.pc.back { background:repeating-linear-gradient(45deg,#3a2f26 0 6px,#2b211a 6px 12px); border:2px solid var(--amber); box-shadow:0 4px 0 #1a1300; }
.pc.big { width:110px; height:156px; border-radius:14px; } .pc.big b { font-size:40px; } .pc.big span { font-size:46px; }
.pc.dim { opacity:.35; } .pc.hit { outline:3px solid var(--amber); }
.pc.sm { width:38px; height:54px; border-radius:7px; box-shadow:0 3px 0 #b9ada0; } .pc.sm b { font-size:14px; } .pc.sm span { font-size:15px; margin-top:2px; }
.pyr { display:flex; flex-direction:column-reverse; align-items:center; gap:6px; margin:10px 0; }
.pyr .prow { display:flex; gap:6px; }
.pyr .pc.cur { outline:3px solid var(--amber); }
.rulebox { font-size:18px; line-height:1.45; margin:10px 0; }
.rulebox b { color:var(--amber); }
.rankgrid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:8px; }
.rankgrid button { padding:10px 0; margin:0; font-size:14px; background:#14110f; color:var(--text); border:1px solid #3a2f26; }
.rankgrid button.on { border-color:var(--amber); color:var(--amber); }

/* --- toilet passes --- */
.toiletbox .toiletbtn { width:100%; }
.toiletbox .toiletrow { gap:8px; }
.toiletbox .toiletrow .toiletbtn { margin-top:10px; }
.toiletnote:empty { display:none; }
.pl-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.pl-overlay .card { width:100%; max-width:420px; margin:0; }

/* --- blackjack --- */
.card hr { border:0; border-top:1px solid #3a2f26; margin:12px 0; }
.results { list-style:none; margin-left:0; }
.results .good { color:#7bd389; font-weight:700; } .results .bad { color:#ff7a6b; font-weight:700; }

/* --- score keepers (whist) --- */
.pickgrid button.on { border-color:var(--amber); color:var(--amber); }
.wt td:nth-child(2) { text-align:left; color:var(--text); }
.wt tfoot td { font-weight:800; color:var(--amber); border-bottom:0; }

/* --- front page: games by category --- */
.gamecat { margin-top:22px; padding:16px 14px 18px; background:var(--card); border:1px solid #3a2f26; border-radius:16px; }
.gamecat h2 { font-size:20px; }
.gamecat .subcat { margin-top:14px; font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.gamecat .gamelinks { margin-top:0; }

/* --- score keeper engine --- */
.sk-side { margin-top:14px; padding-top:6px; border-top:1px solid #3a2f26; text-align:left; }
.sk-h { font-size:18px; color:var(--amber); margin-top:6px; }
.sk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:4px 14px; }
.sk-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; font-size:15px; }
.sk-row.sk-col { flex-direction:column; align-items:stretch; }
.sk-step { display:flex; align-items:center; gap:4px; }
.sk-step button { width:36px; padding:6px 0; margin:0; font-size:18px; }
.sk-step input { width:62px; text-align:center; padding:6px 4px; font-size:16px; }
#save:disabled { opacity:.4; }

/* --- front page: one column per index item, games listed underneath --- */
.cols { width:min(1380px,96vw); position:relative; left:50%; transform:translateX(-50%); margin-top:28px;
        display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; align-items:start; text-align:center; }
.col { background:var(--card); border:1px solid #3a2f26; border-radius:16px; padding:10px 10px 14px; }
.colhead { font-weight:700; font-size:16px; padding:6px 0 4px; border-bottom:1px solid #3a2f26; }
.colsoon { margin-top:10px; font-size:13px; color:var(--muted); font-style:italic; }
.col .subcat { margin-top:12px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.collinks { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.collinks .playbtn { margin:0; padding:7px 10px; font-size:14px; display:block; }
@media (max-width:1200px) { .cols { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .cols { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .cols { grid-template-columns:1fr; } }
.tm { max-width:520px; margin:24px auto 0; font-size:12px; }

/* --- Fuck the Dealer: turned cards overview --- */
.rankgrid.seen div { background:#14110f; border:1px solid #3a2f26; border-radius:8px; padding:6px 0; text-align:center; font-size:13px; }
.rankgrid.seen div b { display:block; font-size:15px; } .rankgrid.seen div span { color:var(--amber); letter-spacing:-1px; font-size:10px; }
.rankgrid.seen div.full { opacity:.35; }
.rankgrid button:disabled { opacity:.25; }

/* --- Pokerur (tournament clock) --- */
.pokerclock .pk-blinds { font-size:clamp(40px,12vw,72px); font-weight:800; color:var(--amber); line-height:1.1; margin-top:4px; }
.pokerclock .pk-time { font-size:clamp(56px,18vw,120px); font-weight:800; font-variant-numeric:tabular-nums; line-height:1; margin:8px 0; }
.pk-list { list-style:none; margin-top:8px; }
.pk-list li { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid #3a2f26; }
.pk-list button { margin:0; padding:6px 12px; width:auto; font-size:14px; }

/* --- game history section --- */
.history { margin-top:18px; text-align:left; width:100%; max-width:440px; }
.history h2 { font-size:18px; color:var(--amber); }
.history p { margin-top:8px; font-size:15px; line-height:1.55; color:var(--text); }
.history p.muted { color:var(--muted); font-size:13px; }
.history a { color:var(--muted); }

/* --- banko / bingo / lotto --- */
.bk-host .bk-code { color:var(--amber); letter-spacing:3px; font-size:20px; }
.bk-last { font-size:clamp(64px,22vw,140px); font-weight:800; color:var(--amber); line-height:1.05; margin:4px 0 8px; }
.bk-last.song { font-size:clamp(22px,6vw,34px); color:var(--text); }
.bk-board { display:grid; grid-template-columns:repeat(10,1fr); gap:3px; margin-top:8px; }
.bk-board.small { grid-template-columns:repeat(6,1fr); }
.bk-board span { text-align:center; padding:6px 0; border-radius:6px; background:#14110f; color:#7d7166; font-size:13px; font-weight:700; }
.bk-board span.on { background:var(--amber); color:#1a1300; } .bk-board span.last { outline:2px solid #fff; }
.bk-board span.tap { cursor:pointer; font-size:16px; padding:10px 0; color:var(--text); }
.bk-plate { margin:10px 0; border:2px solid var(--amber); border-radius:10px; overflow:hidden; background:#f7f2ea; color:#1a1300; }
.bk-ph { background:var(--amber); font-weight:800; font-size:13px; padding:4px 8px; text-align:left; }
.bk-row { display:flex; } .bk-row span { flex:1; min-height:42px; display:flex; align-items:center; justify-content:center; border:1px solid #d6cbbd; font-weight:800; font-size:17px; }
.bk-row.hd span { min-height:26px; background:#1a1300; color:var(--amber); }
.bk-row span.blank { background:#d9cfc2; } .bk-row span.on { background:#c4302b; color:#fff; } .bk-row span.tap { cursor:pointer; }
.v-music .bk-row span { font-size:11px; font-weight:700; min-height:60px; padding:2px; text-align:center; line-height:1.15; }
.bk-songs { text-align:left; margin-left:20px; line-height:1.6; }
.bk-balls { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.bk-balls span { width:46px; height:46px; border-radius:50%; background:#14110f; border:2px solid #3a2f26; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; }
.bk-balls span.on { background:var(--amber); color:#1a1300; border-color:var(--amber); } .bk-balls span.bonus { border-style:dashed; }
.good { color:#7fd18b; }
/* Shut the box */
.stb { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin:12px 0; }
.stb-t { width:36px; height:54px; border-radius:8px; background:#f7f2ea; color:#1a1300; font-size:22px; font-weight:800; border:0; box-shadow:0 4px 0 #b9ada0; padding:0; margin:0; cursor:pointer; }
.stb-t.on { background:var(--amber); box-shadow:0 4px 0 #a87500; transform:translateY(-3px); }
.stb-t.down { background:#3a2f26; color:#6b5d50; box-shadow:none; transform:translateY(4px); }
.stb-t:disabled { cursor:default; }
/* Ship, captain and crew */
.scc { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-end; margin:12px 0; }
.scc-slot { display:flex; flex-direction:column; align-items:center; gap:4px; }
.scc-slot small { color:var(--muted); font-size:12px; }
.scc .die { width:52px; height:52px; border-radius:10px; }
.scc-cargo .dice { margin:0; gap:8px; } .scc-cargo .die { cursor:pointer; }
/* Horse race */
.hr-bet { display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:space-between; padding:8px 0; border-bottom:1px solid #3a2f26; }
.hr-suits { display:flex; gap:6px; } .hr-suits .ghost { margin:0; width:42px; padding:6px 0; font-size:20px; color:var(--text); }
.hr-suits .ghost.red { color:#e0605b; } .hr-suits .ghost.on { border-color:var(--amber); background:#3a2f26; }
.hr-n { min-width:28px; text-align:center; font-weight:800; color:var(--amber); }
.hr-track { display:flex; flex-direction:column; gap:4px; margin:6px 0 12px; overflow-x:auto; }
.hr-row { display:grid; grid-template-columns:repeat(var(--n), minmax(28px, 1fr)); gap:3px; align-items:center; }
.hr-side .pc.sm { width:100%; max-width:38px; justify-self:center; }
.hr-cell { height:36px; border-radius:6px; background:#14110f; border:1px solid #3a2f26; display:flex; align-items:center; justify-content:center; }
.hr-cell.st { background:#2b211a; } .hr-cell.fin { border-color:var(--amber); }
.hr-horse { font-style:normal; font-weight:800; font-size:14px; background:#f7f2ea; color:#1a1300; border-radius:5px; padding:2px 3px; }
.hr-horse.red { color:#c4302b; } .hr-horse.won { outline:2px solid var(--amber); }
.hr-last { display:flex; align-items:center; gap:12px; justify-content:center; } .hr-last .rulebox { flex:1; margin:0; text-align:left; }
/* 31 */
.to-pile { display:flex; flex-direction:column; align-items:center; gap:4px; margin:8px 0; } .to-pile small { color:var(--muted); font-size:12px; }
.to-opt { display:flex; flex-direction:column; align-items:center; gap:4px; } .to-opt small { color:var(--muted); font-size:12px; }
.pc.to-pick { cursor:pointer; }
.to-show { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.to-row { display:flex; align-items:center; gap:8px; justify-content:space-between; } .to-row > b { min-width:70px; text-align:left; } .to-row > span { font-weight:800; color:var(--amber); min-width:36px; text-align:right; }
.to-row .pcs { margin:0; gap:4px; } .to-row .pc { width:38px; height:54px; border-radius:7px; } .to-row .pc b { font-size:14px; } .to-row .pc span { font-size:15px; margin-top:2px; }
/* Banko/lotto caller as a widescreen "TV": draw on the left, overview on the right.
   Upright phone/tablet: the whole view is turned 90° so it fills the screen landscape. */
body.bk-tv-on { overflow:hidden; }
.bk-tv { position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh; z-index:50; background:var(--bg);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); grid-template-rows:auto minmax(0,1fr); gap:1.6vmin 2.2vmin;
  padding:1.6vmin 2.2vmin; box-sizing:border-box; container-type:size; text-align:center; }
@media (orientation:portrait) {
  .bk-tv { width:100vh; height:100vw; width:100dvh; left:100vw; transform-origin:top left; transform:rotate(90deg); }
  .bk-tv.rot { left:0; top:100dvh; top:100vh; transform:rotate(-90deg); }
}
@supports (height:100dvh) { @media (orientation:portrait) { .bk-tv.rot { top:100dvh; } } }
.bk-tvbar { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bk-tvbar .logo { font-size:clamp(18px,5cqh,34px); font-weight:800; } .bk-tvbar .bk-code { font-size:clamp(18px,5cqh,34px); }
.bk-tvbtns { display:flex; gap:6px; } .bk-tvbtns .ghost { margin:0; padding:6px 10px; font-size:13px; width:auto; }
.bk-tvl { overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid #3a2f26; border-radius:16px; padding:2cqh 2cqw; }
.bk-tvl > * { margin-top:0; margin-bottom:0; }
.bk-tvl .bk-last { font-size:clamp(48px,28cqh,260px); margin:0; }
.bk-tvl .bk-last.song { font-size:clamp(18px,6cqh,44px); }
.bk-tvl .primary { margin-top:0; font-size:clamp(16px,4cqh,28px); padding:1.6cqh 0; }
.bk-tvr { min-height:0; display:flex; background:var(--card); border:1px solid #3a2f26; border-radius:16px; padding:1.5cqh; }
.bk-board.tv { flex:1; margin:0; grid-template-columns:repeat(var(--c),1fr); grid-template-rows:repeat(var(--r),1fr); gap:0.7cqh; }
.bk-board.tv span { display:flex; align-items:center; justify-content:center; padding:0; font-size:clamp(11px,min(5cqh,2.6cqw),46px); position:relative; border-radius:8px; }
.bk-board.tv span i { position:absolute; top:2px; left:4px; font-style:normal; font-size:0.45em; color:var(--amber); opacity:.8; }
.bk-board.tv span.on i { color:#1a1300; }
.bk-board.tv span.last { outline:3px solid #fff; outline-offset:-3px; }
.bk-board.tv span.bonus { background:#7a5a00; color:#fff; }
.bk-songs.tv { flex:1; columns:2; text-align:left; margin:0 0 0 28px; font-size:clamp(13px,3.4cqh,26px); overflow:hidden; }
.bk-songs.tv li.last { color:var(--amber); font-weight:800; }
.bk-balls.tv span { width:clamp(40px,11cqh,96px); height:clamp(40px,11cqh,96px); font-size:clamp(18px,5.5cqh,46px); }
.bk-tools summary { cursor:pointer; color:var(--muted); font-size:14px; }
.bk-tools[open] { text-align:left; }
.bk-tvl { overflow-x:hidden; }
.bk-tvl .row { display:flex; gap:6px; align-items:center; } .bk-tvl .row input { flex:1; min-width:0; width:auto; }
@container (max-height:520px) {
  .bk-tvl { gap:5px; padding:8px 10px; }
  .bk-tvl .bk-last { font-size:24cqh; }
  .bk-tvl .muted { font-size:12px; }
  .bk-tvl .pickgrid { gap:4px; margin-top:0; } .bk-tvl .pickgrid .ghost { padding:5px 4px; font-size:12px; }
  .bk-tvl .row input, .bk-tvl .row .ghost { padding:6px 8px; font-size:13px; }
  .bk-tvbtns .ghost { padding:4px 8px; font-size:12px; }
}
/* Pub quiz (TV view reuses .bk-tv) */
.bk-tv.qz { grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); }
.qz-main { justify-content:center; text-align:center; }
.qz-ask { color:var(--muted); font-size:clamp(14px,3.6cqh,28px); }
.qz-body { position:relative; display:flex; flex-direction:column; align-items:center; gap:1.5cqh; }
.qz-num { position:absolute; left:0; top:0; color:var(--amber); font-weight:800; font-size:clamp(16px,5cqh,40px); }
.qz-q { font-size:clamp(20px,6.5cqh,64px); font-weight:800; line-height:1.2; padding:0 6cqh; }
.qz-q.quote { font-style:italic; font-weight:700; }
.qz-intro { font-size:clamp(14px,4cqh,30px); color:var(--muted); }
.qz-emoji { font-size:clamp(40px,18cqh,170px); line-height:1.1; }
.qz-flag { width:min(60%,62cqh); height:auto; border-radius:6px; box-shadow:0 6px 24px #0008; }
.qz-a { background:var(--amber); color:#1a1300; border-radius:12px; padding:1.4cqh 2cqh; font-size:clamp(18px,5.5cqh,52px); font-weight:800; }
.qz-a small { display:block; font-size:0.4em; text-transform:uppercase; letter-spacing:2px; opacity:.7; }
.qz-note { font-style:italic; }
.qz-timer { font-size:clamp(24px,9cqh,90px); font-weight:800; color:var(--amber); } .qz-timer.out { color:#e0605b; }
.qz-nav { display:flex; gap:8px; justify-content:center; } .qz-nav button { margin:0; width:auto; flex:1; max-width:260px; }
.qz-side { flex-direction:column; overflow-y:auto; text-align:left; }
.qz-h { margin:0 0 1cqh; font-size:clamp(14px,3.6cqh,28px); color:var(--amber); }
.qz-stand { margin:0; padding-left:1.4em; font-size:clamp(13px,3.6cqh,30px); }
.qz-stand li { margin:0.6cqh 0; } .qz-stand li b { font-weight:700; } .qz-stand li span { float:right; color:var(--amber); font-weight:800; }
.qz-lg { font-size:clamp(12px,3cqh,24px); } .qz-lg li small { font-size:0.7em; } .qz-lg li.me b { color:var(--amber); } .qz-lg li span { margin-left:0.6em; }
.qz-picks { display:flex; flex-direction:column; gap:6px; margin:6px 0 10px; }
.qz-pick { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center; border:1px solid #3a2f26; border-radius:10px; padding:8px 10px; cursor:pointer; }
.qz-pick.on { border-color:var(--amber); } .qz-pick small { grid-column:2; color:var(--muted); font-size:12px; }
.qz-main #skform { width:100%; max-width:520px; margin:0 auto; text-align:left; }
@container (max-height:520px) { .qz-q { font-size:6cqh; } .qz-emoji { font-size:15cqh; } .qz-flag { width:min(50%,55cqh); } }
.qz-main { justify-content:safe center; }
.qz-a.long { font-size:clamp(15px,3.6cqh,34px); } .qz-q.long { font-size:clamp(17px,5cqh,48px); }
.qz-note { font-size:clamp(11px,2.6cqh,18px); }
.qz-picks { max-height:420px; overflow-y:auto; padding-right:4px; }
/* Quiz: connecting wall, sequence, missing vowels, joker, wipeout */
.qz-wall { display:grid; grid-template-columns:repeat(4,1fr); gap:1cqh; width:100%; }
.qz-wall span { background:#14110f; border:1px solid #3a2f26; border-radius:8px; padding:2cqh 0.5cqh; font-weight:800; font-size:clamp(13px,3.6cqh,30px); }
.qz-wall.ans { grid-template-columns:1fr; }
.qz-wg { border-radius:8px; padding:1cqh 1.5cqh; text-align:left; color:#1a1300; }
.qz-wg b { display:block; font-size:clamp(14px,3.4cqh,28px); } .qz-wg span { font-size:clamp(12px,2.8cqh,22px); }
.qz-wg.g0 { background:#7fd18b; } .qz-wg.g1 { background:#f2a900; } .qz-wg.g2 { background:#8fb7ff; } .qz-wg.g3 { background:#e7a0c8; }
.qz-seq { display:flex; flex-wrap:wrap; gap:1.2cqh; justify-content:center; }
.qz-seq span { background:#14110f; border:1px solid #3a2f26; border-radius:10px; padding:2cqh 2.5cqh; font-weight:800; font-size:clamp(15px,4.4cqh,40px); }
.qz-seq span:last-child { border-color:var(--amber); color:var(--amber); }
.qz-vow { letter-spacing:0.25em; font-family:ui-monospace,Consolas,monospace; }
.qz-jk { color:var(--amber); font-weight:700; } .qz-wipe { display:block; font-size:12px; color:var(--muted); margin-top:4px; } .qz-wipe input { vertical-align:middle; }
.qz-wall.ans span { background:none; border:0; padding:0; font-weight:600; color:#1a1300; display:block; }
.qz-body:has(.qz-wall) .qz-num { position:static; }
/* Quiz: answers on the phones */
.qz-qr { width:min(34cqh,100%); margin:0 auto; background:#fff; border-radius:12px; padding:1cqh; } .qz-qr svg { width:100%; height:auto; display:block; }
.qz-code { font-size:clamp(28px,12cqh,110px); font-weight:800; color:var(--amber); letter-spacing:0.15em; line-height:1; }
.qz-got { list-style:none; margin:0; padding:0; font-size:clamp(12px,3cqh,22px); } .qz-got li { display:flex; justify-content:space-between; padding:0.3cqh 0; } .qz-got span { color:var(--amber); font-weight:800; }
.qz-rev { text-align:left; border:1px solid #3a2f26; border-radius:10px; padding:6px 10px; margin-top:6px; font-size:14px; }
.qz-rev ol { margin:6px 0 0; padding-left:1.6em; } .qz-rev li { margin:3px 0; }
.qz-mk { margin:0 0 0 4px; padding:1px 8px; width:auto; font-weight:800; } .qz-mk.ok { color:#7fd18b; border-color:#7fd18b; } .qz-mk.no { color:#e0605b; border-color:#e0605b; }
.qt-q { border-bottom:1px solid #3a2f26; padding:10px 0; } .qt-q:last-child { border-bottom:0; }
.qt-text { margin:4px 0 8px; font-size:16px; } .qt-tf.on { border-color:var(--amber); color:var(--amber); } .qt-q .row { display:flex; gap:6px; } .qt-q .row input { flex:1; min-width:0; }
.qt-bank { margin-top:6px; width:100%; }