:root{--ink:#f4f1ea;--muted:#b9b4a8;--glass:#1214169e;--edge:#ffffff1f;--accent:#5ec8ff;--accent-ink:#062030;--font:"PingFang TC", "Noto Sans TC", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;font-family:var(--font);color:var(--ink);background:#16181a;margin:0;overflow:hidden}canvas{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#vignette{pointer-events:none;background:radial-gradient(#0000 55%,#00000073);position:fixed;inset:0}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;border:0}#hud{pointer-events:none;padding:max(12px, env(safe-area-inset-top)) 12px 12px;align-items:flex-start;gap:8px;display:flex;position:fixed;inset:0}#hud>*{pointer-events:auto}.chip{background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;flex:0 280px;min-width:0;padding:10px 12px}.rug-name{color:var(--muted);letter-spacing:.04em;font-size:12px}.step{align-items:baseline;gap:8px;margin-top:2px;font-size:17px;display:flex}.step span{color:var(--accent);font-variant-numeric:tabular-nums;font-size:12px}.bar{background:#ffffff24;border-radius:3px;height:5px;margin-top:8px;overflow:hidden}.bar i{background:var(--accent);width:0;height:100%;transition:width .15s linear;display:block}.hint{color:var(--muted);margin-top:6px;font-size:12px;line-height:1.4}.ctl{flex:none;gap:6px;margin-left:auto;display:flex}.ctl button{background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:12px;min-width:44px;height:44px;padding:0 12px;font-size:14px}.pill{right:12px;bottom:max(16px, env(safe-area-inset-bottom));background:var(--accent);height:44px;color:var(--accent-ink);border-radius:22px;padding:0 18px;font-weight:600;position:absolute}.toast{width:max-content;max-width:calc(100vw - 24px);left:0;right:0;bottom:max(16px, env(safe-area-inset-bottom));background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-inline:auto;padding:10px 12px;animation:.35s ease-out rise;display:flex;position:fixed}.score{align-items:baseline;gap:10px;display:flex}.score span{color:var(--muted);font-size:13px}.score b{font-variant-numeric:tabular-nums;font-size:30px}.cmp{color:var(--muted);text-align:center;flex-basis:100%;order:3;font-size:12px}.row{gap:8px;display:flex}.primary,.ghost{white-space:nowrap;border-radius:12px;height:44px;padding:0 16px;font-weight:600}.primary{background:var(--accent);color:var(--accent-ink)}.ghost{border:1px solid var(--edge);-webkit-user-select:none;user-select:none;background:#ffffff1a}.overlay{text-align:center;background:radial-gradient(#0a0c0e8c,#0a0c0ed9);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:fixed;inset:0}.overlay h1{letter-spacing:.12em;margin:0;font-size:clamp(40px,11vw,72px)}.overlay p{color:var(--muted);max-width:22em;margin:0;line-height:1.6}.overlay small{color:var(--muted);opacity:.8}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}@media (width<=480px){#modeBtn .lbl,.score span{display:none}.toast .primary,.toast .ghost{padding:0 12px}.score b{font-size:26px}}@media (prefers-reduced-motion:reduce){.toast{animation:none}.bar i{transition:none}}