@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--gold:#f0c15c;--muted:#8b8a87}*{box-sizing:border-box}body{margin:0;background:#111313;color:#eeeae1;font:12px 'DM Sans',sans-serif}header{height:95px;display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto;padding:0 5%;border-bottom:1px solid #ffffff15}.brand{font:900 36px 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;text-decoration:none;color:var(--gold);display:flex;align-items:center;gap:17px}.brand span{color:#e8e4d7;letter-spacing:3px;font:600 9px 'DM Sans',sans-serif;border-left:1px solid #ffffff30;padding-left:17px;max-width:80px;line-height:1.6}.edition{font-size:10px;letter-spacing:2px;color:#aaa}.edition i{display:inline-block;background:var(--gold);width:4px;height:4px;border-radius:50%;margin:0 16px}button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}header button{border:1px solid #ffffff30;border-radius:3px;padding:10px 14px;font-size:9px;letter-spacing:1.5px}main{max-width:1440px;padding:30px 5% 0;margin:auto}.eyebrow{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:2px;margin-bottom:13px}.eyebrow span:first-child{color:var(--gold)}.cabinet{position:relative;overflow:hidden;border:1px solid #bca87940;border-radius:5px;background:#171a20;aspect-ratio:16/9;box-shadow:0 20px 80px #0008}canvas{width:100%;height:100%;display:block;outline:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(90deg,#0c181bea,#0c141977,#0c181ba8);text-align:center}.tag{font-size:10px;letter-spacing:3px;color:#f5d495}.overlay h1{font:900 clamp(40px,7.6vw,108px)/.8 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:25px 0 16px;transform:skew(-5deg);text-shadow:3px 5px 0 #12262c}.overlay em{font-style:normal;color:var(--gold)}.overlay p{color:#d2d2cb;line-height:1.8;font-size:13px}.primary{background:var(--gold);color:#182022;min-width:248px;padding:17px 21px;font-weight:800;letter-spacing:1px;text-align:left;margin-top:15px;box-shadow:0 4px 0 #99772c}.primary span{float:right;margin-left:25px}.primary:hover{background:#ffdb85}.versus{display:flex;align-items:center;gap:10px;margin-top:26px;letter-spacing:2px;font-size:12px}.versus span{color:var(--gold);margin:0 20px;font-style:italic}.versus small{font-size:8px;color:#9ba7a7}.pause{position:absolute;right:15px;bottom:15px;background:#10191b99;border:1px solid #fff4;width:34px;height:34px;border-radius:50%}.below{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;padding:17px 0;color:#c0bcae}.muted{color:#666;margin:0 9px}.live{display:inline-block;width:5px;height:5px;background:#82c6a4;border-radius:50%;margin-right:8px}.below button{font-size:9px;letter-spacing:1px;padding:0}.controls{border-top:1px solid #ffffff16;border-bottom:1px solid #ffffff16;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}.control-title{font-weight:700;font-size:11px;letter-spacing:1.3px}.control-title span{display:block;color:var(--muted);font-size:8px;margin-top:6px;letter-spacing:1px}.controls>div:not(:first-child){display:flex;align-items:center;gap:4px}.controls span:not(.control-title span){margin-left:5px;color:#aaa;font-size:10px}kbd{border:1px solid #ffffff30;border-bottom:3px solid #ffffff30;border-radius:4px;min-width:25px;height:28px;display:inline-flex;align-items:center;justify-content:center;font:600 11px 'DM Sans'}.hidden{display:none!important}#loading{position:absolute;bottom:12px;left:15px;color:var(--gold);font-size:10px}h2{font:900 clamp(35px,6vw,84px) 'Barlow Condensed',Impact;margin:15px;color:var(--gold)}footer{display:flex;justify-content:space-between;padding:25px 0;color:#777;font-size:9px;letter-spacing:1.5px}footer span:last-child{letter-spacing:0}.touch{display:none;justify-content:space-between;padding:16px 0;gap:10px}.touch>div{display:flex;gap:7px}.touch button{background:#252b2b;border:1px solid #ffffff25;border-radius:8px;min-width:43px;height:48px;font-size:10px;touch-action:none;user-select:none}.touch button:active{background:#ac8a40}.cabinet:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}.cabinet:fullscreen canvas{object-fit:contain}@media(pointer:coarse){.touch{display:flex}}@media(max-width:800px){header{height:70px;padding:0 4%}.edition{display:none}main{padding:23px 3% 0}.controls{flex-wrap:wrap;justify-content:flex-start;gap:15px}.control-title{width:100%}.overlay h1{margin:15px 0 8px}.overlay p{font-size:10px;margin:4px}.tag{font-size:7px;letter-spacing:2px}.primary{min-width:200px;padding:12px 15px;margin-top:10px;font-size:10px}.versus{margin-top:15px;font-size:10px}.below{font-size:7px;letter-spacing:.7px}.below button{font-size:7px}.eyebrow{font-size:7px}footer{font-size:7px}.touch button{min-width:36px}.pause{right:8px;bottom:8px;width:28px;height:28px}}@media(max-width:480px){.overlay h1{font-size:43px}.overlay p{display:none}.versus{margin-top:12px}.tag{font-size:6px}.primary{padding:10px 15px}.touch button{font-size:8px}.below .muted{margin:0 3px}}

