@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;600;700&display=swap');
:root{color-scheme:dark;--bg:#171320;--line:#c3aee62a;--muted:#b4a6c1;--gold:#ffca79;--orange:#ff9455}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#50325866,transparent 60%),var(--bg);color:#fff3e7;font:14px 'DM Sans',sans-serif}main{max-width:1180px;margin:auto;padding:0 30px}button,input,select{font:inherit}a{color:var(--gold)}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)}header>a{text-decoration:none;font-size:12px}header b{font:900 29px 'Barlow Condensed',Impact,sans-serif;letter-spacing:3px}header b span{display:block;font:8px 'DM Sans';letter-spacing:2px;color:#c0a5c8;margin-top:4px}#connection{font-size:11px;color:#c5afce}#connection.connected{color:#b4edc3}.intro{padding:55px 0 30px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold);font-weight:700}h1{font:900 clamp(45px,6vw,73px)/.98 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.5px;margin:15px 0 20px}h1 em{color:var(--orange);font-style:normal}.intro p,.panel p,.help p,#host-help p{color:var(--muted);line-height:1.8;font-size:12px}.lobby-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}.panel{border:1px solid var(--line);border-radius:9px;background:linear-gradient(140deg,#332439d9,#211c2a);padding:28px}h2{font:800 31px 'Barlow Condensed',Impact,sans-serif;margin:10px 0 22px}label{display:block;color:#cdbed7;font-size:11px;margin:16px 0}input,select{display:block;width:100%;padding:13px 14px;border:1px solid #9a7eae55;border-radius:5px;background:#17131f;color:#fff3e8;margin-top:8px}input::placeholder{color:#8c7a97}.beasts{display:flex;gap:9px;margin:22px 0}.beast{flex:1;min-width:0;border:1px solid var(--line);border-radius:5px;background:#18141e;padding:12px 4px}.beast[aria-pressed=true]{border-color:var(--gold);background:#68452b44}.beast canvas{width:85px;height:75px;max-width:100%;object-fit:contain;image-rendering:pixelated}.beast strong{display:block;font:700 20px 'Barlow Condensed',sans-serif}.beast small{font-size:8px;color:var(--muted)}.primary,.secondary{display:inline-block;border-radius:5px;padding:14px 20px;text-align:center;text-decoration:none;font-size:12px;font-weight:700}.primary{border:1px solid #ffd29a77;background:linear-gradient(100deg,#ffc276,#f58a51);color:#321c1c;box-shadow:0 3px #8a4c39}.secondary{background:#281e34;border:1px solid #b79dc452;color:#f3d9bb}.text-button{background:none;border:0;text-decoration:underline;color:var(--muted);padding:14px;font-size:11px}.panel .primary,.panel .secondary{width:100%}.or{color:#9884a6;font-size:9px;letter-spacing:2px;text-align:center;margin:25px 0}#room-code{text-transform:uppercase;letter-spacing:4px;font-size:20px}#code{display:block;font:700 40px monospace;letter-spacing:5px;margin:18px 0}#players{list-style:none;padding:0;margin:24px 0}#players li{padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}#players em{float:right;color:#b5e6b3;font-style:normal}#message{min-height:24px;color:var(--gold)}.help{border:1px solid var(--line);border-radius:6px;margin:25px 0;padding:20px;color:#d6b7d5;font-size:12px}.help summary{cursor:pointer}#host-help{background:#39283b;border:1px solid #f6bd7870;padding:25px;margin-bottom:25px;border-radius:7px}#host-help ol{font-size:12px;line-height:2;color:#e6d5dd}code{background:#17131f;padding:4px;border-radius:3px;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;color:#8f7c98;border-top:1px solid var(--line);padding:25px 0;font-size:9px;letter-spacing:1px;margin-top:35px}#battle{margin-top:25px}#online-hud{display:grid;grid-template-columns:1fr 95px 1fr;gap:18px;padding:15px;border:1px solid #bfa7cf55;background:#2d2338;border-radius:6px 6px 0 0}#online-hud h3{margin:0;font:800 27px 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}#online-hud p{font-size:10px;color:var(--muted);margin:5px 0}#fighter-1{text-align:right}.bar{height:12px;background:#15141d;border:1px solid #d0b7d544;margin:5px 0;overflow:hidden;position:relative}.bar i{display:block;height:100%;background:linear-gradient(90deg,#64ad62,#9bdd7c);transition:width .08s linear}.bar.shield{height:7px}.bar.shield i{background:#7eb7e3}.center-hud{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.center-hud span{font-size:8px;color:#c3a7d1}.center-hud strong{font:700 23px monospace}.arena-wrap{position:relative;overflow:hidden;border:1px solid #bfa7cf55}#online-canvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#3a3345}#online-abilities{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.ability{position:relative;min-height:98px;background:linear-gradient(140deg,#3e3047,#272030);border:1px solid #bfa7cf44;border-radius:5px;text-align:left;padding:12px}.ability strong{display:block;font:700 22px 'Barlow Condensed',sans-serif;line-height:1}.ability span{display:block;font-size:8px;color:#d4b6e2;margin-bottom:7px}.ability small{font-size:10px;color:#f2d2a0;display:block;margin-top:9px}#combat-status{min-height:20px;color:#ffd18c;font-size:12px}#result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#15101ee8;backdrop-filter:blur(5px);z-index:2}#result h2{font-size:64px;color:var(--gold);margin:0}#result p{color:#cbb5d7}#result button{margin:8px;min-width:200px}.controls{font-size:10px;color:#a58eaf;line-height:1.8}.testing{font-size:9px;color:#9a859f}@media(max-width:700px){main{padding:0 14px}header{padding:18px 0}header b{font-size:21px}#connection{max-width:110px;text-align:right}.intro{padding-top:30px}.lobby-grid{grid-template-columns:1fr}.panel{padding:20px}#online-hud{gap:8px;grid-template-columns:1fr 65px 1fr;padding:8px}#online-hud h3{font-size:20px}#online-abilities{gap:4px}.ability{padding:8px;min-height:90px}.ability strong{font-size:17px}.ability small{font-size:8px}.controls{font-size:9px}footer{font-size:7px}#host-help{padding:18px}}

.online-players{list-style:none;padding:0;margin:18px 0}.online-players li{margin:10px 0}.online-player{width:100%;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px;border:1px solid var(--line);border-radius:6px;background:#211a2c;text-align:left}.online-player:hover{border-color:var(--gold)}.online-player strong{font-size:16px}.online-player span{font-size:11px;color:var(--gold)}#challenge{padding:18px;margin:18px 0;border:1px solid var(--gold);border-radius:6px}#challenge .secondary{margin-top:12px}

#draft-teams{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.draft-team-summary{padding:12px;border:1px solid var(--line);border-radius:6px}.draft-team-summary strong{color:var(--gold)}.draft-team-summary p{margin:8px 0}#draft-pick{margin-bottom:16px}

.team-rosters{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.team-switcher{display:flex;gap:8px;margin-top:8px}.team-member{flex:1;min-width:0;padding:12px 8px;border:1px solid var(--line);border-radius:5px;background:#211a2c;text-align:left}.team-member strong,.team-member span,.team-member small{display:block}.team-member span{font-size:9px;color:var(--muted);margin:5px 0}.team-member small{font-size:10px}.team-member.active{border-color:var(--gold);background:#67452b44}.team-member.knocked-out{opacity:.4}.team-member:disabled{opacity:.7}.team-member.knocked-out:disabled{opacity:.4}@media(max-width:700px){.team-rosters{grid-template-columns:1fr}.team-member{padding:9px 6px}}