*{box-sizing:border-box}
:root{
  --bg:#0c0f14; --panel:#121722; --ink:#eaf1ff; --muted:#9aa0a6;
  --edge:#2a2f3a; --ok:#20e07a; --err:#ff5b5b;
  --boardSize:360px; --gridSize:3;
}
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;padding:20px;max-width:980px;margin:0 auto}
.view.active{display:block}
.brand{margin:.2rem 0 1rem;font-size:clamp(28px,5.2vw,44px);text-align:center;text-shadow:0 0 8px rgba(122,140,255,.35)}
.brand.small{margin-top:10px}
.task{text-align:center;opacity:.9;margin:.2rem 0 1rem}

.game-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.game-top .left,.game-top .right{display:flex;align-items:center;gap:10px}
.level-badge{font-size:.9rem;opacity:.95;background:linear-gradient(180deg,#161c2a,#0e1320);padding:.4rem .7rem;border-radius:.6rem;border:1px solid #24304a;box-shadow:inset 0 0 8px rgba(122,140,255,.35)}

.menu-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:720px;margin:10px auto 0}
.menu-card{display:grid;place-items:center;padding:32px 18px;border-radius:18px;background:linear-gradient(180deg,#161c2a,#0e1320);border:2px solid #24304a;box-shadow:0 12px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05),0 0 22px rgba(122,140,255,.25)}
.menu-card .title{font-size:clamp(22px,6vw,36px);font-weight:800;margin-bottom:6px}
.menu-card .subtitle{opacity:.9}
.back-row{display:flex;justify-content:center;margin-top:12px}

button{cursor:pointer;border:1px solid #2a2f3a;color:var(--ink);padding:.7rem 1rem;border-radius:.9rem;background:linear-gradient(180deg,#1a2132,#0f1424);box-shadow:0 8px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06),0 0 12px rgba(122,140,255,.25);transition:transform .08s ease,box-shadow .12s ease,filter .12s ease}
button:hover{box-shadow:0 10px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08),0 0 16px rgba(122,140,255,.35);transform:translateY(-1px)}
button:active{transform:translateY(0);filter:brightness(.96)}
button.primary{border-color:#3f4cff;background:linear-gradient(180deg,#2a36ff,#1b25b8);box-shadow:0 0 18px rgba(63,76,255,.45),inset 0 1px 0 rgba(255,255,255,.15)}
button.ghost{background:transparent;border:1px solid #2a2f3a}

.hud-line{display:flex;align-items:flex-start;margin:.2rem 0 .2rem}
.hud-line .spacer{flex:1}
.timer-wrap{display:grid;place-items:center;padding:6px 10px;border:1px solid #24304a;border-radius:10px;background:#121829}
.timer-label{font-size:.9rem;opacity:.8}
.timer{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.5px;font-size:clamp(24px,4.8vw,36px)}

.center-line{display:flex;justify-content:center;margin:.2rem 0 .2rem}
.lives{display:flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid #24304a;border-radius:10px;background:#121829}
#livesIcons{letter-spacing:2px}

.category-title{margin:.2rem 0 .6rem;text-align:center;font-size:clamp(40px,8vw,72px);text-shadow:0 0 10px rgba(122,140,255,.35)}

.controls{display:flex;justify-content:center;margin:.2rem 0 .6rem}
.controls .group{display:flex;align-items:center;gap:10px}

.board-wrap{display:grid;place-items:center}
.board{width:min(92vw,var(--boardSize));aspect-ratio:1/1;display:grid;gap:6px;grid-template-columns:repeat(var(--gridSize),1fr);grid-template-rows:repeat(var(--gridSize),1fr)}
.cell{position:relative;display:grid;place-items:center;border:2px solid var(--edge);border-radius:12px;background:#121722;user-select:none;overflow:hidden;aspect-ratio:1/1}
:root{--cellSize:calc(var(--boardSize)/var(--gridSize))}
.cell .emoji{font-size:calc(var(--cellSize)*0.70);line-height:1}
.cell.filled{border-color:#3d4a66}
.cell.correct{animation:pop .12s ease-out both}
.cell.wrong{animation:blink-red 1s ease-out both}
@keyframes pop{from{transform:scale(.92)}to{transform:scale(1)}}
@keyframes blink-red{0%{box-shadow:0 0 0 2px rgba(255,91,91,.9) inset;border-color:#ff5b5b}100%{box-shadow:none;border-color:#3d4a66}}

.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,640px);max-height:80vh;overflow:auto;background:linear-gradient(180deg,#141b2a,#0e1422);color:var(--ink);border:1px solid #2a2f3a;border-radius:16px;padding:16px 16px 18px;box-shadow:0 24px 48px rgba(0,0,0,.6),0 0 26px rgba(122,140,255,.25)}
.modal-body .cta-row{display:flex;justify-content:center;margin-top:10px}

.site-footer{margin-top:24px;padding:14px 20px;border-top:1px solid #202636;color:#aab3c8}
.foot-inner{max-width:980px;margin:0 auto;text-align:center;opacity:.9}

/* Black & White */
body.bw{background:#fff;color:#000}
body.bw .brand,body.bw .task,body.bw .level-badge{color:#000;text-shadow:none}
body.bw .board{background:#fff}
body.bw .cell{background:#fff;border-color:#000}
body.bw .cell.filled{border-color:#000}
body.bw .site-footer{display:none}

/* B&W categories grid */
#bwCategories{display:grid;gap:6px;justify-items:center;margin:.2rem auto .6rem;max-width:720px}
#bwCategories[hidden]{display:none}
.bw-cats .row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:720px;width:100%}
.bw-cats .row span{border:1px solid #000;padding:6px 10px;border-radius:10px;background:#fff;color:#000;text-align:center;font-weight:700}