/* Device edges belong to the top document; embedded games receive --sat/--sab. */
:root{--arcade-safe-top:env(safe-area-inset-top,0px);--arcade-safe-right:env(safe-area-inset-right,0px);--arcade-safe-bottom:env(safe-area-inset-bottom,0px);--arcade-safe-left:env(safe-area-inset-left,0px);--arcade-phone-gap:0px;--arcade-hub-top:22px;--arcade-hub-side:24px;--arcade-hub-bottom:60px}
body.arcade-hub:not(.invade-open)>.wrap{padding:calc(var(--arcade-hub-top) + var(--arcade-safe-top)) max(var(--arcade-hub-side),var(--arcade-safe-right)) calc(var(--arcade-hub-bottom) + var(--arcade-safe-bottom)) max(var(--arcade-hub-side),var(--arcade-safe-left))}
.arcade-hub .remote-shell iframe{left:var(--arcade-safe-left);right:var(--arcade-safe-right);width:calc(100% - var(--arcade-safe-left) - var(--arcade-safe-right))}
.arcade-hub #ioClose,.arcade-hub #squadClose{left:calc(12px + var(--arcade-safe-left))}
body.invade-open .room-options #coopPanel{left:calc(8px + var(--arcade-safe-left));right:calc(8px + var(--arcade-safe-right));max-height:calc(100dvh - 115px - var(--arcade-safe-top) - var(--arcade-safe-bottom))}
/* Squad's fixed menu/parts/end overlays sit outside the padded board layout. */
.arcade-skin #app{padding-top:calc(var(--sat,0px) + var(--arcade-phone-gap))}
.arcade-skin #app>.overlay{padding:calc(16px + var(--sat,0px) + var(--arcade-phone-gap)) max(16px,var(--arcade-safe-right)) calc(16px + var(--sab,0px)) max(16px,var(--arcade-safe-left))}
.arcade-skin #dead{padding:calc(22px + var(--sat,0px)) max(22px,var(--arcade-safe-right)) calc(22px + var(--sab,0px)) max(22px,var(--arcade-safe-left))}
@media(max-width:760px){:root{--arcade-hub-side:16px;--arcade-hub-bottom:36px;--arcade-hub-top:24px}}
@media(max-width:480px){:root{--arcade-hub-side:12px;--arcade-hub-bottom:32px}}
@media(max-width:600px),(pointer:coarse){
  :root{--arcade-phone-gap:8px;--arcade-hub-top:24px}
  body.invade-open #play{padding-top:calc(12px + var(--arcade-safe-top))}
  .arcade-hub .arcade-nav{top:calc(12px + var(--arcade-safe-top))}
  .arcade-hub:not(.invade-open) #play>.hud{position:sticky;top:calc(12px + var(--arcade-safe-top));z-index:15;background:#07131c;border-radius:16px}
  .arcade-hub #ioClose,.arcade-hub #squadClose{top:calc(14px + var(--arcade-safe-top))}
  body.invade-open .room-options #coopPanel{top:calc(62px + var(--arcade-safe-top))}
  body.invade-open .join-alert{top:calc(63px + var(--arcade-safe-top));left:calc(8px + var(--arcade-safe-left));right:calc(8px + var(--arcade-safe-right))}
  .arcade-skin .chips,body.arcade-skin.embed .chips{top:calc(14px + var(--sat,0px))}
  .arcade-skin #lb{top:calc(14px + var(--sat,0px))}
  .arcade-skin #buffs,body.arcade-skin.embed #buffs{top:calc(76px + var(--sat,0px))}
  body.arcade-skin:has(#cv) #menu,body.arcade-skin.embed:has(#cv) #menu{padding-top:calc(18px + var(--sat,0px))}
}
.arcade-skin .chips,.arcade-skin #buffs{left:calc(12px + var(--arcade-safe-left))}
body.arcade-skin.embed .chips{left:calc(64px + var(--arcade-safe-left))}
.arcade-skin #lb{right:calc(12px + var(--arcade-safe-right))}
body.arcade-skin:has(#cv) #menu{padding-left:max(16px,var(--arcade-safe-left));padding-right:max(16px,var(--arcade-safe-right))}
@media(max-width:520px){.arcade-skin #lb{top:calc(74px + var(--sat,0px))}}
@media(min-width:600px) and (max-height:500px) and (pointer:coarse){
  body.invade-open .flight-active .hud,body.invade-open .flight-active .statusbar{top:calc(12px + var(--arcade-safe-top))}
  body.invade-open .flight-active .upgrade{top:calc(12px + var(--arcade-safe-top))}
  .arcade-skin .stick{left:calc(9px + var(--arcade-safe-left));bottom:calc(35px + var(--arcade-safe-bottom))}
  .arcade-skin .buttons{right:calc(16px + var(--arcade-safe-right));bottom:calc(30px + var(--arcade-safe-bottom))}
}