/* Portrait Challenges: equal top/bottom halves after a shared appbar and Start Battle CTA. */
.generatedIcon{
  display:inline-block;width:22px;height:22px;flex:0 0 22px;
  background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain
}
.icon-story{background-image:url(icons/story.webp)}
.icon-training{background-image:url(icons/training.webp)}
.icon-challenges{background-image:url(icons/challenges.webp)}
.icon-bosses{background-image:url(icons/bosses.webp)}
.icon-guide{background-image:url(icons/guide.webp)}
.icon-check{background-image:url(icons/check.webp)}
.icon-lock{background-image:url(icons/lock-clear-v2.webp);background-size:80%}
.icon-back{background-image:url(icons/back.webp)}
.icon-down{background-image:url(icons/down.webp)}
.icon-gear{background-image:url(icons/gear.webp)}
.icon-coin{background-image:url(icons/coin.webp)}
.icon-close{background-image:url(icons/close.webp)}
.icon-view{background-image:url(icons/view.webp)}
.icon-rotate{background-image:url(icons/rotate.webp)}
.icon-zoom{background-image:url(icons/zoom.webp)}
.icon-replay{background-image:url(icons/replay.webp)}
.icon-next{background-image:url(icons/back.webp);transform:rotate(180deg)}
#shopOverlay .navBackArrow.generatedIcon{width:22px;height:22px;transform:none;font-size:0}
#shopOverlay #shopSettingsBtn .settingsGear.generatedIcon{
  width:26px;height:26px;flex:0 0 26px;
  filter:drop-shadow(0 0 1px #7af6ff)
}
#shopOverlay #shopHead .moneyChip{gap:6px;display:inline-flex;align-items:center}
#shopOverlay #shopHead .moneyChip .generatedIcon{width:18px;height:18px;flex:0 0 18px}
#shopOverlay .workshopGesture .generatedIcon{width:16px;height:22px;flex:0 0 16px}
#shopOverlay .workshopSkinStep .generatedIcon{width:16px;height:16px}
#shopOverlay .rosterViewingBadge .generatedIcon,
#shopOverlay [data-roster-status] .generatedIcon{width:16px;height:16px;flex:0 0 16px}
#shopOverlay .cardbtn.buy .generatedIcon,
#shopOverlay .cardbtn.poor .generatedIcon{width:16px;height:16px;flex:0 0 16px;vertical-align:middle}
/* Keep the equipped tick on the same center line as its label. */
#shopOverlay #portraitDetails .cardbtn.equipped{display:flex;align-items:center;justify-content:center;gap:6px}
#shopOverlay #portraitDetails .cardbtn.equipped .generatedIcon{display:block;width:16px;height:16px;flex:0 0 16px;margin:0;vertical-align:middle}
#shopOverlay .compareToggle .generatedIcon{width:14px;height:14px}
.skillPreviewDialog [data-close] .generatedIcon,
.skillPreviewDialog [data-replay] .generatedIcon{width:18px;height:18px}

