/* The city and familiar fighters frame menu content without intercepting input. */
.arcade-app,.private-app{isolation:isolate}
.rival-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;user-select:none;contain:paint}
.scene-fighter{position:absolute;bottom:0;display:block;width:clamp(320px,32vw,610px);height:min(84vh,800px);object-fit:contain;object-position:center bottom;opacity:.14;filter:none;mask-image:linear-gradient(#000 65%,transparent);-webkit-mask-image:linear-gradient(#000 65%,transparent)}
.scene-left{left:-7vw;transform:none}.scene-right{right:-7vw;transform:scaleX(-1)}
.scene-fighter[data-flip="false"]{transform:none}.scene-fighter[data-flip="true"]{transform:scaleX(-1)}
.arcade-app .shell,.private-shell{position:relative;z-index:1}
.title-screen>.rival-scene{display:none}
body[data-menu-screen="fighters"]>.rival-scene{display:none}
.title-backdrop .rival-scene{position:absolute;z-index:auto;inset:0}
.title-backdrop .scene-fighter{width:clamp(350px,37vw,710px);height:min(82svh,900px);opacity:.86;mask-image:linear-gradient(#000 78%,transparent);-webkit-mask-image:linear-gradient(#000 78%,transparent)}
.title-backdrop .scene-left{left:-5vw}.title-backdrop .scene-right{right:-5vw}
.title-home:before{background:radial-gradient(ellipse 30% 90% at center,#02070ce6,transparent 130%),linear-gradient(180deg,#02060d15,#02060d00 65%,#02060da8)}
.title-content{position:relative;z-index:1}
.arcade-app:not(.title-screen):before,.private-app:before{background:linear-gradient(#0308119c,#030811d9),url('menu-night.webp') center/cover no-repeat}
/* Full artwork floats over the city instead of sitting in separate portrait boxes. */
.arcade-app .sf-select{grid-template-columns:minmax(0,1fr) minmax(300px,1.05fr) minmax(0,1fr);align-items:center;gap:12px}
.arcade-app .sf-preview,.arcade-app .sf-preview.player-two{background:none;border:0;padding:0;overflow:visible}
.arcade-app .sf-preview>.eyebrow{display:inline-block;border-bottom:2px solid #54b5ff;padding:8px 12px;background:#07111dd9;min-height:32px}
.arcade-app .sf-preview.player-two>.eyebrow{border-color:#ff6770}
.arcade-app .sf-portrait{height:clamp(260px,31vw,430px);overflow:hidden;background:none;border:0}
.arcade-app .sf-portrait img{object-fit:contain;object-position:center bottom;transform:none!important}
.arcade-app .player-two .sf-portrait img{transform:scaleX(-1)!important}
.arcade-app .sf-preview .sf-portrait img[data-flip="false"]{transform:none!important}
.arcade-app .sf-preview .sf-portrait img[data-flip="true"]{transform:scaleX(-1)!important}
.arcade-app .sf-identity{position:relative;background:linear-gradient(90deg,#07111db3,#101d28f5,#07111db3);border-top:2px solid #54b5ff70;padding:15px 8px 12px}
.arcade-app .player-two .sf-identity{border-color:#ff677070}
.arcade-app .sf-roster{background:#09131ee8;border-color:#d5ff4650;box-shadow:0 16px 50px #0005}
.versus-mark{text-align:center;font-size:40px;line-height:1;font-weight:950;font-style:italic;color:#d5ff46;letter-spacing:-.08em;margin-bottom:3px;text-shadow:0 4px 18px #d5ff4622}
.arcade-app .sf-fighter.selected-p2:not(.selected-p1) img{transform:scaleX(-1)}
.arcade-app .sf-fighter[data-fighter="osama"] img{transform:scaleX(-1)}
.arcade-app .sf-fighter[data-fighter="osama"].selected-p2:not(.selected-p1) img{transform:none}
.arena-rivals{display:flex;align-items:center;justify-content:center;gap:22px;padding:12px 16px;margin:0 0 18px;background:#07111dd9;border:1px solid #a0bca32e;font-size:11px;font-weight:850;letter-spacing:.06em;text-align:center}
.arena-rivals .match-p1{color:#81ccff}.arena-rivals .match-p2{color:#ff9ba0}.arena-rivals b{color:#d5ff46;font-size:18px;font-style:italic}
.arcade-app dialog::backdrop,.touch-settings::backdrop{background:linear-gradient(#030912ca,#030912e8),url('menu-night.webp') center/cover no-repeat}
.match-overlay{background:linear-gradient(#030912d9,#030912e8),url('menu-night.webp') center/cover no-repeat}
body:not(.touch-play):has(.fight-shell){background:linear-gradient(#030912d9,#030912e8),url('menu-night.webp') center/cover fixed no-repeat}
.private-app .panel{background:#08121ee8}
@media(max-width:900px){.arcade-app .sf-select{grid-template-columns:1fr 1fr;gap:12px}.arcade-app .sf-roster{grid-column:1/-1;grid-row:2}.arcade-app .sf-portrait{height:250px}.scene-fighter{opacity:.1}.title-backdrop .scene-fighter{width:48vw;height:65svh}.title-backdrop .scene-left{left:-10vw}.title-backdrop .scene-right{right:-10vw}.versus-mark{font-size:28px}}
@media(max-width:620px){.arcade-app .sf-portrait{height:clamp(150px,45vw,240px)}.arcade-app .sf-preview>.eyebrow{font-size:7px;padding:7px 6px;min-height:28px}.arcade-app .sf-identity{padding:10px 3px}.arcade-app .sf-identity h3{font-size:24px}.arcade-app .sf-roster{gap:10px}.versus-mark{font-size:24px}.arena-rivals{gap:12px;font-size:9px;padding:10px;margin-bottom:14px}.arena-rivals b{font-size:16px}.scene-fighter{width:70vw;height:70vh}.scene-left{left:-35vw}.scene-right{right:-35vw}.title-backdrop .scene-fighter{width:80vw;height:58svh;bottom:-3svh;opacity:.68}.title-backdrop .scene-left{left:-26vw}.title-backdrop .scene-right{right:-26vw}.title-home:before{background:radial-gradient(ellipse 48% 65% at 50% 42%,#02070cd9,transparent 150%),linear-gradient(transparent 60%,#02070c8c)}}
@media(orientation:landscape) and (max-height:600px){.title-backdrop .scene-fighter{height:95svh;width:45vw;opacity:.45}.title-backdrop .scene-left{left:-14vw}.title-backdrop .scene-right{right:-14vw}.arcade-app .sf-select{grid-template-columns:minmax(0,1fr) minmax(240px,1.15fr) minmax(0,1fr)}.arcade-app .sf-roster{grid-column:auto;grid-row:auto}.arcade-app .sf-portrait{height:210px}.versus-mark{font-size:28px}}
