/* ═══════════════════════════════════════════════════════════════════════════
   Pip, the dealer — the Pop-Up deal on the big screen.
   Scene: public/js/pip.js. Preview without a game: /pip-preview.html.
   Rig: logo/mascot/pip-head.svg + pip-hand.svg, generated by
   misc/design-assets/generators/mascot.js. Notes: docs/pop-ups.md.

   Everything on the stage is sized in em, and the stage's font-size is 1% of its
   width: one number (--u) scales the whole scene to any screen, and the
   transforms pip.js writes in em stay right through a resize.

   Motion rules this file keeps (CLAUDE.md):
   - staggered entrances fill `backwards`, never `both`;
   - one element per kind of motion (position / squash / idle bob / lean), so a
     class or an animation on one never evicts another's transform;
   - no filter on anything with preserve-3d (a card): it flattens the flip.
   ═══════════════════════════════════════════════════════════════════════════ */

.pip-scene {
  --ink: #201e2e;
  --pink: #e65498;
  --hot: #ff6ec7;
  --cyan: #00f3ff;
  --yel: #ffd23f;
  --lime: #80fd77;
  --u: min(1vw, 1.7778vh);
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow: hidden;
  background: radial-gradient(120% 95% at 50% 36%, #2d2556 0%, #1a1639 46%, #0b0a18 100%);
  color: #fff;
  font-family: var(--font-heading, 'Outfit', system-ui, sans-serif);
  user-select: none;
  -webkit-user-select: none;
  animation: pipFade 0.5s ease backwards;
}
.pip-scene.is-leaving { opacity: 0; transition: opacity 0.45s ease; }

/* ── Ambient: drifting holo light, twinkles ─────────────────────────────── */
.pip-blob {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.pip-blob--1 { left: -30vmax; top: -38vmax; background: radial-gradient(circle, rgba(255, 110, 199, 0.28), transparent 62%); animation: pipDrift1 19s ease-in-out infinite alternate; }
.pip-blob--2 { right: -34vmax; top: -6vmax; background: radial-gradient(circle, rgba(0, 243, 255, 0.2), transparent 62%); animation: pipDrift2 23s ease-in-out infinite alternate; }
.pip-blob--3 { left: 10vmax; bottom: -52vmax; background: radial-gradient(circle, rgba(128, 253, 119, 0.16), transparent 62%); animation: pipDrift3 17s ease-in-out infinite alternate; }
@keyframes pipDrift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes pipDrift2 { to { transform: translate(-12vmax, 14vmax) scale(0.9); } }
@keyframes pipDrift3 { to { transform: translate(10vmax, -12vmax) scale(1.1); } }

.pip-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 56.25);
  font-size: var(--u);
  transform: translate(-50%, -50%);
}
.pip-layer { position: absolute; inset: 0; pointer-events: none; }

.pip-twinkle {
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  animation: pipTwinkle 3.4s ease-in-out infinite;
}
@keyframes pipTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 0.75; transform: scale(1) rotate(45deg); }
}

/* The "keep it secret" spotlight: everything but Pip goes dark. */
.pip-spot {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 45%), transparent 0 11%, rgba(6, 5, 16, 0.88) 30%);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.pip-spot.is-on { opacity: 1; }

/* ── Pip ────────────────────────────────────────────────────────────────── */
/* The actor is a zero-size point at the centre of Pip's head; everything that
   belongs to Pip (hands, deck, bubble) hangs off it and travels with it. */
.pip-actor { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }

.pip-aura {
  position: absolute;
  left: -34em;
  top: -34em;
  width: 68em;
  height: 68em;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 110, 199, 0.32) 0%, rgba(0, 243, 255, 0.12) 26%, transparent 46%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.075) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 62%);
  mask: radial-gradient(circle, #000 12%, transparent 62%);
  opacity: 0;
  transition: opacity 0.9s ease;
  animation: pipSpin 48s linear infinite;
  pointer-events: none;
}
.pip-aura.is-on { opacity: 1; }
@keyframes pipSpin { to { transform: rotate(360deg); } }

