/* Game Night — © 2026 Ankit Kumar Mishra. All rights reserved. See LICENSE. */
/* ============================================================
   Game Night — landing skin.
   A night of cards: midnight felt, candlelight gold, ivory faces.
   Every selector is lp- prefixed; tokens live on .lp-root so this
   file can never leak into the rest of the app.
   Motion policy: the base state of everything is the finished,
   visible state. All movement is added inside
   @media (prefers-reduced-motion: no-preference) blocks only.
   ============================================================ */

.lp-root {
  --lp-gold: 212, 175, 55;          /* champagne, as an rgb triplet */
  --lp-gold-h: #d4af37;
  --lp-ivory: #f7f3e6;
  --lp-felt: #101634;
  --lp-night: #0b0e1a;
  --lp-r: 18px;

  position: relative;
  /* Break out of #app's 620px column: full-bleed, then centre our own layout. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * clamp(16px, 3vh, 30px));
  overflow-x: hidden;
  overflow-x: clip;
}

/* ---------- shared type ---------- */
.lp-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase;
  color: rgba(var(--lp-gold), 0.92);
}
.lp-eyebrow::before, .lp-eyebrow::after {
  content: '✦'; opacity: 0.55; font-size: 10px; vertical-align: 1px;
}
.lp-eyebrow::before { margin-right: 10px; }
.lp-eyebrow::after { margin-left: 10px; }

.lp-h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 800; line-height: 1.05; letter-spacing: 0.2px;
  margin-top: 10px;
  background: linear-gradient(180deg, #fffdf6 30%, #efe2b0 72%, #d9bc63 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.lp-ssub {
  margin: 14px auto 0; max-width: 660px;
  font-size: clamp(15px, 1.8vw, 17px); line-height: 1.65; color: var(--ink-dim);
  text-wrap: pretty;
}
.lp-shead { text-align: center; margin-bottom: clamp(26px, 5vw, 46px); }

/* ---------- section shell ---------- */
.lp-sec {
  width: min(1140px, calc(100% - clamp(28px, 7vw, 88px)));
  margin: 0 auto;
  padding-top: clamp(64px, 10vh, 118px);
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 118px);
}

