/* Portrait arcade layout: game stays centered, controls stay below the playfield. */
.mobile-brand,.portrait-logo,.control-guide{display:none}
@media (pointer:coarse),(any-pointer:coarse){
 .touch,.attacks .touch{border:1px solid #fff;background:#16171999;box-shadow:none;opacity:1;font:400 24px CampaignArcade,monospace}
 .touch small{display:none}.directions .touch{border-radius:50%;font-size:25px}
 .touch.active,.attacks .touch.active{background:#ffffff45}
 #touch-start{font:12px CampaignArcade,monospace;letter-spacing:.2em}
}
@media (max-width:900px) and (orientation:portrait){
 body{background:#151618}
 body>canvas{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,66.6667dvh)!important;height:min(75vw,50dvh)!important;max-width:none;max-height:none}
 #rotate-phone{display:none!important}
 #touch-controls{display:block;--button:min(15vw,7.6dvh);--step:calc(var(--button)*.80);--pad:calc(var(--button) + var(--step)*2)}
 .pad{width:var(--pad);height:var(--pad);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 76px);transform:none}
 .attacks{left:max(4vw,env(safe-area-inset-left))}.directions{right:max(4vw,env(safe-area-inset-right))}
 .pad .touch{width:var(--button);height:var(--button);border:1px solid #fff;background:#151618;color:#fff;opacity:1;box-shadow:none;font:400 clamp(20px,6vw,30px) CampaignArcade,monospace;border-radius:50%}
 .pad .touch small{display:none}.pad .touch.active{background:#ffffff40}
 .north{top:0;left:var(--step)}.west{top:var(--step);left:0}.east{top:var(--step);right:0}.south{bottom:0;left:var(--step)}
 #touch-start,.match-over #touch-start{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 43px);width:112px;height:32px;border:1px solid #fff;background:transparent;opacity:1;box-shadow:none;font:12px CampaignArcade,monospace;letter-spacing:.22em}
 .control-guide{display:block;position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:8px;right:8px;margin:0;text-align:center;color:#ccc;font:clamp(8px,2.45vw,12px)/1.65 CampaignArcade,monospace}
 .mobile-brand,.portrait-logo{display:block;background:url('assets/title/foreground-v9/idle.png') right bottom/190% auto no-repeat;aspect-ratio:1.72}
 .mobile-brand{position:fixed;top:7dvh;left:25%;width:50%;max-height:18dvh;pointer-events:none}
 .match-selecting .mobile-brand,body:has(#title-screen:not([hidden])) .mobile-brand{display:none}
 #title-screen .title-frame{width:100vw;height:100dvh;aspect-ratio:auto;background:url('stage.png?v=title-stage-9') center/cover no-repeat}
 #title-screen .title-frame>img{position:absolute;top:auto;bottom:0;left:0;width:155%;height:76%;object-fit:cover;object-position:left bottom;background:none;clip-path:inset(0 49% 0 0);max-width:none}
 #title-screen .portrait-logo{position:absolute;top:7dvh;left:5%;width:90%;z-index:3}
 #title-screen .title-actions{bottom:max(22px,env(safe-area-inset-bottom));z-index:5}
 #title-start{min-width:62%;min-height:54px;border:1px solid #fff;border-radius:20px;background:#151618b8;color:#fff;box-shadow:none;font:clamp(12px,3.5vw,18px)/1.4 CampaignArcade,monospace;text-transform:uppercase}
 .desktop-start{display:none}.mobile-start{display:inline}
 .title-shard{background-size:auto 100%,cover}
 .breaking .portrait-logo{visibility:hidden}
}
@media (max-width:900px) and (orientation:portrait){
 .directions .touch{font-size:0}
 .directions .touch::after{content:'';width:13px;height:13px;border-top:2px solid white;border-right:2px solid white;transform:rotate(-45deg);margin-top:6px}
 .directions .west::after{transform:rotate(-135deg);margin:0 0 0 6px}.directions .east::after{transform:rotate(45deg);margin:0 6px 0 0}.directions .south::after{transform:rotate(135deg);margin:0 0 6px}
}
@media (max-width:900px) and (orientation:portrait){
 #title-screen .title-frame>img{width:220%;height:auto;aspect-ratio:1672/941;object-fit:fill}
 #title-start:hover,#title-start:focus-visible{background:#151618d9}
}
@media (max-width:900px) and (orientation:portrait){
 .mobile-brand,.portrait-logo{clip-path:inset(0 0 0 4%)}
}
/* Corrected portrait geometry: preserve pixels, crop sides, reserve control space. */
#online-open{position:static;display:block;margin:24px auto 0;max-width:100%}
@media (max-width:900px) and (orientation:portrait){
 body{--button:min(15vw,8dvh);--step:calc(var(--button)*.8);--pad:calc(var(--button) + var(--step)*2);--control-height:calc(var(--pad) + 68px + max(12px,env(safe-area-inset-bottom)));--play-height:min(75vw,calc(100dvh - var(--control-height) - var(--control-height) - 32px))}
 body>canvas{width:calc(var(--play-height)*4/3)!important;height:var(--play-height)!important;object-fit:cover;object-position:center}
 #touch-controls{--button:min(15vw,8dvh)}
 .pad{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 58px)}
 #touch-start,.match-over #touch-start{bottom:max(12px,env(safe-area-inset-bottom))}
 .control-guide{display:none}
 .mobile-brand,.portrait-logo{background:none;clip-path:none;aspect-ratio:952/541;max-height:none}
 .mobile-brand svg,.portrait-logo svg{display:block;width:100%;height:auto;overflow:visible}
 .mobile-brand{width:40%;left:30%;top:48px}
 #title-screen .portrait-logo{width:72%;left:14%;top:7dvh}
 #stage-change{display:none!important}
 #match-select{padding:58px 16px 24px;scroll-padding-top:58px;touch-action:pan-y}
 .stage-card.fighter-card{aspect-ratio:1;display:flex;flex-direction:column;min-height:0}
 .stage-card.fighter-card img{height:calc(100% - 36px);width:100%;aspect-ratio:auto;min-height:0;object-fit:contain;padding:6px 6px 0}
 .stage-card.fighter-card span{height:36px;flex:none;display:grid;place-items:center;font-size:clamp(9px,2.7vw,12px);padding:4px;line-height:1.25}
 #online-toolbar{top:auto;bottom:4px;max-width:100%;font-size:9px}
 .online-active #touch-start{bottom:40px}
}
@media (max-width:900px) and (orientation:portrait){
 body{--play-height:min(75vw,calc(100dvh - var(--control-height) - 124px))}
 body>canvas{top:calc((100dvh - var(--control-height) + 100px)/2)}
 body.match-selecting{background:#000}
 #match-select{top:48px;padding-top:10px;scroll-padding-top:10px}
}
@media (max-width:900px) and (orientation:portrait){.mobile-brand{top:18px}}

#touch-controls .attacks .touch,
#touch-controls #touch-start,
#touch-controls .pad.directions {background:#2a2b32}
#touch-controls .attacks .touch.active,
#touch-controls #touch-start.active {background:#454650}
#touch-controls .pad.directions {
 pointer-events:auto;touch-action:none;border:2px solid #fff;border-radius:50%;
 box-shadow:inset 0 0 0 3px #373944;overflow:hidden;
}
#touch-controls .directions .touch {
 pointer-events:none;width:30%;height:30%;border:0;border-radius:50%;
 background:transparent;box-shadow:none;font-size:0;
}
#touch-controls .directions .touch::after {
 content:'';width:24%;height:24%;border:solid white;border-width:2px 2px 0 0;margin:0;
}
#touch-controls .directions .north {top:3%;left:35%}
#touch-controls .directions .south {bottom:3%;left:35%}
#touch-controls .directions .east {right:3%;top:35%}
#touch-controls .directions .west {left:3%;top:35%}
#touch-controls .directions .north::after {transform:rotate(-45deg)}
#touch-controls .directions .south::after {transform:rotate(135deg)}
#touch-controls .directions .east::after {transform:rotate(45deg)}
#touch-controls .directions .west::after {transform:rotate(-135deg)}
#touch-controls .directions .active {background:#ffffff38;transform:none}

@media (max-width:900px) and (orientation:portrait) {
 .mobile-brand {
  inset:0 0 auto;width:100%;height:calc((100dvh - var(--control-height) + 100px - var(--play-height))/2);
  aspect-ratio:auto;align-content:center;text-align:center;
 }
 .mobile-brand img {display:block;margin:auto;width:28.5vw;height:60%;object-fit:contain;image-rendering:pixelated}
}

.attack-letter {width:.65em;height:.91em;pointer-events:none}
#touch-controls .directions .touch::after {
 border:0;width:15px;height:10px;background:white;
 clip-path:polygon(0 80%,13% 80%,13% 60%,26% 60%,26% 40%,39% 40%,39% 20%,61% 20%,61% 40%,74% 40%,74% 60%,87% 60%,87% 80%,100% 80%,100% 100%,74% 100%,74% 80%,61% 80%,61% 60%,39% 60%,39% 80%,26% 80%,26% 100%,0 100%);
}
#touch-controls .directions .north::after {transform:none}
#touch-controls .directions .south::after {transform:rotate(180deg)}
#touch-controls .directions .east::after {transform:rotate(90deg)}
#touch-controls .directions .west::after {transform:rotate(-90deg)}

body.showing-results{background:#090969}

.fight-overlay{display:none}
@media (max-width:900px) and (orientation:portrait){
 .portrait-fight{
  --arena-top:min(23.39dvh,calc(100dvh - var(--control-height) - 44px - var(--arena-height)));
  --arena-height:min(82.5vw,calc(100dvh - var(--control-height) - 130px));
 }
 body.portrait-fight>canvas{
  left:calc(50% + 3.46vw);top:var(--arena-top);transform:translateX(-50%);
  width:calc(var(--arena-height)*4/3)!important;height:var(--arena-height)!important;
 }
 body.showing-results>canvas{top:52dvh}
 .portrait-fight .mobile-brand{display:none}
 .portrait-fight .fight-overlay{display:block}
 #fight-hud{position:fixed;left:50%;bottom:calc(100% - var(--arena-top));
  transform:translateX(-50%);width:min(100vw,calc(var(--arena-height)*1.22));height:auto;
  pointer-events:none;z-index:2}
 #fight-resume{position:fixed;top:calc(var(--arena-top) + var(--arena-height) + 3px);left:50%;
  transform:translateX(-50%);padding:4px;border:0;background:transparent;color:white;
  font:clamp(6px,1.75vw,10px)/1.4 CampaignArcade,monospace;white-space:nowrap;z-index:2}
}

#touch-controls #touch-start[data-action="home"]{
 width:auto;min-width:112px;max-width:95vw;padding:0 16px;
 font:10px/1.3 CampaignArcade,monospace;letter-spacing:0;white-space:nowrap;
}