:root{color-scheme:light;--ink:#2d2933;--muted:#665f6d;--paper:#fffaf7;--panel:#fff;--berry:#a84d72;--gold:#d59b31;--teal:#438e8b;--violet:#755d92;--line:#e4d7de;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{background:#f7eced}body{margin:0;color:var(--ink);background:radial-gradient(circle at 8% 8%,#f6cf72 0 110px,transparent 113px),radial-gradient(circle at 92% 10%,#91d3c7 0 140px,transparent 143px),linear-gradient(145deg,#fbe7e1,#f4edf7 55%,#e1f0ec);min-height:100vh}
a{color:inherit;text-underline-offset:.2em}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #442e77;outline-offset:3px}
main{max-width:1120px;margin:auto;padding:28px 18px 56px}.back{display:inline-block;margin-bottom:20px;font-weight:800}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--berry)}
.hero{background:rgba(255,255,255,.87);border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:0 16px 40px rgba(71,53,68,.1);margin-bottom:22px}.hero h1{font-size:clamp(38px,7vw,68px);line-height:.96;margin:7px 0 14px}.hero p{font-size:18px;line-height:1.55;color:var(--muted);max-width:780px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{display:flex;flex-direction:column;min-height:260px;text-decoration:none;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 12px 28px rgba(71,53,68,.08)}.card:hover{transform:translateY(-2px)}.card .icon{font-size:44px}.card small{font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--berry)}.card h2{font-size:28px;line-height:1.06;margin:8px 0}.card p{line-height:1.5;color:var(--muted);flex:1}.card strong{color:var(--berry)}
.game-shell{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:26px;padding:24px;box-shadow:0 16px 40px rgba(71,53,68,.1)}.game-shell h1{font-size:clamp(34px,6vw,58px);line-height:.98;margin:5px 0 12px}.lead{font-size:17px;line-height:1.55;color:var(--muted);max-width:820px}.meta{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.pill{border:1px solid var(--line);border-radius:999px;padding:6px 10px;background:#fbf4f6;font-size:12px;font-weight:800}
.panel{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}.panel h2{margin-top:0}.status{min-height:24px;font-weight:800}.muted{color:var(--muted)}.score{font-weight:900;color:var(--berry)}
.choices{display:grid;gap:10px;margin:16px 0}.choice{width:100%;text-align:left;border:1px solid #d8c6d0;background:#fff;border-radius:14px;padding:14px}.choice:hover{background:#fff4f7}.choice.correct{border-color:#3f866b;background:#e9f5ee}.choice.wrong{border-color:#b45a5a;background:#fbecec}.choice:disabled{opacity:1}
.primary{border:0;border-radius:12px;background:var(--berry);color:white;padding:12px 16px;font-weight:900}.secondary{border:1px solid #cbb7c2;border-radius:12px;background:white;padding:11px 15px;font-weight:800}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.evidence article{border:1px solid var(--line);border-radius:14px;padding:13px;background:#fffaf7}.evidence b{display:block;margin-bottom:5px}
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.control label{display:flex;justify-content:space-between;gap:12px;font-weight:800}.control input{width:100%}
canvas{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);background:linear-gradient(#dff3ff 0 70%,#e5d8a7 70%);display:block}
.topic-tabs{display:flex;gap:8px;flex-wrap:wrap}.topic-tabs button{border:1px solid #cfbbc6;background:white;border-radius:999px;padding:8px 12px;font-weight:800}.topic-tabs button.active{background:var(--violet);color:white;border-color:var(--violet)}
.result{border-left:5px solid var(--teal);padding:12px 14px;background:#eef8f6;border-radius:8px;margin-top:12px}.footer-note{text-align:center;color:var(--muted);font-size:13px;margin-top:22px}
@media(max-width:820px){.grid{grid-template-columns:1fr}.evidence,.controls{grid-template-columns:1fr}.hero,.game-shell{padding:20px}.card{min-height:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}