:root{--cell:28px;--bg:silver;--light:#fff;--dark:gray;--fg:#000;--page:#d9d9d9;--bevel:calc(var(--cell) / 8);--face-idle:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%23ffd21f' stroke='%23000' stroke-width='2'/><circle cx='11' cy='12' r='2'/><circle cx='21' cy='12' r='2'/><path d='M10 19q6 6 12 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/></svg>");--face-pressed:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%23ffd21f' stroke='%23000' stroke-width='2'/><circle cx='11' cy='12' r='2'/><circle cx='21' cy='12' r='2'/><circle cx='16' cy='21' r='3' fill='none' stroke='%23000' stroke-width='2'/></svg>");--face-dead:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%23ffd21f' stroke='%23000' stroke-width='2'/><path d='M8 9l6 6M14 9l-6 6M18 9l6 6M24 9l-6 6' stroke='%23000' stroke-width='2' stroke-linecap='round'/><path d='M10 24q6 -6 12 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/></svg>");--face-cool:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='14' fill='%23ffd21f' stroke='%23000' stroke-width='2'/><path d='M5 10h22' stroke='%23000' stroke-width='2'/><rect x='7' y='10' width='8' height='6' rx='2'/><rect x='17' y='10' width='8' height='6' rx='2'/><path d='M10 20q6 6 12 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/></svg>");--flag:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.5 2h1.5v10H8.5z'/><path d='M4 12h8v1.5H4z'/><path d='M3 13.5h10V15H3z'/><path d='M10 2L4 5l6 3z' fill='%23e00000'/></svg>");--cross:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 3l10 10M13 3L3 13' stroke='%23d00000' stroke-width='2.2' stroke-linecap='round'/></svg>");--mine:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1.5v13M1.5 8h13M3.4 3.4l9.2 9.2M12.6 3.4l-9.2 9.2' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/><circle cx='8' cy='8' r='4.2'/><circle cx='6.6' cy='6.6' r='1.1' fill='%23fff'/></svg>");color:var(--fg);background:var(--page);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}*{box-sizing:border-box}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;place-items:start center;min-height:100vh;margin:0;padding:12px;display:grid;overflow-x:hidden}.ms{flex-direction:column;align-items:center;gap:10px;max-width:100%;display:flex}.desktop .ms{min-width:440px}.desktop body{overflow:hidden}.toolbar{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;display:flex}.toolbar label{align-items:center;gap:6px;display:inline-flex}.toolbar select,.toolbar button,.dlg button,.dlg input{font:inherit;color:inherit;background:var(--bg);border:2px solid;border-color:var(--light) var(--dark) var(--dark) var(--light);min-height:28px;padding:2px 8px}.toolbar button:active,.dlg button:active{border-color:var(--dark) var(--light) var(--light) var(--dark)}.toolbar button:focus-visible,.toolbar select:focus-visible,.toolbar input:focus-visible,.dlg button:focus-visible,.dlg input:focus-visible{outline-offset:1px;outline:2px solid #1a73e8}.zoom button{min-width:28px;padding:2px 6px}.frame{background:var(--bg);max-width:100%;padding:calc(var(--bevel) * 2);border:var(--bevel) solid;border-color:var(--light) var(--dark) var(--dark) var(--light);overflow:auto}.header{padding:calc(var(--bevel) * 1.2);margin-bottom:calc(var(--bevel) * 2);border:calc(var(--bevel) * .75) solid;border-color:var(--dark) var(--light) var(--light) var(--dark);grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}#mine-counter{justify-self:start}.face{justify-self:center}.timer-group{justify-self:end}.counter{font-family:Courier New,Lucida Console,monospace;font-weight:700;font-size:calc(var(--cell) * .95);font-variant-numeric:tabular-nums;letter-spacing:.05em;color:#ff2020;text-align:right;border:1px solid;border-color:var(--dark) var(--light) var(--light) var(--dark);background:#000;min-width:3.2ch;padding:2px 3px;line-height:1}.timer-group{align-items:center;gap:4px;display:flex}.timer-label{font-weight:700;font-size:calc(var(--cell) * .9);line-height:1}.face{width:calc(var(--cell) * 1.25);height:calc(var(--cell) * 1.25);cursor:pointer;background:var(--bg) var(--face-idle) center / 82% no-repeat;border:calc(var(--bevel) * .75) solid;border-color:var(--light) var(--dark) var(--dark) var(--light);padding:0}.face:active{border-color:var(--dark) var(--light) var(--light) var(--dark);background-size:76%}.face:focus-visible{outline:2px solid #1a73e8}.face[data-face=pressed]{background-image:var(--face-pressed)}.face[data-face=dead]{background-image:var(--face-dead)}.face[data-face=cool]{background-image:var(--face-cool)}.grid{grid-template-columns:repeat(var(--cols,9), var(--cell));grid-auto-rows:var(--cell);border:var(--bevel) solid;border-color:var(--dark) var(--light) var(--light) var(--dark);touch-action:manipulation;cursor:default;outline:none;width:max-content;display:grid}.row{display:contents}.cell{width:var(--cell);height:var(--cell);background:var(--bg) center / 66% no-repeat;border:var(--bevel) solid;border-color:var(--light) var(--dark) var(--dark) var(--light);font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:calc(var(--cell) * .7);justify-content:center;align-items:center;line-height:1;display:flex}.cell.open,.cell.pressed{border:1px solid var(--dark);border-width:1px 0 0 1px}.cell.flag{background-image:var(--flag)}.cell.flag.wrong{background-image:var(--cross), var(--flag);background-size:90%,66%}.cell.question:after{content:"?";color:#000}.cell.mine{background-image:var(--mine)}.cell.boom{background-color:red}.cell.n1{color:#00f}.cell.n2{color:green}.cell.n3{color:red}.cell.n4{color:navy}.cell.n5{color:maroon}.cell.n6{color:teal}.cell.n7{color:#000}.cell.n8{color:gray}.grid:focus-visible .cell.cursor{box-shadow:inset 0 0 0 2px #1a73e8}.status{text-align:center;min-height:1.4em;margin:0}.dlg{border:2px solid;border-color:var(--light) var(--dark) var(--dark) var(--light);background:var(--bg);color:var(--fg);max-width:min(92vw,480px);padding:16px 20px}.dlg::backdrop{background:#0006}.dlg h2{margin:0 0 12px;font-size:1.1em}.dlg .fields{grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;display:grid}.dlg .fields label{display:contents}.dlg input[type=number]{border-color:var(--dark) var(--light) var(--light) var(--dark);background:#fff;width:6em}.dlg .hint{color:#333;margin:10px 0 0;font-size:.85em}.dlg menu{justify-content:flex-end;gap:8px;margin:16px 0 0;padding:0;display:flex}.dlg button.primary{font-weight:600}.dlg table.best{border-collapse:collapse;width:100%}.dlg table.best th,.dlg table.best td{text-align:right;white-space:nowrap;padding:4px 8px}.dlg table.best th[scope=row]{text-align:left}.dlg table.best thead th{border-bottom:1px solid var(--dark)}@media (max-width:480px){body{padding:8px 4px}}