/* ---------- reveals: visible by default, motion added under no-preference ---------- */
.lp-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .lp-reveal {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(6px);
    transition:
      opacity 0.7s ease,
      transform 0.75s cubic-bezier(0.22, 0.8, 0.26, 1),
      filter 0.7s ease;
    transition-delay: calc(var(--ri, 0) * 80ms);
  }
  .lp-reveal.lp-on { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   THE HERO — full viewport, canvas motes, the held hand of cards
   ============================================================ */
.lp-hero {
  position: relative;
  min-height: calc(100vh - 78px);
  min-height: calc(100svh - 78px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(48px, 7vh, 90px) 18px clamp(120px, 16vh, 170px);
  overflow: hidden;
  perspective: 1200px;
}
.lp-motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.lp-hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(56% 44% at 50% 66%, rgba(var(--lp-gold), 0.13) 0%, transparent 70%),
    /* Fades back out at the bottom edge. Ending on a hard 0.65 left a visible step
       where the hero stopped darkening the fixed backdrop and the next section did not. */
    linear-gradient(180deg,
      rgba(11, 14, 26, 0) 0%,
      rgba(11, 14, 26, 0.28) 42%,
      rgba(11, 14, 26, 0.42) 68%,
      rgba(11, 14, 26, 0.16) 88%,
      rgba(11, 14, 26, 0) 100%);
}

.lp-hero-inner {
  position: relative; z-index: 3;
  width: min(720px, 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* Ambient pointer parallax: --hx/--hy are only ever set on hover-capable,
     motion-tolerant devices, so this is inert everywhere else. */
  transform: rotateY(calc(var(--hx, 0) * 2.2deg)) rotateX(calc(var(--hy, 0) * -1.6deg));
}
@media (prefers-reduced-motion: no-preference) {
  .lp-hero-inner { transition: transform 0.3s ease-out; }
}

.lp-h1 {
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(46px, 9.4vw, 96px);
  font-weight: 800; line-height: 1.0; letter-spacing: 0.3px;
  filter: drop-shadow(0 8px 34px rgba(var(--lp-gold), 0.16));
  text-wrap: balance;
}
.lp-w {
  display: inline-block;
  background: linear-gradient(180deg, #fffdf6 22%, #f3e3ad 60%, var(--lp-gold-h) 98%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-sub {
  margin-top: 18px; max-width: 570px;
  font-size: clamp(15.5px, 2vw, 18px); line-height: 1.65; color: var(--ink-dim);
  text-wrap: pretty;
}

/* ---------- the console: identity + create/join, the hero's CTA ---------- */
.lp-console {
  position: relative;
  width: min(620px, 100%);
  margin-top: 28px;
  padding: clamp(16px, 3.4vw, 24px);
  border-radius: 24px;
  text-align: left;
  background: linear-gradient(180deg, rgba(24, 29, 60, 0.78), rgba(12, 16, 34, 0.86));
  border: 1px solid rgba(var(--lp-gold), 0.22);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.lp-invite {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; margin-bottom: 14px; border-radius: 14px;
  background: rgba(var(--lp-gold), 0.1);
  border: 1px solid rgba(var(--lp-gold), 0.35);
}
.lp-invite-key { font-size: 22px; }
.lp-invite-title { font-weight: 700; font-size: 14.5px; }
.lp-invite-sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }

.lp-idrow { display: flex; gap: 10px; }
.lp-avatar {
  width: 54px; height: 54px; flex: none;
  border-radius: 16px; font-size: 26px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px solid var(--stroke);
  transition: border-color 0.2s, transform 0.15s;
}
.lp-avatar:hover { border-color: rgba(var(--lp-gold), 0.55); transform: translateY(-1px); }
.lp-avatar[aria-expanded="true"] { border-color: rgba(var(--lp-gold), 0.75); }
.lp-name {
  flex: 1; min-width: 0;
  padding: 14px 16px; border-radius: 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 1.5px solid var(--stroke);
  color: var(--ink); font-size: 16px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-name:focus { border-color: rgba(var(--lp-gold), 0.65); box-shadow: 0 0 0 4px rgba(var(--lp-gold), 0.14); }
.lp-name::placeholder { color: var(--ink-faint); }

.lp-tray {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px;
  margin-top: 10px; padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--stroke); border-radius: 16px;
  max-height: 176px; overflow-y: auto;
}
.lp-tray[hidden] { display: none; }
.lp-avopt {
  height: 44px; border-radius: 12px; font-size: 22px;
  display: grid; place-items: center;
  border: 1.5px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.lp-avopt:hover { background: var(--glass-2); transform: scale(1.08); }
.lp-avopt.lp-sel { border-color: rgba(var(--lp-gold), 0.6); background: rgba(var(--lp-gold), 0.12); }

.lp-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 520px) { .lp-actions { grid-template-columns: 1fr 1fr; } }
.lp-act {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 18px; border-radius: 16px;
  font-weight: 700; font-size: 15.5px;
  border: 1px solid var(--stroke);
  background: var(--glass); color: var(--ink);
  transition: transform 0.16s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.lp-act:active { transform: scale(0.97); }
.lp-act:disabled { opacity: 0.45; pointer-events: none; }
.lp-act-emoji { font-size: 17px; }
.lp-act-create {
  background: linear-gradient(160deg, #f2dc94 0%, #d4af37 48%, #a87f1f 100%);
  color: #241a02; border-color: transparent;
  box-shadow: 0 10px 30px rgba(var(--lp-gold), 0.28);
}
.lp-act-create:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(var(--lp-gold), 0.38); }
.lp-act-join:hover, .lp-act-join.lp-active {
  background: var(--glass-2); border-color: rgba(var(--lp-gold), 0.45);
}
/* Arriving on an invite flips the emphasis: joining is the main event. */
.lp-invited .lp-act-create { background: var(--glass); color: var(--ink); border-color: var(--stroke); box-shadow: none; }
.lp-invited .lp-act-create:hover { background: var(--glass-2); transform: none; }
.lp-invited .lp-act-join {
  background: linear-gradient(160deg, #f2dc94 0%, #d4af37 48%, #a87f1f 100%);
  color: #241a02; border-color: transparent;
  box-shadow: 0 10px 30px rgba(var(--lp-gold), 0.28);
}

.lp-joinrow { display: flex; gap: 10px; margin-top: 10px; }
.lp-joinrow[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .lp-joinrow { animation: lp-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
}
.lp-code {
  flex: 1; min-width: 0; width: 100%;
  padding: 13px 8px 13px 14px; border-radius: 16px;
  background: rgba(0, 0, 0, 0.32);
  border: 1.5px solid var(--stroke);
  color: var(--ink); outline: none;
  font-size: 22px; font-weight: 800; letter-spacing: 8px;
  text-transform: uppercase; text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-code:focus { border-color: rgba(var(--lp-gold), 0.65); box-shadow: 0 0 0 4px rgba(var(--lp-gold), 0.14); }
.lp-code::placeholder { color: var(--ink-faint); }
.lp-joingo {
  flex: none; padding: 0 26px; border-radius: 16px;
  font-weight: 800; font-size: 16px;
  background: linear-gradient(160deg, #f2dc94 0%, #d4af37 48%, #a87f1f 100%);
  color: #241a02;
  box-shadow: 0 10px 30px rgba(var(--lp-gold), 0.28);
  transition: transform 0.16s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.2s;
}
.lp-joingo:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(var(--lp-gold), 0.38); }
.lp-joingo:active { transform: scale(0.96); }
.lp-joingo:disabled { opacity: 0.45; pointer-events: none; }

.lp-conn {
  display: flex; gap: 10px; align-items: center;
  margin-top: 12px; padding: 10px 14px; border-radius: 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  font-size: 13.5px; color: var(--ink-dim);
}
.lp-spin { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .lp-spin { animation: lp-spin 1.1s linear infinite; }
}

.lp-fine {
  margin-top: 14px; text-align: center;
  font-size: 12.5px; letter-spacing: 0.4px; color: var(--ink-faint);
}

/* ---------- the held hand: five card backs fanned at the table edge ---------- */
.lp-fan {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  width: 0; height: 0;
  --lp-fw: clamp(70px, 11vw, 104px);
  pointer-events: none;
  transform: translateX(calc(var(--hx, 0) * 10px));
}
.lp-fcard {
  position: absolute; left: 0;
  bottom: calc(var(--lp-fw) * -0.62);
  width: var(--lp-fw); aspect-ratio: 5 / 7;
  transform-origin: 50% 135%;
  transform: translateX(-50%) rotate(calc(var(--i) * 9deg));
}
@media (prefers-reduced-motion: no-preference) {
  /* The signature scroll moment: --dealp (0..1, set from an IntersectionObserver)
     fans the hand open, flings each card along its own axis and fades it, so the
     hand deals itself away as the hero scrolls past. Transform and opacity only. */
  .lp-fcard {
    transform:
      translateX(-50%)
      rotate(calc(var(--i) * (9 + var(--dealp, 0) * 30) * 1deg))
      translateY(calc(var(--dealp, 0) * -34vh));
    opacity: calc(1 - var(--dealp, 0) * 1.5);
    transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.3, 1), opacity 0.45s linear;
  }
}

/* ---------- scroll cue ---------- */
.lp-cue {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.25s;
}
.lp-cue:hover { color: rgba(var(--lp-gold), 0.95); }
.lp-cue-chev { display: block; line-height: 0; }
@media (prefers-reduced-motion: no-preference) {
  .lp-cue-chev { animation: lp-bob 2.2s ease-in-out infinite; }
}

/* ---------- hero entrance (plays once per session, .lp-enter only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lp-enter .lp-hero .lp-eyebrow { animation: lp-rise 0.8s 0.05s both cubic-bezier(0.22, 0.8, 0.26, 1); }
  .lp-enter .lp-w {
    animation: lp-rise 0.7s both cubic-bezier(0.22, 0.8, 0.26, 1);
    animation-delay: calc(0.16s + var(--wi, 0) * 0.085s);
  }
  .lp-enter .lp-sub { animation: lp-rise 0.8s 0.52s both cubic-bezier(0.22, 0.8, 0.26, 1); }
  .lp-enter .lp-console { animation: lp-rise 0.85s 0.66s both cubic-bezier(0.22, 0.8, 0.26, 1); }
  .lp-enter .lp-fine { animation: lp-rise 0.8s 0.84s both cubic-bezier(0.22, 0.8, 0.26, 1); }
  .lp-enter .lp-fcard .lp-pcard {
    animation: lp-fanin 0.9s both cubic-bezier(0.22, 0.8, 0.26, 1);
    animation-delay: calc(0.8s + (var(--i, 0) + 2) * 0.07s);
  }
  .lp-enter .lp-cue { animation: lp-rise 0.9s 1.5s both ease; }
}

/* ============================================================
   MINI-NAV — arrives once the hero is behind you
   ============================================================ */
.lp-nav {
  position: fixed; z-index: 36;
  top: calc(env(safe-area-inset-top, 0px) + 66px);
  left: 50%;
  display: flex; gap: 2px; padding: 5px;
  border-radius: 999px;
  background: rgba(11, 14, 26, 0.74);
  border: 1px solid rgba(var(--lp-gold), 0.18);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lp-nav.lp-show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.lp-nav-btn {
  padding: 7px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--ink-dim); white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.lp-nav-btn:hover { color: var(--lp-ivory); background: rgba(var(--lp-gold), 0.14); }
@media (max-width: 430px) {
  .lp-nav-btn { padding: 6px 9px; font-size: 11.5px; }
}

/* ============================================================
   PLAYING CARDS — one shared visual, used by fan, vignettes, tableau
   (a faithful lp- recreation of the game's own .ct-face styles)
   ============================================================ */
.lp-pcard {
  position: absolute; inset: 0; display: block;
  border-radius: 8px; overflow: hidden;
}
.lp-pc-back {
  background:
    repeating-linear-gradient(45deg, rgba(var(--lp-gold), 0.1) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(var(--lp-gold), 0.1) 0 1px, transparent 1px 7px),
    linear-gradient(158deg, #232a52 0%, #141a3a 46%, #1c2247 100%);
  border: 1px solid rgba(var(--lp-gold), 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 18px rgba(0, 0, 0, 0.35);
}
.lp-pc-back::before {
  content: ''; position: absolute; inset: 5px; border-radius: 4px;
  border: 1px solid rgba(var(--lp-gold), 0.22);
}
.lp-pc-back::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 28%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--fa, rgba(var(--lp-gold), 0.4));
  background: rgba(var(--lp-gold), 0.07);
  opacity: 0.85;
}
.lp-pc-front {
  display: grid; place-items: center;
  background: linear-gradient(170deg, #fbf9f4 0%, #f0ece1 55%, #e4dfd2 100%);
  color: #141a33; font-size: 24px;
  border: 1px solid rgba(var(--lp-gold), 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 18px rgba(0, 0, 0, 0.35);
}
.lp-pc-front::before {
  content: ''; position: absolute; inset: 5px; border-radius: 4px;
  border: 1px solid rgba(var(--lp-gold), 0.35);
}

/* ============================================================
   THE SHELF — every registered game as a premium card
   ============================================================ */
.lp-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.lp-gslot { flex: 1 1 300px; max-width: 380px; min-width: min(100%, 270px); display: flex; }
.lp-gcard {
  position: relative; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 22px 22px; border-radius: 20px;
  text-align: left; color: var(--ink);
  background:
    linear-gradient(170deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 55%),
    rgba(15, 20, 44, 0.6);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
  transform: translate(var(--mvx, 0px), var(--mvy, 0px)) perspective(750px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.18s ease-out, border-color 0.3s, box-shadow 0.3s;
}
.lp-gcard::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent 8%, var(--a, var(--lp-gold-h)) 50%, transparent 92%);
  opacity: 0.65; pointer-events: none;
}
.lp-gcard:hover {
  border-color: color-mix(in srgb, var(--a, var(--lp-gold-h)) 55%, transparent);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 44px color-mix(in srgb, var(--a, var(--lp-gold-h)) 16%, transparent);
}
.lp-gcard-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 18%), rgba(255, 255, 255, 0.13), transparent 62%);
  opacity: 0; transition: opacity 0.25s;
}
.lp-gcard:hover .lp-gcard-glare { opacity: 1; }
.lp-gcard-pip {
  position: absolute; font-size: 13px; opacity: 0.5; pointer-events: none;
  filter: saturate(0.85);
}
.lp-gcard-pip.lp-tl { top: 10px; left: 12px; }
.lp-gcard-pip.lp-br { bottom: 10px; right: 12px; transform: rotate(180deg); }
.lp-gcard-emoji {
  font-size: 40px; line-height: 1;
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--a, var(--lp-gold-h)) 50%, transparent));
}
.lp-gcard-title {
  font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: 0.2px;
}
.lp-gcard-tagline { font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); flex: 1; }
.lp-gcard-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-chip {
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px;
  background: var(--glass); border: 1px solid var(--stroke); color: var(--ink-dim);
}
.lp-gcard-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--a, var(--lp-gold-h));
  color: color-mix(in srgb, var(--a, var(--lp-gold-h)) 80%, #ffffff);
}
.lp-gcard-arrow { display: inline-flex; line-height: 0; transition: transform 0.2s; }
.lp-gcard:hover .lp-gcard-arrow { transform: translateX(4px); }

