:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg:#07090f;--bg-elevated:#10141f;--bg-panel:#121724;--border:#ffffff14;--text:#f2f5ff;--text-muted:#8b94ad;--accent:#ff5c1c;--accent-2:#ffb01c;--accent-soft:#ff5c1c2e;--win:#2fd66a;--win-glow:#2fd66a59;--p1:#ff4655;--p2:#38a0ff;--radius:10px;--shadow:0 18px 50px #00000073;--angle:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background:radial-gradient(ellipse 60% 40% at 12% 0%, #ff46551a, transparent), radial-gradient(ellipse 60% 40% at 88% 0%, #38a0ff1a, transparent), radial-gradient(ellipse 80% 50% at 50% 110%, #ff5c1c12, transparent), repeating-linear-gradient(115deg, transparent 0 48px, #ffffff03 48px 96px), var(--bg);min-width:320px;min-height:100vh;color:var(--text);background-attachment:fixed;margin:0}#app{width:100%}.page{width:min(1200px,100%);margin:0 auto;padding:2rem 1.25rem 3rem}.site-header{gap:1.5rem;margin-bottom:2.25rem;display:grid}.eyebrow{color:var(--accent-2);letter-spacing:.22em;text-transform:uppercase;margin:0 0 .4rem;font-size:.8rem;font-style:italic;font-weight:800}.brand h1{letter-spacing:-.02em;text-transform:uppercase;background:linear-gradient(#fff 30%,#99a5c4 100%);color:#0000;filter:drop-shadow(0 4px 18px #ff5c1c40);-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(2.4rem,6vw,3.6rem);font-style:italic;font-weight:900;line-height:.98}.tagline{max-width:42rem;color:var(--text-muted);margin:.75rem 0 0}.actions{flex-wrap:wrap;gap:.75rem;display:flex}.controls{gap:.85rem;display:grid}.mode-toggle{border:1px solid var(--border);clip-path:var(--angle);background:#ffffff08;flex-wrap:wrap;gap:.4rem;padding:.35rem;display:inline-flex}.mode-btn{appearance:none;min-width:7.5rem;color:var(--text-muted);font:inherit;text-align:left;cursor:pointer;clip-path:var(--angle);background:0 0;border:none;gap:.1rem;padding:.55rem 1.1rem;transition:background-color .15s,color .15s;display:grid}.mode-btn:hover{color:var(--text);background:#ffffff0d}.mode-btn.active{color:#fff;background:linear-gradient(120deg, var(--accent), #d92e0f);text-shadow:0 1px 4px #00000059}.mode-btn.active .mode-btn-meta{color:#fff4ebd9}.mode-btn-label{text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;font-style:italic;font-weight:800}.mode-btn-meta{font-size:.75rem}.mode-description{max-width:28rem;color:var(--text-muted);margin:0;font-size:.92rem}.btn{appearance:none;font:inherit;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;clip-path:var(--angle);border:1px solid #0000;padding:.85rem 1.6rem;font-style:italic;font-weight:800;transition:transform .15s,background-color .15s,filter .15s}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(120deg, var(--accent-2), var(--accent) 55%, #d92e0f);color:#fff;text-shadow:0 1px 4px #00000059}.btn-primary:hover{filter:brightness(1.12)}.btn-secondary{border-color:var(--border);color:var(--text);background:#ffffff0d}.btn-secondary:hover{background:#ffffff17}.btn-primary:disabled,.btn-secondary:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}.btn-ghost{appearance:none;border:1px solid var(--border);color:var(--text-muted);font:inherit;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;clip-path:var(--angle);background:0 0;padding:.45rem 1rem;font-size:.8rem;font-weight:700;transition:background-color .15s,color .15s}.btn-ghost:hover{color:var(--text);background:#ffffff0f}.custom-picker{border:1px solid var(--border);border-radius:var(--radius);background:#ffffff05;margin-bottom:1.25rem;padding:1.15rem 1.25rem}.custom-picker-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.custom-picker-header h2{text-transform:uppercase;letter-spacing:.06em;margin:0;font-size:1rem;font-style:italic;font-weight:800}.custom-picker-copy{color:var(--text-muted);margin:.35rem 0 0;font-size:.9rem}.picker-actions{flex-wrap:wrap;gap:.5rem;display:flex}.picker-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:.55rem;display:grid}.picker-slot{background:var(--bg-elevated);color:inherit;cursor:pointer;border:2px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:.3rem;padding:.4rem .3rem .5rem;transition:transform .12s,border-color .12s,box-shadow .12s,background-color .12s;display:flex}.picker-slot:hover{background:#ffffff0a;transform:translateY(-1px)}.picker-slot.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px #ff5c1c40}.picker-slot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.portrait-frame--sm{border-radius:8px;width:52px;height:52px}.portrait-frame--sm img{width:44px;height:44px}.player-panel--empty{text-align:center;place-content:center;min-height:12rem;display:grid}.player-panel--empty h2{margin:0 0 .5rem;font-size:1.25rem}.empty-roster{color:var(--text-muted);margin:0}.game-board{gap:1.25rem;display:grid}.vs-divider{display:none}@media (width>=960px){.site-header{grid-template-columns:1fr auto;align-items:end}.controls{text-align:right;justify-items:end}.mode-description{margin-left:auto}.actions{justify-content:flex-end}.game-board{grid-template-columns:1fr auto 1fr;align-items:start}.vs-divider{align-self:stretch;place-items:center;padding:0 .1rem;display:grid}.vs-divider span{border:1px solid var(--border);background:var(--bg-elevated);width:3rem;height:3rem;color:var(--text-muted);box-shadow:var(--shadow);border-radius:999px;place-items:center;font-size:.95rem;font-style:italic;font-weight:900;display:grid}}.player-panel{background:linear-gradient(180deg, #ffffff08, transparent 40%), var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem 1.25rem 1.25rem;position:relative;overflow:hidden}.player-panel:before{content:"";background:var(--player-color);height:4px;position:absolute;inset:0 0 auto}.player-panel:after{content:var(--player-tag);background:var(--player-color);color:#fff;letter-spacing:.1em;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);padding:.2rem 1.1rem .25rem .75rem;font-size:.72rem;font-style:italic;font-weight:900;position:absolute;top:0;left:0}.player-panel--p1{--player-color:var(--p1);--player-tag:"P1"}.player-panel--p2{--player-color:var(--p2);--player-tag:"P2"}.score-block{margin-bottom:1.25rem}.score-header{justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.75rem;display:flex}.player-name-input{min-width:0;max-width:16ch;color:var(--text);font:inherit;background:0 0;border:1px solid #0000;border-radius:6px;flex:1;margin:0;padding:.1rem .4rem;font-size:1.25rem;font-style:italic;font-weight:800}.player-name-input:hover{border-color:var(--border)}.player-name-input:focus{border-color:var(--player-color,var(--accent));background:#ffffff08;outline:none}.score-text{color:var(--text-muted);font-variant-numeric:tabular-nums;margin:0;font-weight:600}.score-percent{color:var(--text)}.progress-track{clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);background:#ffffff14;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--player-color,var(--win)), color-mix(in srgb, var(--player-color,var(--win)) 60%, white));height:100%;transition:width .25s}.score-status{color:var(--text-muted);margin:.6rem 0 0;font-size:.85rem}.score-status strong{color:var(--text)}.score-status--complete{color:var(--win);text-transform:uppercase;letter-spacing:.04em;font-style:italic;font-weight:700}.roster-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.65rem;display:grid}.character-slot{background:var(--bg-elevated);color:inherit;cursor:pointer;border:2px solid #0000;border-radius:8px;flex-direction:column;align-items:center;gap:.35rem;padding:.45rem .35rem .55rem;transition:transform .12s,border-color .12s,box-shadow .12s,background-color .12s;display:flex;position:relative}.character-slot:hover{background:#ffffff0a;transform:translateY(-2px)}.character-slot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.character-slot.won{border-color:var(--win);box-shadow:0 0 0 1px var(--win-glow), 0 8px 24px #2fd66a26}.character-slot.won img{filter:grayscale(.55)brightness(.8)drop-shadow(0 4px 10px #00000059)}.character-slot.won:after{content:"✓";background:var(--win);color:#04220f;border-radius:999px;place-items:center;width:1.15rem;height:1.15rem;font-size:.7rem;font-weight:800;line-height:1;display:grid;position:absolute;top:.3rem;right:.3rem}.character-slot.up-next{border-color:var(--accent);animation:2.4s ease-in-out infinite up-next-pulse}.character-slot.up-next .slot-number{background:var(--accent)}@keyframes up-next-pulse{0%,to{box-shadow:0 0 0 1px #ff5c1c4d,0 8px 24px #ff5c1c26}50%{box-shadow:0 0 0 5px #ff5c1c24,0 8px 24px #ff5c1c47}}.portrait-frame{background:radial-gradient(circle at 30% 20%,#ffffff1f,#ffffff08);border-radius:10px;place-items:center;width:72px;height:72px;display:grid;box-shadow:inset 0 0 0 1px #ffffff0f}.character-slot img{object-fit:contain;filter:drop-shadow(0 4px 10px #00000059);width:64px;height:64px;display:block}.slot-number{color:#fff;background:#000000a6;border-radius:999px;min-width:1.35rem;padding:.1rem .35rem;font-size:.7rem;font-style:italic;font-weight:700;line-height:1.2;position:absolute;top:.35rem;left:.35rem}.character-name{text-overflow:ellipsis;white-space:nowrap;width:100%;color:var(--text-muted);font-size:.68rem;overflow:hidden}.how-to{border:1px solid var(--border);border-radius:var(--radius);background:#ffffff05;margin-top:2rem;padding:1.25rem 1.35rem}.how-to h3{text-transform:uppercase;letter-spacing:.06em;margin:0 0 .75rem;font-size:.9rem;font-style:italic;font-weight:800}.how-to ol{color:var(--text-muted);margin:0;padding-left:1.2rem}.how-to li+li{margin-top:.45rem}.site-footer{border-top:1px solid var(--border);color:var(--text-muted);text-align:center;margin-top:2rem;padding-top:1.25rem;font-size:.9rem}.site-footer p{margin:0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}