/* The page's colours, type and layout (SPEC 10). */
:root {
  --night: #100c28;
  --panel: #181838;
  --panel-2: #20204a;
  --blue: #1830b8;
  --blue-dark: #0c1458;
  --gold: #f8c840;
  --gold-dark: #c89020;
  --cream: #f8f0d8;
  --ink: #100c28;
  --right: #38c060;
  --wrong: #e04848;
  --pass: #9098b0;
  --fur: #e0a040;
}

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

/* ---- the column and the header (SPEC 10.1) ---- */
.col, .top { width: 100%; max-width: 560px; margin: 0 auto; }
.top { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.brand { margin: 0; line-height: 0; }
.brand canvas, .wordmark-big { image-rendering: pixelated; display: block; }
.menu { display: flex; gap: 4px; }
.menu button { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; border: 0; padding: 0; cursor: pointer; }
.menu canvas { image-rendering: pixelated; }

main.col { flex: 1; display: flex; flex-direction: column; }

/* ---- the stage (SPEC 7.1, 10.1) ---- */
.stage { position: relative; height: clamp(220px, 46svh, 420px); background: var(--night); overflow: hidden; touch-action: manipulation; flex: none; }
@media (min-width: 860px) { .stage { height: clamp(280px, 54svh, 500px); } }
.stage canvas { position: absolute; image-rendering: pixelated; }
.ov { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; pointer-events: none; overflow: hidden; }
#board-title { color: #f8f8f8; font-weight: 700; text-transform: uppercase; text-shadow: 1px 1px 0 #000; padding: 0 calc(var(--art-px, 2px) * 2); }
#board-title span { display: block; line-height: 1.05; }
#board-title .logo { font-size: calc(var(--art-px, 2px) * 5); letter-spacing: 0.08em; }
#board-title[data-mode="logo"] .cat, #board-title[data-mode="category"] .logo { display: none; }
#clue-card { color: #f8f8f8; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; text-transform: uppercase; line-height: 1.2; text-shadow: 2px 2px 0 #000; padding: 0 4px; }
#you-say { background: var(--cream); color: var(--ink); font-weight: 700; line-height: 1.15; border: 2px solid var(--ink); padding: 1px 4px; }

/* ---- the panel ---- */
#panel { padding: 0 0 8px; }
#play, #side { padding: 0 12px; }
.btn, button.link { font: inherit; color: var(--cream); }
.btn { min-height: 48px; padding: 0 20px; background: transparent; border: 2px solid var(--cream); border-radius: 0; cursor: pointer; }
.btn.primary { background: var(--gold); color: var(--ink); border-color: var(--ink); font-weight: 700; }
.btn.primary:disabled { opacity: 0.5; cursor: default; }
.btn.secondary { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn.wide { display: block; width: 100%; margin: 12px 0 0; }
button.link { background: none; border: 0; padding: 0 8px; min-height: 48px; text-decoration: underline; cursor: pointer; }

/* the title view (SPEC 10.3), sliding up as Play starts (SPEC 8.2) */
.title-view { text-align: center; padding: 12px 0 4px; }
.title-view.leaving { animation: title-out 0.3s ease-in forwards; }
@keyframes title-out { to { opacity: 0; transform: translateY(-24px); } }
.reduced .title-view.leaving { animation: none; opacity: 0; }
.title-mark { margin: 0; display: flex; justify-content: center; }
.tagline { margin: 6px 0 0; }
.howto { text-align: left; padding-left: 1.4em; margin: 16px 0 8px; }
.howto li { margin: 4px 0; }
.stats-line, .countdown { margin: 8px 0 0; text-align: center; color: var(--cream); }

/* the playing view (SPEC 10.4) */
.host-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; min-height: 56px; border-bottom: 2px solid var(--panel-2); }
.host-row .mini { image-rendering: pixelated; flex: none; }
.host-name { display: block; color: var(--gold); font-size: 0.75rem; letter-spacing: 0.1em; }
#host-line { margin: 0; }
.status-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 0.9375rem; }
.status-row .score { font-weight: 700; }
.status-row .score.neg { color: #f87878; }
.explainer { font-style: italic; margin: 0 0 4px; }
.actions { padding-bottom: 8px; }
.responses { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.resp { position: relative; min-height: 56px; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--cream); background: var(--blue); border: 2px solid var(--gold); border-radius: 0; padding: 6px 12px; cursor: pointer; }
.resp .key { display: none; flex: none; width: 1.4em; height: 1.4em; place-items: center; font-size: 0.8125rem; font-weight: 700; color: var(--ink); background: var(--gold); }
.kbd .resp .key { display: grid; }
.resp .q { flex: 1; }
.resp small { font-size: 0.8125rem; color: #d8d8f0; }
.resp .mark { font-weight: 700; font-size: 1.25rem; }
.resp:disabled { cursor: default; }
.resp.pressed { background: var(--blue-dark); }
.resp.right { background: #1f7a3a; border-color: var(--right); }
.resp.wrong { background: #9a2a2a; border-color: var(--wrong); }
.resp.dim, .btn.dim { opacity: 0.45; }
.btn.pressed { background: var(--panel-2); }
.pass-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.note { color: #c8c8e0; margin: 8px 0 0; font-size: 0.875rem; }
.pass-row .note { margin: 0; }

/* the wager panel (SPEC 10.5) */
.wager { text-align: center; padding-top: 8px; }
.dd-title { color: var(--gold); letter-spacing: 0.2em; margin: 4px 0; }
.wager p { margin: 4px 0; }
.wager-amount { color: var(--gold); font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
.wager-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.wager-row input { flex: 1; accent-color: var(--gold); min-height: 48px; }
.btn.step { width: 48px; height: 48px; padding: 0; font-size: 1.5rem; line-height: 1; }
.wager-quick { display: flex; gap: 8px; }
.wager-quick .btn { flex: 1; padding: 0 8px; }

/* the results (SPEC 10.7) */
.results { padding: 8px 0; }
.headline { font-size: 28px; letter-spacing: 0.06em; margin: 8px 0 4px; text-align: center; }
.headline.perfect { color: var(--gold); }
.headline:focus { outline: none; }
.headline:focus-visible { outline: 3px solid var(--cream); }
.sub { text-align: center; margin: 0; }
.recap { list-style: none; padding: 0; margin: 0; }
.recap-row { border-top: 1px solid var(--panel-2); padding: 8px 0; }
.recap-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.recap-value { color: var(--gold); }
.mark { font-weight: 700; }
.mark.right { color: var(--right); }
.mark.wrong { color: #f06060; }
.mark.pass { color: var(--pass); }
.dd-tag { font-size: 0.8125rem; color: var(--gold); }
.recap-clue { margin: 4px 0; font-size: 0.875rem; }
.recap-response { margin: 0 0 2px; }
.compare { margin-top: 16px; }
.crowd-line { margin: 0 0 8px; font-weight: 700; text-align: center; }
.got-it { margin: 0 0 2px; }
.got-it:has(span:empty) { margin: 0; }
.bar.you .fill { background: var(--gold); color: var(--ink); font-weight: 700; }
.share { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.share .btn { flex: none; margin: 0; width: auto; }
.toast { color: var(--gold); font-weight: 700; }
.more-games { margin: 16px 0 0; padding: 8px 12px; border: 2px dashed var(--gold); color: var(--gold); text-align: center; font-size: 0.875rem; }

/* the panels (SPEC 10.8) */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; }
.panel-head h2 { margin: 8px 0; }
.panel-head h2:focus { outline: none; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; }
.stat-grid div { display: flex; flex-direction: column; }
.stat-grid b { font-size: 1.25rem; color: var(--gold); }
.hist { display: flex; flex-direction: column; gap: 4px; }
.bar { display: flex; align-items: center; gap: 8px; }
.bar-k { width: 1em; text-align: right; }
.bar .fill { background: var(--blue); color: var(--cream); padding: 0 6px; font-size: 0.8125rem; min-width: 2em; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.setting select { font: inherit; min-height: 48px; background: var(--panel-2); color: var(--cream); border: 2px solid var(--cream); padding: 0 8px; }
.setting-links { display: flex; gap: 8px; flex-wrap: wrap; }

.err { text-align: center; padding: 24px 0; }

.foot { padding: 16px; text-align: center; font-size: 0.875rem; }
.foot p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; }
.foot a.studio { display: inline-flex; align-items: center; min-height: 48px; }

.noscript { text-align: center; padding: 16px; }

/* inline links are tap targets too (SPEC 14.8) */
.recap-row a, .more-games a { display: inline-flex; align-items: center; min-height: 48px; }