:root{--bg:#0d1220;--panel:#151c2f;--panel2:#1c2540;--line:#2d3a61;--text:#ecf1ff;--muted:#a8b4d6;--gold:#ffd166;--accent:#65d8ff;--p2:#ff94bd;--good:#8cff9c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#1a2340 0,#0d1220 55%,#090d18 100%);color:var(--text)}button,input,select{font:inherit;color:inherit}button,a,input,select{border-radius:8px}button{cursor:pointer;border:1px solid var(--line);background:#17213a;padding:.65rem .85rem}button:hover,a:hover{filter:brightness(1.13)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}a{color:#9bdcff;text-decoration:none}[hidden]{display:none!important}.app{width:min(1440px,100%);margin:auto;padding:18px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 18px;border-bottom:1px solid var(--line)}.brand h1{margin:0;font-size:clamp(1.3rem,2.5vw,2rem)}.brand p{margin:.35rem 0 0;color:var(--muted);font-size:.85rem}.pill{display:inline-flex;align-items:center;border:1px solid var(--line);background:#111a2d;padding:.42rem .65rem;border-radius:999px;font-size:.78rem}.topActions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.screen{display:none}.screen.active{display:block}.selectLayout{display:grid;grid-template-columns:minmax(210px,1fr) minmax(500px,2.4fr) minmax(210px,1fr);gap:16px;padding-top:18px;align-items:start}.panel{min-width:0;background:linear-gradient(180deg,var(--panel),#101729);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 16px 40px #0004}.previewCard{position:sticky;top:12px}.slotHead{width:100%;display:flex;justify-content:flex-start;gap:8px;align-items:center;margin-bottom:10px;text-align:left}.slotHead b{background:var(--accent);color:#07101a;padding:.25rem .45rem;border-radius:5px}.previewCard:last-child .slotHead b{background:var(--p2)}.activeSlot{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 16px 40px #0004}.previewCanvas{width:100%;height:auto;aspect-ratio:14/13;background:#0f1628;border:1px solid var(--line);border-radius:10px;image-rendering:pixelated}.playerName{font-size:1.25rem;font-weight:800;margin-top:10px}.playerStyle,.sub,.note,.tiny,.small{color:var(--muted);font-size:.8rem}.statRow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.stat{font-size:.7rem;border:1px solid var(--line);padding:.3rem .4rem;border-radius:5px}.playerMeta,.rosterControls,.modeRow,.matchToolbar,.hudName,.labControls{display:flex;align-items:center;justify-content:space-between;gap:10px}.rosterControls{justify-content:flex-end;flex-wrap:wrap}.rosterControls label{font-size:.72rem;color:var(--muted)}input,select{background:#0f172a;border:1px solid var(--line);padding:.6rem}.rosterGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}.card{position:relative;min-width:0;padding:5px;text-align:left;background:#10182a}.card canvas{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated}.card .label{font-size:.72rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.card .tiny{font-size:.6rem}.card.selected1{box-shadow:inset 0 0 0 2px var(--accent)}.card.selected2{box-shadow:inset 0 0 0 2px var(--p2)}.card.selected1.selected2{border-left:3px solid var(--accent);border-right:3px solid var(--p2)}.assignTag{position:absolute;top:6px;right:6px;background:var(--gold);color:#111827;font-weight:800;font-size:.65rem;padding:.18rem .3rem;border-radius:4px}.controlsBlock{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.stageGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.stageCard{min-width:0;padding:0;overflow:hidden;text-align:left}.stageCard.active{outline:2px solid var(--gold);outline-offset:-2px}.stageThumb,.randomStage{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#202a45}.randomStage{display:grid;place-items:center;color:var(--gold);font-size:1.8rem}.stageInfo{padding:7px}.stageInfo strong,.stageInfo span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.67rem}.stageInfo span{color:var(--muted);font-size:.58rem}.stageMissing:after{content:'FALLBACK · RETRY';position:absolute;inset:0 auto auto 0;background:#551b28;color:#ffd3db;padding:3px;font-size:.55rem}.stageCard{position:relative}.modeRow{justify-content:flex-start;flex-wrap:wrap}.modeRow label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.76rem}.primary{background:linear-gradient(#ffe08a,#ffc84c);color:#151515;border-color:#ffe49c;font-weight:900;min-height:44px}.ghost{background:#101729}.secondary{background:#1e2a47}.empty{border:1px dashed var(--line);padding:16px;text-align:center}.fatal{margin:12px auto;max-width:900px;padding:14px;background:#411822;border:1px solid #ab4c63}.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.skipLink{position:fixed;z-index:100;top:8px;left:8px;transform:translateY(-150%);background:var(--gold);color:#111827;padding:9px}.skipLink:focus{transform:none}.matchToolbar{padding:10px 0}.gameWrap{position:relative;max-width:1200px;margin:auto;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#080d18}.gameWrap>canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated}.hud{position:absolute;z-index:2;inset:0 0 auto;display:grid;grid-template-columns:1fr 90px 1fr;gap:18px;padding:18px 22px;background:linear-gradient(#070b16ef,transparent);pointer-events:none}.hudPlayer.p2{text-align:right}.hudName{font-weight:800;font-size:.88rem}.health{height:18px;border:1px solid #dbe6ff;background:#3e2532;padding:2px;margin-top:7px}.health span{display:block;height:100%;background:var(--accent)}.p2 .health span{background:var(--p2);margin-left:auto}.meter{height:6px;background:#35415d;margin-top:7px}.meter span{display:block;height:100%;background:var(--gold)}.clock{text-align:center}.clock small{display:block;font-size:.65rem}.clock strong{font-size:2rem;color:var(--gold)}.arenaOverlay{position:absolute;z-index:5;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;background:#050914e8;backdrop-filter:blur(3px)}.arenaOverlay h2{font-size:clamp(2rem,5vw,4rem);margin:0}.trainingHint{position:absolute;z-index:2;bottom:8px;left:50%;transform:translateX(-50%);background:#08101edc;border:1px solid var(--gold);color:var(--gold);padding:6px 9px;margin:0;font-size:.7rem}.touchControls{display:none;max-width:1200px;margin:8px auto 0;gap:8px;justify-content:space-between;user-select:none}.touchGroup{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:5px;flex:1}.touchControls button{min-height:46px;touch-action:none;font-weight:800}.touchControls button.active{background:var(--gold);color:#111827}dialog{width:min(760px,calc(100% - 28px));max-height:90vh;overflow:auto;border:1px solid var(--line);background:#111a2d;color:var(--text);border-radius:12px;padding:22px}dialog::backdrop{background:#050914dc}.dialogClose{float:right;font-size:1.4rem}.helpGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.helpGrid>div{border:1px solid var(--line);padding:10px}.labControls{justify-content:flex-start;flex-wrap:wrap;margin-bottom:10px}.labControls label{font-size:.75rem}#labCanvas{display:block;width:100%;height:auto;background:#080e1a;border:1px solid var(--line);image-rendering:pixelated}.reducedMotion *{animation:none!important;transition:none!important}
@media(max-width:1100px){.app{padding:14px}.selectLayout{grid-template-columns:minmax(160px,1fr) minmax(390px,2.4fr) minmax(160px,1fr);gap:10px}.rosterGrid{grid-template-columns:repeat(5,minmax(0,1fr))}.previewCard{padding:10px}.stageGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.selectLayout{grid-template-columns:1fr 1fr}.centerSelect{grid-column:1/-1;grid-row:2}.previewCard{position:static;display:grid;grid-template-columns:90px 1fr}.slotHead{grid-column:1/-1}.previewCanvas{width:90px;height:110px}.previewCard .note,.previewCard .statRow{display:none}.rosterGrid{grid-template-columns:repeat(5,minmax(0,1fr))}.topbar{align-items:flex-start;flex-wrap:wrap}.hud{padding:10px;gap:8px;grid-template-columns:1fr 58px 1fr}.clock strong{font-size:1.45rem}.helpGrid{grid-template-columns:1fr}}
@media(max-width:600px){.app{padding:9px}.selectLayout{gap:8px}.previewCard{display:block}.previewCanvas{width:100%;height:auto;max-height:130px}.playerName{font-size:.95rem}.playerStyle,.previewCard .note,.previewCard .statRow{display:none}.rosterGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.card .label{font-size:.62rem}.stageGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.playerMeta{align-items:flex-start;flex-wrap:wrap}.rosterControls{width:100%;justify-content:flex-start}.modeRow{align-items:stretch}.modeRow label{flex:1;min-width:130px}.modeRow .primary{width:100%}.matchToolbar{font-size:.72rem;gap:4px}.matchToolbar button{padding:.45rem}.hud{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);padding:6px 5px;gap:4px}.hudName{font-size:.58rem}.health{height:11px}.clock strong{font-size:1rem}.clock small{font-size:.48rem}.trainingHint{font-size:.55rem;max-width:90%;text-align:center}.topActions .pill:nth-child(2){display:none}}
@media(max-width:360px){.rosterGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.brand p{display:none}.topActions button,.topActions a{font-size:.65rem;padding:.4rem}.hud{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr)}}
@media(pointer:coarse),(hover:none){.touchControls{display:flex}}
@media(pointer:coarse) and (orientation:landscape){.app{padding:4px 7px}.topbar{display:none}.matchToolbar{padding:2px 0}.gameWrap,.gameWrap>canvas{max-height:calc(100vh - 102px)}.gameWrap>canvas{object-fit:contain}.touchControls{position:fixed;z-index:8;left:5px;right:5px;bottom:max(4px,env(safe-area-inset-bottom));pointer-events:none}.touchGroup{max-width:43%;pointer-events:auto}.touchControls button{min-height:40px;background:#101729df}}

/* Mobile/iPad combat pass: larger safe touch targets, iOS safe areas and landscape arena priority. */
html{overscroll-behavior:none}.touchDevice button,.touchDevice input,.touchDevice select{min-height:44px}.touchDevice .touchControls{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));padding-bottom:max(6px,env(safe-area-inset-bottom))}.touchDevice .touchControls button{-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none;border-width:2px;box-shadow:0 4px 12px #0007}.touchDevice .movementPad button:nth-child(-n+2){font-size:1.35rem}.touchDevice .actionPad button{font-size:.82rem}.mobileMatch{height:var(--app-vh,100dvh);overflow:hidden}.mobileMatch .app{height:100%;padding-bottom:0}.mobileMatch #matchScreen{height:100%;display:flex;flex-direction:column}.mobileMatch .gameWrap{flex:1;min-height:0}.mobileMatch .gameWrap>canvas{width:100%;height:100%;object-fit:contain;image-rendering:auto}.mobileMatch .touchControls{flex:0 0 auto}.mobileMatch .matchToolbar{flex:0 0 auto;padding-inline:max(4px,env(safe-area-inset-left)) max(4px,env(safe-area-inset-right))}
@media(pointer:coarse) and (orientation:portrait){.mobileMatch .gameWrap{flex:none;width:100%;aspect-ratio:16/9}.touchControls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.touchGroup{grid-template-columns:repeat(2,minmax(64px,1fr));gap:8px}.touchControls button{min-height:58px;border-radius:14px}.matchToolbar{padding:6px 0}.matchToolbar span{display:none}.hud{padding:7px 7px 0}.health{height:13px}.meter{height:7px}.clock strong{font-size:1.25rem}}
@media(pointer:coarse) and (orientation:landscape){body.mobileMatch{position:fixed;inset:0;width:100%;height:var(--app-vh,100dvh)}.mobileMatch .app{padding:0 max(5px,env(safe-area-inset-right)) 0 max(5px,env(safe-area-inset-left));max-width:none}.mobileMatch .matchToolbar{height:36px;padding:2px 4px}.mobileMatch .gameWrap{max-width:none;width:100%;border-radius:8px}.mobileMatch .gameWrap>canvas{max-height:none}.mobileMatch .touchControls{display:flex;position:absolute;z-index:9;inset:auto 0 max(2px,env(safe-area-inset-bottom));margin:0;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));pointer-events:none}.mobileMatch .touchGroup{display:grid;grid-template-columns:repeat(2,minmax(62px,84px));gap:7px;max-width:none;flex:0 0 auto;pointer-events:auto}.mobileMatch .actionPad{margin-left:auto}.mobileMatch .touchControls button{min-height:52px;border-radius:14px;background:#0d1629d9;backdrop-filter:blur(4px)}.mobileMatch .hud{padding:7px 10px;grid-template-columns:1fr 52px 1fr}.mobileMatch .health{height:13px}.mobileMatch .meter{height:7px}.mobileMatch .trainingHint{bottom:4px}.topbar{display:none}}
@media(min-width:768px) and (max-width:1180px) and (pointer:coarse){.selectLayout{grid-template-columns:minmax(150px,.8fr) minmax(430px,2.2fr) minmax(150px,.8fr)}.rosterGrid{grid-template-columns:repeat(5,minmax(0,1fr))}.card{padding:7px}.card .label{font-size:.74rem}.touchControls button{font-size:.92rem}.mobileMatch .hud{padding-inline:16px}}