/* ============================================================
   HOW A NIGHT WORKS — three steps, three vignettes
   ============================================================ */
.lp-steps { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) and (max-width: 899px) {
  .lp-step { display: grid; grid-template-columns: 180px 1fr; column-gap: 22px; align-items: center; }
  .lp-step .lp-vg { grid-row: 1 / 4; margin: 0; }
}
@media (min-width: 900px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-step {
  position: relative;
  padding: 24px 22px 26px; border-radius: 20px;
  background: var(--glass); border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
.lp-step-num {
  position: absolute; top: 14px; right: 16px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 14px;
  color: rgba(var(--lp-gold), 0.95);
  border: 1px solid rgba(var(--lp-gold), 0.4);
  background: rgba(var(--lp-gold), 0.08);
}
.lp-step-title { font-family: var(--display); font-size: 21px; font-weight: 800; }
.lp-step-body { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-dim); }

.lp-vg {
  position: relative; height: 132px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: radial-gradient(80% 100% at 50% 100%, rgba(var(--lp-gold), 0.07), transparent 70%);
}

/* vignette 1: the room code */
.lp-vg-code { gap: 8px; }
.lp-ctile {
  width: 36px; height: 48px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 20px;
  color: #f3e3ad;
  background: linear-gradient(165deg, #222950 0%, #131938 100%);
  border: 1px solid rgba(var(--lp-gold), 0.4);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-step .lp-ctile { opacity: 0; transform: rotateX(70deg) translateY(8px); }
  .lp-step.lp-on .lp-ctile {
    animation: lp-tile 0.55s both cubic-bezier(0.22, 0.9, 0.3, 1.2);
    animation-delay: calc(0.25s + var(--ti, 0) * 0.09s);
  }
}

/* vignette 2: phones around the table */
.lp-vg-felt {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 168px; height: 74px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #182046 0%, #101634 70%);
  border: 1px solid rgba(var(--lp-gold), 0.25);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.4);
}
.lp-vg-codechip {
  position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 3px;
  color: #f3e3ad;
  background: rgba(11, 14, 26, 0.85);
  border: 1px solid rgba(var(--lp-gold), 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.lp-phone {
  position: absolute;
  width: 26px; height: 46px; border-radius: 7px;
  background: linear-gradient(170deg, #262c55, #12162e);
  border: 1px solid var(--stroke-2);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
.lp-phone-scr {
  position: absolute; inset: 4px 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(var(--lp-gold), 0.3), rgba(var(--lp-gold), 0.06));
}
.lp-ph-a { left: 16%; bottom: 14px; transform: rotate(-14deg); }
.lp-ph-b { left: 50%; top: 6px; transform: translateX(-50%) rotate(2deg); }
.lp-ph-c { right: 16%; bottom: 14px; transform: rotate(14deg); }

/* vignette 3: the dealt card turns over */
.lp-vg-deal { perspective: 500px; }
.lp-flip {
  position: relative; display: block;
  width: 70px; height: 98px;
  transform-style: preserve-3d;
  transform: rotateY(180deg);          /* resting state: face up */
}
.lp-pc-flipback, .lp-pc-flipfront { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lp-pc-flipfront { transform: rotateY(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .lp-step .lp-flip { transform: rotateY(0deg); transition: transform 1.05s cubic-bezier(0.3, 0.7, 0.2, 1) 0.45s; }
  .lp-step.lp-on .lp-flip { transform: rotateY(180deg); }
}

/* ============================================================
   THE TABLE — a still of the card table, dealt on reveal
   ============================================================ */
.lp-stage {
  --lp-cw: clamp(46px, 9vw, 66px);
  position: relative;
  width: min(680px, 100%);
  margin: clamp(10px, 3vw, 26px) auto 0;
  aspect-ratio: 1.6 / 1;
  perspective: 900px; perspective-origin: 50% 88%;
}
.lp-felt {
  position: absolute; inset: -4% 2% 10%;
  border-radius: 50%;
  transform: rotateX(30deg); transform-origin: 50% 100%;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(var(--lp-gold), 0.08) 0%, transparent 58%),
    radial-gradient(ellipse at 50% 50%, var(--lp-felt) 0%, rgba(11, 14, 26, 0.55) 72%, transparent 100%);
  border: 1px solid rgba(var(--lp-gold), 0.16);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.6), 0 24px 60px rgba(0, 0, 0, 0.5);
}
.lp-candle {
  position: absolute; inset: -4% 2% 10%; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(46% 40% at 50% 42%, rgba(var(--lp-gold), 0.12), transparent 70%);
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-candle { animation: lp-candle 5.5s ease-in-out infinite alternate; }
}
.lp-deck {
  position: absolute; left: 50%; top: 32%;
  width: var(--lp-cw); aspect-ratio: 5 / 7;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));
  z-index: 3;
}
.lp-deckcard.lp-d1 { transform: translate(3px, 4px) rotate(2.5deg); }
.lp-deckcard.lp-d2 { transform: translate(-2px, 2px) rotate(-2deg); }
.lp-seat {
  position: absolute;
  left: calc(50% + var(--sx, 0%)); top: calc(46% + var(--sy, 0%));
  width: var(--lp-cw); aspect-ratio: 5 / 7;
  transform: translate(-50%, -50%) rotate(var(--sr, 0deg));
  z-index: 2;
}
/* The lift lives on the wrapper: the deal animation owns the card's own
   transform (fill-mode both would otherwise pin it to the keyframe's end). */
.lp-seat-front { z-index: 5; transform: translate(-50%, calc(-50% - 9%)) rotate(var(--sr, 0deg)) scale(1.16); }
.lp-seat-front .lp-pc-seat {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.5),
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(var(--lp-gold), 0.18);
}
@media (prefers-reduced-motion: no-preference) {
  /* Dealt from the deck once the section reveals: each card slides out from the
     middle of the table to its seat. --fx/--fy are set per seat in the markup. */
  .lp-stage.lp-on .lp-pc-seat {
    animation: lp-deal 0.7s both cubic-bezier(0.22, 0.9, 0.3, 1);
    animation-delay: calc(0.15s + var(--si, 0) * 0.09s);
  }
}
.lp-stage-note {
  margin-top: 16px; text-align: center;
  font-size: 12.5px; color: var(--ink-faint);
}

/* ============================================================
   THE HONEST PART — trust without invention
   ============================================================ */
.lp-trust-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.lp-trust-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--stroke);
}
.lp-tico {
  flex: none; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  color: #e8ca6d;
  background: rgba(var(--lp-gold), 0.1);
  border: 1px solid rgba(var(--lp-gold), 0.28);
}
.lp-trust-title { font-weight: 700; font-size: 15px; }
.lp-trust-body { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); }

/* ============================================================
   FOOTER — compact: brand, install, maker, legal
   ============================================================ */
