/* Light grey ground, white cards; green (SANA) and amber (PELI) from the start screen blocks. */
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #fff;          /* cards, answer buttons */
  --surface-2: #f0f0f4;     /* the first part of the word, quiet fills */
  --surface-press: #e9eaef;
  --line: #e4e5eb;
  --line-strong: #c9cad3;
  --text: #15161a;
  --muted: #5e6270;         /* labels and secondary text */
  --ink: #15161a;           /* filled buttons and the score */
  --ink-text: #fff;
  --ink-muted: #c4c6d0;
  --green: #178045;         /* the word to continue, white text on it */
  --green-text: #127038;    /* links and green text */
  --green-soft: #e3f3e8;
  --green-soft-text: #0b4a27;
  --amber: #ffb224;
  --amber-soft: #fff1d1;
  --amber-text: #9a5b00;
  --amber-title: #b86e00;   /* PELIÄ! on the start screen */
  --red: #b3202a;
  --red-soft: #fde8e9;
  --red-line: #f2b8bc;
  --disabled: #d6d7de;
  --overlay: rgba(21, 22, 26, 0.5);
  --shadow: 0 1px 2px rgba(21, 22, 26, 0.06), 0 2px 8px rgba(21, 22, 26, 0.04);
  /* Start screen scene */
  --sky-top: #fff;
  --sky-bottom: #eef7f1;
  --ground: #e2f1e7;
  --ground-line: #c3e2cd;
  --rain-sky: #e6eef5;
  --rain-ground: #d5e3ee;
  --dot-green: #c9e8d4;
  --dot-amber: #ffe2a3;
}

/* Dark theme: follows the device unless chosen in the settings (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e0f13;
    --surface: #17191f;
    --surface-2: #22252e;
    --surface-press: #2a2d37;
    --line: #2a2d37;
    --line-strong: #3a3e4a;
    --text: #f2f3f7;
    --muted: #a3a7b5;
    --ink: #f2f3f7;
    --ink-text: #15161a;
    --ink-muted: #4a4e5a;
    --green-text: #6fd19a;
    --green-soft: #142b1e;
    --green-soft-text: #a8e0bc;
    --amber-soft: #33270f;
    --amber-text: #ffc94d;
    --amber-title: #ffc94d;
    --red: #ff8a8f;
    --red-soft: #2a1518;
    --red-line: #5a2a30;
    --disabled: #2a2d37;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow: none;
    --sky-top: #17191f;
    --sky-bottom: #132019;
    --ground: #15261b;
    --ground-line: #24402e;
    --rain-sky: #161d26;
    --rain-ground: #18222d;
    --dot-green: #24402e;
    --dot-amber: #4a3a14;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0f13;
  --surface: #17191f;
  --surface-2: #22252e;
  --surface-press: #2a2d37;
  --line: #2a2d37;
  --line-strong: #3a3e4a;
  --text: #f2f3f7;
  --muted: #a3a7b5;
  --ink: #f2f3f7;
  --ink-text: #15161a;
  --ink-muted: #4a4e5a;
  --green-text: #6fd19a;
  --green-soft: #142b1e;
  --green-soft-text: #a8e0bc;
  --amber-soft: #33270f;
  --amber-text: #ffc94d;
  --amber-title: #ffc94d;
  --red: #ff8a8f;
  --red-soft: #2a1518;
  --red-line: #5a2a30;
  --disabled: #2a2d37;
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow: none;
  --sky-top: #17191f;
  --sky-bottom: #132019;
  --ground: #15261b;
  --ground-line: #24402e;
  --rain-sky: #161d26;
  --rain-ground: #18222d;
  --dot-green: #24402e;
  --dot-amber: #4a3a14;
}

/* Latin subsets of Inter and Bricolage Grotesque (SIL Open Font License), kept here for offline use */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/BricolageGrotesque.woff2') format('woff2');
  font-weight: 700 800;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

a { color: var(--green-text); }

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.view {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
  /* At least the screen's height; the whole page scrolls when there is more */
  min-height: 100vh;
  min-height: 100dvh;
}

