/* Poke Bowl v163 — persistent universe + seamless panel transitions.
   This layer is strictly visual; it never changes navigation or gameplay flow. */

/* Sky must exist behind every authenticated page and the battle board, not just home. */
body:not(.appBooting):has(#signupGate:not(.hidden)) #landingSky,
body:not(.appBooting):has(#setup:not(.hidden)) #landingSky,
body:not(.appBooting):has(#game:not(.hidden)) #landingSky {
  display:block!important;
  visibility:visible;
}
#landingSky {
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:0!important;
  pointer-events:none!important;
}
#setup:not(.hidden), #game:not(.hidden), #signupGate:not(.hidden) {
  position:relative;
  z-index:1;
}
/* Let the same cosmic palette remain behind even tall tool pages. */
body:has(#setup:not(.hidden)),body:has(#game:not(.hidden)) {
  background:
    radial-gradient(ellipse 58% 53% at 6% 12%, rgba(31,83,125,.23), transparent 73%),
    radial-gradient(ellipse 54% 63% at 91% 9%, rgba(82,48,120,.18), transparent 72%),
    radial-gradient(ellipse 56% 40% at 73% 87%, rgba(188,93,49,.09), transparent 76%),
    #050c18!important;
}
/* Transparent breathing space around the established opaque application surfaces. */
#setup:not(.hidden),#game:not(.hidden){isolation:isolate;}

/* A brief incoming materialize + horizon sweep. Starts AFTER native navigation
   has already happened, so clicks, Back, and state updates remain synchronous. */
@keyframes pbScreenMaterialize {
  0% { opacity:.32; transform:translate3d(0,15px,0) scale(.991); }
  42% { opacity:.86; }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes pbScreenLightSweep {
  0% { opacity:0; transform:translate3d(-125%,0,0) skewX(-26deg); }
  22% { opacity:.55; }
  75% { opacity:.23; }
  100% { opacity:0; transform:translate3d(180%,0,0) skewX(-26deg); }
}
@keyframes pbNavTransitFlash {
  0% { opacity:0; transform:translateY(-60vh) scaleY(.65); }
  23% { opacity:.48; }
  100% { opacity:0; transform:translateY(125vh) scaleY(1.15); }
}
#setup > .pbScreenEntering:not(.hidden),
#game.pbScreenEntering:not(.hidden) {
  animation:pbScreenMaterialize .48s cubic-bezier(.16,.78,.24,1) both;
  transform-origin:50% 12%;
}
/* The sweep is its own non-interactive layer, avoiding pseudo-elements that
   could cover card controls or collide with older panel-specific decoration. */
.pbNavTransit {
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  pointer-events:none!important;
  opacity:0;
  visibility:hidden;
  contain:paint;
}
.pbNavTransit.pbNavTransitActive {opacity:1;visibility:visible;}
.pbNavTransit::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:24%;
  background:linear-gradient(180deg,
    transparent 0%,rgba(84,185,247,.035) 38%,
    rgba(129,209,255,.13) 64%,rgba(246,170,118,.11) 72%,
    transparent 100%);
  transform:translateY(-60vh);
  opacity:0;
}
.pbNavTransitActive::before {
  animation:pbNavTransitFlash .63s cubic-bezier(.2,.75,.28,1) both;
}
.pbNavTransit::after {
  content:"";
  position:absolute;
  top:50%; left:0; width:100%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(129,205,255,.18),rgba(255,202,162,.40),transparent);
  box-shadow:0 0 20px rgba(111,191,245,.18);
  transform:scaleX(0);
  opacity:0;
}
.pbNavTransitActive::after {
  animation:pbNavLine .48s ease-out both;
}
@keyframes pbNavLine {
  0%{opacity:0;transform:scaleX(.1) translateY(-15px);}
  28%{opacity:.65;transform:scaleX(.86) translateY(0);}
  100%{opacity:0;transform:scaleX(1) translateY(22px);}
}
@media (prefers-reduced-motion:reduce) {
  #setup > .pbScreenEntering:not(.hidden),#game.pbScreenEntering:not(.hidden),
  .pbNavTransitActive::before,.pbNavTransitActive::after {animation:none!important;}
  .pbNavTransit {display:none!important;}
}

/* Room browser, join requests and in-app dialogs share the same spatial entry
   language when opened. Hidden/disabled controls remain untouched. */
@keyframes pbDialogMaterialize {
  from { opacity:.2; transform:translate3d(0,17px,0) scale(.972); }
  to   { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
.roomLobbyOverlay:not(.hidden) .roomLobbyModal,
.modalOverlay:not(.hidden) .modal {
  animation:pbDialogMaterialize .35s cubic-bezier(.16,.78,.24,1) both;
}
@media (prefers-reduced-motion:reduce) {
  .roomLobbyOverlay:not(.hidden) .roomLobbyModal,
  .modalOverlay:not(.hidden) .modal {animation:none!important;}
}