/* 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(max-height:500px) and (min-width:600px) {
 /* 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; }
}