*{box-sizing:border-box}
:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#10151d;color:#e9edf4}body{margin:0}[hidden]{display:none!important}.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.scene{min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}.welcome{display:flex;align-items:center;justify-content:center}.welcome-content{width:100%;max-width:820px}
.eyebrow{color:#91a1b7;font-size:11px;letter-spacing:.18em;margin:0 0 24px}h1{font-size:clamp(38px,7vw,72px);letter-spacing:-.05em;margin:0 0 20px;line-height:1.1}h1 span{color:#a9e46d}p{color:#abb8ca;line-height:1.6}.intro{font-size:17px;margin-bottom:32px}h2{font-size:19px;margin:0}
label{display:grid;gap:10px;font-size:13px;color:#bbc7d7;min-width:0}button,input,select{font:inherit;border-radius:8px;border:1px solid #455269;background:#222e3e;color:#f3f6fa;padding:12px 14px}input,select{width:100%;min-width:0}button{cursor:pointer}@media(hover:hover) and (pointer:fine){button:hover{background:#34465d}}button:disabled{cursor:default;opacity:.4}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #c3ef94;outline-offset:3px}.primary,button[aria-pressed="true"]{background:#a9e46d;color:#15230b;border-color:#a9e46d;font-weight:700}@media(hover:hover) and (pointer:fine){.primary:hover{background:#c3ef94}}
.setup-card{display:grid;grid-template-columns:1fr 1.25fr auto;align-items:end;gap:22px;padding:28px;background:#19212c;border:1px solid #303c4d;border-radius:16px}.instructions{margin-top:24px;max-width:700px;color:#abb8ca;font-size:13px}summary{cursor:pointer;padding:8px 0;color:#cbd7e7}.footnote{margin-top:40px;font-size:12px;color:#8091a7}
.play-scene{height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.game-header{min-width:0;container-type:inline-size}.game-header .eyebrow{margin-bottom:8px;font-size:10px}.game-toolbar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:clamp(4px,1cqi,12px)}.stats{display:flex;flex:0 0 auto;gap:clamp(4px,1.4cqi,18px);align-items:center}.stats>span{display:inline-flex;gap:3px;align-items:center}.stats svg,.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.stats svg{color:#91a1b7;width:clamp(10px,3cqi,15px);height:clamp(10px,3cqi,15px)}.stats strong{font:600 clamp(10px,3.2cqi,14px) ui-monospace,monospace;white-space:nowrap}.game-actions{display:flex;flex:1 1 auto;min-width:0;justify-content:flex-end;align-items:center;gap:clamp(2px,.7cqi,5px)}.icon-button{flex:0 1 34px;min-width:0;width:34px;height:32px;padding:4px;display:inline-flex;justify-content:center;align-items:center}.status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.board-stage{position:relative;min-height:0;min-width:0;display:grid;place-items:center}#board{display:grid;grid-template-columns:repeat(var(--display-columns),var(--cell-size));grid-template-rows:repeat(var(--display-rows),var(--cell-size));gap:var(--cell-gap)}.cell{width:var(--cell-size);height:var(--cell-size);min-width:0;padding:0;border-radius:min(5px,var(--cell-size));border:1px solid #53637a;background:#34455b;font:700 clamp(7px,calc(var(--cell-size)*.52),20px) ui-monospace,monospace;touch-action:manipulation}@media(hover:hover) and (pointer:fine){.cell:hover{background:#506882}}.cell.revealed{background:#111a25;border-color:#253347}.cell.flagged{color:#f8cf71}.cell.mine{background:#6f343c;color:white}.cell.exploded{background:#c64350}.cell.wrong{color:#ff8993}.cell[data-count="1"]{color:#85baff}.cell[data-count="2"]{color:#9ee19c}.cell[data-count="3"]{color:#ff9999}.cell[data-count="4"]{color:#c2a8ff}.cell[data-count="5"],.cell[data-count="6"],.cell[data-count="7"],.cell[data-count="8"]{color:#ffcc8b}.pause-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#10151df0;color:#c3ef94;font-size:20px}
.result-actions{display:flex;flex-wrap:wrap;gap:12px}.ranking-card{margin-top:28px;padding:24px;background:#19212c;border:1px solid #303c4d;border-radius:16px}.ranking-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}.ranking-heading span,#storage-note{font-size:12px;color:#9aabc1}#ranking{padding-left:24px;color:#cbd7e7}#ranking li{padding:5px}
@media(max-width:620px){.scene{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.setup-card{grid-template-columns:1fr;gap:20px;padding:22px}.game-header .eyebrow{letter-spacing:.1em}.game-actions{margin-left:auto}.ranking-card{padding:20px}}
:root:fullscreen{background:#10151d;overflow:auto}
.game-actions .icon-button{background:#222e3e;color:#cbd7e7;border-color:#455269;font-weight:400;transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease}
.game-actions .icon-button[aria-pressed="true"],.game-actions .icon-button.result-return{background:#356344;color:#dff5e5;border-color:#82b891}
@media(hover:hover) and (pointer:fine){
.game-actions .icon-button:not(:disabled):hover{background:#34465d;color:#f3f6fa;border-color:#8291a5}
.game-actions .icon-button:is([aria-pressed="true"],.result-return):not(:disabled):hover{background:#40764f;color:#effff3;border-color:#9bcca8}
}
.game-actions .icon-button:focus-visible{outline-color:#a6b6cb}
.game-actions .icon-button:disabled{background:#222e3e;color:#cbd7e7;border-color:#455269}
.icon-button.result-return{animation:result-return-pulse 1.8s ease-in-out infinite}
@keyframes result-return-pulse{0%,100%{background-color:#222e3e;color:#cbd7e7;border-color:#455269;box-shadow:0 0 0 0 #82b89100}50%{background-color:#40764f;color:#effff3;border-color:#9bcca8;box-shadow:0 0 12px #82b89159}}


/* Result floats over the finished field; the game header stays underneath. */
.result-modal{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 40px);margin:auto;padding:24px;border:1px solid #526176;border-radius:16px;background:rgb(25 33 44 / .87);color:#e9edf4;box-shadow:0 18px 60px #0006;overflow:auto}
.result-modal::backdrop{background:rgb(5 10 17 / .18)}
.result-modal h1{font-size:clamp(24px,5vw,32px);margin:0 0 12px;letter-spacing:-.035em}
.result-modal .intro{font-size:13px;margin:0 0 18px}
.result-modal .result-actions{gap:8px}
.result-modal button{font-size:13px;padding:10px 12px}
.result-modal .ranking-card{margin-top:20px;padding:16px;background:rgb(16 21 29 / .55)}
.result-modal h2{font-size:16px}
.result-modal #ranking{font-size:13px;max-height:150px;overflow:auto;margin-bottom:0}
#ranking-empty{font-size:13px;margin-bottom:0}
#storage-note:empty{display:none}
@media(max-height:450px){.result-modal{padding:16px;max-width:540px}.result-modal .ranking-card{margin-top:12px;padding:12px}.result-modal #ranking{max-height:80px}}

.game-actions .icon-button:not(:disabled):active{filter:brightness(1.12)}

.game-actions .icon-button svg{width:clamp(12px,4.5cqi,18px);height:clamp(12px,4.5cqi,18px)}

/* Same top alignment for the navigation in setup and play. */
.breadcrumb{font-size:10px;letter-spacing:.1em;line-height:1.5}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:#cbd7e7;text-decoration:underline;text-underline-offset:3px}
.breadcrumb a:focus-visible{outline:2px solid #a6b6cb;outline-offset:4px}
#setup-scene{position:relative;padding-top:max(64px,env(safe-area-inset-top))}
#setup-scene>.breadcrumb{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));margin:0}
.game-header .breadcrumb{font-size:10px;letter-spacing:.1em}
.exit-modal{max-width:380px}
.exit-modal h2{font-size:22px}
.exit-modal>p{font-size:14px}
@media(max-width:620px){#setup-scene>.breadcrumb{left:max(12px,env(safe-area-inset-left))}}

/* Equal action boxes, including when labels wrap on small screens. */
.result-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch}
.result-actions>button{min-width:0;min-height:42px;line-height:1.3;display:flex;align-items:center;justify-content:center;text-align:center}
.game-actions{align-items:center}
.game-actions>.icon-button{height:32px;max-width:34px;box-sizing:border-box;line-height:1;padding:0;align-self:center}
.game-actions>.icon-button svg{display:block}