.lp-footer {
  width: min(1140px, calc(100% - clamp(28px, 7vw, 88px)));
  margin: clamp(64px, 10vh, 110px) auto 0;
  padding-top: 34px;
  border-top: 1px solid var(--stroke);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
}
.lp-foot-brand { display: flex; align-items: center; gap: 12px; text-align: left; }
.lp-foot-mark { width: 40px; height: 40px; border-radius: 11px; filter: drop-shadow(0 4px 14px rgba(var(--lp-gold), 0.35)); }
.lp-foot-name {
  font-family: var(--display); font-weight: 800; font-size: 20px;
  background: linear-gradient(180deg, #fffdf6 30%, #e5cd7e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-foot-by { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1px; }
.lp-foot-tagline { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.lp-foot-install { width: min(340px, 100%); }

.lp-foot-devlinks { display: inline-flex; gap: 12px; margin-left: 4px; }
.lp-foot-link {
  color: var(--ink-dim); font-size: inherit;
  text-decoration: underline; text-decoration-color: rgba(var(--lp-gold), 0.4);
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.lp-foot-link:hover { color: #e8ca6d; }
.lp-foot-legal { font-size: 12px; color: var(--ink-faint); line-height: 2; }
.lp-foot-legal .lp-foot-link { color: var(--ink-faint); }
.lp-foot-legal .lp-foot-link:hover { color: #e8ca6d; }

/* ============================================================
   KEYFRAMES (transform / opacity / composited filter only)
   ============================================================ */
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes lp-fanin {
  from { opacity: 0; transform: translateY(48px); }
  to { opacity: 1; transform: none; }
}
@keyframes lp-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes lp-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes lp-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@keyframes lp-tile {
  from { opacity: 0; transform: rotateX(70deg) translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes lp-candle {
  from { opacity: 0.45; }
  to { opacity: 0.75; }
}
@keyframes lp-deal {
  from { opacity: 0; transform: translate(var(--fx, 0%), var(--fy, 0%)) scale(0.72); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   NAV PROGRESS, SWEEPS, CONNECTOR, FLIP-TO-42,
   WATCH-A-ROUND, FOOTER STAGGER, MICRO-INTERACTIONS
   ============================================================ */

/* ---------- mini-nav scroll-progress hairline ---------- */
.lp-nav-prog {
  position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--lp-gold), 0.9) 18%, rgba(var(--lp-gold), 0.9) 82%, transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0.85;
}

/* ---------- focus rings + press states everywhere ---------- */
.lp-root button:focus-visible,
.lp-root input:focus-visible {
  outline: 2px solid rgba(var(--lp-gold), 0.85);
  outline-offset: 2px;
}
.lp-nav-btn:active, .lp-foot-link:active, .lp-cue:active { transform: scale(0.95); }
.lp-avatar:active, .lp-avopt:active { transform: scale(0.92); }

/* A full room code lights the input up like a valid ticket. */
.lp-code.lp-full {
  border-color: rgba(var(--lp-gold), 0.8);
  color: #f3e3ad;
  box-shadow: 0 0 0 4px rgba(var(--lp-gold), 0.12), inset 0 0 18px rgba(var(--lp-gold), 0.08);
}

/* ---------- shelf: accent sweep on entry ---------- */
.lp-gcard-sweep {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  pointer-events: none; opacity: 0;
}
.lp-gcard-sweep::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  transform: translateX(-140%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--a, var(--lp-gold-h)) 22%, transparent), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-gslot.lp-on .lp-gcard-sweep { opacity: 1; animation: lp-fadeout 1.2s calc(var(--ri, 0) * 80ms + 0.9s) both; }
  .lp-gslot.lp-on .lp-gcard-sweep::before {
    animation: lp-sweep 1s calc(var(--ri, 0) * 80ms + 0.35s) both cubic-bezier(0.3, 0.6, 0.2, 1);
  }
}

/* ---------- how it works: the connector line traces between steps ---------- */
.lp-steps { position: relative; }
.lp-steps-line { display: none; }
@media (min-width: 900px) {
  .lp-steps-line {
    display: block; position: absolute; z-index: 0;
    left: 8%; right: 8%; top: 76px; height: 2px;
    border-radius: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--lp-gold), 0.55) 12%, rgba(var(--lp-gold), 0.55) 88%, transparent);
    opacity: 0.55;
  }
  .lp-step { z-index: 1; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .lp-steps-line {
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 1.4s cubic-bezier(0.3, 0.6, 0.2, 1) 0.35s;
  }
  .lp-steps:has(.lp-step.lp-on) .lp-steps-line { transform: scaleX(1); }
}

/* ---------- the table: one card turns over to reveal 42 ---------- */
.lp-fliphold { position: absolute; inset: 0; display: block; perspective: 420px; }
.lp-tflip {
  position: absolute; inset: 0; display: block;
  transform-style: preserve-3d;
  transform: rotateY(180deg);          /* resting state: 42 face up */
}
.lp-pc-tback, .lp-pc-tfront { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lp-pc-tfront { transform: rotateY(180deg); }
.lp-42 { font-family: var(--display); font-weight: 800; font-size: clamp(15px, 2.6vw, 22px); color: #7c611c; }
@media (prefers-reduced-motion: no-preference) {
  .lp-stage .lp-tflip { transform: rotateY(0deg); transition: transform 0.95s cubic-bezier(0.3, 0.7, 0.2, 1) 1.15s; }
  .lp-stage.lp-on .lp-tflip { transform: rotateY(180deg); }
}

/* ============================================================
   WATCH A ROUND — the live preview theatre
   ============================================================ */
.lp-watch-frame {
  position: relative;
  width: min(720px, 100%);
  margin: 0 auto;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(22, 27, 56, 0.72), rgba(11, 15, 32, 0.88));
  border: 1px solid rgba(var(--lp-gold), 0.22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.lp-watch-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--lp-gold), 0.14);
  background: rgba(0, 0, 0, 0.22);
}
.lp-watch-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: #f3e3ad;
  background: rgba(var(--lp-gold), 0.1);
  border: 1px solid rgba(var(--lp-gold), 0.35);
}
.lp-watch-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e8ca6d; box-shadow: 0 0 8px rgba(var(--lp-gold), 0.8);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-run .lp-watch-pulse { animation: lp-pulse 1.6s ease-in-out infinite; }
}
.lp-watch-title { flex: 1; font-weight: 700; font-size: 14.5px; letter-spacing: 0.2px; }
.lp-watch-dots { display: inline-flex; gap: 6px; }
.lp-watch-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.3s, transform 0.3s;
}
.lp-watch-dot.lp-on { background: rgba(var(--lp-gold), 0.95); transform: scale(1.25); }

.lp-watch-stage {
  min-height: 380px;
  padding: 18px clamp(14px, 3vw, 24px) 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.lp-watch-cap {
  padding: 0 18px 16px; text-align: center;
  font-size: 12.5px; color: var(--ink-faint);
}

/* scene items: base state is the finished scene (reduced-motion friendly) */
.lp-ws { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .lp-anim .lp-ws { opacity: 0; }
  .lp-anim.lp-run .lp-ws {
    animation: lp-wsin 0.55s both cubic-bezier(0.22, 0.8, 0.26, 1);
    animation-delay: calc(0.4s + var(--di, 0) * 0.64s);
  }
  .lp-anim.lp-run .lp-ws-chip {
    opacity: 0;
    animation: lp-chippop 0.4s both cubic-bezier(0.2, 1.2, 0.3, 1);
    animation-delay: calc(0.75s + var(--di, 0) * 0.64s + var(--rxi, 0) * 0.14s);
  }
  .lp-anim.lp-run .lp-ws-verdict {
    animation-name: lp-verdict; animation-duration: 0.6s;
  }
}

.lp-ws-round {
  align-self: center;
  padding: 4px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: rgba(var(--lp-gold), 0.9);
  border: 1px solid rgba(var(--lp-gold), 0.3);
  background: rgba(var(--lp-gold), 0.07);
}

/* clue rows (Blend In) */
.lp-ws-clue { display: flex; gap: 10px; align-items: flex-start; }
.lp-ws-av {
  flex: none; width: 36px; height: 36px; border-radius: 12px; font-size: 19px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--stroke);
}
.lp-ws-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-ws-name { font-size: 12px; font-weight: 700; color: var(--ink-dim); }
.lp-ws-you { font-style: normal; color: rgba(var(--lp-gold), 0.95); }
.lp-ws-bubble {
  align-self: flex-start;
  padding: 8px 13px; border-radius: 4px 14px 14px 14px;
  font-size: 14.5px; line-height: 1.4;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--stroke);
}
.lp-sus .lp-ws-bubble { border-color: rgba(244, 114, 182, 0.5); background: rgba(244, 114, 182, 0.08); }
.lp-ws-rx { display: inline-flex; gap: 5px; }
.lp-ws-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--stroke);
}
.lp-ws-chip b { font-size: 10.5px; font-weight: 700; color: var(--ink-dim); }

