:root { color-scheme: dark; --ink:#f2efe3; --muted:#9aa79e; --panel:#243229; --edge:#617064; --accent:#d9f259; --danger:#ff6b5f; --cell:36px; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#111713; background-image:radial-gradient(#29342c 1px,transparent 1px); background-size:18px 18px; }
.shell { min-height:100vh; display:grid; place-items:center; padding:28px 18px; }
.game { width:min-content; max-width:100%; padding:20px; border:1px solid #465248; border-radius:16px; background:#18211bea; box-shadow:0 24px 80px #0008, inset 0 1px #ffffff0d; }
.topline,.console,.footer { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.topline { margin-bottom:18px; }
h1 { margin:1px 0 0; font:700 clamp(25px,4vw,36px)/1 Georgia,serif; letter-spacing:-.03em; }
.eyebrow { margin:0; color:var(--accent); font:700 10px/1 monospace; letter-spacing:.2em; }
label { display:grid; gap:5px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
select { min-width:130px; border:1px solid var(--edge); border-radius:6px; padding:7px 10px; color:var(--ink); background:var(--panel); font:600 13px inherit; }
.console { padding:12px 18px; border:1px solid #536057; border-radius:8px 8px 0 0; background:#202b24; }
.console>div { display:grid; text-align:center; }
.counter { color:var(--accent); font:700 25px/1 "Courier New",monospace; letter-spacing:.06em; text-shadow:0 0 13px #d9f25966; }
small { margin-top:4px; color:var(--muted); font:700 9px/1 monospace; letter-spacing:.15em; }
.face { width:46px; height:42px; border:1px solid #718075; border-radius:7px; background:#344339; box-shadow:inset 0 1px #8e9a91,0 3px #111914; font-size:22px; cursor:pointer; }
.face:active { transform:translateY(2px); box-shadow:inset 0 1px #111914; }
.board-wrap { max-width:calc(100vw - 38px); overflow:auto; border:1px solid #59665d; border-top:0; background:#151d18; }
.board { display:grid; grid-template-columns:repeat(var(--cols),var(--cell)); width:max-content; padding:8px; gap:2px; }
.cell { width:var(--cell); height:var(--cell); display:grid; place-items:center; border:1px solid #647268; border-radius:3px; color:#eae7d9; background:#34443a; box-shadow:inset 2px 2px #65746a,inset -2px -2px #172019; font:800 17px/1 monospace; cursor:pointer; user-select:none; }
.cell:hover { background:#405247; }
.cell:focus-visible,.face:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:2px; z-index:2; }
.cell.open { border-color:#263129; background:#202a23; box-shadow:inset 0 0 0 1px #18201b; cursor:default; }
.cell.mine { color:#19130f; background:var(--danger); }
.cell[data-count="1"]{color:#69a7ff}.cell[data-count="2"]{color:#74d894}.cell[data-count="3"]{color:#ff857b}.cell[data-count="4"]{color:#b09cff}.cell[data-count="5"]{color:#ffbd73}.cell[data-count="6"]{color:#65d4d7}.cell[data-count="7"]{color:#ddd}.cell[data-count="8"]{color:#aaa}
.footer { margin-top:13px; color:var(--muted); font-size:11px; }
.footer p { margin:0; white-space:nowrap; }.footer span,#status { color:var(--ink); }
@media (max-width:600px) { :root{--cell:32px}.game{padding:12px}.topline{align-items:end}.footer{align-items:flex-start;flex-direction:column-reverse;gap:6px}.board-wrap{max-width:calc(100vw - 26px)} }
@media (prefers-reduced-motion:no-preference) { .cell { transition:background .12s,transform .08s; }.cell:not(.open):active{transform:scale(.92)} }