.pip-shadow {
  position: absolute;
  left: -7em;
  top: 12.6em;
  width: 14em;
  height: 2.4em;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent);
  animation: pipShadow 2.6s ease-in-out infinite;
}
@keyframes pipShadow { 50% { transform: scale(0.82); opacity: 0.7; } }

/* position (actor) → squash → idle bob → lean → the head */
.pip-body { position: absolute; left: -10em; top: -11.4em; width: 20em; height: 21.56em; transform-origin: 50% 90%; }
.pip-bob { width: 100%; height: 100%; animation: pipBob 2.6s ease-in-out infinite; }
.pip-lean { width: 100%; height: 100%; transform-origin: 50% 85%; transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pipBob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-0.9em) rotate(1.2deg); }
}
.pip-head { display: block; width: 100%; height: 100%; overflow: visible; }

/* One eye set and one mouth at a time — the rig draws them all. */
.pip-head .pip-eyes,
.pip-head .pip-mouth { display: none; }
.pip-head[data-eyes="open"] .pip-eyes--open,
.pip-head[data-eyes="closed"] .pip-eyes--closed,
.pip-head[data-eyes="happy"] .pip-eyes--happy,
.pip-head[data-eyes="wide"] .pip-eyes--wide,
.pip-head[data-eyes="wink"] .pip-eyes--wink,
.pip-head[data-mouth="smile"] .pip-mouth--smile,
.pip-head[data-mouth="o"] .pip-mouth--o,
.pip-head[data-mouth="open"] .pip-mouth--open,
.pip-head[data-mouth="grin"] .pip-mouth--grin,
.pip-head[data-mouth="shh"] .pip-mouth--shh,
.pip-head[data-mouth="tongue"] .pip-mouth--tongue { display: inline; }
.pip-look { transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1); }
.pip-visor, .pip-tuft { transform-box: fill-box; transform-origin: 50% 100%; }

/* Hands: position (WAAPI) → gesture (WAAPI) → idle float → mirror → the glove */
.pip-hand { position: absolute; left: -4em; top: -4em; width: 8em; height: 8em; will-change: transform; }
.pip-hand__gest, .pip-hand__bob, .pip-hand__flip { width: 100%; height: 100%; }
.pip-hand__gest { transform-origin: 50% 78%; }
.pip-hand__bob { animation: pipHandBob 2.2s ease-in-out infinite; }
.pip-hand--l .pip-hand__bob { animation-duration: 2.5s; animation-delay: -0.9s; }
.pip-hand--l .pip-hand__flip { transform: scaleX(-1); }
.pip-hand svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pip-hand .pip-pose { display: none; }
.pip-hand[data-pose="open"] .pip-pose--open,
.pip-hand[data-pose="point"] .pip-pose--point,
.pip-hand[data-pose="fist"] .pip-pose--fist { display: inline; }
@keyframes pipHandBob { 50% { transform: translateY(-0.7em) rotate(4deg); } }

/* ── Cards ──────────────────────────────────────────────────────────────── */
/* The back matches the phone's card (play.html .popup-card__back), so the card
   Pip throws at you is the one that turns over in your hand. */
