/* Fullscreen backgrounds keep their viewport. Each content column consumes
   device insets once; fixed chrome leaves the remaining height to its scroller. */
#library-dialog.collection-panel {
 padding:0 var(--safe-right) 0 var(--safe-left);
}
#library-dialog.collection-panel #library-grid {
 padding-top:var(--safe-top);
}
#library-dialog.collection-panel #library-grid:not([data-view=bulk]) {
 padding-bottom:var(--safe-bottom);
}
#library-dialog.collection-panel>.dialog-close {
 top:calc(var(--safe-top) + 10px);
 right:calc(var(--safe-right) + 14px);
}
#library-dialog.collection-panel .collection-footer {
 padding-bottom:calc(var(--safe-bottom) + 14px);
}

#shop-dialog>.shop-content {
 padding:var(--safe-top) var(--safe-right) 0 var(--safe-left);
}
#shop-dialog .shop-content>.shop-header { margin-top:0; }
#shop-dialog .shop-footer { padding-bottom:calc(var(--safe-bottom) + 20px); }

#arena-dialog>.arena-panel {
 padding:var(--safe-top) var(--safe-right) 0 var(--safe-left);
}
#arena-dialog>.arena-panel>.arena-footer {
 padding-bottom:calc(var(--safe-bottom) + 14px);
}
#arena-dialog>.arena-panel:has(>.arena-footer:empty) {
 padding-bottom:var(--safe-bottom);
}
.chapter-screen {
 padding:var(--safe-top) var(--safe-right) 0 var(--safe-left);
}
.chapter-screen>.chapter-footer { padding-bottom:calc(var(--safe-bottom) + 16px); }

dialog.pvp-queue-overlay { border-radius:0; }
.pvp-queue-surface {
 padding:calc(var(--safe-top) + 22px) calc(var(--safe-right) + 24px)
  calc(var(--safe-bottom) + 24px) calc(var(--safe-left) + 24px);
}
@media(max-width:350px) {
 .pvp-queue-surface {
  padding-right:calc(var(--safe-right) + 16px);
  padding-left:calc(var(--safe-left) + 16px);
 }
}
@media(max-width:360px) {
 #arena-dialog>.arena-panel>.arena-footer { padding-bottom:calc(var(--safe-bottom) + 10px); }
}
@media(max-height:620px) {
 .chapter-screen>.chapter-footer { padding-bottom:calc(var(--safe-bottom) + 10px); }
}
@media(orientation:landscape) and (max-height:500px) {
 /* The overview spans the body and footer rows in landscape. Its independent
    scroll column needs its own bottom pocket; the right footer owns the other. */
 #arena-dialog>.arena-panel>.arena-deck-overview { padding-bottom:var(--safe-bottom); }
 #arena-dialog>.arena-panel:has(>.arena-footer:empty)>.arena-deck-overview { padding-bottom:0; }
 .pvp-queue-surface {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  grid-template-rows:1fr auto auto auto auto 1fr;
  column-gap:18px;
  align-items:center;
  justify-items:center;
 }
 .pvp-queue-surface>.pvp-search-art { grid-column:1;grid-row:1/-1; }
 .pvp-queue-surface>:not(.pvp-search-art) { grid-column:2; }
 .pvp-queue-surface>.pvp-queue-mode { grid-row:2; }
 .pvp-queue-surface>.pvp-queue-title { grid-row:3; }
 .pvp-queue-surface>.pvp-queue-caption { grid-row:4; }
 .pvp-queue-surface>.pvp-queue-clock { grid-row:5; }
 .pvp-queue-surface>.pvp-queue-actions { grid-row:6;align-self:start; }
}

/* Centered sheets already sit inside the safe rectangle. Their content sizing
   uses that same height, and nested footers retain only their authored gap. */
#deck-dialog { height:min(820px,calc(var(--safe-height) - 24px)); }
#library-dialog:not(.collection-panel) { height:min(1000px,calc(var(--safe-height) - 24px)); }
dialog.profile-info-dialog { height:min(560px,calc(var(--safe-height) - 24px)); }
dialog.profile-editor-dialog { height:min(650px,calc(var(--safe-height) - 24px)); }
dialog.item-details-dialog { height:min(470px,calc(var(--safe-height) - 24px)); }
#tutorial-selection-dialog { height:min(1060px,calc(var(--safe-height) - 32px)); }
dialog.pvp-info-sheet { height:min(620px,calc(var(--safe-height) - 24px)); }
.collection-detail-art {
 --detail-card-width:min(calc(var(--safe-width) * .74),300px,calc((var(--safe-height) - 310px) / 1.5));
}
.arena-detail-fixed .game-card { width:min(240px,calc((var(--safe-height) - 260px) / 1.5)); }
.deck-sheet-footer { padding-bottom:14px; }
#library-dialog:not(.collection-panel) .collection-footer { padding-bottom:14px; }
.profile-sheet-footer { padding-bottom:16px; }
.item-details-footer { padding-bottom:17px; }
.account-recovery-footer { padding-bottom:18px; }
.dev-tools-footer { padding-bottom:18px; }
dialog.reward-dialog .reward-footer { padding-bottom:18px; }
.cosmetics-picker-footer { padding-bottom:12px; }
.arena-info-dialog .arena-footer { padding-bottom:14px; }
@media(max-width:360px) {
 .arena-info-dialog .arena-footer { padding-bottom:10px; }
}

/* Short landscape cannot stack wallet, tabs, offers and purchase controls.
   Give the catalogue its own full-height column and keep purchase visible. */
@media(orientation:landscape) and (max-height:540px){
 #shop-dialog>.shop-content{--popup-bar-height:52px;grid-template-columns:minmax(140px,.8fr) minmax(0,1.4fr);grid-template-rows:52px 44px minmax(0,1fr);gap:8px 12px;padding-bottom:calc(var(--safe-bottom) + 12px)}
 #shop-dialog.has-main-navigation>.shop-content{padding-bottom:8px}
 #shop-dialog .shop-content>.shop-header{grid-column:1;grid-row:1;height:52px;min-height:52px;padding:4px 10px}
 #shop-dialog .shop-wallet{grid-column:2;grid-row:1;padding:4px 8px;align-items:center}
 #shop-dialog .shop-wallet .currency-chips{flex-wrap:nowrap;gap:6px;width:100%;max-width:100%}
 #shop-dialog .shop-wallet .currency-chip{flex:1 1 0;min-width:0;max-width:none;height:44px}
 #shop-dialog .shop-tabs{grid-column:1;grid-row:2;margin:0 8px;padding:0;gap:4px}
 #shop-dialog .shop-tab{min-height:44px;font-size:12px}
 #shop-dialog .shop-scroll{grid-column:2;grid-row:2/4;padding:2px 8px 12px;margin:0}
 #shop-dialog .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #shop-dialog .shop-offer{min-height:154px;padding:8px 4px;gap:3px}
 #shop-dialog .shop-offer-icon{width:44px;height:44px;margin:0}
 #shop-dialog .shop-offer-title,#shop-dialog .shop-offer-price{font-size:11px}
 #shop-dialog .shop-offer-amount{font-size:20px}
 #shop-dialog .shop-footer{grid-column:1;grid-row:3;align-self:end;padding:4px 8px 0;min-width:0}
 #shop-dialog .shop-status{min-height:0;margin:0 0 6px;max-height:36px;overflow:auto;font-size:10px}
 #shop-dialog .shop-status:empty{display:none}
 #shop-dialog .shop-buy{min-height:44px;height:44px;font-size:12px}
}