/* Career Feud: blue and gold game-show look. No web fonts, so it works with no internet. */
:root {
  --night: #040b2e;
  --navy: #0a1957;
  --royal: #1231a8;
  --tile: #1a44d6;
  --tile-lo: #10309c;
  --gold: #f6b40e;
  --gold-hi: #ffd95a;
  --gold-lo: #a86a00;
  --red: #e3262e;
  --paper: #fff7dc;
  --ink: #06103a;
  --t1: #56d3ff;
  --t2: #ff93b4;
  --ok: #49e39a;
  --mute: #9fb0e8;
  --show: "Avenir Next Condensed", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--text);
  color: #fff;
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* The moving background, like playstepup.com: light rays turning one way, a slow swirl of color turning the other. */
body::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 42%;
  width: 240vmax;
  height: 240vmax;
  margin: -120vmax 0 0 -120vmax;
  border-radius: 50%;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 50%, rgba(42, 86, 230, .55), transparent 30%),
    repeating-conic-gradient(from 0deg at 50% 50%, #0b1d66 0deg 6deg, #081650 6deg 12deg);
  animation: bgspin 90s linear infinite;
}
body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 42%;
  width: 120vmax;
  height: 120vmax;
  margin: -60vmax 0 0 -60vmax;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 200, 61, .32), rgba(27, 59, 214, 0) 22%, rgba(232, 52, 63, .26) 45%, rgba(27, 59, 214, 0) 63%, rgba(0, 181, 200, .3) 80%, rgba(255, 200, 61, .32));
  filter: blur(70px);
  mix-blend-mode: screen;
  animation: bgspin 26s linear infinite reverse, bgbreathe 11s ease-in-out infinite alternate;
}
@keyframes bgspin { to { transform: rotate(360deg); } }
@keyframes bgbreathe { from { scale: .85; } to { scale: 1.15; } }
body.display::after { display: none; }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:disabled { opacity: .4; cursor: default; }
:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
a { color: var(--gold-hi); }
.show { font-family: var(--show); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.hide { display: none !important; }

/* ---------- phone pages (home, host, buzzer, settings) ---------- */
.page { max-width: 560px; margin: 0 auto; padding: 16px 16px 96px; }
.page.wide { max-width: 980px; }
.brand { font-family: var(--show); font-weight: 800; text-transform: uppercase; color: var(--gold); font-size: 30px; line-height: 1; margin: 8px 0 2px; text-shadow: 0 2px 0 #7a3d00; }
.sub { color: var(--mute); font-size: 14px; margin: 0 0 16px; }
.card { background: rgba(8, 20, 74, .92); border: 1px solid #2a45b8; border-radius: 14px; padding: 16px; margin: 0 0 14px; }
.card h2 { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 22px; margin: 0 0 8px; color: #fff; }
.card h3 { font-size: 13px; font-weight: 600; color: var(--mute); margin: 16px 0 6px; }
.card p { margin: 0 0 10px; line-height: 1.45; color: #dbe3ff; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 17px; text-decoration: none; text-align: center; background: #1b2f86; color: #fff; border: 1px solid #3552c9; }
.btn.gold { background: linear-gradient(#ffd24a, #f2a900); color: var(--ink); border-color: #ffe48a; box-shadow: 0 4px 0 #8a5400; }
.btn.red { background: var(--red); border-color: #ff7a80; box-shadow: 0 4px 0 #7d0e13; }
.btn.t1 { border-color: var(--t1); color: var(--t1); background: rgba(86, 211, 255, .1); }
.btn.t2 { border-color: var(--t2); color: var(--t2); background: rgba(255, 147, 180, .1); }
.btn.on { box-shadow: 0 0 0 3px var(--gold-hi); background: rgba(255, 217, 90, .22); }
.btn.small { min-height: 40px; font-size: 14px; padding: 6px 10px; width: auto; }
.btn.ghost { background: transparent; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 10px; }
.field { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 1px solid #3552c9; background: #050f3d; color: #fff; font-size: 16px; }
textarea.field { min-height: 92px; resize: vertical; line-height: 1.4; }
.note { font-size: 13px; color: var(--mute); line-height: 1.4; }
.err { color: #ffb3b6; font-weight: 600; min-height: 1.3em; font-size: 14px; }

/* home */
.choices { display: grid; gap: 14px; }
@media (min-width: 760px) { .choices { grid-template-columns: 1fr 1fr; } }
.qr { background: #fff; padding: 10px; border-radius: 10px; width: 164px; height: 164px; flex: none; }
.qr svg, .qr img { width: 100%; height: 100%; display: block; }
.addr { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; color: var(--gold-hi); word-break: break-all; }

/* host: top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(4, 11, 46, .96); border-bottom: 1px solid #22379e; }
.topbar .where { font-family: var(--show); font-weight: 800; text-transform: uppercase; color: var(--gold); font-size: 17px; line-height: 1.05; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .where small { display: block; font-family: var(--text); font-weight: 500; text-transform: none; font-size: 11px; color: var(--ok); letter-spacing: 0; }
.topbar .where small.off { color: #ffb3b6; }
.bigcode { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--gold-hi); font-size: 1.3em; letter-spacing: 2px; }
.lobby .join .code { font-family: var(--show); font-weight: 800; color: #fff; font-size: calc(var(--u) * 4.6); letter-spacing: calc(var(--u) * .3); line-height: 1.05; text-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 200, 60, .55); }
body.has-set .lobby .join .code { font-size: calc(var(--u) * 3.4); }
.chip { min-height: 40px; padding: 6px 9px; border-radius: 10px; border: 1px solid #3552c9; background: #0d1f6e; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
.chip.on { background: var(--gold); color: var(--ink); border-color: var(--gold-hi); }
.dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.dot { font-size: 12px; padding: 4px 8px; border-radius: 99px; background: #0d1f6e; border: 1px solid #2a45b8; color: var(--mute); }
.dot.on { color: #06241a; background: var(--ok); border-color: var(--ok); font-weight: 700; }
.dot.warn { color: #3b1d00; background: var(--gold-hi); border-color: var(--gold-hi); font-weight: 700; }

/* host: script card */
.say { background: var(--paper); color: #231a02; border-radius: 16px; padding: 14px 16px 16px; margin: 0 0 14px; border-bottom: 6px solid var(--gold-lo); }
.say .tag { font-size: 12px; font-weight: 800; color: #9a5b00; margin: 0 0 6px; }
.say .line { font-size: 21px; line-height: 1.3; font-weight: 600; margin: 0; }
.say .then { font-size: 14px; line-height: 1.4; color: #5b4a1c; margin: 10px 0 0; font-style: italic; }
.say .teach { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #ffe9a6; font-size: 15px; line-height: 1.4; }
.say .teach b { display: block; font-size: 12px; color: #9a5b00; margin-bottom: 2px; }

.wherecard { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: rgba(13, 31, 110, .9); border: 1px solid #3552c9; }
.wherecard b { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 18px; color: var(--gold-hi); }
.wherecard p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: #e3e9ff; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs span { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: #0a1957; color: #8394d6; border: 1px solid #2a45b8; }
.crumbs span.past { color: #bcd0ff; }
.crumbs span.cur { background: var(--gold); color: var(--ink); border-color: var(--gold-hi); }
.say { margin-bottom: 10px; }
.todo { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: #06103a; border: 2px solid var(--ok); }
.todo .tag { font-size: 12px; font-weight: 800; color: var(--ok); margin: 0 0 6px; }
.todo ol { margin: 0; padding-left: 22px; }
.todo li, .todo .one { font-size: 17px; line-height: 1.35; font-weight: 600; margin: 0 0 4px; color: #fff; }
.ctl.ask { border-color: var(--gold); }
.ctl.ask > .lbl { font-size: 18px; color: #fff; margin-bottom: 6px; }
.checklist .stepline { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid #1c2f8a; }
.checklist .stepline:first-of-type { border-top: 0; }
.checklist .stepline b { font-size: 17px; }
.checklist .stepline p { margin: 4px 0 0; font-size: 14px; }
.tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #3552c9; display: grid; place-items: center; font-weight: 900; color: #06241a; margin-top: 1px; }
.tick.ok { background: var(--ok); border-color: var(--ok); }
.howto ol { margin: 0 0 10px; padding-left: 20px; }
.howto li { margin-bottom: 8px; line-height: 1.4; color: #e3e9ff; }

/* host: clock strip */
.clock { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #050f3d; border: 2px solid var(--gold); margin: 0 0 14px; }
.clock .secs { font-family: var(--show); font-weight: 800; font-size: 44px; line-height: 1; color: var(--gold-hi); min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums; }
.clock .what { flex: 1; font-weight: 700; }
.clock .what small { display: block; font-weight: 500; color: var(--mute); font-size: 12px; }
.clock.low { border-color: var(--red); }
.clock.low .secs { color: #ff8a8f; }
.clock.up { background: var(--red); border-color: #fff; animation: pulse .5s 4 alternate; }
.clock.up .secs { color: #fff; font-size: 30px; min-width: 0; }
@keyframes pulse { to { filter: brightness(1.35); } }

/* host: scores */
.scores { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; margin: 0 0 14px; }
.scores .team { border-radius: 12px; padding: 8px 10px; text-align: center; border: 2px solid; background: rgba(5, 15, 61, .9); }
.scores .team.t1 { border-color: var(--t1); }
.scores .team.t2 { border-color: var(--t2); }
.scores .team .nm { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scores .team.t1 .nm { color: var(--t1); }
.scores .team.t2 .nm { color: var(--t2); }
.scores .team .sc { font-family: var(--show); font-weight: 800; font-size: 32px; line-height: 1; }
.scores .team .st { font-size: 11px; color: var(--mute); min-height: 1.2em; }
.scores .team.live { box-shadow: 0 0 0 3px rgba(246, 180, 14, .55); }
.scores .potbox { border-radius: 12px; padding: 8px 12px; text-align: center; background: #000624; border: 2px solid var(--gold); min-width: 84px; }
.scores .potbox .sc { font-family: var(--show); font-weight: 800; font-size: 32px; line-height: 1; color: var(--gold-hi); }
.scores .potbox .st { font-size: 11px; color: var(--gold); }
.xs { letter-spacing: 2px; color: var(--red); font-weight: 900; }

/* host: question and answers */
.qcard { border: 2px solid var(--gold); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; background: rgba(8, 20, 74, .95); }
.qcard .meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 6px; gap: 8px; }
.qcard .meta span + span { color: var(--mute); font-weight: 500; }
.qcard .q { font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; }
.qcard .live { font-size: 12px; color: var(--ok); margin-top: 6px; }
.qcard .live.off { color: var(--mute); }
.answers { display: grid; gap: 8px; margin: 0 0 14px; }
.ans { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 8px 14px; border-radius: 10px; text-align: left; background: linear-gradient(var(--tile), var(--tile-lo)); border: 2px solid #5f7df0; color: #fff; }
.ans .n { font-weight: 800; color: var(--gold-hi); }
.ans .t { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 19px; line-height: 1.1; }
.ans .p { font-family: var(--show); font-weight: 800; font-size: 22px; }
.ans.done { background: linear-gradient(#ffd24a, #f2a900); color: var(--ink); border-color: #fff; }
.ans.done .n { color: var(--ink); }
.ans.done:disabled { opacity: 1; }
.ans.locked { opacity: .45; }
.ctl { border: 1px solid #2a45b8; border-radius: 14px; padding: 12px; margin: 0 0 14px; background: rgba(5, 15, 61, .92); }
.ctl > .lbl { font-size: 12px; font-weight: 700; color: var(--gold); margin: 0 0 8px; }
.btn.big { min-height: 64px; font-size: 20px; }
a.btn.big { flex-direction: column; gap: 2px; padding: 12px 14px; }
a.btn.big small { font-size: 13px; font-weight: 500; opacity: .85; }
details.fold { border: 1px solid #2a45b8; border-radius: 14px; background: rgba(5, 15, 61, .92); margin: 0 0 14px; }
details.fold > summary { padding: 12px 14px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; font-size: 22px; color: var(--gold); line-height: 1; }
details.fold[open] > summary::after { content: "\2212"; }
details.fold > .in { padding: 0 14px 14px; }
.preview { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #000; }
.preview iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; border: 0; transform-origin: 0 0; pointer-events: none; }
.played { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.played label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 15px; }
.played input { width: 22px; height: 22px; accent-color: var(--gold); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #1c2f8a; }
.switch:first-of-type { border-top: 0; }
.switch input[type=checkbox] { width: 26px; height: 26px; accent-color: var(--gold); flex: none; }
.switch input[type=number] { width: 64px; min-height: 40px; text-align: center; }
.toast { position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 50; padding: 12px 14px; border-radius: 12px; background: var(--red); color: #fff; font-weight: 700; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }

/* host: fast money */
.fmq { border: 1px solid #2a45b8; border-radius: 12px; padding: 10px; margin: 0 0 10px; background: rgba(8, 20, 74, .95); }
.fmq.dup { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.fmq .q { font-weight: 700; font-size: 16px; line-height: 1.25; margin: 0 0 8px; }
.fmq .q b { color: var(--gold-hi); }
.fmq .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { min-height: 42px; padding: 6px 10px; border-radius: 8px; border: 1px solid #5f7df0; background: var(--tile-lo); font-size: 14px; font-weight: 600; color: #fff; }
.opt.sel { background: var(--gold); color: var(--ink); border-color: #fff; }
.opt.zero { border-color: #ff7a80; color: #ffb3b6; background: transparent; }
.opt.zero.sel { background: var(--red); color: #fff; }
.opt.taken { text-decoration: line-through; opacity: .5; }
.fmq .said { margin-top: 8px; min-height: 40px; font-size: 15px; }
.fmq .p1said { font-size: 12px; color: var(--mute); margin: 0 0 6px; }
.fmrow { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-top: 1px solid #1c2f8a; font-size: 15px; }
.fmrow:first-child { border-top: 0; }
.fmrow.shown { color: var(--gold-hi); }
.fmrow small { display: block; color: var(--mute); font-size: 12px; }

.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 10px; }
.step { min-height: 44px; border-radius: 10px; border: 1px solid #3552c9; background: #0d1f6e; font-weight: 800; font-size: 17px; color: #fff; }
.step.done { background: #1c7c4f; border-color: var(--ok); }
.step.cur { outline: 3px solid var(--gold-hi); outline-offset: 1px; }
.step.bad { background: var(--red); border-color: #fff; }
.fmq .q { font-size: 19px; }
.fmq .opt { min-height: 48px; font-size: 16px; }

.reading { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--gold); color: var(--ink); }
.reading b { display: block; font-size: 19px; }
.reading span { font-size: 14px; font-weight: 600; }
.reading i { font-style: normal; font-weight: 800; }

/* buzzer phone */
.buzzwrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 16px; max-width: 560px; margin: 0 auto; }
.buzzer { flex: 1; min-height: 46vh; margin: 14px 0; border-radius: 28px; font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 64px; color: #fff; background: #2a2f52; border: 6px solid #4a5080; box-shadow: 0 10px 0 #14173a; }
.buzzer.armed { background: radial-gradient(circle at 50% 35%, #ff5a61, #c1121a); border-color: #ffb3b6; box-shadow: 0 10px 0 #5e070b, 0 0 60px rgba(227, 38, 46, .6); }
.buzzer.armed:active { transform: translateY(8px); box-shadow: 0 2px 0 #5e070b; }
.buzzer.won { background: radial-gradient(circle at 50% 35%, #ffe07a, #f2a900); color: var(--ink); border-color: #fff; }
.buzzer.lost { background: #1a1f44; color: #7f88b8; }
.buzzer small { display: block; font-family: var(--text); text-transform: none; font-size: 16px; font-weight: 600; letter-spacing: 0; margin-top: 8px; }

/* ---------- display (projector) ---------- */
body.display { overflow: hidden; --u: min(1vw, 1.7778vh); cursor: default; }
.stage { position: fixed; inset: 0; display: grid; grid-template-rows: auto auto 1fr auto; padding: calc(var(--u) * 2) calc(var(--u) * 2.5); gap: calc(var(--u) * 1.2); }
.d-head { grid-row: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.d-brand { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.d-logo { height: calc(var(--u) * 6.4); width: auto; display: block; filter: drop-shadow(0 calc(var(--u) * .3) calc(var(--u) * .8) rgba(0, 0, 0, .6)); }
.d-title { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 2.6); line-height: 1; color: var(--gold); text-shadow: 0 .12em 0 #7a3d00; }
.d-org { font-size: calc(var(--u) * 1.15); letter-spacing: .22em; text-transform: uppercase; color: #c9d4ff; }
.d-round { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 2.2); color: var(--gold-hi); text-align: right; line-height: 1; }
.d-round small { display: block; font-family: var(--text); font-weight: 600; text-transform: none; font-size: calc(var(--u) * 1.1); color: #c9d4ff; margin-top: calc(var(--u) * .5); letter-spacing: 0; }
.d-scores { grid-row: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(var(--u) * 2); }
.d-team { justify-self: start; min-width: calc(var(--u) * 22); max-width: calc(var(--u) * 30); padding: calc(var(--u) * .8) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1); border: calc(var(--u) * .22) solid; background: rgba(4, 11, 46, .75); text-align: center; transition: box-shadow .3s, transform .3s; }
.d-team.t2 { justify-self: end; }
.d-team.t1 { border-color: var(--t1); }
.d-team.t2 { border-color: var(--t2); }
.d-team .nm { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-team.t1 .nm { color: var(--t1); }
.d-team.t2 .nm { color: var(--t2); }
.d-team .sc { font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 5); line-height: 1; font-variant-numeric: tabular-nums; }
.d-team .st { font-size: calc(var(--u) * 1); letter-spacing: .2em; text-transform: uppercase; color: #c9d4ff; min-height: 1.3em; }
.d-team.live { box-shadow: 0 0 calc(var(--u) * 3) rgba(255, 217, 90, .7); transform: scale(1.04); }
.d-team.bump .sc { animation: bump .7s; }
@keyframes bump { 30% { transform: scale(1.35); color: var(--gold-hi); } }
.d-mid { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.d-pot { min-width: calc(var(--u) * 11); padding: calc(var(--u) * .5) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1); background: #000624; border: calc(var(--u) * .22) solid var(--gold); text-align: center; }
.d-pot .sc { font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 4.6); line-height: 1; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.d-pot .st { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 1.2); color: var(--gold); min-height: 1.2em; }
.d-strikes { display: flex; gap: calc(var(--u) * .7); }
.d-strikes i { width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: calc(var(--u) * .6); border: calc(var(--u) * .15) solid #33489f; background: rgba(4, 11, 46, .7); display: grid; place-items: center; font-style: normal; font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 3); color: transparent; }
.d-strikes i.on { color: #fff; background: var(--red); border-color: #ffb3b6; }
.d-clock { width: calc(var(--u) * 7.5); height: calc(var(--u) * 7.5); border-radius: 50%; display: grid; place-items: center; font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 4.4); background: #000624; border: calc(var(--u) * .35) solid var(--gold); color: var(--gold-hi); font-variant-numeric: tabular-nums; visibility: hidden; }
.d-clock.on { visibility: visible; }
.d-clock.low { border-color: var(--red); color: #ff8a8f; animation: pulse .5s infinite alternate; }

.d-main { grid-row: 3; position: relative; min-height: 0; display: grid; place-items: center; }
.board { position: relative; width: min(100%, calc(var(--u) * 78)); height: 100%; max-height: calc(var(--u) * 36); padding: calc(var(--u) * 1.6) calc(var(--u) * 2); border-radius: calc(var(--u) * 1.6); background: linear-gradient(#0c1f74, #07134d); border: calc(var(--u) * .35) solid var(--gold); box-shadow: 0 0 0 calc(var(--u) * .5) #07134d, 0 0 0 calc(var(--u) * .7) var(--gold-lo), 0 0 calc(var(--u) * 5) rgba(246, 180, 14, .35); display: grid; grid-template-rows: auto 1fr; gap: calc(var(--u) * 1.2); }
.board::before { content: ""; position: absolute; inset: calc(var(--u) * -.62); border-radius: calc(var(--u) * 2); border: calc(var(--u) * .3) dotted var(--gold-hi); pointer-events: none; opacity: .9; }
.d-q { text-align: center; font-weight: 700; font-size: calc(var(--u) * 2.5); line-height: 1.15; min-height: calc(var(--u) * 3); display: grid; place-items: center; }
.d-q.wait { font-family: var(--show); font-weight: 800; text-transform: uppercase; color: #5d74d6; letter-spacing: .08em; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); grid-auto-flow: column; gap: calc(var(--u) * 1); min-height: 0; perspective: calc(var(--u) * 120); }
.tile { position: relative; min-height: 0; }
.tile.empty { border: calc(var(--u) * .15) dashed #2c429c; border-radius: calc(var(--u) * .7); background: rgba(4, 11, 46, .5); }
.tile .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.tile.open .in { transform: rotateX(180deg); }
.tile .face { position: absolute; inset: 0; border-radius: calc(var(--u) * .7); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; align-items: center; overflow: hidden; }
.tile .front { background: linear-gradient(var(--tile), var(--tile-lo)); border: calc(var(--u) * .18) solid #6f8bf5; padding-left: calc(var(--u) * 1.2); }
.tile .front b { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); border-radius: 50%; display: grid; place-items: center; background: #06103a; border: calc(var(--u) * .15) solid var(--gold); color: var(--gold-hi); font-size: calc(var(--u) * 2.1); font-weight: 800; }
.tile .back { transform: rotateX(180deg); background: linear-gradient(#ffd24a, #f2a900); border: calc(var(--u) * .18) solid #fff; color: var(--ink); }
.tile .back .t { flex: 1; min-width: 0; padding: 0 calc(var(--u) * 1.2); font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 2.5); line-height: 1; }
.tile .back .p { align-self: stretch; width: calc(var(--u) * 6); display: grid; place-items: center; background: #06103a; color: var(--gold-hi); font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 3); }
.tile.late .back { background: linear-gradient(#dfe6ff, #b4c2f4); }
.tile.late .back .p { color: #c9d4ff; }

.splash { position: absolute; inset: 0; z-index: 4; border-radius: calc(var(--u) * 1.3); background: linear-gradient(#0c1f74, #07134d); display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * .5); }
.splash.on { display: flex; }
.splash .big { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 8.5); line-height: .95; white-space: nowrap; color: var(--gold); text-shadow: 0 .07em 0 #7a3d00; animation: slam .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.splash .mult { font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 7); line-height: 1; color: #fff; text-shadow: 0 .07em 0 var(--royal); animation: slam .55s .25s cubic-bezier(.2, 1.6, .4, 1) both; }
.splash .cap { font-size: calc(var(--u) * 1.5); letter-spacing: .35em; text-transform: uppercase; color: #c9d4ff; margin-top: calc(var(--u) * 1); }
@keyframes slam { from { transform: scale(2.4); opacity: 0; } }
.survey { position: absolute; z-index: 6; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(0); padding: calc(var(--u) * 1.6) calc(var(--u) * 4); border-radius: calc(var(--u) * 1.6); background: linear-gradient(#ffd24a, #f2a900); color: var(--ink); font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 7); line-height: 1; white-space: nowrap; box-shadow: 0 calc(var(--u) * .6) 0 #7a3d00, 0 0 calc(var(--u) * 6) rgba(255, 217, 90, .7); transition: transform .28s cubic-bezier(.2, 1.6, .4, 1); }
.survey.on { transform: translate(-50%, -50%) scale(1); }
.strikeover { position: absolute; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center; gap: calc(var(--u) * 2); }
.strikeover.on { display: flex; }
.strikeover i { font-style: normal; font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 26); line-height: .8; color: var(--red); -webkit-text-stroke: calc(var(--u) * .5) #fff; text-shadow: 0 0 calc(var(--u) * 4) rgba(227, 38, 46, .9); animation: xin 1.5s both; }
@keyframes xin { 0% { transform: scale(3); opacity: 0; } 14% { transform: scale(1); opacity: 1; } 22% { transform: scale(1.12); } 30% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }

.bigcount { position: fixed; inset: 0; z-index: 25; display: none; place-items: center; background: rgba(4, 11, 46, .55); pointer-events: none; }
.bigcount.on { display: grid; }
.bigcount b { font-family: var(--show); font-weight: 800; font-size: 78vh; line-height: 1; color: var(--red); -webkit-text-stroke: 1.2vh #fff; text-shadow: 0 0 8vh rgba(227, 38, 46, .9); font-variant-numeric: tabular-nums; }
.bigcount b.pop { animation: countpop .9s both; }
@keyframes countpop { 0% { transform: scale(1.5); opacity: .2; } 18% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: .55; transform: scale(.94); } }
.d-foot { grid-row: 4; min-height: calc(var(--u) * 7); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); }
.spot { display: none; align-items: center; gap: calc(var(--u) * 2); }
.spot.on { display: flex; }
.spot .who { min-width: calc(var(--u) * 24); padding: calc(var(--u) * .6) calc(var(--u) * 2); border-radius: calc(var(--u) * 1); border: calc(var(--u) * .22) solid; background: rgba(0, 6, 36, .9); text-align: center; transition: transform .2s, box-shadow .2s; }
.spot .who.t1 { border-color: var(--t1); }
.spot .who.t2 { border-color: var(--t2); }
.spot .who b { display: block; font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 3.4); line-height: 1; }
.spot .who.t1 b { color: var(--t1); }
.spot .who.t2 b { color: var(--t2); }
.spot .who small { font-size: calc(var(--u) * 1); letter-spacing: .2em; text-transform: uppercase; color: #c9d4ff; }
.spot .who.hit { transform: scale(1.12); background: var(--gold); border-color: #fff; box-shadow: 0 0 calc(var(--u) * 4) rgba(255, 217, 90, .9); }
.spot .who.hit b, .spot .who.hit small { color: var(--ink); }
.spot .who.dim { opacity: .35; }
.spot .vs { font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 3); color: var(--gold); }
.d-msg { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 3); color: var(--gold-hi); text-align: center; }

/* display: lobby, fast money, finale */
.panel { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 1.5); }
.panel.on { display: flex; }
.lobbylogo { height: calc(var(--u) * 27); width: auto; max-width: 90%; filter: drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .7)); }
body[data-stage="bridge"] .lobbylogo { display: none; }
.lobby .huge:empty, .lobby .tagline:empty { display: none; }
.lobby .huge { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 8); line-height: .9; color: var(--gold); text-shadow: 0 .06em 0 #7a3d00; }
.lobby .tagline { font-size: calc(var(--u) * 2); color: #dbe3ff; }
.lobby .join { display: flex; align-items: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5); border-radius: calc(var(--u) * 1.4); background: rgba(0, 6, 36, .8); border: calc(var(--u) * .2) solid var(--gold); text-align: left; }
.lobby .join .qr { width: calc(var(--u) * 11); height: calc(var(--u) * 11); padding: calc(var(--u) * .8); }
.lobby .join h3 { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 2.6); margin: 0 0 calc(var(--u) * .6); }
.lobby .join p { font-size: calc(var(--u) * 1.6); margin: 0 0 calc(var(--u) * .5); color: #dbe3ff; }
.lobby .join .addr { font-size: calc(var(--u) * 1.8); }
.lobby .ready { display: flex; gap: calc(var(--u) * 1.5); margin-top: calc(var(--u) * .8); }
.lobby .ready span { padding: calc(var(--u) * .4) calc(var(--u) * 1.2); border-radius: 99px; font-size: calc(var(--u) * 1.4); font-weight: 700; border: calc(var(--u) * .15) solid; opacity: .5; }
.lobby .ready span.on { opacity: 1; background: rgba(255, 255, 255, .12); }
.lobby .ready .t1 { color: var(--t1); }
.lobby .ready .t2 { color: var(--t2); }
.rules { max-width: calc(var(--u) * 74); text-align: left; font-size: calc(var(--u) * 2.1); line-height: 1.3; margin: 0; }
.rules li { margin-bottom: calc(var(--u) * .7); }
.rules li::marker { color: var(--gold); font-weight: 800; }

.fmwrap { width: min(100%, calc(var(--u) * 82)); }
.fmhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u) * .7); }
.fmhead .ttl { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 3.8); line-height: 1; color: var(--gold); text-shadow: 0 .08em 0 #7a3d00; text-align: left; }
.fmhead .ttl small { display: block; font-family: var(--text); text-transform: none; font-weight: 600; font-size: calc(var(--u) * 1.4); color: #c9d4ff; text-shadow: none; margin-top: calc(var(--u) * .4); }
.fmtotal { min-width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); padding: 0 calc(var(--u) * 1); border-radius: calc(var(--u) * 4.5); border: calc(var(--u) * .4) solid var(--gold); background: #000624; display: grid; place-items: center; font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 3.4); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.fmboard { padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.4); background: #060f3e; border: calc(var(--u) * .35) solid var(--gold); box-shadow: 0 0 calc(var(--u) * 4) rgba(246, 180, 14, .3); display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 2); row-gap: calc(var(--u) * .3); }
.fmname { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 1.8); color: var(--gold-hi); text-align: left; }
.fmqline { grid-column: 1 / -1; font-size: calc(var(--u) * 1.25); line-height: 1.2; color: #c9d4ff; text-align: left; min-height: calc(var(--u) * 1.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmcell { height: calc(var(--u) * 3.5); border-radius: calc(var(--u) * .6); background: #142a8c; border: calc(var(--u) * .12) solid #3f5bd0; display: grid; grid-template-columns: 1fr calc(var(--u) * 6.5); overflow: hidden; }
.fmcell .t { display: flex; align-items: center; padding: 0 calc(var(--u) * 1); font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 2.1); line-height: 1; text-align: left; overflow: hidden; }
.fmcell .p { display: grid; place-items: center; background: #000624; font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 2.4); color: var(--gold-hi); }
.fmcell .t span, .fmcell .p span { display: inline-block; transform: rotateX(90deg); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.fmcell .t.show span, .fmcell .p.show span { transform: none; }
.fmcell.cover { background: repeating-linear-gradient(135deg, #0a1957 0 calc(var(--u) * 1), #0d2070 calc(var(--u) * 1) calc(var(--u) * 2)); }
.fmcell.cover .p { background: #050d33; }
.fmfoot { margin-top: calc(var(--u) * .8); font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 2.6); line-height: 1.1; min-height: calc(var(--u) * 3); }
.fmfoot.win { color: var(--gold-hi); }
.fmfoot.miss { color: #ff9aa0; }
.fmclock { font-size: calc(var(--u) * 3.8); width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); }

.finale .cup { width: calc(var(--u) * 9); height: calc(var(--u) * 9); color: var(--gold); }
.finale .msg { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 9); line-height: .95; color: #fff; text-shadow: 0 .07em 0 var(--royal); }
.finale .msg small { display: block; font-size: calc(var(--u) * 3); color: var(--gold-hi); text-shadow: none; margin-bottom: calc(var(--u) * .6); }
.finale .finals { display: flex; gap: calc(var(--u) * 2.5); margin-top: calc(var(--u) * 1.5); }
.finale .d-team { justify-self: auto; }
.finale .d-team.crown { box-shadow: 0 0 calc(var(--u) * 4) rgba(255, 217, 90, .9); border-color: var(--gold-hi); transform: scale(1.08); }
.finale .fmline { font-size: calc(var(--u) * 1.8); color: #dbe3ff; margin-top: calc(var(--u) * 1); }
#confetti { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.soundgate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: end center; padding-bottom: 6vh; background: rgba(4, 11, 46, .35); }
.soundgate div { padding: 1.2vw 2.4vw; border-radius: 99px; background: var(--gold); color: var(--ink); font-weight: 800; font-size: max(18px, 1.8vw); box-shadow: 0 .4vw 0 #7a3d00; animation: pulse .8s infinite alternate; }
.offline { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 45; padding: 6px 14px; border-radius: 99px; background: var(--red); font-weight: 700; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .tile .in, .survey, .fmcell span { transition: none; }
  .bigcount b.pop, .splash .big, .splash .mult, .strikeover i, .clock.up, .d-clock.low, .soundgate div { animation: none; }
}

/* ---------- the 3D studio set behind the display ---------- */
#setwrap { position: fixed; inset: 0; z-index: 0; display: none; background: #02061c; }
#setwrap canvas { width: 100%; height: 100%; display: block; }
body.has-set #setwrap { display: block; }
body.has-set::before { display: none; }
body.display .stage { z-index: 1; isolation: isolate; }
body.has-set[data-stage="lobby"] .d-head, body.has-set[data-stage="welcome"] .d-head, body.has-set[data-stage="bridge"] .d-head, body.has-set[data-stage="over"] .d-head { visibility: hidden; }
body.has-set[data-stage="welcome"] #scores, body.has-set[data-stage="bridge"] #scores { display: none !important; }
body.has-set .soundgate { place-items: start center; padding-top: 4vh; }
body.has-set .lobbylogo, body.has-set .finale .cup { display: none; }
body.has-set .panel.lobby, body.has-set .panel.finale { justify-content: flex-end; gap: calc(var(--u) * 1); padding-bottom: calc(var(--u) * 1); }
body.has-set .lobby .huge { font-size: calc(var(--u) * 6.5); padding: calc(var(--u) * .8) calc(var(--u) * 3); border-radius: calc(var(--u) * 1.4); background: rgba(2, 6, 28, .78); border: calc(var(--u) * .25) solid var(--gold); text-shadow: 0 .06em 0 #7a3d00; box-shadow: 0 0 calc(var(--u) * 4) rgba(246, 180, 14, .35); }
body.has-set .lobby .tagline { padding: calc(var(--u) * .5) calc(var(--u) * 1.6); border-radius: 99px; background: rgba(2, 6, 28, .72); }
body.has-set[data-stage="lobby"] .lobby .tagline { display: none; }
body.has-set .lobby .join { position: absolute; left: 0; bottom: 0; margin: 0; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1) calc(var(--u) * 1.6); background: rgba(2, 6, 28, .86); }
body.has-set .lobby .join .qr { width: calc(var(--u) * 9); height: calc(var(--u) * 9); padding: calc(var(--u) * .5); }
body.has-set .lobby .join h3 { font-size: calc(var(--u) * 1.9); }
body.has-set .lobby .join p { font-size: calc(var(--u) * 1.2); }
body.has-set .lobby .join .addr { font-size: calc(var(--u) * 1.4); }
body.has-set .lobby .ready span { font-size: calc(var(--u) * 1.1); }
body.has-set .finale .msg { font-size: calc(var(--u) * 5.2); padding: calc(var(--u) * .8) calc(var(--u) * 3); border-radius: calc(var(--u) * 1.4); background: rgba(2, 6, 28, .8); border: calc(var(--u) * .25) solid var(--gold); text-shadow: none; }
body.has-set .finale .msg small { font-size: calc(var(--u) * 2.2); }
body.has-set .finale .finals { display: none; }
body.has-set[data-stage="welcome"] .lobby .join { display: none !important; }
body.has-set .finale .d-team { background: rgba(2, 6, 28, .86); }
body.has-set .finale .fmline { margin-top: 0; padding: calc(var(--u) * .4) calc(var(--u) * 1.4); border-radius: 99px; background: rgba(2, 6, 28, .78); }
.homelogo { display: block; width: min(100%, 420px); height: auto; margin: 0 auto 6px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }

/* ---------- launch intro ---------- */
.cfintro { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; overflow: hidden; transition: opacity .45s; cursor: pointer; }
.cfintro.out { opacity: 0; }
.cfintro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; transition: opacity .5s; }
.cfintro.logo video { opacity: 0; }
.cfintro-logo { position: relative; display: none; flex-direction: column; align-items: center; gap: 2vh; text-align: center; padding: 4vw; }
.cfintro.logo .cfintro-logo { display: flex; }
.cfintro-logo img { width: min(72vw, 110vh); height: auto; animation: logoin 1.5s cubic-bezier(.2, 1.3, .3, 1) both; filter: drop-shadow(0 0 4vh rgba(255, 190, 60, .55)); }
.cfintro-pre, .cfintro-post { margin: 0; font-family: var(--show); font-weight: 800; text-transform: uppercase; letter-spacing: .28em; color: var(--gold-hi); font-size: max(14px, 2.2vh); animation: fadeup 1s .2s both; }
.cfintro-post { color: #dbe3ff; animation-delay: 1.3s; }
.cfintro-skip { position: absolute; right: 3vw; bottom: 4vh; padding: 10px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .5); color: #fff; background: rgba(0, 0, 0, .5); font-weight: 700; font-size: 14px; }
@keyframes logoin { from { transform: scale(.55) rotate(-3deg); opacity: 0; filter: blur(12px) brightness(2.2); } 60% { filter: blur(0) brightness(1.5) drop-shadow(0 0 6vh rgba(255, 220, 120, .9)); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(1.5vh); } }
@media (prefers-reduced-motion: reduce) { .cfintro-logo img, .cfintro-pre, .cfintro-post { animation: none; } }

/* ---------- main menu, scores, credits ---------- */
.menuhead { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 22px; margin: 18px 0 10px; color: var(--gold-hi); text-align: center; }
.modes { display: grid; gap: 14px; margin-bottom: 14px; }
@media (min-width: 860px) { .modes { grid-template-columns: repeat(3, 1fr); } }
.card.mode { margin: 0; display: flex; flex-direction: column; }
.card.mode .who { font-size: 13px; font-weight: 700; color: var(--gold-hi); margin: -4px 0 8px; }
.card.mode .stack { margin-top: auto; }
.card.mode .note { margin: 10px 0 0; }
.tablewrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.cmp th, .cmp td { text-align: left; padding: 8px 10px; border-top: 1px solid #1c2f8a; vertical-align: top; }
.cmp thead th { border-top: 0; color: var(--gold-hi); font-size: 13px; }
.cmp tbody th { color: var(--mute); font-weight: 600; white-space: nowrap; }
.boards { display: grid; gap: 14px; }
@media (min-width: 760px) { .boards { grid-template-columns: repeat(3, 1fr); } }
.board3 h3 { margin: 0 0 6px; font-size: 14px; color: var(--gold-hi); }
.board3 ol { margin: 0; padding: 0; list-style: none; counter-reset: place; }
.board3 li { counter-increment: place; display: grid; grid-template-columns: 26px auto 1fr; column-gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid #1c2f8a; }
.board3 li::before { content: counter(place); font-family: var(--show); font-weight: 800; color: var(--gold); font-size: 18px; }
.board3 li b { font-family: var(--show); font-size: 20px; }
.board3 li small { grid-column: 2 / -1; color: var(--mute); font-size: 12px; }
.credits .credit { text-align: center; }
.credit .role { font-size: 13px; font-weight: 700; color: var(--gold-hi); margin: 0 0 6px; }
.credit .name { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1.05; margin: 6px 0 0; color: #fff; }
.credit .what { margin: 2px 0 0; color: #dbe3ff; }
.creditvideo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 10px; }

/* ---------- solo ---------- */
.solomsg { min-height: 2.8em; margin: 0 0 10px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--gold-hi); }
.soloclock { height: 10px; border-radius: 99px; background: #0a1957; overflow: hidden; }
.soloclock > div { height: 100%; width: 100%; background: var(--gold); border-radius: 99px; }
.soloclock.low > div { background: var(--red); }
.howsolo { margin: 0; padding-left: 20px; color: #e3e9ff; line-height: 1.45; }
.howsolo li { margin-bottom: 4px; }
.newhigh { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 22px; color: var(--gold-hi); margin: 0; }
div.ans { cursor: default; }
div.ans.late { background: linear-gradient(#dfe6ff, #b4c2f4); }
div.ans small { font-family: var(--text); text-transform: none; font-size: 11px; font-weight: 600; opacity: .7; }
.modepick { display: grid; gap: 8px; }
.modepick button { text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid #3552c9; background: #0d1f6e; color: #fff; }
.modepick button b { display: block; font-size: 16px; }
.modepick button span { font-size: 13px; color: #c9d4ff; }
.modepick button.on { border-color: var(--gold-hi); background: rgba(255, 217, 90, .16); }
.cpucard { margin: 0 0 14px; padding: 14px; border-radius: 14px; background: #06103a; border: 2px dashed var(--t2); text-align: center; font-weight: 700; font-size: 17px; }
.cpucard small { display: block; font-weight: 500; color: var(--mute); font-size: 13px; margin-top: 4px; }

/* difficulty picker: Rookie to GOAT */
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}
.levels .lvl{font:inherit;color:inherit;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px}
.levels .lvl b{font-size:15px;letter-spacing:.02em}
.levels .lvl small{font-size:11px;opacity:.7;text-align:center;line-height:1.2}
.levels .lvl.on{background:var(--gold,#f5c518);border-color:var(--gold,#f5c518);color:#0a1a3f}
.levels .lvl.on small{opacity:.85}
.levels .lvl:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (max-width:420px){.levels{grid-template-columns:repeat(3,1fr)}}

/* ---------- credits page ---------- */
.creditroll { text-align: center; padding: 28px 18px 30px; }
.crtitle { font-family: var(--show); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(30px, 7vw, 46px); line-height: 1; margin: 0 0 8px; color: var(--gold-hi); text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.crsec { margin-top: 26px; }
.crrule { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.crrule::before, .crrule::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, rgba(246,180,14,.75)); }
.crrule::after { background: linear-gradient(90deg, rgba(246,180,14,.75), transparent); }
.crrule span { white-space: normal; max-width: 75%; }
.page.credits > .crrule { margin: 26px 0 10px; font-size: 15px; }
.crname { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 6vw, 34px); line-height: 1.05; margin: 0; color: #fff; letter-spacing: .02em; }
.crsub { margin: 6px 0 0; color: #dbe3ff; font-size: 16px; }
.crsub.dim { margin-top: 2px; color: #aebbe6; font-size: 14px; }
.crsite { margin: 4px 0 0; color: var(--gold-hi); font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.crgap { height: 16px; }
.crsec:last-child .crsub { max-width: 30em; margin-left: auto; margin-right: auto; font-style: italic; line-height: 1.45; }
.fold.legal .in { font-size: 15px; line-height: 1.6; color: #dbe3ff; }
.fold.legal .in h3 { color: var(--gold-hi); font-size: 15px; margin: 20px 0 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.14); }
.fold.legal .in p { margin: 0 0 10px; }
.fold.legal .in ul { margin: 0 0 12px; padding-left: 20px; }
.fold.legal .in li { margin: 0 0 6px; }
.fold.legal .in li b { color: #fff; }
.fold.legal .updated { font-size: 13px; color: #aebbe6; font-style: italic; }

/* tutorial coach */
.coach { display: flex; gap: 10px; align-items: flex-start; background: rgba(246,180,14,.12); border: 2px solid rgba(246,180,14,.55); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; }
.coach p { margin: 0; line-height: 1.45; }
.coachtag { flex: none; background: var(--gold); color: #0a1a3f; font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; margin-top: 1px; }

/* main menu: tutorial bar and score tabs */
.learnbar { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; background: rgba(246,180,14,.12); border: 2px solid rgba(246,180,14,.55); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; }
.learnbar:hover { background: rgba(246,180,14,.2); }
.learnbar .go { margin-left: auto; font-size: 22px; color: var(--gold-hi); }
.scoretabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.boards.one { grid-template-columns: 1fr !important; }
@media (min-width: 760px) { .boards.one ol { columns: 2; column-gap: 28px; } .boards.one li { break-inside: avoid; } }

/* settings: add questions */
.steps3 { margin: 0 0 12px; padding-left: 20px; line-height: 1.5; }
.steps3 a { color: var(--gold-hi); font-weight: 700; }
.qpreview { margin-top: 14px; display: grid; gap: 10px; }
.qpreview h3 { margin: 0; }
.qproblems { background: rgba(220,60,60,.14); border: 1px solid rgba(220,60,60,.5); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.qproblems ul { margin: 4px 0 0; padding-left: 18px; }
.qitem { border: 1px solid #2a45b8; border-radius: 10px; padding: 10px 12px; }
.qitem .qq { margin: 0 0 6px; font-weight: 700; }
.qitem .qq small { display: block; font-weight: 400; color: var(--mute); font-size: 12px; }
.qitem ol { margin: 0; padding-left: 20px; font-size: 14px; }
.qitem li span { display: inline; }
.qitem li b { float: right; color: var(--gold-hi); }
.qitem li small { color: var(--mute); }
.qrow { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid #1c2f8a; }
.qrow p { margin: 0; }
.qrow small { color: var(--mute); font-size: 12px; }
.page.credits { max-width: 760px; }
.page.credits .homelogo { max-width: 360px; display: block; margin: 0 auto; }
.creditroll { padding: 34px 28px 36px; }
@media (min-width: 600px) { .crrule span { white-space: nowrap; max-width: none; } .crrule { font-size: 14px; } }

/* the way back to every game, and the developer credit at the foot of the menu pages */
.allgames { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .18); color: #e6ecff; font-size: 14px; font-weight: 700; text-decoration: none; }
.allgames:hover { border-color: var(--gold-hi); color: #fff; }
.devfoot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 34px 0 6px; }
.devfoot a { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(230, 236, 255, .6); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; opacity: .75; transition: opacity .2s; }
.devfoot a:hover, .devfoot a:focus-visible { opacity: 1; }
.devfoot img { width: 74px; height: auto; }
.devfoot .sitelink { letter-spacing: .04em; text-transform: none; font-size: 13px; }
.menumusic { position: fixed; right: 14px; bottom: 14px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(2, 8, 40, .82); border: 1px solid rgba(255, 217, 90, .55); color: #fff; font-size: 13px; font-weight: 700; }
.menumusic span { color: var(--gold-hi); font-size: 16px; line-height: 1; }
.menumusic.off { border-color: rgba(255, 255, 255, .25); color: #c9d2f5; }
.menumusic.off span { color: #9aa6d6; }

.howrun h2 { margin-top: 0; }
.runsteps { margin: 0; padding-left: 22px; display: grid; gap: 10px; line-height: 1.45; }

/* families on the player phones */
.famcard h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 8px; }
.famcard .score { font-family: var(--show); color: var(--gold-hi); }
.famcard.t1 { border-color: rgba(90, 200, 255, .6); }
.famcard.t2 { border-color: rgba(255, 120, 170, .6); }
.famlist { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-weight: 700; }
.famlist li.me { color: var(--gold-hi); }
.famlist li.open { color: rgba(255, 255, 255, .4); font-weight: 500; font-style: italic; }
.btn small { font-weight: 600; opacity: .8; margin-left: 6px; }
/* families on the host phone */
.famgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .famgrid { grid-template-columns: 1fr; } }
.famcol { border-radius: 12px; padding: 10px; background: rgba(0, 6, 36, .45); border: 1px solid rgba(255, 255, 255, .14); }
.famcol.t1 { border-color: rgba(90, 200, 255, .55); }
.famcol.t2 { border-color: rgba(255, 120, 170, .55); }
.famcol.aud { margin-top: 10px; }
.famcol b small { font-weight: 500; opacity: .7; margin-left: 4px; }
.famcol ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.famcol li { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 700; }
.famcol li.open { color: rgba(255, 255, 255, .38); font-weight: 500; font-style: italic; }
.famcol .ph { font-size: 10px; font-weight: 700; color: #9be9c8; text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; }
.famcol .mv { display: inline-flex; gap: 4px; }
.btn.mini { min-height: 30px; padding: 2px 8px; font-size: 12px; }
.famsize { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
/* the two families on the big screen, like the show's podiums */
.fams { display: flex; justify-content: center; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 1.5); flex-wrap: wrap; }
.fam { min-width: calc(var(--u) * 20); text-align: center; }
.fam .plate { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 2.2); padding: calc(var(--u) * .6) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1); color: #fff; background: linear-gradient(#1d3fae, #0b1c66); border: calc(var(--u) * .25) solid var(--gold); box-shadow: 0 0 calc(var(--u) * 2) rgba(246, 180, 14, .35); }
.fam.t1 .plate { background: linear-gradient(#1b78c9, #0b3a78); }
.fam.t2 .plate { background: linear-gradient(#c22a68, #6b0c33); }
.fam ol { list-style: none; margin: calc(var(--u) * .6) 0 0; padding: calc(var(--u) * .6) calc(var(--u) * 1); border-radius: calc(var(--u) * .8); background: rgba(2, 6, 28, .82); border: 1px solid rgba(255, 255, 255, .15); }
.fam li { font-weight: 800; font-size: calc(var(--u) * 1.7); line-height: 1.45; color: #fff; }
.fam li.open { color: rgba(255, 255, 255, .3); letter-spacing: .3em; }
.audcount { flex-basis: 100%; margin: 0; font-size: calc(var(--u) * 1.4); color: #dbe3ff; }
.audcount:empty { display: none; }
body.has-set .lobby .fams { position: absolute; right: calc(var(--u) * 1.5); bottom: calc(var(--u) * 1.5); margin: 0; gap: calc(var(--u) * 1.4); justify-content: flex-end; max-width: 50%; }
body.has-set .fam { min-width: calc(var(--u) * 16); }
body.has-set .fam .plate { font-size: calc(var(--u) * 1.7); }
body.has-set .fam li { font-size: calc(var(--u) * 1.35); }
body.has-set .audcount { text-align: right; padding: calc(var(--u) * .3) calc(var(--u) * 1); border-radius: 99px; background: rgba(2, 6, 28, .72); }
.famcard-host .row > .btn { flex: 1 1 100%; }
.famsize { flex-wrap: wrap; }