/* Step-Up Omaha's Millionaire: midnight blue, gold and silver. No web fonts, so it works with no internet. */
:root {
  --night: #020619;
  --navy: #071242;
  --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: 38%;
  width: 240vmax;
  height: 240vmax;
  margin: -120vmax 0 0 -120vmax;
  border-radius: 50%;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 50%, rgba(46, 104, 255, .45), transparent 30%),
    repeating-conic-gradient(from 0deg at 50% 50%, #06113f 0deg 4deg, #040b2c 4deg 9deg);
  animation: bgspin 90s linear infinite;
}
body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 38%;
  width: 120vmax;
  height: 120vmax;
  margin: -60vmax 0 0 -60vmax;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 0deg, rgba(0, 181, 200, .38), rgba(27, 59, 214, 0) 22%, rgba(255, 200, 61, .24) 45%, rgba(27, 59, 214, 0) 63%, rgba(111, 182, 255, .32) 80%, rgba(0, 181, 200, .38));
  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; }
.topbar .joincode { font-family: ui-monospace, Menlo, Consolas, monospace; color: #fff; background: rgba(255, 255, 255, .12); border-radius: 6px; padding: 1px 6px; font-size: 14px; letter-spacing: 1px; }
.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; }
/* ---------- 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; }

/* ---------- 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; } }


/* ======================================================================
   BIG SCREEN
   ====================================================================== */
