: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:15px}.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}.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:296px;max-height:calc(100vh - 170px);display:flex;flex-direction:column;gap:8px;overflow:hidden}.hud-recipe{flex:none;background:#0c0f16c7;border:1px solid var(--line);border-radius:10px;padding:12px 14px}.recipe-title{display:flex;justify-content:space-between;align-items:baseline;font-size:17px;font-weight:700;margin-bottom:10px}.recipe-score{color:var(--warn);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:19px;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:8px;font-size:15px;padding:5px 8px;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:14px}.hud-score{margin-top:8px;color:var(--dim);font-size:13px}.hud-slots{position:absolute;left:10px;bottom:12px;display:flex;align-items:flex-end;gap:8px;pointer-events:auto}.slot-box{width:148px;min-height:74px;border-radius:10px;border:2px solid var(--line);background:#0c0f16d1;padding:8px 10px;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:13px;color:var(--dim);margin-bottom:6px}.slot-box.active .slot-box-title{color:var(--accent)}.slot-box-body{font-size:14px;line-height:1.9}.slot-hint{font-size:13px;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;font-size:16px;color:var(--text);background:#0c0f16c7;border:1px solid var(--line);border-radius:10px;padding:9px 16px}.hud-prompt:empty{display:none}.chip.plate{border-color:var(--warn);color:var(--warn)}.plate-line{margin-top:6px;font-size:14px;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:10px 12px}.hud-board:empty{display:none}.board-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px}.board-title span{font-size:11px;font-weight:400;color:var(--dim);text-align:right}.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:8px;font-size:15px;padding:4px 7px;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:18px;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;font-size:16px;font-weight:700;color:var(--warn)}.roster-host{margin-left:auto;font-size:12px;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}.panel.room{width:min(1040px,96vw);max-height:92vh;overflow-y:auto}.room-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.room-head .sub{margin-bottom:0}.room-code-box{text-align:right;flex:none}.room-cols{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px}@media(max-width:860px){.room-cols{grid-template-columns:minmax(0,1fr);gap:20px}}.room-roster-title{margin:16px 0 8px;font-size:12px;color:var(--dim)}.room-roster{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}.room-roster li{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:15px}.room-roster li.ready{border-color:var(--accent);background:#3fa7961a}.roster-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ready-badge{flex:none;font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}.ready-badge.on{color:#8ce99a;border-color:#8ce99a;background:#8ce99a14}.room-roster .roster-host{margin-left:0}.room-actions{display:flex;gap:10px}.room-actions button{flex:1}.room-hint{margin-top:10px;font-size:13px;color:var(--dim);min-height:18px}.room-foot{display:flex;gap:10px;margin-top:14px}.room-foot button{font-size:12px;padding:7px 12px}.char-pick.locked{opacity:.5;pointer-events:none}.panel.results{width:min(1180px,96vw);max-height:92vh;overflow-y:auto}.results-cols{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;margin-bottom:20px}@media(max-width:860px){.results-cols{grid-template-columns:minmax(0,1fr);gap:20px}}.winner{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 18px 18px;border:2px solid var(--win, var(--accent));border-radius:14px;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--win) 22%,transparent),transparent 70%),var(--panel-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--win) 12%,transparent)}.winner-crown{font-size:30px;line-height:1;margin-bottom:2px}.winner-face{border-radius:50%;box-shadow:0 0 0 3px var(--win, var(--accent)),0 10px 26px #00000080}.winner-name{margin-top:12px;font-size:20px;font-weight:700;letter-spacing:1px}.winner-score{font-size:46px;font-weight:800;line-height:1.05;color:var(--win, var(--accent));text-shadow:0 0 24px color-mix(in srgb,var(--win) 45%,transparent)}.winner-break{font-size:12px;color:var(--dim);text-align:center}.winner-taunt{margin-top:14px;padding:9px 14px;max-width:100%;border-left:3px solid var(--win, var(--accent));border-radius:0 8px 8px 0;background:#00000047;font-size:15px;font-style:italic;line-height:1.4;overflow-wrap:anywhere}.winner-taunt:before{content:"「"}.winner-taunt:after{content:"」"}.losers-title{margin:20px 0 8px;font-size:12px;letter-spacing:1px;color:var(--dim)}.losers{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}.loser{flex:1 1 0;min-width:0;max-width:130px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 9px;border:1px solid var(--line);border-radius:10px;background:#0000002e;filter:grayscale(1);color:var(--dim);text-align:center}.loser.mine{border-color:#8b93a5;background:#ffffff0f}.loser-name{margin-top:4px;height:2.4em;font-size:12px;line-height:1.2;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.loser-score{font-size:19px;font-weight:700;line-height:1.2;color:#aab2c4}.loser-stat{height:2.5em;font-size:10px;opacity:.75;line-height:1.25;overflow:hidden}.results-legend.dim{margin-top:12px;opacity:.7}.results-scroll{overflow-x:auto}.results table{width:100%;border-collapse:collapse;font-size:14px}.results th,.results td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}.results th{color:var(--dim);font-weight:600}.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-h2{margin:0 0 4px;font-size:17px;letter-spacing:1px}.results-legend{margin:0 0 10px;font-size:12px;color:var(--dim)}.results .matrix th,.results .matrix td{text-align:center}.results .matrix th:first-child,.results .matrix td:first-child{text-align:left}.results .matrix .matrix-name{min-width:96px}.results .matrix td.self{color:var(--line)}.results .matrix td.duel.zero{opacity:.35}.results .matrix .slash{color:var(--dim);margin:0 3px}.atk{color:#ffa94d;font-weight:700}.def{color:#74c0fc;font-weight:700}.results tr.me .atk,.results tr.me .def{text-shadow:0 0 8px currentColor}.results-actions{display:flex;gap:12px}.results-actions #back-room{flex:2}.results-actions #exit-game{flex:1}.hud-alert{position:absolute;top:92px;left:50%;transform:translate(-50%);display:none;flex-direction:column;gap:4px;width:max-content;max-width:min(760px,94vw);pointer-events:none;z-index:5}.hud-alert.on{display:flex}.alert-row{display:flex;align-items:center;gap:10px;padding:7px 16px;border-radius:10px;border:2px solid;font-size:14px;white-space:nowrap;background:#0c0f16eb;box-shadow:0 6px 20px #00000073;animation:alert-in .18s ease-out}.alert-row.danger{border-color:var(--danger);color:#ffd9d9}.alert-row.self{border-color:var(--warn);color:#fff3c4}.alert-icon{font-size:18px;line-height:1}.alert-text{flex:1}.alert-text b{color:#fff}.alert-score{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px}.alert-row.danger .alert-score{color:var(--danger)}.alert-row.self .alert-score{color:var(--warn)}.alert-how{font-size:12px;color:var(--dim);border-left:1px solid var(--line);padding-left:10px}.hud-alert.urgent .alert-row.danger{animation:alert-in .18s ease-out,alert-pulse .9s ease-in-out .18s infinite}@keyframes alert-in{0%{opacity:0;transform:translateY(-8px)}}@keyframes alert-pulse{50%{border-color:#fff;box-shadow:0 6px 20px #ff6b6b8c}}@media(max-width:720px){.alert-row{font-size:12px;padding:6px 10px;white-space:normal}.alert-how{display:none}}.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)}.char-mini{display:inline-block;flex:0 0 auto;width:var(--mini-size, 22px);height:var(--mini-size, 22px);overflow:hidden;vertical-align:middle;border-radius:50%;background:#00000038}.char-mini .char-svg{width:155%;max-width:none;height:155%;margin:-34% 0 0 -28%;animation:none}@media(max-width:460px){.char-grid{grid-template-columns:repeat(3,1fr)}}.taunt-pick{margin-bottom:16px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:8px 12px}.taunt-pick>summary{cursor:pointer;font-size:12px;color:var(--dim);list-style:none;display:flex;align-items:center;gap:6px}.taunt-pick>summary::-webkit-details-marker{display:none}.taunt-pick>summary:before{content:"▸";color:var(--accent)}.taunt-pick[open]>summary:before{content:"▾"}.taunt-pick>summary b{color:var(--text);letter-spacing:1px}.taunt-note{margin-left:auto;opacity:.7}.taunt-who{display:flex;align-items:baseline;gap:8px;margin-top:10px;font-size:12px;color:var(--dim)}.taunt-who b{color:var(--accent);font-size:13px}.taunt-who>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.taunt-who button{flex:none;padding:3px 10px;font-size:11px}.taunt-rows{display:flex;flex-direction:column;gap:6px;margin:10px 0 8px}.taunt-row{display:flex;align-items:center;gap:8px}.taunt-row input[type=text]{flex:1;padding:6px 10px;font-size:13px}.taunt-dice{flex:0 0 34px;padding:6px 0;font-size:13px;line-height:1}.taunt-hint{display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:1px solid var(--line)}.taunt-group{display:flex;flex-wrap:wrap;align-items:center;gap:5px}.taunt-group>span{flex:0 0 100%;font-size:11px;color:var(--dim)}.taunt-preset{padding:3px 8px;font-size:11px;border-radius:999px;background:#ffffff0a}