/* Παρά 5 Κουίζ. Light tokens by default, dark when the device is in dark mode. */

:root {
  --bg: #f5f3fd;
  --elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #ece8fb;
  --surface-3: #ddd6f6;
  --text: #17112f;
  --muted: #5f587a;
  --faint: #8f88aa;
  --line: rgb(23 17 47 / .09);
  --brand: #5b3df5;
  --brand-2: #7c5cff;
  --brand-ink: #ffffff;
  --accent: #ff5a4e;
  --gold: #ffb020;
  --ok: #12a150;
  --ok-soft: rgb(18 161 80 / .14);
  --bad: #e5383b;
  --bad-soft: rgb(229 56 59 / .13);
  --shadow: 0 1px 2px rgb(23 17 47 / .05), 0 10px 30px rgb(23 17 47 / .08);
  --shadow-lg: 0 24px 60px rgb(23 17 47 / .2);
  --hero: linear-gradient(160deg, #7c5cff 0%, #5b3df5 45%, #3a1fbf 100%);
  --r: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0b22;
    --elev: #1a1538;
    --surface: #17132f;
    --surface-2: #221c45;
    --surface-3: #2e2758;
    --text: #f0edff;
    --muted: #a59fc6;
    --faint: #756e98;
    --line: rgb(255 255 255 / .08);
    --brand: #8b6dff;
    --brand-2: #a28bff;
    --ok: #34d17a;
    --ok-soft: rgb(52 209 122 / .16);
    --bad: #ff6366;
    --bad-soft: rgb(255 99 102 / .16);
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .32);
    --shadow-lg: 0 24px 60px rgb(0 0 0 / .55);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font: 16px/1.45 system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
.ico, button > svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }

