/* Shared presentation rules applied after the historical menu layouts. */
body[data-menu-section=challenge] #shopOverlay #shopPanel{padding:calc(var(--cs-safe-top) + 8px) calc(var(--cs-safe-right) + 8px) calc(var(--cs-safe-bottom) + 8px) calc(var(--cs-safe-left) + 8px)}
body[data-menu-section=challenge] .challengeHero{background-image:radial-gradient(ellipse at 50% 62%,#163f53 0,#0b1e2d 48%,#081521 100%)!important}
body[data-menu-section=challenge] #chapterDetail{background:radial-gradient(ellipse at 50% 50%,#123348,#091a28 72%)}
body[data-menu-section=challenge] .challengeVenueTitle{font-size:clamp(18px,2.2vw,28px);text-shadow:none}
body[data-menu-section=challenge] .duelTopArt[data-challenge-bey]{width:220px;height:190px}
body[data-menu-section=challenge] .duelTopArt::after{height:15%;bottom:5%;background:radial-gradient(ellipse,#42dcff66 0,#42dcff22 45%,transparent 70%)}
body[data-menu-section=challenge] .duelTopArt.is-foe::after{background:radial-gradient(ellipse,#ffbd6966 0,#ffbd6922 45%,transparent 70%)}
body[data-menu-section=challenge] .duelStats{display:block;background:none;width:100%;padding:0;max-width:220px}
body[data-menu-section=challenge] .duelStats .workshopRadar{margin:0;padding:0;display:block}
body[data-menu-section=challenge] .duelStats svg{display:block;width:100%;height:110px;overflow:visible}
body[data-menu-section=challenge] .duelStats .workshopRatingLabel{display:block;text-align:center;font-size:9px;color:#abc5d4}
.workshopRadar .radarGrid{fill:none;stroke:#426879;stroke-width:1}
.workshopRadar .radarShape{fill:#4edaff33;stroke:#6ee8ff;stroke-width:2}
.workshopRadar .radarLabels{fill:#d6edf5;font:600 12px system-ui}
body[data-menu-section=challenge] .is-foe .radarShape{fill:#ffb25d33;stroke:#ffbe75}
.challengeGroupHeading{display:grid;grid-template-columns:22px 1fr;gap:3px 5px;margin:10px 0 2px;padding:8px;color:#b4e9f4;font:700 12px system-ui;flex-shrink:0}
.challengeGroupHeading>span{grid-row:1/3;font-size:20px}.challengeGroupHeading small{grid-column:2;font:10px system-ui;color:#8eacbc}
body[data-menu-section=challenge] #chapterRail .challengeGroupHeading strong{font:700 12px/1.2 system-ui}
body[data-menu-section=challenge] #chapterRail .challengeGroupHeading small{font:10px/1.2 system-ui}
.compactRatings{display:none}
body[data-menu-section=challenge] .duelStats .compactRatings{display:none}
body[data-menu-section=workshop] #shopOverlay #portraitDetails .workshopRadar .compactRatings{display:none}
.challengeInspectHint{color:#a1c9d8;font:10px/1.3 system-ui;margin:5px 0;letter-spacing:.01em}
.rosterViewingBadge{position:absolute;left:5px;top:5px;z-index:4;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#0b3144;border:1px solid #84e7ff;color:#a3f0ff;pointer-events:none}
.rosterViewingBadge svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
[data-roster-status][hidden]{display:none!important}
.workshopAbilityTabs{display:none}
body[data-menu-section=workshop] .workshopPreviewDock{flex-shrink:0;min-height:36px;margin:4px 0}
body[data-menu-section=workshop][data-workshop-inspect=overview] #shopOverlay #portraitDetails{grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:5px}
body[data-menu-section=workshop][data-workshop-inspect=overview] #portraitDetails .workshopPreviewDock{grid-row:4}
body[data-menu-section=workshop][data-workshop-inspect=overview] #shopOverlay #portraitDetails .portraitDetailHead{grid-row:5}
body[data-menu-section=workshop]:not([data-workshop-inspect=overview]) .workshopAbilityTabs,
body[data-menu-section=workshop]:not([data-workshop-inspect=overview]) .workshopPreviewDock{display:none!important}
body[data-menu-section=challenge] #stageDetail{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#47788d transparent;scroll-padding-bottom:12px}
body[data-menu-section=challenge] #stageDetail .stageDetailReward,
body[data-menu-section=challenge] #stageDetail .stageDetailUnlock:not(:empty){display:block}
@media(orientation:portrait){
 body[data-menu-section=challenge] #chapterDetail .challengeHero{height:60px;min-height:60px}
 body[data-menu-section=challenge] #shopOverlay #shopPanel{grid-template-rows:44px minmax(0,1fr) auto;gap:8px}
 body[data-menu-section=challenge] #shopOverlay #shopScroll{grid-row:2}
 body[data-menu-section=challenge] #shopOverlay #fightBtn{grid-row:3}
 body[data-menu-section=challenge] #chapterRail{min-height:96px;max-height:110px}
 .challengeGroupHeading{flex:0 0 86px;margin:0;align-content:center;padding:6px;font-size:11px}
 body[data-menu-section=challenge] .duelTopArt[data-challenge-bey]{width:128px;height:104px}
 body[data-menu-section=challenge] .duelStats svg{height:82px}
 body[data-menu-section=challenge] .duelStats .workshopRatingLabel{font-size:8px}
 body[data-menu-section=challenge] .challengeDuel{gap:3px}
 body[data-menu-section=challenge] .duelName{font-size:11px}
 body[data-menu-section=challenge] #chapterDetail{height:auto;min-height:0;max-height:none;flex-shrink:0;overflow:visible}
 body[data-menu-section=challenge] #stageDetail{height:auto;max-height:none;flex-shrink:0;overflow:visible;padding-bottom:12px}
 body[data-menu-section=challenge] #mainCampaignBoard{overflow-y:auto;min-height:0;scroll-padding-bottom:12px}
 body[data-menu-section=workshop] #portraitDetails .workshopAbilityTabs{display:flex;gap:4px;flex-shrink:0;padding:2px 0}
 .workshopAbilityTabs button{flex:1;min-height:32px;padding:5px 3px;border:1px solid #426777;border-radius:8px;background:#0a202e;color:#b4d3df;font:700 11px system-ui}
 .workshopAbilityTabs button[aria-selected=true]{color:#effcff;background:#1b5268;border-color:#6bd9ef}
 body[data-menu-section=workshop] #portraitDetails[data-ability-tab=active] .abilityPassive,
 body[data-menu-section=workshop] #portraitDetails[data-ability-tab=passive] .abilityActive,
 body[data-menu-section=workshop] #portraitDetails .workshopFlavor{display:none}
 body[data-menu-section=workshop] #portraitDetails .workshopAbilityScroll{min-height:0;overflow-y:auto;scrollbar-width:thin;flex:1 1 auto}
 body[data-menu-section=workshop] #portraitDetails .workshopRadar svg{height:90px}
 body[data-menu-section=workshop] #portraitDetails .workshopPreviewDock{display:block;min-height:32px;font-size:11px;padding:6px 3px;margin:3px 0}
 body[data-menu-section=workshop] #portraitDetails .abilityBlock{grid-template-columns:48px minmax(0,1fr);gap:4px}
 body[data-menu-section=workshop] #portraitDetails .workshopAbilityIcon{width:48px;height:48px}
 body[data-menu-section=workshop] #portraitDetails .abilityBlock p{font-size:11px;line-height:1.35}
}
@media(orientation:portrait),(orientation:landscape) and (max-height:430px){
 body[data-menu-section=workshop][data-workshop-inspect=overview] #shopOverlay #portraitDetails{grid-template-rows:auto auto auto minmax(66px,1fr) auto auto;gap:3px}
 body[data-menu-section=workshop][data-workshop-inspect=overview] #portraitDetails .workshopAbilityTabs{grid-row:3}
 body[data-menu-section=workshop][data-workshop-inspect=overview] #portraitDetails .workshopAbilityScroll{grid-row:4}
 body[data-menu-section=workshop][data-workshop-inspect=overview] #portraitDetails .workshopPreviewDock{grid-row:5}
 body[data-menu-section=workshop][data-workshop-inspect=overview] #shopOverlay #portraitDetails .portraitDetailHead{grid-row:6}
 body[data-menu-section=workshop] #portraitDetails .abilityCopy{display:block!important}
 body[data-menu-section=workshop] #portraitDetails .workshopAbilityScroll{border-bottom:1px solid #3d6476;padding-bottom:5px}
}
@media(orientation:landscape) and (max-height:430px){
 body[data-menu-section=challenge] .duelTopArt[data-challenge-bey]{width:128px;height:92px}
 body[data-menu-section=challenge] .duelSide{flex-direction:column;gap:1px}
 body[data-menu-section=challenge] .duelStats svg{height:60px}
 body[data-menu-section=challenge] .duelStats svg{display:none}
 body[data-menu-section=challenge] .duelStats .compactRatings{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 6px;color:#bfeeff;font:700 10px system-ui;margin-top:4px;padding:0;border:0}
 body[data-menu-section=challenge] .is-foe .compactRatings{color:#ffd39b}
 body[data-menu-section=challenge] .duelStats .workshopRatingLabel{font-size:7px}
 body[data-menu-section=challenge] .challengeDuel{top:34px;bottom:66px;gap:3px;align-items:center}
 body[data-menu-section=challenge] .duelName{font-size:10px}
 body[data-menu-section=challenge] .challengeVenueTag{display:none}
 body[data-menu-section=challenge] #stageDetail{overflow-y:auto;overscroll-behavior:contain;padding-bottom:14px}
 body[data-menu-section=workshop] #portraitDetails .workshopAbilityTabs{display:flex;gap:4px;flex-shrink:0}
 .workshopAbilityTabs button{flex:1;min-height:28px;border:1px solid #426777;border-radius:8px;background:#0a202e;color:#b4d3df;font:700 11px system-ui}
 .workshopAbilityTabs button[aria-selected=true]{color:#effcff;background:#1b5268;border-color:#6bd9ef}
 body[data-menu-section=workshop] #portraitDetails[data-ability-tab=active] .abilityPassive,
 body[data-menu-section=workshop] #portraitDetails[data-ability-tab=passive] .abilityActive,
 body[data-menu-section=workshop] #portraitDetails .workshopFlavor{display:none}
 body[data-menu-section=workshop] #portraitDetails .beyAbilityCard{display:block}
 body[data-menu-section=workshop] #portraitDetails .workshopRadar svg{height:70px}
 body[data-menu-section=workshop] #portraitDetails .workshopAbilityScroll{min-height:0;flex:1 1 auto;overflow-y:auto;scrollbar-width:thin}
 body[data-menu-section=workshop] #portraitDetails .workshopPreviewDock{min-height:30px;padding:5px;font-size:11px}
}
@media(orientation:portrait){
 body[data-menu-section=workshop][data-workshop-inspect=overview] #shopOverlay #portraitDetails{grid-template-rows:28px 78px 32px minmax(72px,1fr) 32px 30px}
 body[data-menu-section=workshop] #portraitDetails .workshopRadar{height:78px;min-height:78px;max-height:78px}
 body[data-menu-section=workshop] #portraitDetails .workshopRadar svg{height:66px;min-height:66px;flex-shrink:0}
 body[data-menu-section=workshop] #portraitDetails .radarLabels{font-size:15px}
}
@media(orientation:landscape) and (max-height:430px){
 body[data-menu-section=workshop][data-workshop-inspect=overview] #shopOverlay #portraitDetails{grid-template-rows:28px 48px 28px minmax(66px,1fr) 30px 26px}
 body[data-menu-section=workshop] #portraitDetails .workshopRadar svg{display:none}
 body[data-menu-section=workshop] #shopOverlay #portraitDetails .workshopRadar .compactRatings{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 14px;font:700 11px system-ui;color:#d5f6ff;padding:4px;width:100%;box-sizing:border-box}
}
/* Portrait comparison row and compact workshop header polish. */
@media (orientation:portrait){
 body[data-menu-section=workshop] #portraitDetails .workshopAbilityScroll{scrollbar-width:none}
 body[data-menu-section=workshop] #portraitDetails .workshopAbilityScroll::-webkit-scrollbar{display:none}
 body[data-menu-section=workshop][data-workshop-inspect=overview] #portraitHero > .workshopRadar{display:block!important}
 body[data-menu-section=workshop] #portraitDetails .workshopAbilityIcon{width:72px;height:72px}
 body[data-menu-section=workshop] #portraitDetails .abilityBlock{grid-template-columns:76px minmax(0,1fr)}
 body[data-menu-section=workshop] #shopOverlay #shopPanel{grid-template-columns:56px minmax(0,1fr) 76px;column-gap:6px}
 body[data-menu-section=workshop] #shopOverlay #shopHead{display:contents}
 body[data-menu-section=workshop] #shopOverlay #shopHead [data-action="shop-home"]{grid-column:1;grid-row:1;position:static;transform:none;width:48px;min-width:48px}
 body[data-menu-section=workshop] #menuNavigation{grid-column:2;grid-row:1;display:block;min-width:0;padding:0}
 body[data-menu-section=workshop] #menuNavigation nav{display:flex;justify-content:flex-start;gap:5px;width:100%;overflow:hidden}
 body[data-menu-section=workshop] #menuNavigation nav .cs-btn{flex:1 1 0;min-width:0;width:auto;padding:4px 3px;font-size:10px;letter-spacing:0}
 body[data-menu-section=workshop] #shopOverlay #shopHead .shopHeadMeta{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;align-items:center;gap:4px}
 body[data-menu-section=workshop] #shopSettingsBtn{position:static;transform:none;width:40px;min-width:40px;height:44px}
 body[data-menu-section=workshop] #workshopCompare .workshopRatingLabel{display:none!important}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareHead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:28px;min-height:28px}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareHide{grid-column:2;min-height:26px;padding:2px 12px;border:1px solid #55cbe5;border-radius:999px;background:#10384b;color:#dffaff;font:700 10px system-ui}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareHide::before{content:'^ ';color:#7eeeff}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareSide{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:5px;max-height:160px;opacity:1;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareSide img{width:34px;height:34px;object-fit:contain}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareCopy{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:3px}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareRadar{width:48px;height:42px;overflow:hidden}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareRadar svg{width:48px;height:42px}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareVs{align-self:center;font-size:20px;font-weight:900;color:#d9f8ff;max-height:160px;opacity:1;transition:max-height .25s ease,opacity .2s ease}
 body[data-menu-section=workshop] #workshopCompare.is-collapsed .workshopCompareSide,
 body[data-menu-section=workshop] #workshopCompare.is-collapsed .workshopCompareVs{max-height:0;opacity:0}
 body[data-menu-section=workshop] #shopOverlay .moneyChip{padding-left:10px;padding-right:10px;gap:7px}
 body[data-menu-section=workshop] #shopOverlay #fightBtn{min-height:48px;height:48px;padding:4px 8px}
 body[data-menu-section=workshop] #workshopRosterHead{padding-bottom:8px;margin-bottom:6px}
}
@media (orientation:portrait) and (max-width:430px){
 body[data-menu-section=workshop] #menuNavigation{padding-left:2px;padding-right:2px}
 body[data-menu-section=workshop] #menuNavigation nav{gap:3px}
 body[data-menu-section=workshop] #menuNavigation nav .cs-btn{padding-left:1px;padding-right:1px}
 body[data-menu-section=workshop] #portraitDetails .workshopSkinControls{gap:3px}
 body[data-menu-section=workshop] #portraitDetails .workshopSkinStep{flex-basis:20px;width:20px;height:20px;font-size:15px}
 body[data-menu-section=workshop] #portraitDetails .workshopSkinIndicatorBar{flex:0 1 48px;min-width:24px;max-width:48px;gap:3px}
 body[data-menu-section=workshop] #portraitDetails .workshopSkinIndicator{min-width:7px;height:12px;padding:4px 0}
 body[data-menu-section=workshop] #workshopRosterHead{padding-bottom:14px;margin-bottom:8px}
}
/* Stable portrait comparison structure: two flexible cards separated by VS. */
@media (orientation:portrait){
 body[data-menu-section=workshop] #workshopCompare{display:grid!important;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);grid-template-rows:28px auto;align-items:start;column-gap:4px;min-width:0;overflow:hidden}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareHead{grid-column:1/-1;grid-row:1;display:flex;justify-content:center;min-width:0}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareKicker{display:none!important}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareHide{min-width:72px}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareSide{grid-row:2;display:flex!important;min-width:0;width:100%;max-width:none;align-items:flex-start;gap:4px}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareSide:first-of-type{grid-column:1}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareSide:last-of-type{grid-column:3}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareSide img{flex:0 0 34px;width:34px;height:34px}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareCopy{display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;min-width:0;flex:1;overflow:hidden}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareName{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:10px;line-height:1.1}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareTag{display:block;min-width:0;white-space:nowrap;font-size:8px}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareRadar{width:42px;height:38px;min-width:42px;overflow:hidden}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareRadar svg{width:42px;height:38px}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareSide dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;min-width:0;gap:2px;margin:4px 0 0;font-size:9px}
 body[data-menu-section=workshop] #workshopCompare .workshopCompareVs{grid-column:2;grid-row:2;align-self:center;justify-self:center;max-height:none!important;opacity:1!important;font-size:18px}
 body[data-menu-section=workshop] #workshopCompare.is-collapsed .workshopCompareSide{max-height:0!important}
}

/* Comparison owns its internal layout; legacy side-card rules do not apply. */
body[data-menu-section=workshop] #shopOverlay #workshopCompare:not([hidden]){display:block!important;height:auto;min-height:0;padding:8px;overflow:hidden}
#workshopCompare[hidden]{display:none!important}
#workshopCompare .compareToggle{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px;align-items:center;gap:4px;width:100%;min-height:40px;padding:4px;border:0;background:none;color:#dcf5ff;font:700 12px/1.3 system-ui;cursor:pointer}
#workshopCompare .compareToggle span{min-width:0;overflow-wrap:normal;word-break:normal;text-align:center}
#workshopCompare .compareToggle i{font-style:normal;font-size:22px;transition:transform .25s}
#workshopCompare .compareContent{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s,opacity .25s;opacity:1}
#workshopCompare.is-collapsed .compareContent{grid-template-rows:0fr;opacity:0}
#workshopCompare.is-collapsed .compareToggle i{transform:rotate(180deg)}
#workshopCompare .compareRow{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;min-height:0;overflow:hidden}
#workshopCompare .compareVisual{display:flex;align-items:center;min-width:0;gap:2px}
#workshopCompare .compareVisual>img{display:block;width:28%;height:auto;object-fit:contain;flex-shrink:0}
#workshopCompare .compareVisual .workshopRadar{display:block;flex:1;min-width:0;margin:0;padding:0;border:0;background:none}
#workshopCompare .compareVisual svg{display:block;width:100%;height:auto;overflow:visible}
#workshopCompare .compactRatings{display:none!important}
@media(orientation:portrait){
 body[data-menu-section=workshop] #shopOverlay #shopScroll:has(#workshopCompare:not([hidden])){grid-template-areas:"hangar inspect" "compare compare" "roster roster";grid-template-rows:minmax(300px,40vh) auto minmax(240px,1fr)}
 body[data-menu-section=workshop] #workshopRosterHead .workshopRosterTitle{padding-bottom:10px}
 body[data-menu-section=workshop][data-workshop-inspect=skins] #portraitDetails .workshopSkinStep{flex:0 0 20px;width:20px;height:20px;font-size:15px}
 body[data-menu-section=workshop][data-workshop-inspect=skins] #portraitDetails .workshopSkinIndicatorBar{flex:0 1 42px;min-width:24px;max-width:42px;gap:3px}
 body[data-menu-section=workshop][data-workshop-inspect=skins] #portraitDetails .workshopSkinControls{gap:3px}
 body[data-menu-section=workshop] #shopOverlay #menuNavigation nav .cs-btn{padding-inline:2px;min-width:0}
}
@media(prefers-reduced-motion:reduce){#workshopCompare .compareContent,#workshopCompare .compareToggle i{transition:none}}

@media(orientation:portrait){
 body[data-menu-section=workshop] #shopOverlay #shopPanel{grid-template-columns:40px minmax(0,1fr) 96px;column-gap:4px}
 body[data-menu-section=workshop] #shopOverlay #shopHead [data-action="shop-home"]{width:38px;min-width:38px}
 body[data-menu-section=workshop] #shopOverlay #menuNavigation{width:100%;min-width:0;padding:0}
 body[data-menu-section=workshop] #shopOverlay #menuNavigation nav{flex-wrap:nowrap;width:100%;gap:3px}
 body[data-menu-section=workshop] #shopOverlay #menuNavigation nav .cs-btn{font-size:9px;padding-inline:2px;min-width:0}
 body[data-menu-section=workshop] #shopOverlay #shopHead .shopHeadMeta{width:96px;gap:4px}
 body[data-menu-section=workshop] #shopOverlay #shopSettingsBtn{display:grid;place-items:center;width:40px;min-width:40px;padding:0}
 body[data-menu-section=workshop] #shopOverlay .moneyChip{width:52px;min-width:52px;padding:0 3px;font-size:10px}
 body[data-menu-section=workshop] #shopMoney{margin-left:4px}
}

@media(orientation:landscape){#workshopCompare .compareVisual svg{height:64px}#workshopCompare .compareVisual>img{width:40px;height:40px}}

/* Shared app bar geometry: page selection changes styling, never control positions. */
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay{--bar-edge:8px;--bar-back:44px;--bar-tools:140px;--bar-gap:6px;--bar-height:44px}
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #shopHead [data-action="shop-home"]{position:fixed;left:calc(var(--cs-safe-left) + var(--bar-edge));top:calc(var(--cs-safe-top) + 8px);width:var(--bar-back);min-width:var(--bar-back);height:var(--bar-height);min-height:var(--bar-height);margin:0;padding:0;transform:none;z-index:30;display:grid;place-items:center}
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #menuNavigation nav{position:fixed;left:calc(var(--cs-safe-left) + var(--bar-edge) + var(--bar-back) + var(--bar-gap));right:calc(var(--cs-safe-right) + var(--bar-edge) + var(--bar-tools) + var(--bar-gap));top:calc(var(--cs-safe-top) + 8px);width:auto;height:var(--bar-height);margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:var(--bar-gap);z-index:30;overflow:visible}
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #menuNavigation nav .cs-btn{flex:1 1 0;min-width:0;width:auto;height:var(--bar-height);min-height:var(--bar-height);margin:0;padding:4px 2px;box-sizing:border-box;font-size:11px;letter-spacing:0;transform:none}
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #shopHead .shopHeadMeta{position:fixed;right:calc(var(--cs-safe-right) + var(--bar-edge));top:calc(var(--cs-safe-top) + 8px);left:auto;width:var(--bar-tools);height:var(--bar-height);display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:0;padding:0;z-index:30}
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #shopSettingsBtn{position:static;transform:none;display:grid;place-items:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0}
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #shopHead .moneyChip{width:auto;min-width:56px;height:44px;min-height:44px;padding:0 16px 0 10px;margin:0;font-size:14px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px}
@media(max-width:430px){body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #menuNavigation nav .cs-btn{font-size:9px}}

body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay,
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #shopPanel,
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #shopHead,
body:is([data-menu-section=challenge],[data-menu-section=workshop]) #shopOverlay #menuNavigation{transform:none!important;filter:none!important;backdrop-filter:none!important;perspective:none!important;contain:none!important;will-change:auto!important}
/* Stage selection belongs to its selected chapter in both orientations. */
body[data-menu-section=challenge] #chapterRail #chapterStages.stages{position:static;inset:auto;display:grid!important;grid-template-columns:minmax(0,1fr);gap:6px;flex:0 0 auto;width:100%;min-width:0;height:auto;min-height:0;max-height:none;padding:6px 4px 10px 12px;margin:0;overflow:visible;box-sizing:border-box}
body[data-menu-section=challenge] #chapterRail #chapterStages .stageCard{position:relative;flex:none;width:100%;min-width:0;min-height:48px;height:auto;padding:8px 20px 8px 32px;box-sizing:border-box;white-space:normal}
body[data-menu-section=challenge] #chapterRail #chapterStages .stageCard strong{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
body[data-menu-section=challenge] #chapterRail #chapterStages .stageCardLesson{display:none}
body[data-menu-section=challenge] #chapterRail #chapterStages .stageCardStatus{display:block;font-size:10px;white-space:normal}
@media(orientation:portrait){
 body[data-menu-section=challenge] #chapterRail #chapterStages.stages{display:flex!important;flex-direction:row;width:100%;overflow-x:auto;padding:6px 0;scroll-snap-type:x proximity}
 body[data-menu-section=challenge] #chapterRail #chapterStages .stageCard{flex:0 0 140px;scroll-snap-align:start}
}
/* Landscape uses an equal chapter-selection and matchup split. Portrait keeps its own layout. */
@media (orientation:landscape){
 body[data-menu-section=challenge] #mainCampaignBoard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px}
 body[data-menu-section=challenge] #chapterRail{grid-column:1;min-width:0}
 body[data-menu-section=challenge] #chapterDetail{grid-column:2;min-width:0}
}

/* Mode entry cards: preserve existing disclosure controls and stage content. */
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroup{position:relative;isolation:isolate;flex:0 0 auto;border:1px solid #28617b;border-radius:16px;overflow:hidden;background:#081c2a}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroup.is-open{border-color:#42dfff;box-shadow:inset 0 0 0 1px #42dfff55}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupHeading{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) 24px;grid-template-rows:auto auto auto;column-gap:10px;row-gap:4px;box-sizing:border-box;flex:none;width:100%;height:auto;min-height:136px;max-height:none;padding:18px 14px;text-align:left;border:0;border-radius:0;overflow:hidden;background:linear-gradient(90deg,#041420f5 0%,#041420dd 43%,#04142035 100%),var(--mode-art) center/cover;color:#e3f7ff}
body[data-menu-section=challenge] #shopOverlay #chapterRail [data-rail-group=training]{--mode-art:url(category-art/training-landscape.webp)}
body[data-menu-section=challenge] #shopOverlay #chapterRail [data-rail-group=story]{--mode-art:url(category-art/thunder-landscape.webp)}
body[data-menu-section=challenge] #shopOverlay #chapterRail [data-rail-group=challenges]{--mode-art:url(category-art/magma-landscape.webp)}
body[data-menu-section=challenge] #shopOverlay #chapterRail [data-rail-group=bosses]{--mode-art:url(category-art/champion-landscape.webp)}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupHeading strong{grid-column:2;grid-row:1;align-self:end;font:900 20px/1.1 system-ui;text-transform:uppercase;letter-spacing:.015em}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupHeading small{grid-column:2;grid-row:2;font:500 12px/1.3 system-ui;color:#b4d9e9}
body[data-menu-section=challenge] #shopOverlay #chapterRail .modeCardDescription{grid-column:1/3;grid-row:3;max-width:270px;font:400 12px/1.5 system-ui;color:#c6dce8;margin-top:7px}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupHeading .challengeGroupIcon{grid-column:1;grid-row:1/3;width:46px;height:58px;align-self:center;background-image:url(icons/mode-card-badges.webp);background-size:400% 100%;background-position:0 0}
body[data-menu-section=challenge] #shopOverlay #chapterRail [data-rail-group=story] .challengeGroupIcon{background-position:33.333% 0}
body[data-menu-section=challenge] #shopOverlay #chapterRail [data-rail-group=challenges] .challengeGroupIcon{background-position:66.667% 0}
body[data-menu-section=challenge] #shopOverlay #chapterRail [data-rail-group=bosses] .challengeGroupIcon{background-position:100% 0}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupChevron{grid-column:3;grid-row:1/4;align-self:center;position:static;width:22px;height:22px}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupArt{display:none!important}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroupItems{position:relative;background:#081724;padding:8px}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupHeading:focus-visible{outline:2px solid #fff;outline-offset:-4px}
body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroup{flex:0 0 auto!important;min-height:136px}

/* Landscape action lives in the briefing, so no empty footer track is reserved. */
@media(orientation:landscape){
 body[data-menu-section=challenge] #shopOverlay #shopPanel{grid-template-rows:44px minmax(0,1fr)!important}
 body[data-menu-section=challenge] #shopOverlay #mainCampaignBoard{height:100%;min-height:0;grid-template-columns:minmax(150px,40%) minmax(0,1fr) minmax(175px,24%)!important;grid-template-rows:minmax(0,1fr);grid-template-areas:"rail preview briefing"}
 body[data-menu-section=challenge] #shopOverlay #chapterRail{grid-area:rail}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail{grid-area:preview}
 body[data-menu-section=challenge] #shopOverlay #stageDetail{grid-area:briefing;display:flex!important;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;padding:8px}
 body[data-menu-section=challenge] #shopOverlay #stageDetail .stageDetailContent{flex:1 1 0%;min-height:0;overflow-y:auto}
 body[data-menu-section=challenge] #shopOverlay #stageDetail #fightBtn{display:block!important;flex:0 0 48px;height:48px;min-height:48px;padding:4px 6px;margin:6px 0 0!important;white-space:nowrap;font-size:clamp(14px,1.6vw,22px);line-height:1.1;letter-spacing:.5px}
 body[data-menu-section=challenge] #shopOverlay #stageDetail #fightBtn .ctaMain{font-size:inherit}
 body[data-menu-section=challenge] #shopOverlay #stageDetail #fightBtn .ctaMain::after{content:none}
}
/* Portrait disclosure takes the available rail; closing restores the mode cards. */
@media(orientation:portrait){
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story{display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;gap:8px}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story .chapterNestedCard{flex:0 0 auto;width:100%;padding:0;gap:0;overflow:visible;border-radius:9px}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story .chapterRailBtn{display:grid!important;grid-template-columns:76px minmax(0,1fr) 22px;align-items:center;flex:0 0 70px!important;width:100%;min-width:0;max-width:none;height:70px;min-height:70px;max-height:70px;padding:0!important}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story .chapterThumb{width:76px!important;height:68px!important;min-height:0;object-fit:cover;grid-column:1}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story .chapterRailCopy{grid-column:2;padding:8px}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story .chapterRailBtn::after{content:'';grid-column:3;width:22px;height:22px;background:url(icons/back.webp) center/contain no-repeat;transform:rotate(180deg)}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story .chapterRailBtn[aria-expanded=true]::after{background-image:url(icons/down.webp);transform:none}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story .cardStatusIcon{left:48px;right:auto;top:4px}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story #chapterStages.stages{display:flex!important;flex-direction:column;flex:none;width:auto;gap:6px;margin:6px 8px 10px 18px;padding:0 0 0 10px;border-left:2px solid #31556a;overflow:visible}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story #chapterStages .stageCard{flex:none;width:100%;min-height:55px}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-story .is-chapter-closed #chapterStages.stages{display:none!important}
}
body[data-menu-section=challenge] .trainingBrief{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,1.5fr);align-items:center;gap:12px;flex:1 1 auto;min-height:0;overflow:auto;padding:4px 8px}
body[data-menu-section=challenge] .trainingBriefBey{text-align:center;min-width:0}
body[data-menu-section=challenge] #shopOverlay .trainingBrief .challengeSoloModel{width:100%;height:90px;min-height:60px;max-height:110px;margin:0 auto}
body[data-menu-section=challenge] .trainingEquippedLabel{margin:0;color:#6bdded;font:700 9px/1.2 system-ui;letter-spacing:.08em}
body[data-menu-section=challenge] .trainingEquippedName{display:block;color:#e5f6ff;font:700 12px/1.3 system-ui}
body[data-menu-section=challenge] .trainingBriefTitle{color:#7fe6f5;font:700 13px/1.3 system-ui}
body[data-menu-section=challenge] .trainingBriefCopy ul{margin:6px 0 0;padding-left:16px;color:#d0e6ef;font:12px/1.5 system-ui}
@media(orientation:portrait){
 body[data-menu-section=challenge] #mainCampaignBoard:has(.trainingBrief){grid-template-rows:minmax(0,6fr) minmax(180px,4fr)}
 body[data-menu-section=challenge] #shopOverlay .trainingBrief .challengeSoloModel{height:clamp(45px,8vh,78px);min-height:0}
 body[data-menu-section=challenge] .trainingBrief{gap:8px;padding:2px 4px}
}
@media (orientation:portrait){
 body[data-menu-section=challenge] #shopOverlay #chapterRail:has(.challengeRailGroup.is-open){overflow:hidden}
 body[data-menu-section=challenge] #shopOverlay #chapterRail:has(.challengeRailGroup.is-open) .challengeRailGroup:not(.is-open){display:none!important}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroup.is-open{display:flex;flex-direction:column;flex:1 1 0%!important;min-height:0;height:100%;max-height:100%}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroup.is-open .challengeGroupHeading{flex:0 0 auto;min-height:88px;padding:12px 14px;grid-template-rows:auto auto}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroup.is-open .modeCardDescription{display:none}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroup.is-open .challengeRailGroupItems{flex:1 1 0%;min-height:0;overflow-x:auto;overflow-y:hidden}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-training > .chapterRailBtn:only-child{flex:1 1 0%;width:100%;min-width:0;max-width:none}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-bosses:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;overflow:hidden}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-bosses > .chapterRailBtn{width:100%;min-width:0;max-width:none;height:100%;min-height:0;max-height:none;flex:1 1 0%!important}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-bosses .chapterThumb{min-height:0;object-fit:cover}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-challenges:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100% - 8px)/2);align-content:start;gap:8px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-challenges > .chapterRailBtn{width:100%;min-width:0;max-width:none;height:100%;min-height:0;max-height:none;flex:none!important;scroll-snap-align:start}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-challenges .chapterThumb{min-height:0;object-fit:cover}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-challenges .chapterRailLabel{flex:0 0 auto;min-height:32px;box-sizing:border-box}
}

/* Hide the landscape chapter rail chrome without disabling scrolling. */
@media (orientation:landscape){
 body[data-menu-section=challenge] #shopOverlay #chapterRail{scrollbar-width:none;scrollbar-gutter:auto}
 body[data-menu-section=challenge] #shopOverlay #chapterRail::-webkit-scrollbar{display:none;width:0;height:0}
}

/* Keep the launch action with the preview, independent of the stage guide. */
.challengeBriefCollapse,.challengeBriefEdge{display:none}
@media(orientation:landscape){
 body[data-menu-section=challenge] #shopOverlay #mainCampaignBoard{position:relative;overflow:hidden;transition:grid-template-columns 240ms ease}
 body[data-menu-section=challenge] #shopOverlay #mainCampaignBoard.is-briefing-collapsed{grid-template-columns:minmax(150px,40%) minmax(0,1fr) 0px!important;column-gap:0}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail{display:flex;flex-direction:column;min-height:0;height:100%;box-sizing:border-box;padding-bottom:8px;overflow:hidden}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail .challengeHero{position:relative;inset:auto;flex:0 0 auto}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail .challengeDuel,
 body[data-menu-section=challenge] #shopOverlay #chapterDetail .trainingBrief{position:relative;inset:auto;flex:1 1 0%;height:auto;min-height:0}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail #fightBtn{display:block!important;flex:0 0 48px;box-sizing:border-box;align-self:center;width:calc(100% - 16px);height:48px;min-height:48px;margin:6px 0 0!important;padding:4px 8px;white-space:nowrap;font-size:clamp(14px,1.8vw,22px);line-height:1.1}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail #fightBtn .ctaMain{font-size:inherit}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail #fightBtn .ctaMain::after{content:none}
 body[data-menu-section=challenge] #shopOverlay #stageDetail{transition:transform 240ms ease,opacity 240ms ease;min-width:0}
 body[data-menu-section=challenge] #shopOverlay .is-briefing-collapsed #stageDetail{transform:translateX(100%);opacity:0;visibility:hidden;pointer-events:none;padding:0;border:0}
 body[data-menu-section=challenge] .challengeBriefHeader{display:flex;align-items:center;gap:6px}
 body[data-menu-section=challenge] .challengeBriefHeader .stageDetailTitle{flex:1 1 auto;min-width:0}
 body[data-menu-section=challenge] .challengeBriefCollapse{display:grid;place-items:center;flex:0 0 36px;width:36px;height:44px;margin:0;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
 body[data-menu-section=challenge] .challengeBriefCollapse .generatedIcon{width:18px;height:18px}
 body[data-menu-section=challenge] .challengeBriefCollapse:hover{background:#143544}
 body[data-menu-section=challenge] .challengeBriefEdge:not([hidden]){display:grid;place-items:center;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:8;width:34px;height:48px;border:1px solid #69dff6;border-right:0;border-radius:13px 0 0 13px;background:#0b2b3c;color:#a2f1ff;font:32px system-ui;cursor:pointer}
 .challengeBriefCollapse:focus-visible,.challengeBriefEdge:focus-visible{outline:2px solid white;outline-offset:-3px}
}
@media(prefers-reduced-motion:reduce){body[data-menu-section=challenge] #shopOverlay #mainCampaignBoard,body[data-menu-section=challenge] #shopOverlay #stageDetail{transition:none}}

/* Menu panels remain scrollable without visible scrollbar chrome. */
#shopOverlay,#shopOverlay *, .challengeGuideSheet,.challengeGuideSheet *{
 scrollbar-width:none!important;
 scrollbar-gutter:auto!important;
}
#shopOverlay::-webkit-scrollbar,#shopOverlay *::-webkit-scrollbar,
.challengeGuideSheet::-webkit-scrollbar,.challengeGuideSheet *::-webkit-scrollbar{
 display:none!important;width:0!important;height:0!important;
}

@media(orientation:landscape){
 body[data-menu-section=challenge] #shopOverlay #mainCampaignBoard #chapterDetail .challengeHeroCopy{padding-left:14px!important;padding-right:14px!important;box-sizing:border-box}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail #fightBtn{width:min(72%,320px)!important;min-width:0!important;max-width:320px!important;align-self:center;margin-left:auto!important;margin-right:auto!important}
}

/* Landscape category rail: four compact choices, or one full-height disclosure. */
@media(orientation:landscape){
 body[data-menu-section=challenge] #shopOverlay #chapterRail{display:flex;flex-direction:column;gap:6px;overflow:hidden;min-height:0;height:100%;box-sizing:border-box}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroup{flex:1 1 0%!important;min-height:0;margin:0;overflow:hidden}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupHeading{height:100%;min-height:0!important;margin:0;padding:8px 12px;box-sizing:border-box;grid-template-rows:auto auto;align-content:center}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .modeCardDescription{display:none}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupHeading strong{font-size:clamp(14px,1.8vw,20px)}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeGroupIcon{width:32px;height:32px}
 body[data-menu-section=challenge] #shopOverlay #chapterRail:has(.is-open) .challengeRailGroup:not(.is-open){display:none!important}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .challengeRailGroup.is-open{display:flex;flex-direction:column;height:100%;max-height:100%}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .is-open .challengeGroupHeading{flex:0 0 68px;height:68px}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .is-open .challengeRailGroupItems:not([hidden]){display:flex;flex-direction:column;flex:1 1 0%;min-height:0;overflow-y:auto;overflow-x:hidden;gap:6px}
 body[data-menu-section=challenge] #shopOverlay #chapterRail .is-open .chapterRailBtn{flex-shrink:0}
}

@media(orientation:landscape){
 body[data-menu-section=challenge] #shopOverlay #chapterRail .is-open #challengeRailGroup-challenges:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100% - 8px)/2);align-content:start;gap:8px;overflow-x:hidden;overflow-y:auto}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-challenges > .chapterRailBtn{display:flex;flex-direction:column;width:100%;min-width:0;max-width:none;height:100%;min-height:0;max-height:none;box-sizing:border-box;overflow:hidden;padding:5px!important;gap:3px}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-challenges .chapterThumb{width:100%;height:48px;min-height:0;flex:1 1 0%;object-fit:cover}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-challenges .chapterRailLabel{flex:0 0 auto;font-size:11px;line-height:1.2}
 body[data-menu-section=challenge] #shopOverlay #chapterRail #challengeRailGroup-challenges .chapterRailKind{font-size:9px;line-height:1.2}
}