:root { --ink:#183029; --paper:#f4f2ea; --field:#315b4d; --field-dark:#24473b; --tile:#77a98d; --tile-edge:#9fc9a7; --open:#e5e8df; --line:#bdd0bd; --signal:#b73831; --gold:#e9b949; --focus:#fff; --muted:#52665d; font-family:Inter,ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:var(--paper); }
:root[data-theme="dark"] { --ink:#e9f0e9; --paper:#14231e; --field:#457561; --field-dark:#0b1511; --tile:#5b9275; --tile-edge:#8db39a; --open:#d7ddd5; --line:#72877c; --signal:#ff8178; --gold:#ffd36a; --focus:#101b16; --muted:#bbcabf; }
:root[data-contrast="high"] { --ink:#000; --paper:#fff; --field:#005c39; --field-dark:#002f1d; --tile:#b0f2cc; --tile-edge:#003d27; --open:#fff; --line:#000; --signal:#9a0000; --focus:#000; --muted:#202020; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--paper); } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible { outline:3px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 5px var(--ink); }
.game-shell { min-height:100vh; background-image:linear-gradient(color-mix(in srgb,var(--paper) 90%,transparent),var(--paper)),url("assets/field-mark.svg"); background-size:auto,240px; }.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 max(16px,calc((100vw - 1040px)/2)); border-bottom:1px solid color-mix(in srgb,var(--muted) 28%,transparent); }.brand { display:flex; gap:10px; align-items:center; color:var(--ink); text-decoration:none; font-weight:800; }.brand-mark { display:grid; place-items:center; width:26px; height:26px; border-radius:4px; background:var(--ink); color:var(--gold); font-size:22px; }.top-actions { display:flex; gap:7px; }.icon-button { width:44px; height:44px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--muted) 40%,transparent); border-radius:5px; background:transparent; color:var(--ink); font-size:20px; }.icon-button:hover,.text-button:hover { background:color-mix(in srgb,var(--field) 13%,transparent); }
.play-area { width:min(100% - 24px,900px); margin:0 auto; padding:clamp(32px,6vh,70px) 0 52px; }.heading-row,.section-title { display:flex; align-items:end; justify-content:space-between; gap:16px; }.heading-row { margin-bottom:20px; }.eyebrow { margin:0 0 6px; color:var(--field); font-size:11px; font-weight:800; letter-spacing:.1em; } h1,h2,h3 { margin:0; letter-spacing:0; } h1 { font-size:clamp(32px,5vw,46px); line-height:1; }.best { margin:0 0 4px; color:var(--muted); font-size:13px; }.best strong { color:var(--ink); font-variant-numeric:tabular-nums; }
fieldset { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; padding:0; border:0; } legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } fieldset label { cursor:pointer; } fieldset input { position:absolute; opacity:0; } fieldset span { display:block; min-height:36px; padding:8px 11px; border:1px solid color-mix(in srgb,var(--muted) 42%,transparent); border-radius:5px; color:var(--muted); font-size:13px; font-weight:750; } fieldset input:checked + span { border-color:var(--ink); background:var(--ink); color:var(--paper); } fieldset:disabled { opacity:.46; }.game-toolbar { display:grid; grid-template-columns:82px 1fr 82px; align-items:center; min-height:60px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--muted) 42%,transparent); border-bottom:0; background:color-mix(in srgb,var(--paper) 90%,var(--field)); }.counter { text-align:center; font-variant-numeric:tabular-nums; }.counter span { display:block; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; }.counter strong { font-family:"Courier New",monospace; font-size:21px; color:var(--signal); } #status { margin:0; text-align:center; font-size:13px; font-weight:650; } #status[data-state="won"] { color:#157346; } #status[data-state="lost"] { color:var(--signal); }
.board-frame { overflow:hidden; padding:6px; border:1px solid color-mix(in srgb,var(--muted) 42%,transparent); background:var(--field-dark); box-shadow:0 13px 25px color-mix(in srgb,var(--ink) 16%,transparent); }.board { --cell-size:24px; display:grid; grid-template-columns:repeat(var(--columns),var(--cell-size)); width:100%; justify-content:center; touch-action:manipulation; }.cell { width:var(--cell-size); height:var(--cell-size); min-width:0; min-height:0; padding:0; border:1px solid var(--tile-edge); border-radius:0; background:var(--tile); color:var(--ink); font-size:min(18px,calc(var(--cell-size) * .7)); font-weight:900; line-height:1; }.cell:hover:not(.is-revealed) { filter:brightness(1.09); }.cell:focus-visible { z-index:1; outline:3px solid var(--focus); outline-offset:-3px; box-shadow:inset 0 0 0 2px var(--ink); }.cell.is-revealed { border-color:var(--line); background:var(--open); }.cell.is-mine { background:#f1c6bf; color:#8f211c; }.cell.is-flagged { color:var(--signal); }.cell[data-number="1"] { color:#176294; }.cell[data-number="2"] { color:#13713c; }.cell[data-number="3"] { color:#b62f27; }.cell[data-number="4"] { color:#593b9b; }.cell[data-number="5"],.cell[data-number="6"],.cell[data-number="7"],.cell[data-number="8"] { color:#783612; }
.bottom-actions { display:flex; align-items:center; gap:12px; padding-top:14px; }.mode-button,.text-button { min-height:44px; border-radius:5px; padding:8px 12px; font-size:13px; font-weight:800; }.mode-button { border:1px solid var(--ink); background:transparent; color:var(--ink); }.mode-button[aria-pressed="true"] { background:var(--gold); }.text-button { border:1px solid transparent; background:transparent; color:var(--ink); }.instruction { flex:1; margin:0; color:var(--muted); font-size:12px; text-align:right; }.summary { display:grid; grid-template-columns:repeat(3,1fr); margin-top:28px; border-block:1px solid color-mix(in srgb,var(--muted) 34%,transparent); }.summary div { padding:15px 8px; text-align:center; }.summary div + div { border-left:1px solid color-mix(in srgb,var(--muted) 28%,transparent); }.summary span { display:block; color:var(--muted); font-size:11px; }.summary strong { font-size:19px; }.learn { display:grid; grid-template-columns:minmax(190px,.8fr) 1.2fr; gap:28px; margin-top:48px; padding-top:28px; border-top:1px solid color-mix(in srgb,var(--muted) 34%,transparent); }.learn-intro h2,.leaderboard h2 { font-size:18px; }.learn p,.tutorial p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }.tutorial { display:grid; grid-template-columns:1fr 1fr; gap:20px 18px; margin:0; padding:0; list-style:none; }.tutorial li { display:grid; grid-template-columns:30px 1fr; gap:9px; }.tutorial li>span { color:var(--field); font-family:"Courier New",monospace; font-size:12px; font-weight:800; }.tutorial h2,.tutorial h3 { font-size:14px; }.leaderboard { margin-top:44px; padding-top:28px; border-top:1px solid color-mix(in srgb,var(--muted) 34%,transparent); }.leaderboard ol { display:grid; gap:1px; margin:15px 0 0; padding:0; list-style:none; }.leaderboard li { padding:11px 13px; background:color-mix(in srgb,var(--paper) 88%,var(--field)); font-size:13px; }
dialog { width:min(100% - 32px,390px); border:1px solid color-mix(in srgb,var(--muted) 45%,transparent); border-radius:8px; background:var(--paper); color:var(--ink); box-shadow:0 20px 60px color-mix(in srgb,var(--ink) 35%,transparent); } dialog::backdrop { background:rgb(0 0 0/.45); } dialog form { display:grid; gap:14px; } dialog p { margin:0; color:var(--muted); line-height:1.5; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }.score-name { display:grid; gap:6px; font-size:13px; font-weight:700; }.score-name input { min-height:44px; border:1px solid var(--muted); border-radius:4px; padding:8px; background:transparent; color:var(--ink); }.switch { display:flex; align-items:center; justify-content:space-between; min-height:44px; }.switch input { width:20px; height:20px; accent-color:var(--field); }
@media (max-width:560px) { .play-area { width:min(100% - 16px,900px); padding-top:28px; }.game-toolbar { grid-template-columns:62px 1fr 62px; }.counter strong { font-size:17px; } #status { font-size:11px; }.bottom-actions { flex-wrap:wrap; }.instruction { order:3; flex-basis:100%; text-align:left; }.learn { grid-template-columns:1fr; gap:24px; }.tutorial { grid-template-columns:1fr; gap:16px; }.summary { margin-top:22px; }.density span { font-size:11px; padding:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }