:root{color-scheme:light;--page: #c0c0c0;--page-bar: #a8a8a8;--board-bg: #a8a8a8;--panel: #d4d0c8;--panel-hi: #ffffff;--panel-shade: #808080;--ink: #000000;--ink-dim: #4a4a4a;--ink-invert: #ffffff;--btn-face: #c0c0c0;--btn-hi: #ffffff;--btn-shade: #808080;--btn-primary-face: #b8c8e8;--btn-primary-ink: #000080;--cell-face: #c0c0c0;--cell-hi: #ffffff;--cell-shade: #808080;--cell-hover: 1.06;--cell-open: #d0d0d0;--cell-down-face: #d0d0d0;--cell-down-hi: #ffffff;--cell-down-shade: #808080;--lcd-face: #1a1a1a;--lcd-ink: #ff2b2b;--lcd-hi: #f2f2f2;--lcd-shade: #6a6a6a;--n1: #0000ff;--n2: #008000;--n3: #ff0000;--n4: #000080;--n5: #808000;--n6: #008080;--n7: #000000;--n8: #808080;--flag: #d40000;--flag-pole: #202020;--qmark: #000080;--mine: #1a1a1a;--mine-hi: rgba(255, 255, 255, .45);--sel-face: #b8c8e8;--sel-ink: #000080;--sel-shade: #808080;--sel-hi: #ffffff;--danger: #cc0000;--warn: #8a6d00;--warn-ink: #ffffff;--boom-face: #ff5b5b;--online: #008000;--cell: 30px;--bevel: 3px;--bevel-open: 2px;--font-cn: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;--font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}:root[data-theme=dark]{color-scheme:dark;--page: #2a2a2a;--page-bar: #1e1e1e;--board-bg: #2a2a2a;--panel: #343434;--panel-hi: #6f6f6f;--panel-shade: #0e0e0e;--ink: #f2f2f2;--ink-dim: #b0b0b0;--ink-invert: #101010;--btn-face: #454545;--btn-hi: #7a7a7a;--btn-shade: #141414;--btn-primary-face: #4b6ea8;--btn-primary-ink: #ffffff;--cell-face: #555555;--cell-hi: #7a7a7a;--cell-shade: #1a1a1a;--cell-hover: 1.14;--cell-open: #d0d0d0;--cell-down-face: #d0d0d0;--cell-down-hi: #ffffff;--cell-down-shade: #808080;--lcd-face: #000000;--lcd-ink: #ff4b4b;--lcd-hi: #6e6e6e;--lcd-shade: #3a3a3a;--n1: #0000ff;--n2: #008000;--n3: #ff0000;--n4: #000080;--n5: #808000;--n6: #008080;--n7: #000000;--n8: #808080;--flag: #ff3b3b;--flag-pole: #0b0b0b;--qmark: #000080;--mine: #101010;--mine-hi: rgba(255, 255, 255, .5);--sel-face: #4b6ea8;--sel-ink: #ffffff;--sel-shade: #141414;--sel-hi: #7a7a7a;--danger: #ff8080;--warn: #ffd27a;--warn-ink: #1a1a1a;--boom-face: #ff5b5b;--online: #7ddc9a;--cell: 30px;--bevel: 3px;--bevel-open: 2px;--font-cn: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;--font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}body{background:var(--page);color:var(--ink);font-family:var(--font-cn);font-size:15px;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{height:100%;display:flex;flex-direction:column}.screen{flex:1;min-height:0;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--page-bar);border-top:2px solid var(--cell-hi);border-bottom:2px solid var(--cell-shade)}.brand{font-weight:700;font-size:15px;letter-spacing:1px}.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:14px;color:var(--ink);background:var(--btn-face);border-top:var(--bevel) solid var(--btn-hi);border-left:var(--bevel) solid var(--btn-hi);border-right:var(--bevel) solid var(--btn-shade);border-bottom:var(--bevel) solid var(--btn-shade);border-radius:0;padding:8px 14px;cursor:pointer;touch-action:manipulation}.btn:hover:not(:disabled){filter:brightness(var(--cell-hover))}.btn:active:not(:disabled){border-top-color:var(--btn-shade);border-left-color:var(--btn-shade);border-right-color:var(--btn-hi);border-bottom-color:var(--btn-hi)}.btn:focus-visible{outline:2px solid var(--sel-ink);outline-offset:1px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--btn-primary-face);color:var(--btn-primary-ink);font-weight:700}.btn.danger{color:var(--danger)}.btn.big{width:100%;padding:12px;font-size:16px}.btn.small{padding:5px 10px;font-size:13px}.input{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--cell-open);border-top:var(--bevel) solid var(--panel-shade);border-left:var(--bevel) solid var(--panel-shade);border-right:var(--bevel) solid var(--panel-hi);border-bottom:var(--bevel) solid var(--panel-hi);border-radius:0;padding:10px 12px}.input::placeholder{color:var(--ink-dim);opacity:.85}.input:focus{outline:2px solid var(--sel-ink);outline-offset:-1px}.input.code{font-family:var(--font-num);text-transform:uppercase;letter-spacing:8px;text-indent:8px;font-size:22px;font-weight:700;text-align:center}.theme-toggle{margin-left:auto;padding:5px 10px;font-size:13px}.ticon{position:relative;display:inline-block;flex:none;width:1.15em;height:1.15em;vertical-align:-.16em}.ticon--sun:before{content:"";position:absolute;inset:28%;background:currentColor;border-radius:50%}.ticon--sun:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle closest-side at 50% 2%,currentColor 0 34%,transparent 35%),radial-gradient(circle closest-side at 50% 98%,currentColor 0 34%,transparent 35%),radial-gradient(circle closest-side at 2% 50%,currentColor 0 34%,transparent 35%),radial-gradient(circle closest-side at 98% 50%,currentColor 0 34%,transparent 35%),radial-gradient(circle closest-side at 16% 16%,currentColor 0 34%,transparent 35%),radial-gradient(circle closest-side at 84% 16%,currentColor 0 34%,transparent 35%),radial-gradient(circle closest-side at 16% 84%,currentColor 0 34%,transparent 35%),radial-gradient(circle closest-side at 84% 84%,currentColor 0 34%,transparent 35%)}.ticon--moon:before{content:"";position:absolute;inset:6%;background:currentColor;border-radius:50%}.ticon--moon:after{content:"";position:absolute;left:-22%;top:-26%;width:96%;height:96%;background:var(--btn-face);border-radius:50%}.home,.waiting{align-items:center;justify-content:center;padding:14px;overflow:auto}.panel{width:min(430px,100%);background:var(--panel);border-top:var(--bevel) solid var(--panel-hi);border-left:var(--bevel) solid var(--panel-hi);border-right:var(--bevel) solid var(--panel-shade);border-bottom:var(--bevel) solid var(--panel-shade);padding:20px;box-shadow:inset 0 0 0 1px #0000000a}.title{margin:0 0 6px;font-size:24px;text-align:center;letter-spacing:2px}.subtitle{margin:0 0 18px;color:var(--ink-dim);text-align:center;font-size:13px;line-height:1.6}.label{display:block;margin:14px 0 6px;font-size:13px;color:var(--ink-dim)}h2.label{font-size:14px;margin-top:18px}.difficulty-group{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.custom-row{margin-top:2px}.custom-field{flex:1;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-dim);min-width:0}.input.custom-num{padding:7px 8px;font-family:var(--font-num);text-align:center}.input.custom-num::-webkit-outer-spin-button,.input.custom-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input.custom-num{-moz-appearance:textfield;appearance:textfield}.difficulty-group.mini{display:flex;gap:6px;flex-wrap:wrap}.diff{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;font-family:inherit;font-size:15px;color:var(--ink);background:var(--btn-face);border-top:var(--bevel) solid var(--btn-hi);border-left:var(--bevel) solid var(--btn-hi);border-right:var(--bevel) solid var(--btn-shade);border-bottom:var(--bevel) solid var(--btn-shade);cursor:pointer}.diff span{font-size:11px;color:var(--ink-dim);font-family:var(--font-num)}.diff:hover{filter:brightness(var(--cell-hover))}.diff.active{background:var(--sel-face);color:var(--sel-ink);border-top-color:var(--sel-shade);border-left-color:var(--sel-shade);border-right-color:var(--sel-hi);border-bottom-color:var(--sel-hi)}.diff.active span{color:inherit;opacity:.85}.diff.mini{padding:6px 10px;font-size:13px}.sep{display:flex;align-items:center;gap:10px;margin:18px 0 10px;color:var(--ink-dim);font-size:12px}.sep:before,.sep:after{content:"";flex:1;height:2px;background:var(--btn-shade);border-top:1px solid var(--btn-hi)}.join-row{display:flex;gap:8px}.join-row .input{flex:1;min-width:0}.join-row .btn{flex:none;width:96px}.hint{color:var(--ink-dim);font-size:12px;line-height:1.6;margin:12px 0 0;text-align:center}.notice-slot{min-height:20px;margin:8px 0 0;text-align:center}.notice{font-size:13px;color:var(--danger);display:inline-block}.notice.info{color:var(--ink-dim)}.subtle{color:var(--ink-dim);font-size:13px;text-align:center;margin:0;font-family:var(--font-num)}.code-caption{letter-spacing:6px;text-indent:6px;font-size:12px}.hint.filled{margin-top:6px;color:var(--sel-ink)}.code-box{margin:8px 0 10px;padding:12px 8px;background:var(--lcd-face);border-top:var(--bevel) solid var(--panel-shade);border-left:var(--bevel) solid var(--panel-shade);border-right:var(--bevel) solid var(--panel-hi);border-bottom:var(--bevel) solid var(--panel-hi);text-align:center}.code-text{display:block;font-family:var(--font-num);font-size:clamp(38px,12vw,52px);font-weight:800;letter-spacing:.22em;text-indent:.22em;line-height:1.1;color:var(--lcd-ink)}.wait-hint{text-align:center;color:var(--ink-dim);margin:16px 0 0;font-size:14px}.waiting .btn.big{margin-top:16px}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.player{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--btn-face);border-top:2px solid var(--btn-hi);border-left:2px solid var(--btn-hi);border-right:2px solid var(--btn-shade);border-bottom:2px solid var(--btn-shade);font-size:15px}.player.empty{color:var(--ink-dim);justify-content:center}.player .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--btn-shade);border-top:1px solid var(--btn-hi);border-left:1px solid var(--btn-hi);border-right:1px solid var(--btn-shade);border-bottom:1px solid var(--btn-shade)}.player.online .dot{background:var(--online)}.player.offline{opacity:.6}.player .name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player .state{color:var(--ink-dim);font-size:12px}.badge{font-size:11px;padding:2px 6px;background:var(--sel-face);color:var(--sel-ink);border:1px solid var(--sel-shade)}.game{position:relative}.game-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;background:var(--page-bar);border-top:2px solid var(--cell-hi);border-bottom:2px solid var(--cell-shade)}.bar-item{padding:4px 10px;background:var(--btn-face);border-top:2px solid var(--btn-hi);border-left:2px solid var(--btn-hi);border-right:2px solid var(--btn-shade);border-bottom:2px solid var(--btn-shade);font-family:var(--font-num);font-size:14px;font-variant-numeric:tabular-nums}.bar-item.code{font-weight:800;letter-spacing:3px;text-indent:3px;color:var(--sel-ink)}.bar-item.mines,.bar-item.time{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:7ch;padding:3px 8px;text-align:center;font-weight:700;background:var(--lcd-face);color:var(--lcd-ink);border-top:2px solid var(--lcd-shade);border-left:2px solid var(--lcd-shade);border-right:2px solid var(--lcd-hi);border-bottom:2px solid var(--lcd-hi)}.bar-item.players{margin-left:auto;color:var(--ink);font-family:var(--font-cn);font-size:13px}.bar-item.mines .mines-num,.bar-item.time .time-num{display:inline-block;min-width:4ch;text-align:center;font-variant-numeric:tabular-nums}.bar-item.players.is-offline{color:var(--danger)}.offline-bar{background:var(--warn);color:var(--warn-ink);text-align:center;padding:6px;font-size:13px;font-weight:700;cursor:pointer;border-bottom:2px solid var(--cell-shade)}.offline-bar:hover{filter:brightness(1.08)}.viewport{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--board-bg);touch-action:none;cursor:grab}.viewport:active{cursor:grabbing}.pan{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}.grid{--bevel: clamp(1px, calc(var(--cell) * .1), 3px);--bevel-open: clamp(1px, calc(var(--cell) * .07), 2px);display:grid;grid-template-columns:repeat(var(--cols, 9),var(--cell));grid-template-rows:repeat(var(--rows, 9),var(--cell));position:relative}.grid:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--cell-shade);pointer-events:none}.cell{position:relative;width:var(--cell);height:var(--cell);background:var(--cell-face);border-top:var(--bevel) solid var(--cell-hi);border-left:var(--bevel) solid var(--cell-hi);border-right:var(--bevel) solid var(--cell-shade);border-bottom:var(--bevel) solid var(--cell-shade);box-shadow:inset 0 0 0 1px #0000000d;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--font-num);font-size:calc(var(--cell) * .6);font-weight:700;line-height:1;color:var(--n7)}.cell:not(.open):hover{filter:brightness(var(--cell-hover))}.cell.open{background:var(--cell-open);border-top:var(--bevel-open) solid var(--cell-down-shade);border-left:var(--bevel-open) solid var(--cell-down-shade);border-right:var(--bevel-open) solid var(--cell-down-hi);border-bottom:var(--bevel-open) solid var(--cell-down-hi);box-shadow:none}.cell.just-opened{animation:press-in .22s ease-out}@keyframes press-in{0%{background:var(--cell-face);border-top-color:var(--cell-hi);border-left-color:var(--cell-hi);border-right-color:var(--cell-shade);border-bottom-color:var(--cell-shade)}to{background:var(--cell-open);border-top-color:var(--cell-down-shade);border-left-color:var(--cell-down-shade);border-right-color:var(--cell-down-hi);border-bottom-color:var(--cell-down-hi)}}.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.flag:before{content:"";position:absolute;left:28%;top:14%;width:14%;height:66%;background-color:var(--flag-pole);background-image:linear-gradient(var(--flag-pole),var(--flag-pole));background-size:190% 13%;background-position:100% 100%;background-repeat:no-repeat}.cell.flag:after{content:"";position:absolute;left:41%;top:16%;width:44%;height:32%;background:var(--flag);clip-path:polygon(0 0,100% 50%,0 100%)}.cell.question{font-family:var(--font-num);font-weight:700;color:var(--qmark)}.cell.mine:before,.glyph-mine:before{content:"";position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);background:var(--mine);border-radius:50%;z-index:2;box-shadow:inset calc(var(--cell, 30px) * .07) calc(var(--cell, 30px) * .07) 0 var(--mine-hi),inset calc(var(--cell, 30px) * -.05) calc(var(--cell, 30px) * -.05) 0 #00000080}.cell.mine:after,.glyph-mine:after{content:"";position:absolute;left:50%;top:50%;width:84%;height:84%;transform:translate(-50%,-50%) rotate(45deg);z-index:1;background-image:linear-gradient(var(--mine),var(--mine)),linear-gradient(var(--mine),var(--mine));background-size:24% 100%,100% 24%;background-position:center center,center center;background-repeat:no-repeat}.glyph-mine{position:relative;display:inline-block;flex:none;width:1.15em;height:1.15em;vertical-align:-.17em}.glyph-mine:before{width:56%;height:56%;box-shadow:inset .06em .06em 0 var(--mine-hi),inset -.05em -.05em #00000080}.glyph-mine:after{width:100%;height:100%;background-size:20% 100%,100% 20%}.glyph-clock{position:relative;display:inline-block;flex:none;box-sizing:border-box;width:1.15em;height:1.15em;border:.09em solid currentColor;border-radius:50%;vertical-align:-.17em}.glyph-clock:after{content:"";position:absolute;inset:0;background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-size:.09em 38%,30% .09em;background-position:50% 12%,50% 40%;background-repeat:no-repeat}.cell.boom{background:var(--boom-face);animation:boom-blink .45s steps(2,end) infinite}@keyframes boom-blink{0%{filter:brightness(1)}to{filter:brightness(.78)}}.cell.pulse{animation:pulse .26s ease}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.18)}to{transform:scale(1)}}.toolbar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--page-bar);border-top:2px solid var(--cell-hi);flex-wrap:wrap}.toolbar .spacer{flex:1}.end-overlay{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}.end-card{width:min(320px,86vw);padding:22px;text-align:center;background:var(--panel);border-top:var(--bevel) solid var(--panel-hi);border-left:var(--bevel) solid var(--panel-hi);border-right:var(--bevel) solid var(--panel-shade);border-bottom:var(--bevel) solid var(--panel-shade);animation:rise .25s ease}.end-card h2{margin:0 0 8px;font-size:20px;line-height:1.4}.end-card.win h2{color:var(--online)}.end-card.lose h2{color:var(--danger)}.end-card p{color:var(--ink-dim);font-size:14px;margin:0 0 16px;font-family:var(--font-num)}@keyframes rise{0%{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}.overlay{position:fixed;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}.modal{width:min(330px,90vw);padding:18px;background:var(--panel);border-top:var(--bevel) solid var(--panel-hi);border-left:var(--bevel) solid var(--panel-hi);border-right:var(--bevel) solid var(--panel-shade);border-bottom:var(--bevel) solid var(--panel-shade)}.modal h3{margin:0 0 8px;font-size:17px}.modal p{margin:0 0 16px;color:var(--ink-dim);font-size:14px;line-height:1.6}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%);max-width:86vw;background:var(--panel);color:var(--ink);padding:8px 16px;border-top:2px solid var(--panel-hi);border-left:2px solid var(--panel-hi);border-right:2px solid var(--panel-shade);border-bottom:2px solid var(--panel-shade);font-size:14px;z-index:200;animation:rise .2s ease}.grid{--cell: min(30px, calc((100vw - 30px) / var(--cols, 9)))}.grid[data-cols="9"]{--cell: min(30px, calc((100vw - 30px) / 9))}.grid[data-cols="16"]{--cell: min(30px, calc((100vw - 30px)/16) )}.grid[data-cols="30"]{--cell: min(30px, calc((100vw - 30px) / 30))}@media(max-width:560px){:root{--bevel: 2px;--bevel-open: 2px}.brand{font-size:14px}.panel{padding:16px 14px}.title{font-size:21px}.toolbar .btn{flex:1 1 68px;padding:9px 6px;font-size:13px}.toolbar .difficulty-group.mini{flex:1 1 100%;justify-content:center}.toolbar .diff.mini{flex:1}.game-bar{gap:6px;padding:5px 6px}.bar-item{padding:3px 7px;font-size:13px}.bar-item.mines,.bar-item.time{min-width:6ch;padding:3px 5px;gap:4px}.bar-item.players{margin-left:0}.join-row{flex-wrap:wrap}.join-row .input{flex:1 1 100%}.join-row .btn{flex:1;width:auto}}@media(orientation:landscape)and (max-height:520px){.topbar{padding:4px 8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}