footer a{color:#c6b88f;text-decoration:none}

.audio-settings{display:flex;gap:35px;align-items:center;padding:24px 0 8px}.audio-settings b{display:block;font-size:10px;letter-spacing:1.3px}.audio-settings span{display:block;color:#93988f;font-size:10px;margin-top:6px}.audio-settings label{display:flex;align-items:center;gap:12px;font-size:11px;color:#c9c5ba}.audio-settings input{accent-color:var(--gold);width:110px;cursor:pointer}#audio-status{color:#91978f;font-size:10px;margin:7px 0 22px}.sound-bank{border-block:1px solid #ffffff16;padding:17px 0}.sound-bank summary{cursor:pointer;font-size:10px;letter-spacing:1.4px;color:var(--gold)}.sound-bank summary span{color:#91978f;font-size:8px;margin-left:12px}.sound-bank p{color:#999;font-size:11px;line-height:1.6}.sound-clips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}.sound-clips button{padding:10px 14px;border:1px solid #ffffff25;border-radius:4px;font-size:11px}.sound-clips button:hover{border-color:var(--gold)}.sound-clips button span{color:var(--gold);margin-right:6px}@media(max-width:600px){.audio-settings{flex-wrap:wrap;gap:15px 25px}.audio-settings>div{width:100%}.audio-settings label{font-size:10px}.audio-settings input{width:90px}.sound-bank summary span{display:block;margin:8px 0 0 17px}}

.brand img{width:58px;height:58px;object-fit:contain;border-radius:50%;background:#fff}.match-setup{display:flex;align-items:center;gap:20px;margin:0 0 18px;padding:14px 16px;background:#1c2222;border:1px solid #ffffff16;border-radius:5px}.match-setup label{display:flex;align-items:center;gap:12px;color:#a6aaa2;font-size:9px;letter-spacing:1px}.match-setup select{max-width:260px;background:#111717;color:#eee5d3;border:1px solid #ffffff25;border-radius:4px;padding:10px;font:12px 'DM Sans',sans-serif}.match-setup button{margin-left:auto;color:var(--gold);font-size:10px;letter-spacing:1px}.play-area{position:relative}.touch{padding:12px 14px 27px;background:#182020;border:1px solid #ffffff16;border-radius:0 0 6px 6px;position:relative;align-items:center;user-select:none;-webkit-user-select:none;touch-action:none}.touch .move-pad{display:flex;flex-direction:column;align-items:center;gap:7px}.move-pad>div{display:flex;gap:16px}.touch button{height:52px;min-width:58px;font-size:11px;font-weight:700;border-radius:12px}.touch .jump-key{background:#31524b;border-color:#77b3a0;min-width:76px;height:55px;font-size:17px}.jump-key small{display:block;font-size:9px;letter-spacing:1px}.touch .fight-pad{display:grid;grid-template-columns:repeat(2,minmax(64px,85px));gap:9px}.touch .special-key{color:#1b2120;background:var(--gold);border-color:#ffe1a2}.touch-hint{position:absolute;bottom:7px;left:0;width:100%;text-align:center;font-size:7px;color:#a9b1a8;letter-spacing:.6px}.play-area:fullscreen,body.immersive .play-area{width:100vw;height:100dvh;display:flex;flex-direction:column;background:#0d1111;padding:0;gap:0}.play-area:fullscreen .cabinet,body.immersive .play-area .cabinet{flex:1;min-height:0;aspect-ratio:auto;border:0;border-radius:0}.play-area:fullscreen canvas,body.immersive .play-area canvas{object-fit:contain}.play-area:fullscreen .touch,body.immersive .play-area .touch{display:flex;flex-shrink:0;max-height:160px}.play-area:fullscreen .touch button,body.immersive .play-area .touch button{height:44px}.play-area:fullscreen .touch .jump-key,body.immersive .play-area .touch .jump-key{height:48px}body.immersive{overflow:hidden}body.immersive .play-area{position:fixed;inset:0;z-index:9999;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}@media(max-width:900px),(any-pointer:coarse){.touch{display:flex}}@media(max-width:700px){.match-setup{flex-wrap:wrap;gap:12px;padding:12px}.match-setup label{flex:1;min-width:140px;display:block;font-size:8px}.match-setup select{display:block;width:100%;max-width:none;font-size:10px;margin-top:6px}.match-setup button{font-size:9px}.brand img{width:46px;height:46px}}@media(orientation:landscape) and (max-height:600px){.play-area:fullscreen .touch,body.immersive .play-area .touch{max-height:95px;padding:6px 22px 18px;flex-direction:row}.play-area:fullscreen .move-pad,body.immersive .play-area .move-pad{flex-direction:row-reverse;gap:16px}.play-area:fullscreen .fight-pad,body.immersive .play-area .fight-pad{display:flex;gap:12px}.play-area:fullscreen .touch button,body.immersive .play-area .touch button{height:48px;min-width:60px}.play-area:fullscreen .touch .jump-key,body.immersive .play-area .touch .jump-key{height:55px}}
.exit-fullscreen{position:absolute;right:12px;top:110px;z-index:5;border:1px solid #fff5;background:#102023bb;border-radius:50%;width:34px;height:34px}.touch button.pressed{background:#668a75;border-color:#f0c15c}

@media(orientation:landscape) and (max-height:600px){.play-area:fullscreen .touch,body.immersive .play-area .touch{position:absolute;bottom:0;left:0;width:100%;max-height:none;height:140px;background:linear-gradient(transparent,#06120d77);border:0;padding:6px 14px 18px;pointer-events:none}.play-area:fullscreen .touch button,body.immersive .play-area .touch button{pointer-events:auto;background:#243a3ac9;min-width:54px;height:45px}.play-area:fullscreen .touch .move-pad,body.immersive .play-area .touch .move-pad{flex-direction:column;gap:5px}.play-area:fullscreen .touch .fight-pad,body.immersive .play-area .touch .fight-pad{display:grid;grid-template-columns:repeat(2,62px);gap:8px}.play-area:fullscreen .touch .special-key,body.immersive .play-area .touch .special-key{background:#f0c15cdd}.play-area:fullscreen .touch .jump-key,body.immersive .play-area .touch .jump-key{height:48px;background:#31524be6;min-width:65px}.play-area:fullscreen .touch-hint,body.immersive .play-area .touch-hint{bottom:3px;font-size:6px}}

/* Explicit on every descendant: iOS can otherwise select a long-pressed label. */
.play-area,.play-area *,button,button *,kbd,kbd *{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none}button>*{pointer-events:none}.touch,.touch *{touch-action:none!important}.touch button{outline:none;-webkit-tap-highlight-color:transparent}.touch .fight-pad{grid-template-columns:repeat(3,minmax(44px,62px));gap:6px}.touch .fight-pad button{min-width:0;font-size:8px;height:47px;padding:2px}.fight-pad small{display:block;font-size:8px;opacity:.75;margin-top:3px}.touch .fight-pad .fire-key{background:#99391d;color:#ffe9a6;border-color:#f18b3b}.touch .fight-pad .quake-key{background:#65512e;color:#ffdf9e;border-color:#b6a16e}.touch .move-pad>div{gap:8px}.touch .move-pad>div button{min-width:44px}.controls{flex-wrap:wrap;justify-content:flex-start;gap:18px}.controls .control-title{min-width:145px}.move-tip{font-size:10px;color:#b8b19f;line-height:1.7}.touch{padding-inline:10px}.play-area:fullscreen .fight-pad,body.immersive .play-area .fight-pad{grid-template-columns:repeat(3,minmax(44px,62px))}.play-area:fullscreen .touch .fight-pad button,body.immersive .play-area .touch .fight-pad button{min-width:0;height:43px;font-size:8px}@media(orientation:landscape) and (max-height:600px){.play-area:fullscreen .touch,body.immersive .play-area .touch{height:168px}.play-area:fullscreen .touch .fight-pad,body.immersive .play-area .touch .fight-pad{grid-template-columns:repeat(3,56px);gap:5px}.play-area:fullscreen .touch .fight-pad button,body.immersive .play-area .touch .fight-pad button{height:42px;min-width:0;font-size:8px}}

.back-games{font-size:11px;color:#f0c15c;text-decoration:none;white-space:nowrap}.back-games:hover{text-decoration:underline}@media(max-width:600px){.back-games{font-size:9px}}

.roster-board{margin:1.5rem auto;max-width:1000px;color:inherit}.roster-board summary{cursor:pointer;padding:1rem;font-weight:700}.roster-board img{width:100%;height:auto;display:block}
