@import url('/fonts/wdth.css');

/* ---------- tokens ---------- */
:root {
  --ink: #101a3d;
  --ink-2: #1a2756;
  --ink-3: #26346b;
  --chalk: #f4f3ff;
  --muted: #aab1d8;
  --tape: #ffd23f;
  --red: #f0443a;
  --blue: #3d6bff;
  --teal: #17b39f;
  --good: #2fd27a;
  --bad: #f0443a;

  --a: var(--tape);
  --b: var(--blue);
  --c: var(--red);
  --d: var(--teal);

  --font: 'Archivo Variable', 'Arial Narrow', system-ui, sans-serif;
  --radius-s: 6px;
  --radius-m: 12px;

  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }

html, body { height: 100%; margin: 0; }
body {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.05; font-weight: 850; font-stretch: 125%; letter-spacing: -0.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--tape); outline-offset: 3px; }

/* ---------- layout primitives ---------- */
.screen { min-height: 100%; display: flex; flex-direction: column; }
.wrap { width: min(1100px, 100% - 2rem); margin-inline: auto; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--muted); }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.6em 1.3em;
  border: 0; border-radius: var(--radius-s);
  background: var(--tape); color: var(--ink);
  font-weight: 800; font-stretch: 112%; font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 0 #b8901a;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8901a; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--chalk); box-shadow: inset 0 0 0 2px var(--ink-3); }