.pip-back {
  background: repeating-linear-gradient(45deg, #2a2346 0 1.1em, #231d3b 1.1em 2.2em);
  border: 0.32em solid var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pip-back img { width: 62%; pointer-events: none; }

/* The deck: two half-stacks that sit together, and split for the riffle */
.pip-deck { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: scale(0); }
.pip-deck__half { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pip-mini {
  position: absolute;
  left: -3em;
  top: -4.2em;
  width: 6em;
  height: 8.4em;
  border-radius: 0.8em;
  box-shadow: 0 0.2em 0 rgba(0, 0, 0, 0.35);
}
.pip-mini.pip-back { border-width: 0.24em; }

/* card (position, WAAPI) → lift (lit / dim) → inner (flip) → faces */
.pip-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 9.6em;
  height: 13.44em;
  margin: -6.72em 0 0 -4.8em;
  perspective: 70em;
  will-change: transform;
}
.pip-card__lift { width: 100%; height: 100%; transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); }
.pip-card.is-lit .pip-card__lift { transform: translateY(-2.4em) scale(1.09); }
.pip-card.is-dim .pip-card__lift { transform: translateY(0.6em) scale(0.93); }
.pip-card__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.pip-card__face {
  position: absolute;
  inset: 0;
  border-radius: 1.3em;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.4s ease;
}
.pip-card__face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0b0a18;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  pointer-events: none;
}
.pip-card.is-dim .pip-card__face::before { opacity: 0.62; }
.pip-card__front {
  transform: rotateY(180deg);
  background: #1b223c;
  border: 0.32em solid var(--pink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1em 0.6em;
  text-align: center;
}
.pip-card--rare .pip-card__front {
  border-color: transparent;
  background:
    linear-gradient(#1b223c, #1b223c) padding-box,
    linear-gradient(135deg, #ffd23f, #ff6ec7, #00f3ff, #80fd77, #ffd23f, #ff6ec7) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: pipHolo 4s linear infinite;
}
@keyframes pipHolo {
  from { background-position: 0 0, 0% 50%; }
  to { background-position: 0 0, 100% 50%; }
}
.pip-card.is-lit .pip-card__front { box-shadow: 0 0 2.6em rgba(255, 110, 199, 0.75), 0 0.5em 1.4em rgba(0, 0, 0, 0.45); }
.pip-card--rare.is-lit .pip-card__front { box-shadow: 0 0 3em rgba(255, 110, 199, 0.8), 0 0 1.4em rgba(0, 243, 255, 0.8), 0 0.5em 1.4em rgba(0, 0, 0, 0.45); }
.pip-card__front::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%);
  transform: translateX(-70%);
  pointer-events: none;
  z-index: 1;
}
.pip-card.is-shimmer .pip-card__front::after { animation: pipShimmer 1.1s ease-in-out 2 backwards; }
@keyframes pipShimmer { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
.pip-card__art { width: 66%; pointer-events: none; }
.pip-card__name { font-size: 1.32em; font-weight: 900; line-height: 1.05; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pip-card__rarity {
  font-size: 0.78em;
  font-weight: 900;
  letter-spacing: 0.18em;
  padding: 0.25em 0.8em;
  border-radius: 99em;
  background: rgba(230, 84, 152, 0.22);
  color: #ff9ccb;
}
.pip-card--rare .pip-card__rarity { background: linear-gradient(90deg, #ffd23f, #ff6ec7, #00f3ff, #80fd77); color: var(--ink); }

/* A dealt card in flight: the back only */
.pip-card--flying .pip-card__face { box-shadow: 0 0.8em 1.6em rgba(0, 0, 0, 0.5); }

/* ── The speech bubble ──────────────────────────────────────────────────── */
.pip-bubble {
  position: absolute;
  left: 8.4em;
  bottom: 6.4em;
  width: max-content;
  max-width: 40em;
  padding: 1.1em 1.7em 1.25em;
  background: #fff;
  color: var(--ink);
  border: 0.36em solid var(--ink);
  border-radius: 2.2em;
  box-shadow: 0 0.55em 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5em rgba(255, 255, 255, 0.1);
  transform-origin: 0 100%;
}
.pip-bubble[hidden] { display: none; }
.pip-bubble::before,
.pip-bubble::after {
  content: '';
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 6% 100%);
}
.pip-bubble::before { left: 1.3em; bottom: -2.9em; width: 3.6em; height: 3.2em; background: var(--ink); }
.pip-bubble::after { left: 1.85em; bottom: -2.05em; width: 2.45em; height: 2.4em; background: #fff; }
.pip-bubble__text { font-size: 2.55em; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.pip-word { display: inline-block; opacity: 0; }
.pip-word.is-in { opacity: 1; animation: pipWordIn 0.34s cubic-bezier(0.2, 1.7, 0.4, 1) backwards; }
@keyframes pipWordIn { from { opacity: 0; transform: translateY(0.35em) scale(0.55); } }
.pip-word--em { color: var(--pink); }
.pip-word--holo {
  background: linear-gradient(90deg, #f5a300, #ff3fae, #00b8e6, #2fc23f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Players along the bottom ───────────────────────────────────────────── */
/* --t is the tile size. It is set in --u, never em: a custom property holding em resolves against
   the font-size of whichever element USES it, and the avatar's initial is set in a bigger one. */
.pip-players {
  --t: calc(var(--u) * 8);
  position: absolute;
  left: 3em;
  right: 3em;
  bottom: 1em;
  height: 13.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}
.pip-tile {
  position: relative;
  width: var(--t);
  height: calc(var(--t) * 1.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: pipTileIn 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
}
@keyframes pipTileIn { from { opacity: 0; transform: translateY(2em) scale(0.6); } }
.pip-tile__avatar {
  position: relative;
  width: calc(var(--t) * 0.64);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c, #6b6d80);
  box-shadow: 0 0 0 calc(var(--t) * 0.045) rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--t) * 0.3);
  font-weight: 900;
  color: #fff;
  transition: box-shadow 0.35s ease;
}
.pip-tile__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pip-tile.has-card .pip-tile__avatar { box-shadow: 0 0 0 calc(var(--t) * 0.045) var(--hot), 0 0 1.2em rgba(255, 110, 199, 0.45); }
.pip-tile.is-ready .pip-tile__avatar { box-shadow: 0 0 0 calc(var(--t) * 0.045) var(--lime), 0 0 1.4em rgba(128, 253, 119, 0.55); }
.pip-tile__slot {
  position: absolute;
  top: calc(var(--t) * -0.12);
  right: calc(var(--t) * -0.1);
  width: calc(var(--t) * 0.26);
  height: calc(var(--t) * 0.36);
  border-radius: calc(var(--t) * 0.05);
  border-width: calc(var(--t) * 0.025);
  transform: rotate(14deg);
  opacity: 0;
}
.pip-tile.has-card .pip-tile__slot { opacity: 1; }
.pip-tile__tick {
  position: absolute;
  left: calc(var(--t) * 0.12);
  top: calc(var(--t) * 0.42);
  width: calc(var(--t) * 0.26);
  height: calc(var(--t) * 0.26);
  border-radius: 50%;
  background: var(--lime);
  border: calc(var(--t) * 0.03) solid var(--ink);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.pip-tile__tick svg { width: 70%; height: 70%; }
.pip-tile.is-ready .pip-tile__tick { transform: scale(1); }
.pip-tile__name {
  margin-top: calc(var(--t) * 0.06);
  max-width: 100%;
  padding: 0 0.3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(var(--t) * 0.15);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
}
.pip-players.is-tiny .pip-tile__name { display: none; }

/* ── Ready count ────────────────────────────────────────────────────────── */
.pip-hud {
  position: absolute;
  left: 2.2em;
  top: 2em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9em;
  opacity: 0;
  transform: translateY(-1em);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.pip-hud.is-on { opacity: 1; transform: none; }
.pip-hud__count {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7em 1.3em;
  border-radius: 99em;
  background: rgba(255, 255, 255, 0.08);
  border: 0.18em solid rgba(255, 255, 255, 0.14);
  font-size: 1.7em;
  font-weight: 800;
}
.pip-hud__count b { color: var(--lime); font-weight: 900; }
.pip-hud__bar { width: 6em; height: 0.45em; border-radius: 99em; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.pip-hud__bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--lime); border-radius: inherit; transition: width 0.4s cubic-bezier(0.3, 1.3, 0.5, 1); }
.pip-hud__go {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0.6em 1.2em;
  border-radius: 99em;
  font-size: 1.35em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.05);
}
.pip-hud__go kbd {
  font-family: inherit;
  padding: 0.1em 0.5em;
  margin-right: 0.35em;
  border-radius: 0.4em;
  border: 0.12em solid rgba(255, 255, 255, 0.4);
  border-bottom-width: 0.28em;
}
.pip-hud.is-all .pip-hud__go { color: var(--ink); background: var(--lime); animation: pipPulse 1.1s ease-in-out infinite; }
.pip-hud.is-all .pip-hud__go kbd { border-color: rgba(32, 30, 46, 0.5); }
@keyframes pipPulse { 50% { transform: scale(1.07); box-shadow: 0 0 1.6em rgba(128, 253, 119, 0.6); } }

/* Skip the explainer — top-left while Pip talks, where the ready count goes later */
.pip-skip {
  position: absolute;
  left: 2.2em;
  top: 2em;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 99em;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  font-size: 1.35em;
  font-weight: 800;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.pip-skip.is-on { opacity: 1; pointer-events: auto; }
.pip-skip:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.pip-skip kbd {
  font-family: inherit;
  padding: 0.1em 0.5em;
  margin-right: 0.35em;
  border-radius: 0.4em;
  border: 0.12em solid rgba(255, 255, 255, 0.35);
  border-bottom-width: 0.28em;
}

/* ── Effects: sparks and confetti (spawned and removed by pip.js) ───────── */
.pip-spark, .pip-confetti { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.pip-spark {
  width: 1.3em;
  height: 1.3em;
  margin: -0.65em 0 0 -0.65em;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.pip-confetti { width: 0.7em; height: 1.2em; margin: -0.6em 0 0 -0.35em; border-radius: 0.15em; }

/* ═══ HALFTIME — Pip's restock show (pip.js _halftimeShow) ═══════════════════
   Built behind the players, so the room sits in front of the curtain like an
   audience: searchlights → crate → curtains + valance → marquee → players. */
.pip-scene--halftime {
  background: radial-gradient(110% 90% at 50% 30%, #3a1a3e 0%, #1f1033 48%, #0a0714 100%);
}
.pip-scene--halftime .pip-players { left: 7em; right: 7em; }
.pip-scene--halftime .pip-hud,
.pip-scene--halftime .pip-skip { left: 7.5em; top: 6em; }

/* The gold card: every back at halftime — deck, flying cards, tile slots. */
.pip-scene--halftime .pip-tile.is-due .pip-tile__slot,
.pip-scene--halftime .pip-mini,
.pip-scene--halftime .pip-card--flying .pip-back {
  background: repeating-linear-gradient(45deg, #4a3410 0 1.1em, #3a280b 1.1em 2.2em);
  border-color: var(--yel);
  box-shadow: 0 0 1em rgba(255, 210, 63, 0.55);
}
.pip-scene--halftime .pip-card--flying .pip-card__face { box-shadow: 0 0 1.6em rgba(255, 210, 63, 0.7), 0 0.8em 1.6em rgba(0, 0, 0, 0.5); }

/* Holding a card already: dimmed, their own (pink) card face down on the tile. */
.pip-tile.is-holding { opacity: 0.42; transition: opacity 0.5s ease; }
.pip-tile.is-holding.is-ready { opacity: 0.42; }
/* Due a card: called out with a gold ring once Pip asks. */
.pip-scene.is-calling .pip-tile.is-due:not(.has-card) .pip-tile__avatar {
  animation: pipCall 1.1s ease-in-out infinite;
}
@keyframes pipCall {
  0%, 100% { box-shadow: 0 0 0 calc(var(--t) * 0.045) var(--yel), 0 0 0.6em rgba(255, 210, 63, 0.3); transform: scale(1); }
  50% { box-shadow: 0 0 0 calc(var(--t) * 0.07) var(--yel), 0 0 2em rgba(255, 210, 63, 0.75); transform: scale(1.08); }
}
.pip-scene--halftime .pip-tile.is-due.has-card .pip-tile__avatar { box-shadow: 0 0 0 calc(var(--t) * 0.045) var(--yel), 0 0 1.2em rgba(255, 210, 63, 0.5); }
.pip-scene--halftime .pip-tile.is-due.is-ready .pip-tile__avatar { box-shadow: 0 0 0 calc(var(--t) * 0.045) var(--lime), 0 0 1.4em rgba(128, 253, 119, 0.55); }

/* Searchlights: two beams from below the stage, crossing. */
.pip-ht-lights { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s ease 0.3s; }
.pip-scene.is-open .pip-ht-lights { opacity: 1; }
.pip-ht-beam {
  position: absolute;
  bottom: -6em;
  width: 22em;
  height: 72em;
  margin-left: -11em;
  background: linear-gradient(to top, rgba(255, 236, 170, 0.42), rgba(255, 236, 170, 0.08) 70%, transparent);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
}
.pip-ht-beam--l { left: 22em; animation: pipSweepL 5.5s ease-in-out infinite alternate; }
.pip-ht-beam--r { left: 78em; animation: pipSweepR 6.2s ease-in-out infinite alternate; }
@keyframes pipSweepL { from { transform: rotate(-28deg); } to { transform: rotate(24deg); } }
@keyframes pipSweepR { from { transform: rotate(26deg); } to { transform: rotate(-22deg); } }

/* Curtains: red velvet, gathered to the sides by scaleX (pip.js writes it). */
.pip-ht-drape { position: absolute; inset: -2em -2em 0; pointer-events: none; }
.pip-ht-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52em;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.45)),
    repeating-linear-gradient(90deg, #6d0a22 0 1.6em, #b31b42 1.6em 3.1em, #8e1232 3.1em 4.2em, #5a081c 4.2em 5em);
  box-shadow: inset 0 -1.2em 0 #e5b53a, inset 0 -1.6em 0 #8a5a12;
  will-change: transform;
}
.pip-ht-curtain--l { left: 0; transform-origin: 0 50%; }
.pip-ht-curtain--r { right: 0; transform-origin: 100% 50%; }
.pip-ht-valance {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6em;
  background:
    linear-gradient(to bottom, transparent 70%, #e5b53a 70% 80%, transparent 80%),
    repeating-linear-gradient(90deg, #7d0e28 0 2.4em, #a3173a 2.4em 4.8em);
  -webkit-mask: radial-gradient(3.2em 2.6em at 3.2em 0, #000 99%, transparent) 0 3.4em / 6.4em 2.6em repeat-x, linear-gradient(#000, #000) 0 0 / 100% 3.45em no-repeat;
  mask: radial-gradient(3.2em 2.6em at 3.2em 0, #000 99%, transparent) 0 3.4em / 6.4em 2.6em repeat-x, linear-gradient(#000, #000) 0 0 / 100% 3.45em no-repeat;
  filter: drop-shadow(0 0.4em 0.4em rgba(0, 0, 0, 0.5));
}

/* The marquee: hangs from the valance on two cables. */
.pip-ht-marquee {
  position: absolute;
  left: 50%;
  top: 2.4em;
  width: 42em;
  transform-origin: 50% -3em;
  will-change: transform;
}
.pip-ht-cable { position: absolute; top: -3em; width: 0.3em; height: 3.2em; background: #c9cbd6; box-shadow: 0 0 0 0.08em #201e2e; }
.pip-ht-cable--l { left: 7em; }
.pip-ht-cable--r { right: 7em; }
.pip-ht-board {
  position: relative;
  padding: 1.15em 2em 0.9em;
  border-radius: 1.6em;
  background: linear-gradient(#2a1636, #1a0d24);
  border: 0.45em solid #201e2e;
  box-shadow: 0 0 0 0.4em #e5b53a, 0 0.8em 0 0.4em rgba(0, 0, 0, 0.35), 0 0 4em rgba(255, 210, 63, 0.25);
  text-align: center;
  overflow: hidden;
}
/* Bulbs round the edge: two offset rings that take turns, so the light chases. */
.pip-ht-bulbs {
  position: absolute;
  inset: 0.45em;
  border-radius: 1.1em;
  background: radial-gradient(circle, #fff5c2 0 0.32em, #ffcf3f 0.38em, transparent 0.52em) 0 0 / 2.1em 2.1em;
  -webkit-mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box exclude, linear-gradient(#000, #000);
  padding: 0.95em;
  opacity: 0.25;
}
.pip-ht-bulbs--alt { background-position: 1.05em 1.05em; }
.pip-scene.is-lit .pip-ht-bulbs { animation: pipBulbs 0.5s steps(1) infinite; }
.pip-scene.is-lit .pip-ht-bulbs--alt { animation-delay: -0.25s; }
@keyframes pipBulbs { 0% { opacity: 1; } 50% { opacity: 0.2; } }
.pip-ht-title {
  position: relative;
  font-size: 6em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #6b4a1a;
}
.pip-ht-title span { display: inline-block; }
.pip-scene.is-lit .pip-ht-title span {
  color: #ffe27a;
  text-shadow: 0 0.04em 0 #b8741a, 0 0 0.25em rgba(255, 210, 63, 0.8), 0 0 0.7em rgba(255, 110, 199, 0.5);
  animation: pipLetter 0.5s cubic-bezier(0.3, 1.8, 0.5, 1) backwards, pipGlow 2.4s ease-in-out 0.8s infinite;
}
@keyframes pipLetter { from { transform: translateY(-0.4em) scale(0.6); color: #6b4a1a; } }
@keyframes pipGlow { 50% { text-shadow: 0 0.04em 0 #b8741a, 0 0 0.4em rgba(255, 226, 122, 1), 0 0 1em rgba(255, 110, 199, 0.75); } }
.pip-ht-sub {
  position: relative;
  margin-top: 0.15em;
  font-size: 1.9em;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hot);
  opacity: 0.35;
  transition: opacity 0.5s ease 0.4s;
}
.pip-scene.is-lit .pip-ht-sub { opacity: 1; }

/* The crate: a zero-size point at its centre (pip.js moves it), chute above. */
.pip-ht-crate { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.pip-ht-chute { position: absolute; left: -13em; top: -20.2em; width: 26em; height: 15em; transform-origin: 50% 100%; transition: transform 0.5s cubic-bezier(0.5, 0, 0.8, 0.4), opacity 0.5s ease; }
.pip-ht-chute svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pip-ht-crate.is-landed .pip-ht-chute { transform: translate(4em, 3em) scale(0.85, 0.15) rotate(8deg); opacity: 0; }
.pip-ht-box {
  position: absolute;
  left: -7.5em;
  top: -5.2em;
  width: 15em;
  height: 10.4em;
  border-radius: 0.7em;
  border: 0.42em solid #201e2e;
  background:
    linear-gradient(32deg, transparent 46%, #8a561c 46% 54%, transparent 54%),
    repeating-linear-gradient(0deg, #d4954a 0 2.5em, #b3732c 2.5em 2.75em);
  box-shadow: inset 0 0 0 0.5em rgba(0, 0, 0, 0.12), 0 0.6em 0 rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 100%;
}
.pip-ht-lid {
  position: absolute;
  left: -0.9em;
  right: -0.9em;
  top: -1.9em;
  height: 1.9em;
  border-radius: 0.6em;
  border: 0.42em solid #201e2e;
  background: repeating-linear-gradient(90deg, #a96a26 0 2.5em, #93591c 2.5em 2.75em);
}
.pip-ht-stencil {
  padding: 0.15em 0.6em;
  border: 0.18em dashed rgba(32, 30, 46, 0.7);
  border-radius: 0.3em;
  font-size: 2.2em;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: rgba(32, 30, 46, 0.78);
  background: rgba(255, 210, 63, 0.35);
  transform: rotate(-6deg);
}

@media (prefers-reduced-motion: reduce) {
  .pip-ht-beam, .pip-scene.is-lit .pip-ht-bulbs, .pip-scene.is-lit .pip-ht-title span, .pip-scene.is-calling .pip-tile.is-due .pip-tile__avatar { animation: none; }
}

@keyframes pipFade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pip-bob, .pip-hand__bob, .pip-shadow, .pip-aura, .pip-blob, .pip-twinkle, .pip-card--rare .pip-card__front { animation: none; }
}