:root{--win-face:silver;--win-face-2:#d6d6d6;--win-highlight:#fff;--win-shadow:gray;--win-shadow-deep:#404040;--win-text:#000;--titlebar:navy;--titlebar-text:#fff;--cell-size:26px;--cell-max:26px;--radius:0px;--font-ui:"MS Sans Serif", Tahoma, Verdana, Arial, sans-serif}*{box-sizing:border-box}html,body{height:100%}button{font-family:inherit}body{color:var(--win-text);background:var(--win-face);font-family:var(--font-ui);margin:0}.app{max-width:980px;margin:0 auto;padding:20px 16px 30px}.window{border-top:2px solid var(--win-highlight);border-left:2px solid var(--win-highlight);border-right:2px solid var(--win-shadow-deep);border-bottom:2px solid var(--win-shadow-deep);background:var(--win-face)}.titlebar{background:linear-gradient(#0000a8, var(--titlebar));color:var(--titlebar-text);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:4px 6px;font-size:12px;font-weight:700;display:flex}.titlebar__text{white-space:nowrap}.titlebar__buttons{gap:4px;display:flex}.titlebar__btn{background:var(--win-face);border-top:2px solid var(--win-highlight);border-left:2px solid var(--win-highlight);border-right:2px solid var(--win-shadow-deep);border-bottom:2px solid var(--win-shadow-deep);width:14px;height:14px}.titlebar__btn--close{background:linear-gradient(#f3b0b0,#d98b8b)}.window__body{padding:10px}.win-raised{border-top:2px solid var(--win-highlight);border-left:2px solid var(--win-highlight);border-right:2px solid var(--win-shadow-deep);border-bottom:2px solid var(--win-shadow-deep);background:var(--win-face)}.win-sunken{border-top:2px solid var(--win-shadow-deep);border-left:2px solid var(--win-shadow-deep);border-right:2px solid var(--win-highlight);border-bottom:2px solid var(--win-highlight);background:var(--win-face-2)}.topbar{border-radius:var(--radius);background:var(--win-face);border-top:2px solid var(--win-highlight);border-left:2px solid var(--win-highlight);border-right:2px solid var(--win-shadow-deep);border-bottom:2px solid var(--win-shadow-deep);justify-content:space-between;align-items:flex-start;gap:16px;padding:10px;display:flex}.topbar>div:first-child{flex:1}.title{letter-spacing:0;margin:0;font-weight:700}.subtitle{color:#202020;max-width:62ch;margin:6px 0 0;line-height:1.35}.controls{align-items:flex-end;gap:12px;display:flex}.controls__buttons{align-items:flex-end;gap:8px;display:flex}.control{color:#202020;gap:6px;font-size:12px;display:grid}select{appearance:none;color:var(--win-text);border-top:2px solid var(--win-shadow-deep);border-left:2px solid var(--win-shadow-deep);border-right:2px solid var(--win-highlight);border-bottom:2px solid var(--win-highlight);background:#fff;border-radius:0;outline:none;padding:10px 12px}select:focus{outline-offset:-4px;outline:1px dotted #000}.btn{color:var(--win-text);cursor:pointer;border-top:2px solid var(--win-highlight);border-left:2px solid var(--win-highlight);border-right:2px solid var(--win-shadow-deep);border-bottom:2px solid var(--win-shadow-deep);background:linear-gradient(#f0f0f0,#cfcfcf);border-radius:0;padding:10px 14px;font-weight:700}.btn:hover{background:linear-gradient(#fff,#d7d7d7)}.btn:active{border-top:2px solid var(--win-shadow-deep);border-left:2px solid var(--win-shadow-deep);border-right:2px solid var(--win-highlight);border-bottom:2px solid var(--win-highlight);background:linear-gradient(#d0d0d0,#efefef)}.hud{flex-wrap:wrap;gap:10px;margin-top:14px;display:flex}.chip{color:var(--win-text);border-top:2px solid var(--win-shadow-deep);border-left:2px solid var(--win-shadow-deep);border-right:2px solid var(--win-highlight);border-bottom:2px solid var(--win-highlight);background:#fff;border-radius:0;padding:8px 10px}.status{background:#fff}.status--won{background:#eafff3}.status--lost{background:#ffecec}.stage{justify-items:center;gap:14px;margin-top:18px;display:grid}.board{--cols:8;--rows:8;--gap:2px;--board-max:min(96vw, 560px);--cell-size:clamp(14px, calc((var(--board-max) - 16px - (var(--cols) - 1) * var(--gap)) / var(--cols)), var(--cell-max));gap:var(--gap);border-top:2px solid var(--win-shadow-deep);border-left:2px solid var(--win-shadow-deep);border-right:2px solid var(--win-highlight);border-bottom:2px solid var(--win-highlight);background:var(--win-face);max-width:var(--board-max);border-radius:0;padding:8px;display:grid;overflow:auto}.cell{width:var(--cell-size);height:var(--cell-size);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-weight:700;font-family:var(--font-ui);touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:0;place-items:center;padding:0;display:grid}.cell__content{transform:translateY(-.5px)}.cell__icon{width:calc(var(--cell-size) * .7);height:calc(var(--cell-size) * .7);display:block}.cell--hidden{border-top:2px solid var(--win-highlight);border-left:2px solid var(--win-highlight);border-right:2px solid var(--win-shadow-deep);border-bottom:2px solid var(--win-shadow-deep);background:linear-gradient(#e7e7e7,#bdbdbd)}.cell--hidden:hover{background:linear-gradient(#f0f0f0,#c9c9c9)}.cell--revealed{cursor:default;border-top:2px solid var(--win-shadow-deep);border-left:2px solid var(--win-shadow-deep);border-right:2px solid var(--win-highlight);border-bottom:2px solid var(--win-highlight);background:#dcdcdc}.cell--flagged{background:linear-gradient(#e7e7e7,#bdbdbd)}.cell--mine{background:#ffb9b9;padding:0}.cell--void{width:var(--cell-size);height:var(--cell-size);box-shadow:none;pointer-events:none;background:0 0;border:none}.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}.message{background:var(--win-face);width:min(680px,100%);color:var(--win-text);border-top:2px solid var(--win-highlight);border-left:2px solid var(--win-highlight);border-right:2px solid var(--win-shadow-deep);border-bottom:2px solid var(--win-shadow-deep);border-radius:0;padding:12px 14px}.footer{color:#202020;text-align:center;margin-top:18px;font-size:12px}.modeToggle{display:none}.modeToggle__btn{padding:8px 10px;font-size:12px}.modeToggle__btn--active{border-top:2px solid var(--win-shadow-deep);border-left:2px solid var(--win-shadow-deep);border-right:2px solid var(--win-highlight);border-bottom:2px solid var(--win-highlight);background:linear-gradient(#d0d0d0,#efefef)}@media (width<=540px){:root{--cell-max:40px}.app{padding:10px 10px 16px}.window__body{padding:8px}.topbar,.controls,.controls__buttons{flex-direction:column;align-items:stretch}.controls__buttons .btn{width:100%}.modeToggle{right:10px;bottom:calc(10px + env(safe-area-inset-bottom));background:var(--win-face);border-top:2px solid var(--win-highlight);border-left:2px solid var(--win-highlight);border-right:2px solid var(--win-shadow-deep);border-bottom:2px solid var(--win-shadow-deep);z-index:50;gap:6px;padding:6px;display:flex;position:fixed}}