: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;position:fixed;inset:0}#hud>*{pointer-events:auto}.chip{left:12px;top:max(12px, env(safe-area-inset-top));background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;width:min(260px,58vw);padding:10px 12px;position:absolute}.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{right:12px;top:max(12px, env(safe-area-inset-top));gap:6px;display:flex;position:absolute}.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{left:50%;bottom:max(20px, 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-direction:column;align-items:center;gap:10px;padding:14px 16px;animation:.35s ease-out rise;display:flex;position:fixed;transform:translate(-50%)}.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}.row{gap:8px;display:flex}.primary,.ghost{border-radius:12px;height:44px;padding:0 18px;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:translate(-50%,12px)}}@media (prefers-reduced-motion:reduce){.toast{animation:none}.bar i{transition:none}}