/* Quiz Brawl big screen. One deliberate look: a comic-book TV studio at night, readable from the sofa.
   Sizes follow the screen height, so a 4K TV and a laptop show the same layout. */
:root {
  color-scheme: dark;
  --ink: #17111F; --night: #05030C; --panel: rgba(24,16,58,.9); --panel2: #241A55; --line: #3A2F78; --muted: #B9B0E0;
  --paper: #FFF8E6; --gold: #FFD43B; --pink: #FF3D7F; --good: #45D483;
  --t0: #FF8A1F; --t1: #2F9BFF;
  --f-display: "Bangers", Impact, "Arial Narrow Bold", sans-serif;
  --f-ui: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  /* Atkinson Hyperlegible has no Vietnamese letters: Be Vietnam Pro fills in for them (a Vietnamese name on an English page),
     and Vietnamese pages use it throughout */
  --f-body: "Atkinson Hyperlegible", "Be Vietnam Pro", Verdana, "Segoe UI", system-ui, sans-serif;
  --u: min(1vh, 0.5625vw);   /* one unit: 1% of the height of a 16:9 frame that fits the window */
}
:root:lang(vi) { --f-body: "Be Vietnam Pro", Verdana, "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: var(--night); color: #fff; font: calc(2.2 * var(--u))/1.3 var(--f-body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: calc(.5 * var(--u)) solid #2CE3FF; outline-offset: calc(.4 * var(--u)); }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
#app { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
#stage, #fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }
#fx { pointer-events: none; }
.face { display: block; object-fit: contain; }

/* ---------- shared bits ---------- */
.logo { font: calc(15 * var(--u))/0.9 var(--f-display); letter-spacing: .02em; text-align: center; text-shadow: calc(.8 * var(--u)) calc(.8 * var(--u)) 0 var(--ink); }
.logo span { display: block; color: #fff; }
.logo b { display: block; font-weight: 400; color: var(--gold); -webkit-text-stroke: calc(.25 * var(--u)) var(--ink); }
.logo.small { font-size: calc(5.2 * var(--u)); display: flex; gap: .3em; }
.logo.small span, .logo.small b { display: inline; }
.seg { display: inline-flex; border: calc(.3 * var(--u)) solid var(--line); border-radius: calc(1.2 * var(--u)); overflow: hidden; background: var(--panel2); }
.seg > span { display: flex; align-items: center; padding: 0 calc(1.2 * var(--u)); font: 800 calc(2 * var(--u))/1 var(--f-ui); letter-spacing: .05em; color: var(--muted); text-transform: uppercase; }
.seg button { min-height: calc(4.6 * var(--u)); padding: 0 calc(1.4 * var(--u)); border: 0; background: transparent; color: var(--muted); font: 800 calc(2.2 * var(--u))/1 var(--f-ui); letter-spacing: .04em; }
.seg button[aria-pressed="true"] { background: #6B2FD6; color: #fff; }
.tog, .ghost { min-height: calc(4.6 * var(--u)); padding: 0 calc(1.6 * var(--u)); border: calc(.3 * var(--u)) solid var(--line); border-radius: calc(1.2 * var(--u)); background: var(--panel2); color: var(--muted);
  font: 800 calc(2.2 * var(--u))/1 var(--f-ui); letter-spacing: .04em; }
.tog[aria-pressed="true"] { color: #fff; border-color: #6B2FD6; background: #3B1F86; }
/* the language picker: the language's own name over an invisible native select (a TV remote opens its list with OK) */
.langpick { position: relative; display: inline-flex; align-items: center; gap: calc(.8 * var(--u)); padding-right: calc(3.6 * var(--u)); color: #fff; white-space: nowrap; }
.langpick::after { content: ''; position: absolute; right: calc(1.4 * var(--u)); top: 50%; width: calc(.8 * var(--u)); height: calc(.8 * var(--u)); border: solid var(--muted);
  border-width: 0 calc(.3 * var(--u)) calc(.3 * var(--u)) 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.langpick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; font-size: 16px; }
.langpick:focus-within { outline: calc(.4 * var(--u)) solid #2CE3FF; outline-offset: calc(.3 * var(--u)); }
.langpick option { color: #17111F; background: #fff; }
.ghost { color: #fff; }
.start { min-height: calc(7 * var(--u)); padding: 0 calc(3 * var(--u)); border: calc(.45 * var(--u)) solid var(--ink); border-radius: calc(1.6 * var(--u)); background: var(--gold); color: var(--ink);
  font: calc(4.2 * var(--u))/1 var(--f-display); letter-spacing: .05em; box-shadow: 0 calc(.7 * var(--u)) 0 var(--ink); }
.start:disabled { background: #5C557E; color: #26213F; box-shadow: 0 calc(.7 * var(--u)) 0 #0B0716; }
.start:not(:disabled):active { translate: 0 calc(.4 * var(--u)); box-shadow: 0 calc(.3 * var(--u)) 0 var(--ink); }
.mini { min-width: calc(4.4 * var(--u)); min-height: calc(4 * var(--u)); padding: 0 calc(1 * var(--u)); border: calc(.25 * var(--u)) solid var(--ink); border-radius: calc(1 * var(--u)); background: #fff; color: var(--ink);
  font: 800 calc(2 * var(--u))/1 var(--f-ui); }
.muted { color: var(--muted); }

/* ---------- title ---------- */
.screen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
.title { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2.6 * var(--u)); padding: calc(3 * var(--u)); background: radial-gradient(ellipse at center, rgba(5,3,12,.15), rgba(5,3,12,.75)); }
.tagline { font: italic 800 calc(3.4 * var(--u))/1.1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; text-shadow: calc(.3 * var(--u)) calc(.3 * var(--u)) 0 var(--ink); }
.modes { display: flex; gap: calc(3 * var(--u)); flex-wrap: wrap; justify-content: center; }
.mode { width: calc(52 * var(--u)); min-height: calc(26 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: calc(.8 * var(--u)); padding: calc(2.6 * var(--u)) calc(3 * var(--u));
  border: calc(.6 * var(--u)) solid var(--ink); border-radius: calc(2.4 * var(--u)); text-align: left; text-decoration: none; box-shadow: calc(1 * var(--u)) calc(1 * var(--u)) 0 var(--ink); transition: transform .15s; }
.mode:hover, .mode:focus-visible { transform: translateY(calc(-.6 * var(--u))) rotate(-1deg); }
.mode b { font: calc(9 * var(--u))/0.9 var(--f-display); letter-spacing: .03em; text-shadow: calc(.5 * var(--u)) calc(.5 * var(--u)) 0 var(--ink); }
.mode span { font: 700 calc(2.4 * var(--u))/1.2 var(--f-body); }
.mode em { margin-top: calc(1 * var(--u)); padding: calc(1 * var(--u)) calc(2 * var(--u)); border: calc(.4 * var(--u)) solid var(--ink); border-radius: calc(1.2 * var(--u)); background: var(--gold); color: var(--ink);
  font: normal calc(3.2 * var(--u))/1 var(--f-display); letter-spacing: .05em; }
.mode.brawl { background: linear-gradient(135deg, var(--t0) 0 50%, var(--t1) 50% 100%); color: #fff; }
.mode.duel { background: linear-gradient(135deg, #6B2FD6, #C2185B); color: #fff; }
.mode:disabled { opacity: .7; }
.settings { display: flex; gap: calc(1 * var(--u)); flex-wrap: wrap; justify-content: center; }
.tip { color: var(--muted); font: italic 700 calc(2.2 * var(--u))/1.2 var(--f-ui); }
.tip a { color: var(--muted); }

/* ---------- lobby ---------- */
.lobby { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(3 * var(--u)); padding: calc(3 * var(--u)) calc(3.5 * var(--u)); background: linear-gradient(90deg, rgba(5,3,12,.86), rgba(5,3,12,.62)); }
.joinbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1.4 * var(--u)); padding: calc(2.4 * var(--u)); border: calc(.6 * var(--u)) solid var(--ink); border-radius: calc(2.4 * var(--u));
  background: var(--paper); color: var(--ink); box-shadow: calc(1 * var(--u)) calc(1 * var(--u)) 0 var(--ink); }
.joinbox h1 { font: calc(6 * var(--u))/1 var(--f-display); letter-spacing: .03em; }
.joinbox .qr { width: min(46vh, 34vw); height: auto; image-rendering: pixelated; }
.joinbox .url { font: 700 calc(2.6 * var(--u))/1.2 var(--f-body); }
.joinbox .url b { font-weight: 800; }
.joinbox.demo .url { max-width: min(52vh, 38vw); text-align: center; line-height: 1.35; }
.joinbox .warn { max-width: min(46vh, 34vw); padding: calc(.8 * var(--u)) calc(1.2 * var(--u)); border-radius: calc(1 * var(--u)); background: #FFE1E8; color: #8A0F2E; font: 700 calc(2 * var(--u))/1.25 var(--f-body); text-align: center; }
.code { display: flex; gap: calc(1 * var(--u)); }
.code span { width: calc(10 * var(--u)); height: calc(12 * var(--u)); display: grid; place-items: center; border: calc(.5 * var(--u)) solid var(--ink); border-radius: calc(1.4 * var(--u)); background: #fff;
  font: calc(10 * var(--u))/1 var(--f-display); box-shadow: 0 calc(.6 * var(--u)) 0 var(--ink); }
.side { min-width: 0; display: flex; flex-direction: column; gap: calc(1.8 * var(--u)); }
.side .top { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--u)); flex-wrap: wrap; }
.side .hint { color: var(--muted); font: 700 calc(2.3 * var(--u))/1.25 var(--f-body); }
.teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(2 * var(--u)); }
.team { display: flex; flex-direction: column; gap: calc(1 * var(--u)); padding: calc(1.4 * var(--u)); border: calc(.5 * var(--u)) solid var(--ink); border-radius: calc(2 * var(--u)); background: var(--panel); min-width: 0; }
.team h2 { display: flex; align-items: baseline; justify-content: space-between; font: calc(5 * var(--u))/1 var(--f-display); letter-spacing: .03em; text-shadow: calc(.4 * var(--u)) calc(.4 * var(--u)) 0 var(--ink); }
.team h2 small { font: 800 calc(2.4 * var(--u))/1 var(--f-ui); color: var(--muted); }
.team.t0 { border-top: calc(1.4 * var(--u)) solid var(--t0); } .team.t0 h2 span { color: var(--t0); }
.team.t1 { border-top: calc(1.4 * var(--u)) solid var(--t1); } .team.t1 h2 span { color: var(--t1); }
.slot.pl, .slot.empty { min-height: calc(9 * var(--u)); display: flex; align-items: center; gap: calc(1.2 * var(--u)); padding: calc(.6 * var(--u)) calc(1 * var(--u)); border-radius: calc(1.4 * var(--u)); min-width: 0; }
.slot.pl { background: rgba(255,255,255,.08); }
.slot.pl .face { width: calc(8 * var(--u)); height: calc(8 * var(--u)); flex: none; }
.slot.pl .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.slot.pl .who b { font: 800 calc(3.2 * var(--u))/1.05 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot.pl .who span { color: var(--muted); font: 700 calc(2 * var(--u))/1.2 var(--f-ui); letter-spacing: .03em; }
.slot.pl.cpu { opacity: .72; }
.slot.pl.away .face { opacity: .4; }
.slot.pl .acts { display: flex; gap: calc(.5 * var(--u)); opacity: .35; transition: opacity .15s; }
.slot.pl:hover .acts, .slot.pl:focus-within .acts { opacity: 1; }
.slot.empty { justify-content: center; border: calc(.3 * var(--u)) dashed var(--line); color: var(--muted); font: 700 calc(2.2 * var(--u))/1 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; }
.pending { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1 * var(--u)); padding: calc(1 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(1.6 * var(--u)); background: rgba(255,212,59,.14); border: calc(.3 * var(--u)) solid var(--gold); }
.pending h3 { width: 100%; font: 800 calc(2.2 * var(--u))/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.pending .pl { display: flex; align-items: center; gap: calc(.8 * var(--u)); font: 800 calc(2.4 * var(--u))/1 var(--f-ui); }
.pending .face { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); }
.controls { display: flex; align-items: center; gap: calc(1.4 * var(--u)); flex-wrap: wrap; margin-top: auto; }
.controls .start { margin-left: auto; min-width: calc(34 * var(--u)); }
.why { min-height: 1.3em; text-align: right; color: var(--muted); font: 700 calc(2.2 * var(--u))/1.2 var(--f-body); }

/* ---------- the round HUD ---------- */
.hud { position: absolute; left: 0; right: 0; top: 0; z-index: 8; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: calc(2 * var(--u));
  padding: calc(1.4 * var(--u)) calc(2.4 * var(--u)) calc(1 * var(--u)); background: linear-gradient(180deg, rgba(5,3,12,.85), rgba(5,3,12,0)); pointer-events: none; }
.hud button { pointer-events: auto; }
.tb { display: flex; flex-direction: column; gap: calc(.7 * var(--u)); min-width: 0; }
.tb .name { display: flex; align-items: baseline; gap: calc(1.2 * var(--u)); font: calc(3.6 * var(--u))/1 var(--f-display); letter-spacing: .04em; text-shadow: calc(.35 * var(--u)) calc(.35 * var(--u)) 0 var(--ink); }
.tb.t1 .name { flex-direction: row-reverse; }
.tb.t0 .name b { color: var(--t0); font-weight: 400; } .tb.t1 .name b { color: var(--t1); font-weight: 400; }
.tb .hpn { margin-left: auto; font: 800 calc(3 * var(--u))/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.tb.t1 .hpn { margin-left: 0; margin-right: auto; }
.tb .under { padding: calc(.3 * var(--u)) calc(.8 * var(--u)); border-radius: calc(.8 * var(--u)); background: var(--gold); color: var(--ink); font: 800 calc(1.8 * var(--u))/1 var(--f-ui); letter-spacing: .05em; text-shadow: none; }
.tb .bar { position: relative; height: calc(3.6 * var(--u)); border: calc(.45 * var(--u)) solid var(--ink); border-radius: calc(1 * var(--u)); background: #2A1F4E; overflow: hidden; box-shadow: 0 calc(.4 * var(--u)) 0 var(--ink); }
.tb .bar i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: left; transition: transform .35s ease-out; }
.tb.t1 .bar i { transform-origin: right; }
.tb .trail { background: #fff; transition: transform .6s ease-in .1s !important; }
.tb.t0 .fill { background: var(--t0) repeating-linear-gradient(-45deg, rgba(255,255,255,.22) 0 calc(.8 * var(--u)), transparent calc(.8 * var(--u)) calc(1.6 * var(--u))); }
.tb.t1 .fill { background: var(--t1) radial-gradient(rgba(255,255,255,.3) calc(.25 * var(--u)), transparent calc(.32 * var(--u))) 0 0 / calc(1.2 * var(--u)) calc(1.2 * var(--u)); }
.tb.low .fill { animation: low .5s ease-in-out infinite alternate; }
.tb.hit .bar { animation: shake .3s; }
.chain { position: relative; display: flex; align-items: center; gap: calc(1 * var(--u)); min-height: calc(5.2 * var(--u)); opacity: .55; transition: opacity .2s; }
.tb.t1 .chain { flex-direction: row-reverse; }
.chain.active { opacity: 1; }
.chain .slots { display: flex; gap: calc(.7 * var(--u)); }
.chain .slot { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; border: calc(.35 * var(--u)) dashed rgba(255,255,255,.45); background: rgba(5,3,12,.5); overflow: hidden; display: grid; place-items: center; }
.chain .slot.on { border: calc(.4 * var(--u)) solid var(--ink); animation: pop .3s cubic-bezier(.3,1.7,.5,1); }
.tb.t0 .chain .slot.on { background: var(--t0); box-shadow: 0 0 calc(1.4 * var(--u)) var(--t0); }
.tb.t1 .chain .slot.on { background: var(--t1); box-shadow: 0 0 calc(1.4 * var(--u)) var(--t1); }
.chain .slot .face { width: 92%; height: 92%; }
.chain .mult { font: calc(3.6 * var(--u))/1 var(--f-display); letter-spacing: .04em; color: var(--gold); text-shadow: calc(.3 * var(--u)) calc(.3 * var(--u)) 0 var(--ink); }
.chain.last .mult { color: var(--pink); animation: throb .4s ease-in-out infinite alternate; }
.chain .drain { position: absolute; left: 0; right: 0; bottom: calc(-.8 * var(--u)); height: calc(.7 * var(--u)); border-radius: 99px; overflow: hidden; }
.chain .drain i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.tb.t1 .chain .drain i { transform-origin: right; }
.chain.last .drain i { background: var(--pink); }
.chain.shatter { animation: shatter .6s; }
.mid { display: flex; flex-direction: column; align-items: center; gap: calc(.4 * var(--u)); min-width: calc(16 * var(--u)); }
.mid .rnd { font: 800 calc(2.2 * var(--u))/1 var(--f-ui); letter-spacing: .1em; color: var(--muted); }
.clock { font: calc(7 * var(--u))/0.95 var(--f-display); letter-spacing: .04em; font-variant-numeric: tabular-nums; text-shadow: calc(.5 * var(--u)) calc(.5 * var(--u)) 0 var(--ink); }
.hud.final .clock { color: var(--pink); animation: throb .5s ease-in-out infinite alternate; }
.wins { display: flex; gap: calc(2 * var(--u)); }
.wins span { display: flex; gap: calc(.5 * var(--u)); }
.wins i { width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); border-radius: 50%; border: calc(.3 * var(--u)) solid rgba(255,255,255,.5); }
.wins .t0 i.on { background: var(--t0); border-color: var(--ink); } .wins .t1 i.on { background: var(--t1); border-color: var(--ink); }

/* ---------- the hit feed and the corner ---------- */
.feed { position: absolute; left: calc(2 * var(--u)); bottom: calc(2 * var(--u)); z-index: 7; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column-reverse; gap: calc(.5 * var(--u)); max-width: 46vw; pointer-events: none; }
.feed li { display: flex; align-items: center; gap: calc(.8 * var(--u)); padding: calc(.5 * var(--u)) calc(1.2 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(5,3,12,.72); font: 700 calc(2.3 * var(--u))/1.2 var(--f-ui); letter-spacing: .02em;
  animation: slidein .25s ease-out; transition: opacity 1s; }
.feed li.old { opacity: .35; }
.feed li i { width: calc(1.3 * var(--u)); height: calc(1.3 * var(--u)); border-radius: 50%; flex: none; }
.feed li.t0 i { background: var(--t0); } .feed li.t1 i { background: var(--t1); }
.corner { position: absolute; right: calc(2 * var(--u)); bottom: calc(2 * var(--u)); z-index: 7; display: flex; flex-direction: column; align-items: flex-end; gap: calc(.8 * var(--u)); max-width: 42vw; }
.joinnext { padding: calc(.6 * var(--u)) calc(1.2 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(5,3,12,.72); color: var(--muted); font: 700 calc(2.1 * var(--u))/1.2 var(--f-ui); }
.joinnext b { color: #fff; margin-left: .3em; }
.corner .pending { background: rgba(5,3,12,.85); }
.pausebtn { opacity: .55; }
.pausebtn:hover, .pausebtn:focus-visible { opacity: 1; }

/* ---------- category pick ---------- */
.pickov { position: absolute; left: 50%; top: calc(3 * var(--u)); z-index: 9; transform: translateX(-50%); width: min(94vw, calc(170 * var(--u))); display: flex; flex-direction: column; gap: calc(1.6 * var(--u));
  padding: calc(2 * var(--u)) calc(2.4 * var(--u)); border: calc(.6 * var(--u)) solid var(--ink); border-radius: calc(2.4 * var(--u)); background: var(--panel); box-shadow: calc(1 * var(--u)) calc(1 * var(--u)) 0 var(--ink); }
.pickov h1 { text-align: center; font: calc(5 * var(--u))/1 var(--f-display); letter-spacing: .03em; text-shadow: calc(.4 * var(--u)) calc(.4 * var(--u)) 0 var(--ink); }
.pickov .cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(1.4 * var(--u)); }
.pickov .cat { display: flex; flex-direction: column; align-items: center; gap: calc(.8 * var(--u)); min-height: calc(22 * var(--u)); padding: calc(1.4 * var(--u)); border: calc(.45 * var(--u)) solid var(--ink); border-radius: calc(1.8 * var(--u));
  background: #241A55; background: color-mix(in srgb, var(--cc) 34%, #241A55); }
.pickov .cat .ico { font-size: calc(6 * var(--u)); line-height: 1; }
.pickov .cat b { font: calc(3.4 * var(--u))/1 var(--f-display); letter-spacing: .04em; text-align: center; }
.pickov .cat .who { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(.6 * var(--u)); }
/* ten categories: two rows of five */
.pickov .cats.many { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(1.1 * var(--u)); }
.pickov .cats.many .cat { min-height: calc(15 * var(--u)); padding: calc(1 * var(--u)); gap: calc(.6 * var(--u)); }
.pickov .cats.many .cat .ico { font-size: calc(4.2 * var(--u)); }
.pickov .cats.many .cat b { font-size: calc(2.5 * var(--u)); }
.chip { display: flex; align-items: center; gap: calc(.4 * var(--u)); padding: calc(.3 * var(--u)) calc(.8 * var(--u)) calc(.3 * var(--u)) calc(.3 * var(--u)); border-radius: 99px; border: calc(.25 * var(--u)) solid var(--ink); animation: pop .3s cubic-bezier(.3,1.7,.5,1); }
.chip.t0 { background: var(--t0); } .chip.t1 { background: var(--t1); }
.chip .face { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); }
.chip em { font: normal 800 calc(1.9 * var(--u))/1 var(--f-ui); max-width: calc(14 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar { height: calc(1.2 * var(--u)); border-radius: 99px; background: rgba(0,0,0,.4); overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--gold); transform-origin: left; }

/* ---------- round end, results, pauses ---------- */
.rend { position: absolute; left: 50%; top: 18%; z-index: 9; transform: translateX(-50%); }
.rend .box { display: flex; flex-direction: column; align-items: center; gap: calc(1.2 * var(--u)); padding: calc(2.4 * var(--u)) calc(4 * var(--u)); border: calc(.6 * var(--u)) solid var(--ink); border-radius: calc(2.4 * var(--u)); background: var(--panel);
  box-shadow: calc(1 * var(--u)) calc(1 * var(--u)) 0 var(--ink); text-align: center; animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.rend .box.t0 { border-top: calc(1.6 * var(--u)) solid var(--t0); } .rend .box.t1 { border-top: calc(1.6 * var(--u)) solid var(--t1); }
.rend h1 { font: calc(6.4 * var(--u))/1 var(--f-display); letter-spacing: .03em; text-shadow: calc(.5 * var(--u)) calc(.5 * var(--u)) 0 var(--ink); }
.rend p { font: 700 calc(2.6 * var(--u))/1.25 var(--f-body); }
.score { display: flex; gap: calc(4 * var(--u)); font: 800 calc(2.6 * var(--u))/1 var(--f-ui); text-transform: uppercase; letter-spacing: .05em; }
.score span { display: flex; align-items: baseline; gap: calc(1 * var(--u)); }
.score b { font: calc(6 * var(--u))/1 var(--f-display); }
.score .t0 b { color: var(--t0); } .score .t1 b { color: var(--t1); }
.over { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 11; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2.4 * var(--u)); padding: calc(3 * var(--u)); background: rgba(5,3,12,.78); }
.over > h1 { font: calc(9 * var(--u))/1 var(--f-display); letter-spacing: .03em; text-align: center; color: var(--gold); text-shadow: calc(.7 * var(--u)) calc(.7 * var(--u)) 0 var(--ink); animation: pop .4s cubic-bezier(.3,1.6,.5,1); }
.over > h1.t0 { color: var(--t0); } .over > h1.t1 { color: var(--t1); }
.awards { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(1.8 * var(--u)); }
.award { width: calc(30 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(.6 * var(--u)); padding: calc(1.6 * var(--u)); border: calc(.5 * var(--u)) solid var(--ink); border-radius: calc(2 * var(--u));
  background: var(--paper); color: var(--ink); box-shadow: calc(.8 * var(--u)) calc(.8 * var(--u)) 0 var(--ink); text-align: center; animation: pop .4s cubic-bezier(.3,1.6,.5,1) backwards; }
.award:nth-child(2) { animation-delay: .15s; } .award:nth-child(3) { animation-delay: .3s; } .award:nth-child(4) { animation-delay: .45s; } .award:nth-child(5) { animation-delay: .6s; }
.award h3 { font: calc(3.4 * var(--u))/1 var(--f-display); letter-spacing: .04em; color: #6B2FD6; }
.award .face.big { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.award b { font: 800 calc(3 * var(--u))/1.05 var(--f-ui); }
.award span { font: 700 calc(2 * var(--u))/1.2 var(--f-body); color: #4A4060; }
.actions { display: flex; gap: calc(1.4 * var(--u)); flex-wrap: wrap; justify-content: center; }
.pauseov { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; display: grid; place-items: center; background: rgba(5,3,12,.72); }
.pauseov .box { display: flex; flex-direction: column; align-items: center; gap: calc(2.4 * var(--u)); padding: calc(3 * var(--u)) calc(5 * var(--u)); border: calc(.6 * var(--u)) solid var(--ink); border-radius: calc(2.4 * var(--u)); background: var(--panel); }
.pauseov h1 { font: calc(8 * var(--u))/1 var(--f-display); letter-spacing: .04em; text-shadow: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 var(--ink); }
.countdown { position: absolute; left: 50%; top: 50%; z-index: 21; transform: translate(-50%, -50%); font: calc(30 * var(--u))/1 var(--f-display); color: var(--gold); text-shadow: calc(1.2 * var(--u)) calc(1.2 * var(--u)) 0 var(--ink); pointer-events: none; }
.countdown.pop { animation: pop .3s cubic-bezier(.3,1.7,.5,1); }
.modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; display: grid; place-items: center; background: rgba(5,3,12,.8); }
.modal-in { padding: calc(3 * var(--u)); border: calc(.6 * var(--u)) solid var(--ink); border-radius: calc(2.4 * var(--u)); background: var(--paper); color: var(--ink); }
.movebox { display: flex; flex-direction: column; align-items: center; gap: calc(1.6 * var(--u)); text-align: center; }
.movebox h2 { font: calc(4.4 * var(--u))/1 var(--f-display); letter-spacing: .03em; }
.movebox .qr { width: min(44vh, 40vw); height: auto; image-rendering: pixelated; }
.movebox .ghost { color: var(--ink); background: #fff; border-color: var(--ink); }
.movebox .row { display: flex; gap: calc(1.2 * var(--u)); }
.movebox .namein { width: min(60vw, calc(60 * var(--u))); min-height: calc(7 * var(--u)); padding: 0 calc(1.6 * var(--u)); border: calc(.4 * var(--u)) solid var(--ink); border-radius: calc(1.2 * var(--u));
  background: #fff; color: var(--ink); font: 800 calc(3.6 * var(--u))/1 var(--f-ui); text-align: center; }
/* the players during a match: move a seat to a new phone, rename, remove */
.movebox.players { width: min(86vw, calc(110 * var(--u))); }
.players .plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1 * var(--u)); width: 100%; }
.players .slot.pl { background: rgba(23,17,31,.08); color: var(--ink); }
.players .slot.pl .who span { color: rgba(23,17,31,.65); }
.players .slot.pl .acts { opacity: 1; }
.players .hint { color: rgba(23,17,31,.7); font: 700 calc(2 * var(--u))/1.3 var(--f-body); max-width: calc(90 * var(--u)); }
.cornerbtns { display: flex; gap: calc(.8 * var(--u)); }
.pending em { color: var(--gold); font-style: normal; }
.over .pending { max-width: min(90vw, calc(120 * var(--u))); }
.toast { position: absolute; left: 50%; top: calc(3 * var(--u)); z-index: 40; transform: translateX(-50%); max-width: 80vw; padding: calc(1.2 * var(--u)) calc(2.4 * var(--u)); border: calc(.45 * var(--u)) solid var(--ink); border-radius: calc(1.4 * var(--u));
  background: var(--gold); color: var(--ink); font: 800 calc(2.8 * var(--u))/1.2 var(--f-ui); text-align: center; box-shadow: 0 calc(.6 * var(--u)) 0 var(--ink); animation: pop .3s cubic-bezier(.3,1.6,.5,1); }
.conn { position: absolute; left: 50%; bottom: calc(2 * var(--u)); z-index: 41; transform: translateX(-50%); padding: calc(1 * var(--u)) calc(2.4 * var(--u)); border-radius: calc(1.4 * var(--u)); background: #B3122E; color: #fff;
  font: 800 calc(2.6 * var(--u))/1.2 var(--f-ui); }

@keyframes pop { from { scale: .5; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes throb { from { scale: 1; } to { scale: 1.08; } }
@keyframes low { from { filter: brightness(1); } to { filter: brightness(1.6); } }
@keyframes shake { 0%, 100% { translate: 0 0; } 25% { translate: calc(-.6 * var(--u)) 0; } 50% { translate: calc(.6 * var(--u)) 0; } 75% { translate: calc(-.3 * var(--u)) 0; } }
@keyframes shatter { 0% { scale: 1; filter: none; } 20% { scale: 1.15; filter: brightness(2); } 100% { scale: 1; filter: none; } }
@keyframes slidein { from { translate: calc(-4 * var(--u)) 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mode, .chip, .award, .toast, .rend .box, .over > h1, .chain .slot.on, .feed li { animation: none !important; transition: none; }
  .hud.final .clock, .chain.last .mult, .tb.low .fill { animation: none; }
}