@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Inter:wght@400;600;700;800&display=swap');
:root{--gold:#ffd278;--bg:#090b12;--muted:#a1a5b5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#fff;font:14px Inter,Arial,sans-serif}button,select{font:inherit}button{cursor:pointer;color:#fff;background:#191d29;border:1px solid #363a46;padding:13px 18px;font-size:11px;font-weight:800;letter-spacing:1px;border-radius:3px}button:hover{border-color:var(--gold);background:#292b34}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--gold)}header{height:76px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15;position:relative;z-index:2}header a{text-decoration:none;color:var(--gold);font:900 28px 'Barlow Condensed',Impact,sans-serif;font-style:italic}header a span{font:8px Inter;display:block;color:#fff;letter-spacing:3px}header div{display:flex;gap:8px}.screen{position:relative}.hidden{display:none!important}#menu{min-height:calc(100svh - 76px);overflow:hidden;padding:65px 8% 100px}.hero-art{position:absolute;inset:0 0 0 35%;background:radial-gradient(ellipse at 65% 38%,#905c2633,transparent 65%)}.hero-art .hero-person{position:absolute;width:40%;height:90%;top:6%;object-fit:cover;object-position:top;filter:drop-shadow(0 0 25px #ffb85c22)}.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#090b12,transparent 45%),linear-gradient(0deg,#090b12,transparent 70%)}.hero-copy{position:relative;z-index:1;max-width:520px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:3px;color:var(--gold)}h1{font:900 clamp(62px,7.8vw,112px)/.85 'Barlow Condensed',Impact,sans-serif;margin:26px 0 14px;letter-spacing:-2px;font-style:italic}h1 em{color:var(--gold);font-size:1.25em;font-style:italic;text-shadow:4px 5px 0 #654a28}.edition{letter-spacing:9px;font-size:15px;font-weight:800;margin:25px 0}.intro{color:var(--muted);line-height:1.8;margin:25px 0}.menu-actions{display:grid;gap:9px;max-width:340px}.menu-actions button{text-align:left;display:flex;justify-content:space-between;padding:18px}.menu-actions span{font-size:10px;opacity:.7}.primary{background:var(--gold);color:#211809;border:1px solid var(--gold);font-weight:900}.primary:hover{background:#ffe3ac;color:#211809}.text-button{background:none;border:0;padding-left:0;margin-top:12px}.hero-footer{position:absolute;bottom:25px;left:8%;right:8%;display:flex;gap:35px;color:#9b9dab;font-size:9px;letter-spacing:2px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}h2{font:800 clamp(26px,3vw,46px)/1 'Barlow Condensed',Impact,sans-serif;margin:10px 0}#select{max-width:1350px;padding:30px 5%;margin:auto}.selection-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:35px}.fighter-feature{min-height:480px;position:relative;background:radial-gradient(at top,#665133,#11131e);border:1px solid #ffffff22;border-radius:5px;overflow:hidden}#bigPortrait{position:absolute;inset:0;background-size:400% auto;background-position:0 0;background-repeat:no-repeat}.fighter-feature:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#080a11 90%)}.feature-caption{position:absolute;z-index:1;bottom:22px;left:25px;right:20px}h3{font:900 50px 'Barlow Condensed',Impact,sans-serif;margin:5px 0;text-transform:uppercase}.feature-caption p:last-child{color:#ccc;font-size:12px}#roster{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.card{padding:0;overflow:hidden;text-align:left;position:relative;border:2px solid #2c3040;border-radius:3px}.card.selected{border-color:var(--gold);box-shadow:0 0 18px #ffd27820}.card .portrait{height:140px;background-size:400% auto;background-repeat:no-repeat}.card b{display:block;padding:10px 7px;font-size:9px;letter-spacing:.5px;background:#10141f}.card.selected b{background:var(--gold);color:#16100b}.match-options{display:flex;gap:16px;margin:25px 0}label{font-size:9px;letter-spacing:2px;color:var(--muted);flex:1}select{display:block;width:100%;margin-top:8px;background:#171b27;color:#fff;border:1px solid #383b47;padding:12px;font-size:12px}.roster-side>.primary{width:100%;padding:18px}.small{font-size:10px;color:var(--muted);line-height:1.7}.battle-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 4%;font-size:9px;letter-spacing:2px}.battle-toolbar span:nth-child(2){color:var(--muted)}#canvasWrap{position:relative;margin:auto;width:min(100%,calc((100svh - 265px)*16/9));}canvas{width:100%;display:block;background:#141924}#touchControls{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:8px auto;padding:0 20px;user-select:none;touch-action:none}.direction{text-align:center}.direction button{padding:10px 22px;min-width:57px}.direction small{font-size:7px;display:block}.direction>div{display:flex;gap:4px;margin-top:4px}.attacks{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.attacks button{min-width:95px;padding:17px 12px;border-radius:10px}.attacks button[data-key=special]{background:#715926}.attacks button[data-key=light]{background:#194762}.attacks button[data-key=heavy]{background:#692f3d}.pressed{background:#ffe3ac!important;color:#111!important}.keyboard{text-align:center;color:var(--muted);font-size:8px;letter-spacing:1px;margin:10px 5px}#overlay{position:absolute;inset:0;background:#080b17d9;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}#overlay h2{font-size:50px;color:var(--gold)}#overlay p{color:#bbc0cf}#overlay button{margin:5px;min-width:180px}dialog{background:#151a27;color:white;border:1px solid #69553b;max-width:500px;padding:30px;border-radius:8px}dialog::backdrop{background:#000b}dialog p{color:#bbc0cf;font-size:13px;line-height:1.7}@media(max-width:750px){header{height:60px;padding:0 18px}header button{padding:9px;font-size:8px}#menu{min-height:calc(100svh - 60px);padding:45px 7% 85px}.hero-art{left:10%;opacity:.5}.hero-copy{max-width:100%}.hero-footer{gap:13px;font-size:7px}h1{font-size:70px}.edition{font-size:11px}.selection-layout{grid-template-columns:1fr;gap:15px}.fighter-feature{min-height:220px}#bigPortrait{background-size:250% auto;background-position:0 0}.feature-caption{left:45%;bottom:15px}h3{font-size:35px}.card .portrait{height:95px}.card b{font-size:7px;padding:7px 3px}#roster{gap:5px}.match-options{margin:15px 0}.battle-toolbar span:nth-child(2){display:none}#canvasWrap{width:100%}.keyboard{font-size:7px}.attacks button{min-width:75px;font-size:9px}.direction button{min-width:42px;padding:12px}#touchControls{padding:0 10px}#overlay h2{font-size:28px}}@media(max-height:550px) and (orientation:landscape){header{height:42px}header a{font-size:19px}header button{padding:6px}.battle-toolbar{height:31px;padding:3px 20px}#canvasWrap{width:calc((100svh - 80px)*16/9);max-width:calc(100% - 230px)}#touchControls{position:absolute;inset:65px 0 5px;margin:0;pointer-events:none;padding:0 7px;align-items:end}#touchControls button{pointer-events:auto}.direction button{padding:10px;min-width:32px}.attacks{grid-template-columns:1fr 1fr;gap:4px}.attacks button{min-width:52px;padding:17px 5px;font-size:7px}.keyboard{display:none}.selection-layout{grid-template-columns:.8fr 2fr}.fighter-feature{min-height:270px}.card .portrait{height:90px}.section-title{margin-bottom:12px}#select{padding:10px 5%}.match-options{margin:12px 0}#menu{padding:25px 8% 50px}h1{font-size:58px}.intro{display:none}.edition{margin:20px 0}.menu-actions{max-width:300px}.menu-actions button{padding:12px}.hero-footer{bottom:10px}}
.hero-art .hero-person{height:78%;background-size:cover!important;background-position:50% 0!important}.hero-art:after{background:linear-gradient(90deg,#090b12,transparent 40%),linear-gradient(0deg,#090b12 7%,transparent 85%)}#bigPortrait{background-size:cover;background-position:50% 0}.card .portrait{background-size:cover;background-position:50% 0}#canvasWrap{width:min(100%,calc((100svh - 300px)*16/9))}@media(max-width:750px){#bigPortrait{background-size:auto 100%;background-position:0 0}#canvasWrap{width:100%}.hero-art .hero-person{height:70%}}@media(max-height:550px) and (orientation:landscape){#canvasWrap{width:calc((100svh - 80px)*16/9);max-width:calc(100% - 230px)}}
/* Mobile combat controls: independent pointer capture for both thumbs. */
#app,#app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,a,canvas{-webkit-tap-highlight-color:transparent}body.in-game{overscroll-behavior:none}.in-game #battle{touch-action:none}.in-game #canvasWrap{width:min(100%,calc((100svh - 285px)*16/9));overflow:hidden;border:1px solid #ffffff12;border-radius:6px}#game{image-rendering:auto}#touchControls{position:relative;inset:auto;max-width:1200px;margin:12px auto 0;padding:0 24px;pointer-events:auto;align-items:center;gap:20px;touch-action:none}.movement{display:flex;align-items:center;gap:14px}#joystick{position:relative;flex:none;width:128px;height:128px;border-radius:50%;border:1px solid #ffffff55;background:radial-gradient(circle,#ffffff12 0 32%,#080e1c20 34% 66%,#ffffff18 68% 70%,transparent 72%);box-shadow:inset 0 0 25px #0003;touch-action:none}#joystick:before,#joystick:after{content:'';position:absolute;background:#ffffff18;pointer-events:none}#joystick:before{width:1px;height:90%;left:50%;top:5%}#joystick:after{height:1px;width:90%;top:50%;left:5%}#joystickKnob{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);background:radial-gradient(at 30% 25%,#dcecff66,#8295b333);border:1px solid #ffffff88;border-radius:50%;box-shadow:0 4px 15px #0005;pointer-events:none}.stick-up,.stick-down{position:absolute;left:0;right:0;text-align:center;font-size:7px;letter-spacing:1px;color:#fff9;pointer-events:none}.stick-up{top:11px}.stick-down{bottom:11px}.move-buttons{display:grid;gap:7px}.move-buttons button{width:45px;height:45px;padding:3px;border-radius:50%;background:#ffffff0b;border:1px solid #ffffff55;font-size:17px}.move-buttons small{display:block;font-size:6px;letter-spacing:.5px}.attacks{display:grid;grid-template-columns:repeat(3,62px);gap:9px;align-items:center}.attacks button,.attacks button[data-key]{min-width:0;width:62px;height:62px;padding:4px;border-radius:50%;border:1px solid #ffffff66;background:#ffffff0d;box-shadow:inset 0 0 18px #ffffff08,0 2px 10px #0003;font-size:23px;color:#fff;touch-action:none;backdrop-filter:blur(2px)}.attacks small{display:block;font-size:8px;letter-spacing:.7px}.attacks button[data-key=block]{grid-row:2;grid-column:1}.attacks button[data-key=special]{grid-column:3;grid-row:2;color:#ffda89;border-color:#ffd58b99}.attacks button[data-key=kick]{grid-column:2;grid-row:2}.attacks button[data-key=light]{grid-column:1}.attacks button[data-key=heavy]{grid-column:2}.attacks button.pressed,.move-buttons button.pressed{background:#ffda8945!important;color:#fff!important;border-color:#ffe9b3;transform:scale(.95)}.keyboard{margin:9px 5px;font-size:8px}.battle-toolbar{height:44px}.battle-toolbar button{padding:8px 12px}#overlay{z-index:6}
@media(max-width:750px){.in-game #canvasWrap{width:100%;border-radius:0}#touchControls{padding:0 16px;margin-top:22px}.movement{gap:8px}#joystick{width:112px;height:112px}.attacks{grid-template-columns:repeat(3,52px);gap:7px}.attacks button,.attacks button[data-key]{width:52px;height:52px;font-size:20px}.attacks small{font-size:7px}.move-buttons button{width:36px;height:40px}.keyboard{font-size:7px;padding-top:10px}}
@media(max-height:550px) and (orientation:landscape){body.in-game{height:100svh;overflow:hidden}.in-game header{display:none}.in-game #battle{height:100svh}.in-game .battle-toolbar{height:30px;padding:2px max(14px,env(safe-area-inset-right)) 2px max(14px,env(safe-area-inset-left))}.in-game #canvasWrap{width:min(100vw,calc((100svh - 30px)*16/9));max-width:100%;height:auto;max-height:calc(100svh - 30px);border:0;border-radius:0}.in-game #touchControls{position:absolute;inset:auto 0 max(12px,env(safe-area-inset-bottom));padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));max-width:none;margin:0;pointer-events:none;align-items:end;z-index:4}.in-game #touchControls button,.in-game #joystick{pointer-events:auto}.movement{gap:8px}#joystick{width:104px;height:104px}#joystickKnob{width:42px;height:42px}.move-buttons{gap:6px}.move-buttons button{width:35px;height:35px;font-size:13px}.attacks{grid-template-columns:repeat(3,48px);gap:6px}.attacks button,.attacks button[data-key]{width:48px;height:48px;font-size:17px;background:#0b14252b}.attacks small{font-size:6px}.in-game .keyboard{display:none}.in-game #overlay{position:fixed;z-index:10}}
@media(max-width:380px){#touchControls{padding:0 8px;gap:8px}#joystick{width:96px;height:96px}.move-buttons{display:none}.attacks{grid-template-columns:repeat(3,48px)}.attacks button,.attacks button[data-key]{width:48px;height:48px}}
@media(max-width:750px) and (orientation:portrait){h1{font-size:clamp(48px,15vw,68px)}#menu{padding-top:35px}.edition{letter-spacing:6px}}
@media(max-height:550px) and (orientation:landscape){#menu{padding:26px 7% 35px;min-height:calc(100svh - 42px)}.hero-copy{max-width:740px;display:grid;grid-template-columns:minmax(220px,1fr) 260px;column-gap:35px}.hero-copy .eyebrow{grid-column:1;font-size:8px;letter-spacing:1px}.hero-copy h1{grid-column:1;font-size:60px;margin:16px 0 8px}.hero-copy .edition{grid-column:1;font-size:10px;letter-spacing:5px;margin:16px 0}.hero-copy .menu-actions{grid-column:2;grid-row:1/4;align-self:center;width:100%}.hero-copy .text-button{grid-column:2;margin:0;padding:4px}.hero-footer{font-size:7px;bottom:12px}.hero-art{left:25%;opacity:.5}}

/* Rapid taps activate controls without asking the browser to zoom. */
#app{touch-action:manipulation}#touchControls,#touchControls *,#game{touch-action:none}
/* Three abilities plus normal attacks stay within one thumb's reach. */
.attacks{grid-template-columns:repeat(3,58px);gap:6px}.attacks button,.attacks button[data-key]{width:58px;height:58px;font-size:21px}.attacks button[data-key=light]{grid-area:1/1}.attacks button[data-key=heavy]{grid-area:1/2}.attacks button[data-key=kick]{grid-area:1/3}.attacks button[data-key=special]{grid-area:2/1}.attacks button[data-key=special2]{grid-area:2/2;color:#bfeaff;border-color:#9edaff99}.attacks button[data-key=special3]{grid-area:2/3;color:#efc1ff;border-color:#dc9fff99}.attacks button[data-key=block]{grid-area:3/2}.attacks button.unavailable{opacity:.46}.attacks small{font-size:7px;letter-spacing:.15px}#moves{max-width:580px;max-height:86svh;overflow:auto;touch-action:pan-y}#moves h2{margin-bottom:18px}#moves p{font-size:12px;line-height:1.7}.combo-guide{display:grid;gap:7px;margin:15px 0}.combo-guide>div{background:#0d111b;border:1px solid #ffffff18;padding:10px 12px;border-radius:4px}.combo-guide b{color:#ffdc9b;font-size:12px}.combo-guide span{display:block;margin-top:5px;color:#bfc6d7;font-size:11px}.battle-toolbar{gap:9px}.battle-toolbar span:first-child{margin-right:auto}.battle-toolbar button{font-size:9px}
@media(max-width:750px){.attacks{grid-template-columns:repeat(3,48px);gap:5px}.attacks button,.attacks button[data-key]{width:48px;height:48px;font-size:18px}.attacks small{font-size:6px}.battle-toolbar span:nth-child(2){display:none}.move-buttons button{height:35px}.in-game #canvasWrap{width:100%}}
@media(max-height:550px) and (orientation:landscape){.attacks{grid-template-columns:repeat(3,43px);gap:4px}.attacks button,.attacks button[data-key]{width:43px;height:43px;font-size:17px}.attacks small{font-size:5px}#touchControls .move-buttons button{width:32px;height:32px;padding:2px}.move-buttons{gap:4px}.in-game #canvasWrap{width:min(100vw,calc((100svh - 30px)*16/9))}.battle-toolbar button{font-size:8px;padding:6px 8px}}
@media(min-width:751px) and (min-height:551px){.in-game #canvasWrap{width:min(100%,calc((100svh - 365px)*16/9))}}
/* Illustrated title screen */
#menu{background:#080c15;isolation:isolate;padding:60px 6.5% 85px}.hero-art{inset:0!important;background:#080c15 url('assets/menu-all-cast.jpg') center center/cover no-repeat!important;opacity:1!important;z-index:-2;animation:menu-arrive 1.2s ease-out both}.hero-art:after{background:linear-gradient(90deg,#070b14f5 0%,#070b14df 21%,#070b14a6 35%,#070b1422 57%,transparent 75%),linear-gradient(0deg,#070b14c9,transparent 50%)!important}.hero-copy{max-width:470px}.hero-copy .eyebrow{color:#ffdc96;font-size:9px;letter-spacing:2.5px}.hero-copy h1{font-size:clamp(65px,7.8vw,112px);line-height:.84;text-shadow:0 4px 30px #000b;margin:29px 0 20px}.hero-copy h1 em{color:#ffda83;background:linear-gradient(165deg,#fff1be 5%,#ffcf67 48%,#ce9143 85%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(3px 5px 0 #67451d);letter-spacing:-3px}.hero-copy .edition{font-size:13px;letter-spacing:8px;color:#fff1d6;margin:24px 0}.hero-copy .intro{font-size:12px;line-height:1.7;color:#c2c7d3;margin:24px 0}.menu-actions{max-width:322px;gap:8px}.menu-actions button{padding:17px 18px;background:linear-gradient(110deg,#101827e8,#17202cd9);border-color:#7a6c524d;backdrop-filter:blur(7px);font-size:11px}.menu-actions .primary{color:#211507;background:linear-gradient(110deg,#ffe6a8,#eebd62);border-color:#ffe7b6;box-shadow:0 4px 28px #e9b84b18}.menu-actions button:hover{border-color:#ffdc96;transform:translateX(3px)}.menu-secondary{display:flex;gap:21px;margin-top:14px}.menu-secondary .text-button{margin:0;padding:8px 0;font-size:8px;color:#eadac0;letter-spacing:1px}.hero-footer{left:6.5%;right:6.5%;color:#b9ad95;font-size:8px;letter-spacing:2px;padding-top:18px;border-top:1px solid #f0c47325;bottom:23px;gap:32px}@keyframes menu-arrive{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
/* The actual MP4 plays inline on iPhone, with a user gesture for audio. */
body.intro-playing{overflow:hidden}#introScreen{position:fixed;inset:0;z-index:9999;background:#05070d;display:grid;place-items:center;overflow:hidden;opacity:1;transition:opacity .28s ease;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#introScreen.intro-exit{opacity:0;pointer-events:none}.cinema-backdrop{position:absolute;inset:-30px;background:linear-gradient(#05070de6,#05070de0),url('assets/menu-all-cast.jpg') 65% center/cover;filter:blur(20px)}#introVideo{position:relative;width:100%;height:100%;object-fit:contain;display:block}.cinema-top,.cinema-bottom{position:absolute;left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:12px}.cinema-top{top:max(20px,env(safe-area-inset-top))}.cinema-top>span{font:900 18px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;color:#ffe0a3}.cinema-top b{display:block;font:7px Inter,Arial,sans-serif;letter-spacing:3px;margin-top:4px;color:#c2b8a5}.cinema-top button,.cinema-bottom button{background:#0a101cc4;border:1px solid #f9d9954d;border-radius:3px;color:#ffe7b8;font-size:8px;padding:11px 13px;backdrop-filter:blur(8px);touch-action:manipulation}.cinema-bottom{bottom:max(24px,env(safe-area-inset-bottom))}.cinema-bottom>span{font-size:8px;letter-spacing:3px;color:#d4c5a7}.cinema-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff15}.cinema-progress span{height:100%;display:block;width:0;background:#f4ca78;transition:width .25s linear}#playIntro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:180px;box-shadow:0 0 60px #000c}
@media(max-width:750px) and (orientation:portrait){#menu{padding:37px 7% 95px}.hero-art{background-position:62% center!important}.hero-art:after{background:linear-gradient(90deg,#070b14e0,#070b14a0 48%,#070b1455),linear-gradient(0deg,#070b14e6,transparent 80%)!important}.hero-copy{max-width:360px}.hero-copy h1{font-size:clamp(48px,15.8vw,70px);margin:30px 0 20px}.hero-copy .eyebrow{font-size:7px;letter-spacing:1.2px}.hero-copy .edition{font-size:10px;letter-spacing:5px;margin:20px 0}.hero-copy .intro{font-size:11px;margin:24px 0}.menu-actions{max-width:100%}.hero-footer{font-size:6px;gap:15px;letter-spacing:1px}.menu-secondary{gap:20px}.cinema-top,.cinema-bottom{left:15px;right:15px}.cinema-bottom>span{display:none}.cinema-top>span{font-size:15px}.cinema-top button,.cinema-bottom button{font-size:7px;padding:11px 10px}}
@media(max-height:550px) and (orientation:landscape){#menu{padding:21px 6% 40px;min-height:calc(100svh - 42px)}.hero-copy{display:block;max-width:290px}.hero-copy .eyebrow{font-size:6px;letter-spacing:1px}.hero-copy h1{font-size:48px;margin:15px 0 10px;line-height:.83}.hero-copy .edition{font-size:8px;letter-spacing:5px;margin:15px 0 13px}.hero-copy .intro{display:none}.hero-copy .menu-actions{display:grid;max-width:240px;gap:5px;margin:0}.hero-copy .menu-actions button{padding:9px 12px;font-size:8px}.hero-copy .menu-actions span{font-size:7px}.menu-secondary{margin-top:7px;gap:18px}.menu-secondary .text-button{font-size:6px;padding:3px 0}.hero-footer{font-size:6px;bottom:10px;padding-top:8px}.hero-art{background-position:65% center!important}.hero-art:after{background:linear-gradient(90deg,#070b14f0,#070b14d0 25%,#070b1455 44%,transparent 65%)!important}.cinema-top{top:12px}.cinema-bottom{bottom:14px}.cinema-top>span{font-size:13px}.cinema-top button,.cinema-bottom button{padding:8px 10px;font-size:7px}.cinema-bottom>span{font-size:6px;letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){.hero-art{animation:none}#introScreen{transition:none}.menu-actions button{transform:none!important}}

@media(max-height:550px) and (orientation:landscape){.hero-art{background-position:right top!important}}
/* Cinematic roster: opposing full-body previews above a ten-fighter dock. */
#select{max-width:1500px;padding:22px 4% 24px;min-height:calc(100svh - 76px);--pick-color:#9cddff}#select .section-title{margin-bottom:8px}#select .section-title h2{font-size:34px;letter-spacing:1px}#select .section-title .eyebrow{font-size:9px;margin:0}.duel-stage{position:relative;display:grid;grid-template-columns:1fr 110px 1fr;min-height:360px;isolation:isolate;border-bottom:1px solid #e4c08440;overflow:hidden}.select-backdrop{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#080e1b 1%,#0b122375 65%,#0b1223bb),url('assets/stage-0.png') center 40%/cover;filter:saturate(.65)}.preview-panel{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;min-width:0}.preview-panel:before{content:'';position:absolute;inset:25% 8% 18%;z-index:-1;background:radial-gradient(ellipse,#a1d5ff15,transparent 65%)}#previewRight:before{background:radial-gradient(ellipse,#ffc36e20,transparent 65%)}.preview-role{position:absolute;left:0;right:0;top:7px;z-index:2;color:#9babc2;font-size:8px;letter-spacing:3px;margin:0}.active-preview .preview-role{color:var(--pick-color)}.selection-canvas-wrap{position:relative;width:100%;height:280px;margin-top:8px;display:flex;align-items:center;justify-content:center}.selection-canvas-wrap canvas{height:100%;width:auto;max-width:100%;object-fit:contain;background:transparent}.preview-loading{position:absolute;top:45%;font-size:10px;color:#baa887}.preview-caption{margin-top:-10px;position:relative;z-index:1;width:100%}.preview-caption h3{font-size:36px;line-height:1;margin:4px 0;text-shadow:0 4px 15px #000}.preview-caption p:first-child{font-size:8px;letter-spacing:2px;color:#e4c99d;text-transform:uppercase;margin:0}.preview-caption p:last-child{font-size:8px;color:#aab4c5;line-height:1.5;margin:6px 4px}.team-slots{display:flex;justify-content:center;gap:7px;margin:9px 0 12px;width:100%;padding:0 10px}.team-seat{display:flex;align-items:center;gap:7px;padding:4px 8px;min-width:130px;max-width:46%;min-height:45px;text-align:left;background:#111b2abb;border:1px solid #697a993b;letter-spacing:0;cursor:pointer}.team-seat:disabled{cursor:default;opacity:1;color:#7f8ba0}.team-seat.picking{border-color:var(--pick-color);box-shadow:0 0 18px #ffc67412}.team-seat b{font-size:9px;display:block;white-space:nowrap}.team-seat small{font-size:6px;letter-spacing:1px;color:#b1bdd1;display:block;margin-bottom:4px}.seat-face{width:30px;height:35px;flex:none;background-position:center top;background-size:cover}.seat-placeholder{width:30px;flex:none;text-align:center;color:#a0abc0;font-size:22px}.versus-mark{align-self:center;text-align:center;transform:translateY(-35px)}.versus-mark span{font-size:8px;letter-spacing:2px;color:#dfc89a;display:block}.versus-mark b{font:900 italic 65px 'Barlow Condensed',Impact,sans-serif;color:#ffe0a1;text-shadow:0 0 30px #e5b76c44;display:block}.versus-mark small{font-size:6px;letter-spacing:2px;color:#8c9ab1}.roster-dock{padding-top:7px}.roster-dock>p{font-size:10px;color:#acb5c6;text-align:center;margin:5px 0 10px}#roster{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;max-width:1200px;margin:0 auto}.card{border:1px solid #53617b66;border-radius:2px;position:relative;transition:border-color .15s,transform .15s}.card.selected{border-color:var(--pick-color);box-shadow:0 0 18px #b8ddff25;transform:translateY(-3px)}.card .portrait{height:92px;background-size:cover;background-position:center 15%}.card b{font-size:8px;padding:8px 3px;text-align:center;white-space:nowrap}.card.selected b{background:var(--pick-color);color:#0b1220}.card.taken{opacity:.36;cursor:not-allowed}.roster-seat-label{position:absolute;left:4px;top:4px;padding:2px 3px;color:#ffe0aa;background:#08101cbb;font-size:6px;letter-spacing:.3px}.roster-seat-label:empty{display:none}.selection-bottom{display:flex;align-items:end;gap:20px;max-width:1000px;margin:17px auto 0}.selection-bottom .match-options{margin:0;flex:1;gap:12px}.selection-bottom label{font-size:7px}.selection-bottom select{margin-top:5px;padding:9px;font-size:10px}.selection-bottom>.primary{min-width:300px;max-width:44%;height:36px;font-size:9px}.attacks button[data-key=tag]{grid-area:3/3;color:#b4e9ff;border-color:#9ccfff99}.attacks button[data-key=tag].unavailable{opacity:.4}
@media(max-width:750px) and (orientation:portrait){#select{padding:18px 4% 24px;min-height:calc(100svh - 60px)}#select .section-title h2{font-size:25px}#select .section-title button{padding:9px;font-size:8px}#select .section-title .eyebrow{font-size:6px;letter-spacing:1px}.duel-stage{grid-template-columns:1fr 35px 1fr;min-height:270px}.selection-canvas-wrap{height:190px;margin-top:16px}.preview-role{font-size:6px;letter-spacing:1px}.preview-caption{margin-top:-4px}.preview-caption h3{font-size:24px}.preview-caption p:first-child{font-size:6px;letter-spacing:.4px}.preview-caption p:last-child{font-size:6px;min-height:20px}.versus-mark{transform:translateY(-45px)}.versus-mark b{font-size:33px}.versus-mark span{font-size:5px;letter-spacing:.5px}.versus-mark small{display:none}.team-slots{padding:0;gap:3px;margin-top:5px}.team-seat{min-width:0;max-width:none;flex:1;padding:4px 3px;gap:3px;min-height:36px}.team-seat b{font-size:6px;max-width:58px;overflow:hidden;text-overflow:ellipsis}.team-seat small{font-size:5px;letter-spacing:.3px}.seat-face{width:20px;height:27px}.seat-placeholder{width:15px;font-size:17px}.roster-dock>p{font-size:8px;line-height:1.5;min-height:22px}#roster{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.card .portrait{height:72px}.card b{font-size:6px;padding:6px 2px}.roster-seat-label{font-size:5px;left:2px;top:2px;padding:2px}.selection-bottom{display:block;margin-top:13px}.selection-bottom .match-options{gap:8px}.selection-bottom>.primary{margin-top:12px;width:100%;max-width:100%;min-width:0;height:40px}.selection-bottom select{padding:9px 6px;font-size:9px}}
@media(max-height:550px) and (orientation:landscape){#select{padding:9px 3% 12px;min-height:calc(100svh - 42px)}#select .section-title{margin-bottom:1px}#select .section-title h2{font-size:22px;margin:5px 0}#select .section-title .eyebrow{font-size:6px;letter-spacing:1px}#select .section-title button{padding:7px;font-size:7px}.duel-stage{grid-template-columns:1fr 70px 1fr;min-height:150px;height:153px}.selection-canvas-wrap{height:120px;margin-top:0}.preview-role{top:1px;font-size:5px;letter-spacing:1px}.preview-caption{position:absolute;top:72px;left:12%;right:12%;width:auto}.preview-caption h3{font-size:23px;margin:4px 0}.preview-caption p:first-child{font-size:5px;letter-spacing:1px}.preview-caption p:last-child{display:none}.team-slots{position:absolute;bottom:0;margin:0 0 3px;padding:0 14%;gap:5px}.team-seat{min-width:90px;min-height:28px;padding:3px 5px;gap:5px}.team-seat b{font-size:6px}.team-seat small{font-size:4px;margin-bottom:2px}.seat-face{width:18px;height:23px}.seat-placeholder{width:18px;font-size:16px}.versus-mark{transform:translateY(-12px)}.versus-mark b{font-size:38px}.versus-mark span{font-size:5px;letter-spacing:1px}.versus-mark small{display:none}.roster-dock{padding-top:2px}.roster-dock>p{font-size:6px;margin:3px 0 5px}#roster{gap:4px;grid-template-columns:repeat(10,minmax(0,1fr))}.card .portrait{height:52px}.card b{font-size:5px;padding:4px 2px}.roster-seat-label{font-size:4px;top:2px;left:2px;padding:1px}.selection-bottom{margin-top:8px;gap:12px;align-items:end}.selection-bottom .match-options{gap:8px}.selection-bottom label{font-size:5px;letter-spacing:1px}.selection-bottom select{padding:5px 8px;font-size:7px;margin-top:3px}.selection-bottom>.primary{height:27px;min-width:240px;font-size:7px}.hero-copy h1{font-size:42px!important;margin:11px 0 7px!important}.hero-copy .edition{font-size:7px!important;margin:11px 0 10px!important}.hero-copy .menu-actions button{padding:7px 12px!important}.menu-secondary{margin-top:5px!important}}
/* Keep the entire cast visible on wide title screens. */
.hero-art{background-size:contain!important;background-color:#080c15!important;background-position:right center!important}
@media(max-width:750px) and (orientation:portrait){.hero-art{background-size:cover!important;background-position:62% center!important}}
@media(min-width:751px) and (min-height:551px){.selection-canvas-wrap{height:clamp(260px,35svh,340px)}}
@media(max-height:550px) and (orientation:landscape){#select .section-title .eyebrow{font-size:7px}.preview-role{font-size:6px}.team-seat b{font-size:8px}.team-seat small{font-size:5px}.roster-dock>p{font-size:8px}.card b{font-size:7px;padding:3px 2px}.selection-bottom label{font-size:6px}.selection-bottom select{font-size:9px;padding:4px 8px}.selection-bottom>.primary{font-size:8px}}
@media(max-height:550px) and (orientation:landscape){#select{padding-top:6px}.duel-stage{height:167px;min-height:167px}.selection-canvas-wrap{height:100px;margin-top:3px}.preview-caption{top:105px}.preview-caption p:first-child{display:none}.preview-caption h3{font-size:22px;margin:0;line-height:1}.team-slots{bottom:0}}
@media(max-width:750px) and (orientation:portrait){#menu{padding-top:230px;padding-bottom:65px}.hero-art{background-size:100% auto!important;background-position:right top!important;background-repeat:no-repeat!important}.hero-art:after{background:linear-gradient(180deg,transparent 180px,#080c15 235px)!important}.hero-copy .eyebrow{margin:0;font-size:7px}.hero-copy h1{font-size:50px;margin:18px 0 14px}.hero-copy .edition{font-size:9px;margin:14px 0 18px}.hero-copy .intro{display:none}.menu-actions button{padding:13px 17px}.menu-secondary{margin-top:10px}.hero-footer{bottom:18px}}
/* Screen-filling arena: preserve the complete combat camera and sprite proportions. */
body.in-game{height:100dvh;overflow:hidden}.in-game header,.in-game .keyboard{display:none}.in-game #battle{position:fixed;inset:0;height:100dvh;width:100vw}.in-game #canvasWrap{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0;overflow:hidden}.in-game #game{width:100%;height:100%;background:#080d16}.in-game .battle-toolbar{position:absolute;z-index:5;top:0;left:0;right:0;height:30px;padding:2px max(12px,env(safe-area-inset-right)) 2px max(12px,env(safe-area-inset-left));background:linear-gradient(#080d16bd,transparent);pointer-events:none}.battle-toolbar button{pointer-events:auto}.in-game .battle-toolbar span:nth-child(2){display:none}.in-game .battle-toolbar button{padding:5px 9px;font-size:8px}.in-game #touchControls{position:absolute;inset:auto 0 max(12px,env(safe-area-inset-bottom));padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));max-width:none;margin:0;pointer-events:none;align-items:end;z-index:4}.in-game #touchControls button,.in-game #joystick{pointer-events:auto}.in-game #overlay{position:fixed;inset:0;z-index:10}.in-game.pad-active #touchControls{display:none}.menu-secondary{flex-wrap:wrap;gap:8px 18px}.menu-secondary .text-button{font-size:8px;margin-top:3px}.menu-actions{gap:6px}.menu-actions button{padding:12px 16px}#localControls{display:flex;align-items:center;gap:20px;margin:8px auto;max-width:1000px}#localControls label{max-width:320px}#localControls select{padding:7px;margin-top:3px}#localControls p,[data-pad-status]{font-size:10px;color:#9ed6ba;line-height:1.5}.pad-guide{width:100%;border-collapse:collapse;font-size:12px}.pad-guide th,.pad-guide td{padding:9px 6px;border-bottom:1px solid #ffffff18;text-align:left}.pad-guide th{color:var(--gold);font-size:9px}#controllersDialog{max-width:650px;max-height:90dvh;overflow:auto}#controllersDialog p{font-size:12px;line-height:1.7}#characters{padding:28px 5%;max-width:1600px;margin:auto}#characterRoster{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-bottom:24px}#characterRoster button{padding:0;overflow:hidden;letter-spacing:0;border-color:#344159;background:#111a29}#characterRoster button.selected{border-color:var(--fighter);box-shadow:0 0 20px color-mix(in srgb,var(--fighter),transparent 85%)}.gallery-face{display:block;height:105px;background-size:cover;background-position:center top}#characterRoster b{font-size:10px;display:block;padding:9px 2px}#characterDetail{display:grid;grid-template-columns:1fr 1.2fr;border:1px solid #ffffff20;background:radial-gradient(ellipse at 15% 30%,#28334c,#0a111e 60%)}.character-stage{text-align:center;padding:30px;position:relative;background:linear-gradient(#0b1528b0,#0c1223ef),url('assets/stage-0.png') center/cover}.character-stage h2{font-size:56px;color:var(--fighter);margin:10px 0}.character-stage>p{font-size:11px;color:#b7c8dd}.character-stage canvas{background:transparent;max-width:500px;margin:auto;aspect-ratio:500/440}.character-stage button{margin:20px auto}.character-moves{padding:30px}.skill-card{display:flex;align-items:start;text-align:left;gap:14px;width:100%;margin:12px 0;padding:16px;background:#101b2c;border:1px solid #293c55;letter-spacing:0}.skill-card.selected{border-color:var(--fighter);background:#1b283b}.skill-number{font:800 30px 'Barlow Condensed',Impact,sans-serif;color:var(--fighter)}.skill-card b{font-size:15px}.skill-card p{font-size:12px;line-height:1.6;color:#b9c9db;font-weight:400;margin:8px 0}.skill-card small{font-size:8px;letter-spacing:1px;color:var(--fighter)}.character-moves h3{font-size:27px;margin-top:25px}.combo-note{font-size:11px;line-height:1.6;color:#a9b6ca}#characterCombos{display:grid;grid-template-columns:1fr 1fr;gap:8px}#characterCombos div{background:#0b1422;padding:12px;border-left:2px solid var(--fighter)}#characterCombos b,#characterCombos span{display:block;font-size:11px}#characterCombos span{font-size:10px;color:#a9bfd4;margin-top:7px;line-height:1.5}
@media(max-width:750px){#characterRoster{grid-template-columns:repeat(5,1fr);gap:5px}.gallery-face{height:70px}#characterRoster b{font-size:7px}#characterDetail{grid-template-columns:1fr}.character-stage{padding:18px}.character-stage h2{font-size:40px}.character-stage canvas{max-width:320px}.character-moves{padding:18px}#characters{padding:18px 4%}.in-game .battle-toolbar{font-size:7px}.in-game .battle-toolbar span{letter-spacing:1px}#localControls{gap:10px}#localControls p{font-size:8px}}
@media(max-height:550px) and (orientation:landscape){.hero-copy .menu-actions{grid-template-columns:1fr 1fr;max-width:460px;width:460px}.hero-copy .menu-actions button{font-size:7px!important;padding:8px!important;min-height:36px}.hero-copy .menu-actions span{font-size:6px}.hero-copy{max-width:470px}.menu-secondary{max-width:460px}.menu-secondary .text-button{font-size:7px!important}#select:has(#localControls:not(.hidden)) .duel-stage{height:133px;min-height:133px}#select:has(#localControls:not(.hidden)) .selection-canvas-wrap{height:78px}#select:has(#localControls:not(.hidden)) .preview-caption{top:81px}#localControls{margin:3px auto;gap:10px}#localControls select{font-size:8px;padding:4px}#localControls label{font-size:6px}#localControls p{font-size:7px;margin:0}}
@media(max-height:550px) and (orientation:landscape){#select:has(#localControls:not(.hidden)){padding-bottom:3px}#select:has(#localControls:not(.hidden)) .duel-stage{height:115px;min-height:115px}#select:has(#localControls:not(.hidden)) .selection-canvas-wrap{height:63px}#select:has(#localControls:not(.hidden)) .preview-caption{top:65px}}
@media(max-width:750px) and (orientation:portrait){.menu-actions{grid-template-columns:1fr 1fr}.menu-actions button{font-size:8px;padding:12px 9px;display:block;min-height:52px}.menu-actions span{display:block;font-size:7px;margin-top:5px}.menu-secondary .text-button{font-size:7px}.hero-footer{font-size:5px;gap:10px}}

.card .portrait,.gallery-face{background-size:contain;background-repeat:no-repeat;background-color:#0b0c13;background-position:center}#characterSkills{display:grid;grid-template-columns:1fr 1fr;gap:9px}.skill-card{min-height:110px}.character-stage{align-self:start}.attacks button[data-key=light]{grid-area:1/1}.attacks button[data-key=heavy]{grid-area:1/2}.attacks button[data-key=bank]{grid-area:1/3;color:#ffe1a1}.attacks button[data-key=block]{grid-area:2/1}.attacks button[data-key=kick]{grid-area:2/2}.attacks button[data-key=special]{grid-area:2/3}.attacks button[data-key=special2]{grid-area:3/1}.attacks button[data-key=special3]{grid-area:3/2}.attacks button[data-key=tag]{grid-area:3/3}@media(max-width:600px){#characterSkills{grid-template-columns:1fr}}

/* Locked application shell: only content panels scroll, never the page or arena. */
html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app{width:var(--game-width,100vw);height:var(--game-height,100dvh);overflow:hidden;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
header{flex:0 0 58px;height:58px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.screen:not(.hidden){flex:1;min-height:0;max-height:100%;width:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#menu{min-height:0;padding-top:clamp(15px,4vh,45px);padding-bottom:45px}#select,#characters{min-height:0;margin:0 auto}
.in-game #app{padding:0}.in-game #battle,.in-game #canvasWrap{width:var(--game-width,100vw);height:var(--game-height,100dvh);overflow:hidden}.in-game #battle{touch-action:none}
.card .portrait,.gallery-face,.seat-face{background-color:transparent}
#fullscreenHelp{max-width:420px}#fullscreenHelp p{line-height:1.65}
@media(max-height:750px){#menu .hero-copy h1{font-size:clamp(40px,9vh,80px);margin:12px 0}#menu .edition{margin:12px 0;font-size:10px}#menu .intro{display:none}#menu .menu-actions{grid-template-columns:1fr 1fr;max-width:460px}#menu .menu-actions button{min-height:44px;font-size:9px}#menu .menu-actions span{font-size:7px}#menu .hero-footer{bottom:10px}}
@media(max-width:750px) and (orientation:portrait){#menu{padding-top:clamp(110px,25vh,210px)}#menu .hero-copy h1{font-size:clamp(38px,7vh,64px)}#menu .hero-art:after{background:linear-gradient(180deg,transparent 80px,#080c15 210px)!important}#menu .hero-footer{display:none}}
@media(max-height:500px) and (orientation:landscape){header{height:42px;flex-basis:42px}header button{padding:7px 10px;font-size:8px}#menu{padding-top:8px;padding-bottom:10px}#menu .hero-copy h1{font-size:42px;margin:6px 0}#menu .edition{margin:6px 0}#menu .hero-copy .eyebrow,#menu .hero-footer{display:none}#menu .menu-actions button{min-height:30px;padding:7px!important}#menu .menu-secondary{margin-top:2px}#menu .menu-secondary button{margin:0}}

/* Fifteen fighters: three equal rows, with all original IDs retained. */
#characterRoster{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}#characterRoster button{display:flex;align-items:center;min-height:62px}#characterRoster .gallery-face{width:62px;height:62px;flex:0 0 62px}#characterRoster b{padding:8px;font-size:11px}.roster-dock #roster{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:750px){#characterRoster button{display:block;min-height:0}#characterRoster .gallery-face{width:100%;height:56px}#characterRoster b{font-size:8px;padding:5px 0}}
@media(max-height:550px) and (orientation:landscape){#select .duel-stage{height:130px;min-height:130px}#select .selection-canvas-wrap{height:70px}#select .preview-caption{top:74px}#select .card .portrait{height:36px}#select #roster{gap:4px}.selection-bottom .match-options{margin:5px 0}#select .section-title{margin-bottom:6px}}
/* V15: a complete 16:9 combat viewport, letterboxed rather than cropped. */
.in-game #canvasWrap{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(var(--game-width,100vw),calc(var(--game-height,100dvh) * 16 / 9));height:auto;aspect-ratio:16/9;max-width:100%;max-height:100%;background:#050911}
.in-game #game{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain}.in-game #battle{background:#050911}
button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #ffe1a1;outline-offset:3px;box-shadow:0 0 20px #e6c27645}
.attacks button[data-key=breaker]{grid-area:4/2;color:#ffe8aa;border-color:#e4c97b80}.attacks button[data-key=tag]{border-color:#7dccebb0;color:#bdedff}
/* Full-body previews dominate the selection stage; compact square portraits below. */
#select{padding:18px 4% 22px;max-width:1600px;background:radial-gradient(ellipse at 50% 15%,#283145,#080d17 65%)}
#select .section-title{margin-bottom:8px}#select .section-title h2{font-size:30px;margin:4px 0}#select .section-title .eyebrow{font-size:8px;margin:0}
#select .duel-stage{height:clamp(300px,46vh,500px);min-height:300px;grid-template-columns:1fr 90px 1fr;background:linear-gradient(0deg,#111d2d,transparent);border:1px solid #b5cae51a;border-radius:8px}
#select .preview-panel{position:relative;min-height:0;padding:0;overflow:hidden}
#select .selection-canvas-wrap{height:calc(100% - 52px);margin:0;position:absolute;inset:0 0 52px;display:flex;justify-content:center}
#select .selection-canvas-wrap canvas{height:100%;width:auto;max-width:100%;object-fit:contain}
#select .preview-role{top:10px;left:14px;font-size:8px;z-index:2;letter-spacing:2px}
#select .preview-caption{position:absolute;top:auto;bottom:49px;left:14px;right:auto;width:auto;text-align:left;pointer-events:none;text-shadow:0 2px 8px #000}
#select .preview-caption h3{font-size:clamp(22px,3vw,42px);margin:0;line-height:1}#select .preview-caption p{display:none}
#select .team-slots{position:absolute;bottom:5px;left:0;right:0;padding:0 12px;margin:0;justify-content:center;gap:8px}
#select .team-seat{min-height:35px;min-width:105px;padding:4px 7px}.team-seat .seat-face{width:27px;height:27px}.team-seat b{font-size:9px}.team-seat small{font-size:6px}
#select .versus-mark{transform:none}#select .versus-mark b{font-size:44px}#select .versus-mark span{font-size:7px}#select .versus-mark small{font-size:7px}
#select .roster-dock{padding-top:8px}#select .roster-dock>p{font-size:10px;margin:3px 0 8px;text-align:center}
#select #roster{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:6px;width:100%;margin:auto}
#select .card{position:relative;padding:0;aspect-ratio:1;min-width:0;border:1px solid #526078;background:linear-gradient(135deg,#23314a,#0a1020);overflow:hidden;border-radius:4px}
#select .card .portrait{position:absolute;inset:0;height:auto;background-size:contain;background-position:center bottom}
#select .card b{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#020611ed);padding:14px 1px 4px;font-size:clamp(5px,.7vw,10px);line-height:1}
#select .card.selected{border:2px solid #ffe3a2;box-shadow:0 0 20px #eac46b44;transform:translateY(-3px)}
#select .roster-seat-label{font-size:6px;top:2px;left:2px}
#select .selection-bottom{margin-top:12px;gap:16px}#select .selection-bottom .match-options{margin:0;gap:12px}#select .selection-bottom select{font-size:11px;padding:8px;min-width:135px}#select .selection-bottom>.primary{min-width:220px;height:40px;font-size:10px}#select #localControls{margin:6px auto}
#characterRoster{grid-template-columns:repeat(15,minmax(0,1fr))}#characterRoster button{position:relative;display:block;aspect-ratio:1;min-height:0}#characterRoster .gallery-face{position:absolute;inset:0;width:100%;height:100%}#characterRoster b{position:absolute;bottom:0;left:0;right:0;padding:14px 0 4px;font-size:8px;background:linear-gradient(transparent,#060a15)}
@media(max-width:800px){#select #roster,#characterRoster{grid-template-columns:repeat(5,minmax(0,1fr));max-width:440px}#select .duel-stage{height:340px;min-height:340px;grid-template-columns:1fr 38px 1fr}#select .preview-caption h3{font-size:22px}#select .versus-mark b{font-size:28px}#select .versus-mark span,#select .versus-mark small{display:none}#select .selection-bottom{flex-wrap:wrap}#select .card b{font-size:8px}#select .preview-role{font-size:6px;letter-spacing:0}#select .selection-bottom>.primary{width:100%}}
@media(max-height:550px) and (orientation:landscape){#select{padding:7px 3% 12px}#select .section-title h2{font-size:20px}#select .section-title .eyebrow{display:none}#select .section-title button{padding:6px 9px}#select .duel-stage,#select:has(#localControls:not(.hidden)) .duel-stage{height:230px;min-height:230px;grid-template-columns:1fr 60px 1fr}#select .selection-canvas-wrap,#select:has(#localControls:not(.hidden)) .selection-canvas-wrap{height:190px;inset:0 0 40px;margin:0}#select .preview-caption,#select:has(#localControls:not(.hidden)) .preview-caption{top:auto;bottom:40px}#select .preview-caption h3{font-size:23px}#select #roster{grid-template-columns:repeat(15,minmax(0,1fr));max-width:none;gap:4px}#select .card .portrait{height:auto}#select .card b{font-size:6px}#select .roster-dock>p{font-size:8px}#select .team-seat{min-height:28px;min-width:85px}#select .team-seat b{font-size:7px}#select .team-seat small{font-size:5px}#select .selection-bottom{flex-wrap:nowrap}#select .selection-bottom select{min-width:110px;font-size:9px;padding:6px}#select .selection-bottom>.primary{width:auto;min-width:200px;height:33px;font-size:8px}.in-game .attacks{gap:4px}.in-game .attacks button{width:43px;height:43px;min-width:0;padding:3px;font-size:15px}.in-game .attacks small{font-size:5px}}