.lp-ws-verdict {
  align-self: center; margin-top: 4px;
  padding: 9px 16px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; text-align: center;
  color: #f3e3ad;
  background: rgba(var(--lp-gold), 0.09);
  border: 1px solid rgba(var(--lp-gold), 0.35);
  box-shadow: 0 6px 24px rgba(var(--lp-gold), 0.1);
}

/* island scene */
.lp-ws-banner {
  padding: 12px 16px; border-radius: 14px;
  font-size: 14px; line-height: 1.5; text-align: center;
  background: rgba(52, 211, 153, 0.07);
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.lp-ws-banner b { color: #7ee2b8; }
.lp-ws-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lp-ws-tiles4 { grid-template-columns: repeat(4, 1fr); }
.lp-ws-tiles4 .lp-ws-tsub b { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) { .lp-ws-tiles4 { grid-template-columns: repeat(2, 1fr); } }
.lp-ws-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke);
  text-align: center;
}
.lp-ws-tile.lp-turn { border-color: rgba(var(--lp-gold), 0.55); box-shadow: 0 0 18px rgba(var(--lp-gold), 0.12); }
.lp-ws-tile.lp-out { opacity: 0.65; filter: saturate(0.5); }
.lp-ws-mark { position: absolute; top: 6px; right: 8px; font-size: 13px; }
.lp-ws-tav { font-size: 22px; }
.lp-ws-tname { font-size: 12.5px; font-weight: 700; }
.lp-ws-tsub { font-size: 10.5px; color: var(--ink-faint); }
.lp-ws-packs { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; }
.lp-ws-pcol {
  padding: 10px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--stroke);
  display: flex; flex-direction: column; gap: 6px;
}
.lp-ws-phead { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--ink-dim); }
.lp-ws-pack {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 9px; border-radius: 9px;
  font-size: 12.5px;
  background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.25);
}
.lp-ws-pack.lp-no { background: rgba(244, 114, 182, 0.07); border-color: rgba(244, 114, 182, 0.25); }
.lp-ws-pword { font-weight: 700; }
.lp-ws-pby { color: var(--ink-faint); font-size: 11.5px; }
.lp-ws-attempt {
  display: flex; gap: 10px; align-items: center;
  padding: 9px 13px; border-radius: 12px;
  background: rgba(244, 114, 182, 0.06); border: 1px solid rgba(244, 114, 182, 0.28);
}
.lp-ws-atv { font-size: 17px; }
.lp-ws-att { display: block; font-size: 13.5px; font-weight: 600; }
.lp-ws-atr { display: block; font-size: 12px; color: var(--ink-dim); font-style: italic; }

/* silent-order scene: a tiny deal to named seats */
.lp-ws-deal {
  display: flex; justify-content: center; gap: clamp(10px, 4vw, 26px);
  padding: 26px 0 10px;
}
.lp-ws-seat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-ws-card { position: relative; width: clamp(44px, 9vw, 58px); aspect-ratio: 5 / 7; }
.lp-ws-face { font-family: var(--display); font-weight: 800; font-size: 20px; color: #7c611c; }
.lp-ws-sname { font-size: 12px; font-weight: 700; color: var(--ink-dim); }
@media (prefers-reduced-motion: no-preference) {
  .lp-anim.lp-run .lp-ws-seat .lp-ws-card {
    animation: lp-wsdeal 0.6s both cubic-bezier(0.22, 0.9, 0.3, 1);
    animation-delay: calc(0.4s + var(--di, 0) * 0.64s);
  }
}

/* ---------- trust + footer rhythm ---------- */
.lp-trust-grid { gap: 12px; }
.lp-trust-item { padding: 16px 18px; }
.lp-footer { gap: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .lp-footer > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.65s cubic-bezier(0.22, 0.8, 0.26, 1); }
  .lp-footer > *:nth-child(2) { transition-delay: 0.1s; }
  .lp-footer > *:nth-child(3) { transition-delay: 0.2s; }
  .lp-footer > *:nth-child(4) { transition-delay: 0.3s; }
  .lp-footer.lp-on > * { opacity: 1; transform: none; }
}