.btn--ghost:active { box-shadow: inset 0 0 0 2px var(--muted); }
.btn--danger { background: var(--red); color: #fff; box-shadow: 0 4px 0 #a52a22; }
.btn--small { min-height: 38px; padding: 0.35em 0.9em; font-size: 0.95rem; }
.btn--big { min-height: 64px; font-size: 1.35rem; padding-inline: 2em; }

.field { display: grid; gap: 0.35rem; }
.field label, .label { font-weight: 700; font-size: 0.95rem; color: var(--muted); }
.input {
  width: 100%; min-height: 52px; padding: 0.55em 0.8em;
  background: var(--ink-2); border: 2px solid var(--ink-3); border-radius: var(--radius-s);
  font-size: 1.1rem;
}
.input:focus { border-color: var(--tape); outline: none; }
.input--pin { text-align: center; font-weight: 900; font-stretch: 125%; font-size: 2rem; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }

.error { color: #ffb3ad; font-weight: 600; min-height: 1.45em; }

.toast {
  position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  background: var(--chalk); color: var(--ink);
  padding: 0.7em 1.2em; border-radius: var(--radius-s);
  font-weight: 700; z-index: 50;
}

/* ---------- answer tiles: colour + pattern + letter (works for colour-blind players) ---------- */
.answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.answer {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 0.9rem;
  min-height: 92px; padding: 0.9rem 1.1rem;
  border: 0; border-radius: var(--radius-m);
  color: #fff; text-align: left;
  font-weight: 750; font-size: clamp(1.05rem, 2.2vw, 1.6rem); line-height: 1.15;
  overflow: hidden;
}
.answer::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.22; }
.answer[data-i='0'] { background: var(--a); color: var(--ink); }
.answer[data-i='1'] { background: var(--b); }
.answer[data-i='2'] { background: var(--c); }
.answer[data-i='3'] { background: var(--d); }
.answer[data-i='0']::before { background: repeating-linear-gradient(-45deg, var(--ink) 0 6px, transparent 6px 18px); opacity: 0.12; }
.answer[data-i='1']::before { background: radial-gradient(circle, #fff 2.5px, transparent 3px) 0 0 / 16px 16px; }
.answer[data-i='2']::before { background: repeating-linear-gradient(0deg, #fff 0 2px, transparent 2px 14px), repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 14px); }
.answer[data-i='3']::before { background: repeating-linear-gradient(90deg, #fff 0 8px, transparent 8px 20px); }
.letter {
  flex: none; display: grid; place-items: center;
  width: 2.1em; height: 2.1em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font-weight: 900; font-stretch: 125%; font-size: 0.85em;
}
.answer[data-i='0'] .letter { background: var(--ink); color: var(--tape); }
.answer.is-dim { opacity: 0.28; }
.answer.is-correct { box-shadow: inset 0 0 0 5px #fff; }
.answer .count { margin-left: auto; font-stretch: 125%; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---------- timer ring ---------- */
.timer {
  --p: 1;
  width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--tape) calc(var(--p) * 360deg), var(--ink-3) 0);
  flex: none;
}
.timer b {
  display: grid; place-items: center;
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--ink);
  font-size: 2.2rem; font-weight: 900; font-stretch: 125%; font-variant-numeric: tabular-nums;
}
.timer.is-low { background: conic-gradient(var(--red) calc(var(--p) * 360deg), var(--ink-3) 0); }

/* ---------- siren countdown (the one orchestrated motion moment) ---------- */
.siren { position: fixed; inset: 0; display: grid; place-items: center; z-index: 30; background: var(--ink); text-align: center; }
.siren::before, .siren::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  animation: siren 1s steps(1) infinite;
}
.siren::before { background: radial-gradient(circle at 0% 50%, var(--red), transparent 60%); }
.siren::after { background: radial-gradient(circle at 100% 50%, var(--blue), transparent 60%); animation-delay: 0.5s; }
@keyframes siren { 0% { opacity: 0.85; } 50% { opacity: 0; } }
.siren .count-big { font-size: clamp(6rem, 22vw, 14rem); font-weight: 900; font-stretch: 125%; line-height: 1; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .siren::before, .siren::after { animation: none; opacity: 0.35; }
  .btn { transition: none; }
}

/* ---------- scoreboard & podium ---------- */
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.board li {
  display: grid; grid-template-columns: 3.2rem 1fr auto auto; align-items: center; gap: 0.9rem;
  padding: 0.8rem 1.1rem; border-radius: var(--radius-m);
  background: var(--ink-2);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 750;
}
.board li:first-child { background: var(--tape); color: var(--ink); }
.board .pos { font-weight: 900; font-stretch: 125%; font-variant-numeric: tabular-nums; }
.board .score { font-weight: 900; font-stretch: 125%; font-variant-numeric: tabular-nums; }
.board .move { font-size: 0.7em; font-weight: 800; min-width: 2.5em; text-align: right; }
.move.up { color: var(--good); }
.move.down { color: #ff8b84; }
.board li:first-child .move.up { color: #0b7a3f; }
.board li:first-child .move.down { color: #a52a22; }

.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 1rem; max-width: 900px; margin-inline: auto; }
.step { text-align: center; }
.step .who { font-weight: 850; font-stretch: 112%; font-size: clamp(1.1rem, 2.6vw, 1.9rem); overflow-wrap: anywhere; }
.step .pts { color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 0.6rem; }
.step .block {
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  display: grid; place-items: start center; padding-top: 0.6rem;
  font-weight: 900; font-stretch: 125%; font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1;
}
.step[data-rank='1'] .block { height: 15rem; background: var(--tape); color: var(--ink); }
.step[data-rank='2'] .block { height: 10.5rem; background: var(--blue); }
.step[data-rank='3'] .block { height: 7.5rem; background: var(--red); }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .answers { grid-template-columns: 1fr; }
  .answer { min-height: 76px; }
  .timer { width: 76px; height: 76px; }
  .timer b { width: 60px; height: 60px; font-size: 1.6rem; }
  .board li { grid-template-columns: 2.4rem 1fr auto; }
  .board .move { display: none; }
  .step[data-rank='1'] .block { height: 9rem; }
  .step[data-rank='2'] .block { height: 6.5rem; }
  .step[data-rank='3'] .block { height: 4.5rem; }
}

/* ---------- language switch ---------- */
.lang-switch { flex: none; }
.lang-switch--corner { position: absolute; top: calc(0.75rem + env(safe-area-inset-top, 0px)); right: 0.75rem; z-index: 3; }
.join, .login, .center { position: relative; }