*{box-sizing:border-box}
:root{
  --bg:#0c0f14; --panel:#121722; --ink:#eaf1ff;
  --edge:#2a2f3a; --accent:#2a36ff;
}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.view{display:none;max-width:1100px;margin:0 auto;padding:18px}
.view.active{display:block}

.brand{text-align:center;margin:.4rem 0 1rem;
  font-size:clamp(28px,6vw,46px);font-weight:800;
  text-shadow:0 0 10px rgba(63,76,255,.35)}
.task{text-align:center;margin:.2rem 0 1.2rem;opacity:.92}

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

.menu-grid{display:grid;gap:18px;max-width:720px;margin:12px 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}

.topic-row{display:flex;gap:12px;align-items:center;justify-content:center;margin:8px 0 12px}
.topic-card{flex:1;max-width:860px;display:flex;justify-content:center}
.topic-text{width:100%;min-height:90px;display:flex;align-items:center;justify-content:center;
  padding:14px 16px;border:2px solid #24304a;border-radius:999px;background:#121829;text-align:center;line-height:1.35;
  font-size:clamp(26px,5.6vw,42px);font-weight:800}

.controls{text-align:center;margin:6px 0 12px}

.layout{display:grid;grid-template-columns:1fr 240px;gap:16px}
.board{display:grid;gap:10px;justify-content:center}
.board.elementary{grid-template-columns:repeat(4,1fr)}
.board.intermediate{grid-template-columns:repeat(4,1fr)}

.cell{width:min(18vw,100px);height:min(18vw,100px);
  border:2px solid var(--edge);border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:#121722;font-size:60px;user-select:none}
.cell.empty{background:#0f1424;border-style:dashed}

.pick-wrap{border:1px solid #24304a;border-radius:14px;padding:10px}
.pick-title{text-align:center;margin-bottom:8px;opacity:.95}
.picks{display:grid;grid-template-rows:repeat(4,1fr);gap:10px}
.pick-slot{height:70px;border:2px dashed #32405d;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#0d1322;font-size:46px}
.pick-slot.filled{border-style:solid;border-color:#3d4a66;background:#121722}

.shake{animation:shake .35s}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

/* Black & White — интерфейс ч/б, ЭМОДЗИ ОСТАЮТСЯ ЦВЕТНЫМИ */
body.bw{background:#fff;color:#000}
body.bw .brand, body.bw .task, body.bw .level-badge{color:#000;background:#fff;border-color:#000;text-shadow:none}
body.bw .topic-text{background:#fff;border-color:#000;color:#000}
body.bw .menu-card{background:#fff;color:#000;border-color:#000}
body.bw .cell{background:#fff;border-color:#000}
body.bw .pick-wrap{background:#fff;border-color:#000}
body.bw .pick-slot{background:#fff;border-color:#000}
body.bw button{background:#fff;color:#000;border-color:#000;box-shadow:none}

/* Modals */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(6,8,12,.6);backdrop-filter:blur(4px);z-index:1000}
.modal.show{display:flex}
.modal-card{width:min(92vw,720px);max-height:80vh;overflow:auto;background:linear-gradient(180deg,#141b2a,#0e1422);color:var(--ink);border:1px solid #2a2f3a;border-radius:16px;padding:14px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}