/* B398 + B399 rename (2026-05-26): First-time-player demo chassis
   (formerly walkthrough.css — renamed per B399 Decision 1; class names
   .wt-* preserved because they're opaque to users and renaming churn
   would dirty git history without semantic gain).

   Per-beat layout + per-element styling lives inline on the nodes in
   modules/screens/demo.js so the port matches the design pack's
   high-fidelity inline-style approach
   (_audit/_pantsy10/design_handoff_first_time_walkthrough/source/
    screen-walkthrough.jsx — folder path preserved per Decision 1).
   THIS file only carries:
     - overlay / stage / progress chassis
     - the 4 shared keyframes (wt-tile-pop, wt-stamp-slam, wt-pantsy-glow,
       wt-cta-bob) + 2 mascot keyframes (wt-mascot-flame-strut /
       wt-mascot-jeans-rock)
     - iOS safe-area offsets
     - reduced-motion override
     - host-only lobby pill (B399 FIX 3) — fire-orange tinted chip the host
       sees while OTHER joiners are inside the demo, so the 32s onboarding
       gap doesn't read as a frozen lobby

   Token discipline: zero raw #hex / rgb / Npx outside this comment.
   Every value resolves to an existing PoF token. Spacing comes from
   --space-*; radii from --radius-*; colors via var() or color-mix().
*/

/* B402 (2026-05-27): scroll-lock + conditional cream-extension while demo
   is active. The demo overlay sits at `inset: 0` so it covers the visible
   viewport, but iOS Safari paints the status-bar and URL-bar overscroll
   areas from BODY/HTML, not from the overlay. And the body underneath was
   scrollable, so dragging inside the demo could expose the lobby below.

   modules/screens/demo.js adds/removes `pof-demo-active` on mount/unmount.

   v2 (Stian on-device 2026-05-27): the demo has dark-plum explainer beats
   AND a cream final-CTA beat. Painting body cream for the entire demo
   leaked cream stripes into the dark beats. Fix: the cream override is
   now SCOPED via `:has(.wt-overlay.wt-cta-bg)` — only applies when the
   overlay is in its CTA-bg state. Dark beats keep the default html dark
   gradient. */
body.pof-demo-active {
  overflow: hidden;
  overscroll-behavior: none;
}
html:has(body.pof-demo-active) {
  overflow: hidden;
  overscroll-behavior: none;
}
/* Hide the global topbar while the demo overlay is mounted — the demo
   owns the full visible surface and the topbar's profile button could
   peek through rubber-band overscroll. Same pattern as
   `body.pof-onboarding-active .topbar { display: none; }`. */
body.pof-demo-active .topbar { display: none; }

/* Cream extension — ONLY while the overlay is in CTA-bg state (final
   "Go play" beat). Detected via :has() so no JS toggling needed. */
body.pof-demo-active:has(.wt-overlay.wt-cta-bg) {
  background: linear-gradient(180deg, var(--surface-card) 0%, var(--border) 100%) !important;
}
html:has(body.pof-demo-active .wt-overlay.wt-cta-bg) {
  background-color: var(--surface-card) !important;
  background-image: none !important;
}

/* B399 FIX 3 (2026-05-26): host-only lobby demo-active pill. Sits above
   bottomActions in the lobby footer position. Fire-orange tinted so it
   reads as a soft "heads-up", not an alert. */
.lobby-demo-active-pill {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  margin: var(--space-12) auto var(--space-6);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--primary) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 33%, transparent);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm); /* allow-raw-px: B47 a11y text-scale pattern, mirrors base.css chassis */
  font-weight: 600;
  text-align: center;
}

.wt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--pantsy-bg-grad);
  color: var(--surface-card);
  font-family: var(--font-body);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
  opacity: 1;
  transition: opacity 220ms ease;
}

.wt-overlay.wt-cta-bg {
  background: linear-gradient(
    180deg,
    var(--surface-card) 0%,
    var(--cream-dim) 100%
  );
  color: var(--ink);
}

.wt-progress {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + var(--space-18));
  left: 0;
  right: 0;
  padding: 0 var(--space-18);
  display: flex;
  gap: var(--space-10);
  z-index: 50;
  pointer-events: none;
}

.wt-progress-track {
  flex: 1;
  height: var(--space-4);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-card) 10%, transparent);
  overflow: hidden;
}
.wt-overlay.wt-cta-bg .wt-progress-track {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.wt-progress-fill {
  height: 100%;
  background: var(--surface-card);
  opacity: 0.92;
  transition: width 80ms linear;
}
.wt-overlay.wt-cta-bg .wt-progress-fill {
  background: var(--ink);
}

.wt-stage {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + var(--space-28));
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
}

