@font-face{font-family:Anton;src:url(assets/fonts/Anton-Regular.ttf);font-display:swap}@font-face{font-family:Rajdhani;src:url(assets/fonts/Rajdhani-Bold.ttf);font-display:swap;font-weight:700}
:root{color-scheme:dark;--bg:#16181d;--panel:#22262b;--accent:#3db4ff;--text:#f3f0df;--muted:#b9b9ac;--line:#424641}*{box-sizing:border-box}html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--text);font:700 18px Rajdhani,system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:var(--text);border:1px solid #62665e;background:#262a2b;padding:12px 22px;min-height:46px;border-radius:4px}button:hover{background:#414836}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:wait}.primary{color:#061827;background:var(--accent);border-color:var(--accent)}.primary:hover{background:#7fd0ff}.quiet{background:transparent}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}::selection{background:var(--accent);color:#16181d}input,select{width:100%;padding:10px;background:#131719;border:1px solid #62665e;border-radius:3px;color:var(--text);min-height:44px}input[type=checkbox]{width:20px;min-height:20px;accent-color:var(--accent)}label{display:grid;gap:6px}h1,h2,p{margin:0}h1{font:clamp(48px,6.2vw,82px)/1.04 Anton,sans-serif;letter-spacing:-.02em}h2{font:30px Anton,sans-serif}p{line-height:1.5}#setup{max-width:1400px;margin:auto;padding:32px 5vw 20px;display:grid;grid-template-columns:.8fr 1.2fr;gap:44px 5vw;min-height:100svh}header{grid-column:1/-1;display:flex;align-items:center;gap:20px}.wordmark{font:27px Anton,sans-serif;color:var(--text);text-decoration:none}.wordmark span{color:var(--accent);margin-left:5px}.build{margin-left:auto;color:var(--muted);font-size:15px}.brief{align-self:center;padding-bottom:40px}.brief p{margin-top:26px;color:var(--muted);font-size:22px}.selection{align-self:center}.roster-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:20px}.roster-heading span,.subtle{color:var(--muted);font-size:15px}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.fighter-card{position:relative;overflow:hidden;padding:0;background:#24282d;border:1px solid #51564e;min-width:0}.fighter-card img{width:100%;height:170px;object-fit:cover;object-position:top;display:block}.fighter-card span{display:block;padding:9px 2px}.fighter-card[aria-pressed=true]{border-color:var(--accent);color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}.options{display:grid;grid-template-columns:1fr 1.2fr .6fr auto;gap:14px;align-items:end;margin:28px 0 20px}.options button{padding-inline:12px}.play-actions{display:flex;gap:10px}.play-actions button{flex:1;font-size:20px}.subtle{margin-top:12px}#loadStatus{font-size:15px;margin-top:8px;color:var(--accent)}footer{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;align-self:end;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:14px}.panel{position:fixed;z-index:20;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);padding:28px;width:min(560px,94vw);max-height:92svh;overflow:auto;box-shadow:0 18px 60px #000b;border-radius:12px;display:grid;gap:18px}.panel h2{font-size:36px}.panel button{margin:2px}.panel label:has(input[type=checkbox]){display:flex;align-items:center}#lobbyConnect{display:grid;gap:14px}#inviteCode{font:46px Anton,sans-serif;letter-spacing:.08em;color:var(--accent)}/* ---- Menus: lobby, ranking ---- */
.icon-text{display:inline-flex;align-items:center;gap:8px}.icon-text svg,.tab svg{width:20px;height:20px}header .icon-text{margin-left:auto}header .icon-text+button{margin-left:0}
#inviteNote{background:#3db4ff18;border-left:3px solid var(--accent);padding:10px 12px;color:var(--text)}
.invite{display:flex;justify-content:space-between;align-items:end;gap:14px;flex-wrap:wrap}.invite-actions{display:flex;gap:8px;flex-wrap:wrap}.invite-actions button{min-height:42px;padding:8px 14px}#shareRoom{background:#1f6d3d;border-color:#2f9a58}
#players{list-style:none;padding:0;margin:0;display:grid;gap:6px}#players li{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:10px;background:#1a1e22;border:1px solid #3a3f3a;border-radius:6px;padding:5px 10px 5px 5px;min-height:50px}#players li img{width:40px;height:40px;object-fit:cover;object-position:top;border-radius:4px;background:#2b3035}#players li.me{border-color:var(--accent)}#players li.bot,#players li.empty{grid-template-columns:1fr auto;padding-left:14px;color:var(--muted)}#players li.empty{border-style:dashed;background:transparent}#players .state{font-size:14px;color:var(--muted)}#players .state.ok{color:var(--accent)}#players .state.off{color:#ff9c8d}#players .wins{font-size:14px;color:#ffc96b}
.host-config{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}.host-config select:disabled{opacity:.6}
.ranking-body{display:grid;gap:10px}.ranking-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}.ranking-list li{display:grid;grid-template-columns:34px 1fr auto auto;gap:10px;align-items:center;padding:7px 10px;background:#1a1e22;border-radius:6px}.ranking-list .pos{font:20px Anton,sans-serif;color:var(--muted);text-align:center}.ranking-list .top1 .pos{color:#ffd35c}.ranking-list .top2 .pos{color:#d8dde3}.ranking-list .top3 .pos{color:#d79b62}.ranking-list .stat{font-size:14px;color:var(--muted)}.ranking-list strong{color:var(--accent)}.ranking-list li.me{outline:2px solid var(--accent)}.records{font-size:15px;color:#ffc96b}

/* ---- Arena ---- */
#arena{position:fixed;inset:0;background:#101419;touch-action:none;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Phone kept in portrait (rotation lock): rotate the whole arena so it is played sideways. */
body[data-rot="90"] #arena,body[data-rot="-90"] #arena{inset:auto;top:0;left:0;width:var(--vh,100vh);height:var(--vw,100vw);transform-origin:top left}
body[data-rot="90"] #arena{transform:translateX(var(--vw,100vw)) rotate(90deg)}body[data-rot="-90"] #arena{transform:translateY(var(--vh,100vh)) rotate(-90deg)}
#arena .panel{width:min(560px,94%);max-height:92%}
canvas{width:100%;height:100%;object-fit:contain;display:block;image-rendering:pixelated}
#hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;gap:12px;align-items:start;pointer-events:none}
.hud-icon{pointer-events:auto;width:46px;height:46px;min-height:0;padding:0;display:grid;place-items:center;border-radius:50%;background:#16181dd0}.hud-icon svg{width:22px;height:22px}#flip{display:none}body:not([data-rot="0"]) #flip{display:grid}
.match-info{display:grid;text-align:center;gap:0;margin-left:auto;margin-right:auto;transform:translateX(23px)}#timer{font:30px Anton,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #000a}#modeLabel{font-size:13px;color:#c7cbbe}
#healthHud{min-width:180px;background:#16181dd8;padding:7px 11px;border-radius:6px}#healthHud strong{display:block;font-size:16px}#healthHud span{font-size:13px;color:var(--muted)}meter{width:180px;height:16px;display:block;accent-color:var(--accent)}
#weaponHud{position:absolute;bottom:18px;left:20px;background:#16181dd8;padding:7px 14px;font-size:17px;border-radius:6px}
#fps{position:absolute;top:62px;left:max(14px,env(safe-area-inset-left));background:#16181dd8;padding:2px 8px;font-size:13px;border-radius:4px;color:var(--accent);pointer-events:none}#connection{position:absolute;top:80px;left:50%;transform:translateX(-50%);background:#16181de8;padding:3px 12px;font-size:14px}#connection:empty{display:none}
[hidden]{display:none!important}body.playing{overflow:hidden}

/* ---- Touch controls: drawings only ---- */
#touch{display:none}
.touch-mode #touch{display:block;position:absolute;inset:0;pointer-events:none}
.touch-mode #weaponHud{left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));font-size:14px;padding:5px 12px;white-space:nowrap}
#stickZone{position:absolute;left:0;bottom:0;width:42%;height:74%;pointer-events:auto;touch-action:none}
#stick{--size:calc(126px * var(--pad,1));position:absolute;left:max(26px,env(safe-area-inset-left));bottom:26px;width:var(--size);height:var(--size);border-radius:50%;border:2px solid #e9f0d05c;background:radial-gradient(circle,#ffffff12 0 40%,#0d1214a0 72%);opacity:.7;transition:opacity .15s}
#stick.active{opacity:1;border-color:#3db4ff99}
#stick .arrows{position:absolute;inset:7%;width:86%;height:86%;color:#f3f0dfb0}
#stick i{position:absolute;left:50%;top:50%;width:42%;height:42%;transform:none;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c9ecff,#1f8fe0);box-shadow:0 3px 0 #0007,0 0 0 5px #3db4ff26}
/* Sizes scale with --pad through calc, never with transform: scaled/animated layers over the canvas corrupted the GPU tiles on some Android phones (22-10 glitch). */
.touch-actions{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));width:calc(256px * var(--pad,1));height:calc(250px * var(--pad,1))}
.touch-actions button{position:absolute;right:calc(var(--x) * var(--pad,1));bottom:calc(var(--y) * var(--pad,1));width:calc(var(--d) * var(--pad,1));height:calc(var(--d) * var(--pad,1));min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;pointer-events:auto;touch-action:none;background:#1a2125;border:2px solid #4b524b;color:#f3f0df;box-shadow:0 4px 0 #000}
.touch-actions button svg{width:54%;height:54%;grid-area:1/1;pointer-events:none}
.touch-actions button.down{box-shadow:0 0 0 4px #3db4ff66;background:#3c4a2c;border-color:#3db4ff}.touch-actions button:active{transform:none}
.touch-actions b{z-index:1;position:absolute;right:-4px;top:-4px;min-width:24px;height:24px;padding:0 5px;border-radius:12px;background:#111;border:2px solid currentColor;font:15px/20px Rajdhani,sans-serif;text-align:center;pointer-events:none}.touch-actions b:empty{display:none}
.b-fire{--x:2px;--y:2px;--d:90px;background:radial-gradient(circle at 40% 30%,#c9ecff,#2aa5f5)!important;color:#061827!important;border-color:#f4ffc0!important}
.b-fire::before,.b-fire::after{content:'';position:absolute;left:50%;width:0;height:0;border:6px solid transparent;translate:-50% 0;opacity:.55}.b-fire::before{top:5px;border-bottom-color:#061827;border-top:0}.b-fire::after{bottom:5px;border-top-color:#061827;border-bottom:0}
.b-fire .fist{display:none}.b-fire.no-weapon .gun{display:none}.b-fire.no-weapon .fist{display:block}.b-fire.no-weapon::before,.b-fire.no-weapon::after{display:none}
.b-fire b{color:#061827;background:#f4ffc0}
.b-jump{--x:104px;--y:0px;--d:70px;border-color:#3db4ff!important;color:#3db4ff!important}
.b-punch{--x:92px;--y:82px;--d:64px}

.b-block{--x:186px;--y:8px;--d:54px;color:#91d9eb!important}
.b-roll{--x:172px;--y:76px;--d:52px}
.b-grenade{--x:26px;--y:178px;--d:50px;color:#ffb27a!important}.b-grenade.empty{opacity:.4}.touch-actions button.off{opacity:.35}
.b-pickup{--x:98px;--y:160px;--d:50px}.b-pickup.near{background:#3db4ff!important;color:#061827!important;box-shadow:0 0 0 4px #3db4ff55,0 4px 0 #000}
.b-reload{--x:168px;--y:140px;--d:50px}.b-reload.urgent{border-color:#ff9c8d!important;color:#ff9c8d!important;box-shadow:0 0 0 4px #ff9c8d55,0 4px 0 #000}.b-reload.busy{color:#ffc96b!important;border-color:#ffc96b!important}
.left-handed .touch-actions{right:auto;left:max(12px,env(safe-area-inset-left))}.left-handed .touch-actions button{right:auto;left:calc(var(--x) * var(--pad,1))}.left-handed .touch-actions b{right:auto;left:-4px}
.left-handed #stickZone{left:auto;right:0}.left-handed #stick{left:auto;right:max(26px,env(safe-area-inset-right))}

/* ---- Victory / defeat ---- */
#results{position:absolute;inset:0;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:3%;padding:max(16px,4%) max(20px,5%);overflow:hidden;background:radial-gradient(circle at 28% 52%,#2f3a0cf2,#0b0e10f5 68%)}
.result-stage{position:relative;display:grid;place-items:center;height:100%;min-height:0}
.burst{position:absolute;width:150%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#3db4ff30 0 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(#000 25%,transparent 68%);mask:radial-gradient(#000 25%,transparent 68%)}
#resultPortrait{position:relative;z-index:2;max-height:min(80%,340px);max-width:90%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 16px 26px #000b)}
#particles{position:absolute;inset:-10% -40%;pointer-events:none;z-index:3}#particles i{position:absolute;top:-6%;width:9px;height:15px;border-radius:2px;animation:confetti linear both}
.result-copy{display:grid;gap:10px;align-content:safe center;min-height:0;max-height:100%;overflow:auto;position:relative;z-index:4}
#resultKicker{text-transform:uppercase;letter-spacing:.14em;font-size:15px;color:var(--muted)}#results h2{font:clamp(44px,8vw,96px)/.95 Anton,sans-serif;letter-spacing:-.01em}#resultDetail{color:#d7dccb}
.result-tabs{display:flex;gap:6px;margin-top:6px}.tab{min-height:38px;padding:6px 14px;font-size:16px;display:inline-flex;align-items:center;gap:6px;background:transparent}.tab[aria-pressed=true]{background:#2c3324;border-color:var(--accent);color:var(--accent)}
#scoreboard{list-style:none;margin:0;padding:0;display:grid;gap:4px}#scoreboard li{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;background:#1a1e22c0;border-radius:6px}#scoreboard li.me{outline:2px solid var(--accent)}#scoreboard li.won .who::after{content:' ★';color:#ffd35c}#scoreboard .stat{color:var(--muted);font-size:15px}
.result-actions{display:flex;gap:8px;flex-wrap:wrap}.result-actions button{flex:1}
#results.win .burst{animation:fade .5s both,spin 14s linear infinite}
#results.win #resultPortrait{animation:pop .75s cubic-bezier(.2,1.6,.4,1) both,bob 2.4s ease-in-out .75s infinite}
#results.win h2{color:var(--accent);text-shadow:0 0 30px #3db4ff66;animation:slam .55s cubic-bezier(.2,1.5,.4,1) .2s both}
#results.lose{background:radial-gradient(circle at 28% 52%,#3d1212f2,#0b0b0cf7 68%);animation:shake .45s .15s both}
#results.lose .burst{background:radial-gradient(circle,#ff3b2a22,transparent 60%);animation:throb 1.6s ease-in-out infinite}
#results.lose #resultPortrait{animation:defeat 1.1s cubic-bezier(.5,0,.6,1) both}
#results.lose h2{color:#ff6b5b;animation:drop .7s cubic-bezier(.3,1.4,.5,1) .25s both}
#results.lose #particles i{width:6px;height:6px;border-radius:50%;opacity:.7;animation-name:ash}
#results.draw .burst{background:repeating-conic-gradient(#ffffff14 0 9deg,transparent 9deg 18deg)}#results.draw h2{animation:slam .55s ease .2s both}
@keyframes spin{to{rotate:360deg}}@keyframes fade{from{opacity:0}}
@keyframes pop{0%{transform:scale(.2) translateY(40%);opacity:0}100%{transform:none;opacity:1}}
@keyframes bob{50%{transform:translateY(-4%)}}
@keyframes slam{0%{transform:scale(2.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes shake{0%,100%{translate:0}20%{translate:-14px 4px}40%{translate:12px -5px}60%{translate:-8px 3px}80%{translate:5px -2px}}
@keyframes defeat{0%{transform:none;filter:none}35%{transform:translateX(-6%) rotate(5deg)}100%{transform:translateY(10%) rotate(-14deg);filter:grayscale(1) brightness(.55) drop-shadow(0 16px 26px #000b)}}
@keyframes drop{0%{transform:translateY(-120%);opacity:0}100%{transform:none;opacity:1}}
@keyframes throb{50%{transform:scale(1.12);opacity:.6}}
@keyframes confetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(115vh) rotate(var(--r));opacity:.9}}
@keyframes ash{0%{transform:translate(0,0);opacity:0}15%{opacity:.7}100%{transform:translate(30px,110vh);opacity:0}}
@keyframes pulse{50%{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){#results *,#results{animation-duration:.01s!important;animation-iteration-count:1!important}}
@media(max-width:950px){#setup{gap:24px;padding:20px 4vw;grid-template-columns:1fr}.brief{padding:0;display:flex;align-items:center;gap:35px}.brief h1{font-size:46px}.brief p{font-size:18px;margin:0}.fighter-card img{height:150px;object-fit:contain}.selection{width:100%}footer{font-size:12px}.options{margin:20px 0;grid-template-columns:1fr 1fr}.build{display:none}}
@media(max-width:540px){.brief h1{font-size:40px}.brief p{font-size:16px}.roster-heading span{display:none}.fighter-card img{height:110px}.fighter-card span{font-size:15px}.options button{grid-column:1/-1}.play-actions{flex-direction:column}footer span:last-child{display:none}.host-config{grid-template-columns:1fr}.invite{align-items:start}header .icon-text{padding-inline:10px}}
@media(max-height:480px) and (orientation:landscape){#setup{grid-template-columns:.6fr 1.4fr;gap:15px}.brief{display:block}.brief h1{font-size:36px}.brief p{font-size:15px;margin-top:15px}.fighter-card img{height:90px}.roster-heading{margin-bottom:10px}.roster-heading h2{font-size:22px}.options{margin:12px 0;grid-template-columns:1fr 1.2fr .6fr auto}.play-actions button{min-height:40px;padding:7px}.selection .subtle,footer{display:none}.panel{padding:18px;gap:12px}.panel h2{font-size:28px}}
/* Short arenas (phones sideways): compact HUD. Uses arena height via --pad, so it also works when CSS-rotated. */
.touch-mode #healthHud{min-width:0;padding:5px 9px}.touch-mode #healthHud strong{font-size:14px}.touch-mode #healthHud span{display:none}.touch-mode meter{width:130px;height:12px}.touch-mode #timer{font-size:24px}.touch-mode .hud-icon{width:42px;height:42px}
.touch-mode #results{gap:2%;padding:10px max(16px,4%)}.touch-mode #results h2{font-size:52px}.touch-mode .result-copy{gap:6px}.touch-mode #resultKicker{font-size:13px}.touch-mode #resultDetail{font-size:15px;line-height:1.3}.touch-mode .result-tabs{margin-top:0}.touch-mode .tab{min-height:32px;padding:3px 12px;font-size:14px}.touch-mode #scoreboard li{padding:3px 10px;font-size:15px}.touch-mode .result-actions button{min-height:40px;padding:6px 12px}.touch-mode #resultPortrait{max-height:72%}
/* ---- V3: game mode, skins, powers ---- */
.mode-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;margin-top:16px}.mode-card{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 14px;background:#1b1f23;border:1px solid #51564e;border-radius:8px}.mode-card svg{width:34px;height:34px;flex:none;color:var(--muted)}.mode-card strong{display:block;font:22px Anton,sans-serif;letter-spacing:.01em}.mode-card small{display:block;color:var(--muted);font-size:14px;line-height:1.25}
.mode-card[aria-checked=true]{border-color:var(--accent);background:#13263a}.mode-card[aria-checked=true] svg,.mode-card[aria-checked=true] strong{color:var(--accent)}
.skin-row{display:flex;align-items:center;gap:12px;margin-top:12px}.skin-row .subtle{margin:0}.skins{display:flex;gap:8px;flex-wrap:wrap}.skins button{min-height:36px;padding:5px 14px;border-radius:18px;font-size:16px;background:#1b1f23}.skins button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#13263a}
.bot-level{display:flex;gap:6px}.bot-level button{min-height:36px;padding:5px 14px;border-radius:18px;font-size:16px;background:#1b1f23}.bot-level button[aria-checked=true]{border-color:var(--accent);color:var(--accent);background:#13263a}
.power-list{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.power-list li{display:grid;grid-template-columns:30px 1fr;gap:4px 8px;align-items:start;background:#1b1f23;border:1px solid #3a3f3a;border-radius:8px;padding:8px}.power-list svg{width:28px;height:28px;color:#ffc96b;grid-row:span 2}.power-list strong{font-size:16px;line-height:1.1}.power-list small{color:var(--muted);font-size:13px;line-height:1.2}
.b-grab{--x:236px;--y:120px;--d:52px;color:#ffc96b!important}.b-grab.holding{background:#ffc96b!important;color:#061827!important}
.b-skill{--d:58px;color:#ffc96b!important;border-color:#8a6a2b!important;overflow:hidden}.b-s1{--x:26px;--y:174px}.b-s2{--x:100px;--y:158px}.b-s3{--x:172px;--y:138px;--d:62px;border-color:#ffc96b!important}
.b-skill .cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#000b calc(var(--cd,0) * 1turn),transparent 0);pointer-events:none}.b-skill.ready{box-shadow:0 0 0 3px #ffc96b55,0 4px 0 #000}
body:not(.mode-poderes) .b-skill{display:none}body.mode-poderes .b-grenade,body.mode-poderes .b-pickup,body.mode-poderes .b-reload{display:none}
@media(max-width:540px){.mode-card small{display:none}.power-list{grid-template-columns:1fr}}
@media(max-height:480px) and (orientation:landscape){.mode-pick{margin-top:8px}.mode-card{padding:6px 10px}.mode-card small{display:none}.skin-row{margin-top:6px}.power-list{display:none}}

.b-grenade.molotov{color:#ff8a3d!important}.b-grenade.molotov b{background:#ff8a3d;color:#1a0d05}
.play-actions .pvp{color:#fff;background:#b3121f;border-color:#ff4d5e;letter-spacing:.06em}.play-actions .pvp:hover:not(:disabled){background:#d0213a}
.power-list .passive{grid-column:1/-1;opacity:.85}

/* Bot picker: one chip per bot (portrait + name). Tapping opens the native list to pick who it is; × removes it. */
.bot-row{display:flex;align-items:center;gap:12px;margin-top:12px}.bot-row>.subtle{margin:0;white-space:nowrap}.bot-picker{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bot-chip{position:relative;display:flex;align-items:center;gap:6px;min-height:40px;padding:3px 30px 3px 3px;border:1px solid #51564e;border-radius:22px;background:#1b1f23;font-size:15px}
.bot-chip img,.bot-chip .dice{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:top;background:#2b3035;display:grid;place-items:center;font-size:18px;color:var(--accent)}
.bot-chip select{position:absolute;inset:0;opacity:0;cursor:pointer;min-height:0;width:100%}
.bot-chip .x{position:absolute;right:3px;top:50%;translate:0 -50%;width:24px;height:24px;min-height:0;padding:0;border-radius:50%;border:0;background:#3a2023;color:#ff9c8d;font-size:15px;line-height:1;z-index:1}
.bot-chip.readonly{padding-right:12px}.bot-add{min-height:40px;padding:4px 14px;border-radius:22px;border-style:dashed;background:transparent;font-size:15px}
.bot-none{color:var(--muted);font-size:15px}
@media(max-height:480px) and (orientation:landscape){.bot-row{margin-top:6px}.bot-chip{min-height:34px}.bot-chip img,.bot-chip .dice{width:26px;height:26px}.bot-add{min-height:34px}}
/* Passive line has no icon: label + text side by side instead of squeezed into the icon column. */
.power-list .passive{grid-template-columns:auto 1fr}
/* Narrow phones (Fold closed, 344 px): two columns for the options so the map name never pushes past the screen. */
@media(max-width:480px){.options{grid-template-columns:1fr 1fr}.options>*{min-width:0}.options select{text-overflow:ellipsis}.roster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){#setup{grid-template-columns:minmax(0,1fr)}#setup>*{min-width:0}header{flex-wrap:wrap;gap:10px}.build{display:none}}

/* V8 menu: pixel night backdrop, big logo with a star, chosen fighter on a blue splash, pill buttons. */
#menuBg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;image-rendering:pixelated;image-rendering:crisp-edges}
body.playing #menuBg{display:none}
body:not(.playing){background:#070b1f}
.hero{position:relative;height:min(46vh,420px);display:grid;place-items:end center;margin-bottom:-10px}
.hero-splash{position:absolute;inset:6% 4% 0;background:radial-gradient(ellipse at 50% 60%,#3db4ffcc,#1f6fe099 45%,#3db4ff00 72%);clip-path:polygon(8% 30%,22% 8%,40% 18%,55% 2%,72% 14%,92% 10%,86% 34%,100% 52%,88% 70%,96% 92%,70% 86%,52% 100%,34% 88%,12% 96%,16% 72%,0 56%)}
#heroArt{position:relative;height:100%;max-width:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 10px 0 #0005) drop-shadow(0 0 22px #3db4ff66)}
.hero-logo{display:flex;align-items:center;gap:.12em;font:clamp(52px,7vw,104px)/.9 Anton,sans-serif;letter-spacing:.02em;margin:18px 0 6px;color:#eef6ff;text-shadow:0 5px 0 #0b2f66,0 0 28px #3db4ff55}
.hero-logo span:last-child{color:var(--accent)}
.spark{width:.62em;height:.62em;flex:none;background:linear-gradient(135deg,#fff7d6,#ffd36b);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 8px #ffd36b);animation:spark 2.4s ease-in-out infinite}
@keyframes spark{50%{transform:rotate(45deg) scale(.82)}}
.brief h1{font-size:clamp(30px,3.4vw,52px);color:#cfe3ff}
.selection{background:#0b1230d9;border:1px solid #24509f;border-radius:14px;padding:18px 20px}
.fighter-card,.mode-card,.power-list li{background:#111a3acc}
.play-actions button{border-radius:999px;box-shadow:0 5px 0 #06173a;transition:transform .08s}.play-actions button:active{transform:translateY(3px);box-shadow:0 2px 0 #06173a}
.play-actions .primary{background:linear-gradient(#5ec6ff,#2a9df0);box-shadow:0 5px 0 #0b4f8f}
footer{border-top-color:#24509f}
@media(max-width:950px){.hero{display:none}.hero-logo{font-size:56px;margin:0}}
@media(max-height:480px) and (orientation:landscape){.hero{display:none}.hero-logo{font-size:40px;margin:0 0 6px}.selection{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.spark{animation:none}}

/* V8: skins with their own power effects */
.skins button.fx{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
.skin-fx{margin:.25rem 0 0;min-height:1.1em;font-size:.78rem;color:color-mix(in srgb,var(--accent) 60%,#9fb3c8)}
.skin-fx.on{color:var(--accent);text-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent)}

/* V8.1: «Stats» page (bot tournament) */
.stats-panel{width:min(720px,94vw)}.stats-note{font-size:14px}
.stats-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.stats-list li{display:grid;grid-template-columns:30px 54px 1fr;gap:10px;align-items:center;padding:8px 10px;background:#13263a;border-radius:8px}
.stats-list .pos{font:22px Anton,sans-serif;color:var(--muted);text-align:center}.stats-list .top1 .pos{color:var(--accent)}
.stats-list img{width:54px;height:54px;object-fit:cover;object-position:top;border-radius:6px;background:#0b1622}
.stats-main{display:grid;gap:2px;min-width:0}.stats-main strong{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.stats-main em{font-style:normal;font-size:12px;padding:1px 8px;border-radius:99px;background:var(--accent);color:#061827}
.stats-list li:last-child em{background:#5a6b7d;color:#f3f0df}
.stats-main small{font-size:13px;line-height:1.3;color:#c9d6e3;overflow-wrap:anywhere}
.stats-bar{height:6px;background:#0b1622;border-radius:3px;overflow:hidden}.stats-bar i{display:block;height:100%;background:var(--accent)}