:root{--cream-50: #fffaf0;--cream-100: #fbf3e4;--cream-200: #f3e4c8;--cream-300: #e3cfae;--brown-500: #8a5a33;--brown-700: #6b4a35;--brown-900: #3b2416;--teal-600: #0f766e;--teal-700: #115e59;--teal-100: #d5ece7;--rust-700: #9a3412;--gold-400: #e0a106;--color-bg: var(--cream-100);--color-surface: var(--cream-50);--color-surface-sunk: var(--cream-200);--color-border: var(--cream-300);--color-text: var(--brown-900);--color-text-secondary: var(--brown-700);--color-accent: var(--teal-600);--color-accent-hover: var(--teal-700);--color-accent-soft: var(--teal-100);--color-on-accent: #ffffff;--color-warn: var(--rust-700);--color-star: var(--gold-400);--color-focus: var(--teal-600);--text-sm: .875rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--shadow-card: 0 1px 2px rgb(59 36 22 / .06), 0 4px 14px rgb(59 36 22 / .07);--ease-out: cubic-bezier(.2, 0, 0, 1);--font-body: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;color-scheme:light}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-md);line-height:1.5}h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}h1{font-size:var(--text-xl);font-weight:800}h2{font-size:var(--text-lg);font-weight:700}h3{font-size:var(--text-md);font-weight:700}p{margin:0;text-wrap:pretty}a{color:var(--color-accent-hover);text-underline-offset:2px}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.skip{position:absolute;inset-inline-start:var(--space-2);top:-60px;background:var(--color-accent);color:var(--color-on-accent);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);z-index:10}.skip:focus{top:var(--space-2)}.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2) var(--space-4);padding:var(--space-2) var(--space-4);max-width:1120px;margin:0 auto}.brand{display:flex;align-items:center;gap:var(--space-2)}.top-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 var(--space-4);border:0;border-radius:var(--radius-sm);background:var(--color-surface-sunk);color:var(--color-text);font:inherit;font-weight:700;cursor:pointer;transition:background-color .15s var(--ease-out),transform .15s var(--ease-out)}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.primary{background:var(--color-accent);color:var(--color-on-accent)}.btn.ghost{background:transparent;min-height:40px;padding:0 var(--space-3)}@media (hover: hover){.btn:hover:not(:disabled){background:var(--color-border)}.btn.primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn.ghost:hover{background:var(--color-surface-sunk)}}.btn[aria-pressed=false]{color:var(--color-text-secondary)}.link-btn{background:none;border:0;padding:0 var(--space-1);min-height:24px;color:var(--color-accent-hover);font:inherit;text-decoration:underline;cursor:pointer}.layout{max-width:1120px;margin:0 auto;padding:0 var(--space-4) var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr)}@media (min-width: 60rem){.layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}.play{display:flex;flex-direction:column;gap:var(--space-3);outline:none}.hud{display:flex;flex-direction:column;gap:var(--space-2)}.hud-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}.stat{font-size:var(--text-sm);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.stat strong{color:var(--color-text);font-size:var(--text-md)}.pups{display:inline-flex;gap:2px}.pups .lost{opacity:.45;filter:grayscale(1)}.chip{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--space-3);border-radius:999px;font-size:var(--text-sm);font-weight:700}.chip.wheel{background:var(--color-accent);color:var(--color-on-accent)}.chip.nap{background:var(--brown-700);color:var(--color-on-accent)}.tip{font-size:var(--text-sm);background:var(--color-accent-soft);color:var(--color-text);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);max-width:65ch}.board-wrap{position:relative;width:min(100%,560px,calc(100svh - 230px));min-width:min(100%,288px);margin-inline:auto}.board{display:block;width:100%;height:auto;border-radius:var(--radius-lg);touch-action:manipulation}.sprite{transform-box:view-box}.hamster.caught{opacity:.8}@media (prefers-reduced-motion: no-preference){.sprite{transition:transform .14s var(--ease-out)}.hamster.won{animation:hop .5s var(--ease-out) 2}}@keyframes hop{50%{translate:0 -12px}}.result{position:absolute;inset-inline:var(--space-4);bottom:var(--space-4);background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:0 8px 30px #3b241640;display:flex;flex-direction:column;gap:var(--space-2)}.result.caught h3,.result.out h3{color:var(--color-warn)}.result-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.stars{font-size:var(--text-xl);color:var(--color-star);letter-spacing:.02em}.dim{color:var(--color-border)}.copy-msg{font-size:var(--text-sm);display:flex;flex-direction:column;gap:var(--space-1)}.copy-msg input{font:inherit;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:6px;width:100%}.controls{display:flex;align-items:center;justify-content:center;gap:var(--space-6);flex-wrap:wrap}.pad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,52px);gap:var(--space-2)}.pad-btn{padding:0;min-height:0;background:var(--color-accent);color:var(--color-on-accent)}@media (hover: hover){.pad-btn:hover:not(:disabled){background:var(--color-accent-hover)}}.pad .up{grid-column:2;grid-row:1}.pad .left{grid-column:1;grid-row:2}.pad .down{grid-column:2;grid-row:2}.pad .right{grid-column:3;grid-row:2}.side-actions{display:flex;flex-direction:column;gap:var(--space-2)}.keys{font-size:var(--text-sm);color:var(--color-text-secondary);text-align:center}.side{display:flex;flex-direction:column;gap:var(--space-4)}.card{background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.card .btn{align-self:flex-start}.small{font-size:var(--text-sm);color:var(--color-text-secondary);overflow-wrap:anywhere}.live-head{display:flex;gap:var(--space-3);align-items:center}.wheel{width:72px;height:72px;flex:none}.spin{transform-origin:50px 48px;transform-box:view-box}@media (prefers-reduced-motion: no-preference){.spin{animation:spin 1.5s linear infinite}}@keyframes spin{to{rotate:360deg}}.live-state{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);font-size:var(--text-sm)}.dot{width:10px;height:10px;border-radius:50%;background:var(--brown-700)}.dot.on{background:var(--color-accent)}.dot.stale{background:var(--color-warn)}.badge{font-size:var(--text-sm);padding:0 var(--space-2);border-radius:999px;background:var(--color-accent-soft)}.badge.warn{background:#fde4d6;color:var(--color-warn)}.warn-text{color:var(--color-warn);font-size:var(--text-sm)}.meta{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);margin:0;font-size:var(--text-sm)}.meta dt{color:var(--color-text-secondary)}.meta dd{margin:0;overflow-wrap:anywhere}.check,.radio{display:flex;align-items:center;gap:var(--space-2);min-height:44px;cursor:pointer}.check input,.radio input{width:20px;height:20px;accent-color:var(--color-accent);margin:0}.routes{border:0;padding:0;margin:0;display:flex;gap:var(--space-4);flex-wrap:wrap}.routes legend{font-size:var(--text-sm);color:var(--color-text-secondary);padding:0}.levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:var(--space-2)}.lvl{width:100%;min-height:56px;border:2px solid transparent;border-radius:var(--radius-sm);background:var(--color-surface-sunk);color:var(--color-text);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transition:background-color .15s var(--ease-out)}@media (hover: hover){.lvl:hover{background:var(--color-border)}}.lvl.current{border-color:var(--color-accent);background:var(--color-accent-soft)}.lvl-n{font-weight:800}.lvl-stars{font-size:var(--text-sm);color:var(--color-star);line-height:1}.foot{max-width:1120px;margin:0 auto;padding:var(--space-4) var(--space-4) var(--space-6);font-size:var(--text-sm);color:var(--color-text-secondary);display:flex;flex-direction:column;gap:var(--space-1)}.about{border:0;border-radius:var(--radius-lg);padding:var(--space-6);max-width:min(560px,calc(100vw - 32px));background:var(--color-surface);color:var(--color-text);overscroll-behavior:contain}.about::backdrop{background:#3b241680}.about[open]{display:flex;flex-direction:column;gap:var(--space-3)}.about-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}.legend{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2);font-size:var(--text-sm)}.legend li{display:flex;align-items:center;gap:var(--space-2)}.swatch{width:20px;height:20px;border-radius:6px;flex:none}.swatch.pup{background:#f3c999;border-radius:50%}.swatch.nest{background:#8a5a33;border-radius:50%}.swatch.crate{background:#c88a50}.swatch.plate{border:4px solid var(--color-accent);border-radius:50%}.swatch.gate{background:repeating-linear-gradient(90deg,#7a5236 0,#7a5236 4px,#c99a5b 4px,#c99a5b 8px)}.swatch.bridge{background:repeating-linear-gradient(0deg,#b07a45 0,#b07a45 5px,#7a5236 5px,#7a5236 7px)}.swatch.napgate{background:repeating-linear-gradient(90deg,#3f5a57 0,#3f5a57 4px,#9cc3bd 4px,#9cc3bd 8px)}.swatch.beetle{background:#234e4a;border-radius:50%}@media (max-width: 30rem){.top{padding-block:var(--space-1)}.top-actions .btn.ghost{padding:0 var(--space-2)}.controls{gap:var(--space-4)}}
