:root{font-family:Arial,Helvetica,sans-serif;color:#f0eee7;background:#182731;font-synthesis:none;--orange:#ffa557;--cyan:#8edee8;--muted:#a7b4b9;--panel:#11222de8}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button:disabled{cursor:default;opacity:.45}button{transition:background .15s,transform .15s,border-color .15s}button:hover:not(:disabled){filter:brightness(1.13)}[hidden]{display:none!important}#scene,.vignette{position:fixed;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(90deg,rgba(9,20,28,.92),rgba(12,24,31,.36) 45%,rgba(10,22,30,.57)),linear-gradient(0deg,#0b1822aa,transparent 50%)}body.playing .vignette{background:linear-gradient(0deg,#081723ad,transparent 23%,transparent 75%,#081723bd)}#topbar{position:relative;z-index:3;height:104px;padding:28px 4.5vw;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:#f7efe0;font-size:32px;font-weight:950;letter-spacing:-2px;line-height:.85;transform:skew(-7deg)}.brand span{display:block;font-size:8px;letter-spacing:3px;margin-top:10px;transform:skew(7deg)}.top-right{display:flex;gap:24px;align-items:center}.build-label,.muted{font-size:10px;letter-spacing:1.4px;color:var(--muted)}.icon-btn{background:#13252d88;border:1px solid #ffffff24;padding:11px 14px;font-size:10px;letter-spacing:1px}.icon-btn b{font-size:15px;margin-left:9px}main{position:relative;z-index:2;height:calc(100dvh - 104px);padding:3vh 4.5vw 55px;display:grid;grid-template-columns:minmax(300px,1fr) minmax(480px,610px);gap:6vw;align-items:center;overflow:auto}.intro{align-self:center;padding-bottom:10vh}.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:700;color:#b9c5c6;display:flex;align-items:center;gap:10px}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--orange)}h1{font-size:clamp(42px,5.5vw,85px);font-weight:950;line-height:.96;letter-spacing:-3px;margin:29px 0 24px;transform:skew(-5deg)}h1 em{font-style:normal;color:var(--orange)}.intro>p{font-size:14px;line-height:1.9;color:#b2bdbe}.arena-tag{margin-top:52px;display:flex;gap:16px;align-items:center;font-size:10px;letter-spacing:1.3px}.arena-tag>span{font-size:26px;color:var(--orange);border-right:1px solid #ffffff30;padding-right:16px}.arena-tag small{display:block;color:#99a9af;letter-spacing:0;font-size:11px;margin-top:7px}.selection{background:linear-gradient(140deg,#142832ed,#0b1b25ed);border:1px solid #c0dbe02b;padding:26px 28px;box-shadow:0 20px 100px #030b1150;backdrop-filter:blur(10px)}.section-top{display:flex;justify-content:space-between;gap:10px}.section-top .eyebrow{font-size:9px}.slots{display:grid;grid-template-columns:1fr 36px 1fr;align-items:center;margin:24px 0 20px}.slot{text-align:left;display:flex;flex-direction:column;background:transparent;border-bottom:2px solid #ffffff1c;padding:0 0 12px;min-width:0;gap:7px}.slot.active{border-color:var(--orange)}.slot:last-child.active{border-color:var(--cyan)}.slot small{font-size:9px;color:var(--muted);letter-spacing:1px}.slot strong{font-size:25px;text-transform:uppercase;letter-spacing:-.8px;white-space:nowrap}.slot>span{font-size:10px;color:#c4cbc8}.slot:last-child{text-align:right;align-items:flex-end}.vs{font-size:13px;color:#a3afb1;text-align:center;font-style:italic}.roster{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.fighter-card{position:relative;overflow:hidden;min-width:0;padding:0;background:linear-gradient(145deg,#37505b,#1b303b);border:1px solid #ffffff18;height:102px}.fighter-card canvas{width:100%;height:80px;display:block;object-fit:contain;transition:transform .2s}.fighter-card:hover canvas{transform:scale(1.09)}.fighter-card>span{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#08141e);padding:13px 2px 7px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.2px}.fighter-card.picked-0{border:2px solid var(--orange);background:linear-gradient(140deg,#82563b,#263a44)}.fighter-card.picked-1{border-color:var(--cyan);border-width:2px}.fighter-card.picked-0.picked-1{border-left-color:var(--orange);border-bottom-color:var(--orange)}.fighter-card i{position:absolute;top:4px;left:4px;font-size:8px;font-style:normal;color:#091820;background:var(--orange);padding:3px}.fighter-card i.player2{left:auto;right:4px;background:var(--cyan)}.prototype-note{font-size:10px;color:#84979f;margin:11px 0 20px}.modes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;border-bottom:1px solid #ffffff20;margin-bottom:18px}.modes button{font-size:10px;background:transparent;padding:13px 4px;color:#8fa4ac;border-bottom:2px solid transparent;letter-spacing:.5px}.modes button.selected{color:#fff;border-color:var(--orange);background:#ffffff05}.modes span{color:var(--orange)}.primary{display:flex;width:100%;justify-content:space-between;align-items:center;text-align:left;padding:18px 21px;background:var(--orange);color:#172029;font-size:12px;font-weight:850;letter-spacing:1px}.primary span{font-size:22px;line-height:16px}.secondary{background:#ffffff0a;border:1px solid #ffffff25;width:100%;padding:16px;font-size:11px;letter-spacing:1px;margin-top:10px}.start-note{font-size:10px;text-align:center;color:#98abb2;margin-top:12px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}label{font-size:9px;color:#b1bfc2;letter-spacing:1px}input{display:block;width:100%;min-width:0;background:#0b1922;border:1px solid #b6d6dd33;color:#fff;padding:12px;margin-top:8px;font-size:12px;border-radius:0}input::placeholder{color:#6e858e}#room-code{text-transform:uppercase}.text-btn{background:none;color:#adc5cc;font-size:10px;padding:10px 0;text-decoration:underline;text-underline-offset:4px}.room-line{display:flex;justify-content:space-between;align-items:center;font-size:10px}.room-line b{color:var(--orange);letter-spacing:2px;margin-left:6px}#room-players{font-size:11px;line-height:1.8;color:#a5b9be}#status{font-size:11px;line-height:1.5;color:#ffc58c;margin-top:9px;min-height:0}footer{position:absolute;bottom:22px;left:4.5vw;right:4.5vw;display:flex;justify-content:space-between;color:#8b9fa7;font-size:8px;letter-spacing:1.8px}body.playing #topbar{display:none}#hud{position:fixed;inset:0;pointer-events:none;z-index:3}.fight-top{display:grid;grid-template-columns:1fr 120px 1fr;gap:24px;position:absolute;left:5%;right:5%;top:34px}.hud-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}.hud-label strong{font-size:25px;text-transform:uppercase;font-weight:900;letter-spacing:-.6px}.hud-label>span{font-size:10px;color:#b6c8ce}.p2 .hud-label{flex-direction:row-reverse}.health-track{height:20px;background:#241d25;border:1px solid #ffffff46;transform:skew(-12deg);padding:3px}.health-track>div{width:100%;height:100%;background:linear-gradient(90deg,#f9cc92,#ff9e55);transition:width .12s}.p2 .health-track>div{margin-left:auto;background:linear-gradient(90deg,#7ebecd,#bcf0e9)}.hud-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:10px;color:#b4c5c9}.p2 .hud-bottom{flex-direction:row-reverse}.wins{display:flex;gap:8px}.wins i{width:8px;height:8px;transform:rotate(45deg);border:1px solid #b4b9b4;display:block}.wins i.won{background:var(--orange);border-color:var(--orange)}.p2 .wins i.won{background:var(--cyan);border-color:var(--cyan)}.timer{text-align:center;display:flex;align-items:center;flex-direction:column}.timer span,.timer small{font-size:9px;letter-spacing:1.4px;color:#becacb}.timer strong{font-size:59px;line-height:1;font-weight:900;letter-spacing:-3px;margin:5px 0}.timer.low strong{color:#ff8e6d}.announcement{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:clamp(34px,7vw,84px);font-weight:950;letter-spacing:-2px;font-style:italic;text-shadow:0 4px 25px #061620;color:#ffe0b0}.announcement small{display:block;font-size:12px;letter-spacing:4px;font-style:normal;margin-top:12px}.combo{position:absolute;top:32%;font-size:22px;font-weight:900;color:#ffcc94;white-space:pre-line}.combo.left{left:6%}.combo.right{right:6%;text-align:right;color:var(--cyan)}.fight-bottom{position:absolute;bottom:31px;left:5%;right:5%;display:grid;grid-template-columns:minmax(100px,240px) 1fr minmax(100px,240px);align-items:end;gap:20px}.energy-panel>span{font-size:9px;letter-spacing:1.4px;color:#dbb78c}.energy-panel.right{text-align:right}.energy-panel.right>span{color:var(--cyan)}.energy-track{height:9px;margin:9px 0;background:#071b28;border:1px solid #ffffff40;padding:1px}.energy-track>div{height:100%;background:var(--orange);transition:width .12s}.right .energy-track>div{background:var(--cyan);margin-left:auto}.guard-track{height:3px;background:#ffffff15}.guard-track>div{height:100%;background:#e5ded48c}.right .guard-track>div{margin-left:auto}#fight-hint{text-align:center;font-size:8px;line-height:1.8;letter-spacing:1px;color:#bccbd0}.fight-menu{pointer-events:auto;position:absolute;top:135px;left:5%;font-size:8px;padding:8px}#connection{position:absolute;top:137px;right:5%;color:var(--cyan);font-size:10px}.overlay{position:fixed;inset:0;z-index:10;background:#08151fbd;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}.modal{position:relative;width:440px;max-width:100%;background:linear-gradient(130deg,#203743,#0e202c);border:1px solid #d8e5e136;padding:38px;box-shadow:0 30px 100px #0008}.modal h2{font-size:35px;letter-spacing:-1px;font-weight:900;margin:22px 0}.modal p{color:#abc0c6;font-size:13px;line-height:1.8}.modal>.text-btn{display:block;margin:14px auto 0}.help-card{width:760px}.help-card h2{font-size:29px}.close{position:absolute;right:15px;top:10px;background:transparent;font-size:28px}.control-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.control-columns h3{font-size:10px;color:var(--orange);letter-spacing:1px}.control-columns p{font-size:12px;line-height:1.5}.control-columns small{font-size:10px;color:#8da2ac}kbd{display:inline-flex;min-width:24px;height:24px;align-items:center;justify-content:center;padding:0 5px;border:1px solid #ffffff36;background:#ffffff0a;border-radius:3px;font:12px Arial;color:#ecf0e7}.tips{border-top:1px solid #ffffff20;margin-top:22px;padding-top:10px}.tips p{font-size:11px}.tips b{color:#e6d7b9}.result-card{text-align:center;width:460px}.result-card .eyebrow{justify-content:center;font-size:9px}.result-card h2{text-transform:uppercase;color:var(--orange);font-size:43px}.result-score{font-size:54px;font-weight:900;letter-spacing:10px}.result-card .primary{margin-top:25px}#touch-controls{position:fixed;left:16px;right:16px;bottom:80px;z-index:5;display:flex;justify-content:space-between;pointer-events:none}#touch-controls button{pointer-events:auto;background:#0b263caa;border:1px solid #ffffff40;border-radius:8px;min-height:42px;min-width:44px;font-size:10px;touch-action:none;user-select:none}#touch-controls button.down{background:#b66d30c9}.touch-move{display:grid;grid-template-columns:repeat(3,44px);gap:4px}.touch-move button:last-child{grid-column:2}.touch-actions{display:grid;grid-template-columns:repeat(3,52px);gap:4px}
@media(min-width:1700px){.selection{padding:34px}.fighter-card{height:120px}.fighter-card canvas{height:100px}}
@media(max-height:760px) and (min-width:901px){#topbar{height:80px;padding-top:18px;padding-bottom:18px}main{height:calc(100dvh - 80px);padding-top:8px;padding-bottom:40px}.selection{padding:18px 24px}.slots{margin:15px 0}.fighter-card{height:86px}.fighter-card canvas{height:70px}.prototype-note{margin:8px 0 10px}.modes{margin-bottom:12px}.primary{padding:15px 18px}h1{font-size:58px}.intro{padding-bottom:5vh}.arena-tag{margin-top:28px}}
@media(max-width:1000px){main{gap:3vw;grid-template-columns:minmax(230px,1fr) minmax(420px,1.4fr)}h1{font-size:51px}.top-right{gap:12px}.build-label{display:none}.selection{padding:22px}.slot strong{font-size:21px}}
@media(max-width:760px){body:not(.playing){overflow:auto}#topbar{height:80px;padding:22px}.brand{font-size:26px}.top-right{gap:7px}.icon-btn{font-size:8px;padding:10px}.icon-btn b{margin-left:4px}main{height:auto;min-height:calc(100dvh - 80px);padding:15px 20px 65px;display:block;overflow:visible}.intro{padding:8px 0 20px}.intro .eyebrow{font-size:8px}h1{font-size:46px;line-height:1;margin:20px 0 12px;letter-spacing:-2px}h1 br{display:none}.intro>p{font-size:12px;line-height:1.5;margin:0}.intro>p br{display:none}.arena-tag{display:none}.selection{padding:20px}.fighter-card{height:95px}.fighter-card>span{font-size:8px}.prototype-note{font-size:9px}.section-top .eyebrow{font-size:8px}.section-top .muted{font-size:8px}.slot strong{font-size:21px}.slot small{font-size:8px}.modes button{font-size:9px}.start-note{font-size:9px}footer{font-size:7px;left:20px;right:20px;letter-spacing:.7px}.fight-top{left:4%;right:4%;top:20px;gap:12px;grid-template-columns:1fr 64px 1fr}.hud-label{display:block}.hud-label strong{font-size:17px}.hud-label>span{display:block;font-size:8px;margin-top:5px}.p2 .hud-label{text-align:right}.health-track{height:15px;padding:2px}.timer strong{font-size:43px}.timer span,.timer small{font-size:7px}.fight-bottom{left:4%;right:4%;bottom:20px;gap:15px;grid-template-columns:1fr 1fr}#fight-hint{display:none}.fight-menu{top:112px;left:4%}#connection{top:114px;right:4%;font-size:8px}.combo{font-size:17px}.modal{padding:27px}.control-columns{gap:20px}.control-columns p{font-size:10px}.help-card h2{font-size:23px}.control-columns h3{font-size:8px}.modal h2{font-size:29px}.room-line{font-size:9px}.room-line .text-btn{font-size:8px}}
@media(max-height:500px){#topbar{height:65px}main{height:calc(100dvh - 65px)}.overlay{align-items:flex-start}.fight-top{top:12px}.fight-menu{top:105px}.fight-bottom{bottom:13px}#touch-controls{bottom:55px}.timer strong{font-size:38px}.health-track{height:13px}.hud-label strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.arena-choice{margin:0 0 13px}.arena-choice .section-top{margin-bottom:9px}.arena-choice .eyebrow{font-size:8px}#arena-owner-note{font-size:8px;color:#98b8bb;letter-spacing:1px}.arena-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.arena-options button{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#0a1c24;border:1px solid #bcd4ce25;text-align:left;min-width:0}.arena-options button.selected{border-color:#d6b27b;background:linear-gradient(100deg,#64705c4d,#13242b)}.arena-options strong{display:block;font-size:10px;letter-spacing:1px}.arena-options small{display:block;font-size:9px;color:#96afb7;margin-top:4px}.arena-options i{margin-left:auto;color:#829695;font-size:9px;font-style:normal}.arena-icon{font-size:29px;line-height:1;color:#80bdcb}.plate-icon{color:#e1bb76}.prototype-note{margin-bottom:13px}.arena-tag b{font-weight:500}body.playing .vignette{background:linear-gradient(0deg,#081723ad,transparent 23%,transparent 75%,#081723bd)}
@media(max-height:760px) and (min-width:901px){.selection{padding:17px 22px}.slots{margin:12px 0}.fighter-card{height:76px}.fighter-card canvas{height:65px}.prototype-note{margin:7px 0 11px}.arena-options button{padding:8px 10px}.modes button{padding:10px 4px}.arena-choice{margin-bottom:7px}.arena-choice .section-top{margin-bottom:7px}}