.view {
  max-width: 1080px; margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.view.enter { animation: enter .3s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }

.eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.lead { font-size: 17px; color: var(--muted); }

/* --- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--brand); color: var(--brand-ink);
  font-weight: 750; font-size: 16px;
  transition: transform .12s, background .15s, opacity .15s, box-shadow .15s;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.big { min-height: 58px; font-size: 18px; padding: 0 28px; box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 35%, transparent); }
.btn.tonal { background: var(--surface-2); color: var(--text); box-shadow: none; }
.btn.text { background: none; color: var(--muted); box-shadow: none; }
.btn.danger { background: var(--bad); }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn.small svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .btn:hover:not(:disabled) { filter: brightness(1.06); }
  .btn.tonal:hover:not(:disabled) { background: var(--surface-3); filter: none; }
}

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: none; color: var(--muted);
  transition: background .15s, transform .12s;
}
.icon-btn:active { transform: scale(.92); background: var(--surface-2); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 750; background: var(--surface-2); color: var(--text);
}
.chip svg { width: 18px; height: 18px; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.gold { background: color-mix(in srgb, var(--gold) 22%, transparent); color: color-mix(in srgb, var(--gold) 60%, var(--text)); }

.card { background: var(--surface); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.card h2 { font-size: 18px; font-weight: 800; margin-bottom: 12px; }

.field {
  width: 100%; height: 50px; padding: 0 14px; border-radius: 14px; border: 0;
  background: var(--surface-2); font-size: 16px; outline: none;
}
.field:focus { box-shadow: 0 0 0 2px var(--brand-2); }

/* --- home --- */

.home { display: grid; gap: 16px; }
.home-hero {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; text-align: center; gap: 10px;
  padding: 34px 20px 24px; border-radius: 28px;
  background: var(--hero); color: #fff; box-shadow: var(--shadow-lg);
}
.home-hero::before, .home-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.home-hero::before { width: 280px; height: 280px; right: -110px; top: -120px; background: rgb(255 90 78 / .55); filter: blur(10px); }
.home-hero::after { width: 220px; height: 220px; left: -100px; bottom: -110px; background: rgb(255 255 255 / .12); }
.home-hero > * { position: relative; }
.home-logo { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
.home-hero .eyebrow { color: rgb(255 255 255 / .75); margin-top: 6px; }
.home-hero h1 { font-size: clamp(38px, 10vw, 56px); line-height: 1; font-weight: 900; letter-spacing: -.03em; }
.home-hero h1 span { color: #ffd0cc; }
.home-hero .lead { color: rgb(255 255 255 / .85); max-width: 30ch; }
.home-hero .btn.play { margin-top: 10px; width: min(100%, 320px); background: #fff; color: var(--brand); box-shadow: 0 12px 30px rgb(0 0 0 / .25); }
.home-hero .btn.play svg { width: 26px; height: 26px; }
.home-stats { display: flex; gap: 10px; margin-top: 10px; }
.home-stats div { display: grid; min-width: 110px; padding: 10px 14px; border-radius: 16px; background: rgb(255 255 255 / .14); }
.home-stats strong { font-size: 22px; font-weight: 850; font-variant-numeric: tabular-nums; }
.home-stats span { font-size: 12.5px; color: rgb(255 255 255 / .78); }

.resume {
  width: min(100%, 420px); margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 16px; border-radius: 18px; background: rgb(255 255 255 / .16); text-align: left;
}
.resume div { display: grid; }
.resume span { font-size: 13.5px; color: rgb(255 255 255 / .8); }
.resume .btn { background: var(--accent); min-height: 42px; box-shadow: none; }

.home-side { display: grid; gap: 16px; }
.rules-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 12px; }
.rules-list li { display: flex; gap: 12px; align-items: flex-start; }
.rules-list svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 1px; }
.rules-list li:nth-child(2) svg { color: var(--accent); }
.rules-list li:nth-child(4) svg { color: var(--gold); }

.score-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: none; }
.score-list li { display: grid; grid-template-columns: 32px 1fr; align-items: center; column-gap: 10px; padding: 8px 4px; border-radius: 12px; }
.score-list li:first-child { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.rank {
  grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); font-weight: 800; font-size: 14px;
}
.score-list li:first-child .rank { background: var(--gold); color: #3a2400; }
.score-main strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.score-meta { font-size: 13px; color: var(--muted); }

.home-foot { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 8px 0 4px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.disclaimer { font-size: 12.5px; color: var(--faint); max-width: 46ch; }

/* --- game --- */

.game { max-width: 680px; margin: 0 auto; display: grid; gap: 14px; }
.game-bar { display: flex; align-items: center; gap: 6px; }
.game-stat { display: grid; line-height: 1.15; padding: 0 8px; }
.game-stat strong { font-size: 18px; font-weight: 850; font-variant-numeric: tabular-nums; }
.game-stat + .game-stat { border-left: 1px solid var(--line); }
.lives { margin-left: auto; display: flex; gap: 2px; }
.lives span { display: grid; }
.lives svg { width: 24px; height: 24px; }
.lives .on { color: var(--accent); animation: beat .4s var(--ease); }
.lives .off { color: var(--surface-3); }
@keyframes beat { 50% { transform: scale(1.25); } }

.level-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.level-chip { font-size: 13.5px; font-weight: 800; color: var(--brand); }
.timer {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px;
  background: var(--surface-2); font-weight: 850; font-size: 17px; font-variant-numeric: tabular-nums;
  transition: background .2s, color .2s;
}
.timer svg { width: 20px; height: 20px; color: var(--brand); }
.timer b { min-width: 2ch; text-align: right; }
.timer.low { background: var(--bad-soft); color: var(--bad); animation: tick 1s steps(1) infinite; }
.timer.low svg { color: var(--bad); }
@keyframes tick { 50% { transform: scale(1.06); } }

.track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.track i { height: 5px; border-radius: 3px; background: var(--surface-3); transition: background .3s; }
.track i.done { background: var(--brand); }
.track i.now { background: color-mix(in srgb, var(--brand) 40%, var(--surface-3)); }

.q-card {
  position: relative; overflow: hidden;
  min-height: 140px; padding: 26px 22px; border-radius: 24px;
  display: grid; align-content: center; gap: 12px;
  background: var(--hero); color: #fff; box-shadow: var(--shadow-lg);
}
/* The time left, as a bar along the bottom of the question. */
.timebar {
  --left: 100%;
  position: absolute; left: 0; bottom: 0; height: 6px; width: var(--left);
  background: rgb(255 255 255 / .75); transition: width .1s linear;
}
.game:has(.timer.low) .timebar { background: #ffb3b0; }
.q-text { font-size: clamp(19px, 5vw, 24px); line-height: 1.32; font-weight: 750; letter-spacing: -.005em; text-wrap: balance; }
.banner {
  justify-self: start; padding: 6px 12px; border-radius: 999px;
  background: var(--gold); color: #3a2400; font-weight: 800; font-size: 14px;
  animation: pop .45s var(--ease);
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* A new level's intro takes the place of the question. */
.game.intro-on .q-card, .game.intro-on .answers, .game.intro-on .lifelines, .game.intro-on .game-foot { display: none; }
.intro {
  display: grid; justify-items: center; text-align: center; gap: 10px;
  padding: 32px 22px 26px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow);
  animation: pop .4s var(--ease);
}
.intro-badge {
  width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center;
  background: var(--hero); color: #fff; font-size: 38px; font-weight: 900; box-shadow: var(--shadow-lg);
}
.intro h2 { font-size: 34px; font-weight: 900; letter-spacing: -.02em; }
.intro-facts { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 10px; text-align: left; max-width: 420px; }
.intro-facts li { display: flex; gap: 12px; align-items: flex-start; }
.intro-facts svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 1px; }
.intro-facts li:nth-child(3) svg { color: var(--accent); }
.intro .btn { width: min(100%, 320px); }

.answers { display: grid; gap: 10px; }
.answer {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  min-height: 62px; padding: 10px 14px 10px 10px; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow); text-align: left;
  border: 2px solid transparent;
  transition: transform .12s, border-color .15s, background .2s, opacity .3s;
}
.answer .key {
  width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--surface-2); font-weight: 850; color: var(--brand);
}
.answer .txt { flex: 1; font-weight: 650; font-size: 16.5px; line-height: 1.3; }
.answer .mark { display: grid; }
.answer .mark svg { width: 24px; height: 24px; }
.answer:active:not(:disabled) { transform: scale(.985); }
@media (hover: hover) { .answer:hover:not(:disabled) { border-color: var(--surface-3); } }
.answer.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.answer.selected .key { background: var(--brand); color: #fff; }
.answer.removed { opacity: 0; transform: scale(.94); pointer-events: none; }
.answer.correct { border-color: var(--ok); background: var(--ok-soft); color: var(--text); }
.answer.correct .key { background: var(--ok); color: #fff; }
.answer.correct .mark { color: var(--ok); }
.answer.wrong { border-color: var(--bad); background: var(--bad-soft); animation: shake .35s; }
.answer.wrong .key { background: var(--bad); color: #fff; }
.answer.wrong .mark { color: var(--bad); }
.answer.dim { opacity: .45; }
.answer:disabled { cursor: default; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.lifelines { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lifelines .eyebrow { margin-right: 4px; }
.lifeline {
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--surface-2); color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums;
  transition: opacity .2s, transform .12s;
}
.lifeline svg { width: 18px; height: 18px; color: var(--accent); }
.lifeline:active:not(:disabled) { transform: scale(.95); }
.lifeline:disabled { opacity: .5; cursor: default; }
.lifeline.used { text-decoration: line-through; opacity: .35; }

.game-foot { display: grid; gap: 10px; justify-items: stretch; padding-top: 2px; }
.game-foot .btn.big { width: 100%; }
.btn.lock { background: var(--accent); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 35%, transparent); }
.hint { text-align: center; color: var(--muted); font-size: 14px; }
.verdict { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; animation: pop .35s var(--ease); }
.verdict > svg { width: 30px; height: 30px; padding: 4px; border-radius: 50%; color: #fff; flex: none; }
.verdict div { display: grid; }
.verdict strong { font-size: 18px; }
.verdict span { color: var(--muted); font-size: 14.5px; }
.verdict.ok { background: var(--ok-soft); }
.verdict.ok > svg { background: var(--ok); }
.verdict.bad { background: var(--bad-soft); }
.verdict.bad > svg { background: var(--bad); }
.btn.next svg { width: 22px; height: 22px; }

/* Reporting a question */
.report-btn {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 650;
}
.report-btn svg { width: 18px; height: 18px; }
@media (hover: hover) { .report-btn:hover { color: var(--text); background: var(--surface-2); } }
.report-done { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--ok); font-size: 14px; font-weight: 650; }
.report-done svg { width: 18px; height: 18px; }
.report-form { display: grid; gap: 14px; padding-top: 4px; }
.report-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.report-reasons legend { margin-bottom: 6px; }
.reason {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 14px;
  background: var(--surface-2); cursor: pointer; font-weight: 650;
}
.reason input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }
.reason:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); }
.note-field { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.note-field small { color: var(--muted); font-weight: 600; }
.note-field textarea {
  width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; resize: none;
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 500; outline: none;
}
.note-field textarea:focus { box-shadow: 0 0 0 2px var(--brand-2); }
.note-count { justify-self: end; }

/* --- result and challenge --- */

.result, .challenge {
  max-width: 520px; margin: 0 auto; padding-top: 12px;
  display: grid; justify-items: center; text-align: center; gap: 10px;
}
.result-icon, .challenge-badge {
  width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--hero); color: #fff; box-shadow: var(--shadow-lg);
  animation: pop .5s var(--ease);
}
.result-icon svg, .challenge-badge svg { width: 46px; height: 46px; }
.result-icon.complete { background: linear-gradient(160deg, #ffd25e, #ff9d00); color: #3a2400; }
.result-points { font-size: clamp(64px, 20vw, 96px); line-height: 1; font-weight: 900; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.result-sub { color: var(--muted); font-size: 16px; }
.verdict-card { width: 100%; margin-top: 6px; display: grid; gap: 8px; }
.verdict-card strong { font-size: 19px; }
.verdict-card.won { background: var(--ok-soft); box-shadow: none; }
.verdict-card.lost { background: var(--bad-soft); box-shadow: none; }
.verdict-card.tie { background: var(--surface-2); box-shadow: none; }
.versus { display: flex; justify-content: center; gap: 22px; color: var(--muted); flex-wrap: wrap; }
.versus b { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; }
.result-actions { width: 100%; display: grid; gap: 10px; margin-top: 12px; }
.name-field { display: grid; gap: 6px; text-align: left; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.row-actions .btn.tonal { flex: 1 1 180px; }

.challenge h1 { font-size: clamp(28px, 8vw, 38px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; word-break: break-word; }
.to-beat { display: grid; gap: 2px; width: 100%; padding: 18px; margin: 6px 0; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.to-beat strong { font-size: 56px; line-height: 1.05; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.challenge .btn.big { width: 100%; margin-top: 8px; }

.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 60px 16px; }

/* --- sheets --- */

.sheet {
  width: 100%; max-width: 560px; max-height: 86dvh;
  margin: auto auto 0; padding: 0; border: 0; border-radius: 26px 26px 0 0;
  background: var(--elev); color: var(--text); box-shadow: var(--shadow-lg); overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .3s var(--ease); }
.sheet.closing { animation: sheet-out .18s ease-in forwards; }
.sheet::backdrop { background: rgb(8 5 24 / .55); backdrop-filter: blur(2px); }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
.sheet-body { display: flex; flex-direction: column; gap: 6px; overflow: auto; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.sheet-grip { width: 38px; height: 5px; border-radius: 3px; background: var(--surface-3); margin: 0 auto 8px; flex: none; }
.sheet-head { padding: 4px 4px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.sheet-head h2 { font-size: 18px; font-weight: 800; }
.sheet-head p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.sheet-items { display: grid; }
.sheet-item { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 8px; border-radius: 12px; text-align: left; font-weight: 650; }
.sheet-item svg { color: var(--muted); }
.sheet-item span { flex: 1; }
.sheet-item:active { background: var(--surface-2); }
@media (hover: hover) { .sheet-item:hover { background: var(--surface-2); } }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 10px; flex-wrap: wrap; }
.sheet-actions .btn { min-width: 120px; }
.sheet .rules h2 { font-size: 19px; font-weight: 800; margin: 4px 4px 14px; }
.sheet .rules .rules-list, .sheet .rules p { margin-left: 4px; margin-right: 4px; }

/* --- toast --- */

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  padding: 12px 16px; border-radius: 14px; background: #221a45; color: #fff; font-size: 14.5px; font-weight: 650;
  box-shadow: var(--shadow-lg);
}
.toast.show { animation: toast-in .25s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ===================== larger screens ===================== */

@media (min-width: 720px) {
  .view { padding-left: 32px; padding-right: 32px; padding-top: calc(32px + env(safe-area-inset-top, 0px)); }
  .answers { grid-template-columns: 1fr 1fr; }
  .answer { min-height: 76px; }
  .q-card { min-height: 180px; padding: 34px 32px; }
  .sheet { margin: auto; border-radius: 24px; width: min(520px, calc(100% - 48px)); max-height: min(80dvh, 720px); }
  .sheet[open] { animation: dialog-in .22s var(--ease); }
  .sheet.closing { animation: dialog-out .16s ease-in forwards; }
  .sheet-grip { display: none; }
  .sheet-body { padding-top: 18px; padding-bottom: 16px; }
  .game-foot { grid-template-columns: 1fr auto; align-items: center; }
  .game-foot .btn.big { width: auto; min-width: 260px; }
  .game-foot .hint { grid-column: 1 / -1; }
  .game-foot .verdict { grid-column: 1; }
  .game-foot .btn.next { grid-column: 2; }
  .game-foot:has(.lock) { grid-template-columns: 1fr; justify-items: center; }
}
@keyframes dialog-in { from { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes dialog-out { to { opacity: 0; transform: scale(.97); } }

/* Desktop: the home screen goes side by side. */
@media (min-width: 960px) {
  /* Centred in the window; the side cards match the hero's height. */
  .home {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: stretch; gap: 24px;
    min-height: calc((100dvh - 64px) / var(--z)); align-content: center;
  }
  .home-hero { min-height: min(600px, calc((100dvh - 180px) / var(--z))); align-content: center; padding: 48px 32px; }
  .home-side { align-content: start; grid-template-rows: auto 1fr; }
  .home-foot { grid-column: 1 / -1; }
  .result, .challenge { min-height: calc((100dvh - 64px) / var(--z)); align-content: center; }
  .game { max-width: 760px; }
}

/* Large desktops: more room and bigger type. */
@media (min-width: 1400px) {
  .view { max-width: 1240px; }
  .home { gap: 28px; }
  .home-hero { padding: 56px 48px; gap: 12px; }
  .home-hero h1 { font-size: 72px; }
  .home-hero .lead { font-size: 20px; }
  .home-logo { width: 88px; height: 88px; border-radius: 24px; }
  .home-hero .btn.play { width: 360px; min-height: 64px; font-size: 20px; }
  .home-stats div { min-width: 130px; padding: 12px 18px; }
  .home-stats strong { font-size: 26px; }
  .card { padding: 24px 26px; }
  .card h2 { font-size: 20px; }
  .rules-list { gap: 14px; font-size: 16.5px; }
  .game { max-width: 860px; gap: 16px; }
  .q-card { min-height: 210px; padding: 40px 40px; }
  .q-text { font-size: 28px; }
  .answer { min-height: 84px; }
  .answer .txt { font-size: 18px; }
}

/* Very large screens: scale the whole design up rather than leave it small in the middle. */
:root { --z: 1; }
@media (min-width: 1800px) { :root { --z: 1.2; } }
@media (min-width: 2200px) { :root { --z: 1.4; } }
@media (min-width: 2900px) { :root { --z: 1.7; } }
@media (min-width: 1800px) {
  .view, .sheet, .toast { zoom: var(--z); }
}

/* Phones in landscape: question beside the answers. */
@media (orientation: landscape) and (max-height: 540px) {
  .view { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .game { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 18px; row-gap: 8px; align-items: start; }
  .game-bar, .track, .level-row, .intro { grid-column: 1 / -1; }
  .intro { padding: 16px; gap: 6px; }
  .intro-badge { width: 52px; height: 52px; font-size: 26px; border-radius: 16px; }
  .intro h2 { font-size: 26px; }
  .q-card { grid-row: span 3; min-height: 0; height: 100%; }
  .answers { grid-template-columns: 1fr 1fr; gap: 8px; }
  .answer { min-height: 52px; padding: 6px 10px 6px 6px; }
  .answer .key { width: 30px; height: 30px; }
  .answer .txt { font-size: 15px; }
  .game-foot .btn.big { min-height: 48px; }
  .home-hero { padding: 20px; }
  .home-logo { width: 52px; height: 52px; }
}

@media (max-width: 360px) {
  .view { padding-left: 12px; padding-right: 12px; }
  .game-stat { padding: 0 5px; }
  .game-stat strong { font-size: 16px; }
  .home-stats div { min-width: 0; flex: 1; }
  .answer .txt { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}