.roster{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.fighter-card{min-height:350px;background:radial-gradient(ellipse at 50% 38%,#42645870,transparent 68%),#152b33}.fighter-card:nth-child(2){background:radial-gradient(ellipse at 50% 38%,#248d9380,transparent 68%),#132730}.fighter-card:nth-child(3){background:radial-gradient(ellipse at 50% 38%,#ad7c2e80,transparent 68%),#302820}.fighter-card:nth-child(4){background:radial-gradient(ellipse at 50% 38%,#91433380,transparent 68%),#28232c}.fighter-card:nth-child(5){background:radial-gradient(ellipse at 50% 38%,#3583b680,transparent 68%),#192a39}.card-art{background-image:var(--portrait);background-size:contain;background-position:center;background-repeat:no-repeat;inset:28px 5px 112px;filter:none;image-rendering:pixelated}.card-art:after{display:none}.fighter-card:hover .card-art,.fighter-card.chosen .card-art{filter:drop-shadow(0 0 13px #e2d29844)}.card-info h2{font-size:24px}.card-info p{font-size:12px}.winner-portrait{width:210px;height:240px;margin:auto;background-size:contain;background-position:center;background-repeat:no-repeat}.collection-banner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 22px;margin:0 0 18px;border:1px solid #b8a36c55;background:linear-gradient(110deg,#21434b70,#332b2470);border-radius:6px}.collection-banner strong{display:block;color:#f2d691;font-size:15px}.collection-banner p{font-size:13px;color:#afc6c8;margin:4px 0 0}.collection-banner span{font:11px monospace;letter-spacing:2px;color:#86cfc8;white-space:nowrap}.passive-strip{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}.passive-box{border:1px solid #3b5661;padding:10px 14px;border-radius:5px;background:#132731}.passive-box strong{font-size:12px;color:#e9d18b}.passive-box p{margin:4px 0;font-size:12px;color:#c9d6d9}.passive-track{height:4px;background:#091921;margin-top:8px}.passive-track i{display:block;height:100%;background:#8ddbd3;transition:width .08s}.hero-guide{font-size:12px;color:#aec7cc;line-height:1.8;border-left:2px solid #aa9259;padding:8px 16px;margin-top:12px}#fightCanvas{image-rendering:pixelated}#battle{width:min(100%,calc((100dvh - 280px)*1.77778));min-width:min(100%,620px);margin:0 auto}.cinematic .hud{opacity:.28;transition:opacity .3s}.cinematic #moveTitle{top:15%;background:#081923cc}.touch-attacks{flex-wrap:wrap;max-width:230px}.card-stats{display:none}
.cinematic .hud{opacity:0;pointer-events:none}.cinematic #moveTitle{display:none}
.fighter-card[data-fighter="2"] .card-art,.fighter-card[data-fighter="4"] .card-art{background-size:180% auto}
@media(max-width:900px){.select-showdown{height:290px;grid-template-columns:1fr 92px 1fr}.roster{gap:6px}.fighter-card,.fighter-card:last-child{grid-template-columns:45px 1fr;padding:6px}.fighter-card .card-art,.fighter-card:last-child .card-art{width:43px!important;height:65px}.fighter-card .card-info{padding-left:5px}.fighter-card .card-info h2{font-size:13px}.fighter-card .card-info p{font-size:8px}.selection-bottom{grid-template-columns:1fr}.fighter-brief{justify-content:space-between}.brief-moves{min-width:180px}}
@media(max-width:600px){#selection{padding-top:10px}.pick-bar{min-height:54px}.pick-hint{display:none}.side-switch{width:100%;justify-content:space-between;gap:6px}.side-switch button{gap:6px;padding:6px}.side-switch b{min-width:0;font-size:11px}.side-switch small{display:none}.vs-small{font-size:13px}.select-showdown{height:245px;grid-template-columns:1fr 52px 1fr;border-radius:5px}.showdown-fighter:before{width:40vw;height:40vw}.showdown-art{inset:0 -18px 8px;transform:scale(1);transform-origin:50% 75%}.player-one .showdown-art{transform:scaleX(-1)}.showdown-label{bottom:7px;left:5px;right:3px;padding:5px 6px}.player-two .showdown-label{left:3px;right:5px}.showdown-label small{font-size:7px;letter-spacing:1px}.showdown-label strong{font-size:18px}.showdown-label span{font-size:8px}.showdown-center span{font-size:6px;letter-spacing:1px}.showdown-center strong{font-size:46px}.roster{gap:4px;margin-top:7px}.fighter-card,.fighter-card:last-child{height:75px;min-height:75px!important;grid-template-columns:32px 1fr;padding:3px;border-radius:4px}.fighter-card .card-art,.fighter-card:last-child .card-art{width:31px!important;height:60px}.fighter-card .card-info{padding-left:3px}.fighter-card .card-info>small{font-size:5px;letter-spacing:0}.fighter-card .card-info h2{font-size:10px}.fighter-card .card-info p{display:none}.fighter-card .card-player{top:2px;right:2px}.fighter-card .card-player span{font-size:6px;padding:0 2px}.selection-bottom{margin-top:7px;padding:9px;gap:8px}.fighter-brief{gap:7px}.fighter-brief .eyebrow{font-size:7px;letter-spacing:1px}.fighter-brief h2{font-size:16px}.fighter-brief p{font-size:9px}.brief-moves{min-width:0}.brief-moves label{font-size:8px}.match-options{grid-template-columns:1fr 1fr}.match-options label{font-size:8px}.match-options select{font-size:9px;padding:5px}.match-options .gold-button{grid-column:1/-1;padding:8px}#selection>footer{font-size:7px}}
@media(max-width:380px){.showdown-label strong{font-size:15px}.showdown-center{transform:scale(.85)}.fighter-card .card-info h2{font-size:9px}.fighter-card .card-info>small{font-size:4px}.selection-bottom{padding:7px}.fighter-brief p{font-size:8px}}
.collection-banner{display:none}#selection{padding-top:18px}.selection-title{display:none}.pick-bar{margin:4px 0 0;min-height:54px}.pick-hint{letter-spacing:.04em}.side-switch{gap:26px}.side-switch button{padding:7px 12px;border:1px solid #9fc3d53a;border-radius:4px;background:#071522a8}.side-switch button[aria-pressed=true]{border-color:#f3cc72;background:linear-gradient(110deg,#ad78352c,#081726c9);box-shadow:0 0 18px #ffc94c22}.side-switch button>span{min-width:34px;text-align:center}.side-switch b{min-width:100px}.select-showdown{height:clamp(270px,38vh,410px);position:relative;display:grid;grid-template-columns:1fr 130px 1fr;align-items:stretch;isolation:isolate;overflow:hidden;border:1px solid #91bbd132;border-radius:8px;background:radial-gradient(ellipse at 50% 90%,#2990ac35,transparent 55%),linear-gradient(180deg,#112f48 0%,#071928 72%,#07131e 100%);box-shadow:inset 0 0 70px #2c70912a,0 18px 45px #0004}.select-showdown:before,.select-showdown:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}.select-showdown:before{opacity:.27;background-image:radial-gradient(circle,#d5efff 1px,transparent 1.5px),radial-gradient(circle,#7ac8ee 1px,transparent 1.5px);background-size:71px 65px,113px 91px;background-position:7px 16px,39px 11px}.select-showdown:after{top:auto;height:27%;background:linear-gradient(0deg,#54b8dc28,transparent)}.showdown-fighter{position:relative;min-width:0;overflow:hidden}.showdown-fighter:before{content:"";position:absolute;width:min(33vw,370px);height:min(33vw,370px);left:50%;top:53%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#d6a83c25 0,transparent 68%);filter:blur(3px)}.showdown-art{position:absolute;inset:-16px -5px 4px;background-image:var(--hero-sprite);background-repeat:no-repeat;background-size:auto 108%;background-position:center bottom;image-rendering:pixelated;filter:drop-shadow(0 14px 14px #0008);transform:scale(1);transform-origin:50% 75%}.player-one .showdown-art{transform:scaleX(-1);transform-origin:50% 75%}.showdown-label{position:absolute;bottom:13px;left:20px;right:14px;padding:9px 13px;border-left:3px solid #eac16c;background:linear-gradient(90deg,#07131ee8,#07131e91,transparent);text-shadow:0 2px 5px #000}.player-two .showdown-label{text-align:right;left:14px;right:20px;border-left:0;border-right:3px solid #79d5e9;background:linear-gradient(270deg,#07131ee8,#07131e91,transparent)}.showdown-label small,.showdown-label strong,.showdown-label span{display:block}.showdown-label small{font:9px/1.4 monospace;letter-spacing:2px;color:#f1ca75}.player-two .showdown-label small{color:#85dce9}.showdown-label strong{font-size:clamp(21px,3vw,37px);font-weight:normal;line-height:1.35}.showdown-label span{font-size:11px;color:#a9c8d4}.showdown-center{z-index:1;align-self:center;text-align:center;display:grid;justify-items:center;gap:3px;text-shadow:0 3px 18px #00101b}.showdown-center span{font:8px monospace;letter-spacing:2px;color:#c9e1e8;white-space:nowrap}.showdown-center strong{font:italic bold clamp(52px,8vw,90px)/.95 Georgia,serif;color:#ffeaa8;-webkit-text-stroke:1px #ad7430;text-shadow:0 0 20px #e6b54488,0 4px #553413}.showdown-center i{font-style:normal;font-size:16px;color:#72d9eb}.roster{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:10px auto 0;max-width:930px}.fighter-card,.fighter-card:last-child{height:94px;min-height:94px!important;grid-column:auto!important;display:grid;grid-template-columns:58px 1fr;align-items:center;padding:7px 9px;border:1px solid #84acc142;border-radius:5px;background:linear-gradient(130deg,#173044,#0e202c);transition:transform .16s,border-color .16s,background .16s}.fighter-card:hover{transform:translateY(-2px);background:#19374a}.fighter-card.chosen{border-color:#f2cb70;box-shadow:0 0 0 1px #f2cb7077,0 0 16px #f2cb7033}.fighter-card .card-art,.fighter-card:last-child .card-art{position:relative;inset:auto!important;width:56px!important;height:76px;background-size:contain!important;background-position:center;background-repeat:no-repeat}.fighter-card .card-number{display:none}.fighter-card .card-player{top:4px;left:auto;right:4px;z-index:2}.fighter-card .card-player span{font-size:7px;padding:1px 4px}.fighter-card .card-info{position:static;grid-column:2;min-width:0;padding:0 0 0 7px;text-shadow:none}.fighter-card .card-info>small{font:7px/1.3 monospace;letter-spacing:.8px;color:#9dbbc3}.fighter-card .card-info h2{font-size:15px;line-height:1.45}.fighter-card .card-info p{font-size:9px;line-height:1.35;color:#a9c0c6}.fighter-card .card-stats{display:none}.selection-bottom{grid-template-columns:1fr 1.05fr;gap:16px;margin-top:12px;padding:12px 15px;border:1px solid #80aab735;border-radius:6px;background:linear-gradient(100deg,#112736,#0d1c28)}.fighter-brief{gap:14px;padding:0;border:0}.fighter-brief h2{font-size:19px}.fighter-brief p{font-size:10px;line-height:1.5}.brief-moves{min-width:160px}.brief-moves label{font-size:9px;margin-bottom:5px}.match-options{gap:8px;align-items:end}.match-options label{font-size:9px}.match-options select{padding:6px;font-size:10px}.match-options .gold-button{padding:9px 12px;font-size:11px}#selection>footer{margin-top:8px;padding:0 2px;font-size:9px}
@media(max-width:1050px){.roster{grid-template-columns:repeat(3,minmax(0,1fr))}.fighter-card{min-height:325px}.fighter-card:last-child{grid-column:auto!important;min-height:325px}.fighter-card:last-child .card-art{inset:28px 5px 112px!important;width:auto!important}}
@media(max-width:550px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}.fighter-card,.fighter-card:last-child{min-height:300px}.card-info h2{font-size:19px}.card-art{inset:28px 0 108px}.collection-banner{padding:12px}.collection-banner span{display:none}.passive-strip{gap:6px}.passive-box{padding:8px}.passive-box p{font-size:10px}.hero-guide{font-size:11px}#battle{min-width:100%}}

.player-one .showdown-art{transform:scaleX(-1);transform-origin:50% 75%}.select-player-two .player-one .showdown-art{transform:none}.select-player-two .player-two .showdown-art{transform:scaleX(-1);transform-origin:50% 75%}.select-player-two .player-one .showdown-label{text-align:left;left:20px;right:14px;border-left:3px solid #eac16c;border-right:0;background:linear-gradient(90deg,#07131ee8,#07131e91,transparent)}.select-player-two .player-two .showdown-label{text-align:right;left:14px;right:20px;border-left:0;border-right:3px solid #79d5e9;background:linear-gradient(270deg,#07131ee8,#07131e91,transparent)}

/* Facing belongs to the screen side, never to the active selection cursor. */
#selection .player-one .showdown-art{transform:none!important}
#selection .player-two .showdown-art{transform:scaleX(-1)!important}
#selection .showdown-art{inset:16px 0 16px!important;background-size:auto 100%!important;background-position:center bottom!important;background-repeat:no-repeat}
#selection .fighter-card .card-art{height:64px!important;background-size:auto 100%!important;background-position:center!important}
@media(max-width:600px){#selection .fighter-card .card-art{height:48px!important}}
#selection .fighter-card .card-art,#selection .fighter-card:last-child .card-art{inset:auto!important;width:56px!important;align-self:center}
@media(max-width:600px){#selection .fighter-card .card-art,#selection .fighter-card:last-child .card-art{width:31px!important}}

/* Desktop layout follows the available browser/fullscreen viewport. */
@media(min-width:800px) and (min-height:560px){
 .app,.app.fullscreen{width:100%;max-width:1920px;height:100dvh;min-height:0;padding:0 clamp(12px,2vw,32px)!important;display:flex;flex-direction:column}
 .app>header{height:60px;flex:0 0 60px;gap:18px}
 .brand{font-size:21px}.crest{height:43px;width:39px}
 #selection{flex:1;min-height:0;padding:8px 0;display:flex;flex-direction:column;gap:8px}
 #selection .pick-bar{margin:0;min-height:38px;flex:0 0 auto}
 #selection .select-showdown{height:auto;min-height:160px;flex:1;grid-template-columns:1fr clamp(70px,9vw,130px) 1fr}
 #selection .roster{width:100%;max-width:1160px;margin:0 auto;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;flex:0 0 auto}
 #selection .fighter-card,#selection .fighter-card:last-child{height:80px;min-height:80px!important;grid-column:auto!important;grid-template-columns:56px 1fr;padding:5px}
 #selection .card-info h2{font-size:clamp(11px,1vw,16px)}
 #selection .card-info p{font-size:9px}
 #selection .selection-bottom{margin:0;padding:10px 12px;grid-template-columns:1fr 1fr;gap:16px;flex:0 0 auto}
 #selection .fighter-brief{padding:0;gap:10px}
 #selection .fighter-brief p{font-size:10px;line-height:1.45}
 #selection .brief-moves{min-width:130px;max-width:48%}
 #selection .brief-moves b{font-size:10px;line-height:1.4}
 #selection .match-options{gap:5px}
 #selection .match-options select{margin-top:2px;padding:5px}
 #selection .gold-button{padding:7px 12px}
 #selection>footer{margin:0;padding:0;flex:0 0 16px;font-size:8px}
 #battle{flex:1;min-height:0;min-width:0;width:min(100%,calc((100dvh - 275px)*16/9));display:flex;flex-direction:column;padding:6px 0;margin:auto}
 #battle .battle-bar{margin:0 0 6px;flex:0 0 32px}
 #battle #arena{flex:0 0 auto}
 #battle .passive-strip{margin:6px 0;gap:8px}
 #battle .passive-box{padding:5px 10px}
 #battle .passive-box p{margin:1px 0;font-size:10px}
 #battle .passive-box strong{font-size:10px}
 #battle .control-strip{padding:3px 0;font-size:9px}
 #battle .control-strip>div{gap:8px}
 #battle .control-strip p{margin-top:3px;font-size:9px}
 #battle .hero-guide{padding:2px 8px;margin-top:4px;font-size:9px;line-height:1.4}
}
@media(min-width:800px) and (min-height:560px) and (max-height:700px){
 .app>header{height:48px;flex-basis:48px}
 #selection{gap:5px;padding:5px 0}
 #selection .fighter-card,#selection .fighter-card:last-child{height:68px;min-height:68px!important}
 #selection .fighter-card .card-art{height:54px!important}
 #selection .selection-bottom{padding:6px 9px}
 #selection .showdown-label strong{font-size:24px}
 #selection .showdown-label{bottom:7px;padding:5px 9px}
}

/* Fifteen fighters fit in a bounded, scrollable roster without covering controls. */
#selection .roster{max-height:260px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#719aab #102432;padding:3px;flex:0 1 auto!important;min-height:95px}
#selection .fighter-card,#selection .fighter-card:last-child{min-height:76px!important;height:76px!important}
#selection .fighter-brief p{max-height:4.5em;overflow:auto}
@media(max-width:799px){#selection .roster{max-height:330px}#selection .fighter-card,#selection .fighter-card:last-child{min-height:76px!important}}
@media(min-width:800px) and (max-height:760px){#selection .select-showdown{min-height:145px}#selection .roster{max-height:172px}}