:root{color-scheme:dark;--bg: #11141c;--panel: #1c2130;--panel-2: #262d40;--line: #333c52;--text: #f2f4f8;--dim: #98a2b8;--accent: #3fa796;--danger: #ff6b6b;--warn: #ffd43b;font-family:system-ui,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden}#game canvas{display:block;margin:0 auto}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#1e2536,#0c0e14);z-index:20}.panel{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px 32px;box-shadow:0 24px 60px #00000073}.panel h1{margin:0 0 4px;font-size:26px;letter-spacing:2px}.panel .sub{margin:0 0 22px;color:var(--dim);font-size:13px}label{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}input[type=text]{width:100%;padding:10px 12px;font-size:15px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);outline:none}input[type=text]:focus{border-color:var(--accent)}.row{display:flex;gap:12px;margin-bottom:16px}.row>*{flex:1}button{padding:10px 16px;font-size:14px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer;transition:background .12s ease,border-color .12s ease}button:hover:not(:disabled){background:#313a52;border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:#08221e;font-weight:700}button:disabled{opacity:.45;cursor:not-allowed}.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:30px;letter-spacing:8px;color:var(--warn)}.players{list-style:none;margin:12px 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.players li{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:14px}.dot{width:12px;height:12px;border-radius:50%;flex:none}.err{color:var(--danger);font-size:13px;min-height:18px;margin-top:8px}.hint{color:var(--dim);font-size:12px;line-height:1.7}.hud{position:fixed;inset:0;pointer-events:none;font-size:13px}.hud-top{position:absolute;top:36px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;pointer-events:auto}.hud-timer{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:28px;padding:4px 18px;border-radius:10px;background:#0c0f16b8;border:1px solid var(--line)}.hud-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;letter-spacing:2px;color:var(--warn);padding:7px 12px;border-radius:10px;background:#0c0f16b8;border:1px solid var(--line);white-space:nowrap}.hud-start{display:flex;align-items:center}.hud-start-btn{white-space:nowrap}.tag{font-size:12px;color:var(--dim);padding:7px 12px;border-radius:10px;background:#0c0f16b8;border:1px solid var(--line);white-space:nowrap}.hud-timer.endgame{color:var(--warn);border-color:var(--warn);animation:timer-pulse 1s ease-in-out infinite}@keyframes timer-pulse{50%{transform:scale(1.05);border-color:var(--danger)}}.hud-left{position:absolute;top:36px;left:10px;width:230px;max-height:calc(100vh - 160px);display:flex;flex-direction:column;gap:8px;overflow:hidden}.hud-recipe{flex:none;background:#0c0f16c7;border:1px solid var(--line);border-radius:10px;padding:10px 12px}.recipe-title{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}.recipe-score{color:var(--warn);font-family:ui-monospace,Menlo,Consolas,monospace;display:inline-block;animation:score-bump .22s ease-out}@keyframes score-bump{0%{transform:scale(1.35);filter:brightness(1.7)}}.slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.slot{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:6px;background:#ffffff08;border:1px solid transparent}.slot.current{border-color:var(--accent);background:#3fa79624}.slot.misordered .slot-name{color:var(--warn);text-decoration:line-through}.slot.perfect .slot-name{color:#8ce99a}.slot-name{flex:1}.extras{margin-top:8px;color:var(--danger);font-size:12px}.hud-score{margin-top:8px;color:var(--dim);font-size:12px}.hud-slots{position:absolute;left:10px;bottom:12px;display:flex;align-items:flex-end;gap:8px;pointer-events:auto}.slot-box{width:116px;min-height:62px;border-radius:10px;border:2px solid var(--line);background:#0c0f16d1;padding:6px 8px;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.slot-box.active{border-color:var(--accent);box-shadow:0 0 0 3px #3fa7962e;transform:translateY(-3px) scale(1.03)}.slot-box-title{font-size:11px;color:var(--dim);margin-bottom:6px}.slot-box.active .slot-box-title{color:var(--accent)}.slot-box-body{font-size:12px;line-height:1.9}.slot-hint{font-size:11px;color:var(--dim);padding-bottom:6px}.hud-prompt{position:absolute;bottom:20px;left:50%;transform:translate(-50%);min-width:220px;max-width:60vw;text-align:center;color:var(--text);background:#0c0f16c7;border:1px solid var(--line);border-radius:10px;padding:8px 14px}.hud-prompt:empty{display:none}.chip.plate{border-color:var(--warn);color:var(--warn)}.plate-line{margin-top:6px;font-size:12px;color:var(--warn);border-left:3px solid var(--warn);padding-left:6px}.plate-line.carried{animation:plate-pulse 1s ease-in-out infinite}@keyframes plate-pulse{50%{opacity:.55}}.hud-heat{display:none;position:absolute;top:0;left:0;right:0;height:28px;overflow:hidden;border-bottom:1px solid var(--line)}.hud-heat.on{display:block}.heat-track{position:absolute;inset:0;background:#0a0c12d1}.heat-fill{height:100%;width:100%;background:#51cf66;transition:width .12s linear;opacity:.55}.heat-row{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;font-size:15px;font-weight:700;letter-spacing:1px;color:#eaf7ec;text-shadow:0 1px 3px rgba(0,0,0,.8)}.heat-time{font-family:ui-monospace,Menlo,Consolas,monospace}.hud-heat.warn .heat-fill{background:var(--warn)}.hud-heat.burning .heat-fill{background:var(--danger);transition:none;opacity:.75}.hud-heat.burning .heat-row{color:#fff;animation:heat-burn .6s ease-in-out infinite}@keyframes heat-burn{50%{opacity:.45}}.hud-board{flex:0 1 auto;min-height:0;overflow-y:auto;background:#0c0f16c7;border:1px solid var(--line);border-radius:10px;padding:8px 10px}.hud-board:empty{display:none}.board-title{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--dim);margin-bottom:6px}.board-title span{font-size:10px;opacity:.75}.board-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;counter-reset:rank}.board-rows li{display:flex;align-items:center;gap:6px;font-size:12px;padding:2px 5px;border-radius:5px;background:#ffffff08}.board-rows li.me{background:#3fa7962e;color:var(--text);font-weight:700}.board-rows li.gone{opacity:.4}.board-rows li.up{animation:rank-up .6s ease-out}.board-rows li.down{animation:rank-down .6s ease-out}@keyframes rank-up{0%{background:#51cf6680;transform:translate(6px)}}@keyframes rank-down{0%{background:#ff6b6b66;transform:translate(-6px)}}.board-rank{width:14px;color:var(--dim);font-family:ui-monospace,Menlo,Consolas,monospace}.board-rows li:first-child .board-rank{color:var(--warn)}.board-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-score{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--warn)}.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.roster li{display:flex;align-items:center;gap:6px;font-size:13px;padding:3px 6px;border-radius:6px;background:#ffffff08}.roster-host{margin-left:auto;font-size:11px;color:var(--dim)}.chip{display:inline-block;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);margin-right:4px}.chip.empty{color:var(--dim)}.toasts{position:absolute;right:12px;top:38px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:460px}.toast{font-size:17px;line-height:1.4;font-weight:600;background:#0c0f16ed;border:1px solid var(--line);border-left-width:5px;border-radius:10px;padding:10px 16px;box-shadow:0 6px 20px #00000080;animation:toast-in .16s ease-out}.toast.bad{border-left-color:var(--danger)}.toast.good{border-left-color:#8ce99a}@keyframes toast-in{0%{opacity:0;transform:translate(12px)}}.help-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:#06080cb8;backdrop-filter:blur(2px)}.help-panel{width:min(720px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px #0000008c}.help-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}.help-head h2{margin:0;font-size:19px;letter-spacing:1px}.help-close{font-size:12px;padding:6px 12px}.help-body{overflow-y:auto;padding:4px 20px 20px;font-size:13px;line-height:1.75}.help-body section{margin-top:18px}.help-body h3{margin:0 0 8px;font-size:14px;color:var(--accent)}.help-quick{margin-top:16px;border-left:3px solid var(--accent);background:#3fa79614;border-radius:0 8px 8px 0;padding:10px 14px}.help-quick ol{margin:0;padding-left:20px}.help-list{margin:0;padding-left:18px}.help-list li{margin-bottom:6px}.help-note{margin:8px 0 0;color:var(--dim);font-size:12px}.help-keys{width:100%;border-collapse:collapse}.help-keys td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}.help-keys td:first-child{width:34%;white-space:nowrap;color:var(--dim)}.help-keys td.good{color:#8ce99a}.help-keys td.warn{color:var(--warn)}.help-keys td.bad{color:var(--danger)}kbd{display:inline-block;min-width:20px;padding:1px 6px;margin:0 1px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;text-align:center;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px}.hud-help-btn{padding:7px 12px;font-size:12px;white-space:nowrap;background:#0c0f16b8}.results table{width:100%;border-collapse:collapse;font-size:13px}.results th,.results td{padding:7px 6px;text-align:right;border-bottom:1px solid var(--line)}.results th:first-child,.results td:first-child,.results th:nth-child(2),.results td:nth-child(2){text-align:left}.results tr.me td{color:var(--warn);font-weight:700}.results .rank1 td{background:#3fa7961f}.char-pick{margin-bottom:16px}.char-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}.char-head label{margin:0}.char-head .char-note{font-size:11px;color:var(--dim);opacity:.8}.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}.panel:has(.char-pick){max-height:92vh;overflow-y:auto}.char-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 7px;border:2px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);cursor:pointer;transition:border-color .12s ease,transform .12s ease,box-shadow .12s ease}.char-card:hover:not(.on){transform:translateY(-2px);border-color:#4a5570}.char-card.on{border-color:var(--accent);box-shadow:0 0 0 3px #3fa7962e;transform:translateY(-2px)}.char-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.char-svg{width:100%;max-width:46px;height:auto;display:block;transition:transform .12s ease}.char-card.on .char-svg{animation:char-bob 1.6s ease-in-out infinite}@keyframes char-bob{50%{transform:translateY(-3px)}}.char-name{font-size:11px;line-height:1.3;white-space:nowrap}.char-card.on .char-name{color:var(--accent);font-weight:700}.char-flavor{margin-top:8px;min-height:32px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);border-left:3px solid var(--accent);background:#3fa79614;border-radius:0 8px 8px 0;padding:6px 10px}.char-flavor b{color:var(--text)}.char-code{display:flex;gap:8px;margin-top:8px}.char-code input{flex:1;padding:7px 10px;font-size:12px}.char-code button{flex:0 0 72px;padding:7px 10px;font-size:12px}.char-code-msg{font-size:11px;min-height:16px;margin-top:4px;color:var(--dim)}.char-code-msg.ok{color:var(--accent)}.char-code-msg.bad{color:var(--danger)}@media(max-width:460px){.char-grid{grid-template-columns:repeat(3,1fr)}}