:root{--bg:#f6f7f9;--ink:#16191f;--mut:#5a6270;--line:#dde1e7;--card:#fff;--acc:#0b7559;--accl:#e3f4ef;
--hid:#e4e8ee;--hidh:#d6dce5;--hidb:#c9d0da;--open:#fff;--mine:#16191f;--boom:#ffd5d0;--flag:#d6452f;
--n1:#2457c5;--n2:#1d7f45;--n3:#c8372d;--n4:#5b2a9e;--n5:#8a3b12;--n6:#127a86;--n7:#16191f;--n8:#6b7280;--rad:5px;color-scheme:light}
[data-theme=dark]{--bg:#12151b;--ink:#e8ebf0;--mut:#9aa3b2;--line:#2a303b;--card:#1a1e26;--acc:#35c49c;--accl:#173a31;
--hid:#2c333f;--hidh:#363e4c;--hidb:#232933;--open:#141820;--mine:#e8ebf0;--boom:#5c2522;--flag:#ff7a5c;
--n1:#7ea8ff;--n2:#5fd38d;--n3:#ff8578;--n4:#c39bff;--n5:#ffb26b;--n6:#5fd6e0;--n7:#e8ebf0;--n8:#9aa3b2;color-scheme:dark}
[data-theme=retro]{--bg:#f3ead8;--ink:#2b2118;--mut:#6d5c48;--line:#d8c8a8;--card:#fbf5e8;--acc:#b5532a;--accl:#f5dfcf;
--hid:#d9c7a3;--hidh:#cfbb93;--hidb:#b9a37a;--open:#fbf5e8;--mine:#2b2118;--boom:#f2b8a0;--flag:#b5532a;
--n1:#2f5d8a;--n2:#4f7a28;--n3:#b5332a;--n4:#6b3f8a;--n5:#8a4b14;--n6:#2a7a72;--n7:#2b2118;--n8:#7d6d5a;--rad:2px}
[data-theme=retro] .cell{font-family:ui-monospace,"Courier New",monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--acc)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:8px;z-index:9}
.wrap{max-width:980px;margin:0 auto;padding:0 14px}
.top{border-bottom:1px solid var(--line);background:var(--card)}
.top .wrap{display:flex;align-items:center;gap:16px;height:52px}
.brand{font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;margin-right:auto;white-space:nowrap}
.brand span span{color:var(--acc)}
.top nav{display:flex;gap:16px;white-space:nowrap}
.top nav a{color:var(--ink);text-decoration:none;font-size:16px}
.top nav a[aria-current]{color:var(--acc);font-weight:600}
main{padding:12px 0 40px}
h1{font-size:24px;line-height:1.2;margin:6px 0 10px;text-align:center}
h2{font-size:22px;margin:30px 0 8px}h3{font-size:18px;margin:18px 0 4px}
.prose{max-width:720px;margin:0 auto}
.lead{color:var(--mut);text-align:center;margin:-4px 0 12px}
/* game */
.game{--max:34px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.bar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:10px;min-height:44px}
.btn,select,.cf input{font:inherit;font-size:16px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn:hover{border-color:var(--mut)}
.btn[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.seg .btn{border:0;border-radius:0;padding:0 12px}
.seg .btn+.btn{border-left:1px solid var(--line)}
.cf{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:end;margin:0 0 10px}
.cf label{display:flex;flex-direction:column;font-size:14px;color:var(--mut)}
.cf input{width:84px;cursor:text}
.stat{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;max-width:520px;margin-bottom:8px}
.ctr{font-variant-numeric:tabular-nums;font-weight:700;font-size:22px;min-width:76px;display:flex;align-items:center;gap:6px}
.ctr.t{justify-content:flex-end}
.ctr i{width:18px;height:18px;display:inline-block;background:var(--mut);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.board-wrap{width:100%;display:flex;justify-content:center}
.board{--cell:clamp(16px,calc((min(100vw,980px) - 52px - 2px*var(--c))/var(--c)),var(--max));display:grid;grid-template-columns:repeat(var(--c),var(--cell));grid-auto-rows:var(--cell);gap:2px;padding:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;width:max-content;min-height:calc(var(--cell)*var(--r) + 2px*(var(--r) - 1) + 18px)}
.cell{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--rad);background:var(--hid);box-shadow:inset 0 -2px 0 var(--hidb);font-weight:800;font-size:calc(var(--cell)*.58);line-height:1;cursor:pointer;transition:background-color .12s ease,box-shadow .12s ease}
.cell:hover{background:var(--hidh)}
.cell:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.cell.o{background:var(--open);box-shadow:inset 0 0 0 1px var(--line);cursor:default}
.n1{color:var(--n1)}.n2{color:var(--n2)}.n3{color:var(--n3)}.n4{color:var(--n4)}.n5{color:var(--n5)}.n6{color:var(--n6)}.n7{color:var(--n7)}.n8{color:var(--n8)}
.cell.f::before,.cell.m::before{content:"";width:62%;height:62%;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.cell.f::before,.ctr.fl i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2h2v16H5zM7 3l10 4.5L7 12z'/%3E%3C/svg%3E")}
.cell.f::before{background:var(--flag)}
.cell.m::before,.ctr.mn i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5.5'/%3E%3Cpath d='M9 1h2v18H9zM1 9h18v2H1z'/%3E%3Cpath d='M3.6 4.9l1.4-1.4 11.4 11.4-1.4 1.4zM4.9 16.4l-1.4-1.4L14.9 3.6l1.4 1.4z'/%3E%3C/svg%3E")}
.cell.m{background:var(--open);box-shadow:inset 0 0 0 1px var(--line)}.cell.m::before{background:var(--mine)}
.cell.boom{background:var(--boom)}
.cell.wrong{background:var(--boom)}
.cell.pop::before{animation:pop .14s ease-out}
@keyframes pop{from{transform:scale(.6)}to{transform:scale(1)}}
.game.won .board{border-color:var(--acc);box-shadow:0 0 0 2px var(--accl)}
.game.flagging .cell:not(.o){cursor:crosshair}
.status{min-height:56px;margin:10px 0 0;text-align:center;font-size:17px;max-width:620px}
.best{color:var(--mut);font-size:15px;text-align:center;min-height:24px;margin:0}
.tools2{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.help{max-width:720px;margin:26px auto 0}
.help ul{padding-left:20px}
.pat{border-collapse:separate;border-spacing:3px;margin:8px 0 14px}
.pat td{width:34px;height:34px;text-align:center;font-weight:800;border-radius:5px;background:var(--open);box-shadow:inset 0 0 0 1px var(--line)}
.pat td.h{background:var(--hid);box-shadow:inset 0 -2px 0 var(--hidb)}
.pat td.mi{background:var(--boom)}.pat td.sf{background:var(--accl)}
.prose table.kv th{text-align:left;padding-right:14px}
.ad-slot{margin:20px auto;max-width:728px}
@media (prefers-reduced-motion:reduce){.cell{transition:none}.cell.pop::before{animation:none}}
/* projector / classroom */
body.proj .top,body.proj footer,body.proj .help,body.proj h1,body.proj .lead,body.proj .cookie{display:none}
body.proj .game{--max:64px}
body.proj{--hid:#c3cad6;--hidb:#8d97a8;--open:#fff;--line:#6b7280;--n1:#0033cc;--n2:#006622;--n3:#cc0000;--n4:#4b0082}
body.proj .board{--cell:clamp(22px,min(calc((100vw - 52px - 2px*var(--c))/var(--c)),calc((100vh - 190px)/var(--r))),var(--max))}
body.proj .cell{font-weight:900}
body.proj main{padding-top:16px}
footer{border-top:1px solid var(--line);margin-top:30px;padding:20px 0 90px;font-size:15px;color:var(--mut)}
footer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
footer a{color:var(--mut)}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:640px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 6px 24px rgba(0,0,0,.12);z-index:5;font-size:15px}
.cookie[hidden]{display:none}.cookie p{margin:0}
@media (max-width:520px){.top nav{gap:12px}.top nav a{font-size:15px}h1{font-size:21px}.seg .btn{padding:0 9px;font-size:15px}.ctr{font-size:20px;min-width:60px}}
.cf[hidden]{display:none}