body.display { overflow: hidden; --u: min(1vw, 1.7778vh); cursor: default; background: #01030f; }
body.display::before { display: none; }
#setwrap { position: fixed; inset: 0; z-index: 0; display: none; }
#setwrap canvas { width: 100%; height: 100%; display: block; }
body.has-set #setwrap { display: block; }
body.display:not(.has-set) { background: radial-gradient(circle at 50% 45%, #0d2a8a, #01030f 70%); }
.stage { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.stage > * { pointer-events: auto; }

/* top bar */
.d-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: calc(var(--u) * 1.6) calc(var(--u) * 2); }
.d-brand { display: flex; align-items: center; gap: calc(var(--u) * 1); text-shadow: 0 2px 8px #000; }
.d-brand img { width: calc(var(--u) * 6); height: calc(var(--u) * 6); filter: drop-shadow(0 0 calc(var(--u) * 1) rgba(80, 150, 255, .6)); }
.d-brand b { display: block; font-family: var(--show); text-transform: uppercase; letter-spacing: .14em; font-size: calc(var(--u) * 1.15); color: #cfe0ff; }
.d-brand span { display: block; font-family: var(--show); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: calc(var(--u) * 2.2); color: var(--gold-hi); line-height: 1; }
.d-brand small { display: block; font-size: calc(var(--u) * 1); color: #8fa6e6; margin-top: 2px; }
.d-lifelines { display: flex; gap: calc(var(--u) * 1); }
.ll { width: calc(var(--u) * 6.2); height: calc(var(--u) * 4.2); border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(ellipse at 50% 35%, #2a5cf0, #0a1a6a 70%); border: calc(var(--u) * .22) solid #a9c4ff; box-shadow: 0 0 calc(var(--u) * 1.4) rgba(80, 140, 255, .7), inset 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .25); position: relative; transition: opacity .5s, filter .5s; }
.ll svg { width: 52%; height: 52%; }
.ll .ll-t { font-family: var(--show); font-weight: 900; font-size: calc(var(--u) * 1.6); letter-spacing: .02em; }
.ll.used { opacity: .45; filter: grayscale(.8); }
.ll.used::after { content: ""; position: absolute; inset: 18% 10%; background: linear-gradient(to top right, transparent calc(50% - 2px), #ff4d5e calc(50% - 2px), #ff4d5e calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(to top left, transparent calc(50% - 2px), #ff4d5e calc(50% - 2px), #ff4d5e calc(50% + 2px), transparent calc(50% + 2px)); }

/* the answer clock */
.d-clock, .d-ring { position: relative; width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.d-clock { position: absolute; left: 50%; top: calc(var(--u) * 1.4); transform: translateX(-50%); }
.d-clock svg, .d-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.trk { fill: rgba(2, 8, 40, .8); stroke: rgba(255, 255, 255, .15); stroke-width: 7; }
.arc { fill: none; stroke: var(--gold-hi); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .2s linear; filter: drop-shadow(0 0 6px rgba(255, 210, 90, .8)); }
.d-clock b, .d-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--show); font-weight: 900; font-size: calc(var(--u) * 3.4); font-variant-numeric: tabular-nums; }
.d-clock.low .arc { stroke: #ff4d5e; }
.d-clock.low b { color: #ff9aa3; }

/* money ladder */
.d-ladder { position: absolute; right: calc(var(--u) * 2); top: 50%; transform: translate(130%, -50%); width: calc(var(--u) * 22); padding: calc(var(--u) * 1) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.4); background: linear-gradient(180deg, rgba(6, 16, 64, .92), rgba(2, 8, 36, .94)); border: 1px solid rgba(140, 180, 255, .45); box-shadow: 0 0 calc(var(--u) * 3) rgba(30, 80, 255, .35); transition: transform .8s cubic-bezier(.2, .9, .2, 1); }
body.ladder-on .d-ladder { transform: translate(0, -50%); }
.rung { display: grid; grid-template-columns: calc(var(--u) * 3) 1fr; align-items: center; padding: calc(var(--u) * .28) calc(var(--u) * .8); border-radius: calc(var(--u) * .6); font-family: var(--show); font-weight: 800; font-size: calc(var(--u) * 1.55); color: #e9b63b; letter-spacing: .03em; }
.rung .no { color: #7f93d6; font-size: .8em; }
.rung .amt { text-align: right; }
.rung.safe { color: #fff; }
.rung.won .amt { color: #9be9c8; }
.rung.won .no { color: #6fa98f; }
.rung.cur { background: linear-gradient(90deg, #f6b40e, #ffd95a); color: #1a1000; box-shadow: 0 0 calc(var(--u) * 1.6) rgba(255, 200, 60, .75); }
.rung.cur .no { color: #4a3000; }
.d-amount { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 7.5); padding: calc(var(--u) * .6) calc(var(--u) * 1.4); border-radius: 99px; background: rgba(2, 8, 40, .85); border: 1px solid rgba(255, 210, 90, .7); font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: calc(var(--u) * 1.3); color: #cfe0ff; letter-spacing: .06em; }
.d-amount b { color: var(--gold-hi); font-size: 1.35em; margin-left: .4em; }

/* question and answers */
.d-qa { position: absolute; left: 50%; bottom: calc(var(--u) * 2.4); transform: translateX(-50%); width: min(94vw, calc(var(--u) * 150)); }
.d-q, .opt { position: relative; background: linear-gradient(180deg, rgba(12, 30, 110, .96), rgba(3, 10, 46, .97)); border: calc(var(--u) * .2) solid #b8cdf5; border-radius: calc(var(--u) * 1.6); box-shadow: 0 0 calc(var(--u) * 2) rgba(40, 110, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .25); }
.d-q { padding: calc(var(--u) * 1.8) calc(var(--u) * 3.4); min-height: calc(var(--u) * 9); display: grid; place-items: center; margin-bottom: calc(var(--u) * 1.2); }
.d-q p { margin: 0; text-align: center; font-weight: 700; font-size: calc(var(--u) * 2.75); line-height: 1.25; color: #fff; text-wrap: balance; }
.d-q.long p { font-size: calc(var(--u) * 2.3); }
.d-opts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.1) calc(var(--u) * 1.6); }
.opt { display: flex; align-items: center; gap: calc(var(--u) * 1.2); min-height: calc(var(--u) * 6.2); padding: calc(var(--u) * .8) calc(var(--u) * 1.8) calc(var(--u) * .8) calc(var(--u) * 1); transition: background .35s, border-color .35s, box-shadow .35s, opacity .4s; }
.opt .lt { flex: none; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); transform: rotate(45deg); display: grid; place-items: center; background: linear-gradient(135deg, #ffe48a, #e09a00); border-radius: calc(var(--u) * .5); box-shadow: 0 0 calc(var(--u) * .8) rgba(255, 200, 60, .6); font-family: var(--show); font-weight: 900; font-size: calc(var(--u) * 2); color: #2a1600; }
.opt .tx { font-weight: 700; font-size: calc(var(--u) * 2.35); line-height: 1.2; color: #fff; }
.opt.empty .tx { opacity: 0; }
.opt.empty { opacity: .55; }
.opt.gone { opacity: .25; }
.opt.picked, .opt.locked { background: linear-gradient(180deg, #ffb52e, #c96c00); border-color: #ffe3a1; box-shadow: 0 0 calc(var(--u) * 3) rgba(255, 160, 30, .85); }
.opt.picked .tx, .opt.locked .tx { color: #1d0d00; }
.opt.locked { animation: lockpulse 1.6s ease-in-out infinite; }
@keyframes lockpulse { 50% { box-shadow: 0 0 calc(var(--u) * 5) rgba(255, 170, 40, 1); } }
.opt.right { background: linear-gradient(180deg, #2fe0a6, #0c8f62); border-color: #d6fff0; box-shadow: 0 0 calc(var(--u) * 4) rgba(40, 230, 160, .95); animation: rightflash .45s 5 alternate; }
.opt.right .tx { color: #002217; }
@keyframes rightflash { from { filter: brightness(1.5); } to { filter: brightness(.95); } }
.opt.wrongpick { background: linear-gradient(180deg, #ff5a68, #9c0f1d); border-color: #ffc9ce; box-shadow: 0 0 calc(var(--u) * 3) rgba(255, 60, 80, .8); }
.opt.wrongpick .tx { color: #fff; }
.opt .lt > * { transform: rotate(-45deg); }

/* panels in the middle of the screen */
.d-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 9) calc(var(--u) * 4) calc(var(--u) * 4); }
.d-badgewrap { position: relative; display: inline-block; width: calc(var(--u) * 30); height: calc(var(--u) * 30); animation: floaty 6s ease-in-out infinite; }
.d-bigbadge { width: 100%; height: 100%; display: block; animation: badgeglow 3.2s ease-in-out infinite alternate; }
@keyframes badgeglow {
  from { filter: brightness(1.04) drop-shadow(0 0 calc(var(--u) * 2) rgba(255, 196, 80, .55)) drop-shadow(0 0 calc(var(--u) * 5) rgba(60, 140, 255, .75)); }
  to { filter: brightness(1.16) drop-shadow(0 0 calc(var(--u) * 3) rgba(255, 210, 110, .85)) drop-shadow(0 0 calc(var(--u) * 7) rgba(80, 160, 255, .95)); }
}
/* a band of light that sweeps across the logo, only where the logo is */
.d-badgewrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 246, 214, .9) 50%, transparent 62%); background-size: 260% 100%; -webkit-mask: url(/img/badge.webp) center / contain no-repeat; mask: url(/img/badge.webp) center / contain no-repeat; mix-blend-mode: screen; animation: badgeshine 5.5s ease-in-out infinite; }
@keyframes badgeshine { 0% { background-position: 140% 0; } 50%, 100% { background-position: -40% 0; } }
/* the diamonds glinting one at a time */
.d-glints i { position: absolute; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); margin: calc(var(--u) * -1.7) 0 0 calc(var(--u) * -1.7); opacity: 0; background: radial-gradient(circle, #fff 0 8%, rgba(255, 255, 255, .0) 30%), linear-gradient(90deg, transparent 46%, #fff 50%, transparent 54%), linear-gradient(0deg, transparent 46%, #fff 50%, transparent 54%); filter: drop-shadow(0 0 calc(var(--u) * .6) rgba(255, 255, 255, .95)); animation: glint 3.8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes glint { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 80% { opacity: 1; transform: scale(1) rotate(25deg); } 90% { opacity: 0; transform: scale(.5) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .d-badgewrap, .d-bigbadge, .d-badgewrap::after, .d-glints i { animation: none; } }
@keyframes floaty { 50% { transform: translateY(calc(var(--u) * -1)) scale(1.02); } }
/* the hot-seat name plate: a lit bar with a gold rim, like the show's lower third */
.d-next { display: inline-block; position: relative; margin-top: calc(var(--u) * 1); padding: calc(var(--u) * 1) calc(var(--u) * 4) calc(var(--u) * 1.1); font-family: var(--show); font-weight: 900; text-transform: uppercase; font-size: calc(var(--u) * 3.6); color: #fff; line-height: 1.05; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); background: linear-gradient(180deg, #13307f 0%, #071645 55%, #030b2a 100%); border: calc(var(--u) * .28) solid #d9a944; border-radius: calc(var(--u) * 5); box-shadow: 0 0 0 calc(var(--u) * .25) rgba(10, 20, 60, .9), 0 0 calc(var(--u) * 3) rgba(255, 196, 70, .45), inset 0 calc(var(--u) * .5) calc(var(--u) * 1.4) rgba(120, 170, 255, .35); }
.d-next small { display: block; font-size: .36em; letter-spacing: .28em; color: #ffd772; margin-bottom: .35em; text-shadow: none; }
.d-next .d-lvl { color: #b9cdff; text-shadow: none; }
.d-join { display: flex; align-items: center; gap: calc(var(--u) * 2); text-align: left; background: rgba(2, 8, 40, .85); border: 1px solid rgba(140, 180, 255, .5); border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.4) calc(var(--u) * 2); }
.d-join .qr { width: calc(var(--u) * 12); height: calc(var(--u) * 12); padding: calc(var(--u) * .6); }
.d-join h3 { margin: 0 0 4px; font-family: var(--show); text-transform: uppercase; color: var(--gold-hi); font-size: calc(var(--u) * 2); }
.d-join p { margin: 0 0 6px; font-size: calc(var(--u) * 1.3); color: #dbe3ff; }
.d-join .addr { font-size: calc(var(--u) * 1.5); }
.d-voters { color: #9be9c8 !important; font-weight: 700; }
.d-code { font-family: var(--show); color: #fff; font-size: calc(var(--u) * 4.2); letter-spacing: calc(var(--u) * .3); line-height: 1.1; margin: 2px 0 4px; text-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 200, 60, .55); }
.d-code.small { font-size: calc(var(--u) * 2.4); }
.d-title { margin: 0; font-family: var(--show); font-weight: 900; text-transform: uppercase; font-size: calc(var(--u) * 6); line-height: 1; color: #fff; text-shadow: 0 0 calc(var(--u) * 3) rgba(80, 150, 255, .9), 0 4px 0 #0a1a6a; }
.d-title small { display: block; font-size: .32em; letter-spacing: .32em; color: var(--gold-hi); margin-bottom: .4em; }
.d-who { display: block; font-size: .4em; letter-spacing: .08em; margin-top: .6em; color: #cfe0ff; }
.d-rules { margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 5); max-width: calc(var(--u) * 80); text-align: left; background: rgba(2, 8, 40, .82); border: 1px solid rgba(140, 180, 255, .45); border-radius: calc(var(--u) * 1.4); }
body.ladder-on .d-rules { margin-right: calc(var(--u) * 24); }
.d-rules li { font-size: calc(var(--u) * 1.9); line-height: 1.35; margin: 0 0 calc(var(--u) * .8); color: #e6ecff; }
.d-msg { position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); text-align: center; font-family: var(--show); font-weight: 900; font-size: calc(var(--u) * 9); line-height: 1; color: var(--gold-hi); text-shadow: 0 0 calc(var(--u) * 3) rgba(255, 190, 40, .9), 0 6px 0 #5a3600; animation: msgin .9s cubic-bezier(.2, 1.4, .3, 1) both; }
body.ladder-on .d-msg { right: calc(var(--u) * 24); }
.d-msg small { display: block; font-size: .26em; letter-spacing: .3em; text-transform: uppercase; color: #dbe6ff; text-shadow: 0 2px 8px #000; margin-bottom: .3em; }
body.reveal-end .d-msg { top: 30%; }
@keyframes msgin { from { opacity: 0; transform: translateY(-50%) scale(.6); } }

/* lifeline overlays */
.d-overlay { position: absolute; left: 50%; top: calc(var(--u) * 10); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.6) calc(var(--u) * 3); border-radius: calc(var(--u) * 1.6); background: rgba(10, 4, 40, .88); border: 1px solid rgba(200, 160, 255, .6); box-shadow: 0 0 calc(var(--u) * 4) rgba(140, 70, 255, .5); }
.d-life-head { font-family: var(--show); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: #e6d2ff; font-size: calc(var(--u) * 2.4); }
.d-overlay p { margin: 0; color: #e6ecff; font-size: calc(var(--u) * 1.5); }
.d-ring { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.d-ring b { font-size: calc(var(--u) * 6); }
#phone .arc { stroke: #c79bff; filter: drop-shadow(0 0 6px rgba(200, 150, 255, .9)); }
.d-audvote { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.d-audvote .qr { width: calc(var(--u) * 13); height: calc(var(--u) * 13); padding: calc(var(--u) * .6); }
.d-audbig { font-family: var(--show); font-weight: 900; text-transform: uppercase; font-size: calc(var(--u) * 3) !important; color: #fff !important; margin-bottom: calc(var(--u) * .6) !important; }
.d-audvote .addr { font-size: calc(var(--u) * 1.5); }
.d-audcount { margin-top: calc(var(--u) * .8) !important; }
.d-audcount b { color: var(--gold-hi); font-size: 1.3em; }
.d-bars { display: flex; align-items: flex-end; gap: calc(var(--u) * 2); height: calc(var(--u) * 20); padding-top: calc(var(--u) * 1); position: relative; }
.d-bars .bar { width: calc(var(--u) * 7); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.d-bars .fill { width: 100%; background: linear-gradient(180deg, #ffe48a, #e09a00); border-radius: calc(var(--u) * .5) calc(var(--u) * .5) 0 0; box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 200, 60, .7); animation: grow 1.6s cubic-bezier(.2, .9, .2, 1) both; transform-origin: bottom; max-height: calc(100% - calc(var(--u) * 6)); }
@keyframes grow { from { transform: scaleY(0); } }
.d-bars .pct { font-family: var(--show); font-weight: 900; font-size: calc(var(--u) * 2.1); color: #fff; }
.d-bars .lt { font-family: var(--show); font-weight: 900; font-size: calc(var(--u) * 2.2); color: var(--gold-hi); }
.d-bars .bar.gone { opacity: .25; }
.d-audtotal { position: absolute; right: 0; top: 0; font-size: calc(var(--u) * 1.2) !important; color: #b9a6e6 !important; }

/* the end of a run */
#final { gap: calc(var(--u) * 1); }
.d-finalname { font-family: var(--show); font-weight: 900; text-transform: uppercase; font-size: calc(var(--u) * 4); color: #fff; text-shadow: 0 0 calc(var(--u) * 2) rgba(80, 150, 255, .9); }
.d-finalwon { font-family: var(--show); font-weight: 900; font-size: calc(var(--u) * 12); line-height: 1; color: var(--gold-hi); text-shadow: 0 0 calc(var(--u) * 4) rgba(255, 190, 40, .9), 0 8px 0 #5a3600; animation: msgin 1s cubic-bezier(.2, 1.4, .3, 1) both; }
.d-finalhow { font-size: calc(var(--u) * 2); color: #dbe6ff; }
.d-finalrank { font-weight: 800; font-size: calc(var(--u) * 2); color: #9be9c8; }
body[data-mood="million"] .d-finalwon, body[data-mood="million"] .d-msg { animation: msgin 1s cubic-bezier(.2, 1.4, .3, 1) both, shimmer 1.2s 1s ease-in-out infinite alternate; }
@keyframes shimmer { to { filter: brightness(1.4) drop-shadow(0 0 calc(var(--u) * 3) #fff3c4); } }

.soundgate { position: fixed; inset: 0; z-index: 150; display: grid; place-items: start center; padding-top: 3vh; pointer-events: none; }
.soundgate > div { pointer-events: auto; background: var(--gold); color: var(--ink); font-weight: 800; padding: 12px 22px; border-radius: 99px; box-shadow: 0 6px 30px rgba(0, 0, 0, .6); cursor: pointer; }
.offline { position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%); z-index: 160; background: var(--red); color: #fff; padding: 10px 18px; border-radius: 99px; font-weight: 800; }
.qr { background: #fff; border-radius: 10px; }
.qr svg { width: 100%; height: 100%; display: block; }
.addr { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--gold-hi); word-break: break-all; }

/* ======================================================================
   PHONES: host, audience vote, solo, menu, settings
   ====================================================================== */
.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; }
.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); }
.homelogo { display: block; width: min(100%, 420px); height: auto; margin: 0 auto 6px; filter: drop-shadow(0 6px 24px rgba(40, 110, 255, .55)); }
.newhigh { font-family: var(--show); font-weight: 800; text-transform: uppercase; font-size: 22px; color: var(--gold-hi); margin: 0 0 10px; }
details.fold { border: 1px solid #22379e; border-radius: 14px; background: rgba(4, 11, 46, .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; }
.tag { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--gold-hi); margin: 0 0 6px; }
.host .say .tag { color: #9a5b00; }
.nextbox { margin: 0 0 14px; }
.ladmini { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; margin: 0 0 12px; }
.ladmini span { text-align: center; font-size: 11px; font-weight: 800; padding: 4px 0; border-radius: 6px; background: #0a1957; color: #7f93d6; border: 1px solid #22379e; }
.ladmini span.safe { border-color: #cfe0ff; color: #fff; }
.ladmini span.won { background: #0d5c45; color: #b8ffe5; border-color: #2fe0a6; }
.ladmini span.cur { background: var(--gold); color: var(--ink); border-color: var(--gold-hi); }
.secret { background: #050c33; border: 2px dashed #4a63c9; border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; }
.secret .q { font-weight: 700; font-size: 17px; margin: 0 0 10px; line-height: 1.35; }
.hopts { display: grid; gap: 6px; }
.hopt { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; background: #0a1957; }
.hopt b { color: var(--gold-hi); }
.hopt span { flex: 1; }
.hopt em { font-style: normal; font-size: 11px; font-weight: 800; color: #06241a; background: var(--ok); border-radius: 99px; padding: 2px 8px; }
.hopt.right { outline: 2px solid var(--ok); }
.hopt.gone { opacity: .35; text-decoration: line-through; }
.hopt.pick { background: #6b3c00; }
.hopt.hidden span { opacity: .55; }
.pickgrid { display: grid; gap: 8px; }
.pickbtn { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 56px; padding: 10px 12px; border-radius: 12px; background: #10267a; border: 1px solid #3552c9; color: #fff; font-size: 16px; font-weight: 600; }
.pickbtn b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--gold); color: var(--ink); }
.pickbtn span { flex: 1; }
.pickbtn em { font-style: normal; color: var(--ok); font-weight: 900; font-size: 20px; }
.pickbtn.right { border-color: var(--ok); }
.pickbtn.gone { opacity: .35; }
.pickcard .picked { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.pickcard .picked b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--gold); color: var(--ink); margin-right: 6px; }
.liferow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.lifebtn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: radial-gradient(ellipse at 50% 30%, #2a5cf0, #0a1a6a 75%); border: 2px solid #a9c4ff; color: #fff; }
.lifebtn b { font-family: var(--show); font-weight: 900; font-size: 18px; text-transform: uppercase; }
.lifebtn small { font-size: 11px; opacity: .85; }
.lifebtn.used { background: #0a1240; border-color: #2a3570; opacity: .55; }
.hint { border-width: 2px; }
.hint.good { border-color: var(--ok); }
.hint.bad { border-color: #ff7a85; }
.hint p { font-size: 18px; margin: 0; }
.warnbox { border-color: #ff7a85; }
.clock.big .secs { font-size: 54px; }
.previewbox { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.previewbox iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; border: 0; transform-origin: 0 0; transform: scale(var(--k, .26)); }
.host { padding-top: 12px; }

/* audience vote */
.vote .q { font-size: 20px; font-weight: 700; line-height: 1.35; margin: 0 0 12px; }
.votegrid { display: grid; gap: 10px; }
.votebtn { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 66px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, #13308f, #071447); border: 2px solid #9fb8f0; color: #fff; font-size: 18px; font-weight: 700; }
.votebtn b { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, #ffe48a, #e09a00); color: #2a1600; font-size: 20px; }
.votebtn.mine { background: linear-gradient(180deg, #ffb52e, #c96c00); border-color: #ffe3a1; color: #1d0d00; }
.votebtn.gone { opacity: .25; }
.votewait { text-align: center; padding: 26px 10px; }
.votewait .big { font-family: var(--show); font-weight: 900; text-transform: uppercase; font-size: 28px; color: var(--gold-hi); margin: 0 0 6px; }
.voteclock { font-family: var(--show); font-weight: 900; font-size: 40px; color: var(--gold-hi); text-align: center; margin: 0 0 8px; }

/* menu */
.menutitle { text-align: center; font-family: var(--show); font-weight: 900; text-transform: uppercase; font-size: 30px; letter-spacing: .04em; margin: 4px 0 2px; color: #fff; text-shadow: 0 0 18px rgba(80, 150, 255, .8); }
.menutitle small { display: block; font-size: 14px; letter-spacing: .3em; 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; } }
.rulelist { margin: 0; padding-left: 20px; }
.rulelist li { margin: 0 0 8px; line-height: 1.45; color: #e3e9ff; }

/* solo */
body.solo #setwrap { position: fixed; inset: 0; z-index: 0; display: none; }
body.solo.has-set #setwrap { display: block; }
body.solo.has-set::before { display: none; }
body.solo #app { position: relative; z-index: 1; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #1c2f8a; font-size: 15px; }
.switch input { width: 22px; height: 22px; flex: none; accent-color: var(--gold); }
.sgame { max-width: 760px; margin: 0 auto; padding: 0 14px 40px; min-height: 100vh; display: flex; flex-direction: column; }
.sbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.sbar .where { flex: 1; font-family: var(--show); font-weight: 800; text-transform: uppercase; color: #cfe0ff; font-size: 16px; letter-spacing: .04em; text-shadow: 0 2px 6px #000; }
.sbar .where b { color: var(--gold-hi); font-size: 1.35em; margin-left: 4px; }
.sbar .where small { display: block; font-family: var(--text); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; color: #9fb0e8; }
.sclock { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--show); font-weight: 900; font-size: 24px; color: var(--gold-hi); background: rgba(2, 8, 40, .85); border: 3px solid var(--gold); }
.sclock.low { color: #ff9aa3; border-color: #ff4d5e; }
.sladder { background: rgba(2, 8, 36, .94); border: 1px solid rgba(140, 180, 255, .45); border-radius: 14px; padding: 8px 10px; margin: 0 0 12px; columns: 1; }
.sladder .rung { font-size: 16px; padding: 3px 10px; }
.sq { margin: auto 0 12px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(12, 30, 110, .95), rgba(3, 10, 46, .96)); border: 2px solid #b8cdf5; box-shadow: 0 0 24px rgba(40, 110, 255, .45); }
.sq p { margin: 0; text-align: center; font-weight: 700; font-size: clamp(19px, 3.2vw, 26px); line-height: 1.3; }
.sopts { display: grid; gap: 10px; margin: 0 0 14px; }
@media (min-width: 640px) { .sopts { grid-template-columns: 1fr 1fr; } }
.sopt { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 62px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(12, 30, 110, .95), rgba(3, 10, 46, .96)); border: 2px solid #b8cdf5; color: #fff; font-size: 18px; font-weight: 700; transition: background .3s, box-shadow .3s; }
.sopt:disabled { opacity: 1; cursor: default; }
.sopt b { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #ffe48a, #e09a00); color: #2a1600; }
.sopt.gone { opacity: .25 !important; }
.sopt.picked, .sopt.locked { background: linear-gradient(180deg, #ffb52e, #c96c00); border-color: #ffe3a1; color: #1d0d00; box-shadow: 0 0 26px rgba(255, 160, 30, .8); }
.sopt.locked { animation: lockpulse 1.6s ease-in-out infinite; --u: 6px; }
.sopt.right { background: linear-gradient(180deg, #2fe0a6, #0c8f62); border-color: #d6fff0; color: #002217; box-shadow: 0 0 30px rgba(40, 230, 160, .9); animation: rightflash .45s 5 alternate; }
.sopt.wrongpick { background: linear-gradient(180deg, #ff5a68, #9c0f1d); border-color: #ffc9ce; }
.sfinal .picked { font-size: 20px; font-weight: 700; }
.sfinal .picked b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--gold); color: var(--ink); margin-right: 6px; }
.smsg { text-align: center; font-weight: 800; font-size: 20px; margin: 0 0 12px; text-shadow: 0 2px 8px #000; }
.smsg.big { font-family: var(--show); text-transform: uppercase; font-size: 30px; color: var(--gold-hi); }
.why p { margin: 0; }
.friend p { margin: 0; font-size: 18px; }
.sbars { display: flex; align-items: flex-end; justify-content: center; gap: 16px; height: 150px; }
.sbars .bar { width: 48px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.sbars .fill { width: 100%; max-height: calc(100% - 44px); background: linear-gradient(180deg, #ffe48a, #e09a00); border-radius: 6px 6px 0 0; animation: grow 1.4s cubic-bezier(.2, .9, .2, 1) both; transform-origin: bottom; }
.sbars .pct { font-weight: 800; }
.sbars .lt { font-weight: 900; color: var(--gold-hi); }
.sbars .bar.gone { opacity: .25; }
.bigwin { font-family: var(--show); font-weight: 900; font-size: 64px; line-height: 1; color: var(--gold-hi); text-shadow: 0 0 24px rgba(255, 190, 40, .8); margin: 6px 0 12px; }
body.solo { --u: 7px; }
.qitem li.ok span { color: var(--ok); font-weight: 700; }
#final { background: radial-gradient(ellipse 55% 45% at 50% 52%, rgba(1, 3, 15, .78), rgba(1, 3, 15, .35) 70%, transparent); }
.d-finalhow, .d-finalrank { text-shadow: 0 2px 10px #000, 0 0 2px #000; }
body.reveal-end .d-msg { background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(1, 3, 15, .7), transparent 75%); padding: 2vh 0; }

/* ---------- round 2: menu button, levels, live lifelines, suspense ---------- */
.d-menu { position: fixed; left: 16px; bottom: 16px; z-index: 170; padding: 10px 16px; border-radius: 99px; background: rgba(2, 8, 40, .9); border: 1px solid rgba(160, 190, 255, .6); color: #fff; font-weight: 800; text-decoration: none; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none; }
body.pointer .d-menu, .d-menu:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
body.display.pointer { cursor: default; }
body.display:not(.pointer) { cursor: none; }
.d-lvl { display: block; margin-top: .5em; font-size: .32em; letter-spacing: .25em; color: #9fc0ff; }
.d-clock.paused .arc { stroke: #9fb0e8; filter: none; }
.d-clock.paused b { color: #9fb0e8; }
.d-dial { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1); }
.d-phoneicon { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle, #8a3dff, #3b1180); box-shadow: 0 0 0 0 rgba(200, 150, 255, .7); animation: ringing 1.5s ease-out infinite; }
.d-phoneicon svg { width: 50%; height: 50%; animation: wiggle 1.5s ease-in-out infinite; }
@keyframes ringing { 0% { box-shadow: 0 0 0 0 rgba(200, 150, 255, .75); } 100% { box-shadow: 0 0 0 calc(var(--u) * 5) rgba(200, 150, 255, 0); } }
@keyframes wiggle { 0%, 40%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20% { transform: rotate(14deg); } }
.d-calling { font-family: var(--show); font-weight: 900; text-transform: uppercase; font-size: calc(var(--u) * 3.2) !important; color: #fff !important; }
.d-talk { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1); }
#aud.open { border-color: #ffd95a; box-shadow: 0 0 calc(var(--u) * 5) rgba(255, 200, 60, .55); animation: votepulse 1s ease-in-out infinite alternate; }
@keyframes votepulse { to { box-shadow: 0 0 calc(var(--u) * 7) rgba(255, 200, 60, .85); } }
#aud.open .d-audbig { color: var(--gold-hi) !important; }
.d-bars .bar .fill { animation-delay: var(--d, 0s); }
.d-bars .bar .pct { animation: fadeup .5s both; animation-delay: calc(var(--d, 0s) + 1s); }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } }
.opt.suspense { animation: lockpulse .9s ease-in-out infinite; }
body.suspense .d-q { filter: brightness(.75); transition: filter 1s; }
body.suspense .opt:not(.suspense) { opacity: .45; transition: opacity 1s; }
body.beat .opt.suspense { animation: beat .35s ease-out; }
@keyframes beat { 0% { transform: scale(1); } 30% { transform: scale(1.035); filter: brightness(1.35); } 100% { transform: scale(1); } }
.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; }
.levels .lvl small { font-size: 11px; opacity: .75; text-align: center; line-height: 1.2; }
.levels .lvl.on { background: var(--gold); border-color: var(--gold); color: #0a1a3f; }
@media (max-width: 520px) { .levels { grid-template-columns: repeat(3, 1fr); } }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.clock-ctl { background: rgba(4, 11, 46, .92); border: 1px solid #22379e; border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
.clock-ctl .clock { margin-bottom: 10px; }
.clock-ctl.paused .clock { border-color: #9fb0e8; }
.lifecard { border-color: #c79bff; }
.lifecard .tag { color: #e0c8ff; }
.say .teach .src { display: block; margin-top: 6px; font-size: 12px; color: #8a6a1c; }
.pollbox { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pollbox .qr { width: 140px; height: 140px; padding: 8px; flex: none; }
.bigcount { font-family: var(--show); font-weight: 900; font-size: 56px; color: var(--gold-hi); text-align: center; line-height: 1; margin: 6px 0; }
.d-overlay { top: calc(var(--u) * 5.2); padding: calc(var(--u) * 1.2) calc(var(--u) * 3); gap: calc(var(--u) * .8); }
.d-phoneicon { width: calc(var(--u) * 7); height: calc(var(--u) * 7); }
.d-ring { width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.d-ring b { font-size: calc(var(--u) * 4.6); }
#app .page.host { padding-bottom: 8px; }

/* 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; }

.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; }
.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); }
.coachcard { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: rgba(246, 180, 14, .14); border: 2px solid rgba(246, 180, 14, .6); }
.coachcard .tag { margin: 0 0 4px; color: var(--gold-hi); }
.coachcard p { margin: 0; line-height: 1.45; }
.howrun h2 { margin-top: 0; }
.runsteps { margin: 0; padding-left: 22px; display: grid; gap: 10px; line-height: 1.45; }

/* the hot-seat line */
.seatcard { margin-bottom: 12px; }
.seatcard .tag { color: var(--gold-hi); }
.seatcard.on { border-color: var(--gold); box-shadow: 0 0 24px rgba(255, 196, 60, .35); text-align: center; }
.hotline ol { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 6px; }
.hotline li { display: flex; align-items: center; gap: 6px; }
.hotline li span { flex: 1; font-weight: 700; }
.hotline .btn.small { min-height: 34px; padding: 4px 10px; font-size: 13px; width: auto; }