*{box-sizing:border-box}
:root{
  --bg:#0c0f14; --ink:#eaf1ff; --edge:#2a2f3a; --ok:#20e07a; --err:#ff5b5b;
}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.view{display:none;padding:20px;max-width:980px;margin:0 auto}
.view.active{display:block}
.brand{text-align:center;margin:.5rem 0;font-size:clamp(28px,6vw,46px);text-shadow:0 0 8px rgba(122,140,255,.35)}
.task{text-align:center;margin:.4rem 0 1.2rem;opacity:.9}

.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.level-badge{font-size:.9rem;opacity:.95;background:#121829;padding:.35rem .7rem;border-radius:.6rem;border:1px solid #24304a}
button{cursor:pointer;border:1px solid var(--edge);border-radius:.8rem;padding:.6rem 1.1rem;background:#1a2132;color:var(--ink);transition:.15s}
button.primary{background:#2a36ff;border-color:#2a36ff;box-shadow:0 0 14px rgba(63,76,255,.45)}
button:disabled{opacity:.55;cursor:default}
button.ghost{background:transparent}

.menu-grid{display:grid;gap:18px;max-width:680px;margin:16px auto}
.menu-card{display:grid;place-items:center;padding:28px;border-radius:16px;border:2px solid #24304a;background:#121722;text-align:center}
.menu-card .title{font-size:clamp(22px,5vw,36px);margin-bottom:4px}
.menu-card .subtitle{opacity:.85}

.controls{text-align:center;margin-bottom:14px}
.controls button{margin:0 6px}

.board-wrap{display:flex;justify-content:center}
.board{display:grid;gap:12px;justify-content:center}

.cell{width:min(20vw,110px);height:min(20vw,110px);border:2px solid var(--edge);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:64px;position:relative;background:#121722;user-select:none}
.cell.correct{border-color:var(--ok);box-shadow:0 0 10px var(--ok)}
.cell.correct::after{content:"✓";position:absolute;bottom:6px;right:8px;color:var(--ok);font-size:20px}
.cell.wrong{border-color:#ff5b5b;box-shadow:0 0 10px #ff5b5b}

/* Layout per level */
.board.elementary {grid-template-columns:repeat(4,1fr)}
.board.intermediate{grid-template-columns:repeat(3,1fr)} /* 3x2 */

/* Black & White mode */
body.bw{background:#fff;color:#000}
body.bw .brand, body.bw .task, body.bw .level-badge{color:#000;text-shadow:none;background:#fff;border-color:#000}
body.bw .cell{background:#fff;border-color:#000}
body.bw .cell.correct{border-color:#000;box-shadow:none}
body.bw .cell.wrong{border-color:#000;box-shadow:none}
body.bw #goBtn{display:none}
body.bw #nextBtn{background:#fff;color:#000;border-color:#000;box-shadow:none}
body.bw .menu-card{background:#fff;color:#000;border-color:#000}