:root{--raised:inset 0 1.5px 0 #ffffff8c, inset 1px 0 0 #ffffff2e, inset -1px 0 0 #00000014, inset 0 -4px 0 #0000002e, 0 1px 1px #0000002e, 0 4px 8px -2px #00000047;--raised-strong:inset 0 2px 0 #fff9, inset 1px 0 0 #fff3, inset -1px 0 0 #0000001a, inset 0 -5px 0 #00000038, 0 2px 2px #0003, 0 8px 14px -4px #00000059;--pressed:inset 0 3px 5px #0003, inset 0 1px 1px #0000001f, inset 0 -1px 0 #ffffff4d;--tray:inset 0 4px 10px #00000042, inset 0 -1px 0 #ffffff4d, 0 0 0 1px #ffffff59, 0 1px 0 #fff6, 0 14px 30px -10px #00000059;--sheen:radial-gradient(ellipse 70% 50% at 30% 18%, #ffffff47, #fff0 70%), linear-gradient(180deg, #ffffff29, #fff0 55%);--ambient:radial-gradient(ellipse 70% 45% at 50% 28%, #fff8e673, transparent 70%), radial-gradient(ellipse 120% 60% at 50% 110%, #00000014, transparent 70%);--shade:radial-gradient(ellipse 120% 95% at 50% 40%, transparent 52%, #0000002e)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ambient:radial-gradient(ellipse 80% 60% at 50% 32%, #ffffff0f, transparent 70%);--shade:radial-gradient(ellipse 130% 100% at 50% 40%, transparent 55%, #00000059);--sheen:linear-gradient(180deg, #ffffff1a, #fff0 55%)}}:root[data-theme=dark]{--ambient:radial-gradient(ellipse 80% 60% at 50% 32%, #ffffff0f, transparent 70%);--shade:radial-gradient(ellipse 130% 100% at 50% 40%, transparent 55%, #00000059);--sheen:linear-gradient(180deg, #ffffff1a, #fff0 55%)}@keyframes art-pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}@keyframes art-pulse{0%{transform:scale(1)}45%{transform:scale(1.14)}to{transform:scale(1)}}@keyframes art-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}@keyframes art-press{0%{transform:scale(1)}40%{transform:scale(.9)}to{transform:scale(1)}}.art-pop{animation:.22s ease-out art-pop}.art-pulse{animation:.22s ease-out art-pulse}.art-shake{animation:.32s ease-in-out art-shake}.art-press{animation:.18s ease-out art-press}@media (prefers-reduced-motion:reduce){.art-pop,.art-pulse,.art-shake,.art-press{animation:none}}.sound-toggle{background:var(--btn,#00000040);width:36px;min-width:36px;height:36px;color:var(--ink,#fff);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:inline-grid}.sound-toggle svg{width:20px;height:20px}.sound-toggle[aria-pressed=true]{opacity:.7}.sound-toggle:focus-visible{outline:3px solid var(--focus,#ffd54a);outline-offset:2px}:root{--bg:#e9ecf1;--ink:#1d2433;--muted:#5c6475;--hidden:#b9c3d3;--hidden-hi:#d3dae6;--hidden-lo:#8e9bb0;--open:#f6f7f9;--line:#c9ced8;--mine-bg:#f3b1a9;--btn:#d7dce5;--btn-on:#2b5cab;--btn-on-ink:#fff;--primary:#2b5cab;--dialog:#fff;--focus:#f2a900;--n1:#1f4fd1;--n2:#1b7f3a;--n3:#c6282b;--n4:#1b2a7a;--n5:#7a1b1b;--n6:#117a7a;--n7:#1d2433;--n8:#6b7280;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14171d;--ink:#e8eaef;--muted:#9aa1b0;--hidden:#3a4354;--hidden-hi:#4c5669;--hidden-lo:#262d3a;--open:#1c2029;--line:#2a303b;--mine-bg:#6b2a25;--btn:#2a2f3a;--dialog:#1f232c;--n1:#7aa2ff;--n2:#6ad28a;--n3:#ff7a7a;--n4:#a9b4ff;--n5:#ff9f9f;--n6:#6fe0e0;--n7:#e8eaef;--n8:#9aa1b0;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#14171d;--ink:#e8eaef;--muted:#9aa1b0;--hidden:#3a4354;--hidden-hi:#4c5669;--hidden-lo:#262d3a;--open:#1c2029;--line:#2a303b;--mine-bg:#6b2a25;--btn:#2a2f3a;--dialog:#1f232c;--n1:#7aa2ff;--n2:#6ad28a;--n3:#ff7a7a;--n4:#a9b4ff;--n5:#ff9f9f;--n6:#6fe0e0;--n7:#e8eaef;--n8:#9aa1b0;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--ambient), var(--shade), var(--grain,none), var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;font:14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{flex-direction:column;justify-content:center;align-items:center;gap:8px;height:100dvh;padding:8px;display:flex}.bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.group{gap:2px;display:flex}.btn{font:inherit;color:var(--ink);background:var(--btn);cursor:pointer;border:0;border-radius:8px;min-height:34px;padding:7px 10px;font-weight:600}.btn[aria-pressed=true]{background:var(--btn-on);color:var(--btn-on-ink)}.btn.primary{background:var(--primary);color:#fff}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.btn{box-shadow:var(--raised)}.btn:disabled{box-shadow:none}.stats{font-variant-numeric:tabular-nums;color:var(--muted);gap:12px;font-weight:600;display:flex}.board{--gap:2px;--pad:4px;--cs:min(calc((100vw - 16px - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols)), calc((100dvh - 120px - 2 * var(--pad) - (var(--rows) - 1) * var(--gap)) / var(--rows)), 36px);grid-template-columns:repeat(var(--cols), var(--cs));grid-auto-rows:var(--cs);gap:var(--gap);padding:var(--pad);background:var(--line);box-shadow:var(--tray);border-radius:10px;display:grid}.cell{font:inherit;font-weight:800;font-size:calc(var(--cs) * .6);cursor:pointer;border-radius:max(2px, calc(var(--cs) * .16));border:0;place-items:center;min-width:0;min-height:0;margin:0;padding:0;line-height:1;display:grid}.cell.hidden{background:var(--sheen), var(--hidden);box-shadow:var(--raised)}.cell.hidden:not(:disabled):hover{background:var(--sheen), var(--hidden-hi)}.cell.hidden:not(:disabled):active{box-shadow:var(--pressed)}.cell.flag{color:#d12d2d}.cell.flag.wrong{text-decoration:line-through}.cell.open{background:var(--open);box-shadow:var(--pressed);cursor:default}.cell.mine{background:var(--open);color:var(--ink);box-shadow:var(--pressed)}.cell.exploded{background:radial-gradient(circle, #ff8a73, var(--mine-bg) 70%)}.cell.n1{color:var(--n1)}.cell.n2{color:var(--n2)}.cell.n3{color:var(--n3)}.cell.n4{color:var(--n4)}.cell.n5{color:var(--n5)}.cell.n6{color:var(--n6)}.cell.n7{color:var(--n7)}.cell.n8{color:var(--n8)}.cell:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.cell:disabled{cursor:default}.message{min-height:1.3em;color:var(--muted);text-align:center;margin:0}.overlay{background:#00000059;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}@keyframes ms-appear{0%{opacity:0;visibility:hidden}}.overlay.later{animation:.25s ease-out 1.1s backwards ms-appear}@media (prefers-reduced-motion:reduce){.overlay.later{animation:none}}.dialog{background:var(--dialog);color:var(--ink);text-align:center;border-radius:14px;flex-direction:column;gap:10px;max-width:340px;padding:20px 24px;display:flex;box-shadow:0 10px 40px #00000059}.dialog h2{margin:0;font-size:22px}.dialog p{margin:0}@media (max-height:460px){#app{flex-flow:wrap;align-content:center;gap:6px}.bar{flex-direction:column;align-items:stretch;width:150px}.group{flex-direction:column}.stats{flex-direction:column;gap:2px}.board{--cs:min(calc((100vw - 180px - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols)),  calc((100dvh - 40px - 2 * var(--pad) - (var(--rows) - 1) * var(--gap)) / var(--rows)), 36px)}.message{width:100%}#app.wide-board{flex-flow:column;gap:4px}#app.wide-board .bar,#app.wide-board .group,#app.wide-board .stats{flex-direction:row;width:auto}#app.wide-board .btn{min-height:30px;padding:4px 8px}#app.wide-board .board{--cs:min(calc((100vw - 16px - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols)), calc((100dvh - 60px - 2 * var(--pad) - (var(--rows) - 1) * var(--gap)) / var(--rows)), 36px)}#app.wide-board .message{display:none}}@media (max-height:300px){#app:not(.wide-board) .bar{gap:4px;width:120px}.btn{min-height:24px;padding:2px 8px;font-size:12px}#app:not(.wide-board) .stats{flex-flow:wrap;align-items:center;gap:2px 8px;font-size:12px}.stats .sound-toggle{width:26px;height:26px}#app:not(.wide-board) .board{--cs:min(calc((100vw - 146px - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols)), calc((100dvh - 40px - 2 * var(--pad) - (var(--rows) - 1) * var(--gap)) / var(--rows)), 36px)}}
