:root{--ink:#1E2430;--soft:#3A4252;--muted:#5A6272;--bg:#FFFDF6;--line:#EFE9D8;--accent:#C2410C;--y:#FFD900;--g:#8FC31F;--p:#EF5D9C;--b:#50A8DE;--ok:#2F7D1E;--bad:#B42318}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Nunito Sans',system-ui,sans-serif;line-height:1.5}
[hidden]{display:none!important}
h1{font-family:'Fredoka',sans-serif;font-size:clamp(28px,5vw,40px);margin:8px 0 4px}
.top{max-width:1000px;margin:0 auto;padding:16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:21px;color:var(--ink);text-decoration:none}
.dots{display:flex;gap:4px}.dots i{width:11px;height:11px;border-radius:50%;display:block}
.who{display:flex;gap:12px;align-items:center;font-weight:600}
.wrap{max-width:1000px;margin:0 auto;padding:8px 16px 64px}
.sub{color:var(--muted);margin:0 0 16px}
.msg{padding:12px 16px;border-radius:12px;background:#FFF1E8;color:#8A2C06;font-weight:600}
.msg.ok{background:#EAF5D6;color:#2F5A12}
.panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px}
.narrow{max-width:440px;margin:16px auto}
.tabs{display:flex;gap:6px;background:#F5F0E2;border-radius:999px;padding:4px;margin-bottom:18px}
.tab{flex:1;border:0;background:transparent;font:inherit;font-weight:700;padding:10px;border-radius:999px;cursor:pointer;color:var(--soft)}
.tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px}
input{font:inherit;padding:13px 14px;border:2px solid #D9D2BE;border-radius:12px;background:#fff}
input:focus{outline:3px solid #FFD90088;border-color:var(--ink)}
.btn{font:inherit;font-weight:700;border:0;cursor:pointer;background:var(--accent);color:#fff;padding:14px 24px;border-radius:999px}
.btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:12px 22px}
.link{font:inherit;border:0;background:none;color:#1F4E79;font-weight:700;cursor:pointer;padding:6px 0}
.back{margin-bottom:8px}
.hint{color:var(--muted);font-size:14px;margin:0}
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{font:inherit;text-align:left;border:0;cursor:pointer;border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:6px;color:var(--ink);transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card b{font-family:'Fredoka',sans-serif;font-size:22px}
.card span{color:var(--soft)}
.c4{background:#EAF5D6}.c1{background:#FFF7D1}.c2{background:#FCE4EF}.c3{background:#E3F1FA}
.emoji{font-size:40px}
.badge{align-self:flex-start;background:#fff;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700;margin-top:6px}
.game{max-width:640px;margin:0 auto;text-align:center}
.gtop{display:flex;justify-content:space-between;font-weight:700;color:var(--muted)}
.play{font-size:44px;width:96px;height:96px;border-radius:50%;border:0;background:var(--y);cursor:pointer;margin:12px auto 4px;display:block}
.play:active{transform:scale(.95)}
.gtext{font-family:'Fredoka',sans-serif;font-size:24px;min-height:36px;margin:8px 0 16px}
.opts{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{font:inherit;border:3px solid var(--line);background:#fff;border-radius:20px;padding:16px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
.opt .e{font-size:48px;line-height:1.1}
.opt .t{font-weight:700;font-size:14px;color:var(--soft);min-height:20px}
.opt.right{border-color:var(--ok);background:#EAF5D6}
.opt.wrong{border-color:var(--bad);background:#FDECEA}
.gend{margin-top:8px}
.big{font-family:'Fredoka',sans-serif;font-size:30px;margin:8px 0}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.video{aspect-ratio:16/9;background:var(--ink);border-radius:20px;overflow:hidden}
.video iframe{width:100%;height:100%;border:0}
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:560px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
@media (max-width:480px){.opt .e{font-size:38px}.panel{padding:18px}}