@font-face{font-family:Space;src:url('./fonts/SpaceGrotesk-Regular.otf')}
@font-face{font-family:Space;src:url('./fonts/SpaceGrotesk-Bold.otf');font-weight:700}
:root{font-family:Space,system-ui,sans-serif;color:#354f46;background:#f5f6ee;font-synthesis:none;--bg:#f5f6ee;--ink:#354f46;--muted:#75867b;--line:#d9e0d4;--surface:#fffdf7;--covered:#d7e9d6;--open:#eef2e6;--flag:#f4d1d8;--accent:#5e497a;--accent-ink:#fffaf6;--shadow:#abbca746;--one:#5a7896;--two:#57795f;--three:#a66871;--four:#79649c}
:root[data-theme=pop]{--bg:#f9f2df;--ink:#292b46;--muted:#7b776a;--line:#d9d0b8;--surface:#fffaf0;--covered:#f7d563;--open:#f6efdc;--flag:#f8afd0;--accent:#3558d4;--accent-ink:white;--shadow:#292b4620;--one:#3558d4;--two:#448065;--three:#c55876;--four:#7453a8}
:root[data-theme=neon]{color-scheme:dark;--bg:#10151d;--ink:#e6eee8;--muted:#9ba9ad;--line:#303a45;--surface:#1a222d;--covered:#293443;--open:#171f2a;--flag:#483454;--accent:#c8fa72;--accent-ink:#182319;--shadow:#0005;--one:#72d9ed;--two:#c8fa72;--three:#ff8fba;--four:#c0a2ff}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--ink)}
button,select,input{font:inherit;color:inherit}
button,select,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
button:hover{filter:brightness(.98)}
button:disabled{cursor:default;opacity:.55}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
[hidden]{display:none!important}
.app{height:100vh;height:100dvh;width:100%;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:4px}
.topbar{flex:none;display:flex;align-items:center;gap:16px;min-height:44px}
.brand{display:flex;align-items:center;gap:8px;min-width:44px;min-height:44px;margin-right:auto;color:var(--ink);text-decoration:none}
.brand img{width:32px;height:32px;background:#e3eddf;border-radius:11px}
.brand strong{font-size:18px;letter-spacing:-.6px;display:block;white-space:nowrap}
.stats{display:flex;align-items:center;gap:24px}
.stat{display:flex;align-items:center;gap:8px;min-width:0}
.stat>span{color:var(--muted);font-size:9px;letter-spacing:1px;white-space:nowrap}
.stat i{font-style:normal;letter-spacing:0}
.stat strong{font-size:23px;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.top-actions{display:flex;gap:4px;align-items:center}
.theme-picker select{height:44px;max-width:170px;font-size:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:0 8px;cursor:pointer}
.icon-button{width:44px;height:44px;flex:none;font-size:21px;display:grid;place-items:center}
main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;gap:3px}
.board-heading{flex:none;height:20px;display:flex;align-items:center;gap:10px;padding:0 4px;overflow:hidden}
.eyebrow{font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:700;white-space:nowrap}
#pan-hint{color:var(--accent);font-size:10px;white-space:nowrap}
.board-status{font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center;min-width:0;margin-left:auto;overflow:hidden}
#status-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-dot{width:5px;height:5px;flex:none;border-radius:50%;background:#80a58a}
.playground{position:relative;flex:1;display:grid;grid-template-rows:minmax(0,1fr);min-width:0;min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:2px;overflow:hidden}
.board-scroll{display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:auto;padding:3px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain}
.board{display:grid;grid-template-columns:repeat(var(--cols,9),var(--cell,40px));gap:2px;width:max-content;flex:none;margin:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;outline:none}
.cell{width:var(--cell,40px);height:var(--cell,40px);border-radius:clamp(5px,calc(var(--cell)*.18),14px);border:1px solid color-mix(in srgb,var(--ink) 11%,transparent);background:var(--covered);color:var(--ink);padding:0;position:relative;font-size:calc(var(--cell)*.51);line-height:1;font-weight:700;display:grid;place-items:center;box-shadow:0 1px 0 var(--shadow);touch-action:manipulation;-webkit-touch-callout:none}
.cell::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.17}
.cell.open{background:var(--open);border-color:transparent;box-shadow:none}
.cell.open::after,.cell.flagged::after,.cell.mine::after{display:none}
.cell.open[data-n="1"]{color:var(--one)}
.cell.open[data-n="2"]{color:var(--two)}
.cell.open[data-n="3"]{color:var(--three)}
.cell.open[data-n="4"],.cell.open[data-n="5"],.cell.open[data-n="6"],.cell.open[data-n="7"],.cell.open[data-n="8"]{color:var(--four)}
.cell.flagged{background:var(--flag);color:var(--accent);font-size:calc(var(--cell)*.54)}
.cell.pressing{box-shadow:inset 0 0 0 2px var(--accent)}
.cell.mine{background:#f0b6aa;color:#78443e}
.cell.exploded{background:#dc8d81;box-shadow:inset 0 0 0 2px #9a5148}
.cell.wrong{color:#a8434d;background:#f0b6aa}
.cell:focus-visible{outline-offset:0;z-index:1}
.pause-cover{position:absolute;inset:0;background:var(--surface);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16px;z-index:2}
.pause-cover h2{font-size:28px;letter-spacing:-1px;margin:10px 0 0}
.pause-cover p{color:var(--muted);margin:8px 0 20px}
.pause-flower{font-size:40px;color:var(--accent)}
.primary-button{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.pause-cover button{min-height:44px;padding:10px 20px}
.loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--surface);z-index:3;color:var(--muted);padding:20px;text-align:center}
.toolbar{flex:none;display:flex;align-items:stretch;gap:8px;min-height:44px}
.difficulty-switch{display:flex;gap:2px;background:color-mix(in srgb,var(--ink) 4%,var(--bg));padding:0;border:1px solid var(--line);border-radius:12px;margin-right:auto}
.difficulty-switch button{border:0;background:transparent;min-width:64px;min-height:44px;padding:6px 12px;font-size:12px}
.difficulty-switch button small{display:none}
.difficulty-switch button[aria-pressed=true]{background:var(--surface);color:var(--accent);font-weight:700;box-shadow:0 1px 3px var(--shadow)}
.mobile-difficulty{display:none}
.game-actions{display:flex;gap:4px}
.game-actions button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 14px;font-size:12px;white-space:nowrap}
.game-actions button>span[aria-hidden]{font-size:20px}
.game-actions button b{font-size:9px;opacity:.7}
.game-actions button[aria-pressed=true]{background:var(--flag);border-color:var(--accent)}
.board-links{display:flex;gap:4px}
.board-links:has(#share-win:not([hidden])) #zoom{display:none}
.text-button{min-height:44px;padding:6px 12px;background:var(--surface);color:var(--accent);font-size:12px;white-space:nowrap}
dialog{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:22px;padding:26px;max-width:820px;width:calc(100% - 24px);box-shadow:0 20px 100px #0003;max-height:90vh;max-height:90dvh;overflow:auto}
dialog::backdrop{background:#18251e66;backdrop-filter:blur(6px)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.dialog-head h2{font-size:30px;letter-spacing:-1px;margin:5px 0 0}
.dialog-intro{font-size:13px;color:var(--muted);margin:18px 0 20px}
.score-lists{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.score-lists h3{font-size:14px;margin:0 0 12px}
.score-lists table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.score-lists td{border-bottom:1px solid var(--line);padding:10px 0;max-width:180px;overflow-wrap:anywhere}
.score-lists td:first-child{color:var(--muted);width:24px}
.score-lists td:nth-child(2){font-weight:700}
.score-lists td:last-child{color:var(--muted);font-size:10px;text-align:right}
.score-lists:has(table td:nth-child(4)){grid-template-columns:1fr}
.empty-score{font-size:12px;line-height:1.7;color:var(--muted);border:1px dashed var(--line);border-radius:12px;padding:18px}
.fine-print{color:var(--muted);font-size:11px;line-height:1.7;margin-bottom:0}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;margin-top:25px}
.help-grid b{font-size:13px;color:var(--accent)}
.help-grid p{font-size:13px;line-height:1.7;color:var(--muted)}
.score-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:20px}
.score-tabs button{min-height:44px;padding:8px 16px;font-size:12px;border-color:transparent;background:transparent}
.score-tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}
.share-form{padding:16px;border-radius:16px;background:var(--open);margin-bottom:20px}
.share-form label{font-size:12px;display:block;margin-bottom:12px}
.share-form label strong{display:block;margin-top:5px}
.share-form>div{display:flex;gap:10px}
.share-form input{width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:16px}
.share-form button{min-height:44px;padding:10px 15px;white-space:nowrap;font-size:12px;border-radius:10px}
.share-form p{font-size:12px;margin:10px 0 0;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){
 .topbar{gap:10px}.brand strong{font-size:16px}.stats{gap:16px}.stat{display:block}.stat>span{font-size:8px;display:block;letter-spacing:.6px}.stat strong{font-size:21px}
 .game-actions button{padding:6px 10px}.text-button{padding:6px 10px}
}
@media(max-width:720px){
 .topbar{gap:6px}.brand{flex:none;padding:0 6px;gap:0;margin:0}.brand>span{display:none}.brand img{width:28px;height:28px}
 .stats{flex:1;gap:16px;justify-content:center}.stat strong{font-size:20px}.stat>span{font-size:8px}
 .theme-picker{position:relative;display:block;width:44px;height:44px}.theme-picker select{width:44px;max-width:44px;padding:0;color:transparent}.theme-picker select option{color:var(--ink)}.theme-picker::before{content:"✿";position:absolute;inset:9px 11px;pointer-events:none;color:var(--accent);font-size:23px}
 .board-heading{gap:7px}.eyebrow{font-size:9px;letter-spacing:.5px}.board-status{font-size:10px}#pan-hint{font-size:9px}
 .toolbar{display:grid;grid-template-columns:78px 56px repeat(4,minmax(0,1fr));gap:4px}
 .difficulty-switch{display:none}.mobile-difficulty{display:block}.mobile-difficulty select{width:100%;height:44px;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:0 4px;font-size:12px}
 .game-actions,.board-links{display:contents}.game-actions button{width:100%;min-width:0;padding:0;gap:4px}.game-actions .button-label{display:none}.game-actions button>span[aria-hidden]{font-size:22px}.game-actions button b{font-size:8px}
 .board-links .text-button{padding:0;min-width:0;width:100%;font-size:0}#zoom::before{content:"⤢";font-size:24px}#zoom[aria-pressed=true]::before{content:"⤡"}#share-win::before{content:"↗";font-size:24px}
 .score-lists{grid-template-columns:1fr;gap:18px}.help-grid{grid-template-columns:1fr;gap:7px}dialog{padding:18px}.dialog-head h2{font-size:27px}
}
@media(max-width:360px){
 .brand{display:none}.stats{justify-content:flex-start;padding-left:5px;gap:12px}
 .toolbar{grid-template-columns:68px 48px repeat(4,minmax(0,1fr))}
}
@media(max-height:450px){
 .pause-cover{padding:8px}.pause-flower{display:none}.pause-cover h2{font-size:23px}.pause-cover p{margin:5px 0 10px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}