.challengeGuideSheet{
  position:fixed!important;inset:auto 8px 0 8px;top:auto!important;left:8px!important;right:8px!important;bottom:0!important;
  width:auto;max-width:650px;max-height:78dvh;margin:0 auto!important;transform:none!important;
  box-sizing:border-box;padding:18px 20px 24px;border:1px solid #4a687e;border-radius:20px 20px 0 0;
  background:linear-gradient(145deg,#193249,#091c2b);color:#e2f4ff;overflow:auto
}
.challengeGuideSheet[open]{animation:guideRise .24s ease-out}
.challengeGuideSheet::backdrop{background:rgba(0,0,0,.5)}
.challengeGuideSheet::before{content:'';display:block;width:36px;height:4px;border-radius:3px;background:#7b93a5;margin:0 auto 8px}
.challengeGuideSheet header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.challengeGuideSheet h2{margin:0;font:700 20px/1.2 system-ui}
.challengeGuideSheet .guideClose{
  display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #5ca4bb;border-radius:50%;background:#17394b
}
.challengeGuideSheet .guideClose .generatedIcon{width:18px;height:18px}
.guideBody{font:14px/1.5 system-ui}
.guideBody .stageDetailContent{display:block}
.guideBody .stageDetailTitle{font:700 18px system-ui}
.guideBody p{margin:10px 0}
.guideBody .stageDetailWaves,.guideBody .stageDetailReward{padding:10px;border:1px solid #35546b;border-radius:8px;background:#173046}
.guideBody li{margin:8px 0;padding:8px;border-radius:7px;background:#183044}
.challengeGuideSheet :focus-visible,#chapterRail button:focus-visible{outline:2px solid #85e8ff;outline-offset:-3px}
@keyframes guideRise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.challengeGuideSheet[open]{animation:none}}

@media (orientation:portrait){
  body[data-menu-section=challenge] #shopOverlay #shopPanel{
    display:grid!important;grid-template-columns:44px minmax(0,1fr) 88px;
    grid-template-rows:44px minmax(0,1fr) 48px;gap:6px 0;height:100dvh;max-height:100dvh;
    padding:calc(var(--cs-safe-top,0px) + 8px) 8px calc(var(--cs-safe-bottom,0px) + 8px)!important;overflow:hidden
  }
  body[data-menu-section=challenge] #shopOverlay #shopHead{display:contents!important}
  body[data-menu-section=challenge] #shopHead .jpban,
  body[data-menu-section=challenge] #campaignMode{display:none!important}
  body[data-menu-section=challenge] #shopOverlay #shopHead [data-action="shop-home"]{
    grid-column:1;grid-row:1;width:44px;min-width:44px;min-height:44px;height:44px;margin:0;align-self:center
  }
  body[data-menu-section=challenge] #menuNavigation{
    grid-column:2;grid-row:1;padding:0 4px;min-width:0
  }
  body[data-menu-section=challenge] #menuNavigation nav{display:flex;gap:4px}
  body[data-menu-section=challenge] #menuNavigation nav .cs-btn{
    flex:1;min-width:0;min-height:44px;padding:4px 2px;font-size:11px;letter-spacing:0;white-space:nowrap
  }
  body[data-menu-section=challenge] #shopOverlay #shopHead .shopHeadMeta{
    grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:4px
  }
  body[data-menu-section=challenge] #shopOverlay .moneyChip{min-height:44px;padding:0 6px;font-size:11px}
  body[data-menu-section=challenge] #shopSettingsBtn{width:40px;min-width:40px;min-height:44px;height:44px;padding:0}
  body[data-menu-section=challenge] #shopOverlay #shopScroll{
    display:block!important;grid-column:1/-1;grid-row:2;min-height:0;overflow:hidden;padding:0;flex:unset
  }
  body[data-menu-section=challenge] #shopOverlay #fightBtn{
    grid-column:1/-1;grid-row:3;width:100%;margin:0;min-height:48px;height:48px;padding:4px;
    border-radius:10px;border:1px solid #fff0ad;background:linear-gradient(#f6d979,#d9a936);
    font:800 17px system-ui;letter-spacing:.4px
  }
  body[data-menu-section=challenge] #fightBtn .ctaMeta{display:none!important}
  body[data-menu-section=challenge] #mainCampaignProgress,
  body[data-menu-section=challenge] .startHint,
  body[data-menu-section=challenge] #stageDetail{display:none!important}

  body[data-menu-section=challenge] #mainCampaignBoard{
    display:grid!important;grid-template-columns:minmax(0,1fr);
    grid-template-areas:none;grid-template-rows:minmax(0,7fr) minmax(0,3fr);gap:8px;height:100%;min-height:0;overflow:hidden
  }

  body[data-menu-section=challenge] #chapterRail{
    grid-area:1 / 1;display:flex!important;flex-direction:column;min-height:0;max-height:none!important;height:100%;
    overflow:hidden;padding:0;gap:5px;scrollbar-width:none
  }
  body[data-menu-section=challenge] #chapterRail .challengeRailGroup{
    box-sizing:border-box;flex:0 0 auto;min-width:0;width:100%;overflow:hidden;gap:0;
    border:1px solid #2c4c61;border-radius:9px;background:linear-gradient(140deg,#142b3d,#0b1d2c)
  }
  body[data-menu-section=challenge] #chapterRail .challengeRailGroup.is-open{
    flex:1 1 0%!important;min-height:0;display:flex!important;flex-direction:column
  }
  body[data-menu-section=challenge] #chapterRail .challengeGroupArt{display:none;pointer-events:none}
  body[data-menu-section=challenge] #chapterRail .challengeGroupHeading{
    display:grid;grid-template-columns:22px minmax(0,1fr) 22px;grid-template-rows:auto auto;align-items:center;gap:2px 8px;
    flex:0 0 44px;min-height:44px;height:44px;margin:0;padding:0 8px;border:0;border-radius:0;
    background:transparent;color:#b4e9f4
  }
  body[data-menu-section=challenge] #chapterRail .challengeGroupHeading > span{
    font-size:0
  }
  body[data-menu-section=challenge] #chapterRail .challengeGroupHeading .challengeGroupIcon{grid-column:1;grid-row:1/3}
  body[data-menu-section=challenge] #chapterRail .challengeGroupHeading strong{grid-column:2;grid-row:1;font:700 12px/1.2 system-ui;text-align:left}
  body[data-menu-section=challenge] #chapterRail .challengeGroupHeading small{grid-column:2;grid-row:2;font:9px/1.2 system-ui;color:#a6bdca;white-space:nowrap}
  body[data-menu-section=challenge] #chapterRail .challengeGroupHeading .challengeGroupChevron{grid-column:3;grid-row:1/3}
  body[data-menu-section=challenge] #chapterRail .challengeGroupHeading[aria-expanded=true]{
    border-bottom:1px solid #2c5264;background:transparent
  }
  body[data-menu-section=challenge] #chapterRail .challengeGroupHeading .icon-back{transform:rotate(180deg)}
  body[data-menu-section=challenge] #chapterRail .challengeRailGroupItems[hidden]{display:none!important}
  body[data-menu-section=challenge] #chapterRail .challengeRailGroupItems:not([hidden]){
    display:flex;flex:1 1 0%;flex-direction:row;align-items:stretch;min-height:0;margin:0 6px 6px;
    padding:6px 0 2px;gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none
  }
  body[data-menu-section=challenge] #chapterRail .challengeRailGroupItems::-webkit-scrollbar{display:none}

  body[data-menu-section=challenge] #chapterRail .chapterRailBtn,
  body[data-menu-section=challenge] #chapterRail .unifiedChallenge{
    position:relative;box-sizing:border-box;display:flex!important;flex:0 0 132px;flex-direction:column!important;
    justify-content:flex-start;align-items:stretch;gap:0;width:132px;min-width:132px;min-height:0;max-height:100%;
    margin:0;padding:0!important;border:1px solid #385468;border-radius:7px;background:#0b1c2b;
    box-shadow:none;overflow:hidden;scroll-snap-align:start
  }
  body[data-menu-section=challenge] #chapterRail .chapterThumb{
    display:block!important;position:static!important;width:100%!important;height:auto!important;
    flex:1 1 0;min-height:48px;object-fit:cover;border:0;border-radius:0;margin:0
  }
  body[data-menu-section=challenge] #chapterRail .chapterRailCopy{display:block;flex:0 0 auto;padding:5px;min-width:0}
  body[data-menu-section=challenge] #chapterRail .chapterRailLabel{
    display:block;font:700 11px/1.25 system-ui;white-space:normal;overflow-wrap:anywhere
  }
  body[data-menu-section=challenge] #chapterRail .unifiedChallenge>.chapterRailLabel{padding:5px}
  body[data-menu-section=challenge] #chapterRail .chapterRailKind,
  body[data-menu-section=challenge] #chapterRail .unifiedChallenge>.chapterRailKind{display:none}
  body[data-menu-section=challenge] #chapterRail .chapterRailMetaRow{display:flex;justify-content:space-between;gap:5px;margin-top:4px}
  body[data-menu-section=challenge] #chapterRail .chapterRailMeta{font:11px/1 system-ui;color:#b4d9e6}
  body[data-menu-section=challenge] #chapterRail .venuePips{display:flex;flex:1;align-items:center;gap:3px}
  body[data-menu-section=challenge] #chapterRail .venuePip{flex:1;height:3px;border-radius:2px;background:#314958}
  body[data-menu-section=challenge] #chapterRail .venuePip.is-on{background:#67d2e5}
  body[data-menu-section=challenge] #chapterRail .chapterRailBtn[aria-pressed=true]{
    border:2px solid #ebc966;background:#182f40;box-shadow:0 0 8px #e6b94625
  }
  body[data-menu-section=challenge] #chapterRail .chapterRailBtn .cardStatusIcon{
    position:absolute;top:4px;right:4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#123040;border:1px solid #4d7388
  }
  body[data-menu-section=challenge] #chapterRail .chapterRailBtn.is-locked .cardStatusIcon{background:#07141f;border-color:#7ad7ea}
  body[data-menu-section=challenge] #chapterRail .chapterRailBtn .cardStatusIcon .generatedIcon{width:16px;height:22px;flex:0 0 16px}
  body[data-menu-section=challenge] #chapterRail .chapterRailBtn.is-locked .chapterThumb{filter:brightness(.55)}
  body[data-menu-section=challenge] #chapterRail .venueLock{display:none}

  body[data-menu-section=challenge] .challengeLower{
    grid-area:2 / 1;display:flex;flex-direction:column;min-height:0;overflow:hidden;gap:5px
  }
  body[data-menu-section=challenge] .challengeLower #chapterDetail{
    order:0;display:flex;flex-direction:column;position:relative;flex:1 1 0%!important;min-height:0;
    height:auto!important;max-height:none!important;overflow:hidden;padding:8px;border:0;border-radius:9px;
    background:radial-gradient(ellipse at 50% 80%,#143a51 0,#0b1b2a 70%)
  }
  body[data-menu-section=challenge] #shopOverlay #chapterDetail .challengeHero{
    box-sizing:border-box!important;flex:0 0 28px;height:28px!important;min-height:28px!important;max-height:30px!important;
    padding:0!important;margin:0!important;background:none!important
  }
  body[data-menu-section=challenge] #shopOverlay #chapterDetail .challengeHeroCopy{position:static!important;padding:0!important}
  body[data-menu-section=challenge] .challengeVenueTitle{font:700 16px/1.2 system-ui!important;letter-spacing:0!important;margin:0}
  body[data-menu-section=challenge] .challengeVenueTag,
  body[data-menu-section=challenge] .challengeInspectHint,
  body[data-menu-section=challenge] .duelStats,
  body[data-menu-section=challenge] .duelRole{display:none!important}
  body[data-menu-section=challenge] .challengeDuel{
    position:relative!important;inset:auto!important;flex:1 1 0%;min-height:78px;height:auto;gap:6px;align-items:center
  }
  body[data-menu-section=challenge] .challengeLower .duelTopArt[data-challenge-bey]{
    width:min(42vw,150px);height:min(22vh,125px);max-width:100%
  }
  body[data-menu-section=challenge] .challengeLower .challengeSoloModel{
    flex:1 1 auto;width:min(48vw,160px);min-height:78px;max-height:100%;height:auto;margin:auto
  }
  body[data-menu-section=challenge] .duelName{font:600 11px/1.2 system-ui}
  body[data-menu-section=challenge] .unifiedChallengeEquipped{flex:0 0 auto;margin:2px 0;font:11px system-ui}
  body[data-menu-section=challenge] .challengeLower #chapterStages{
    order:1;position:static!important;display:flex!important;flex:0 0 auto;width:100%;margin:0;padding:0;
    min-height:40px;overflow-x:auto;gap:5px;scrollbar-width:none
  }
  body[data-menu-section=challenge] #chapterStages .stageCard{
    flex:1 0 110px;width:auto;min-width:110px;min-height:44px;padding:5px 5px 5px 28px;
    border-radius:9px;font:600 11px/1.15 system-ui
  }
  body[data-menu-section=challenge] #chapterStages .stageCardLesson,
  body[data-menu-section=challenge] #chapterStages .stageCardStatus{display:none}
  body[data-menu-section=challenge] .challengeLower .challengeBrief{
    order:2;flex:0 0 auto;position:relative;box-sizing:border-box;min-height:48px;
    padding:8px 108px 8px 9px;border:1px solid #29485b;border-radius:10px;
    background:linear-gradient(120deg,#102b3e,#0b1d2b);font:11px/1.3 system-ui
  }
  body[data-menu-section=challenge] .challengeBrief p{margin:2px 0}
  body[data-menu-section=challenge] .challengeBrief p:first-child{font-weight:700;font-size:12px}
  body[data-menu-section=challenge] .challengeBrief button{
    position:absolute;right:5px;top:5px;display:flex;align-items:center;justify-content:center;gap:4px;
    min-height:40px;padding:4px 8px;border:1px solid #53c4d8;border-radius:8px;background:#153c54;color:#e3f7ff;font:600 11px system-ui
  }
}