/* ---------- keyframes (transform / opacity only) ---------- */
@keyframes lp-sweep {
  from { transform: translateX(-140%) skewX(-18deg); }
  to { transform: translateX(420%) skewX(-18deg); }
}
@keyframes lp-fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes lp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
@keyframes lp-wsin {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes lp-chippop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}
@keyframes lp-verdict {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  60% { transform: translateY(-2px) scale(1.02); }
  to { opacity: 1; transform: none; }
}
@keyframes lp-wsdeal {
  from { opacity: 0; transform: translateY(-34px) rotate(-8deg); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   Small-screen trims
   ============================================================ */
@media (max-width: 560px) {
  .lp-hero { padding-bottom: 130px; }
  .lp-fan { --lp-fw: 62px; }
  .lp-gslot { max-width: none; }
  .lp-stage { --lp-cw: 44px; }
  .lp-watch-stage { min-height: 430px; }
  .lp-ws-packs { grid-template-columns: 1fr; }
  .lp-watch-title { font-size: 13px; }
}

/* We-are-N: the shelf answers who can play tonight. */
.lp-hc { display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap;
  margin:6px auto 26px; font-size:17px; color:var(--lp-dim, #a7abce); }
.lp-hc-label { font-weight:600; }
.lp-hc-n { min-width:64px; text-align:center; font-family:'Baloo 2',ui-rounded,sans-serif;
  font-weight:800; font-size:22px; color:#f3e3b4; }
.lp-hc-btn { width:36px; height:36px; border-radius:10px; border:1.5px solid rgba(212,175,55,0.45);
  background:rgba(212,175,55,0.08); color:#f3e3b4; font-size:20px; font-weight:800; cursor:pointer; }
.lp-hc-btn:hover { background:rgba(212,175,55,0.16); }
.lp-hc-btn:focus-visible { outline:2px solid #d4af37; outline-offset:2px; }
.lp-hc-note { flex-basis:100%; text-align:center; font-size:14px; color:#8b8fb5; min-height:1.2em; }
.lp-gcard.lp-gc-dim { opacity:0.32; filter:saturate(0.4); transition:opacity 0.3s ease, filter 0.3s ease; }

/* ============================================================
   DEALT TITLES, SHELF/TRUST DEALS, CTA ORBIT, WATCH TABS,
   FOOTER MOTES.
   Motion policy unchanged: base state = finished state; movement
   only inside prefers-reduced-motion: no-preference.
   ============================================================ */

/* ---------- section titles: words as dealt letter-tiles ---------- */
.lp-h2w {
  display: inline-block;
  background: linear-gradient(180deg, #fffdf6 30%, #efe2b0 72%, #d9bc63 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  /* Section heads rise as one settled line — no blur (gradient-clipped text
     glitches inside a filtered ancestor) and no per-word tumble (it reads as
     scrambled words for a beat). The whole heading arrives already legible. */
  .lp-shead.lp-reveal {
    transform: translateY(14px); filter: none;
    transition: opacity 0.6s ease, transform 0.65s cubic-bezier(0.22, 0.8, 0.26, 1);
  }
  .lp-shead.lp-reveal.lp-on { transform: none; }
  .lp-shead .lp-h2w { opacity: 1; transform: none; }
}

/* ---------- the shelf deals itself in, like the hero's hand ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lp-gslot.lp-reveal {
    transform: translateY(46px) rotate(calc((var(--ri, 0) - 1) * -3deg)) scale(0.95);
    transform-origin: 50% 130%;
    transition:
      opacity 0.65s ease,
      transform 0.85s cubic-bezier(0.34, 1.3, 0.45, 1),
      filter 0.65s ease;
    transition-delay: calc(var(--ri, 0) * 110ms);
  }
  .lp-gslot.lp-reveal.lp-on { transform: none; }
}

/* ---------- trust strip: six cards dealt from the middle ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lp-trust-item.lp-reveal {
    transform: translateY(30px) rotate(calc((var(--ri, 0) - 2.5) * 1.8deg));
    transform-origin: 50% 140%;
    transition:
      opacity 0.6s ease,
      transform 0.75s cubic-bezier(0.34, 1.35, 0.5, 1),
      filter 0.6s ease;
    transition-delay: calc(var(--ri, 0) * 90ms);
  }
  .lp-trust-item.lp-reveal.lp-on { transform: none; }
}

/* ---------- primary CTA: slow orbiting gradient border + coin flip ---------- */
/* The shimmer is an oversized conic layer rotated by transform (composited),
   clipped by the button; ::after repaints the gold face so only a ~2px ring
   of the orbit shows. Everything stays transform/opacity. */
.lp-act-create { position: relative; overflow: hidden; isolation: isolate; }
.lp-act-create::before {
  content: ''; position: absolute; z-index: -2; left: 50%; top: 50%;
  width: 240%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    transparent 0 38%, rgba(255, 249, 224, 0.95) 50%, transparent 62% 100%);
  pointer-events: none;
}
.lp-act-create::after {
  content: ''; position: absolute; z-index: -1; inset: 2px;
  border-radius: 14px;
  background: linear-gradient(160deg, #f2dc94 0%, #d4af37 48%, #a87f1f 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-act-create::before { animation: lp-orbit 5.5s linear infinite; }
}
/* Invited flips emphasis to Join: the create button goes quiet, ring and all,
   and the join button inherits the orbit instead. */
.lp-invited .lp-act-create::before, .lp-invited .lp-act-create::after { display: none; }
.lp-invited .lp-act-join { position: relative; overflow: hidden; isolation: isolate; }
.lp-invited .lp-act-join::before {
  content: ''; position: absolute; z-index: -2; left: 50%; top: 50%;
  width: 240%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    transparent 0 38%, rgba(255, 249, 224, 0.95) 50%, transparent 62% 100%);
  pointer-events: none;
}
.lp-invited .lp-act-join::after {
  content: ''; position: absolute; z-index: -1; inset: 2px;
  border-radius: 14px;
  background: linear-gradient(160deg, #f2dc94 0%, #d4af37 48%, #a87f1f 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-invited .lp-act-join::before { animation: lp-orbit 5.5s linear infinite; }
}
/* The spark coin-flips when you hover the deal. */
.lp-act-emoji { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .lp-act-create:hover .lp-act-emoji,
  .lp-invited .lp-act-join:hover .lp-act-emoji {
    animation: lp-coin 0.65s cubic-bezier(0.3, 1.2, 0.4, 1);
  }
}

/* ---------- watch picker: emoji tabs, keyboardable ---------- */
.lp-watch-dots { display: inline-flex; gap: 4px; }
.lp-watch-tab {
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
  border: 1px solid transparent;
  opacity: 0.5; filter: saturate(0.6);
  transition: opacity 0.25s, filter 0.25s, transform 0.2s, border-color 0.25s, background 0.25s;
}
.lp-watch-tab:hover { opacity: 0.9; filter: none; transform: translateY(-1px); }
.lp-watch-tab:active { transform: scale(0.9); }
.lp-watch-tab.lp-on {
  opacity: 1; filter: none;
  background: rgba(var(--lp-gold), 0.12);
  border-color: rgba(var(--lp-gold), 0.45);
}

/* ---------- footer bookend: candlelight motes, CSS edition ---------- */
.lp-footer { position: relative; overflow: hidden; }
.lp-foot-motes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lp-footer > :not(.lp-foot-motes) { position: relative; z-index: 1; }
.lp-fmote {
  position: absolute; bottom: 6%;
  left: calc(4% + var(--mi, 0) * 11%);
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(var(--lp-gold), 0.55);
  opacity: 0;
}
.lp-fmote:nth-child(even) { width: 2px; height: 2px; background: rgba(239, 233, 214, 0.5); }
@media (prefers-reduced-motion: no-preference) {
  .lp-footer.lp-on .lp-fmote {
    animation: lp-fmote 7s linear infinite;
    animation-delay: calc(var(--mi, 0) * -0.9s);
  }
  .lp-footer.lp-on .lp-fmote:nth-child(3n) { animation-duration: 9s; }
  /* The motes layer joined the footer as its first child, so the stagger
     indexes shift by one; restate them and skip the motes themselves. */
  .lp-footer > .lp-foot-motes { opacity: 1; transform: none; transition: none; }
  .lp-footer > *:nth-child(2) { transition-delay: 0s; }
  .lp-footer > *:nth-child(3) { transition-delay: 0.1s; }
  .lp-footer > *:nth-child(4) { transition-delay: 0.2s; }
  .lp-footer > *:nth-child(5) { transition-delay: 0.3s; }
}

/* ---------- felt vignette: a quiet pool of candlelight between sections ---------- */
.lp-watch, .lp-table {
  background: radial-gradient(60% 46% at 50% 58%, rgba(var(--lp-gold), 0.045), transparent 72%);
}

/* ---------- more keyframes (transform / opacity only) ---------- */
@keyframes lp-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes lp-coin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@keyframes lp-fmote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.75; }
  80% { opacity: 0.25; }
  100% { transform: translate3d(10px, -130px, 0); opacity: 0; }
}

/* ---------- mobile gets the calmer variants ---------- */
@media (max-width: 560px) {
  .lp-gslot.lp-reveal { transform: translateY(30px); }
  .lp-trust-item.lp-reveal { transform: translateY(22px); }
  .lp-watch-tab { width: 27px; height: 27px; font-size: 13.5px; }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .lp-gslot.lp-reveal { transform: translateY(30px); }
  .lp-gslot.lp-reveal.lp-on, .lp-trust-item.lp-reveal.lp-on { transform: none; }
  .lp-trust-item.lp-reveal { transform: translateY(22px); }
  .lp-act-create::before, .lp-invited .lp-act-join::before { animation-duration: 8s; }
}

/* ============================================================
   SCROLLSPY NAV, VERDICT SHEEN, PILE CLIMB, SECRET-WORD CHIP,
   FOOTER CARD BLOOM.
   Motion policy unchanged: base state = finished state; movement
   only inside prefers-reduced-motion: no-preference.
   ============================================================ */

/* ---------- scrollspy: the mini-nav underlines where you are ---------- */
.lp-nav-btn { position: relative; }
.lp-nav-btn::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--lp-gold), 0.95), transparent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  pointer-events: none;
}
.lp-nav-btn.lp-cur { color: var(--lp-ivory); }
.lp-nav-btn.lp-cur::after { transform: translateX(-50%) scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .lp-nav-btn::after { transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1); }
}

/* ---------- watch: verdict lands with a gold sheen sweep ---------- */
.lp-ws-verdict { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lp-anim.lp-run .lp-ws-verdict::after {
    content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 30%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 249, 224, 0.22), transparent);
    transform: translateX(-160%) skewX(-16deg);
    animation: lp-vsheen 0.9s both cubic-bezier(0.3, 0.6, 0.2, 1);
    animation-delay: calc(0.75s + var(--di, 0) * 0.64s);
  }
}

