/* Phone landscape only (740x360 through 932x430, plus browser bars and safe areas).
   Desktop, portrait, and taller windows keep the original Collection sheets.
   This file is meant to load last. No page zoom or transform. */

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
 /* The illustrated shell stays, but the plaque row and frame give their spare
    pixels to the catalog. Safe-area padding keeps the close control off a notch. */
 #profile-dialog.collection-art-page[open][data-tab="Collections"]{
  padding:max(2px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
 }
 #profile-dialog[data-tab="Collections"] .collection-art-header{height:48px;margin-bottom:-4px}
 #profile-dialog[data-tab="Collections"] .collection-art-title{width:min(280px, 48%)}
 #profile-dialog[data-tab="Collections"] .collection-art-title h1{font-size:26px}
 #profile-dialog[data-tab="Collections"] .collection-art-owl{width:58px;height:44px;right:52px;bottom:0}
 #profile-dialog[data-tab="Collections"] .collection-art-close{
  top:2px;right:2px;bottom:auto;width:44px;height:44px;min-width:44px;min-height:44px;font-size:28px;
 }

 #profile-dialog[data-tab="Collections"] .profile-body{
  min-height:0;min-width:0;padding:4px;border-width:4px;border-image-width:22px;border-image-outset:3px;
 }
 #profile-dialog[data-tab="Collections"] .profile-info-column,
 #profile-dialog[data-tab="Collections"] #profile-tab-content,
 #profile-dialog[data-tab="Collections"] :is(.skins-view, .balloons-view, .trails-view){min-height:0;min-width:0}

 /* Category tabs stay in the first screen at a 44px touch height. Labels do not wrap away. */
 #profile-dialog[data-tab="Collections"] .collection-tabs{
  position:static;inset:auto;min-height:48px;margin:0;padding:2px 4px;gap:6px;overflow:hidden;
 }
 #profile-dialog[data-tab="Collections"] .collection-tabs button{min-height:44px;gap:6px;font-size:13px;line-height:1.1}
 #profile-dialog[data-tab="Collections"] .collection-tabs button span{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }
 #profile-dialog[data-tab="Collections"] .collection-tabs img{width:26px;height:24px}

 /* Older landscape rules pull these headings out of flow over the tabs. Keep them in the column. */
 #profile-dialog[data-tab="Collections"] :is(.skins-heading, .balloons-heading, .trails-heading){
  position:static;top:auto;right:auto;height:auto;min-height:0;
 }
 #profile-dialog[data-tab="Collections"] :is(.balloons-heading, .trails-heading)>div:first-child{display:block}
 #profile-dialog[data-tab="Collections"] .trails-heading-main{display:block}

 /* Characters: stage beside a pinned roster. Only the outfit row scrolls, so Equip is a short
    scroll away and the hero chips do not leave with it. The 2/3 portrait ratio was taller than
    this screen, which hid every name and action. */
 #profile-dialog[data-tab="Collections"] .skins-layout{
  flex:1 1 0;min-height:0;min-width:0;height:auto;
  grid-template-columns:minmax(124px, 0.22fr) minmax(0, 1fr);
  grid-template-rows:minmax(0, 1fr);
 }
 #profile-dialog[data-tab="Collections"] .skins-stage{min-height:0;min-width:0}
 #profile-dialog[data-tab="Collections"] .collection-stage-caption{
  top:2px;max-width:calc(100% - 8px);padding:3px 6px;font-size:11px;line-height:1.1;letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;
 }
 #profile-dialog[data-tab="Collections"] .skins-character{
  top:22px;bottom:46px;left:5%;width:90%;height:auto;object-fit:contain;object-position:center bottom;
 }
 #profile-dialog[data-tab="Collections"] .collection-stage-podium{
  left:8%;width:84%;bottom:30px;height:36px;object-fit:contain;object-position:center bottom;
 }
 #profile-dialog[data-tab="Collections"] .skins-stage-label{
  left:6%;right:6%;bottom:4px;min-height:36px;padding:3px 6px 4px;
 }
 #profile-dialog[data-tab="Collections"] .skins-stage-label strong{font-size:18px;line-height:1}
 #profile-dialog[data-tab="Collections"] .skin-name{font-size:11px;line-height:1.2}

 #profile-dialog[data-tab="Collections"] .skins-choice{
  display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;gap:4px;padding:4px 6px;
 }
 #profile-dialog[data-tab="Collections"] .skins-heading{flex:none;min-height:0;margin:0}
 #profile-dialog[data-tab="Collections"] .skins-heading h2{font-size:15px;line-height:1.1;min-width:0}
 #profile-dialog[data-tab="Collections"] .skins-heading>span{
  font-size:11px;line-height:1.2;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 }
 /* Chips keep a 13px name and a 44px target. They scroll sideways instead of clipping the last hero. */
 #profile-dialog[data-tab="Collections"] .collection-roster{
  flex:none;margin:0;gap:4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scroll-padding-inline:6px;
 }
 #profile-dialog[data-tab="Collections"] .collection-roster button{
  flex:0 0 auto;min-width:56px;width:auto;height:44px;min-height:44px;padding:1px 4px 2px;font-size:13px;line-height:1.05;
 }
 #profile-dialog[data-tab="Collections"] .collection-roster img{
  width:auto;max-width:100%;height:22px;object-fit:contain;object-position:center bottom;
 }

 #profile-dialog[data-tab="Collections"] .skins-cards{
  container-type:size;flex:1 1 0;min-height:0;min-width:0;height:auto;overflow:auto;overscroll-behavior:contain;
  scroll-padding-bottom:8px;align-content:start;align-items:start;
  grid-template-columns:repeat(var(--skin-count, 4), minmax(0, 1fr));
 }
 #profile-dialog[data-tab="Collections"] .skins-cards .skin-card{height:auto;min-height:0;min-width:0}
 /* Full figure, letterboxed, so the face is not cropped. Height is whatever the row has left
    after the name and the 44px action, so those stay in the first view on a normal card. */
 #profile-dialog[data-tab="Collections"] .skins-cards .skin-card .character-card-art{
  display:flex;flex:none;flex-direction:column;aspect-ratio:auto;height:auto;max-height:none;min-height:0;overflow:hidden;
 }
 #profile-dialog[data-tab="Collections"] .skins-cards .skin-card .character-card-art[data-skin-id] .character-card-image{
  flex:none;width:100%;min-width:0;min-height:0;aspect-ratio:auto;
  height:max(44px, calc(100cqh - 104px));max-height:max(44px, calc(100cqh - 104px));
  object-fit:contain !important;object-position:center bottom !important;
 }
 #profile-dialog[data-tab="Collections"] .skins-cards .character-card-art{position:relative}
 #profile-dialog[data-tab="Collections"] .skins-cards .character-card-copy{position:absolute;inset:auto 0 0;z-index:2;min-height:34px;padding:3px 3px 2px;gap:0;background:linear-gradient(#fffbdcf5,#ffecb8);border-top:1px solid #e4c67b}
 #profile-dialog[data-tab="Collections"] .skins-cards .character-card-name{font-size:13px;line-height:1.1}
 #profile-dialog[data-tab="Collections"] .skins-cards .character-card-subtitle{font-size:11px;line-height:1.15}
 #profile-dialog[data-tab="Collections"] .skins-cards .character-card-stamp{
  top:3px;left:3px;right:auto;max-width:48%;min-height:16px;padding:1px 5px;font-size:11px;
 }
 #profile-dialog[data-tab="Collections"] .skins-cards .character-card-stamp-label{font-size:11px}
 #profile-dialog[data-tab="Collections"] .skin-card[data-locked="true"]:after,
 #profile-dialog[data-tab="Collections"] .skin-card[data-selected="true"]:not([data-locked="true"]):after{
  top:4px;right:4px;width:22px;height:22px;
 }
 #profile-dialog[data-tab="Collections"] .skin-description{
  flex:none;min-height:0;max-height:16px;margin:0;padding:0 4px;font-size:11px;line-height:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 }
 #profile-dialog[data-tab="Collections"] .skins-view>footer{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:16px;padding:1px 8px;
 }
 #profile-dialog[data-tab="Collections"] .skins-status{font-size:11px;line-height:1.3}
 #profile-dialog[data-tab="Collections"] .skins-view>footer [data-skins-retry]{min-width:44px;min-height:44px;font-size:13px}

 /* Shared catalog actions. Stars, Refine, and a source line still add a short scroll on those cards. */
 #profile-dialog[data-tab="Collections"] :is(.skin-card, .balloon-card, .trail-card)>button,
 #profile-dialog[data-tab="Collections"] .trail-mode-controls>button,
 #profile-dialog[data-tab="Collections"] .collection-source{
  min-height:44px;font-size:13px;line-height:1.15;
 }
 #profile-dialog[data-tab="Collections"] .skin-stars{font-size:11px;line-height:1.2}

 /* Balloons and trails: one horizontal row fills the remaining height. Further rows scroll inside
    the grid. Square and 370px card minimums were pushing Equip past the screen. */
 #profile-dialog[data-tab="Collections"] :is(.balloons-heading, .trails-heading){
  flex:none;align-items:center;gap:8px;padding:4px 8px;
 }
 #profile-dialog[data-tab="Collections"] :is(.balloons-heading, .trails-heading) h2{font-size:18px;line-height:1.05;margin:0}
 #profile-dialog[data-tab="Collections"] :is(.balloons-heading, .trails-heading) p{
  display:-webkit-box;margin:1px 0 0;font-size:11px;line-height:1.25;max-height:2.5em;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
 }
 #profile-dialog[data-tab="Collections"] :is(.balloons-equipped, .trails-equipped){
  flex:none;max-width:34%;min-width:0;padding:3px 8px;
 }
 #profile-dialog[data-tab="Collections"] :is(.balloons-equipped, .trails-equipped) :is(small, span){font-size:11px;line-height:1.2}
 #profile-dialog[data-tab="Collections"] :is(.balloons-equipped, .trails-equipped) strong{
  display:block;font-size:14px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 }

 #profile-dialog[data-tab="Collections"] :is(.balloons-grid, .trails-scroll){
  container-type:size;flex:1 1 0;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;scroll-padding-bottom:10px;padding:6px 8px 8px;
 }
 #profile-dialog[data-tab="Collections"] :is(.balloons-grid, .trails-grid){
  grid-template-columns:repeat(4, minmax(0, 1fr));gap:8px;align-content:start;
 }
 #profile-dialog[data-tab="Collections"] .balloons-grid .balloon-card,
 #profile-dialog[data-tab="Collections"] .trail-card{min-height:0;height:auto;min-width:0}

 #profile-dialog[data-tab="Collections"] .balloon-card-art{
  flex:none;aspect-ratio:auto;min-height:0;overflow:hidden;
  height:max(48px, calc(100cqh - 124px));max-height:max(48px, calc(100cqh - 124px));
 }
 #profile-dialog[data-tab="Collections"] .balloon-card-art canvas{width:100%;height:100%;object-fit:contain}
 #profile-dialog[data-tab="Collections"] :is(.balloon-card, .trail-card)>h3{
  min-height:0;max-height:2.4em;margin:2px 4px;font-size:13px;line-height:1.15;overflow:hidden;
 }
 #profile-dialog[data-tab="Collections"] :is(.balloon-rarity, .trail-rarity){
  position:absolute;top:4px;left:4px;z-index:2;margin:0;font-size:11px;line-height:1.2;letter-spacing:.4px;
 }
 #profile-dialog[data-tab="Collections"] .balloon-hero{min-height:0;height:auto;margin:0 4px 4px;gap:4px}
 #profile-dialog[data-tab="Collections"] .balloon-hero>.character-card-art{
  flex:0 0 22px;width:22px;height:32px;max-height:32px;min-height:0;aspect-ratio:auto;
 }
 #profile-dialog[data-tab="Collections"] .balloon-hero .character-card-image{
  width:100%;height:100%;max-height:32px;aspect-ratio:auto;object-fit:contain !important;object-position:center top !important;
 }
 #profile-dialog[data-tab="Collections"] .balloon-hero strong{font-size:13px;line-height:1.15}
 #profile-dialog[data-tab="Collections"] .balloon-hero small{font-size:11px;line-height:1.2}
 #profile-dialog[data-tab="Collections"] .balloon-normal-note{
  min-height:0;margin:0 4px 4px;padding:0;font-size:11px;line-height:1.25;
 }
 #profile-dialog[data-tab="Collections"] .balloons-footnote{
  flex:none;font-size:11px;line-height:1.3;max-height:2.6em;overflow:hidden;
 }

 /* Skin trail and Custom trails stay in the heading, outside the card scroller.
    Posters stay static images; animated trail previews are not brought back. */
 #profile-dialog[data-tab="Collections"] .trails-title-row{flex-wrap:wrap;gap:6px;margin:0}
 #profile-dialog[data-tab="Collections"] .trail-mode-controls{flex:1 1 220px;flex-wrap:wrap;gap:6px;min-width:0}
 #profile-dialog[data-tab="Collections"] .trail-mode-controls>button{flex:1 1 108px;min-width:0;margin:0;white-space:nowrap}
 #profile-dialog[data-tab="Collections"] .collection-trail-art{
  display:block;width:100%;aspect-ratio:auto;object-fit:contain;
  height:max(48px, calc(100cqh - 120px));max-height:max(48px, calc(100cqh - 120px));
 }
 #profile-dialog[data-tab="Collections"] .trails-exclusives .collection-trail-art{
  height:max(44px, calc(100cqh - 168px));max-height:max(44px, calc(100cqh - 168px));
 }
 #profile-dialog[data-tab="Collections"] .trail-card>p{
  min-height:0;max-height:2.6em;margin:0 4px 4px;font-size:11px;line-height:1.3;overflow:hidden;
 }
 #profile-dialog[data-tab="Collections"] .trail-included{font-size:11px;line-height:1.3;padding:6px 4px}
 #profile-dialog[data-tab="Collections"] .trails-skin-heading{gap:8px;align-items:baseline}
 #profile-dialog[data-tab="Collections"] .trails-skin-heading h3{margin:0;font-size:15px;line-height:1.15}
 #profile-dialog[data-tab="Collections"] .trails-skin-heading span{font-size:11px}
 #profile-dialog[data-tab="Collections"] .trails-exclusives>p{margin:0 0 4px;font-size:11px;line-height:1.3}
 #profile-dialog[data-tab="Collections"] .trails-exclusives summary{min-height:44px;font-size:15px}
 #profile-dialog[data-tab="Collections"] .trail-card .trail-forms{flex:none;min-height:0;margin:4px 3px 0;gap:4px}
 #profile-dialog[data-tab="Collections"] .trails-view .trail-card .trail-forms button{
  min-height:44px;max-height:none;height:auto;font-size:13px;line-height:1.1;
 }
}

/* Grounded screenshot corrections. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
 #profile-dialog[data-tab="Collections"] .skins-cards{container-type:normal;align-content:start}
 #profile-dialog[data-tab="Collections"] .skins-cards .skin-card .character-card-art[data-skin-id] .character-card-image{height:clamp(100px,calc(100dvh - 258px),150px);max-height:none;object-fit:cover!important;object-position:center 25%!important}
 #profile-dialog[data-tab="Collections"] .skins-cards .skin-card{min-height:190px}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
 #profile-dialog[data-tab="Collections"] .skins-cards{padding-bottom:60px;scroll-padding-bottom:60px}
}