/* Workshop is a collection / inspection screen; battle launch belongs to Challenges. */
body[data-menu-section=workshop] #shopOverlay #fightBtn{display:none!important}

@media (orientation:portrait) and (max-height:730px){
  body[data-menu-section=challenge] #chapterRail .challengeGroupHeading{min-height:40px;height:40px;flex-basis:40px}
  body[data-menu-section=challenge] .challengeLower .duelTopArt[data-challenge-bey]{height:86px}
  body[data-menu-section=challenge] .challengeLower .challengeSoloModel{min-height:78px}
}

@media (orientation:portrait) and (max-height:700px){
  body[data-menu-section=challenge] #chapterRail .chapterRailBtn .chapterThumb{display:block!important}
  body[data-menu-section=challenge] #chapterRail .chapterRailBtn,
  body[data-menu-section=challenge] #chapterRail .unifiedChallenge{
    flex:0 0 132px!important;max-width:132px;min-width:132px;padding:0!important;overflow:hidden
  }
  body[data-menu-section=challenge] .duelTopArt[data-challenge-bey]{width:min(42vw,140px)!important;height:min(18vh,96px)!important}
  body[data-menu-section=challenge] .challengeHero{display:flex!important}
}

@media (orientation:landscape){
  body[data-menu-section=challenge] #shopOverlay #shopPanel{
    display:grid!important;grid-template-columns:44px minmax(0,1fr) 88px;
    grid-template-rows:44px minmax(0,1fr) 48px;gap:6px 0;height:100dvh;max-height:100dvh;
    padding:8px!important;overflow:hidden
  }
  body[data-menu-section=challenge] #shopOverlay #shopHead{display:contents!important}
  body[data-menu-section=challenge] #shopHead .jpban,
  body[data-menu-section=challenge] #campaignMode,
  body[data-menu-section=challenge] #menuHeading{display:none!important}
  body[data-menu-section=challenge] #shopOverlay #shopHead [data-action="shop-home"]{
    grid-column:1;grid-row:1;width:44px;min-width:44px;min-height:44px;height:44px;margin:0;align-self:center
  }
  body[data-menu-section=challenge] #menuNavigation{
    display:block;grid-column:2;grid-row:1;padding:0 4px;min-width:0
  }
  body[data-menu-section=challenge] #menuNavigation nav{display:flex;gap:4px}
  body[data-menu-section=challenge] #menuNavigation nav .cs-btn{
    flex:1;min-width:0;min-height:44px;padding:4px 2px;font-size:11px;white-space:nowrap
  }
  body[data-menu-section=challenge] #shopOverlay #shopHead .shopHeadMeta{
    grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:4px
  }
  body[data-menu-section=challenge] #shopOverlay #shopScroll{
    display:block!important;grid-column:1/-1;grid-row:2;min-height:0;overflow:hidden;padding:0
  }
  body[data-menu-section=challenge] #shopOverlay #fightBtn{
    grid-column:1/-1!important;grid-row:3!important;width:100%!important;max-width:none!important;
    margin:0!important;min-height:48px;height:48px;justify-self:stretch!important
  }
  body[data-menu-section=challenge] #shopOverlay #fightBtn .ctaMeta{display:none!important}
  body[data-menu-section=challenge] #mainCampaignBoard{
    display:grid!important;grid-template-columns:minmax(168px,26%) minmax(0,1fr) minmax(170px,24%);
    grid-template-rows:minmax(0,1fr);height:100%;min-height:0;overflow:hidden;gap:8px
  }
  body[data-menu-section=challenge] #chapterRail{
    min-width:0;min-height:0;max-height:none;overflow:auto;height:100%
  }
  body[data-menu-section=challenge] #chapterDetail{
    position:relative;display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden
  }
  body[data-menu-section=challenge] #chapterDetail .challengeHero{
    position:relative!important;inset:auto!important;flex:0 0 auto;min-height:28px;height:auto;background:none!important
  }
  body[data-menu-section=challenge] #chapterDetail .challengeHeroCopy{position:relative!important;inset:auto!important;padding:0}
  body[data-menu-section=challenge] .challengeInspectHint,
  body[data-menu-section=challenge] .duelStats,
  body[data-menu-section=challenge] .duelRole{display:none!important}
  body[data-menu-section=challenge] #chapterDetail .challengeDuel{
    position:relative!important;inset:auto!important;flex:1 1 0%;min-height:0
  }
  body[data-menu-section=challenge] #stageDetail{
    display:flex!important;flex-direction:column;min-height:0;overflow:auto
  }
  body[data-menu-section=challenge] .challengeLower{display:contents}
  body[data-menu-section=challenge] .startHint{display:none!important}
}

