:root {
  --bg: #10131a;
  --panel: #1a1f2b;
  --panel-hi: #222839;
  --ink: #eef1f7;
  --muted: #8f9bb3;
  --line: #2c3346;
  --rojo: #e4572e;
  --oro: #f2b134;
  --verde: #38b26a;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #1c2333, var(--bg));
  color: var(--ink);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex;
  justify-content: center;
  padding: 24px 16px 48px;
}

.app { width: 100%; max-width: 560px; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* The mark is sized off the wordmark rather than fixed, so the two stay in
   proportion when the header shrinks on a phone. */
.brand { display: flex; align-items: center; gap: 10px; flex: 1; }
.brand-mark { width: 1.15em; height: 1.15em; font-size: 26px; flex: none; }

.wordmark {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--rojo), var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.settings { display: flex; gap: 10px; }

/* The account control. Google's own button artwork and wording, unaltered —
   the whole value of the standard button is that people recognise it on sight,
   so it deliberately does not match the rest of the page. This is their dark
   theme, which is the sanctioned variant for a ground like ours.
   https://developers.google.com/identity/branding-guidelines */
/* `hidden` is a UA style, so any author rule that sets `display` beats it.
   Several controls here are flex, and toggling `.hidden` on them silently did
   nothing until this rule existed. */
[hidden] { display: none !important; }

.auth { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.google-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 14px 0 12px;
  font: 500 13px/1 Roboto, system-ui, sans-serif;
  color: #e3e3e3; background: #131314;
  border: 1px solid #8e918f; border-radius: 18px;
  text-decoration: none; white-space: nowrap;
}
.google-btn:hover { background: #1d1d1e; }
.google-btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.g-mark { width: 17px; height: 17px; flex: none; }

.auth-user { display: flex; align-items: center; gap: 8px; }
.auth-name { font-size: 13px; font-weight: 600; }
.auth-note { margin: 0; font-size: 12px; color: var(--rojo); flex-basis: 100%; }

.field { display: grid; gap: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

select {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}

.scoreboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 6px;
  text-align: center;
}

.stat-value { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

.progress { height: 5px; background: var(--panel); border-radius: 99px; overflow: hidden; margin-bottom: 18px; }
.progress-fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--rojo), var(--oro)); transition: width 0.3s ease; }

/* Stage picker: three steps left to right, so the row itself reads as depth.
   A locked step stays visible — seeing what is next is the point. */
.stages { margin-bottom: 18px; }

.stage-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.stage {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 9px 10px 10px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.stage:hover:not(:disabled) { border-color: var(--oro); }
.stage[aria-pressed="true"] { background: var(--panel-hi); border-color: var(--oro); }
.stage:disabled { cursor: not-allowed; color: var(--muted); }

.stage-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.stage-meta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stage:disabled .stage-name { font-weight: 500; }

/* Mastery of the stage, drawn along the bottom edge of its own button. */
.stage-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rojo), var(--oro));
  transition: width 0.3s ease;
}

.unlock-note { margin: 8px 2px 0; font-size: 12px; color: var(--muted); }
.unlock-note strong { color: var(--ink); font-weight: 600; }

.unlock-banner {
  margin: 0 0 10px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1207;
  background: linear-gradient(90deg, var(--oro), #f5c95e);
  border-radius: 99px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 22px 22px;
  text-align: center;
}

.direction-hint { margin: 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
.prompt { margin: 10px 0 26px; font-size: clamp(30px, 8vw, 42px); font-weight: 700; letter-spacing: -0.02em; }

.choices { display: grid; gap: 10px; }

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  text-align: left;
  background: var(--panel-hi);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}

.choice:hover:not(:disabled) { border-color: var(--oro); transform: translateY(-1px); }
.choice:disabled { cursor: default; opacity: 0.75; }
.choice.correct { background: rgba(56, 178, 106, 0.18); border-color: var(--verde); opacity: 1; }
.choice.wrong { background: rgba(228, 87, 46, 0.18); border-color: var(--rojo); opacity: 1; }

.key {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--bg);
  border-radius: 7px;
}

.feedback { min-height: 24px; margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.feedback.good { color: var(--verde); font-weight: 600; }
.feedback.bad { color: var(--oro); }

/* Regional variants, revealed with the answer. Quiet by design: it is context
   after the fact, not part of the question. */
.variant-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.variant-note .variant-word { color: var(--ink); }
.variant-note .variant-region { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }

.summary h2 { margin: 0 0 6px; font-size: 24px; }
.summary-score { margin: 0 0 14px; font-size: 40px; font-weight: 700; color: var(--oro); }
.summary-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; color: var(--muted); }
.summary-list span { color: var(--ink); font-weight: 600; }

