:root {
  --bg: #f3f5fa; --panel: #ffffff; --text: #1d2230; --muted: #7a8296; --line: #e3e7ef;
  --accent: #3d7bfd; --accent-soft: #e4edff; --ok: #22a06b; --radius: 14px;
  --shadow: 0 1px 2px rgba(20,30,60,.06), 0 6px 20px rgba(20,30,60,.06);
  --felt-1: #2f8f5e; --felt-2: #1f6e47; --felt-3: #185a3a;
  --card: #fdfdfb; --card-edge: rgba(0,0,0,.16); --black: #1b1f2a; --red: #d42a3c;
  --back-1: #4a7cf0; --back-2: #2b55c4; --hint: #ffd23f; --sel: #6cb0ff;
  --cw: 36px; --ch: 50px;
  --spade: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C9.2 5.6 3 9.3 3 14.1a4.6 4.6 0 0 0 7.7 3.3c-.3 2-1.2 3.6-2.7 5.1h8c-1.5-1.5-2.4-3.1-2.7-5.1A4.6 4.6 0 0 0 21 14.1c0-4.8-6.2-8.5-9-12.6z'/%3E%3C/svg%3E");
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.2 17.2 1.8 13.6 1.8 8.6A5.3 5.3 0 0 1 12 5.9a5.3 5.3 0 0 1 10.2 2.7c0 5-4.4 8.6-10.2 13.4z'/%3E%3C/svg%3E");
  --club: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.6' r='4.9'/%3E%3Ccircle cx='6.3' cy='14' r='4.9'/%3E%3Ccircle cx='17.7' cy='14' r='4.9'/%3E%3Cpath d='M10.6 10h2.8l.4 7.2c.3 2.3 1.3 3.8 2.7 5.3H7.5c1.4-1.5 2.4-3 2.7-5.3z'/%3E%3C/svg%3E");
  --diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 20.5 12 12 23 3.5 12z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161c; --panel: #1d2028; --text: #e8ebf2; --muted: #8b93a7; --line: #2a2e39;
    --accent: #6c9bff; --accent-soft: #24304a; --ok: #3fcf8e;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
    --felt-1: #1f5a3e; --felt-2: #163f2d; --felt-3: #102f22;
    --card: #eceef2; --card-edge: rgba(0,0,0,.4); --black: #161a24; --red: #c8243a;
    --back-1: #3e64c4; --back-2: #23418f;
  }
}
* { 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; overflow: hidden;
  -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: 1180px; margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  gap: 8px;
}
@media (max-width: 520px) { .app { padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); } }
.top { display: flex; flex-direction: column; gap: 8px; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--panel); border-radius: 12px; padding: 4px; box-shadow: var(--shadow); }
.levels button { padding: 7px 0; border-radius: 9px; color: var(--muted); font-weight: 600; transition: background .15s, color .15s; }
.levels button small { font-size: 11px; font-weight: 500; margin-left: 4px; opacity: .8; }
.levels button.on { background: var(--accent-soft); color: var(--accent); }
.status { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--panel); border-radius: var(--radius); padding: 6px 4px; box-shadow: var(--shadow); }
.stat { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.stat .lbl { font-size: 12px; color: var(--muted); }
.stat b { font: 700 19px/1.2 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

.table {
  position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--radius);
  background: radial-gradient(120% 90% at 50% 0%, var(--felt-1), var(--felt-2) 60%, var(--felt-3));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 2px 18px rgba(0,0,0,.18), var(--shadow);
  touch-action: none; contain: strict;
}
.slot { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .1); border: 1.5px solid rgba(255,255,255,.16); background: rgba(0,0,0,.08); transition: box-shadow .15s, border-color .15s; }
.slot.found::after { content: ""; position: absolute; inset: 28%; background: rgba(255,255,255,.14); -webkit-mask: var(--spade) center/contain no-repeat; mask: var(--spade) center/contain no-repeat; }
.slot.stock { border-style: dashed; display: grid; place-items: center; color: rgba(255,255,255,.35); font-size: calc(var(--cw) * .28); }
.slot.warn { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255,210,63,.5); animation: blink .9s ease-in-out 2; }
.slot.hint-dst, .slot.drop-ok { border-color: var(--hint); box-shadow: 0 0 0 2px var(--hint); }
.badge { position: absolute; left: 0; top: 0; z-index: 900; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: #1b1f2a; font: 700 11px/18px ui-monospace, Menlo, monospace; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: none; transition: transform .2s, opacity .2s; }

.card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * .1); background: var(--card); color: var(--black);
  box-shadow: 0 0 0 .5px var(--card-edge), 0 1px 2px rgba(0,0,0,.22);
  transition: transform .22s cubic-bezier(.2,.8,.25,1); will-change: transform; cursor: pointer;
  backface-visibility: hidden; overflow: hidden;
}
.card.red { color: var(--red); }
.card .rk { position: absolute; left: calc(var(--cw) * .06); top: calc(var(--cw) * .03); font: 800 calc(var(--cw) * .44)/1 ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.05em; }
.card .rk.ten { letter-spacing: -.12em; font-size: calc(var(--cw) * .4); }
.card .pip { position: absolute; right: calc(var(--cw) * .06); top: calc(var(--cw) * .07); width: calc(var(--cw) * .32); height: calc(var(--cw) * .32); }
.card .mid { position: absolute; left: 50%; top: 61%; width: calc(var(--cw) * .6); height: calc(var(--cw) * .6); transform: translate(-50%, -50%); }
.card .pip, .card .mid { background: currentColor; -webkit-mask: var(--suit) center/contain no-repeat; mask: var(--suit) center/contain no-repeat; }
.card .mid.court { -webkit-mask: none; mask: none; background: none; width: auto; height: auto; font: 700 calc(var(--cw) * .62)/1 Georgia, "Times New Roman", "Noto Serif", serif; }
.card.court::after { content: ""; position: absolute; left: 14%; right: 14%; top: 38%; bottom: 8%; border: 1px solid currentColor; border-radius: 3px; opacity: .25; }
.s0 { --suit: var(--spade); } .s1 { --suit: var(--heart); } .s2 { --suit: var(--club); } .s3 { --suit: var(--diamond); }
.card.down { cursor: default;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.13) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.13) 0 1.5px, transparent 1.5px 5px),
    linear-gradient(160deg, var(--back-1), var(--back-2));
  box-shadow: inset 0 0 0 calc(var(--cw) * .05) #fff, inset 0 0 0 calc(var(--cw) * .05 + 1px) rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.22);
}
.card.down > *, .card.down::after { display: none; }
.card.flip { animation: flip .2s ease-out; }
.card.sel { box-shadow: 0 0 0 2px var(--sel), 0 2px 8px rgba(0,0,0,.3); }
.card.hint { box-shadow: 0 0 0 2.5px var(--hint), 0 0 12px rgba(255,210,63,.6); }
.card.hint-dst { box-shadow: 0 0 0 2.5px var(--hint), 0 0 12px rgba(255,210,63,.6); }
.card.drop-ok { box-shadow: 0 0 0 2.5px var(--hint); }
.card.drag { transition: none; box-shadow: 0 0 0 .5px var(--card-edge), 0 10px 22px rgba(0,0,0,.35); }
.card.shake { animation: shake .28s ease-in-out; }
.card.hop { animation: hop .5s ease-out; }
.noanim .card, .noanim .badge { transition: none !important; }
@keyframes flip { from { scale: .05 1; } }
@keyframes shake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
@keyframes hop { 40% { translate: 0 -18%; } }
@keyframes blink { 50% { box-shadow: 0 0 0 4px rgba(255,210,63,.15); } }
@media (prefers-reduced-motion: reduce) {
  .card, .badge { transition: none !important; }
  .card.flip, .card.shake, .card.hop, .slot.warn, .dlg[open] { animation: none !important; }
}

.bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: var(--panel); border-radius: 16px; padding: 4px; box-shadow: var(--shadow); }
.bar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 50px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--muted); transition: background .15s, color .15s; }
.bar button:active, .levels button:active { background: var(--bg); }
.bar button:disabled { opacity: .4; }
.bar #bHint, .bar #bUndo { color: var(--accent); }
.ico { display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; flex: none; }
.i-new { --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' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='11' height='15' rx='2'/%3E%3Cpath d='M9 21h9a2 2 0 0 0 2-2V8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.i-restart { --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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7L4 8.6'/%3E%3Cpath d='M4 3.5v5.1h5.1'/%3E%3C/svg%3E"); }
.i-stats { --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.2' stroke-linecap='round'%3E%3Cpath d='M5 20V12M12 20V5M19 20v-6'/%3E%3C/svg%3E"); }
.i-hint { --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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.i-undo { --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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); }
.meta { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: -2px; font-size: 12px; color: var(--muted); }
.meta .hint { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xlink { flex: none; color: var(--accent); text-decoration: none; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); }

.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); }
.stats-table { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 1px; margin-top: 12px; border-radius: 12px; overflow: hidden; background: var(--line); font-size: 13px; }
.stats-table > div { background: var(--bg); padding: 8px 4px; font-variant-numeric: tabular-nums; }
.stats-table .h { color: var(--muted); font-weight: 600; }
.stats-table .rh { text-align: left; padding-left: 10px; color: var(--muted); }
@keyframes dlgIn { from { transform: translateY(12px) scale(.97); opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); background: rgba(20,24,35,.9); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; z-index: 10; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 760px) {
  .app { padding: 12px 16px; gap: 10px; }
  .top { flex-direction: row; align-items: stretch; }
  .levels { flex: 0 0 380px; }
  .status { flex: 1; }
  .bar { align-self: center; width: 460px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .app { flex-direction: row; flex-wrap: wrap; align-content: stretch; }
  .top { flex: 0 0 100%; flex-direction: row; }
  .levels { flex: 0 0 300px; } .levels button { padding: 4px 0; } .status { flex: 1; padding: 3px; }
  .table { flex: 1 1 0; height: calc(100% - 52px); min-width: 0; }
  .bar { flex: 0 0 64px; grid-template-columns: 1fr; grid-auto-rows: 1fr; align-self: stretch; }
  .bar button { height: auto; font-size: 11px; }
  .meta { display: none; }
}
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlg .btn:focus-visible { outline: none; }