:root{color-scheme:dark;--panel:#222c42;--line:#3b4964;--cell:32px;--accent:#ffcf5a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#324565,#111827 56%,#090e19);color:#edf3ff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;touch-action:manipulation}
button{font:inherit}
.app-shell{width:min(100%,1050px);margin:auto;padding:max(18px,env(safe-area-inset-top)) 12px max(32px,env(safe-area-inset-bottom))}
header{display:flex;align-items:center;justify-content:space-between;margin:0 auto 16px;max-width:820px}
.eyebrow{margin:0;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.2em}
h1{margin:2px 0 0;font-size:clamp(28px,7vw,44px)}
.icon-button{width:42px;height:42px;border:1px solid #ffffff2d;border-radius:50%;background:#ffffff12;color:#fff;font-size:20px;cursor:pointer}
.difficulty{display:flex;gap:7px;max-width:620px;margin:0 auto 12px}
.difficulty button{flex:1;border:1px solid var(--line);border-radius:12px;background:#172033;color:#b9c5da;padding:9px 7px;cursor:pointer}
.difficulty button.active{border-color:var(--accent);background:#3d3520;color:#fff;box-shadow:0 0 0 2px #ffcf5a26}
.difficulty small{display:block;margin-top:2px;color:#8fa0bc;font-size:10px}
.console{display:flex;align-items:center;justify-content:center;gap:clamp(22px,10vw,90px);width:min(100%,520px);margin:auto;padding:12px 18px;border:1px solid #ffffff20;border-radius:17px;background:linear-gradient(160deg,#26334c,#171f31);box-shadow:0 14px 35px #0005}
.counter{display:flex;align-items:center;gap:7px;min-width:86px;color:#fff}
.counter strong{font-family:"SFMono-Regular",Consolas,monospace;font-size:clamp(22px,7vw,32px);color:#ff6c6c;text-shadow:0 0 12px #ff313175}
.face{width:54px;height:54px;border:2px solid #7082a3;border-radius:12px;background:linear-gradient(#edf3ff,#9cacc7);box-shadow:inset 2px 2px 1px #fff,inset -3px -3px 2px #66728a;color:#172033;font-size:29px;cursor:pointer}
.face:active{transform:translateY(2px)}
.mobile-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px auto 0;font-size:12px;color:#91a2bd}
.mobile-actions button{border:1px solid #50617f;border-radius:10px;background:#1a253a;color:#dbe5f5;padding:8px 12px;cursor:pointer}
.mobile-actions button[aria-pressed="true"]{background:#56481f;border-color:var(--accent);color:#fff2bd}
.message{min-height:22px;margin:10px auto 6px;text-align:center;color:#b8c7dc;font-size:13px}
.board-frame{max-width:100%;margin:auto;padding:8px;border:1px solid #485875;border-radius:13px;background:#151d2d;box-shadow:0 18px 45px #0007}
.board-scroller{max-width:100%;overflow:auto;overscroll-behavior:contain;scrollbar-color:#637596 #182235}
.board{display:grid;width:max-content;margin:auto;gap:1px;padding:4px;background:#77859b;border:3px solid;border-color:#b8c4d5 #4b566a #4b566a #b8c4d5;user-select:none}
.cell{display:grid;place-items:center;width:var(--cell);height:var(--cell);border:2px solid;border-color:#e4eaf4 #6a768c #6a768c #e4eaf4;background:#aab6c8;color:#172033;font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(var(--cell)*.57);font-weight:900;line-height:1;cursor:pointer;padding:0}
.cell:hover:not(.revealed){background:#bec8d7}
.cell:focus-visible{position:relative;z-index:2;outline:3px solid var(--accent);outline-offset:-2px}
.cell.revealed{border:1px solid #7c8799;background:#c7d0dc;cursor:default}
.cell.flagged{color:#d7263d}
.cell.mine{background:#f2a0a0}
.cell.exploded{background:#ef3e4e;color:#111}
.cell.wrong{color:#b40016;text-decoration:line-through}
.cell.n1{color:#1765c0}.cell.n2{color:#137439}.cell.n3{color:#d23b31}.cell.n4{color:#5537a4}.cell.n5{color:#8b261f}.cell.n6{color:#087a86}.cell.n7{color:#191919}.cell.n8{color:#596171}
.help{max-width:720px;margin:16px auto;padding:16px 18px;border:1px solid #ffffff1e;border-radius:14px;background:#172033;color:#bfcde2;font-size:14px;line-height:1.55}
.help h2{margin:0 0 5px;color:var(--accent)}
.help p{margin:6px 0}
[hidden]{display:none!important}
@media(max-width:600px){:root{--cell:29px}.app-shell{padding-left:6px;padding-right:6px}.difficulty button{font-size:13px}.console{gap:24px}.counter{min-width:72px}.board-frame{padding:5px}.board-scroller{justify-content:flex-start}.board{margin:0}}