/* App bar */
.appbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  flex: none;
}
.appbar h1 {
  flex: 1;
  margin: 0;
  font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* The game's own title is smaller, next to the logo */
#view-game .appbar h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.logo-mark { display: flex; gap: 3px; }
.logo-mark span {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--green);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}
.logo-mark span + span { background: var(--amber); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16); }

.icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.icon-btn svg, .text-link svg, .chevron, .mode-icon svg, .outlined-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }
.icon-btn:active { background: var(--surface-press); }

/* Game */
.game {
  flex: 1;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 8px max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.game > * { width: 100%; max-width: 560px; margin: 0; flex: none; }
/* Centered on tall screens, scrolling from the top on short ones */
.game::before, .game::after { content: ''; flex: 1 0 0; max-height: 80px; }

/* Choosing how to play at the start of each game; the rest of the game waits */
.mode-picker { display: none; }
.game.picking > :not(.mode-picker) { display: none !important; }
.game.picking .mode-picker { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.scene-card {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
}
.cubes-anim, .puoli-anim { display: block; width: 100%; height: auto; }
.sky-top { stop-color: var(--sky-top); }
.sky-bottom { stop-color: var(--sky-bottom); }
.scene-ground { fill: var(--ground); }
.scene-ground-line { stroke: var(--ground-line); }
.scene-shadow { fill: #0e5c31; opacity: 0.12; }
.dot-green { fill: var(--dot-green); }
.dot-amber { fill: var(--dot-amber); }
.cube-text { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.5px; }
.cube-text.small { font-size: 14px; }

/*
 * Start screen: the friends walk the blocks in, meet in the middle, a burst and confetti,
 * then they jump and wave. Plays once each time the screen shows and ends with the blocks
 * joined and the star above them.
 */
.cubes-scene { animation: cubes-scene 6s ease-out both; }
.push-left { animation: push-left 6s ease-in-out both; }
.push-right { animation: push-right 6s ease-in-out both; }
.leg-a, .puoli-leg-a { transform-box: view-box; transform-origin: 92px 122px; }
.leg-b, .puoli-leg-b { transform-box: view-box; transform-origin: 94px 122px; }
.leg-a { animation: leg-a 6s linear both; }
.leg-b { animation: leg-b 6s linear both; }
.pusher { animation: pusher-hop 6s ease-out both; }
.pusher-body { animation: pusher-bob 6s ease-in-out both; }
.wave-arm { transform-box: view-box; transform-origin: 104px 101px; animation: wave-arm 6s ease-in-out both; }
.cubes-burst { transform-box: fill-box; transform-origin: center; opacity: 0; animation: cubes-burst 6s ease-out both; }
.cubes-spark { transform-box: fill-box; transform-origin: center; animation: cubes-spark 6s ease-out both; }
.confetti { transform-box: fill-box; transform-origin: center; opacity: 0; animation: confetti 6s ease-out both; }
@keyframes cubes-scene { 0% { opacity: 0; } 5%, 100% { opacity: 1; } }
@keyframes push-left {
  0%, 8% { transform: translateX(-66px); }
  50% { transform: translateX(2px); }
  54%, 100% { transform: translateX(0); }
}
@keyframes push-right {
  0%, 8% { transform: translateX(66px); }
  50% { transform: translateX(-2px); }
  54%, 100% { transform: translateX(0); }
}
@keyframes leg-a {
  0%, 8% { transform: rotate(0); }
  13%, 23%, 33%, 43% { transform: rotate(16deg); }
  18%, 28%, 38% { transform: rotate(-12deg); }
  50%, 100% { transform: rotate(0); }
}
@keyframes leg-b {
  0%, 8% { transform: rotate(0); }
  13%, 23%, 33%, 43% { transform: rotate(-12deg); }
  18%, 28%, 38% { transform: rotate(16deg); }
  50%, 100% { transform: rotate(0); }
}
@keyframes pusher-bob {
  0%, 8%, 18%, 28%, 38%, 50%, 100% { transform: translateY(0); }
  13%, 23%, 33%, 43% { transform: translateY(-2px); }
}
@keyframes pusher-hop {
  0%, 56% { transform: translateY(0); }
  61% { transform: translateY(-12px); }
  66% { transform: translateY(0); }
  71% { transform: translateY(-8px); }
  76%, 100% { transform: translateY(0); }
}
@keyframes wave-arm {
  0%, 56% { transform: rotate(0); }
  61%, 72% { transform: rotate(-52deg); }
  80%, 100% { transform: rotate(0); }
}
@keyframes cubes-burst {
  0%, 49% { opacity: 0; transform: scale(0.3); }
  53% { opacity: 1; transform: scale(1); }
  64%, 100% { opacity: 0; transform: scale(1.35); }
}
@keyframes cubes-spark {
  0%, 50% { opacity: 0; transform: scale(0) rotate(0); }
  57% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  66%, 100% { opacity: 1; transform: scale(1) rotate(90deg); }
}
@keyframes confetti {
  0%, 50% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0); }
  54% { opacity: 1; transform: translate(0, 0) scale(1); }
  72% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(200deg); }
  90%, 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 34px)) rotate(320deg); }
}
@media (prefers-reduced-motion: reduce) {
  /* The finished scene, standing still */
  .cubes-scene, .cubes-scene * { animation: none !important; }
  .cubes-burst, .confetti { opacity: 0; }
}

