:root {
  color-scheme: light dark;
  --ink: #211823;
  --muted: #685962;
  --canvas: #faf6f0;
  --paper: #fffdf9;
  --line: #e7dcd5;
  --accent: #a33424;
  --coral: #ff684a;
  --amber: #ffc15f;
  --green: #126448;
  --result-bg: #e8f3ea;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--canvas);
  color: var(--ink);
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #fff5eb;
    --muted: #c4b4c0;
    --canvas: #100d14;
    --paper: #211a25;
    --line: #3b2d3d;
    --accent: #ff987f;
    --green: #8ce0bd;
    --result-bg: #1c322a;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
.shell button, .shell a { -webkit-tap-highlight-color: transparent; }
.shell button:focus-visible, .shell a:focus-visible, .shell summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.shell { width: min(100%, 520px); margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.masthead, footer, .progress, .brand, .edition { display: flex; align-items: center; }
.masthead, footer, .progress { justify-content: space-between; gap: 10px; }
.brand { gap: 9px; font-size: 22px; letter-spacing: -.07em; font-weight: 850; }
.brand img { border-radius: 10px; }
.edition, footer, .eyebrow, .progress { font-size: .7rem; font-weight: 760; letter-spacing: .12em; }
.edition { gap: 6px; color: var(--muted); }
.edition span { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
main { margin-top: 16px; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2.5rem, 11vw, 4.7rem); font-weight: 880; line-height: .95; letter-spacing: -.065em; }
h1 em { color: var(--accent); font-style: normal; }
h2 { font-size: clamp(1.5rem, 7vw, 2.2rem); line-height: 1.04; letter-spacing: -.055em; }
.intro { border: 1px solid var(--line); background: var(--paper); border-radius: 27px; padding: 26px 20px 20px; overflow: hidden; }
.intro p, .summary > p { margin: 14px 0; color: var(--muted); line-height: 1.5; }
.intro .eyebrow { display: block; margin-bottom: 12px; color: var(--accent); }
.cover { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 22px 0 26px; height: clamp(150px, 52vw, 240px); align-items: center; }
.shell button, .button { appearance: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 16px;
  min-height: 51px; padding: 11px 12px; font: 750 1rem/1.2 system-ui, sans-serif; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.shell button:disabled { cursor: wait; opacity: .67; }
.shell button:active:not(:disabled), .button:active { transform: scale(.98); }
.primary { border-color: transparent; color: #231516; background: linear-gradient(120deg, #ff876d, #ffc15f); }
.wide { width: 100%; }
.summary { padding: 25px 20px 20px; border: 1px solid var(--line); background: var(--paper); border-radius: 27px; text-align: center; }
.summary h1 { margin-top: 11px; font-size: clamp(2.2rem, 9vw, 3rem); }
.summary .score { color: var(--ink); margin-top: 14px; font-size: clamp(5rem, 25vw, 8rem); font-weight: 850; line-height: .95; letter-spacing: -.10em; }
.score { animation: score-in 420ms cubic-bezier(.22,1,.36,1) both; }
@keyframes score-in { from { transform: translateY(8px) scale(.83); opacity: .45; } to { transform: none; opacity: 1; } }
.score small { color: var(--muted); font-size: .32em; letter-spacing: -.04em; }
.comparison { margin: 15px 0; padding: 11px; border-radius: 14px; background: var(--result-bg); color: var(--green); font-weight: 740; }
.result-actions { display: grid; gap: 8px; }
.share-field { width: 100%; padding: 12px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.notice:empty { display: none; }
.notice { margin: 12px 0; color: var(--accent); font-size: .9rem; }
footer { margin-top: 18px; color: var(--muted); font-size: .63rem; padding: 0 3px; }
footer b { color: var(--accent); margin: 0 3px; }
.enter { animation: enter 200ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes enter { from { opacity: .45; transform: translateY(7px) scale(.988); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.cover-card {
  aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 15px;
  background: #39273c; color: #ffc15f; font-size: clamp(1.3rem, 8vw, 3.3rem); font-weight: 850;
  border: 1px solid #63516a; transform: rotate(-10deg);
}
.cover-card:nth-child(2) { z-index: 1; background: linear-gradient(145deg, #ff684a, #ffc15f); color: #281618; transform: rotate(4deg) scale(1.12); }
.cover-card:last-child { background: #2e2634; transform: rotate(12deg); }
.tally { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 15px auto; max-width: 350px; }
.tally span { height: 6px; background: var(--line); border-radius: 6px; }
.tally .filled { background: linear-gradient(100deg, var(--coral), var(--amber)); transform-origin: left; animation: tally-in 380ms ease-out both; }
@keyframes tally-in { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
.benchmark { text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 12px 0; }
.benchmark p { font-weight: 750; }
.benchmark strong { color: var(--accent); font-size: 1.32em; font-variant-numeric: tabular-nums; }
.benchmark small { display: block; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.app-panel { text-align: left; border-radius: 18px; margin-top: 15px; padding: 16px; background: #251b2c; color: #fff5eb; }
.app-panel .eyebrow { color: #ffbd9c; }
.app-panel h2 { margin: 7px 0 10px; font-size: clamp(1.3rem, 6vw, 1.9rem); }
.app-panel p { font-size: .92rem; line-height: 1.4; }
.app-panel .features { color: #f1c9b5; font-weight: 680; font-size: .82rem; margin: 10px 0; }
.app-panel .app-cta, .app-panel summary { width: 100%; color: #fff5eb; background: #3d2e46; border-color: #66516f; }
.app-panel summary { padding: 12px; border: 1px solid #66516f; border-radius: 11px; font-weight: 740; }
.app-panel details { color: #fff5eb; margin-bottom: 0; }
.app-panel details > p { margin-top: 10px; }

#round-game { height: 100dvh; min-height: 320px; display: flex; flex-direction: column; overflow: hidden; background: #0d0a12; }
#round-game[hidden], .shell[hidden] { display: none; }