/* ---------- watch: the Silent Order pile climbs, number by number ---------- */
.lp-ws-pilerow {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(8px, 2.6vw, 16px);
  padding: 2px 0 4px;
}
.lp-ws-pile {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.lp-ws-pilen {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 19px;
  color: #f3e3ad;
  background: rgba(var(--lp-gold), 0.09);
  border: 1px solid rgba(var(--lp-gold), 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lp-ws-pile:last-child .lp-ws-pilen {
  background: rgba(var(--lp-gold), 0.16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 18px rgba(var(--lp-gold), 0.18);
}
.lp-ws-pileby { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); }
@media (prefers-reduced-motion: no-preference) {
  .lp-anim.lp-run .lp-ws-pile { animation-name: lp-pilepop; animation-duration: 0.5s; }
}

/* ---------- watch: an accepted ask reads green, a rejected one pink ---------- */
.lp-ws-attempt.lp-ws-ok {
  background: rgba(52, 211, 153, 0.06);
  border-color: rgba(52, 211, 153, 0.3);
}

/* ---------- watch: the secret-word chip on your own clue row ---------- */
.lp-ws-word {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: rgba(var(--lp-gold), 0.9);
  border: 1px dashed rgba(var(--lp-gold), 0.5);
  background: rgba(var(--lp-gold), 0.06);
  vertical-align: 1px;
}
.lp-ws-word b { font-size: 10.5px; color: #f3e3ad; letter-spacing: 0.6px; }
@media (prefers-reduced-motion: no-preference) {
  .lp-anim.lp-run .lp-ws-word {
    opacity: 0;
    animation: lp-chippop 0.45s both cubic-bezier(0.2, 1.2, 0.3, 1);
    animation-delay: calc(0.65s + var(--di, 0) * 0.64s);
  }
}

/* ---------- footer: the brand mark blooms a tiny hand of cards ---------- */
.lp-foot-markwrap {
  position: relative;
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
}
.lp-foot-markwrap .lp-foot-mark { position: relative; z-index: 1; }
.lp-fbloom { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lp-fbcard {
  position: absolute; left: 50%; top: 0;
  width: 15px; aspect-ratio: 5 / 7; border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(var(--lp-gold), 0.12) 0 1px, transparent 1px 5px),
    linear-gradient(158deg, #232a52 0%, #141a3a 60%);
  border: 1px solid rgba(var(--lp-gold), 0.42);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 165%;
  transform: translateX(-50%) rotate(calc(var(--bi, 0) * 17deg));
}
@media (prefers-reduced-motion: no-preference) {
  .lp-footer .lp-fbcard {
    opacity: 0;
    transform: translateX(-50%) rotate(0deg) translateY(6px);
    transition:
      opacity 0.5s ease,
      transform 0.8s cubic-bezier(0.34, 1.4, 0.5, 1);
    transition-delay: calc(0.55s + (var(--bi, 0) + 1) * 0.09s);
  }
  .lp-footer.lp-on .lp-fbcard {
    opacity: 1;
    transform: translateX(-50%) rotate(calc(var(--bi, 0) * 17deg));
  }
}

/* ---------- new keyframes (transform / opacity only) ---------- */
@keyframes lp-vsheen {
  from { transform: translateX(-160%) skewX(-16deg); }
  to { transform: translateX(460%) skewX(-16deg); }
}
@keyframes lp-pilepop {
  from { opacity: 0; transform: translateY(10px) scale(0.55); }
  62% { transform: translateY(-2px) scale(1.06); }
  to { opacity: 1; transform: none; }
}

/* ---------- calm mobile variants ---------- */
@media (max-width: 560px) {
  .lp-ws-pilen { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
  .lp-ws-word { margin-left: 6px; }
}

/* ============================================================
   V5 — SHELF HOVER BLOOM, CURSOR CANDLELIGHT, FINALE REPRISE.
   Motion policy unchanged: base state = finished state; movement
   only inside prefers-reduced-motion: no-preference (hover-only
   decoration additionally gated behind hover-capable pointers).
   ============================================================ */

/* ---------- shelf: a mini fan blooms behind the emoji on hover ---------- */
.lp-gbloom {
  position: absolute; top: 22px; left: 24px;
  width: 40px; height: 40px;
  pointer-events: none; z-index: 0;
}
.lp-gcard-emoji { position: relative; z-index: 1; }
.lp-gbcard {
  position: absolute; left: 50%; top: 0;
  width: 14px; aspect-ratio: 5 / 7; border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(var(--lp-gold), 0.12) 0 1px, transparent 1px 5px),
    linear-gradient(158deg, #232a52 0%, #141a3a 60%);
  border: 1px solid color-mix(in srgb, var(--a, var(--lp-gold-h)) 60%, transparent);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 0 10px color-mix(in srgb, var(--a, var(--lp-gold-h)) 22%, transparent);
  transform-origin: 50% 165%;
  transform: translateX(-50%) rotate(0deg) translateY(4px);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lp-gbcard {
    transition:
      transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1),
      opacity 0.3s ease;
    transition-delay: calc((var(--gi, 0) + 1) * 45ms);
  }
  .lp-gcard:hover .lp-gbcard,
  .lp-gcard:focus-visible .lp-gbcard {
    opacity: 1;
    transform: translateX(-50%) rotate(calc(var(--gi, 0) * 24deg)) translateY(-7px);
  }
}

/* ---------- cursor candlelight: a soft pool of gold trails the pointer ---------- */
/* Element exists only on fine-pointer, motion-tolerant devices (JS gate). */
.lp-glow {
  position: fixed; left: 0; top: 0; z-index: 2;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(var(--lp-gold), 0.075) 0%,
    rgba(var(--lp-gold), 0.03) 38%,
    transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.22s ease-out;
}
.lp-glow.lp-glow-on { opacity: 1; }

/* ---------- finale: the opening deal, reprised at full weight ---------- */
.lp-cta-inner {
  position: relative; text-align: center;
  padding: clamp(56px, 9vw, 96px) 20px clamp(30px, 5vw, 54px);
}
.lp-cta-inner > :not(.lp-xfan) { position: relative; z-index: 1; }
.lp-xfan {
  position: absolute; left: 50%; top: 0;
  width: 0; height: 0;
  --lp-xw: clamp(54px, 8vw, 84px);
  pointer-events: none; z-index: 0;
}
.lp-xfcard {
  position: absolute; left: 0; top: 0;
  width: var(--lp-xw); aspect-ratio: 5 / 7;
  transform-origin: 50% 155%;
  transform: translateX(-50%) rotate(calc(var(--i, 0) * 15deg));
  opacity: 0.5;
}
.lp-cta-h {
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(42px, 8vw, 88px);
  font-weight: 800; line-height: 1.0; letter-spacing: 0.2px;
  background: linear-gradient(180deg, #fffdf6 26%, #efe2b0 68%, #d9bc63 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
  filter: drop-shadow(0 8px 34px rgba(var(--lp-gold), 0.14));
}
.lp-cta-sub {
  margin: 16px auto 30px; max-width: 440px;
  font-size: clamp(15px, 1.9vw, 17.5px); line-height: 1.6; color: var(--ink-dim);
  text-wrap: pretty;
}
.lp-cta-btn {
  display: inline-flex; margin: 0 auto;
  padding: 17px 32px; border-radius: 18px;
  font-size: 16.5px;
}
.lp-cta-btn::after { border-radius: 16px; }
@media (prefers-reduced-motion: no-preference) {
  /* The fan folds shut whenever the finale is off screen and blooms open
     each time it arrives (lp-bloom is toggled by its own observer), so the
     moment replays on every visit instead of firing once mid-scroll. */
  .lp-cta-inner .lp-xfcard {
    opacity: 0;
    transform: translateX(-50%) rotate(0deg) translateY(16px);
    transition:
      transform 0.9s cubic-bezier(0.34, 1.35, 0.5, 1),
      opacity 0.5s ease;
    transition-delay: calc(0.25s + (var(--i, 0) + 2) * 85ms);
  }
  .lp-cta-inner.lp-bloom .lp-xfcard {
    opacity: 0.5;
    transform: translateX(-50%) rotate(calc(var(--i, 0) * 15deg));
  }
}

/* ---------- calm mobile variants ---------- */
@media (max-width: 560px) {
  .lp-xfan { --lp-xw: 48px; }
  .lp-xfcard { transform: translateX(-50%) rotate(calc(var(--i, 0) * 12deg)); opacity: 0.4; }
  .lp-cta-inner { padding-top: 48px; }
}
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .lp-cta-inner.lp-bloom .lp-xfcard {
    opacity: 0.4;
    transform: translateX(-50%) rotate(calc(var(--i, 0) * 12deg));
  }
}

/* Pinned-preview note: appears when a reader holds one scene via the tabs. */
.lp-watch-pin { display: block; text-align: center; font-size: 12px; letter-spacing: 0.04em; color: rgba(240, 226, 198, 0.55); min-height: 16px; margin-top: 6px; }

/* Reaction rows between Swap or Stay beats: emoji chips popping on their own line. */
.lp-ws-rxline { padding-left: 46px; margin-top: -4px; }

/* ---------- Swap or Stay: the swap choreography ----------
   Six seats plus the deck, a face-down card each. Real swaps: Ankit's card (value
   chip riding on it) trades with Saaru's, travels to Ranjani, lunges at Mrunali and
   is bounced by the Sentinel; then Trupti tosses her card back and draws blind from
   the deck. Keyframed on lp-run so it replays. --ssp is the seat pitch. */
.lp-ssrow {
  position: relative;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  padding-top: 30px;
  container-type: inline-size;
  --ssp: calc((100cqw + 6px) / 7);
}
.lp-ssseat { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; position: relative; }
.lp-ssb {
  position: relative;
  width: clamp(28px, 4.6vw, 42px); aspect-ratio: 5 / 7; border-radius: 7px;
  background: linear-gradient(160deg, #232c55, #151b38);
  border: 1.5px solid rgba(var(--lp-gold), 0.45);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.lp-ssv {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #fffdf6, #efe2b0);
  color: #6b5416; font-weight: 800; font-size: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.lp-ssm-a { z-index: 3; }
.lp-ssm-t { z-index: 2; }
.lp-ssdeckseat .lp-ssdeckbase { box-shadow: 2px 2px 0 rgba(var(--lp-gold), 0.25), 0 3px 10px rgba(0, 0, 0, 0.4); }
.lp-ssdc { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin: 0; opacity: 0; z-index: 2; }
.lp-ssdeckseat { justify-content: flex-start; }
.lp-ssshield {
  position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%) scale(0.4);
  font-size: 22px; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-anim.lp-run .lp-ssm-a { animation: lp-ssm-a 8s both cubic-bezier(0.45, 0, 0.25, 1) 1.6s; }
  .lp-anim.lp-run .lp-ssm-b { animation: lp-ssm-b 8s both cubic-bezier(0.45, 0, 0.25, 1) 1.6s; }
  .lp-anim.lp-run .lp-ssm-c { animation: lp-ssm-c 8s both cubic-bezier(0.45, 0, 0.25, 1) 1.6s; }
  .lp-anim.lp-run .lp-ssm-t { animation: lp-ssm-t 8s both cubic-bezier(0.45, 0, 0.25, 1) 1.6s; }
  .lp-anim.lp-run .lp-ssdc { animation: lp-ssm-dc 8s both cubic-bezier(0.45, 0, 0.25, 1) 1.6s; }
  .lp-anim.lp-run .lp-ssshield { animation: lp-ss-shield 0.9s both cubic-bezier(0.2, 1.4, 0.3, 1) 6.2s; }
}
/* Seat 1's low card: → seat 2, → seat 3, lunge at the Sentinel, bounced back. */
@keyframes lp-ssm-a {
  0%, 6%    { transform: translate(0, 0); }
  12%       { transform: translate(calc(var(--ssp) / 2), -18px); }
  16%, 30%  { transform: translate(var(--ssp), 0); }
  35%       { transform: translate(calc(var(--ssp) * 1.5), -18px); }
  40%, 52%  { transform: translate(calc(var(--ssp) * 2), 0); }
  57%       { transform: translate(calc(var(--ssp) * 2.55), -8px); }
  63%, 100% { transform: translate(calc(var(--ssp) * 2), 0); }
}
/* Seat 2's card comes back to seat 1 in the first swap. */
@keyframes lp-ssm-b {
  0%, 6%    { transform: translate(0, 0); }
  12%       { transform: translate(calc(var(--ssp) / -2), 14px); }
  16%, 100% { transform: translate(calc(var(--ssp) * -1), 0); }
}
/* Seat 3's card comes back to seat 2 in the second swap. */
@keyframes lp-ssm-c {
  0%, 30%   { transform: translate(0, 0); }
  35%       { transform: translate(calc(var(--ssp) / -2), 14px); }
  40%, 100% { transform: translate(calc(var(--ssp) * -1), 0); }
}
/* The last seat's card flies back to the deck… */
@keyframes lp-ssm-t {
  0%, 70%   { transform: translate(0, 0); opacity: 1; }
  76%       { transform: translate(calc(var(--ssp) / 2), -16px); opacity: 1; }
  82%, 100% { transform: translate(var(--ssp), 0); opacity: 0; }
}
/* …and a blind draw flies from the deck into that seat. */
@keyframes lp-ssm-dc {
  0%, 82%   { transform: translate(-50%, 0); opacity: 0; }
  84%       { transform: translate(-50%, 0); opacity: 1; }
  90%       { transform: translate(calc(-50% - var(--ssp) / 2), -16px); opacity: 1; }
  96%, 100% { transform: translate(calc(-50% - var(--ssp)), 0); opacity: 1; }
}
@keyframes lp-ss-shield {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.4); }
  40%  { opacity: 1; transform: translateX(-50%) scale(1.25); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
.lp-ws-deal6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 560px) { .lp-ws-deal6 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- footer developer card ----------
   The About modal's card, rebuilt in the landing's gold-on-midnight palette: photo
   beside the words on desktop, stacked and centred on a phone. */
.lp-devcard {
  width: min(680px, 100%); margin: 4px auto 0;
  padding: 22px clamp(18px, 3vw, 28px);
  border-radius: 20px;
  border: 1px solid rgba(var(--lp-gold), 0.22);
  background: linear-gradient(180deg, rgba(28, 34, 62, 0.5), rgba(15, 19, 38, 0.5));
  text-align: left;
}
.lp-foot-devhead {
  margin: 0 0 16px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.lp-devcard-body { display: flex; align-items: flex-start; gap: clamp(16px, 3vw, 24px); }
.lp-devcard .dev-photo {
  flex: none; width: 92px; height: 92px; border-radius: 50%;
  border: 2px solid rgba(var(--lp-gold), 0.55);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
.lp-devcard-text { min-width: 0; }
.lp-devcard-name { margin: 0; font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--ink); }
.lp-devcard-role { margin: 2px 0 12px; font-size: 13px; color: rgba(var(--lp-gold), 0.85); }
.lp-foot-quote {
  margin: 0 0 16px;
  font-style: italic; font-size: 13.5px; line-height: 1.7; color: var(--ink-dim);
  border-left: 2px solid rgba(var(--lp-gold), 0.4); padding-left: 14px;
  text-wrap: pretty;
}
.lp-foot-devlinks { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-devlink {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 11px;
  border: 1px solid rgba(var(--lp-gold), 0.28);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-dim); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.lp-devlink .dev-ico { display: inline-flex; flex: none; }
.lp-devlink .dev-ico svg { width: 15px; height: 15px; display: block; }
.lp-devlink:hover, .lp-devlink:focus-visible {
  border-color: rgba(var(--lp-gold), 0.6); color: var(--ink);
  background: rgba(var(--lp-gold), 0.08);
}
@media (max-width: 560px) {
  .lp-devcard { text-align: center; }
  .lp-devcard-body { flex-direction: column; align-items: center; gap: 14px; }
  .lp-foot-quote { border-left: 0; border-top: 2px solid rgba(var(--lp-gold), 0.4); padding: 12px 0 0; text-align: left; }
  .lp-foot-devlinks { justify-content: center; }
}

/* A quiet credit under the hero console — present, not shouting. */
.lp-devcue {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px auto 0; padding: 6px 12px 6px 6px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-faint); font-family: inherit; font-size: 12.5px; letter-spacing: 0.01em;
  cursor: pointer; opacity: 0.72;
  transition: opacity 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.lp-devcue .dev-photo { width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(var(--lp-gold), 0.45); }
.lp-devcue:hover, .lp-devcue:focus-visible {
  opacity: 1; color: var(--ink-dim); background: rgba(255, 255, 255, 0.04);
}
.lp-devcard { scroll-margin-top: 90px; }

/* ---------- game key art ----------
   Shot on pure black, so a screen blend does the cutout for free: black contributes
   nothing and the rim-lit figures keep their soft edges. Anchored right, because the
   art leaves its left side empty for exactly this text. */
.lp-gcard-art {
  position: absolute; inset: 0;
  display: block; overflow: hidden; border-radius: inherit;
  pointer-events: none; z-index: 0;
}
.lp-gcard-art img {
  position: absolute; right: -6%; bottom: 0;
  width: 86%; height: 100%;
  object-fit: cover; object-position: right center;
  mix-blend-mode: screen;
  opacity: 0.9;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 0.8, 0.26, 1);
}
.lp-gcard:hover .lp-gcard-art img,
.lp-gcard:focus-visible .lp-gcard-art img { opacity: 1; transform: scale(1.04); }
/* The copy needs its own ground: a gradient from the card colour on the left into
   nothing on the right, so the words never sit on a face. */
.lp-gcard-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(94deg, #0b0e1a 0%, #0b0e1a 42%, rgba(11, 14, 26, 0.86) 58%, rgba(11, 14, 26, 0.3) 82%, transparent 100%),
    linear-gradient(0deg, rgba(11, 14, 26, 0.75) 0%, transparent 42%);
}
.lp-gcard > :not(.lp-gcard-art) { position: relative; z-index: 1; }
.lp-gc-dim .lp-gcard-art img { opacity: 0.28; }
@media (prefers-reduced-motion: reduce) {
  .lp-gcard:hover .lp-gcard-art img { transform: none; }
}