.mode-heading { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mode-welcome { margin: 0; font-size: 18px; font-weight: 600; color: var(--muted); }
/* Always on one line; it shrinks to fit even the narrowest phones */
.mode-name {
  margin: 0;
  font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-size: clamp(22px, 8vw, 34px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.name-sana { color: var(--green-text); }
.name-peli { color: var(--amber-title); }

.mode-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.mode-title { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.mode-card, .nav-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.mode-card:active, .nav-card:active { background: var(--surface-press); }
.mode-card.primary { border-color: var(--ink); background: var(--ink); color: var(--ink-text); }
.mode-card.primary:active { filter: brightness(0.92); }
.mode-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--green);
  color: #fff;
}
.mode-icon svg { width: 22px; height: 22px; }
.mode-icon.green { background: var(--green-soft); color: var(--green-text); }
.mode-icon.amber { background: var(--amber-soft); color: var(--amber-text); }
.mode-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mode-label, .nav-label { font-size: 17px; font-weight: 700; }
.nav-label { flex: 1; }
.mode-desc { font-size: 14px; color: var(--muted); }
.mode-card.primary .mode-desc { color: var(--ink-muted); }
.chevron { flex: none; width: 20px; height: 20px; color: var(--muted); }
.mode-card.primary .chevron { color: var(--ink-text); }
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  align-self: center;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.text-link svg { width: 18px; height: 18px; }

/* Kilpapeli introduction */
.race-intro { text-align: center; }
.game.picking .race-intro { gap: 14px; padding: 28px 20px 20px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); }
.race-intro-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--amber-soft);
  color: var(--amber-text);
}
.race-intro-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.race-intro .mode-welcome { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-size: 30px; font-weight: 800; color: var(--text); }
.race-intro p:not(.mode-welcome) { max-width: 420px; margin: 0; font-size: 16px; line-height: 1.55; }
.race-intro .race-note { font-size: 14px; color: var(--muted); }
.race-times { display: flex; gap: 24px; width: min(420px, 100%); margin-top: 6px; }
.race-times .race-btn { flex: 1; min-width: 0; min-height: 56px; font-size: 17px; }

