:root { --bg:#0f172a; --panel:#1e293b; --line:#334155; --text:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; color-scheme:dark; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:1000px; margin:0 auto; padding:12px 12px 32px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.home { align-self:flex-start; color:var(--accent); text-decoration:none; }
h1 { margin:0; font-size:1.5rem; }
button { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 12px; cursor:pointer; }
button.on, button:hover { border-color:var(--accent); }
.levels { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.hud { display:flex; align-items:center; gap:16px; }
.lcd { font:700 1.6rem ui-monospace,Menlo,monospace; background:#000; color:#f43f5e; padding:2px 10px; border-radius:6px; min-width:4.2ch; text-align:center; }
#face { font-size:1.6rem; line-height:1; padding:4px 10px; }
#board { --cs:min(34px, calc((100vw - 28px) / var(--cols))); display:grid; grid-template-columns:repeat(var(--cols), var(--cs)); gap:1px; background:var(--line); border:2px solid var(--line); touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.cell { width:var(--cs); height:var(--cs); display:flex; align-items:center; justify-content:center; background:#475569; font:700 calc(var(--cs) * .55)/1 system-ui,sans-serif; cursor:pointer; }
.cell { border-radius:3px; box-shadow:inset 0 2px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.24); transition:background .12s ease; }
.cell:not(.open):hover { background:#64748b; }
.cell.open { background:#1e293b; cursor:default; box-shadow:inset 0 0 0 1px rgba(148,163,184,.13); }
.cell.mine { background:#3f1d2b; }
.cell.boom { background:#b91c1c; }
.cell.wrong { background:#7f1d1d; }
.n1{color:#60a5fa}.n2{color:#4ade80}.n3{color:#f87171}.n4{color:#a78bfa}.n5{color:#fb923c}.n6{color:#2dd4bf}.n7{color:#e2e8f0}.n8{color:#94a3b8}
.bar { display:flex; gap:16px; align-items:center; color:var(--muted); }
#msg { min-height:1.4em; margin:0; font-weight:600; }
.help { margin:0; color:var(--muted); font-size:.8rem; text-align:center; max-width:560px; }

/* Blue, beveled field from the game cover; opened cells stay easy to scan. */
#board { --cs:min(34px, calc((100vw - 84px) / var(--cols))); gap:2px; padding:4px; background:#326eaf; border:4px solid #205a98; border-radius:14px; }
.cell { color:#163b6e; background:linear-gradient(145deg,#b9d9fc,#75afe8); box-shadow:inset 0 2px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(31,91,160,.28), 0 1px 3px rgba(12,53,100,.2); }
.cell:not(.open):hover { background:linear-gradient(145deg,#d7eaff,#91c2f0); }
.cell.open { background:#e8f2fc; box-shadow:inset 0 0 0 1px #b8d2ed; }
.cell.mine { background:#f9dde0; }
.cell.boom { background:#f5a8ac; }
.cell.wrong { background:#f3c8c8; }
.n1 { color:#1c5dc4; } .n2 { color:#188452; } .n3 { color:#cc3548; } .n4 { color:#704da6; }
.n5 { color:#ad562e; } .n6 { color:#087d9a; } .n7 { color:#273850; } .n8 { color:#617087; }