/* The taller landscape layout keeps its action inside the detail card. */
@media (orientation:landscape) and (min-height:431px){
  body[data-menu-section=challenge] #shopOverlay #shopPanel{
    grid-template-rows:44px minmax(0,1fr);
  }
  body[data-menu-section=challenge] #shopOverlay #stageDetail #fightBtn{
    flex:0 0 48px;padding:4px 8px;font-size:clamp(14px,1.8vw,22px);white-space:nowrap;letter-spacing:1px;
  }
}
@media (orientation:landscape) and (max-height:430px){
  body[data-menu-section=challenge] #shopOverlay #chapterDetail .challengeHeroCopy{
    padding:6px 10px 9px!important;box-sizing:border-box;
  }
  body[data-menu-section=challenge] #shopOverlay #chapterDetail .challengeVenueTitle{
    line-height:1.12;overflow-wrap:anywhere;
  }
  body[data-menu-section=challenge] #shopOverlay #fightBtn .ctaMain{
    font-size:0;
  }
  body[data-menu-section=challenge] #shopOverlay #fightBtn .ctaMain::after{
    content:'START';font-size:clamp(16px,2.2vw,24px);letter-spacing:1px;
  }
  body[data-menu-section=challenge] #shopOverlay #shopPanel{
    grid-template-rows:44px minmax(0,1fr)!important;
  }
  body[data-menu-section=challenge] #shopOverlay > #fightBtn,
  body[data-menu-section=challenge] #shopOverlay #shopPanel > #fightBtn{
    display:none!important;
  }
  body[data-menu-section=challenge] #mainCampaignBoard{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-areas:"arena vs";grid-template-rows:minmax(0,1fr);column-gap:10px
  }
  body[data-menu-section=challenge] #stageDetail{display:none!important}
  body[data-menu-section=challenge] .duelTopArt[data-challenge-bey]{width:min(18vw,110px)!important;height:min(22vh,96px)!important}
}
/* Portrait stages sit beside the selected chapter in its horizontal card rail. */
@media (orientation:portrait){
 body[data-menu-section=challenge] #chapterRail #chapterStages.stages{display:grid!important;grid-template-columns:minmax(0,1fr);flex:0 0 156px;width:156px;align-self:stretch;gap:5px;padding:0 4px;overflow:visible;scroll-snap-align:start}
 body[data-menu-section=challenge] #chapterRail #chapterStages .stageCard{width:100%;min-height:48px;flex:none;padding:6px 18px 6px 28px}
}
/* Keep portrait matchup text inside its card at the compact 7:3 height. */
@media (orientation:portrait){
 body[data-menu-section=challenge] #shopOverlay #chapterDetail .challengeHero{display:flex;align-items:center;flex:0 0 auto;min-height:32px!important;height:auto!important;max-height:none!important;padding:5px 8px!important}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail .challengeHeroCopy{width:100%;min-width:0;transform:none!important}
 body[data-menu-section=challenge] #shopOverlay #chapterDetail .challengeVenueTitle{margin:0!important;line-height:1.25!important;overflow-wrap:anywhere;white-space:normal}
 body[data-menu-section=challenge] .challengeLower #chapterDetail{padding-bottom:10px;box-sizing:border-box}
 body[data-menu-section=challenge] .challengeLower .challengeDuel{min-height:0;overflow:hidden}
 body[data-menu-section=challenge] .challengeLower .duelSide{min-height:0;max-height:100%;box-sizing:border-box;padding-bottom:6px}
 body[data-menu-section=challenge] .challengeLower .duelTopArt[data-challenge-bey]{min-height:0;flex:1 1 auto}
 body[data-menu-section=challenge] .challengeLower .duelName{flex:0 0 auto;margin:2px 0 0;line-height:1.3;white-space:normal;text-align:center}
}
/* Selected chapter and its stages form one nested portrait card. */
@media (orientation:portrait){
 body[data-menu-section=challenge] #chapterRail .chapterNestedCard{display:flex;flex-direction:column;flex:0 0 180px;min-width:0;min-height:0;gap:6px;padding:4px;box-sizing:border-box;border:1px solid #d9b64f;border-radius:10px;background:#102635;overflow-y:auto;scroll-snap-align:start;scrollbar-width:none}
 body[data-menu-section=challenge] #chapterRail .chapterNestedCard > .chapterRailBtn{flex:0 0 132px;width:100%;min-width:0;max-height:none}
 body[data-menu-section=challenge] #chapterRail .chapterNestedCard #chapterStages.stages{flex:0 0 auto;width:100%;padding:0;gap:5px;align-self:stretch}
 body[data-menu-section=challenge] #chapterRail .chapterNestedCard #chapterStages .stageCard{min-height:54px;padding:6px 18px 6px 28px}
}
/* The closed category overview fills its allocated portrait region equally. */
@media (orientation:portrait){
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeRailGroup{
    position:relative;display:flex!important;flex-direction:column;flex:1 1 0%!important;min-height:0;
    background:#081722;
  }
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeGroupArt.is-portrait{
    display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 42%;z-index:0
  }
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeGroupArt.is-landscape{display:none}
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeGroupHeading{
    position:relative;z-index:1;display:grid;grid-template-columns:28px minmax(0,1fr) 22px;grid-template-rows:auto auto;
    align-items:center;column-gap:10px;row-gap:3px;flex:1 1 auto;height:auto;min-height:0;max-height:none;padding:12px 14px;
    background:linear-gradient(90deg,rgba(5,19,30,.92) 0%,rgba(5,19,30,.62) 38%,rgba(5,19,30,.16) 68%,rgba(5,19,30,.08) 100%)
  }
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeGroupHeading[aria-expanded=true]{
    border-bottom:0;background:linear-gradient(90deg,rgba(5,19,30,.92) 0%,rgba(5,19,30,.62) 38%,rgba(5,19,30,.16) 68%,rgba(5,19,30,.08) 100%)
  }
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeGroupHeading .challengeGroupIcon{width:22px;height:22px;flex:0 0 22px}
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeGroupHeading strong{font-size:15px;line-height:1.2}
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeGroupHeading small{font-size:11px;color:#c3d7e2}
}

@media (orientation:landscape){
  body[data-menu-section=challenge] #chapterRail .challengeRailGroup{position:relative;overflow:hidden}
  body[data-menu-section=challenge] #chapterRail .challengeGroupArt.is-portrait{display:none}
  body[data-menu-section=challenge] #chapterRail .challengeRailGroup:not(.is-open) .challengeGroupArt.is-landscape{
    display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 40%;z-index:0
  }
  body[data-menu-section=challenge] #chapterRail .challengeRailGroup:not(.is-open) .challengeGroupHeading{
    position:relative;z-index:1;
    background:linear-gradient(90deg,rgba(5,19,30,.9) 0%,rgba(5,19,30,.55) 42%,rgba(5,19,30,.12) 78%)
  }
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeRailGroup{
    flex:1 1 0%!important;min-height:0
  }
  body[data-menu-section=challenge] #chapterRail:not(:has(.challengeRailGroup.is-open)) .challengeGroupHeading{
    flex:1 1 auto;height:auto;min-height:48px;max-height:none
  }
}

