/* One ground (cobalt), one ink, one accent (lime) used on actions and the right answer.
   Flat colour, no gradients, no shadows at rest, no hairlines. */
:root {
  --ground: #1636e0;
  --step: #2a49ee;      /* one tone step up from the ground: panels */
  --step-2: #3d5af2;    /* a second step: hovered or pressed panels */
  --paper: #ffffff;
  --ink: #0b0f1f;
  --on-ground: #ffffff;
  --soft: #c9d2ff;      /* secondary text on the ground */
  --accent: #d9ff3d;
  --good: #16c47f;
  --bad: #ff4b3a;
  --radius: 14px;
  font-family: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  color: var(--on-ground);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--ground); min-height: 100dvh; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
.hidden { display: none !important; }
.soft { color: var(--soft); }
.center { text-align: center; }
.row { display: flex; gap: 12px; align-items: center; }
.grow { flex: 1; }
.stack > * + * { margin-top: 14px; }
h1, h2 { letter-spacing: -0.03em; line-height: 1.02; font-weight: 700; }
p { line-height: 1.45; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 1.05rem;
  background: var(--accent); color: var(--ink); transition: transform .08s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.quiet { background: var(--step); color: var(--on-ground); }
.btn.quiet:hover { background: var(--step-2); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.small { padding: 9px 16px; font-size: .95rem; }
.btn.block { width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.panel { background: var(--step); border-radius: var(--radius); padding: 18px; }
.input {
  width: 100%; padding: 14px 16px; border-radius: 12px; border: 0; background: var(--paper); color: var(--ink);
  font-size: 1.1rem; outline: none;
}
.input:focus { outline: 3px solid var(--accent); outline-offset: 0; }
.select { padding: 8px 10px; border-radius: 10px; border: 0; background: var(--paper); color: var(--ink); }

.av {
  --size: 48px;
  width: var(--size); height: var(--size); border-radius: 26%;
  display: inline-grid; place-items: center; flex: none;
  font-size: calc(var(--size) * .6); line-height: 1; background: var(--bg-av, #555);
}
.wordmark { font-weight: 800; letter-spacing: -0.04em; }

/* answer choices: white cards, told apart by the person on them */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 16px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 1.15rem; min-height: 130px; position: relative; text-align: center;
  word-break: break-word; transition: transform .1s, opacity .3s, background .2s;
}
.tile:active { transform: scale(.97); }
.tile.dim { opacity: .28; }
.tile.right, .tile.chosen { background: var(--accent); }
.tile .count { position: absolute; top: 10px; right: 12px; font-size: 1rem; font-weight: 600; }

.answer-card { background: var(--ink); color: var(--paper); border-radius: var(--radius); font-weight: 700; word-break: break-word; letter-spacing: -0.02em; }

.timerbar { height: 10px; border-radius: 99px; background: var(--step); overflow: hidden; }
.timerbar > i { display: block; height: 100%; background: var(--accent); width: 100%; transition: width .2s linear; }

.pop { animation: pop .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rise { animation: rise .4s ease both; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pop, .rise { animation: none; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 12px; max-width: calc(100% - 32px);
}