/* ROUND 48 — the loading screen between Levels (src/ui/levelLoading.js).

   The painting (assets/splash/level-loading.webp, 720 x 1280) is full-bleed.
   Measured luminance (0-255, mean of the columns a 390 x 844 phone shows):
   the canopy rows 0-80 read 43-54 and the forest floor rows 1160-1280 read
   26-63, while the mist band at rows 1000-1120 reads 115-122. So the Level
   line and name sit in the canopy and the progress bar on the floor, each on
   a soft scrim, inside the safe areas.

   Phones are taller than the painting (720 / 1280 = 0.5625), so `cover` only
   trims the sides. Bramble runs from x 110 (the left boot sole) to x 693 (the
   fur of the tail) of the 720 px painting, 583 px, and a 390 x 844 phone shows
   591.5 px of it: he fits with 8 px to spare in all, so the framing has almost
   no slack. The 80% horizontal position below puts the window at columns 103
   to 694, which keeps the whole tail and the boot sole (7 px margin), and the
   slow push-in is capped at 1% so it cannot push either edge out of frame
   (at the full 4 s: columns 106 to 691; the screen is normally gone before
   that). An earlier 60% position with a 3.5% push cut the tail off at the
   screen edge. From a 2:3 viewport upward (tablets, desktop landscape)
   `cover` would cut the face or the floor, so the painting is letterboxed over
   a blurred, darkened copy of itself instead.

   The fade out is opacity only and is ended by the module's clock, not by
   transitionend, so a frozen animation timeline cannot leave it up. Nothing
   here animates opacity in from 0 (styles.css's entry-animation rule). */

.pb-levelload {
  position: absolute; inset: 0; z-index: 120;
  overflow: hidden;
  pointer-events: auto;
  background: #0c120a;
  opacity: 1;
  transition: opacity .35s ease-out;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  cursor: default;
}
.pb-levelload.is-leaving { opacity: 0; }
/* While the painting fades into play the words and the bar are already gone, so
   they never sit on top of the HUD's stat rows. A fade OUT only (the entry-
   animation rule is about fading content in); the clock still removes the
   element. */
.pb-levelload.is-leaving .pb-levelload__head,
.pb-levelload.is-leaving .pb-levelload__foot { opacity: 0; transition: opacity .12s ease-out; }

.pb-levelload__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: 80% 50%;
  pointer-events: none;
  transform-origin: 50% 46%;
  animation: pb-levelload-push 4s ease-out both;
}
/* A slow push-in toward Bramble. Transform only, at most 1% (see the note at
   the top: any more than ~1.4% pushes his boot or his tail out of a tall phone). */
@keyframes pb-levelload-push { from { transform: scale(1); } to { transform: scale(1.01); } }

.pb-levelload__backdrop { display: none; }

@media (min-aspect-ratio: 2/3) {
  .pb-levelload__art { object-fit: contain; object-position: 50% 50%; transform-origin: 50% 46%; }
  .pb-levelload__backdrop {
    display: block;
    position: absolute; inset: -48px;
    background: url(../../assets/splash/level-loading.webp) 50% 50% / cover no-repeat;
    filter: blur(24px) brightness(.42) saturate(1.1);
    pointer-events: none;
  }
}

.pb-levelload__scrim { position: absolute; left: 0; right: 0; pointer-events: none; }
.pb-levelload__scrim--top {
  top: 0;
  height: calc(var(--pb-sat, 0px) + 150px);
  background: linear-gradient(180deg, rgba(6, 9, 4, .80) 0%, rgba(6, 9, 4, .55) 48%, rgba(6, 9, 4, 0) 100%);
}
.pb-levelload__scrim--bottom {
  bottom: 0;
  height: calc(var(--pb-sab, 0px) + 112px);
  background: linear-gradient(0deg, rgba(6, 9, 4, .82) 0%, rgba(6, 9, 4, .48) 52%, rgba(6, 9, 4, 0) 100%);
}

.pb-levelload__head {
  position: absolute; left: 0; right: 0;
  top: calc(var(--pb-sat, 0px) + 18px);
  padding: 0 max(16px, var(--pb-sar, 0px)) 0 max(16px, var(--pb-sal, 0px));
  text-align: center;
  pointer-events: none;
}
.pb-levelload__line {
  margin: 0;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  font: 700 15px/1.25 ui-rounded, "Trebuchet MS", sans-serif;
  letter-spacing: .12em;
  color: var(--pb-cream, #F2E8D0);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 2px 10px rgba(0, 0, 0, .7);
}
/* A leaf sprig either side of "Level N of 50", the skin's own ornament
   (assets/ui/leaf-sprig.webp, the one its plaques use). Decoration only: if the
   file is missing the line just has two blank 32 px gaps. */
.pb-levelload__line::before,
.pb-levelload__line::after {
  content: ''; flex: 0 0 auto; width: 32px; height: 21px;
  background: url(../../assets/ui/leaf-sprig.webp) center / contain no-repeat;
}
.pb-levelload__line::after { transform: scaleX(-1); }
.pb-levelload__name {
  margin: 4px auto 0;
  max-width: 22em;
  font-family: var(--sk-title-font, "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif);
  font-weight: 700;
  font-size: clamp(22px, 6.6vw, 34px);
  line-height: 1.12;
  /* The skin's gold-leaf title (round48-skin.css .pb-title): gold with a carved
     dark edge and a warm glow. */
  color: var(--sk-title, #FFD98A);
  text-shadow: 0 1px 0 #6B3E0C, 0 2px 0 #3A2006, 0 0 1px #2A1604, 0 3px 8px rgba(0, 0, 0, .65), 0 0 18px rgba(255, 200, 100, .18);
  text-wrap: balance;
}

.pb-levelload__foot {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(26px, calc(var(--pb-sab, 0px) + 18px));
  width: min(240px, 62vw);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
/* The boot splash's caption and bar (round31-menus.css .pb-splash__loading*),
   restated under this screen's own names so a change to either stays local.
   The bar's groove is left to the shared .pb-bar (and whatever skin dresses
   it), exactly as the splash's is; only the size and the moss fill are set. */
.pb-levelload__label {
  margin: 0;
  font: 600 11.5px/1.2 ui-rounded, "Trebuchet MS", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: #F4E4C4; text-shadow: 0 2px 8px #0c120a; opacity: .92;
}
.pb-levelload__bar { width: 100%; height: 8px; }
.pb-levelload__fill { background: linear-gradient(180deg, var(--pb-moss-200, #C8E86B), var(--pb-moss-400, #6B8F3A)); }

@media (prefers-reduced-motion: reduce) {
  .pb-levelload__art { animation: none; }
}