/* Score bar: the way to play, the best score and this game's points */
.scorebar { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.scorebar-mode { flex: 1; font-size: 16px; font-weight: 700; }
.scorebar-best { font-size: 13px; color: var(--muted); }
.scorebar-best b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.score-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.score-pill b { font-size: 16px; color: var(--ink-text); }

/* Kilpapeli countdown */
.race-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border: 1px solid var(--dot-amber);
  border-radius: 28px;
  background: var(--amber-soft);
}
.race-time {
  font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.race-bar { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: var(--dot-amber); }
.race-bar span {
  display: block;
  width: calc(var(--left, 1) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--amber);
  transition: width 0.25s linear;
}
.race-length { font-size: 13px; font-weight: 600; color: var(--amber-text); }
.race-timer.last-minute { border-color: var(--red-line); background: var(--red-soft); }
.race-timer.last-minute .race-time, .race-timer.last-minute .race-length { color: var(--red); }
.race-timer.last-minute .race-bar { background: var(--red-line); }
.race-timer.last-minute .race-bar span { background: var(--red); }

/* The word to continue */
.word-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 20px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.word-card > * { margin: 0; }
.compound {
  font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-size: clamp(28px, 9vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.compound:empty { display: none; }
.parts { overflow-wrap: anywhere; }
.parts-inner { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.part {
  padding: 9px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 17px;
  font-weight: 600;
}
.part.main { background: var(--green); color: #fff; font-weight: 700; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.22); }
.part:empty, .part:empty + .sep, .sep:has(+ .part:empty) { display: none; }
.sep { width: 2px; height: 22px; border-radius: 2px; background: var(--line-strong); }
.hint { font-size: 15px; line-height: 1.5; color: var(--muted); }
.hint p { margin: 0; }
.hint p + p { margin-top: 10px; }
.hint a { font-weight: 600; }
.dead-end {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
}

/* Answer box: the first part is written before what the player types */
.field { display: flex; flex-direction: column; gap: 8px; }
.field .label { font-size: 14px; font-weight: 600; color: var(--muted); }
.field-box {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 64px;
  padding: 0 8px 0 18px;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus-within .field-box { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.field-prefix { flex: none; font-size: 20px; font-weight: 600; color: var(--muted); }
.field input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  outline: none;
}
.submit-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: var(--ink-text);
  cursor: pointer;
}
.submit-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.submit-btn:active { filter: brightness(0.9); }
.field.wrong .field-box { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.field.wrong { animation: shake 0.4s; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .field.wrong { animation: wrong-fade 0.8s; }
  @keyframes wrong-fade { to { opacity: 1; } }
}

.explain { font-size: 15px; line-height: 1.5; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.explain b { font-weight: 700; }
/* After a lost game: start over, or pay points to continue */
.lost-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lost-actions button { min-height: 56px; padding: 0 12px; }

/* Mestaripeli clue */
.clue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--green-soft);
  color: var(--green-soft-text);
}
.clue-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.clue-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.clue-btn:disabled { background: var(--disabled); color: var(--muted); box-shadow: none; cursor: default; }
.clue-btn:not(:disabled):active { filter: brightness(0.9); }
.clue-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clue-title { font-size: 15px; font-weight: 700; }
.clue { margin: 0; font-size: 15px; }
.clue:empty { display: none; }
.clue b {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--green-text);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.reset-row { display: flex; justify-content: center; }

/* Answer options */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choices:empty { display: none; }
.choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Side by side, words stay on one line; fitChoices() switches to .wrap if one doesn't fit */
.choices.three:not(.wrap) .choice { white-space: nowrap; overflow-wrap: normal; }
.choices.three.wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices.three.wrap .choice:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); }
/* Monivalintapeli: one under another, each with the first part in front */
.choices.stack { grid-template-columns: 1fr; gap: 10px; }
.choice {
  min-width: 0;
  min-height: 60px;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.choices.stack .choice { padding: 8px 20px; font-size: 19px; text-align: left; }
/* Inline-block, so a wrong option's line-through goes only through the option itself */
.choice-prefix { display: inline-block; font-size: 15px; font-weight: 600; color: var(--muted); }
.choice:active { background: var(--surface-press); }
.choice.right { border-color: var(--green); background: var(--green-soft); color: var(--green-soft-text); cursor: default; }
.choice.right .choice-prefix { color: inherit; }
.choice.wrong { border-color: var(--red-line); background: var(--red-soft); color: var(--red); text-decoration: line-through; box-shadow: none; cursor: default; }
.choice.wrong .choice-prefix { color: inherit; }

/* A check mark after a correct word, just right of the word1 | word2 tiles */
.celebrate {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 8px;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.celebrate svg { display: block; width: 30px; height: 30px; }
.celebrate circle { fill: var(--green); }
.celebrate path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Pops in, stays 2 s, fades out */
.celebrate.show { animation: check-show 2.5s ease-out; }
@keyframes check-show {
  0% { opacity: 0; transform: translateY(-50%) scale(0.4); }
  8% { opacity: 1; transform: translateY(-50%) scale(1.15); }
  14%, 88% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes check-show {
    0% { opacity: 0; }
    8%, 88% { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* Milestone messages ("Hyvin menee!" and others) at 10, 20, 30... points, in the space above the word */
.cheer {
  position: fixed;
  left: 50%;
  top: 18%;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: pre-line;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 11;
}
.cheer:empty { display: none; }
.cheer.bad { background: #b3202a; font-size: 16px; border-radius: 20px; }
/* The lost game message stays for 7 s */
.cheer.bad.show { animation-duration: 7s; }
/* A longer message, like the fact at 15 points: smaller, and 8 s to read it */
.cheer.long { max-width: min(360px, calc(100vw - 32px)); border-radius: 20px; font-size: 16px; font-weight: 600; }
.cheer.long.show { animation-duration: 8s; }
/* 0.3 s to pop in, 4 s shown, 0.5 s to fade */
.cheer.show { animation: cheer-pop 4.8s ease-out; }
@keyframes cheer-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  4% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  7%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes cheer-pop {
    0% { opacity: 0; }
    6%, 90% { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* Kilpapeli: time's up alert over the frozen game */
.time-up {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--overlay);
}
.time-up-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(380px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 28px 22px 22px;
  border-radius: 32px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.time-up-card p { margin: 0; }
.time-up-icon, .fact-page-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 28px;
  background: var(--amber-soft);
}
.time-up-icon svg, .fact-page-icon svg { width: 52px; height: 52px; }
.time-up-icon svg { transform-origin: 50% 60%; animation: time-up-ring 0.15s ease-in-out 8 alternate; }
.time-up-title { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--red); }
.time-up-score { padding: 10px 24px; border-radius: 18px; background: var(--bg); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.time-up-card .filled-btn { margin-top: 6px; }
@keyframes time-up-ring {
  from { transform: rotate(-12deg); }
  to { transform: rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .time-up-icon svg { animation: none; }
}
/* At 50 points: a fact page in the same kind of box, under the fireworks so they show over it */
.fact-page { z-index: 9; }
.fact-page .time-up-card { padding-top: 12px; }
.fact-page:not(.scene) .time-up-card { padding-top: 28px; }
.fact-page-title { font-family: 'Bricolage Grotesque', Inter, sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--green-text); }
/* Monivalintapeli shows the PUOLI scene instead of the icon */
.fact-page.scene .fact-page-icon, .fact-page:not(.scene) .puoli-anim { display: none; }
.puoli-anim { border-radius: 24px; }
.puoli-sky { fill: var(--sky-bottom); }
.puoli-sky-rain { fill: var(--rain-sky); }
.puoli-ground-rain { fill: var(--rain-ground); }
/* PUOLI is pushed to the middle; then a cloud comes and it rains on the right half */
.puoli-push { animation: puoli-push 2.8s ease-in-out 0.3s both; }
.puoli-leg-a { animation: leg-a 2.8s linear 0.3s both; }
.puoli-leg-b { animation: leg-b 2.8s linear 0.3s both; }
.puoli-look { transform-box: view-box; transform-origin: 107px 94px; animation: puoli-look 0.6s ease-in-out 3.4s both; }
.rain-cloud { animation: rain-cloud 0.8s ease-out 3s both; }
.rain { animation: rain-on 0.4s linear 3.6s both; }
.raindrop { animation: rain-fall 0.8s linear calc(3.6s + var(--d)) infinite both; }
@keyframes puoli-push {
  from { transform: translateX(-118px); }
  to { transform: translateX(0); }
}
@keyframes puoli-look { to { transform: rotate(-14deg); } }
@keyframes rain-cloud {
  from { opacity: 0; transform: translate(80px, -10px); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes rain-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes rain-fall {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(70px); }
}
@media (prefers-reduced-motion: reduce) {
  /* The finished scene, standing still */
  .puoli-push, .puoli-leg-a, .puoli-leg-b, .puoli-look, .rain-cloud, .rain, .raindrop { animation: none; }
}
.time-up-card .fact-page-text { padding: 0 8px; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* Fireworks at 50, 100, 150... points, drawn over everything */
.fireworks {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* Buttons */
.outlined-btn, .filled-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.outlined-btn { border: 1.5px solid var(--line); background: var(--surface); color: var(--text); }
.outlined-btn svg { width: 18px; height: 18px; }
.filled-btn { border: 0; background: var(--ink); color: var(--ink-text); }
.outlined-btn:active { background: var(--surface-press); }
.filled-btn:active { filter: brightness(0.88); }
.outlined-btn:disabled, .filled-btn:disabled { opacity: 0.45; cursor: default; }
.outlined-btn.danger { border-color: var(--red-line); color: var(--red); }
.wide { width: 100%; min-height: 56px; border-radius: 18px; font-size: 16px; }
.lost-actions .outlined-btn, .lost-actions .filled-btn, .race-btn { border-radius: 18px; }

/* Settings */
.settings {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left));
}
.group { display: flex; flex-direction: column; gap: 10px; }
.group h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.group-card { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.num-field { display: block; padding: 14px 16px; }
.num-field + .num-field { border-top: 1px solid var(--line); }
.num-field span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.num-field input, .num-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  font-size: 16px;
}
.num-field input:focus, .num-field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.num-field input:invalid { border-color: var(--red); }
.center { display: flex; justify-content: center; padding: 16px 0; }

.counts {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  padding: 12px max(16px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-size: 13px;
  color: var(--muted);
}
.counts p { margin: 0; }

/* High scores */
.scores {
  flex: 1;
  padding: 8px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
/* Tulokset: the two links and the note, in the middle of the page */
.score-menu-page { display: flex; flex-direction: column; justify-content: center; }
.score-menu { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 480px; margin: 0 auto; }
.score-menu-page .scores-note { margin-top: 24px; line-height: 1.5; }
.scores-table {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 24px;
  border-spacing: 0;
  background: var(--surface);
  font-size: 17px;
}
.scores-table th { padding: 10px 14px 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: left; }
.scores-table td { padding: 14px; border-top: 1px solid var(--line); }
.scores-table td:first-child { width: 3.5em; color: var(--muted); font-size: 14px; font-weight: 700; }
.scores-table td:nth-child(2) { font-weight: 700; font-variant-numeric: tabular-nums; }
.scores-table td:last-child { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.scores-table tr.latest td { border-top-color: transparent; background: var(--green-soft); color: var(--green-soft-text); }
.scores-table tr.latest td:first-child { border-radius: 16px 0 0 16px; }
.scores-table tr.latest td:last-child { border-radius: 0 16px 16px 0; }
.scores-table tr.latest + tr td { border-top-color: transparent; }
.scores-note { max-width: 480px; margin: 16px auto 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; }

/* Guide */
.guide {
  flex: 1;
  padding: 8px max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  font-size: 16px;
  line-height: 1.6;
}
.guide > * { max-width: 620px; margin-left: auto; margin-right: auto; }
.guide h2 {
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.guide h2::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  border-radius: 4px;
  background: var(--green);
  vertical-align: 2px;
}
.guide h2:nth-of-type(even)::before { background: var(--amber); }
.guide p { margin-top: 0; margin-bottom: 0.9em; }
.guide > p:first-child { font-size: 18px; font-weight: 600; line-height: 1.5; }