/* Forked from leopardy@fba2723 src/styles.css on 2026-11-06. Dillionaire's own from here on; not synced. */
/* The page's colours, type and layout (SPEC 10). */
:root {
  --night: #081008;
  --panel: #102018;
  --panel-2: #183028;
  --brass: #d8a848;
  --gold: #f8c840;
  --cream: #f8f0d8;
  --ink: #101008;
  --dim: #c0b8a0;
  --right-text: #40c868;
  --wrong-text: #f89090;
  --right-fill: #207838;
  --wrong-fill: #982828;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--night);
  color: var(--cream);
  font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
h1, h2, h3 { font-weight: 700; }
h3 { font-size: 1rem; margin: 20px 0 8px; }
a { color: var(--gold); }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 0.875rem; }
[hidden] { display: none !important; }

.top { height: 48px; display: flex; align-items: center; justify-content: space-between; max-width: 560px; width: 100%; margin: 0 auto; padding: 0 8px; }
.brand { margin: 0; line-height: 0; }
.menu { display: flex; }
.menu button { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.col { max-width: 560px; width: 100%; margin: 0 auto; flex: 1; }
.stage { height: 240px; display: grid; place-items: center; background: var(--night); }
@media (min-width: 860px) { .stage { height: 360px; } }
.stage canvas { display: block; image-rendering: pixelated; }
#panel { padding: 0 12px 12px; }

.btn { font: inherit; font-weight: 700; min-height: 48px; padding: 8px 12px; border-radius: 0; cursor: pointer; }
.btn:disabled { cursor: default; color: var(--dim); border-color: var(--dim); }
.primary { background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
.secondary { background: transparent; color: var(--cream); border: 2px solid var(--cream); }
.wide { width: 100%; }
.link { background: none; border: 0; color: var(--gold); font: inherit; text-decoration: underline; cursor: pointer; min-height: 48px; }

.title-view { text-align: center; }
.title-mark { margin: 12px 0 4px; line-height: 0; }
.tagline { font-weight: 700; margin: 8px 0 12px; }
.intro { text-align: left; }
.howto-head { font-size: 1rem; text-align: left; margin-bottom: 4px; }
.howto { text-align: left; padding-left: 20px; margin-top: 0; }
.stats-line, .countdown { color: var(--dim); }

.host-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; min-height: 44px; }
.host-name { color: var(--gold); font-size: 11px; letter-spacing: 1px; }
#host-line { margin: 0; font-size: 14px; }
.status-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--dim); }
.won { color: var(--gold); white-space: nowrap; }
#question { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 8px 0; }
.choices { display: grid; gap: 6px; }
.choice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px; text-align: left; font: inherit; font-weight: 600; color: var(--cream); background: var(--panel-2); border: 2px solid var(--brass); border-radius: 0; cursor: pointer; }
.choice:disabled { cursor: default; }
.choice .letter { color: var(--gold); font-weight: 800; }
.choice .text { flex: 1; }
.choice.locked { color: var(--ink); background: var(--gold); border-color: var(--gold); animation: locked 1.1s ease-in-out infinite; }
.choice.locked .letter { color: var(--ink); }
.choice.right { background: var(--right-fill); }
.choice.wrong { background: var(--wrong-fill); }
.choice.right.landed { animation: landed 0.5s ease-out; }
.choice.wrong.landed { animation: missed 0.4s ease-out; }
.choice.locked.stall { animation: throb 0.7s ease-in-out infinite; }
@keyframes locked { 50% { box-shadow: 0 0 14px 2px var(--gold); } }
@keyframes throb { 50% { transform: scale(1.03); box-shadow: 0 0 22px 6px var(--gold); } }
@keyframes landed { 40% { transform: scale(1.04); box-shadow: 0 0 18px 4px var(--right-text); } }
@keyframes missed { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
#question, .status-row { transition: opacity 0.3s; }
.lights-down #question, .lights-down .status-row { opacity: 0.55; }
.still *, .still *::before, .still *::after { animation: none !important; transition: none !important; }
.choice.dim { color: var(--dim); border-color: var(--panel-2); }
.bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.bar.one { grid-template-columns: 1fr; }

.headline { font-size: 28px; letter-spacing: 1px; margin: 8px 0; scroll-margin-top: 8px; }
.headline.top, .headline.out { color: var(--gold); }
.headline.fall { color: var(--wrong-text); }
.sub { margin: 0 0 8px; }
.winnings-label { margin: 12px 0 0; color: var(--dim); }
.winnings { font-size: 28px; font-weight: 800; color: var(--gold); margin: 0; }
.crowd-line { margin: 0 0 8px; }
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.plate { background: var(--panel-2); padding: 6px; text-align: center; }
.plate span { display: block; font-size: 12px; color: var(--dim); }
.plate.you b { color: var(--gold); }
.gap.ahead { color: var(--right-text); }
.gap.behind { color: var(--wrong-text); }
.hist { display: grid; gap: 2px; font-size: 12px; }
.bar-row { display: grid; grid-template-columns: 72px 1fr 56px; gap: 6px; align-items: center; }
.bar-k { text-align: right; color: var(--dim); }
.bar-track { height: 12px; background: var(--panel); }
.fill { display: block; height: 100%; background: var(--brass); }
.bar-row.you .fill { background: var(--gold); }
.bar-row.you .bar-k, .bar-row.you .bar-v { color: var(--gold); font-weight: 700; }
.recap { list-style: none; padding: 0; margin: 0; }
.recap-row { padding: 8px 0; border-bottom: 1px solid var(--panel-2); }
.recap-head { display: flex; justify-content: space-between; }
.recap-q, .recap-a, .recap-row .small { margin: 2px 0; }
.mark.right { color: var(--right-text); }
.mark.wrong { color: var(--wrong-text); }
.share { margin: 12px 0; }
.toast { margin-left: 8px; }
.more-games { border: 1px dashed var(--gold); padding: 8px; font-size: 14px; text-align: center; }

.panel-head { display: flex; align-items: center; justify-content: space-between; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-grid b { display: block; font-size: 20px; color: var(--gold); }
.setting { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.setting-links { display: flex; gap: 8px; margin-top: 8px; }
.err { text-align: center; padding: 16px 0; }
.foot { text-align: center; font-size: 14px; }
.foot p { margin: 0; }
.noscript { text-align: center; }