.wt-beat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-12) var(--space-24) var(--space-28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.wt-beat.is-active {
  opacity: 1;
  pointer-events: auto;
}

@keyframes wt-tile-pop {
  0%   { transform: scale(0.55) rotate(var(--wt-rot, 0deg)); opacity: 0; }
  60%  { transform: scale(1.05) rotate(var(--wt-rot, 0deg)); opacity: 1; }
  100% { transform: scale(1)    rotate(var(--wt-rot, 0deg)); opacity: 1; }
}

@keyframes wt-stamp-slam {
  0%   { transform: translate(-50%, -50%) scale(2.6) rotate(-22deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(0.92) rotate(-12deg); opacity: 1; }
  75%  { transform: translate(-50%, -50%) scale(1.05) rotate(-9deg); }
  100% { transform: translate(-50%, -50%) scale(1)    rotate(-10deg); opacity: 1; }
}

@keyframes wt-pantsy-glow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 var(--space-8) var(--pantsy-glow); }
}

@keyframes wt-cta-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.2em); }
}

@keyframes wt-mascot-flame-strut {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-0.45em) rotate(4deg); }
}

@keyframes wt-mascot-jeans-rock {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

.wt-mascot {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  position: relative;
}
.wt-mascot-flame {
  transform-origin: 50% 100%;
  animation: wt-mascot-flame-strut 1.6s ease-in-out infinite;
  margin-right: calc(-1 * var(--space-20));
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 0 var(--space-14) var(--primary));
}
.wt-mascot-flame > div { display: block; }
.wt-mascot-jeans {
  transform-origin: 50% 100%;
  animation: wt-mascot-jeans-rock 2.4s ease-in-out infinite;
  filter: drop-shadow(0 var(--space-6) var(--space-12)
    color-mix(in srgb, var(--ink) 40%, transparent));
}
.wt-mascot-jeans > div { display: block; }

@media (prefers-reduced-motion: reduce) {
  .wt-overlay [class*="wt-"],
  .wt-overlay [style*="animation"] {
    animation: none !important;
    transition: opacity 100ms !important;
  }
}

/* B398 — rules-modal 2-CTA row (returning users only).
   Tutorial CTA on the left + primary close on the right. First-time
   users hit the unsplit single-CTA branch in app.js so this layout
   never renders for them. */
.rules-modal-cta-row {
  display: flex;
  flex-direction: row;
  gap: var(--space-10);
  align-items: stretch;
  width: 100%;
}
.rules-modal-cta-row .rules-modal-cta {
  flex: 1;
  margin: 0;
}
.rules-modal-cta-row .rules-modal-cta-tutorial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  text-transform: none;
}
/* B402 (2026-05-27): .btn-ghost is designed for dark surfaces (light
   text + cream-tinted ghost border) — on the cream rules modal it
   rendered near-invisible (cream-on-cream). Same fix pattern as
   .pof-confirm-card .btn-ghost (style.css ~5824): override colour
   and border so the demo CTA reads as a real, tappable secondary
   button next to the orange primary. Mirrors the existing convention
   for ghost buttons inside cream popup chassis. */
.rules-modal-cta-row .rules-modal-cta-tutorial.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
}
.rules-modal-cta-row .rules-modal-cta-tutorial.btn-ghost:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.rules-modal-cta-tutorial-icon {
  display: inline-flex;
  align-items: center;
}

/* B400 (2026-05-26): demo final-beat CTAs (`.wt-cta-primary` /
   `.wt-cta-replay` in demo.js) shipped without CSS — buttons rendered
   default-gray. Mirror the home-screen filled-orange primary + a text-
   link ghost register for the secondary "Watch again" action. Tokens
   only (semantic --color-cta-default / --primary-on / spacing scale)
   so the vertical-override layer keeps working.

   Inline styles in demo.js still own min-height + font-size + padding-
   on-the-primary; this class supplies the rest of the chassis. */
.wt-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-sm);
  width: 100%;
  background: var(--color-cta-default);
  color: var(--primary-on);
  border: none;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-body);
  cursor: pointer;
  box-shadow: var(--elev-1) color-mix(in srgb, var(--shadow-black) 12%, transparent);
  transition: transform var(--dur-instant), box-shadow var(--dur-fast), background var(--dur-base);
  user-select: none;
}
.wt-cta-primary:active { transform: scale(0.98); }

.wt-cta-replay {
  /* B405: shared size + 36px tap area + flex-centering come from the
     canonical secondary-CTA group rule in style.css (the four secondary
     CTAs share one definition). Own register only below. */
  gap: var(--gap-sm);
  width: 100%;
  background: transparent;
  color: var(--color-cta-default);
  border: none;
  padding: 0 var(--space-8);
  font-family: inherit;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-body);
  cursor: pointer;
  transition: opacity var(--dur-fast);
}
.wt-cta-replay:hover { opacity: 0.75; }
.wt-cta-replay svg { flex: 0 0 auto; }