:root{
  --bg:#f4f7fb;--card:#fff;--text:#172033;--muted:#64748b;--line:#dbe3ee;
  --primary:#2855d9;--primary2:#1f46bd;--ok:#16834d;--oksoft:#eaf8f0;
  --bad:#c73636;--badsoft:#fff0f0;--warn:#a86600;--shadow:0 8px 24px rgba(31,51,73,.08);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.45}
button,input{font:inherit}.topbar{background:#fff;border-bottom:1px solid var(--line)}.topbar-inner{max-width:1180px;margin:auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.back{color:#29445f;text-decoration:none;font-weight:750}.brand{font-weight:850;color:#27384d}
.hero{background:linear-gradient(135deg,var(--primary2),#356ee8 58%,#5b89f3);color:#fff;padding:28px 16px 24px}.hero-inner,.page{max-width:1180px;margin:auto}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:850;color:#dce6ff}.hero h1{margin:4px 0 7px;font-size:clamp(1.75rem,4vw,2.8rem)}.hero p{margin:0;color:#edf3ff;max-width:840px}.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.stat{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.23);border-radius:14px;padding:11px 13px}.stat span{display:block;font-size:.78rem;color:#dce6ff}.stat strong{display:block;font-size:1.4rem;margin-top:1px}
.page{padding:18px 16px 50px}.intro,.result,.game-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;margin-bottom:18px}.intro h2,.result h2,.game-card h2{margin:0 0 8px}.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}.rule{background:#eef3ff;border:1px solid #d8e3ff;border-radius:13px;padding:11px 12px}.rule b{display:block;margin-bottom:2px}.btn{border:0;border-radius:12px;padding:11px 15px;font-weight:800;cursor:pointer}.btn-primary{background:var(--primary);color:#fff}.btn-light{background:#fff;border:1px solid var(--line);color:var(--text)}.btn:disabled{opacity:.55;cursor:not-allowed}
.workbar{position:sticky;top:0;z-index:20;background:rgba(244,247,251,.96);backdrop-filter:blur(8px);display:none;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0 10px;margin-bottom:8px}.workbar.show{display:flex}.clock{font-size:1.3rem;font-weight:900;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 13px;min-width:105px;text-align:center}.clock.warning{background:#fff2db;border-color:#f0c26c;color:#8d5200}.answered{font-weight:750;color:#53627a}.workbar .spacer{flex:1}
.task-area{display:none}.task-area.show{display:block}.task-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.task-section{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px}.task-section h2{margin:0 0 3px;font-size:1.24rem}.task-section>p{margin:0 0 12px;color:var(--muted)}.task-list{display:grid;gap:8px}.task-row{display:grid;grid-template-columns:42px minmax(120px,1fr) 126px 38px;align-items:center;gap:8px;border:1px solid #e1e7ef;border-radius:12px;padding:8px 9px;background:#fff}.task-row.correct{background:var(--oksoft);border-color:#b8dfca}.task-row.wrong{background:var(--badsoft);border-color:#efbcbc}.nr{font-weight:850;color:#516079}.expr{font-size:1.02rem;font-weight:800}.answer{width:100%;min-width:0;border:1px solid #bac7d8;border-radius:9px;padding:8px 9px;text-align:center;font-weight:800;background:#fff}.answer:focus{outline:3px solid #dbe6ff;border-color:#6688e6}.sign-btn{border:1px solid #c7d1df;background:#f7f9fc;border-radius:9px;min-height:38px;font-size:1.05rem;font-weight:900;cursor:pointer}.solution{grid-column:2/5;color:#7a2f2f;font-size:.86rem;font-weight:750;display:none}.task-row.wrong .solution{display:block}
.result{display:none}.result.show{display:block}.result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:13px 0}.result-box{border:1px solid var(--line);border-radius:13px;padding:10px 12px;background:#f8fafc}.result-box span{display:block;font-size:.78rem;color:var(--muted)}.result-box strong{font-size:1.25rem}.result.good{border-color:#b9dec9;background:#f6fcf8}.result.bad{border-color:#f0caca;background:#fffafa}.reward-text{padding:12px 14px;border-radius:13px;background:#f3f7ff;border:1px solid #d6e1fb;font-weight:750}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.game-card{display:none;border-color:#b9dec9;background:#f8fdf9}.game-card.show{display:block}.snake-stats{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.snake-stat{min-width:155px;background:#fff;border:1px solid #b9dec9;border-radius:12px;padding:9px 12px}.snake-stat span{display:block;font-size:.76rem;color:#607266}.snake-stat strong{font-size:1.2rem}.snake-wrap{width:min(100%,540px);margin:14px auto 0}#snakeCanvas{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#f7fbf7;border:2px solid #9bd4b5;border-radius:16px;touch-action:none}.snake-controls{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,54px);gap:7px;justify-content:center;margin:12px auto 0}.snake-control{border:1px solid #b9cfc0;background:#fff;border-radius:12px;font-size:1.35rem;font-weight:900}.snake-up{grid-column:2;grid-row:1}.snake-left{grid-column:1;grid-row:2}.snake-down{grid-column:2;grid-row:2}.snake-right{grid-column:3;grid-row:2}.snake-message{min-height:26px;margin-top:9px;font-weight:800;color:#365a46;text-align:center}
@media(max-width:820px){.task-columns{grid-template-columns:1fr}.hero-stats,.rules,.result-grid{grid-template-columns:1fr 1fr}.workbar{top:0}.task-row{grid-template-columns:36px minmax(108px,1fr) 112px 38px}}
@media(max-width:480px){.hero-stats,.rules,.result-grid{grid-template-columns:1fr}.task-section{padding:12px}.task-row{grid-template-columns:30px minmax(105px,1fr) 92px 36px;gap:6px;padding:7px}.nr{font-size:.9rem}.expr{font-size:.96rem}.answer{padding:8px 5px}.workbar .btn{padding:9px 10px}.clock{font-size:1.15rem;min-width:92px}}

.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.mode-card{border:2px solid var(--line);background:#fff;border-radius:15px;padding:16px;text-align:left;cursor:pointer;min-height:98px}.mode-card b{display:block;font-size:1.2rem;color:#17365a;margin-bottom:5px}.mode-card span{display:block;color:var(--muted);line-height:1.4;font-size:.9rem}.mode-card:hover{border-color:#8da8ed}.mode-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(40,85,217,.11)}.mode-card.easy.selected{background:#f2faf5}.mode-card.standard.selected{background:#eef3ff}.mode-pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:850;color:#44566d}
@media(max-width:620px){.mode-grid{grid-template-columns:1fr}}