:root{--bg: #1b2430;--bg-2: #243044;--panel: #c0c0c0;--panel-dark: #808080;--panel-light: #ffffff;--panel-shadow: #404040;--bezel: #757575;--screen: #000;--led: #ff3030;--led-dim: #4a0000;--cell: #c0c0c0;--cell-open: #d4d0c8;--n1: #0000ff;--n2: #008200;--n3: #ff0000;--n4: #000084;--n5: #840000;--n6: #008284;--n7: #000000;--n8: #840084;--mine: #111;--flag: #d32f2f;--explode: #e53935;--wrong: #c62828;--face: #ffd54f;--ink: #1a1a1a;--muted: #9aa7b8;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}body{font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:radial-gradient(1200px 600px at 20% -10%,#2e425c 0%,transparent 55%),radial-gradient(900px 500px at 100% 100%,#122033 0%,transparent 50%),var(--bg);color:#e8eef6;display:flex;justify-content:center;align-items:flex-start;padding:28px 16px 48px}#app{width:min(100%,1080px);display:flex;flex-direction:column;align-items:center;gap:22px}.hero{text-align:center;max-width:640px}.hero h1{font-size:42px;letter-spacing:.12em;font-weight:700;text-shadow:0 8px 24px rgba(0,0,0,.35)}.hero p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.6}.toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.toolbar button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#e8eef6;padding:8px 16px;border-radius:999px;cursor:pointer;font-size:14px;transition:background .15s,transform .12s,border-color .15s}.toolbar button:hover{background:#ffffff1f}.toolbar button.active{background:#f4c430;color:#1b1b1b;border-color:#f4c430;font-weight:700}.frame{background:linear-gradient(180deg,#d9d9d9,#b8b8b8);padding:12px;border-radius:6px;box-shadow:0 24px 50px #0006,inset 2px 2px #fff,inset -2px -2px #6e6e6e;-webkit-user-select:none;user-select:none}.hud{display:flex;align-items:center;justify-content:space-between;background:var(--panel);padding:8px 10px;margin-bottom:10px;box-shadow:inset 2px 2px 0 var(--panel-dark),inset -2px -2px 0 var(--panel-light)}.led{width:74px;height:38px;background:#120000;color:var(--led);font-family:Courier New,ui-monospace,monospace;font-size:28px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;justify-content:flex-end;padding:0 8px;box-shadow:inset 2px 2px #000,inset -1px -1px #633;text-shadow:0 0 8px rgba(255,48,48,.55)}.face{width:42px;height:42px;background:var(--panel);border:0;box-shadow:2px 2px 0 var(--panel-shadow),inset 2px 2px 0 var(--panel-light),inset -2px -2px 0 var(--panel-dark);cursor:pointer;display:grid;place-items:center;padding:0}.face:active{box-shadow:inset 2px 2px 0 var(--panel-dark),inset -1px -1px 0 var(--panel-light)}.face svg{width:30px;height:30px}.board-wrap{overflow:auto;max-width:calc(100vw - 48px)}.board{display:grid;background:var(--panel-dark);box-shadow:inset 2px 2px 0 var(--panel-dark),inset -2px -2px 0 var(--panel-light);line-height:0}.cell{width:28px;height:28px;display:grid;place-items:center;font-weight:800;font-size:16px;position:relative;cursor:default;background:var(--cell);box-shadow:inset 2px 2px 0 var(--panel-light),inset -2px -2px 0 var(--panel-dark)}.board.small .cell{width:32px;height:32px;font-size:18px}.cell.closed{cursor:pointer}.cell.closed:hover{filter:brightness(1.06)}.cell.closed:active{box-shadow:inset 1px 1px 0 var(--panel-dark)}.cell.open{background:var(--cell-open);box-shadow:inset 1px 1px #8a8a8a}.cell.n1{color:var(--n1)}.cell.n2{color:var(--n2)}.cell.n3{color:var(--n3)}.cell.n4{color:var(--n4)}.cell.n5{color:var(--n5)}.cell.n6{color:var(--n6)}.cell.n7{color:var(--n7)}.cell.n8{color:var(--n8)}.cell.mine{background:var(--cell-open)}.cell.explode{background:var(--explode)}.icon{width:16px;height:16px;display:block}.cell.wrong:after{content:"";position:absolute;width:18px;height:2px;background:var(--wrong);transform:rotate(45deg);box-shadow:0 0}.cell.wrong:before{content:"";position:absolute;width:18px;height:2px;background:var(--wrong);transform:rotate(-45deg)}.help{color:var(--muted);font-size:13px;text-align:center;line-height:1.7}.help kbd{display:inline-block;padding:1px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.18);background:#ffffff14;font-size:12px}.status-won .hero h1{color:#7dffb3}.status-lost .hero h1{color:#ff8a80}@media(max-width:720px){.hero h1{font-size:32px}.cell,.board.small .cell{width:24px;height:24px;font-size:14px}}