/* Keep Workshop on its own two-axis composition; Challenges owns the campaign rules above. */
@media (orientation:landscape){
  body[data-menu-section=workshop] #shopOverlay #shopScroll{min-height:0;overflow:hidden}
  body[data-menu-section=workshop] #shopOverlay #shopScroll{padding-top:52px!important;box-sizing:border-box}
  body[data-menu-section=workshop] #componentWorkshopHost{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:8px}
  body[data-menu-section=workshop] #portraitDetails{min-width:0;min-height:0;overflow:auto}
  body[data-menu-section=workshop] #portraitHero{padding-top:48px;box-sizing:border-box;min-height:0;overflow:hidden}
  body[data-menu-section=workshop] #portraitDetails .workshopRoster{min-height:0;overflow:auto}
}
@media (orientation:portrait){
  body[data-menu-section=workshop] #shopOverlay #shopScroll{min-height:0;overflow:hidden}
  body[data-menu-section=workshop] #componentWorkshopHost{display:flex;flex-direction:column;min-height:0;height:100%;gap:6px}
  body[data-menu-section=workshop] #portraitDetails{min-height:0;overflow:auto}
}
@media (orientation:landscape){body[data-menu-section=workshop] #portraitHero{position:relative!important;padding:8px 10px 0!important;box-sizing:border-box}body[data-menu-section=workshop] #portraitHeroLabel{position:absolute;left:10px;top:8px;width:54%;max-width:54%;z-index:5}body[data-menu-section=workshop] #portraitHeroLabel strong{font-size:clamp(18px,3vw,30px);line-height:1.05}body[data-menu-section=workshop] #portraitHero>.workshopRadar{top:8px;right:8px;width:min(36%,190px);min-width:130px}body[data-menu-section=workshop] #portraitHero>.workshopRadar .workshopRatingLabel{display:block;color:#d9f5ff;font-size:10px;font-weight:800;letter-spacing:.08em}}
@media (orientation:landscape){body[data-menu-section=workshop] #portraitHero>.workshopRadar{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarLabels text{display:inline!important;visibility:visible!important;font-size:12px!important}body[data-menu-section=workshop] #portraitHero>.workshopRadar::after{content:none!important;display:none!important}}
@media (orientation:landscape){
  body[data-menu-section=workshop] #shopOverlay #workshopCompare{
    position:absolute!important;left:14px;bottom:8px;width:min(46%,430px);z-index:8;
    margin:0!important;background:rgba(8,24,36,.9);backdrop-filter:blur(4px);
  }
  body[data-menu-section=workshop] #shopOverlay #shopScroll{position:relative!important}
}
@media (orientation:landscape){body[data-menu-section=workshop] #shopOverlay #workshopCompare{left:auto!important;right:14px!important;bottom:8px!important;width:min(48%,440px)!important}body[data-menu-section=workshop] #workshopCompare .workshopCompareHead{justify-content:flex-end}body[data-menu-section=workshop] #workshopCompare .workshopCompareHide{margin-left:auto;min-width:28px;width:28px;padding:0}}
@media (orientation:landscape){body[data-menu-section=workshop] #portraitHero>.workshopRadar{width:min(48%,240px)!important;min-width:210px!important;padding:4px!important;overflow:visible!important}body[data-menu-section=workshop] #portraitHero>.workshopRadar svg{width:100%!important;height:132px!important;overflow:visible!important}body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarLabels{font-size:13px!important}}
@media (orientation:landscape){body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarLabels text{ text-anchor:middle!important }}
@media (orientation:landscape){body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarLabels{transform:scale(.86);transform-box:fill-box;transform-origin:center}}
@media (orientation:landscape){body[data-menu-section=workshop] #portraitHero>.workshopRadar{top:0!important;right:0!important;padding:10px!important}body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarLabels text{letter-spacing:.8px}}
@media (orientation:landscape){body[data-menu-section=workshop] #shopOverlay #portraitHero>.workshopRadar{position:absolute!important;top:4px!important;right:4px!important;left:auto!important;bottom:auto!important}}
@media (orientation:landscape){body[data-menu-section=workshop] #workshopCompare.is-collapsed{left:4px!important;right:auto!important;width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;border-radius:0 18px 18px 0!important;overflow:hidden}body[data-menu-section=workshop] #workshopCompare.is-collapsed .workshopCompareHead{width:38px;height:38px;justify-content:center}body[data-menu-section=workshop] #workshopCompare.is-collapsed .workshopCompareHide{font-size:0;min-width:38px;width:38px;height:38px;margin:0;padding:0;border:0}body[data-menu-section=workshop] #workshopCompare.is-collapsed .workshopCompareHide::after{content:'‹';font-size:24px;line-height:1;color:#8beeff}}
@media (orientation:landscape){body[data-menu-section=workshop] #shopOverlay #portraitHero>.workshopRadar{top:-14px!important;right:-24px!important;width:210px!important;min-width:210px!important;padding:6px 4px 2px!important}body[data-menu-section=workshop] #shopOverlay #portraitHero>.workshopRadar svg{height:165px!important}body[data-menu-section=workshop] #shopOverlay #portraitHero>.workshopRadar .radarLabels{font-size:13px!important}}
@keyframes workshopRadarReveal{0%{opacity:.15;transform:scale(.72)}55%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@media (orientation:landscape){body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarShape{transform-box:fill-box;transform-origin:center;animation:workshopRadarReveal .55s cubic-bezier(.2,.8,.2,1) both}body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarLabels{animation:workshopRadarReveal .4s ease-out both;animation-delay:.08s}}
@media (prefers-reduced-motion:reduce){body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarShape,body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarLabels{animation:none!important}}
body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarGrid{stroke:var(--radar-accent,#537286)!important}body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarShape{fill:color-mix(in srgb,var(--radar-accent,#53d9f9) 28%,transparent)!important;stroke:var(--radar-accent,#80eaff)!important;filter:drop-shadow(0 0 5px var(--radar-accent,#80eaff))}
@media (orientation:landscape){body[data-menu-section=workshop] #shopOverlay #portraitHero{overflow:visible!important}body[data-menu-section=workshop] #shopOverlay #portraitHeroLabel{width:48%!important;max-width:48%!important;overflow:hidden}body[data-menu-section=workshop] #shopOverlay #portraitHero>.workshopRadar{width:210px!important;min-width:210px!important;max-width:210px!important;right:-24px!important;overflow:visible!important}body[data-menu-section=workshop] #shopOverlay #portraitHero>.workshopRadar svg{max-width:100%!important}body[data-menu-section=workshop] #shopOverlay #portraitHero>.workshopRadar .radarLabels{font-size:13px!important}}
body[data-menu-section=workshop] #workshopCompare .radarLabels{display:none!important}body[data-menu-section=workshop] #workshopCompare .compactRatings{display:flex!important;justify-content:center;gap:5px;flex-wrap:wrap;font:700 9px/1.2 system-ui;color:#d9f5ff}body[data-menu-section=workshop] #workshopCompare .compactRatings span{padding:2px 4px;border-radius:4px;background:color-mix(in srgb,var(--radar-accent,#53d9f9) 20%,transparent);color:var(--radar-accent,#bdefff)}body[data-menu-section=workshop] #workshopCompare .radarGrid{stroke:var(--radar-accent,#537286)!important}body[data-menu-section=workshop] #workshopCompare .radarShape{fill:color-mix(in srgb,var(--radar-accent,#53d9f9) 28%,transparent)!important;stroke:var(--radar-accent,#80eaff)!important;filter:drop-shadow(0 0 4px var(--radar-accent,#80eaff))}
body[data-menu-section=workshop] #workshopCompare .workshopRadar{display:none!important}body[data-menu-section=workshop] #portraitHero>.workshopRadar .radarLabels text{paint-order:stroke fill;stroke:#06111c;stroke-width:3px;stroke-linejoin:round}
@media (orientation:landscape){body[data-menu-section=workshop] #shopOverlay #workshopCompare{left:auto!important;right:max(8px,env(safe-area-inset-right,0px))!important;bottom:max(8px,env(safe-area-inset-bottom,0px))!important;width:calc(42% - 8px)!important;max-width:440px!important;box-sizing:border-box}body[data-menu-section=workshop] #workshopCompare:not(.is-collapsed){max-height:112px;overflow:hidden}}
@media (orientation:landscape){body[data-menu-section=workshop] #workshopCompare:not(.is-collapsed) .compactRatings{display:flex!important;gap:6px;justify-content:center;flex-wrap:wrap;font-size:9px;color:var(--radar-accent,#bdefff)}body[data-menu-section=workshop] #workshopCompare:not(.is-collapsed) .workshopCompareName{color:var(--radar-accent,#dffaff)}}

/* Reserve separate lanes for the stage number, copy and completion/lock state. */
body[data-menu-section=challenge] #shopOverlay #chapterRail #chapterStages .stageCard{
  padding:10px 34px 10px 40px;box-sizing:border-box;min-height:58px;
}
body[data-menu-section=challenge] #shopOverlay #chapterRail #chapterStages .pathIndex{
  left:9px;top:11px;width:20px;height:20px;margin:0;box-sizing:border-box;
}
body[data-menu-section=challenge] #shopOverlay #chapterRail #chapterStages .stageCard > strong{
  margin:0;line-height:1.3;white-space:normal;overflow-wrap:anywhere;
}
body[data-menu-section=challenge] #shopOverlay #chapterRail #chapterStages .stageCardStatus{
  margin:3px 0 0;white-space:normal;line-height:1.35;
}
body[data-menu-section=challenge] #shopOverlay #chapterRail #chapterStages .stageComplete,
body[data-menu-section=challenge] #shopOverlay #chapterRail #chapterStages .stageLock{
  position:absolute;right:10px;top:12px;width:16px;height:16px;margin:0;
}

/* Preserve host/native safe insets after the compact landscape layout overrides. */
@media (orientation:landscape){
  body[data-menu-section=challenge] #shopOverlay #shopPanel,
  body[data-menu-section=workshop] #shopOverlay #shopPanel{
    padding:calc(var(--sat,0px) + 8px) calc(var(--sar,0px) + 8px) calc(var(--sab,0px) + 8px) calc(var(--sal,0px) + 8px)!important;
  }
}