:root{
  --cream:#fff6e0; --card:#fffdf6; --navy:#14213d; --ink:#14213d; --muted:#4a5568;
  --yellow:#ffc933; --yellow-d:#e0a800; --green:#157a3f; --green-d:#0e5c2e; --red:#c62828; --red-d:#971c1c;
  --line:#e6d9b8; --shadow:0 6px 0 rgba(20,33,61,.12), 0 14px 30px rgba(20,33,61,.10);
  --radius:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5; min-height:100vh;
  background-image:radial-gradient(circle at 12% 8%, rgba(255,201,51,.28) 0 90px, transparent 91px),
                   radial-gradient(circle at 92% 92%, rgba(255,201,51,.22) 0 120px, transparent 121px);
  background-attachment:fixed;
}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:8px;top:8px}
main{max-width:720px;margin:0 auto;padding:16px 14px 28px}
footer{text-align:center;color:var(--muted);font-size:.8rem;padding:0 14px 28px}
[hidden]{display:none !important}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

.card{background:var(--card);border:3px solid var(--navy);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 18px;position:relative}
.hero{text-align:center}
.mascot{display:flex;justify-content:center;animation:bob 3s ease-in-out infinite}
.stickers .sticker{position:absolute;font-size:2rem;transform:rotate(-12deg);user-select:none}
.s1{top:12px;left:14px}.s2{top:16px;right:16px;transform:rotate(14deg)!important}.s3{top:150px;right:12px;font-size:1.6rem;transform:rotate(-8deg)}
.edition-badge{display:inline-block;margin:.4rem 0 0;padding:.25rem .9rem;background:var(--yellow);border:2px solid var(--navy);border-radius:999px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:.8rem}
h1{font-size:clamp(1.8rem,6vw,2.6rem);line-height:1.1;margin:.5rem 0 .2rem}
h2{font-size:clamp(1.25rem,4.5vw,1.7rem);line-height:1.3;margin:.2rem 0 .6rem}
h3{margin:1.6rem 0 .6rem}
.subtitle{margin:0 0 .6rem;color:var(--muted);font-weight:600}
.tagline{display:inline-block;margin:.2rem 0 1rem;padding:.5rem .9rem;background:#fff;border:2px dashed var(--navy);border-radius:14px;font-weight:800;transform:rotate(-1.2deg)}

form{text-align:left;margin:.5rem 0 1rem}
label{display:block;font-weight:800;margin-bottom:.35rem}
.req{font-weight:600;color:var(--muted);font-size:.85rem}
input[type=text]{width:100%;font:inherit;font-size:1.15rem;padding:.8rem 1rem;border:3px solid var(--navy);border-radius:14px;background:#fff;color:var(--ink)}
input[type=text][aria-invalid=true]{border-color:var(--red)}
.help{color:var(--muted);font-size:.9rem;margin:.35rem 0 .8rem}
.error{color:var(--red-d);font-weight:700;margin:.2rem 0 .8rem}
:focus-visible{outline:4px solid #1a5fff;outline-offset:3px;border-radius:10px}

.btn{font:inherit;font-weight:800;border:3px solid var(--navy);border-radius:16px;padding:.8rem 1.2rem;cursor:pointer;background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--navy);transition:transform .08s, box-shadow .08s}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn.primary{background:var(--yellow)}
.btn.secondary{background:#fff}
.btn.big{width:100%;font-size:1.2rem;padding:1rem}
.btn.link{border:none;box-shadow:none;background:none;text-decoration:underline;padding:.5rem;font-weight:700}
.rules{text-align:left;background:#fff;border:2px solid var(--line);border-radius:16px;padding:.6rem 1rem;margin:1rem 0}
.rules h2{font-size:1.1rem;margin:.3rem 0}
.rules ul{margin:.2rem 0 .4rem;padding-left:1.2rem}
.privacy{font-size:.85rem;color:var(--muted);text-align:left;margin:.8rem 0 0}
.demo-flag{background:#fff3cd;border:2px solid var(--yellow-d);border-radius:12px;padding:.5rem .8rem;font-size:.9rem}

.notice{border:2px solid var(--navy);border-radius:14px;padding:.7rem .9rem;margin:.8rem 0;background:#eef6ff;text-align:left}
.notice p{margin:.1rem 0 .4rem}
.notice.warn{background:#fff3cd;border-color:var(--yellow-d)}
.notice.good{background:#e3f6e8;border-color:var(--green)}
.notice.bad{background:#fde8e8;border-color:var(--red)}

/* quiz */
.topbar{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
.topbar p{margin:0}
.progress-text{font-weight:800}
.score-pill{background:var(--navy);color:#fff;border-radius:999px;padding:.2rem .8rem;font-weight:800;font-size:.95rem}
.timer{width:62px;height:62px;border-radius:50%;border:4px solid var(--navy);background:var(--yellow);display:flex;align-items:baseline;justify-content:center;font-weight:900;font-size:1.7rem;padding-top:9px}
.timer small{font-size:.75rem;margin-left:1px}
.timer.low{background:#ffd1d1;border-color:var(--red-d);animation:pulse .5s ease-in-out infinite alternate}
.bar{height:10px;background:#efe3c3;border-radius:999px;overflow:hidden;margin:10px 0 0;border:2px solid var(--navy)}
.bar-fill{height:100%;width:0;background:var(--navy)}
.timer-bar{height:8px;margin-top:6px}
.timer-bar .bar-fill{background:var(--yellow-d);width:100%}
.topic{display:inline-block;margin:1.1rem 0 .2rem;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:#fff;border:2px solid var(--navy);border-radius:999px;padding:.1rem .7rem}
#q-statement{font-size:clamp(1.25rem,4.6vw,1.75rem);min-height:5.5em;margin-top:.5rem;outline:none}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:.6rem}
.answers.swap .true{order:2}
.btn.answer{font-size:clamp(1.3rem,6vw,2rem);padding:1.4rem .5rem;min-height:92px;color:#fff;letter-spacing:.04em}
.btn.answer.true{background:var(--green)}
.btn.answer.false{background:var(--red)}
.btn.answer.picked{outline:5px solid var(--yellow);outline-offset:2px}
.kbd-hint{color:var(--muted);font-size:.8rem;text-align:center;margin:.7rem 0 0}
kbd{background:#fff;border:1px solid var(--navy);border-radius:5px;padding:0 .35rem;font-family:inherit;font-weight:700}
.reaction{min-height:2.6em;margin:.7rem 0 0;font-weight:800;text-align:center;font-size:1.05rem}
.reaction.ok{color:var(--green-d)}.reaction.no{color:var(--red-d)}.reaction.late{color:#7a5b00}
.reaction.pop{animation:pop .3s ease-out}

/* results */
.results{text-align:center}
.big-emoji{font-size:3.5rem;margin:0;animation:bob 2.6s ease-in-out infinite}
.blurb{color:var(--muted);font-weight:600;margin:.2rem 0 .6rem}
.final-score{font-size:4rem;font-weight:900;margin:.2rem 0;line-height:1}
.final-score small{font-size:1.6rem;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:1rem 0}
.stats div{background:#fff;border:2px solid var(--navy);border-radius:14px;padding:.5rem}
.stats dt{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase}
.stats dd{margin:0;font-size:1.6rem;font-weight:900}
.stats .ok dd{color:var(--green)}.stats .bad dd{color:var(--red)}.stats .late dd{color:#7a5b00}
.actions{margin:1rem 0}
.actions.row{display:grid;gap:12px}
.review{list-style:none;margin:0;padding:0;text-align:left;display:grid;gap:12px}
.review li{background:#fff;border:2px solid var(--line);border-left-width:10px;border-radius:14px;padding:.8rem .9rem}
.review li.ok{border-left-color:var(--green)}.review li.no{border-left-color:var(--red)}.review li.late{border-left-color:var(--yellow-d)}
.review .rq{font-weight:800;margin:0 0 .3rem}
.review .chips{display:flex;flex-wrap:wrap;gap:6px;margin:.2rem 0 .5rem}
.chip{border:2px solid var(--navy);border-radius:999px;padding:0 .6rem;font-size:.85rem;font-weight:800;background:#fff}
.chip.right{background:#d4f1de}.chip.wrong{background:#ffd9d9}.chip.none{background:#fff0b8}
.review .why{margin:.2rem 0;font-size:1rem;line-height:1.55}
.review a{font-size:.85rem}

/* certificate */
.certcard{text-align:center}
.cert-preview{margin:1rem 0;padding:1.2rem .8rem;background:#fff;border:6px double #b8902a;outline:3px solid var(--navy);outline-offset:-12px;border-radius:6px}
.cp-org{margin:0;letter-spacing:.3em;font-weight:800;text-transform:uppercase;font-size:.85rem}
.cp-title{margin:.3rem 0;font-family:Georgia,"Times New Roman",serif;font-size:1.6rem;font-weight:700;color:var(--navy)}
.cp-name{margin:.6rem 0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.9rem;font-weight:700;color:#8a6a10;word-break:break-word}
.cp-line,.cp-meta{margin:.2rem 0;font-size:.95rem}
.cp-meta{color:var(--muted);font-size:.85rem}

footer p{margin:0}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes pop{from{transform:scale(.9);opacity:.3}to{transform:scale(1);opacity:1}}
.screen:not([hidden]){animation:fade .25s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .actions.row{grid-template-columns:1fr 1fr}
  .card{padding:30px 30px}
}
@media (max-width:380px){
  .answers{gap:8px}.btn.answer{min-height:80px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}