@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Heebo:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#111310;--panel:#191c18;--line:#34382d;--text:#f1f2e9;--muted:#959c8b;--lime:#dcff50;--cyan:#72e1e9;--red:#ff927b;font-family:Heebo,Arial,sans-serif;background:var(--bg);color:var(--text)}*{box-sizing:border-box}body{margin:0}button,select,a{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button{color:inherit}.app{max-width:1600px;margin:auto;padding:0 48px}.topbar{height:91px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font:800 27px 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.4px}.brand-icon{font-size:43px;color:var(--lime);line-height:1}.brand-light{font-weight:500}.edition{border-left:1px solid var(--line);padding-left:16px;margin-left:8px;font:500 12px Heebo,sans-serif;letter-spacing:1px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:10px}.text-button,.icon-button{background:none;border:1px solid var(--line);height:38px}.text-button{border:0;padding:0 16px;font-size:14px}.text-button span{margin-left:9px;color:var(--muted)}.icon-button{width:39px;font:22px Arial}.icon-button:hover,.text-button:hover{color:var(--lime);border-color:var(--lime)}main{padding-top:27px}.match-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}.eyebrow{color:var(--muted);font-size:12px;letter-spacing:2px;font-weight:600}h1{font:800 46px/.95 'Barlow Condensed',Impact,sans-serif;margin:8px 0 0;letter-spacing:-.3px}h1 em{font-size:24px;font-style:italic;color:var(--muted);margin:0 10px}.title-dot{color:var(--lime)}.stage-label{text-align:right;font-size:13px;letter-spacing:1px;display:grid;gap:5px}.stage-label small{font-size:11px;color:var(--muted)}.arena{position:relative;aspect-ratio:16/9;isolation:isolate;background:#202b36;border:1px solid #3d4339;overflow:hidden}canvas{display:block;width:100%;height:100%;outline:none}.hud{position:absolute;left:4%;right:4%;top:4.5%;display:flex;align-items:flex-start;gap:3%;pointer-events:none;z-index:2}.fighter-hud{width:42%;filter:drop-shadow(0 2px 5px #0008)}.fighter-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.fighter-label b{display:block;font:800 clamp(20px,2.6vw,37px)/1 'Barlow Condensed',Impact,sans-serif;font-style:italic}.fighter-label small{display:block;font-size:10px;letter-spacing:2px;margin-top:5px;color:#d6dcd6}.bibi{text-align:right}.health-track{height:17px;padding:3px;border:1px solid #e5efdf77;background:#080d12ad;transform:skewX(-14deg)}.health-fill{height:100%;background:var(--cyan);width:100%;transition:width .12s}.bibi .health-fill{background:var(--red);float:right}.round-dots{display:flex;gap:6px}.round-dots i{width:9px;height:9px;border:1px solid #d3d8c599;border-radius:50%}.round-dots i.won{background:var(--lime);border-color:var(--lime)}.power-row{display:flex;gap:8px;align-items:center;margin-top:9px;font:700 10px Arial;letter-spacing:1px}.power-track{width:95px;background:#0b131ba8;height:5px}.power-track i{display:block;width:40%;height:100%;background:var(--cyan)}.bibi .power-row{justify-content:flex-end}.bibi .power-track i{background:var(--red);float:right}.timer-block{min-width:9%;text-align:center;display:grid;filter:drop-shadow(0 2px 6px #000)}.timer-block small{font:700 11px Arial;letter-spacing:1px}.timer-block strong{font:800 clamp(32px,4vw,56px)/1.1 'Barlow Condensed',Impact,sans-serif}.timer-block>span{font-size:9px;letter-spacing:1px;color:#d6dccd}.screen{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(90deg,#07101624,#080e1880 32%,#080e1880 68%,#07101624);text-align:center;padding-top:45px}.screen .eyebrow{color:#d8e0cc}.screen h2{font:900 clamp(34px,5.7vw,81px)/.88 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:14px 0 24px;font-style:italic;text-shadow:0 3px 24px #0005}.screen h2 em{color:var(--lime);font-style:inherit}.screen h2 span{color:var(--lime)}.intro-mark{position:absolute;top:32%;font:200px/1 Arial;opacity:.07;color:var(--lime);pointer-events:none}.setup-controls{display:flex;gap:12px;margin:0 0 17px}.setup-controls label{font-size:11px;color:#b8c1b3;display:grid;text-align:right;gap:4px}.setup-controls select{border:1px solid #8e9d7b77;background:#172120d9;color:#fff;font-size:13px;min-width:145px;padding:7px 10px;border-radius:0}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:38px;min-width:235px;background:var(--lime);color:#171d0c;border:0;padding:12px 24px;font:800 23px 'Barlow Condensed',Heebo,sans-serif;transform:skewX(-5deg);box-shadow:4px 4px 0 #171b15}.primary-button:hover{background:#e9ff95;transform:skewX(-5deg) translateY(-2px)}.primary-button:disabled{opacity:.6;cursor:wait}.start-note{font-size:11px;color:#c6cdbf;margin-top:15px}.start-note kbd{font-size:10px;padding:2px 5px;margin:0 4px}.secondary-button{margin-top:18px;background:none;border:none;text-decoration:underline;color:#dce2d1;font-size:14px}.asset-status{font-size:12px;color:var(--lime);position:absolute;bottom:47px}.arena-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;height:31px;padding:0 20px;background:#0e141beb;border-top:1px solid #586a632e;color:#b0bba7;font-size:10px;letter-spacing:1px;z-index:5}.arena-footer i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime);margin-right:6px}.arena-footer button{background:none;border:none;font:11px Arial;letter-spacing:1px;color:#e1e6d8}.arena-footer button:hover{color:var(--lime)}.control-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-top:0;padding:20px 24px;background:#171a16}.control-owner{display:flex;align-items:center;gap:11px}.player-square{display:grid;place-items:center;border:1px solid #70817c;width:35px;height:35px;color:var(--cyan);font:700 16px 'Barlow Condensed',Arial}.control-owner b{font:700 19px 'Barlow Condensed',Arial;display:block}.control-owner small{font-size:9px;color:var(--muted);letter-spacing:1px;white-space:nowrap}.control-group{display:flex;align-items:center;gap:9px}.control-group>div{display:flex;gap:4px}.control-group>span{font-size:12px;color:#bac2b4;white-space:nowrap}kbd{display:inline-grid;place-items:center;font:600 13px Arial;min-width:27px;height:27px;background:#242920;border:1px solid #414737;box-shadow:0 2px 0 #050805;border-radius:3px;color:#e1e7d9}.special-key kbd{color:var(--lime);border-color:#677b31}.control-divider{width:1px;height:29px;background:var(--line)}.all-controls{background:none;border:none;font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap}.all-controls:hover{color:var(--lime)}.page-footer{display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:11px Heebo,Arial;color:#858e7b;letter-spacing:.8px}.page-footer>span:first-child{font-weight:700;color:#b0b9a6}.page-footer>span:nth-child(2){letter-spacing:0}.hidden{display:none!important}.announcement{position:absolute;left:0;right:0;top:40%;z-index:3;text-align:center;font:900 clamp(40px,8vw,110px)/1 'Barlow Condensed',Impact,sans-serif;font-style:italic;color:var(--lime);text-shadow:5px 5px 0 #07111d,0 0 50px #111;pointer-events:none}.touch-controls{display:none;user-select:none;touch-action:none}dialog{background:#1a1e18;color:var(--text);border:1px solid #58644b;width:min(600px,92vw);padding:36px;box-shadow:0 20px 100px #0009}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog h2{font-size:30px;margin:10px 0}dialog p{font-size:15px;color:#bec7b3;line-height:1.8}dialog table{border-collapse:collapse;width:100%;font-size:14px;margin:20px 0}dialog td,dialog th{text-align:right;padding:10px;border-bottom:1px solid #3b4234}dialog th{color:var(--lime);font-size:13px}dialog td:not(:first-child){font-family:Arial;direction:ltr;text-align:center}dialog .help-note{font-size:13px}.close-dialog{position:absolute;left:14px;top:10px;border:none;background:none;font:30px Arial;color:var(--muted)}#resultScore{margin:-6px 0 28px;color:#e2e7d7;font-size:18px}#arena:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}#arena:fullscreen canvas{object-fit:contain;background:#080c10}@media(min-width:1500px){.app{max-width:1450px}.screen h2{font-size:79px}}@media(max-width:1050px){.app{padding:0 24px}.edition{display:none}.control-strip{gap:12px;padding:18px 15px}.control-group{gap:6px}.control-group>span{font-size:11px}.all-controls{display:none}.control-owner small{display:none}.page-footer>span:last-child{display:none}}@media(max-width:760px){.app{padding:0 14px}.topbar{height:66px}.brand{font-size:23px;gap:8px}.brand-icon{font-size:34px}.text-button{font-size:12px;padding:0 4px}.icon-button{width:32px;height:32px}.top-actions{gap:5px}main{padding-top:19px}.match-heading{margin-bottom:17px}h1{font-size:35px}.eyebrow{font-size:10px}.stage-label{font-size:10px}.stage-label small{font-size:9px}.arena{aspect-ratio:4/3}.hud{gap:3%;top:5%}.health-track{height:11px;padding:2px}.fighter-label{margin-bottom:4px}.fighter-label small{font-size:8px;letter-spacing:1px;margin-top:3px}.fighter-label b{font-size:23px}.timer-block small{font-size:8px}.timer-block>span{font-size:7px}.timer-block strong{font-size:31px}.power-row{font-size:7px;margin-top:5px}.power-track{width:60px;height:4px}.round-dots{gap:4px}.round-dots i{width:6px;height:6px}.screen{padding-top:33px}.screen h2{font-size:clamp(35px,7vw,53px);margin:9px 0 15px}.screen .eyebrow{font-size:8px}.setup-controls{gap:8px;margin-bottom:12px}.setup-controls label{font-size:9px}.setup-controls select{min-width:116px;padding:4px 7px;font-size:11px}.primary-button{font-size:19px;min-width:200px;padding:8px 20px}.start-note{font-size:9px;margin:11px 0 0}.start-note kbd{height:17px;font-size:8px}.arena-footer{height:26px;padding:0 10px;font-size:8px;letter-spacing:.5px}.arena-footer button{font-size:10px}.arena-footer button span{display:none}.intro-mark{display:none}.asset-status{bottom:25px;font-size:10px}.control-strip{display:none}.touch-controls{display:flex;justify-content:space-between;gap:14px;border:1px solid var(--line);border-top:0;padding:17px 10px}.touch-move,.touch-attacks{display:flex;gap:5px;align-items:center}.touch-controls button{touch-action:none;background:#242a20;border:1px solid #4c583d;min-width:34px;height:42px;font:16px Arial}.touch-attacks button{font:bold 10px Arial;padding:0 8px}.touch-attacks .special-touch{color:var(--lime)}.touch-controls button.active{background:#596938}.page-footer{padding:18px 0;font-size:9px;flex-wrap:wrap;gap:10px}.page-footer>span:nth-child(2){font-size:10px}.announcement{top:43%}.screen #resultTitle{font-size:52px}dialog{padding:26px 20px}dialog td,dialog th{padding:8px 4px;font-size:12px}}@media(max-width:390px){.app{padding:0 8px}.touch-controls{gap:5px;padding:12px 6px}.touch-controls button{min-width:29px}.touch-attacks button{font-size:9px;padding:0 6px}.stage-label{display:none}.screen h2{font-size:34px}.screen{padding-top:38px}.start-note{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.sound-on{color:var(--lime);border-color:#667b31}.power-track i.charged{box-shadow:0 0 7px currentColor}.expanded .arena{position:fixed;inset:0;z-index:20;width:100vw;height:100dvh;border:0}.expanded .arena canvas{object-fit:contain;background:#080c10}
/* Keep the longer Space and Enter keycaps readable at every width. */
kbd{padding-inline:6px}.control-strip{flex-wrap:wrap}
@media (min-width:761px) and (pointer:coarse),(min-width:761px) and (max-height:500px){
 .control-strip{display:none}
 .touch-controls{display:flex;justify-content:space-between;gap:14px;border:1px solid var(--line);border-top:0;padding:12px;max-width:760px;margin:auto}
 .touch-move,.touch-attacks{display:flex;gap:6px;align-items:center}
 .touch-controls button{touch-action:none;background:#242a20;border:1px solid #4c583d;min-width:44px;height:44px;font:18px Arial}
 .touch-attacks button{font:bold 12px Arial;padding:0 14px}.touch-attacks .special-touch{color:var(--lime)}.touch-controls button.active{background:#596938}
}
@media (orientation:landscape) and (max-height:500px){
 .app{padding:0 8px}.topbar,.match-heading,.page-footer{display:none}main{padding-top:0}
 .arena{width:min(100%,calc(177.78vh - 128px));width:min(100%,calc(177.78svh - 128px));aspect-ratio:16/9;margin:auto}
 .touch-controls{height:72px;padding:8px 12px}.screen{padding-top:32px}
}

.fighter-hud .health-fill,.fighter-hud .power-track i{background:var(--fighter-color)}
#matchTitle{font-size:clamp(28px,4.2vw,68px)}#leftName,#rightName{font-size:clamp(16px,2.4vw,34px)}
@media(max-width:760px){#matchTitle{font-size:30px}.stage-label{display:none}#leftName,#rightName{font-size:18px}.duo-help{font-size:12px}}

/* Character selection is a separate stage, with portraits and full-body previews
   in disjoint grid cells. Combat HUD and controls appear only after starting. */
body.selecting .match-heading,body.selecting .touch-controls,body.selecting .control-strip,body.selecting .page-footer{display:none}
.arena.is-selecting{aspect-ratio:auto;width:100%;height:auto;min-height:0;border-color:#565d68}
.is-selecting>#game,.is-selecting>#hud,.is-selecting>.arena-footer,.is-selecting>#announcement{display:none}
.start-screen{
 --p1:#a8ff3e;--p2:#ff614e;position:relative;inset:auto;display:grid;gap:22px;padding:28px 40px 24px;
 background:radial-gradient(ellipse at 50% 20%,#4a5463 0%,#252e3d 42%,#111720 80%);isolation:isolate;
}
.start-screen::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(125deg,#c7ddff0c,transparent 30%,#0002 60%,transparent);box-shadow:inset 0 0 110px #04060b90}
.selection-heading{text-align:center}
.selection-kicker{font:600 12px Heebo,sans-serif;letter-spacing:3px;color:#bcc5d2}
.screen h2.choose-title{margin:9px 0 0;max-width:none;font-size:clamp(34px,4.5vw,64px);line-height:1;letter-spacing:1px;text-shadow:3px 4px 0 #06090f,0 0 25px #c5d6ed22}
.screen h2.choose-title em{color:#f1f2e9}
.selection-stage{width:100%;max-width:1140px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.95fr) minmax(0,1fr);gap:24px;height:clamp(400px,30vw,460px);align-items:stretch}
.selection-fighter{margin:0;min-width:0;display:flex;flex-direction:column;--side-color:var(--p1)}
.selection-opponent{--side-color:var(--p2)}
.selection-fighter figcaption{flex:none;text-align:center;min-height:57px}
.selection-role{display:block;color:var(--side-color);font:700 12px Heebo,sans-serif;letter-spacing:2px}
.selection-fighter strong{display:block;margin-top:4px;font:800 clamp(23px,2.5vw,36px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.7px;text-shadow:2px 3px #080c13}
.selection-podium{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.selection-podium::before{content:"";position:absolute;bottom:2%;left:4%;right:4%;height:9%;border-radius:50%;background:radial-gradient(ellipse,#0009 15%,#8294ad26 60%,transparent 72%);border-bottom:1px solid #a3bad333;pointer-events:none}
.selection-podium canvas{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 7px 12px #03060c70)}
.selection-center{min-width:0;align-self:center;display:flex;flex-direction:column;align-items:center}
.character-select{width:100%;max-width:280px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;margin:0;padding:0;min-width:0}
.selection-prompt{text-align:center;font-size:14px;color:#d7dde5;margin:0 0 10px}
.character-select legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:0}
.character-card{position:relative;min-width:0;display:flex;flex-direction:column;cursor:pointer;text-align:center;border:3px solid #687586;background:linear-gradient(145deg,#667385,#1d2736 75%);box-shadow:0 3px 0 #080e16,inset 0 0 0 1px #b1bdc044;transition:border-color .15s,background .15s}
.character-card:hover{border-color:#e3edf9;background:linear-gradient(145deg,#7f8da1,#253348 75%)}
.character-card input{position:absolute;opacity:0;width:1px;height:1px}
.character-card canvas{width:100%;height:auto;aspect-ratio:1;min-width:0;object-fit:contain}
.character-card b{display:flex;justify-content:center;align-items:center;gap:4px;min-height:25px;padding:4px 2px;background:#101723db;color:#f5f7fa;font:800 18px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.7px}
.duo-name{font-size:13px;white-space:nowrap}
.selection-marker{display:none;position:absolute;top:5px;left:5px;min-width:25px;padding:3px 5px;font:900 14px/1 Arial,sans-serif;background:var(--p1);color:#142207;box-shadow:2px 2px 0 #0009}
.character-card:has(:checked){border-color:var(--p1);box-shadow:0 0 0 1px var(--p1),0 0 22px #8dfc3e22}
.character-card:has(:checked) b{color:var(--p1)}
.character-card.is-opponent{border-color:var(--p2);box-shadow:0 0 0 1px var(--p2),0 0 22px #ff614e18}
.character-card.is-opponent b{color:#ffab9c}
.character-card.is-opponent .selection-marker{background:var(--p2);color:#240905;left:auto;right:5px}
.character-card:has(:checked) .selection-marker,.character-card.is-opponent .selection-marker{display:block}
.character-card:has(:focus-visible){outline:2px solid white;outline-offset:5px}
.fighter-hint{font-size:12px;color:#c6cfdc;line-height:1.5;min-height:18px;margin:10px 0 0;text-align:center}
.selection-versus{display:none}
.selection-bottom{display:flex;flex-direction:column;align-items:center;gap:13px}
.start-screen .setup-controls{width:min(600px,100%);display:grid;grid-template-columns:1.2fr 1fr .75fr;gap:12px;margin:0}
.start-screen .setup-controls label{font-size:12px;gap:4px;color:#d3dbe6;min-width:0}
.start-screen .setup-controls select{width:100%;min-width:0;max-width:none;height:38px;padding:5px 9px;background:#111924;color:#f3f6fa;border:1px solid #65758b;font-size:14px}
.start-screen .primary-button{font-size:25px;min-width:255px;padding:11px 25px;background:var(--p1);box-shadow:4px 4px 0 #050911}
.start-screen .primary-button:hover{background:#c6ff85}
.start-screen .start-note{font-size:12px;margin:0;color:#b9c3d2}
.start-screen .start-note kbd{font-size:11px;height:21px;background:#202a37;border-color:#59677c}
.start-screen .asset-status{position:static;margin:0;font-size:14px;color:#deeeff}
.start-screen .asset-status:empty{display:none}
#arena:fullscreen.is-selecting,.expanded .arena.is-selecting{overflow:auto}
#arena:fullscreen .start-screen,.expanded .start-screen{min-height:100%;align-content:center}
#arena:fullscreen .selection-podium canvas,.expanded .selection-podium canvas{background:transparent}
@media(max-width:1050px){
 .start-screen{padding:24px;gap:20px}.selection-stage{gap:12px;grid-template-columns:minmax(0,1fr) minmax(232px,1.1fr) minmax(0,1fr);height:380px}.character-select{gap:8px;max-width:260px}.selection-fighter strong{font-size:26px}
}
@media(max-width:620px) and (orientation:portrait){
 .start-screen{padding:22px 14px;gap:18px}.selection-kicker{font-size:10px;letter-spacing:2px}.screen h2.choose-title{font-size:34px;margin-top:8px;letter-spacing:0}
 .selection-stage{height:auto;grid-template-columns:1fr 1fr;gap:14px 10px}.selection-center{grid-column:1/-1;grid-row:1}.character-select{max-width:400px;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.selection-prompt{font-size:13px;margin-bottom:10px}.character-card b{font-size:14px;min-height:32px;flex-direction:column;gap:0}.duo-name{font-size:11px}.selection-marker{font-size:11px;min-width:20px;padding:3px;top:3px;left:3px}
 .selection-fighter{grid-row:2;height:228px}.selection-player{grid-column:1}.selection-opponent{grid-column:2}.selection-fighter figcaption{min-height:46px}.selection-fighter strong{font-size:24px}.selection-role{font-size:10px;letter-spacing:1.5px}
 .fighter-hint{font-size:12px;margin-top:9px}.start-screen .setup-controls{gap:8px}.start-screen .setup-controls label{font-size:11px}.start-screen .setup-controls select{font-size:12px;height:38px;padding-inline:4px}.start-screen .start-note{display:none}.start-screen .primary-button{min-width:235px;font-size:24px}.selection-bottom{gap:14px}
}
@media(orientation:landscape) and (max-height:500px){
 .arena.is-selecting{max-width:1100px;width:100%;height:auto;min-height:100svh}.start-screen{padding:10px 20px;gap:10px;min-height:100svh;align-content:center}
 .selection-kicker{display:none}.screen h2.choose-title{display:block;font-size:30px;margin:0}.selection-stage{height:210px;max-width:760px;grid-template-columns:minmax(0,1fr) 194px minmax(0,1fr);gap:24px}
 .selection-fighter figcaption{min-height:37px}.selection-fighter strong{font-size:23px;margin-top:2px}.selection-role{font-size:10px;letter-spacing:1px}.character-select{gap:7px;max-width:186px}.selection-prompt{display:none}.character-card b{font-size:14px;min-height:20px;padding:3px 1px;letter-spacing:0}.duo-name{font-size:10px}.character-card{border-width:2px}.character-card canvas{aspect-ratio:1.3}.selection-marker{font-size:11px;padding:3px;top:3px;left:3px}.fighter-hint{display:none}
 .selection-bottom{flex-direction:row;justify-content:center;align-items:end;gap:20px}.start-screen .setup-controls{width:min(430px,65%);gap:8px}.start-screen .setup-controls label{font-size:11px}.start-screen .setup-controls select{height:34px;font-size:12px}.start-screen .primary-button{min-width:160px;gap:15px;font-size:21px;padding:8px 17px}.start-screen .start-note{display:none}.start-screen .asset-status{position:absolute;bottom:2px;font-size:12px}
}