:root{color-scheme:dark;--bg: #0f1024;--bg-raised: #1a1c3a;--bg-card: #23264a;--line: #3a3f74;--text: #eef0ff;--text-dim: #a9add6;--gold: #f2c14e;--gold-strong: #ffd96e;--red: #7b2ff2;--red-strong: #9b5cff;--jade: #2fc6a0;--indigo: #4a5bd6;--fire: #e2563a;--water: #3a8fe2;--thunder: #a46ae2;--hp: #d8402f;--energy: #8b6cf0;--stamina: #4caf50;--radius: 12px;--shadow: 0 8px 24px rgba(0, 0, 0, .45);font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.4}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{overflow-x:hidden}[hidden]{display:none!important}button{font:inherit}.screen{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;padding:16px}.screen-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;z-index:-1;pointer-events:none}.screen-bg.placeholder{font-size:0;background:radial-gradient(circle at 50% 30%,#2b2f63,var(--ph-color, var(--bg)) 70%)}.connecting{display:grid;place-items:center;color:var(--text-dim)}.btn{appearance:none;border:1px solid var(--line);background:var(--bg-card);color:var(--text);padding:10px 18px;border-radius:999px;cursor:pointer;font-weight:600;transition:transform .08s ease,background .15s ease,border-color .15s ease}.btn:hover:not(:disabled){border-color:var(--gold)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,var(--red-strong),var(--red));border-color:var(--gold);color:#fff8ec}.btn-primary.active{background:linear-gradient(180deg,#3fa37a,#2b7656)}.btn-small{padding:4px 12px;font-size:.85rem}.input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#0a0b1a;color:var(--text);font:inherit;font-size:1rem}.input:focus{outline:2px solid var(--gold);outline-offset:1px}.input-code{text-transform:uppercase;letter-spacing:.2em;font-weight:700}.label{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}.form-error{min-height:1.4em;color:#ff9b8a;margin:0}.placeholder{display:grid;place-items:center;background:var(--ph-color);color:#fff;font-weight:700;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8);overflow:hidden;font-size:.75rem;line-height:1.1;padding:2px;-webkit-user-select:none;user-select:none}.placeholder.shape-circle{border-radius:50%}.placeholder.shape-square{border-radius:14%}.placeholder.shape-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.placeholder.shape-hexagon{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}.placeholder.shape-triangle{clip-path:polygon(50% 5%,100% 95%,0 95%)}.placeholder.shape-star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.placeholder.shape-drop{border-radius:50%/60% 60% 40% 40%}.element-badge{width:24px;height:24px;flex:none;font-size:0}.lobby{display:grid;place-items:center}.lobby-card{width:min(440px,100%);display:grid;gap:12px;padding:24px;background:#1a1c3aeb;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.logo{width:100%;aspect-ratio:1024 / 384;object-fit:contain}.logo.placeholder{font-size:clamp(1.6rem,7vw,2.4rem);letter-spacing:.06em;border-radius:12px;background:linear-gradient(135deg,#4b1fa8,var(--ph-color) 60%,#e8b64c)}.tagline{margin:0;color:var(--text-dim);text-align:center}.divider{text-align:center;color:var(--text-dim);font-size:.85rem}.join-row{display:flex;gap:8px}.lobby-layout{width:min(960px,100%);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px;align-items:start}.lobby-layout .lobby-card{width:100%}.lobby-heading{margin:8px 0 0;font-size:.95rem;color:var(--gold);text-transform:uppercase;letter-spacing:.08em}.room-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:46vh;overflow-y:auto}.room-empty{padding:16px;text-align:center;color:var(--text-dim);border:1px dashed var(--line);border-radius:10px}.room-row{display:grid;grid-template-columns:24px 1fr auto auto;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--bg-card);border:1px solid var(--line)}.room-row:not(.room-open){opacity:.6}.room-info{display:grid;min-width:0}.room-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-meta{font-size:.8rem;color:var(--text-dim)}.room-status{font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--bg-raised);color:var(--text-dim)}.room-status-open{color:#7fe0b2}.room-password{grid-column:1 / -1;display:flex;gap:8px}.room-title{display:flex;align-items:baseline;gap:10px;width:100%}.room-title-name{font-size:1.3rem}.room-title-lock{font-size:.85rem;color:var(--gold)}.room-body{width:min(1100px,100%);margin:0 auto;display:grid;gap:16px}.room-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.room-code-box{display:flex;align-items:center;gap:10px;background:var(--bg-raised);border:1px solid var(--gold);border-radius:12px;padding:8px 14px}.room-code{font-size:1.6rem;letter-spacing:.25em;color:var(--gold-strong)}.room-status{margin:0;color:var(--text-dim)}.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.seat{display:flex;gap:12px;align-items:center;padding:10px;border-radius:var(--radius);background:var(--bg-raised);border:1px solid var(--line)}.seat-ready{border-color:var(--jade)}.seat-empty{flex-direction:column;align-items:flex-start;opacity:.6}.seat-portrait{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none}.seat-portrait-empty{display:grid;place-items:center;background:#0a0b1a;font-size:1.6rem;color:var(--text-dim)}.seat-info{display:grid;min-width:0}.seat-role{font-size:.75rem;color:var(--text-dim);text-transform:uppercase}.seat-name{font-weight:700;overflow:hidden;text-overflow:ellipsis}.seat-champion{font-size:.9rem;color:var(--text-dim)}.seat-flag{font-size:.8rem;color:var(--text-dim)}.seat-flag.on{color:#7fe0b2}.matchup{margin:0;padding:8px 12px;border-radius:10px;background:var(--bg-raised);text-align:center}.matchup-advantage{color:#7fe0b2}.matchup-disadvantage{color:#ff9b8a}.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}.champion-card{display:grid;grid-template-columns:88px 1fr;grid-template-areas:"portrait head" "portrait stats" "skills skills";gap:6px 12px;text-align:left;padding:12px;border-radius:var(--radius);border:2px solid var(--line);background:var(--bg-raised);color:var(--text);cursor:pointer}.champion-card:hover{border-color:var(--gold)}.champion-card.selected{border-color:var(--gold-strong);box-shadow:0 0 0 3px #e8b64c40}.champion-card.element-fire{background:linear-gradient(160deg,rgba(226,86,58,.18),var(--bg-raised) 50%)}.champion-card.element-water{background:linear-gradient(160deg,rgba(58,143,226,.18),var(--bg-raised) 50%)}.champion-card.element-thunder{background:linear-gradient(160deg,rgba(164,106,226,.2),var(--bg-raised) 50%)}.card-portrait{grid-area:portrait;width:88px;height:88px;border-radius:10px;object-fit:cover}.card-head{grid-area:head;display:flex;gap:8px;align-items:center}.card-name{display:block}.card-title{display:block;font-size:.8rem;color:var(--text-dim)}.card-stats{grid-area:stats;display:flex;gap:10px;font-size:.85rem;color:var(--gold);font-weight:700}.card-skills{grid-area:skills;margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:.82rem;color:var(--text-dim)}.card-skills strong{color:var(--text)}.card-skills .ultimate strong{color:var(--gold-strong)}.room-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;align-items:center;position:sticky;bottom:0;padding:12px 0;background:linear-gradient(transparent,var(--bg) 40%)}.match{padding:8px 16px}.match-layout{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:1fr;gap:8px}.center{display:grid;gap:6px;justify-items:center}.turn-row{width:min(100%,72vh);display:flex;justify-content:space-between;align-items:center}.turn-label{flex:1;font-weight:700;color:var(--text-dim)}.turn-label.mine{color:var(--gold-strong)}.leave-match{margin-left:12px}.timer{min-width:3.5em;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;font-size:1.2rem}.timer.urgent{color:#ff7b67;animation:pulse .5s ease-in-out infinite alternate}.board-wrap{position:relative;width:min(100%,72vh);aspect-ratio:1}.board-host{position:absolute;inset:0;touch-action:none}.board-host canvas{display:block;border-radius:14px}.banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.9);padding:10px 22px;border-radius:999px;background:#0a0b1ee0;border:1px solid var(--gold);color:var(--gold-strong);font-weight:800;font-size:clamp(1rem,3.5vw,1.4rem);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.connection-notice{position:absolute;left:8px;right:8px;bottom:8px;padding:8px 12px;border-radius:10px;background:#5b21b6eb;text-align:center;display:none}.connection-notice.show{display:block}.side{display:grid;gap:8px}.panel{position:relative;display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:var(--radius);background:#1a1c3aeb;border:2px solid var(--line);transition:border-color .2s ease}.panel.active{border-color:var(--gold-strong);box-shadow:0 0 18px #e8b64c59}.panel-portrait{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none}.panel-body{flex:1;min-width:0;display:grid;gap:4px}.panel-head{display:flex;align-items:center;gap:6px;min-width:0}.panel-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-champion{color:var(--text-dim);font-size:.8rem;white-space:nowrap}.bar{position:relative;height:16px;border-radius:999px;background:#0a0b1a;overflow:hidden}.bar-fill{height:100%;border-radius:inherit;transition:width .3s ease}.bar-hp .bar-fill{background:linear-gradient(90deg,#8f1d14,var(--hp))}.bar-energy .bar-fill{background:linear-gradient(90deg,#4b37a8,var(--energy))}.bar-stamina .bar-fill{background:linear-gradient(90deg,#2c6e30,var(--stamina))}.bar-text{position:absolute;inset:0;display:flex;align-items:center;padding-left:8px;font-size:.7rem;font-weight:700;text-shadow:0 1px 2px #000}.panel-tags{display:flex;flex-wrap:wrap;gap:4px}.tag{font-size:.7rem;padding:1px 8px;border-radius:999px;background:#0a0b1a;color:var(--text-dim)}.tag-shield{color:#9fd3ff}.tag-burn{color:#ffab70}.tag-stun{color:#b9e6ff}.tag-starve{color:#ff9b8a}.tag-advantage{color:#7fe0b2}.tag-disadvantage{color:#ff9b8a}.floats{position:absolute;right:12px;top:4px;display:grid;justify-items:end;pointer-events:none}.float{font-weight:800;font-size:1rem;text-shadow:0 2px 4px #000;animation:float-up 1.2s ease-out forwards}.float.down{color:#ff7b67}.float.up{color:#7fe0b2}.float-energy.up{color:#c2b0ff}.float-gold.up{color:var(--gold-strong)}.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.skill{display:grid;grid-template-columns:40px 1fr;grid-template-areas:"icon name" "icon cost";align-items:center;gap:0 8px;padding:6px 8px;text-align:left;border-radius:10px;border:1px solid var(--line);background:var(--bg-card);color:var(--text);cursor:pointer}.skill:disabled{cursor:not-allowed;opacity:.45}.skill.affordable:not(:disabled){border-color:var(--energy);box-shadow:0 0 12px #8b6cf059}.skill.ultimate.affordable:not(:disabled){border-color:var(--gold-strong);box-shadow:0 0 14px #ffd36e66}.skill-icon{grid-area:icon;width:40px;height:40px;border-radius:8px;font-size:.6rem}.skill-name{grid-area:name;font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skill-cost{grid-area:cost;font-size:.75rem;color:#c2b0ff}.skill-desc{display:none}.result{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:#060714b8;z-index:20}.result-card{width:min(520px,100%);display:grid;gap:12px;padding:24px;border-radius:18px;background:var(--bg-raised);border:2px solid var(--gold);box-shadow:var(--shadow);text-align:center}.result-headline{margin:0;font-size:2.2rem;color:var(--gold-strong)}.result-loss .result-headline{color:#ff9b8a}.result-reason{margin:0;color:var(--text-dim)}.result-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.result-table th,.result-table td{padding:6px 8px;border-bottom:1px solid var(--line)}.result-table tbody th{text-align:left;color:var(--text-dim);font-weight:500}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.toasts{position:fixed;top:12px;left:50%;transform:translate(-50%);display:grid;gap:8px;z-index:50;width:min(420px,calc(100% - 32px))}.toast{padding:10px 14px;border-radius:10px;background:#1a1c3af5;border:1px solid var(--line);box-shadow:var(--shadow);transition:opacity .3s ease}.toast-error{border-color:#c0392b}.toast.leaving{opacity:0}.blocker{position:fixed;inset:0;display:grid;place-items:center;background:#060714d9}.blocker-card{padding:24px;border-radius:16px;background:var(--bg-raised);text-align:center}.sound-controls{position:fixed;top:10px;right:10px;display:flex;gap:6px;z-index:45}.sound-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#1a1c3ae6;color:var(--gold-strong);font-size:1rem;cursor:pointer}.sound-toggle.off{color:var(--text-dim);opacity:.6;text-decoration:line-through}.connection{position:fixed;right:12px;bottom:12px;padding:6px 12px;border-radius:999px;background:#5b21b6;font-size:.85rem;display:none;z-index:40}.connection.show{display:block}.fx-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:30}.fx{position:absolute;transform:translate(-50%,-50%);pointer-events:none;will-change:transform,opacity}.fx-spark{width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 6px 2px var(--c),0 0 14px var(--c)}.fx-orb{width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--c) 42%,transparent 70%)}.fx-ring{width:var(--s);height:var(--s);border-radius:50%;border:var(--w) solid var(--c);box-shadow:0 0 16px var(--c),inset 0 0 12px var(--c)}.fx-slash{width:var(--l);height:var(--w);border-radius:999px;background:linear-gradient(90deg,transparent,var(--c) 30%,#fff 50%,var(--c) 70%,transparent);box-shadow:0 0 12px var(--c)}.fx-streak{width:var(--l);height:var(--w);border-radius:999px;background:linear-gradient(90deg,transparent,var(--c) 65%,#fff);box-shadow:0 0 10px var(--c)}.fx-shard{width:var(--l);height:var(--w);background:linear-gradient(90deg,rgba(255,255,255,.2),var(--c) 60%,#fff);clip-path:polygon(0 0,100% 50%,0 100%,18% 50%);filter:drop-shadow(0 0 4px var(--c))}.fx-sword{width:24px;height:72px;filter:drop-shadow(0 0 8px rgba(255,255,255,.8))}.fx-net{width:130px;height:130px;filter:drop-shadow(0 0 6px #b07cff)}.fx-wave{width:var(--l);height:var(--s);border-radius:50%;background:radial-gradient(ellipse at 70% 50%,#fff 0 8%,var(--c) 40%,transparent 70%)}.fx-column{width:var(--s);height:var(--h);transform-origin:50% 100%;border-radius:50% 50% 0 0/20% 20% 0 0;background:linear-gradient(to top,transparent,var(--c) 40%,rgba(255,255,255,.75))}.fx-bubble{width:var(--s);height:var(--s);border-radius:50%;border:2px solid rgba(216,241,255,.9);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.8),transparent 45%)}.fx-dome{width:var(--s);height:var(--s);border-radius:50%;border:2px solid rgba(216,241,255,.85);background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.6),transparent 22%),radial-gradient(circle,transparent 50%,var(--c) 100%);box-shadow:0 0 24px var(--c)}.fx-flame{width:var(--s);height:calc(var(--s) * 1.6);transform-origin:50% 100%;border-radius:50%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 80%,#fff6c0 0 15%,#ffb347 35%,#ff5a2a 60%,transparent 72%);mix-blend-mode:screen}.fx-frost{width:var(--w);height:var(--h);border-radius:var(--radius);border:2px solid rgba(220,245,255,.9);background:linear-gradient(135deg,#dcf5ff8c,#78beff40);box-shadow:inset 0 0 24px #fff,0 0 18px #bfeaffcc}.fx-vortex{width:var(--s);height:var(--s);border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--c),transparent 30%,#fff 45%,transparent 55%,var(--c) 75%,transparent);-webkit-mask:radial-gradient(circle,transparent 16%,#000 20%,#000 66%,transparent 70%);mask:radial-gradient(circle,transparent 16%,#000 20%,#000 66%,transparent 70%)}.fx-flash{width:100%;height:100%;transform:none;background:var(--c)}.fx-svg{left:0;top:0;width:100%;height:100%;transform:none;overflow:visible}.dialog-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:#060714b8;z-index:60;animation:dialog-fade .15s ease-out}.dialog-card{width:min(400px,100%);display:grid;gap:12px;padding:24px;border-radius:16px;background:var(--bg-raised);border:1px solid var(--gold);box-shadow:var(--shadow);animation:dialog-pop .18s ease-out}.dialog-title{margin:0;font-size:1.25rem;color:var(--gold-strong)}.dialog-message{margin:0;color:var(--text-dim)}.dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:4px}.btn-danger{background:linear-gradient(180deg,#e2563a,#b23a24);border-color:#ff9b8a;color:#fff8ec}.btn:focus-visible{outline:2px solid var(--gold-strong);outline-offset:2px}@keyframes dialog-fade{0%{opacity:0}}@keyframes dialog-pop{0%{opacity:0;transform:scale(.94)}}@keyframes float-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-28px)}}@keyframes pulse{0%{opacity:1}to{opacity:.55}}@media(min-width:980px)and (min-aspect-ratio:4/3){.match-layout{grid-template-columns:300px 1fr 300px;align-items:center}.side-top{order:3}.center{order:2}.side-bottom{order:1}.skills{grid-template-columns:1fr}.skill{grid-template-areas:"icon name" "icon cost" "icon desc"}.skill-desc{display:block;grid-area:desc;font-size:.72rem;color:var(--text-dim)}}@media(max-width:560px){.screen{padding-top:56px}.seats{grid-template-columns:1fr}.panel-portrait{width:48px;height:48px}.skill{grid-template-columns:1fr;grid-template-areas:"icon" "name" "cost";justify-items:center;text-align:center}.board-wrap,.turn-row{width:100%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}