/* Party / Smash / Battle Pet live in one persistent document. The WAR bar,
   Now Performing bar, primary nav, and dev controls never remount while
   moving between those three primary surfaces. */
body[data-primary-app="true"]{
  --primary-war-space:69px;
  --now-playing-h:56px;
  --primary-nav-h:52px;
  --primary-footer-space:108px;
  --primary-viewport-h:100dvh;
  height:var(--primary-viewport-h);
  min-height:0;
  overflow:hidden;
  overscroll-behavior:none;
}

.primary-app-war{
  position:sticky;
  top:0;
  z-index:20;
  width:min(100%,var(--max));
  margin:0 auto;
  padding:6px 10px 0;
  background:var(--bg);
}
.primary-app-war .war-status-slot{
  position:static;
  padding-bottom:0;
}
.primary-app-war .war-status-label{
  transition:opacity .12s ease,transform .16s ease;
}
.primary-app-war.is-switching .war-status-label{
  animation:primary-war-label-flip .22s ease-out;
}
@keyframes primary-war-label-flip{
  0%{opacity:.35;transform:translate(-50%,-50%) scale(.94)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.primary-view[hidden]{display:none!important}
.primary-view{animation:none}

body[data-primary-app="true"] .primary-view{
  position:fixed;
  top:var(--primary-war-space);
  bottom:auto;
  left:0;
  width:min(100%,var(--max));
  height:var(--primary-content-h,calc(var(--primary-viewport-h) - var(--primary-war-space) - var(--primary-footer-space)))!important;
  min-height:0;
  margin:0 auto;
  padding-top:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* The mounted Smash and Pet roots have to subtract every persistent layer:
   WAR header + Now Performing + primary nav + dev toolbar. The generic page CSS
   only knows about the bottom stack, so override it here for the app shell. */
body[data-primary-app="true"] .primary-view-smash.smash-launch-shell,
body[data-primary-app="true"] .primary-view-pet.pet-shell,
body[data-primary-app="true"].has-now-playing[data-page="smash"] .primary-view-smash.smash-launch-shell,
body[data-primary-app="true"].has-now-playing[data-page="pet"] .primary-view-pet.pet-shell{
  height:auto!important;
  min-height:0;
}
body[data-primary-app="true"] .primary-view-smash.smash-launch-shell{
  grid-template-rows:auto minmax(0,1fr) auto;
}
body[data-primary-app="true"] .primary-view-pet.pet-shell{
  display:grid;
  grid-template-rows:minmax(0,1fr);
  gap:0;
  padding:0 10px 6px;
  overflow:hidden;
}
body[data-primary-app="true"] .primary-view-pet [data-pet-root]{
  height:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

body[data-primary-app="true"][data-primary-view="smash"],
body[data-primary-app="true"][data-primary-view="pet"]{
  overflow:hidden;
  overscroll-behavior:none;
}
body[data-primary-app="true"] .primary-view[hidden]{display:none!important}

body[data-primary-app="true"]:not([data-primary-view="party"]) .camera-bubble,
body[data-primary-app="true"]:not([data-primary-view="party"]) .admin-bubble{
  display:none!important;
}

@media(prefers-reduced-motion:reduce){
  .primary-app-war.is-switching .war-status-label{animation:none}
}
@media(max-width:380px){
  body[data-primary-app="true"]{--primary-war-space:64px}
  .primary-app-war{padding-inline:8px}
  body[data-primary-app="true"] .primary-view-pet.pet-shell{padding-inline:8px}
}

/* The persistent chrome stays in the viewport; every mounted primary view owns
   only the live area between the measured WAR header and measured footer stack. */
body[data-primary-app="true"] .primary-app-war{position:fixed;top:0;right:0;left:0}
body[data-primary-app="true"] .primary-view-party{padding:6px 10px 12px}
body[data-primary-app="true"] .primary-view-smash.smash-launch-shell,
body[data-primary-app="true"] .primary-view-pet.pet-shell{overflow:hidden}

@media(orientation:landscape) and (max-height:480px){
  body[data-primary-app="true"] .primary-app-war{height:64px;padding-block:3px;overflow:hidden}
  body[data-primary-app="true"] .primary-app-war .war-status-slot{height:58px;overflow:hidden}
  body[data-primary-app="true"] .primary-app-war .war-status{width:200%;margin-left:-50%;transform:scale(.5);transform-origin:top center}
}