.primary {
  font: inherit;
  font-weight: 600;
  padding: 13px 26px;
  color: #1a1207;
  background: linear-gradient(90deg, var(--oro), #f5c95e);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }

/* Lives at the foot of the question card, where the keys it names are in use. */
.hint { margin: 18px 0 0; font-size: 12px; color: var(--muted); }

.source-link {
  font-size: 12px;
  color: var(--oro);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.source-link:hover { color: #f5c95e; text-decoration-thickness: 2px; }
kbd { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 11px; }

/* Clearing progress is irreversible and there is no backup, so it asks first
   and names exactly what is about to go. */
.confirm {
  /* keeps a margin off the screen edge on a narrow phone */
  max-width: min(330px, calc(100vw - 32px));
  padding: 22px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.confirm::backdrop { background: rgba(6, 8, 13, 0.72); }
.confirm h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.01em; }
.confirm-body { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

.danger {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--rojo);
  border: 1px solid var(--rojo);
  border-radius: 9px;
  padding: 6px 12px;
  cursor: pointer;
}
.danger:hover { filter: brightness(1.1); }

.ghost {
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 12px;
  cursor: pointer;
}
.ghost:hover { color: var(--ink); border-color: var(--muted); }
/* Only the one destructive button down here warns on hover. */
.danger-hover:hover { color: var(--rojo); border-color: var(--rojo); }

.footer-actions { display: flex; gap: 8px; }

/* Wider than the confirm dialog: this one holds two code fields, and a code
   wrapped to a 330px column is painful to check by eye before pasting. */
.transfer { max-width: min(420px, calc(100vw - 32px)); }
.transfer .confirm-actions { margin-bottom: 16px; }
.transfer .confirm-actions:last-of-type { margin-bottom: 0; justify-content: space-between; }

.transfer-field { display: block; margin-bottom: 8px; }
.transfer-field > span { display: block; margin-bottom: 6px; font-size: 12px; color: var(--muted); }

.transfer textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
}
.transfer textarea:focus { outline: none; border-color: var(--oro); }

.transfer-status { margin: 0 0 14px; min-height: 17px; font-size: 12px; }
.transfer-status.good { color: var(--verde); }
.transfer-status.bad { color: var(--rojo); }

/* Phones: the vertical budget is the whole problem. Everything above the
   question is touched once a session; the answers are touched ten times a
   round. So the chrome gives up space first, and the stage row deliberately
   stays three across — stacking it costs 240px to save nothing. */
@media (max-width: 460px) {
  body { padding: 14px 12px 24px; }

  .topbar { flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
  .auth { order: 1; }
  .settings { order: 2; flex-basis: 100%; }

  /* Icon only: the label is what makes this button too wide for a phone, and
     the four-colour G is the part people actually recognise. */
  .google-btn { padding: 0; width: 36px; justify-content: center; }
  .google-btn-label { display: none; }
}

/* Narrower than an iPhone SE, the signed-in name is what pushes the account
   control onto a row of its own — 50px of a 560px-tall screen, spent telling
   you your own name. The G mark still says you are signed in. */
@media (max-width: 400px) {
  .auth-name { display: none; }
  .wordmark { font-size: 22px; }
  .brand { gap: 8px; }
  .brand-mark { font-size: 22px; }

  /* Side by side rather than stacked. min-width:0 lets the grid track shrink
     below the select's intrinsic width instead of overflowing the screen. */
  .settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .field { min-width: 0; }
  select { width: 100%; font-size: 13px; padding: 6px 8px; }

  .scoreboard { gap: 6px; margin-bottom: 10px; }
  .stat { padding: 7px 4px; }
  .stat-value { font-size: 19px; }

  .progress { margin-bottom: 12px; }
  .stages { margin-bottom: 12px; }
  .stage-row { gap: 6px; }
  .stage { padding: 7px 7px 8px; }
  .stage-name { font-size: 12px; }
  .stage-meta { font-size: 10px; }
  .unlock-note { margin-top: 6px; font-size: 11px; }

  .card { padding: 20px 14px 16px; }
  .prompt { margin: 8px 0 16px; }
  .choices { gap: 8px; }
  .choice { padding: 12px 14px; font-size: 16px; }

  .footer { margin-top: 12px; }
}

/* Short viewports — an old iPhone SE, or any phone in landscape. Height is the
   binding constraint here, not width, so this keys off height and trims the
   persistent guidance the player has already read. */
@media (max-height: 600px) {
  .unlock-note { display: none; }
  .scoreboard { margin-bottom: 6px; }
  .stat { padding: 4px 4px; }
  .stat-value { font-size: 17px; }
  .stages { margin-bottom: 8px; }
  .card { padding: 14px 14px 8px; }
  .prompt { margin: 6px 0 10px; font-size: clamp(26px, 7vw, 34px); }
  .choices { gap: 6px; }
  .choice { padding: 10px 14px; }
  .footer { margin-top: 10px; }
}

/* The hint names keyboard keys a touch device does not have — and on touch the
   round advances on its own, so there is nothing left to say. */
@media (pointer: coarse) {
  .hint { display: none; }
}