:root {
  --bg: #f3f5fa; --panel: #ffffff; --text: #1d2230; --muted: #7a8296; --line: #e3e7ef;
  --tile: #dfe5f0; --tile-hi: #eef2f8; --tile-lo: #c6cedd; --open: #fbfcfe; --open-line: #e8ecf3;
  --accent: #3d7bfd; --accent-soft: #e4edff; --danger: #ef4b5b; --flag: #ef4b5b; --ok: #22a06b;
  --n1: #2f6bff; --n2: #1f9d55; --n3: #e5484d; --n4: #6e3fd8; --n5: #b5470f; --n6: #0f8a9d; --n7: #30343f; --n8: #7a8296;
  --cell: 32px; --radius: 14px;
  --shadow: 0 1px 2px rgba(20,30,60,.06), 0 6px 20px rgba(20,30,60,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161c; --panel: #1d2028; --text: #e8ebf2; --muted: #8b93a7; --line: #2a2e39;
    --tile: #343a48; --tile-hi: #414859; --tile-lo: #262a35; --open: #1a1d24; --open-line: #262a34;
    --accent: #6c9bff; --accent-soft: #24304a; --danger: #ff5f6d; --flag: #ff6b78; --ok: #3fcf8e;
    --n1: #74a4ff; --n2: #4fd18b; --n3: #ff7a7f; --n4: #b393ff; --n5: #ffa36b; --n6: #4fd6e6; --n7: #e8ebf2; --n8: #a0a8bb;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  overscroll-behavior: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.app {
  height: 100vh; height: 100dvh; display: flex; flex-direction: column; max-width: 1100px; margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  gap: 10px;
}
.top { display: flex; flex-direction: column; gap: 10px; }
.levels { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border-radius: 12px; padding: 4px; box-shadow: var(--shadow); }
.levels button { padding: 8px 0; border-radius: 9px; color: var(--muted); font-weight: 600; transition: background .15s, color .15s; }
.levels button.on { background: var(--accent-soft); color: var(--accent); }
.status { display: flex; align-items: center; justify-content: space-between; background: var(--panel); border-radius: var(--radius); padding: 8px 12px; box-shadow: var(--shadow); }
.stat { display: flex; align-items: center; gap: 8px; min-width: 84px; font: 700 22px/1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.stat:last-child { justify-content: flex-end; }
.face { width: 46px; height: 46px; border-radius: 50%; font-size: 26px; line-height: 46px; background: var(--bg); transition: transform .12s; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.face:active { transform: scale(.92); }

.ico { display: inline-block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; flex: none; }
.mine-ico { color: var(--danger); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3C/svg%3E"); }
.clock-ico { color: var(--accent); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9 2h6'/%3E%3C/svg%3E"); }
.flag-ico { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V3h2v1.2l11 4.3-11 4.4V21z'/%3E%3C/svg%3E"); }
.shovel-ico { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 2.5 21.5 4.5 15 11l1.3 1.3a1 1 0 0 1 0 1.4l-4.6 4.6a3 3 0 0 1-2.1.9H5a1 1 0 0 1-1-1v-4.6a3 3 0 0 1 .9-2.1l4.6-4.6a1 1 0 0 1 1.4 0L12.2 8z'/%3E%3C/svg%3E"); }

.wrap {
  flex: 1; min-height: 0; overflow: auto; display: flex; border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow);
  touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin;
}
.board {
  margin: auto; padding: 10px; display: grid; gap: 2px;
  grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell);
}
.c {
  position: relative; border-radius: calc(var(--cell) * .2); background: var(--tile);
  box-shadow: inset 0 2px 0 var(--tile-hi), inset 0 -2px 0 var(--tile-lo);
  display: grid; place-items: center; font-weight: 800; font-size: calc(var(--cell) * .56); line-height: 1;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", Roboto, sans-serif;
  contain: strict;
}
@media (hover: hover) { .c.h:hover { background: var(--tile-hi); } }
.c.pressed { background: var(--tile-lo); box-shadow: none; }
.c.o { background: var(--open); box-shadow: inset 0 0 0 1px var(--open-line); }
.c.o.a { animation: pop .14s ease-out; }
.c.f::after, .c.m::after, .c.x::after { content: ""; width: 62%; height: 62%; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.c.f { color: var(--flag); }
.c.f::after { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V3h2v1.2l11 4.3-11 4.4V21z'/%3E%3C/svg%3E"); animation: drop .16s ease-out; }
.c.m, .c.x { color: var(--text); }
.c.m::after, .c.x::after { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3C/svg%3E"); }
.c.boom { background: var(--danger); color: #fff; box-shadow: none; }
.c.x { background: var(--open); box-shadow: inset 0 0 0 1px var(--open-line); }
.c.x::before { content: ""; position: absolute; inset: 18%; background: linear-gradient(45deg, transparent 45%, var(--danger) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--danger) 45% 55%, transparent 55%); z-index: 1; }
.n1{color:var(--n1)}.n2{color:var(--n2)}.n3{color:var(--n3)}.n4{color:var(--n4)}.n5{color:var(--n5)}.n6{color:var(--n6)}.n7{color:var(--n7)}.n8{color:var(--n8)}

@keyframes pop { from { transform: scale(.82); opacity: .4; } }
@keyframes drop { from { transform: translateY(-25%) scale(.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .c.o.a, .c.f::after { animation: none !important; } }

.bottom { display: flex; gap: 10px; align-items: stretch; }
.mode {
  position: relative; flex: 1; display: grid; grid-template-columns: 1fr 1fr; height: 54px; padding: 4px;
  border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); isolation: isolate;
}
.mode-opt { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--muted); transition: color .18s; z-index: 1; }
.mode-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--accent); transition: transform .2s ease, background .2s; z-index: 0; }
.mode .dig { color: #fff; }
.mode[aria-pressed="true"] .dig { color: var(--muted); }
.mode[aria-pressed="true"] .flag { color: #fff; }
.mode[aria-pressed="true"] .mode-thumb { transform: translateX(100%); background: var(--flag); }
.zoom { display: flex; gap: 6px; background: var(--panel); border-radius: 16px; padding: 4px; box-shadow: var(--shadow); }
.zoom button { width: 46px; border-radius: 12px; font-size: 22px; font-weight: 600; color: var(--muted); }
.zoom button:active, .levels button:active { background: var(--bg); }
.hint { margin: -2px 0 0; text-align: center; font-size: 12px; color: var(--muted); }

.dlg { border: 0; border-radius: 22px; padding: 26px 22px 20px; width: min(340px, 90vw); background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center; }
.dlg[open] { animation: dlgIn .2s ease-out; }
.dlg::backdrop { background: rgba(10,14,25,.45); }
.dlg h2 { margin: 6px 0 6px; font-size: 22px; }
.dlg p { margin: 0 0 6px; color: var(--muted); }
.dlg-emoji { font-size: 46px; line-height: 1; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.dlg-best { margin: 12px 0 4px; padding: 10px; border-radius: 12px; background: var(--bg); font-size: 14px; line-height: 1.7; }
.dlg-best b { color: var(--accent); }
.dlg-best .new { color: var(--ok); font-weight: 700; }
.dlg-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn { flex: 1; height: 46px; border-radius: 14px; font-weight: 700; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.ghost { background: var(--bg); }
.dlg form { display: grid; gap: 10px; margin-top: 12px; text-align: left; }
.dlg label { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.dlg input { width: 110px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; text-align: center; -webkit-user-select: text; user-select: text; }
@keyframes dlgIn { from { transform: translateY(12px) scale(.97); opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); background: rgba(20,24,35,.88); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 760px) {
  .top { flex-direction: row; align-items: stretch; }
  .levels { flex: 0 0 360px; }
  .status { flex: 1; }
  .bottom { justify-content: center; }
  .mode { flex: 0 0 300px; }
}
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlg .btn:focus-visible { outline: none; }