.whatsit { max-width: 64rem; }
.whatsit [hidden] { display: none !important; }

.bar { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bar h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; flex: 1; }
.bar .crumb { font-size: 0.8rem; color: var(--ink-soft); width: 100%; }
.room { font-family: var(--font-mono); font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
.room .label { color: var(--ink-soft); }
.room .code { font-size: 1.15rem; letter-spacing: 0.12em; }

/* Players and score on one line under the title. */
.who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin: -0.75rem 0 1rem; font-size: 0.9rem; color: var(--ink-soft); }
.players { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.player.current { font-weight: 700; color: var(--accent); }
.player.current::before { content: '→ '; }
.you { font-weight: 400; color: var(--ink-soft); }
.tally { font-family: var(--font-mono); }

/*
  The board (turn, questions left, what we know) stays in view: a sticky
  right-hand column on wide screens, and stuck to the top of the screen on
  phones while the question list scrolls underneath.
*/
.layout { display: grid; gap: 1.25rem; align-items: start; }
.play { min-width: 0; }
.board {
  position: sticky; top: 0; z-index: 2;
  padding: 0.75rem 1rem 0.85rem; border-radius: 0 0 var(--radius) var(--radius);
  background: var(--paper); border: 2px solid var(--rule); border-top: 0;
  box-shadow: var(--shadow);
  max-height: 48vh; overflow-y: auto; overscroll-behavior: contain;
}
@media (min-width: 52rem) {
  .layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; }
  .board { grid-column: 2; grid-row: 1; top: 1rem; max-height: calc(100vh - 2rem); border-top: 2px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; }
  .play { grid-column: 1; grid-row: 1; }
}
.board h2 { font: 600 0.75rem var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0.6rem 0 0.4rem; }

.status { margin-bottom: 0.5rem; }
.turn { margin: 0 0 0.35rem; font-weight: 700; min-height: 1.5em; }
.turn.mine { color: var(--accent); }
.turn.urgent, .turn.flash { color: var(--bad); }
.timer { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.timer-fill { height: 100%; background: var(--accent); transform-origin: left; transition: transform 0.25s linear; }
.timer.urgent .timer-fill { background: var(--bad); }

/* One sweet per question; used ones go pale. */
.meter { display: flex; align-items: center; gap: 0.4rem 0.75rem; flex-wrap: wrap; }
.dots { display: grid; gap: 0.3rem; flex: 1 1 9rem; max-width: 13rem; }
.dot { aspect-ratio: 1; border-radius: 50%; background: var(--candyfloss); box-shadow: inset -2px -2px 0 rgb(0 0 0 / 0.08); transition: opacity 0.3s, transform 0.3s; }
.dot:nth-child(4n+2) { background: var(--lilac); }
.dot:nth-child(4n+3) { background: var(--mint); }
.dot:nth-child(4n) { background: var(--peach); }
.dot.used { opacity: 0.2; transform: scale(0.7); }
.left { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 0.6rem; align-items: start; }
.facts-row { display: contents; }
.facts-row > .ans { justify-self: start; margin-top: 0.1rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fact { font-size: 0.85rem; font-weight: 600; line-height: 1.3; padding: 0.1rem 0.55rem; border-radius: 0.6rem; background: var(--meringue); border: 1.5px solid var(--rule); }
.facts-row.n .fact, .facts-row.guess .fact { color: var(--ink-soft); }
.facts-row.guess .fact { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.facts .empty { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

.result { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; border: 2px solid; }
.result p { margin: 0; font-weight: 700; font-size: var(--step-1); }
.result.won { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--mint) 25%, var(--paper)); }
.result.lost { border-color: var(--bad); color: var(--bad); background: var(--paper); }

.moves { display: grid; gap: 1.25rem; margin-bottom: 1.75rem; }
.moves label { display: block; font-family: var(--font-display); font-weight: 500; color: var(--ink-soft); margin-bottom: 0.35rem; }
.guess .row input { flex: 1; min-width: 0; }
.guess .row button { flex: 0 0 auto; }

.ask {
  padding: 1rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--lilac) 18%, var(--paper));
  border: 2px solid color-mix(in srgb, var(--lilac) 50%, var(--paper));
}
.ask.closed { opacity: 0.5; }
.ask input { width: 100%; }
.routes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0; }
.chip { font-size: 0.8rem; padding: 0.2rem 0.65rem; }
.chip[aria-pressed="true"] { background: var(--candyfloss); border-color: var(--candyfloss); color: #3a1636; }
.results { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow-y: auto; display: grid; gap: 0.3rem; overscroll-behavior: contain; }
.q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  text-align: left; border-radius: 0.9rem; padding: 0.5rem 0.8rem; font-family: var(--font-body); font-weight: 600;
}
.q:disabled { opacity: 0.6; }
.results .more { font-size: 0.85rem; color: var(--ink-soft); padding: 0.3rem 0.2rem; }

.ans { flex: 0 0 auto; font: 600 0.8rem var(--font-display); padding: 0.1rem 0.6rem; border-radius: 999px; white-space: nowrap; color: var(--ink); }
.ans.y, .ans.right { background: color-mix(in srgb, var(--mint) 70%, transparent); }
.ans.n, .ans.wrong { background: color-mix(in srgb, var(--candyfloss) 40%, transparent); }
.ans.s { background: color-mix(in srgb, var(--peach) 70%, transparent); }
.ans.x { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); }

.review h2 { margin: 0 0 0.4rem; font-size: var(--step-1); }
.review-hint { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 0.75rem; }
.history { margin: 0; padding: 0; list-style: none; }
.entry {
  display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center; gap: 0.15rem 0.5rem;
  padding: 0.5rem 0; border-bottom: 2px dotted var(--rule);
}
.entry::before { content: attr(data-n); grid-row: span 2; align-self: start; padding-top: 0.15rem; color: var(--ink-soft); font: 0.8rem var(--font-mono); }
.entry .text { font-weight: 600; }
.entry .ans { justify-self: end; }
.entry .by { grid-column: 2; color: var(--ink-soft); font-size: 0.8rem; }
.entry .flag { grid-column: 3; justify-self: end; font-size: 0.75rem; padding: 0.15rem 0.65rem; }
.entry .flag[aria-pressed="true"] { border-color: var(--bad); color: var(--bad); }
.history .empty { color: var(--ink-soft); padding: 0.4rem 0; }

.how { margin-top: 2rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 36rem; }
.how summary { cursor: pointer; font-family: var(--font-display); font-weight: 500; }