@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#090b0f;--panel:#11141a;--ink:#eeeae2;--muted:#8a9098;--gold:#e7b978;--border:#2b2d31;--red:#c24743}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 Manrope,Arial,sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 5%,#3330243d,transparent 60%);z-index:-1}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{transition:background .2s,border-color .2s,transform .2s}button:hover{filter:brightness(1.16)}button:active{transform:translateY(1px)}[hidden]{display:none!important}main{max-width:1540px;margin:auto;padding:0 4.3vw}.topbar{height:88px;display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--border)}.brand{color:var(--ink);display:flex;gap:12px;align-items:center;text-decoration:none;letter-spacing:2px;font:500 19px Oswald,'Arial Narrow',sans-serif}.brand b{font-weight:400;color:var(--gold)}.brand-mark{font:700 33px Oswald,sans-serif;border:1px solid #e7b97866;width:41px;height:43px;text-align:center;line-height:40px;color:var(--gold);clip-path:polygon(20% 0,100% 0,100% 80%,80% 100%,0 100%,0 20%)}.edition{margin-left:auto;font-size:12px;color:#707780;letter-spacing:2px}.icon-button{border:0;background:none;padding:10px;color:var(--muted);font-size:13px}.lobby-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 0 24px;gap:24px}.eyebrow{display:block;letter-spacing:2.3px;color:var(--gold);font-size:11px;font-weight:700}h1{font:600 clamp(34px,4vw,60px)/1.15 Oswald,'Arial Narrow',sans-serif;margin:8px 0 0;letter-spacing:1px}h1 span{color:var(--gold)}.mode-tabs{display:flex;padding:5px;background:#15171b;border:1px solid var(--border);gap:4px}.mode-tabs button{padding:14px 23px;background:none;border:0;font-size:13px;font-weight:800;letter-spacing:1px;color:var(--muted)}.mode-tabs button.active{background:var(--gold);color:#17150f}.mode-tabs button span{font-size:10px;opacity:.6;margin-left:10px}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.fighter-card{position:relative;height:clamp(280px,29vw,420px);padding:0;text-align:left;overflow:hidden;background:#151923;border:1px solid #33363d;isolation:isolate}.fighter-card:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,var(--accent),transparent 80%);opacity:.25;z-index:-1}.fighter-card.selected{border:2px solid var(--gold);box-shadow:0 0 28px #e7b97815}.fighter-card .portrait{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.6);transition:transform .35s,filter .35s;opacity:.84}.fighter-card:hover .portrait,.fighter-card.selected .portrait{filter:saturate(.95);transform:scale(1.035)}.fighter-card .model{position:absolute;width:145%;max-width:none;height:auto;left:-22.5%;top:10px;filter:drop-shadow(0 8px 14px #0009);transition:transform .3s}.fighter-card:hover .model{transform:scale(1.04)}.fighter-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#080a0ff5 0%,#080a0f90 22%,transparent 60%);pointer-events:none}.card-number{position:absolute;top:17px;left:17px;font:400 16px Oswald,sans-serif;color:#ddd9ceaa;z-index:2}.selected-tag{position:absolute;top:15px;right:0;padding:5px 12px;background:var(--gold);color:#14120f;font-size:10px;font-weight:800;letter-spacing:1.5px;z-index:3}.fighter-card:not(.selected) .selected-tag{display:none}.card-info{position:absolute;bottom:22px;left:20px;right:12px;z-index:2}.card-info small{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:800}.card-info strong{display:block;font:500 clamp(22px,2.15vw,34px)/1.15 Oswald,sans-serif;margin-top:7px;letter-spacing:.1px}.selection-bar{display:flex;align-items:center;gap:40px;padding:21px 0 23px;border-bottom:1px solid var(--border)}.selected-meta{min-width:205px}.selected-meta .eyebrow{font-size:10px;color:var(--muted)}.selected-meta strong{display:block;font-size:20px;margin:3px 0}.selected-meta>span:last-child{font-size:12px;color:var(--muted)}.fighter-stats{display:flex;gap:23px}.fighter-stats span{font-size:10px;color:var(--muted);letter-spacing:1px}.fighter-stats i{display:block;width:78px;height:4px;background:linear-gradient(to right,var(--gold) var(--value),#303238 var(--value));margin-top:9px}.selection-quote{margin-left:auto;color:#9b9489;font-size:13px;font-style:italic}.setup-row{display:flex;align-items:center;gap:26px;padding:23px 0}.arena-label{border-left:2px solid var(--gold);padding-left:15px;min-width:230px}.arena-label .eyebrow{font-size:10px;color:var(--muted)}.arena-label strong{display:block;font:500 19px Oswald,sans-serif;letter-spacing:1px;margin:2px 0}.arena-label>span:last-child{font-size:12px;color:var(--muted)}.bot-options{display:flex;gap:18px;margin-left:auto}.bot-options label{font-size:10px;letter-spacing:1.5px;color:var(--muted)}select{display:block;min-width:138px;max-width:185px;background:#12151a;border:1px solid var(--border);padding:10px;color:var(--ink);margin-top:5px;font-size:13px;letter-spacing:0}.primary{padding:19px 25px;background:var(--gold);color:#18130c;border:1px solid var(--gold);font-weight:800;font-size:14px;letter-spacing:1.2px;min-width:210px}.primary span{margin-left:28px;font-size:19px}.secondary{padding:12px 17px;border:1px solid #514536;background:#22201c;font-weight:700;font-size:14px}.controls{display:flex;gap:28px;justify-content:space-between;padding:20px 0 26px;border-top:1px solid var(--border)}.control-group .eyebrow{font-size:10px;color:#848b95;margin-bottom:11px}.control-group>div{display:flex;align-items:center;gap:7px}.control-group>div>span{color:#9298a1;font-size:12px;margin-right:6px}kbd{display:inline-flex;justify-content:center;align-items:center;width:26px;height:27px;background:#1b1e24;border:1px solid #33363c;border-bottom:3px solid #33363c;font:12px Manrope,sans-serif;color:#ccc9c0;border-radius:3px}.online-panel{border:1px solid var(--border);background:#12151a;padding:24px;margin-bottom:25px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}.online-panel h2{font:500 24px Oswald,sans-serif;margin:0}.online-panel p{font-size:14px;color:var(--muted);max-width:560px;margin:8px 0 0}.room-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.room-actions>span{color:var(--muted);font-size:12px}input{min-width:0;width:145px;background:#090b0f;border:1px solid var(--border);padding:12px;text-transform:uppercase;color:var(--gold)}#room-info{display:flex;align-items:center;gap:15px;width:100%;font-size:12px;color:var(--muted)}#room-code{font:600 26px Oswald,sans-serif;color:var(--gold);letter-spacing:5px}#net-status{width:100%;max-width:none}.battle-toolbar{display:flex;align-items:center;justify-content:space-between;padding:13px 0;color:var(--muted);font-size:12px;letter-spacing:2px}.stage{position:relative;overflow:hidden;background:#10131c;aspect-ratio:16/9;border:1px solid #33363d;touch-action:none}canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:5%;left:4%;right:4%;display:flex;gap:3%;pointer-events:none}.health-side{flex:1;min-width:0}.fighter-name{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;gap:5px}.fighter-name strong{font:500 clamp(12px,1.8vw,25px) Oswald,sans-serif;text-shadow:0 2px 5px #000}.fighter-name span{color:var(--gold);letter-spacing:5px}.health-track{height:15px;background:#40191b;border:1px solid #ac8b5977;padding:2px;transform:skewX(-15deg)}.health-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#b89259,#f1dbad);transition:width .1s linear}.energy-track{height:4px;background:#151e30;margin-top:7px;width:65%;transform:skewX(-15deg)}.energy-track i{display:block;height:100%;width:25%;background:#6cc8e4;transition:width .1s linear}.right .health-track{transform:skewX(15deg)}.right .health-track i,.right .energy-track{margin-left:auto}.right .energy-track i{margin-left:auto;background:#e57374}.right .fighter-name{flex-direction:row-reverse}.timer{text-align:center;min-width:62px;margin-top:-5px}.timer strong{display:block;font:500 clamp(27px,4vw,54px)/1 Oswald,sans-serif;color:var(--gold)}.timer span{font-size:10px;letter-spacing:2px}#announce{position:absolute;top:34%;width:100%;text-align:center;font:600 clamp(25px,5vw,72px)/1.1 Oswald,sans-serif;color:#ffe4b4;text-shadow:0 0 40px #f7944380,0 3px 8px #000;pointer-events:none;letter-spacing:3px}#result,#pause-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#07090edb;backdrop-filter:blur(7px);text-align:center}#pause-overlay{flex-direction:column}.result-box h2,#pause-overlay h2{font:600 clamp(30px,5vw,65px) Oswald,sans-serif;margin:10px 0;color:var(--gold)}.result-box p,#pause-overlay p{color:var(--muted);margin:0 0 24px}.result-box .secondary{display:block;margin:15px auto 0}.match-caption{display:flex;justify-content:space-between;padding:12px 0 20px;font-size:12px;letter-spacing:1px;color:var(--muted)}#touch-controls{display:flex;justify-content:space-between;padding:8px 0 22px;gap:18px;touch-action:none}#touch-controls>div{display:flex;flex-wrap:wrap;gap:7px;max-width:50%}#touch-controls button{width:43px;height:43px;border:1px solid #574b3b;background:#24221e;color:var(--gold);touch-action:none}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:15px 23px;border:1px solid var(--gold);background:#22201e;z-index:20;font-size:14px;max-width:90vw;text-align:center}@media(min-width:1700px){main{padding:0 64px}}@media(max-width:1000px){main{padding:0 3vw}.edition{display:none}.topbar .brand{margin-right:auto}.fighter-stats{gap:15px}.selection-quote{display:none}.controls{gap:12px;flex-wrap:wrap}.control-group>div{gap:4px}.setup-row{gap:15px}.arena-label{min-width:185px}.primary{min-width:170px;padding:17px}.bot-options{gap:8px}select{min-width:110px;max-width:160px}.room-actions{margin:0}.fighter-card{height:340px}.card-info{left:12px}}@media(max-width:680px){.topbar{height:70px;gap:4px}.brand{font-size:15px;letter-spacing:1px;gap:8px}.brand-mark{font-size:26px;width:32px;height:35px;line-height:32px}.icon-button{font-size:12px;padding:9px}.lobby-heading{margin:24px 0 18px;display:block}.lobby-heading .eyebrow{font-size:10px}h1{font-size:38px}.mode-tabs{margin-top:18px;width:100%}.mode-tabs button{flex:1;padding:12px}.roster{gap:10px;grid-template-columns:repeat(2,1fr)}.fighter-card{height:290px}.card-info strong{font-size:25px}.card-info{bottom:16px}.selected-tag{font-size:9px}.selection-bar{gap:12px;padding:16px 0}.selected-meta{min-width:160px}.selected-meta strong{font-size:17px}.selected-meta>span:last-child{font-size:12px}.fighter-stats{gap:9px;flex-wrap:wrap}.fighter-stats span{font-size:9px}.fighter-stats i{width:44px}.setup-row{flex-wrap:wrap;padding:18px 0}.arena-label{flex:1}.bot-options{flex:1}.bot-options label{font-size:10px}select{font-size:12px;max-width:135px}.setup-row>.primary{width:100%}.controls{gap:18px;padding:20px 0}.control-group .eyebrow{margin-bottom:7px}.controls .movement{width:100%}.online-panel{padding:17px}.room-actions{flex-wrap:wrap;gap:8px}.room-actions input{width:130px}.room-actions>span{display:none}#room-info{flex-wrap:wrap;gap:8px}.hud{top:4%;left:3%;right:3%;gap:2%}.health-track{height:10px}.fighter-name strong{font-size:12px}.fighter-name span{font-size:10px;letter-spacing:0}.timer{min-width:32px;margin-top:0}.timer strong{font-size:30px}.timer span{font-size:8px;letter-spacing:0}.energy-track{margin-top:4px}.battle-toolbar{font-size:10px;letter-spacing:.5px}.match-caption{font-size:10px;letter-spacing:0}#combo-hint{max-width:48%;text-align:right}.result-box p{margin-bottom:10px;font-size:12px}.result-box .primary{padding:9px;font-size:12px}.result-box .secondary{padding:7px;margin-top:7px;font-size:12px}.result-box h2{margin:3px 0;font-size:30px}.result-box .eyebrow{font-size:9px}.stage{min-height:245px;aspect-ratio:auto}.stage canvas{position:absolute;inset:0;object-fit:cover}#pause-overlay h2{margin:0}#pause-overlay p{margin:5px;font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#hitboxes[aria-pressed="true"]{color:#5ce7fa;background:#5ce7fa12;border-radius:4px}.battle-toolbar{flex-wrap:wrap;gap:6px}@media(max-width:600px){.battle-toolbar #battle-mode{order:3;width:100%;text-align:center}.battle-toolbar .icon-button{padding:8px 6px;font-size:11px}}
.fighter-card .updated-model{width:100%;height:100%;left:0;top:0;object-fit:cover;object-position:center top}

