/* ROUND 49 (owner, 2026-10-16) — the home screen's rigged Bramble and the opening screen.
   Linked after round48-skin.css and round48-loading.css (index.html), so it only adds and refines.

   1. THE RIG (src/ui/menuBrambleRig.js). The wrapper keeps the class the round 48 painting used
      (.pb-hero__painting, shown by .is-ready) so menus.js sizes it exactly as before: width = 0.597 x height. The
      stage fills the wrapper; every layer is an absolutely positioned <img> whose box is a percentage of the stage,
      so the whole figure scales with the wrapper. A layer moves only by `transform: matrix(...)` written by the
      module (a rotation about a joint plus a translation: no scale, no filter), which is a compositor-only change. */
.pb-rig { position: relative; overflow: visible; }
.pb-rig__stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pb-rig__layer {
  position: absolute; display: block; max-width: none; max-height: none;
  transform-origin: 0 0; will-change: transform;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none;
}
/* The closed-eye patch: shown only while the rig's blink is on. */
.pb-rig__layer--blink { visibility: hidden; }
.pb-rig.is-blinking .pb-rig__layer--blink { visibility: visible; }
/* The rig has no single picture to breathe, so the round 48 rules for .pb-hero__paint do not apply to it. */

/* 2. THE OPENING SCREEN (menus.js mountSplash). The new painting (docs/qa/imagine-art/splash/splash-grok27.jpg, shipped
      as assets/splash/splash.webp) has the PineBurst title across the middle (about 43 to 55 percent of its height),
      a face at 22 to 30 percent (Bramble) and one at 66 to 72 percent (the green squirrel, boots end near 86 percent),
      so the loading bar, the "Tap to continue" cue, the version tag and the rating line must stay in the bottom
      band, below the boots and clear of the title.

      Measured at 375 x 667 with the round 31 positions: the cue (bottom 28 px, 20 px tall) sat on top of the first
      line of the two-sentence rating notice (bottom 10 px, 30 px tall), so "TAP TO CONTINUE" was printed over
      "Anonymous play statistics". The cue and the loading group (they never show together: the bar is removed
      before the cue appears) now share one slot above the rating block, which keeps both clear of it. */
.pb-splash__cue {
  bottom: max(54px, calc(var(--pb-sab, 0px) + 46px));
}
.pb-splash__loading {
  bottom: max(46px, calc(var(--pb-sab, 0px) + 38px));
}

/* ROUND 49 FIX (art director F10): at 375 x 667 the tap cue and the rating notice were printed straight onto smoke and
   beetles, and a beetle touched "CONTINUE". A scrim fades the bottom 18 percent of the screen from clear to dark
   (rgba(10,12,8,.75) at the very bottom), under the cue, the loading group, the rating notice and the version tag and
   over the painting. It is a pseudo-element of the screen with a static gradient: no extra node, no per-frame cost, and
   it takes no taps. The screen is a stacking context of its own, so the painting stays at the bottom (auto) and the
   words go above the scrim (z-index 2). */
.pb-splash { isolation: isolate; }
.pb-splash::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 12, 8, 0) 0%, rgba(10, 12, 8, .75) 100%);
}
.pb-splash__loading, .pb-splash__cue, .pb-splash__rating, .pb-splash__version { z-index: 2; }

/* On a phone taller than the painting (every iPhone since the X: 390 x 844 and 430 x 932 are about 0.46 wide to 1
   tall, the painting 0.5625), `object-fit: contain` leaves a flat dark band above and below it. The top and bottom
   five percent of the painting are dark rock and fog, so they are faded into the band instead of ending in a hard
   edge. The image box is first made exactly the painting's shape (full width, 720:1280, centred), so the mask lands
   on the painting and not on the empty band. Phones that fit the painting exactly (375 x 667, 0.562) keep the full
   picture to the edge. A static mask on one image: no per-frame cost. */
@media (max-aspect-ratio: 5/9) {
  .pb-splash__art {
    inset: auto; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 720 / 1280;
    transform: translateY(-50%); object-fit: fill;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}