/* Raw device insets. A screen consumes each inset once, while its backdrop
   remains edge-to-edge. Content dimensions exclude the obstructed edges. */
:root {
 --safe-top:env(safe-area-inset-top,0px);
 --safe-right:env(safe-area-inset-right,0px);
 --safe-bottom:env(safe-area-inset-bottom,0px);
 --safe-left:env(safe-area-inset-left,0px);
 --safe-height:calc(100dvh - var(--safe-top) - var(--safe-bottom));
 --safe-width:calc(100dvw - var(--safe-left) - var(--safe-right));
}

/* Centered sheets use the usable viewport; their backdrops still cover it all.
   Fullscreen scene/dialog owners consume the insets in their fixed chrome. */
html body dialog:not(.pass-dialog):not(.art-viewer):not(.loading-overlay):not(.reward-acquisition):not(.pass-reward-flight):not(.pvp-queue-overlay):not(#shop-dialog):not(#arena-dialog):not(#library-dialog.collection-panel) {
 inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
 margin:auto;
 max-height:calc(var(--safe-height) - 24px)!important;
 max-width:calc(var(--safe-width) - 24px)!important;
}
/* A centered, capped game shell may already be clear of landscape cutouts. */
.game-shell {
 --safe-left:max(0px,calc(env(safe-area-inset-left,0px) - (100dvw - min(100dvw,560px)) / 2));
 --safe-right:max(0px,calc(env(safe-area-inset-right,0px) - (100dvw - min(100dvw,560px)) / 2));
 --safe-bottom:max(0px,calc(env(safe-area-inset-bottom,0px) - max(0px,100dvh - 1040px)));
 --safe-height:calc(min(100dvh,1040px) - var(--safe-top) - var(--safe-bottom));
}
.game-topbar { left:calc(var(--safe-left) + 15px);right:calc(var(--safe-right) + 15px); }
.hero-home { padding-left:calc(var(--safe-left) + 26px);padding-right:calc(var(--safe-right) + 26px); }
.pvp-home.hero-home.deck-home { padding-bottom:calc(var(--safe-bottom) + 16px); }
.arena { left:calc(var(--safe-left) + 20px);right:calc(var(--safe-right) + 20px); }
.battle-dock { left:calc(var(--safe-left) + 22px);right:calc(var(--safe-right) + 22px); }
.pack-display { left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 12px); }
.pack-dock { left:calc(var(--safe-left) + 26px);right:calc(var(--safe-right) + 26px); }
.pack-wallet { left:calc(var(--safe-left) + 18px);right:calc(var(--safe-right) + 18px); }
.game-connect-retry { padding:calc(var(--safe-top) + 24px) calc(var(--safe-right) + 24px) calc(var(--safe-bottom) + 24px) calc(var(--safe-left) + 24px); }
.tutorial-scene { padding-left:calc(var(--safe-left) + 23px);padding-right:calc(var(--safe-right) + 23px); }
.tutorial-chapter-transition { padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 20px); }
.tutorial-result-panel { left:calc(var(--safe-left) + 20px);right:calc(var(--safe-right) + 20px);max-height:calc(var(--safe-height) * .48); }
@media(max-height:720px) {
 .hero-home { padding-top:calc(var(--safe-top) + 55px);padding-bottom:calc(var(--safe-bottom) + 12px); }
 .arena { left:calc(var(--safe-left) + 15px);right:calc(var(--safe-right) + 15px); }
}
@media(max-height:700px) {
 .tutorial-scene { padding-left:calc(var(--safe-left) + 17px);padding-right:calc(var(--safe-right) + 17px); }
}
@media(min-width:700px) {
 .arena { left:calc(var(--safe-left) + 30px);right:calc(var(--safe-right) + 30px); }
 .battle-dock { left:calc(var(--safe-left) + 35px);right:calc(var(--safe-right) + 35px); }
}
/* Cover/FX coordinates remain full viewport; only readable content moves. */
dialog.loading-overlay:not(.battle-loading-view) {
 padding:calc(var(--safe-top) + 24px) calc(var(--safe-right) + 24px) calc(var(--safe-bottom) + 24px) calc(var(--safe-left) + 24px);
}
.battle-loading-cover { --portrait-width:min(calc(var(--safe-width) * .9),calc(var(--safe-height) * .52),560px,var(--loading-art-limit,512px)); }
.battle-loading-portrait,.battle-loading-mist,.battle-loading-motes {
 top:calc(var(--safe-top) + var(--safe-height) * .44);
 left:calc(var(--safe-left) + var(--safe-width) * .5);
}
.battle-loading-copy {
 left:calc(var(--safe-left) + 24px);right:calc(var(--safe-right) + 24px);
 bottom:calc(var(--safe-bottom) + max(24px,var(--safe-height) * .075));
}
@media(orientation:landscape) and (max-height:540px) {
 .battle-loading-cover { --portrait-width:min(calc(var(--safe-width) * .6),calc((var(--safe-height) - 105px) * 2 / 3),560px,var(--loading-art-limit,512px)); }
 .battle-loading-portrait,.battle-loading-mist,.battle-loading-motes { top:calc(var(--safe-top) + var(--safe-height) * .42); }
 .battle-loading-copy { bottom:calc(var(--safe-bottom) + 16px); }
}
dialog.reward-receipt-dialog.reward-acquisition {
 padding:calc(var(--safe-top) + 64px) calc(var(--safe-right) + 14px) calc(var(--safe-bottom) + 32px) calc(var(--safe-left) + 14px)!important;
}
dialog.reward-acquisition>.dialog-close { top:calc(var(--safe-top) + 12px);right:calc(var(--safe-right) + 12px); }
.victory-safe-content { position:absolute;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
/* Fixed sheet actions stay outside the scrollable history/result body. */
#log-body { max-height:calc(var(--safe-height) - 34px); }
#result-body { max-height:calc(var(--safe-height) - 128px); }