/* Eight face portraits: four columns on desktop, two on narrow screens. */
.roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fighter-card{height:225px;overflow:hidden}
.fighter-card .portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:1;filter:none;transform:none}
.fighter-card .card-info{left:15px;right:10px;bottom:13px}
.fighter-card .card-info strong{font-size:25px}
.fighter-card .card-info small{font-size:9px}
@media(max-width:680px){.roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fighter-card{height:205px}.fighter-card .card-info strong{font-size:22px}}

.bracket{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:30px 0}.bracket-round{display:flex;flex-direction:column;justify-content:space-around;gap:16px}.bracket-round h2{font:22px Oswald;color:var(--gold);margin:0}.bracket-match{border:1px solid #383b42;background:#11151b;padding:10px}.bracket-match.current{border-color:var(--gold);box-shadow:0 0 22px #e7b97818}.bracket-fighter{display:flex;align-items:center;gap:12px;min-height:48px;color:#9a9fa8}.bracket-fighter img{width:42px;height:42px;object-fit:cover}.bracket-fighter.winner{color:var(--gold);font-weight:800}.bracket-match small{display:block;margin-top:8px;color:#848b95}.tournament-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.tournament-actions p,#tournament-status{color:#aaaeb7}.mode-tabs button{padding-left:18px;padding-right:18px}@media(max-width:680px){.bracket{grid-template-columns:1fr;gap:24px}.tournament-actions{flex-direction:column;align-items:stretch}.bracket-fighter{min-height:44px}.mode-tabs button{padding-left:8px;padding-right:8px}}

.bracket{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}@media(max-width:900px){.bracket{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.bracket{grid-template-columns:1fr}}
/* Keep the complete 16-fighter lobby within the viewport. */
body:has(#lobby:not([hidden])) .topbar{height:50px}
#lobby .lobby-heading{margin:10px 0;min-height:56px}
#lobby h1{font-size:34px;margin-top:3px}
#lobby .roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#lobby .fighter-card{height:clamp(48px,calc((100dvh - 380px)/4),140px)}
#lobby .fighter-card .card-info{left:10px;bottom:7px}
#lobby .fighter-card .card-info strong{font-size:20px;line-height:1.15}
#lobby .fighter-card .card-info small{display:none}
#lobby .card-number{top:8px;left:10px;font-size:11px}
#lobby .selected-tag{top:8px;padding:3px 7px;font-size:9px}
#lobby .selection-bar{padding:8px 0;min-height:54px}
#lobby .selected-meta strong{font-size:17px}
#lobby .selected-meta>span:last-child{display:none}
#lobby .setup-row{padding:10px 0;gap:16px}
#lobby .setup-row .primary{padding:12px 18px}
body:has(#lobby:not([hidden])) .controls{padding:8px 0;gap:10px}
body:has(#lobby:not([hidden])) .control-group .eyebrow{display:none}
#lobby:has(#online-panel:not([hidden])) .fighter-card{height:clamp(42px,calc((100dvh - 490px)/4),105px)}
#lobby .online-panel{padding:12px;margin-bottom:10px;gap:8px}
@media(max-width:680px){
body:has(#lobby:not([hidden])) main{padding:0 12px}
body:has(#lobby:not([hidden])) .topbar{height:44px}
#lobby .lobby-heading{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
#lobby .lobby-heading .eyebrow{display:none}
#lobby h1{font-size:27px}
#lobby .mode-tabs{margin:0;padding:3px}
#lobby .mode-tabs button{padding:7px 4px;font-size:10px}
#lobby .fighter-card{height:clamp(45px,calc((100dvh - 360px)/4),120px)}
#lobby .roster{gap:5px}
#lobby .fighter-card .card-info{left:3px;right:2px;bottom:5px}
#lobby .fighter-card .card-info strong{font-size:clamp(9px,2.6vw,16px);overflow-wrap:anywhere}
#lobby .card-number{display:none}
#lobby .selected-tag{top:3px;font-size:6px;padding:2px 3px}
#lobby .selection-bar{min-height:42px;padding:5px 0}
#lobby .fighter-stats{display:none}
#lobby .setup-row{padding:6px 0;gap:6px}
#lobby .arena-label{display:none}
#lobby .bot-options{margin:0}
#lobby .setup-row .primary{padding:9px;min-width:0}
body:has(#lobby:not([hidden])) .controls{display:none}
#lobby:has(#online-panel:not([hidden])) .fighter-card{height:clamp(35px,calc((100dvh - 430px)/4),100px)}
}



body:has(#lobby:not([hidden])) main{height:100dvh;display:flex;flex-direction:column;padding-bottom:8px}
body:has(#lobby:not([hidden])) .topbar,body:has(#lobby:not([hidden])) .controls{flex-shrink:0}
#lobby:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
#lobby>.lobby-heading,#lobby>.selection-bar,#lobby>.setup-row,#lobby>.online-panel{flex-shrink:0}
#lobby .roster{flex:1;min-height:0;align-content:center;justify-content:center}
#lobby .roster .fighter-card{width:var(--card-size);height:var(--card-size);aspect-ratio:1;border-radius:0}
#lobby .roster .portrait{object-fit:cover;object-position:center}
#lobby .roster .card-info strong{font-size:clamp(10px,1.3vw,17px)}
#lobby .roster .card-info{left:4px;right:2px;bottom:4px}
#lobby .roster .card-number{display:none}
@media(max-width:680px){#lobby .roster .card-info strong{font-size:9px}#lobby .roster .selected-tag{font-size:6px}}

@media(min-width:901px){.bracket{grid-template-columns:repeat(5,minmax(0,1fr))}}