:root{--radius-card:14px;--radius-control:8px;--radius-cell:6px;--cols:9;--cell-size:30px;--gap-cell:3px;--surface:#fff;--page-bg:#e8e8e8;--surface-border:#dbdbdb;--panel-text:#1f2937;--muted-text:#6d747d;--cell-face:#cbd3dd;--cell-gloss:#eaedf1;--cell-edge:#9ea5ac;--revealed-face:#f5f7fa;--revealed-gloss:#fbfcfd;--revealed-edge:#bfc1c3;--number-halo:#0000008c;--danger:#ef4444}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--page-bg);color:var(--panel-text);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,PingFang SC,Microsoft YaHei,sans-serif;font-size:14px;line-height:1.5}#root{min-height:100vh}.app{background:var(--page-bg);flex-direction:column;align-items:safe center;min-height:100vh;padding:clamp(12px,4vw,40px) clamp(8px,2vw,16px) clamp(32px,8vw,64px);display:flex}.shell{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-card);flex-direction:column;align-items:center;gap:clamp(8px,2vw,14px);padding:clamp(12px,3vw,22px);display:flex;box-shadow:0 1px 2px #1018280a,0 12px 32px -8px #10182824}.shell__title{letter-spacing:.02em;color:var(--panel-text);align-self:flex-start;margin:0;font-size:22px;font-weight:700}.toolbar{flex-wrap:wrap;align-self:stretch;align-items:center;gap:8px;display:flex}.appearance{display:contents}.appearance__body{flex-basis:100%}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.btn{white-space:nowrap;color:var(--panel-text);border:1px solid var(--surface-border);border-radius:var(--radius-control);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:7px 14px;font-family:inherit;font-size:13px;font-weight:500;transition:background-color .14s,border-color .14s,box-shadow .14s;display:inline-flex}.btn:hover:not(:disabled){background:#7f7f7f1a}.btn:active:not(:disabled){background:#7f7f7f2e}.btn:focus-visible{outline:2px solid var(--panel-text);outline-offset:2px}.btn:disabled{opacity:.42;cursor:not-allowed}.btn.is-active,.btn[aria-pressed=true]{border-color:var(--panel-text);box-shadow:inset 0 0 0 1px var(--panel-text)}.difficulty-picker{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.difficulty-button{flex-direction:column;align-items:center;gap:0;min-width:108px;padding:9px 14px;line-height:1.35}.difficulty-button__name{font-size:13px;font-weight:600}.difficulty-button__spec,.difficulty-button__best{color:var(--muted-text);font-size:11px;font-weight:400}.difficulty-button.is-active .difficulty-button__spec,.difficulty-button.is-active .difficulty-button__best{color:inherit;opacity:.72}.status-bar{border:1px solid var(--surface-border);border-radius:var(--radius-control);background:#7f7f7f14;justify-content:space-between;align-self:stretch;align-items:center;gap:16px;padding:8px 14px;display:flex}.counter{letter-spacing:.06em;font-variant-numeric:tabular-nums;text-align:center;min-width:3.4em;color:var(--panel-text);font-family:SFMono-Regular,ui-monospace,Courier New,monospace;font-size:20px;font-weight:700}.smiley{border:1px solid var(--surface-border);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;padding:0;transition:background-color .14s,transform 60ms;display:inline-flex}.smiley:hover{background:#7f7f7f1f}.smiley:active{transform:scale(.93)}.smiley:focus-visible{outline:2px solid var(--panel-text);outline-offset:2px}.record-banner{text-align:center;color:#7c4a03;border-radius:var(--radius-control);background:#fef3c7;border:1px solid #fcd34d;align-self:stretch;padding:8px 12px;font-size:13px;font-weight:600}.appearance__caret{width:10px;font-size:9px;display:inline-block}.appearance__body{border:1px solid var(--surface-border);border-radius:var(--radius-control);background:#7f7f7f0f;flex-direction:column;gap:10px;padding:14px;display:flex}.appearance__row{align-items:center;gap:12px;display:flex}.appearance__label{width:84px;color:var(--muted-text);flex:none;font-size:12px}.appearance__swatches{grid-template-columns:repeat(10,24px);gap:6px;display:grid}.swatch{cursor:pointer;border:1px solid #0000002e;border-radius:6px;width:24px;height:24px;padding:0;transition:transform .1s}.swatch:hover{transform:scale(1.12)}.swatch:focus-visible{outline:2px solid var(--panel-text);outline-offset:2px}.swatch--active{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--panel-text)}.appearance__footer{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.appearance__hint{color:var(--danger);font-size:11px}.dialog-backdrop{z-index:20;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#10182866;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{background:var(--surface);border:1px solid var(--surface-border);border-radius:var(--radius-card);flex-direction:column;gap:12px;width:min(360px,100%);padding:20px;display:flex;box-shadow:0 20px 48px -12px #10182852}.dialog__title{color:var(--panel-text);margin:0 0 4px;font-size:16px;font-weight:600}.dialog__field{align-items:center;gap:10px;display:flex}.dialog__field-label{width:44px;color:var(--muted-text);flex:none;font-size:13px}.dialog__input{min-width:0;font:inherit;color:var(--panel-text);background:var(--page-bg);border:1px solid var(--surface-border);border-radius:var(--radius-control);flex:auto;padding:7px 10px;font-size:13px}.dialog__input:focus-visible{outline:2px solid var(--panel-text);outline-offset:1px}.dialog__field-range{min-width:56px;color:var(--muted-text);flex:none;font-size:11px}.dialog__message{min-height:1.4em;color:var(--muted-text);margin:0;font-size:12px}.dialog__message--error{color:var(--danger)}.dialog__actions{justify-content:flex-end;gap:8px;margin-top:4px;display:flex}.board{--board-inset:calc(2 * clamp(8px, 2vw, 16px) + 2 * clamp(12px, 3vw, 22px) + 2px);--cell-size:clamp(20px, calc((100vw - var(--board-inset)) / var(--cols) - 4px), 34px);--gap-cell:clamp(1px, calc(var(--cell-size) * .09), 3px);grid-template-columns:repeat(var(--cols), var(--cell-size));gap:var(--gap-cell);padding:var(--gap-cell);background:var(--revealed-edge);border:1px solid var(--surface-border);border-radius:var(--radius-card);touch-action:manipulation;max-width:none;display:grid}.cell{width:var(--cell-size);height:var(--cell-size);font-family:SFMono-Regular,ui-monospace,Courier New,monospace;font-size:calc(var(--cell-size) * .54);color:var(--panel-text);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:var(--cell-face);border-radius:var(--radius-cell);box-shadow:inset 0 1px 0 var(--cell-gloss), 0 1px 1px #1018281a;border:none;justify-content:center;align-items:center;margin:0;padding:0;font-weight:700;line-height:1;transition:background-color .12s,box-shadow .12s,transform 60ms;display:flex}.cell:hover{background:var(--cell-gloss)}.cell:active{box-shadow:inset 0 1px 2px var(--cell-edge);transform:translateY(1px)}.cell:focus-visible{outline:2px solid var(--panel-text);outline-offset:1px}.cell--revealed,.cell--revealed:hover{background:var(--revealed-face);box-shadow:inset 0 1px 0 var(--revealed-gloss);cursor:default}.cell--revealed:active{box-shadow:inset 0 1px 0 var(--revealed-gloss);transform:none}.cell--exploded,.cell--exploded:hover,.cell--exploded:active{background:var(--danger);transform:none;box-shadow:inset 0 1px #ffffff40}.cell--number{text-shadow:-1px -1px 0 var(--number-halo), 1px -1px 0 var(--number-halo), -1px 1px 0 var(--number-halo), 1px 1px 0 var(--number-halo), 0 0 3px var(--number-halo)}.cell svg,.cell img{width:62%;height:62%;display:block}.cell--exploded .mine-icon{filter:drop-shadow(0 0 1px #fff)drop-shadow(0 0 2px #ffffffbf)}.prank{z-index:100;background:#000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden}.prank__video{object-fit:cover;width:100%;height:100%;display:block}.prank__skip{color:#fff;background:#0000008c;border-color:#fff6;position:absolute;bottom:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}.prank__skip:hover:not(:disabled){background:#000000c7}.prank__skip:active:not(:disabled){background:#000000e6}