/* =====================================================================
   landing.css — the Gameroom marketing landing page.
   Layers on top of gameroom.css (which owns the dark palette tokens:
   --bg, --panel, --panel-2, --ink, --muted, --line, --accent, --accent-2,
   --gold, --radius, --shadow). This file owns the marketing chrome only:
   the hero motif, the game-demo grid, the lightbox, and all the motion.

   Motion is "living and breathing" — entrance reveals on scroll, hover
   lifts/glows on cards and buttons, an animated tic-tac-toe board that
   fills itself, floating sign chips. EVERY animated rule is suppressed
   under prefers-reduced-motion: reduce (single block at the bottom).

   The camera/game NEVER auto-starts: a game card only builds its iframe
   on click, and a "Tap to play" poster sits over the iframe so capture
   waits for a second, explicit tap inside the lightbox.
   ===================================================================== */

/* ─── Page rhythm ─────────────────────────────────────────────────── */
.lp-wrap { max-width: 1040px; margin: 0 auto; padding: 0 18px 56px; }
.lp-section { margin: 56px 0 0; }
.lp-section:first-of-type { margin-top: 28px; }
.lp-section__head { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.lp-section__head h2 { font-size: clamp(26px, 4.6vw, 38px); line-height: 1.08; margin: 0 0 10px; }
.lp-section__head p { color: var(--muted); font-size: clamp(15px, 2vw, 17px); margin: 0; }
.lp-eyebrow {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2); margin: 0 0 8px; font-weight: 700;
}

/* ─── Top bar ─────────────────────────────────────────────────────── */
.lp-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; max-width: 1040px; margin: 0 auto; padding: 16px 18px;
}
.lp-top__brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 18px; }
.lp-top__brand .lp-breathe {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-2); animation: lp-breathe 5s ease-in-out infinite;
}
@keyframes lp-breathe { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.5); opacity: 1; } }
.lp-top__cta {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-weight: 700; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
  background: var(--panel-2); transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.lp-top__cta:hover { border-color: var(--accent); transform: translateY(-1px); background: var(--panel); }

/* ─── Hero ────────────────────────────────────────────────────────── */
.lp-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 44px 40px;
}
@media (max-width: 800px) {
  .lp-hero { grid-template-columns: 1fr; gap: 28px; padding: 32px 22px; text-align: center; }
}
/* Ambient drifting glow behind the hero */
.lp-hero::before {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px circle at 24% 22%, rgba(79,140,255,.22), transparent 55%),
    radial-gradient(520px circle at 80% 84%, rgba(124,196,255,.14), transparent 60%);
  animation: lp-hero-drift 19s ease-in-out infinite;
}
.lp-hero > * { position: relative; z-index: 1; }
@keyframes lp-hero-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2.5%, 2%, 0) scale(1.04); }
}
.lp-hero h1 { font-size: clamp(34px, 6.4vw, 60px); line-height: 1.02; margin: 6px 0 16px; letter-spacing: -.01em; }
.lp-hero p.lp-lede { font-size: clamp(16px, 2.3vw, 20px); color: var(--muted); margin: 0 0 26px; max-width: 30em; }
@media (max-width: 800px) { .lp-hero p.lp-lede { margin-left: auto; margin-right: auto; } }
.lp-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 800px) { .lp-hero__ctas { justify-content: center; } }

/* Floating sign / emoji chips above the hero copy */
.lp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
@media (max-width: 800px) { .lp-chips { justify-content: center; } }
.lp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 12px;
  animation: lp-chip-float 7s ease-in-out infinite;
}
.lp-chip span { font-size: 16px; }
.lp-chip svg { width: 15px; height: 15px; color: var(--accent-2); flex: 0 0 auto; }
.lp-chip:nth-child(2) { animation-delay: .9s; }
.lp-chip:nth-child(3) { animation-delay: 1.8s; }
.lp-chip:nth-child(4) { animation-delay: 2.7s; }
@keyframes lp-chip-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Hero motif: a tic-tac-toe board that fills itself on a loop ── */
.lp-motif { display: flex; align-items: center; justify-content: center; }
.lp-board {
  position: relative; width: min(320px, 78vw); aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 14px; border-radius: 22px;
  background: linear-gradient(150deg, var(--panel-2), #0a1224);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(124,196,255,.06);
}
.lp-cell {
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,196,255,.05); border: 1px solid var(--line);
  border-radius: 14px; font-size: clamp(30px, 9vw, 52px); font-weight: 900;
  font-family: "JetBrains Mono", ui-monospace, monospace; line-height: 1;
}
.lp-cell .mark {
  opacity: 0; transform: scale(.4) rotate(-12deg);
  animation: lp-mark-in .5s cubic-bezier(.2,.8,.2,1) forwards;
}
.lp-cell .mark.x { color: var(--accent-2); }
.lp-cell .mark.o { color: var(--gold); }
.lp-cell.win { box-shadow: 0 0 0 2px var(--good) inset; background: rgba(74,222,128,.10); }
/* Stagger the eight moves of a scripted game, then a winning row glow */
.lp-cell:nth-child(1) .mark { animation-delay: .4s; }
.lp-cell:nth-child(5) .mark { animation-delay: 1.0s; }
.lp-cell:nth-child(9) .mark { animation-delay: 1.6s; }
.lp-cell:nth-child(2) .mark { animation-delay: 2.2s; }
.lp-cell:nth-child(3) .mark { animation-delay: 2.8s; }
.lp-cell:nth-child(7) .mark { animation-delay: 3.4s; }
@keyframes lp-mark-in {
  0%   { opacity: 0; transform: scale(.4) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* Winning diagonal (1-5-9) lights up after the last move lands */
.lp-board.is-won .lp-cell:nth-child(1),
.lp-board.is-won .lp-cell:nth-child(5),
.lp-board.is-won .lp-cell:nth-child(9) {
  animation: lp-win-glow 1.1s ease-in-out infinite;
}
@keyframes lp-win-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--good) inset; }
  50%      { box-shadow: 0 0 0 2px var(--good) inset, 0 0 22px rgba(74,222,128,.45); }
}
.lp-board__badge {
  position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
  background: var(--good); color: #06231a; font-weight: 800; font-size: 12px;
  letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

/* ─── Buttons (extend gameroom .gr-btn with a sheen sweep + glow) ──── */
.lp-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border: 0; cursor: pointer; font-size: 17px; font-weight: 700;
  padding: 15px 26px; border-radius: 12px; text-decoration: none;
  background: var(--accent); color: #fff;
  transition: transform .18s ease, box-shadow .25s ease, background .18s ease;
}
.lp-btn::before {
  content: ""; position: absolute; inset: -20% -50%; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.32) 50%, transparent 75%);
  transform: translateX(-115%) skewX(-12deg);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.lp-btn:hover::before { transform: translateX(115%) skewX(-12deg); }
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(79,140,255,.7); background: #3f7af0; }
.lp-btn:active { transform: translateY(0); }
.lp-btn > * { position: relative; z-index: 1; }
.lp-btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.lp-btn--ghost:hover { background: var(--panel-2); border-color: var(--accent); box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }

/* ─── Steps row ───────────────────────────────────────────────────── */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-step {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.lp-step:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 20px 40px -22px rgba(0,0,0,.7); }
.lp-step__n { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--accent-2); font-weight: 800; font-size: 22px; min-height: 26px; }
.lp-step__n svg { width: 26px; height: 26px; color: var(--accent-2); display: block; }
.lp-step__n--ily { font-size: 26px; line-height: 1; }
.lp-step h3 { margin: 8px 0 6px; font-size: 19px; }
.lp-step p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.5; }

/* ─── Game-demo grid ──────────────────────────────────────────────── */
.lp-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .lp-games { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lp-games { grid-template-columns: 1fr; } }

.lp-game {
  position: relative; isolation: isolate; text-align: left; cursor: pointer;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; padding: 0; color: var(--ink); width: 100%; font: inherit;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.lp-game:hover, .lp-game:focus-visible {
  transform: translateY(-6px); border-color: var(--accent); outline: none;
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.75);
}
.lp-game__thumb {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(135deg, rgba(79,140,255,.18), var(--panel-2));
}
.lp-game__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.lp-game:hover .lp-game__thumb img, .lp-game:focus-visible .lp-game__thumb img { transform: scale(1.06); }
/* "Play" overlay that fades up on hover */
.lp-game__play {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to top, rgba(8,12,24,.78), rgba(8,12,24,.05) 60%, transparent);
  opacity: 0; transition: opacity .3s ease;
}
.lp-game:hover .lp-game__play, .lp-game:focus-visible .lp-game__play { opacity: 1; }
.lp-game__play span {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.4);
  transform: translateY(8px); transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.lp-game:hover .lp-game__play span, .lp-game:focus-visible .lp-game__play span { transform: translateY(0); }
.lp-game__body { padding: 14px 16px 16px; flex: 1 1 auto; }
.lp-game__name { font-weight: 800; font-size: 18px; margin: 0 0 4px; line-height: 1.25; }
.lp-game__blurb { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.45; }
.lp-game__tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold);
  background: rgba(11,16,32,.72); backdrop-filter: blur(4px);
}
.lp-game__tag--pro { border-color: var(--accent-2); color: var(--accent-2); }
.lp-game__tag--free { border-color: var(--good); color: var(--good); }
.lp-game__kind { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* Every card is the same size — a clean 3-wide × 2-tall grid, equal heights.
   The four tournament games get a subtle gold edge to set them apart. */
.lp-game--flag { border-color: rgba(255,210,92,.35); }

/* Rock Paper Scissors — the one card where emoji earns its keep. Three throw
   shapes crossfade on a 3-2-1-SHOOT loop over a soft glow; a countdown pill
   pulses underneath. */
.lp-game__thumb--rps {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 36%, rgba(79,140,255,.20), var(--panel-2));
}
.lp-game__thumb--rps .rps-shape {
  position: absolute; top: 44%; left: 50%; opacity: 0;
  font-size: clamp(46px, 11vw, 76px); line-height: 1;
  transform: translate(-50%, -50%) scale(.6);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.5));
  animation: lp-rps-throw 3.6s cubic-bezier(.2,.8,.2,1) infinite;
}
.lp-game__thumb--rps .rps-shape--2 { animation-delay: 1.2s; }
.lp-game__thumb--rps .rps-shape--3 { animation-delay: 2.4s; }
@keyframes lp-rps-throw {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.5) rotate(-12deg); }
  8%   { opacity: 1; transform: translate(-50%,-50%) scale(1.1) rotate(4deg); }
  24%  { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
  32%  { opacity: 0; transform: translate(-50%,-50%) scale(.9); }
  100% { opacity: 0; }
}
.lp-game__thumb--rps .rps-count {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 800;
  font-size: 14px; letter-spacing: 4px; color: var(--accent-2);
  background: rgba(11,16,32,.72); border: 1px solid var(--line);
  padding: 5px 13px; border-radius: 999px; backdrop-filter: blur(4px); white-space: nowrap;
  animation: lp-rps-count 3.6s ease-in-out infinite;
}
@keyframes lp-rps-count { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* Party Pong — the in-person tournament game, played at a real table.
   Always-on "played at your table" caption instead of the hover "Try it" reveal. */
.lp-game--table { border-color: rgba(255,210,92,.35); }
/* In-person caption: shown at rest (no reveal-on-hover), styled gold not accent */
.lp-game__play--table {
  opacity: 1; align-items: flex-end; padding-bottom: 12px;
  background: linear-gradient(to top, rgba(8,12,24,.62), transparent 55%);
}
.lp-game__play--table span {
  transform: none; background: rgba(11,16,32,.82);
  color: var(--gold); border: 1px solid var(--gold);
  font-size: 12px; padding: 7px 14px; backdrop-filter: blur(4px);
}

/* ─── Tournament feature band ─────────────────────────────────────── */
.lp-tourney {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
  background: var(--panel); border: 1px solid rgba(255,210,92,.28); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 36px;
}
@media (max-width: 800px) { .lp-tourney { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; } }
.lp-tourney::before {
  content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at 78% 30%, rgba(255,210,92,.12), transparent 60%);
}
.lp-tourney > * { position: relative; z-index: 1; }
.lp-tourney h2 { font-size: clamp(24px, 4vw, 34px); margin: 6px 0 12px; line-height: 1.1; }
.lp-tourney p { color: var(--muted); margin: 0 0 16px; font-size: 16px; line-height: 1.55; }
.lp-tourney__modes { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-tourney__modes .lp-pill {
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
}

/* Mini animated bracket for the tournament band */
.lp-bracket { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 8px 0; align-items: center; }
.lp-bracket__seed {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px;
  opacity: 0; animation: lp-seed-in .5s ease forwards;
}
.lp-bracket__seed .rk { font-family: "JetBrains Mono", monospace; color: var(--accent-2); width: 18px; }
.lp-bracket__seed.win { border-color: var(--good); color: var(--good); }
.lp-bracket__seed.win .rk { color: var(--good); }
.lp-bracket__seed:nth-child(1) { animation-delay: .1s; }
.lp-bracket__seed:nth-child(4) { animation-delay: .25s; }
.lp-bracket__seed:nth-child(7) { animation-delay: .4s; }
.lp-bracket__seed:nth-child(10){ animation-delay: .55s; }
.lp-bracket__link {
  align-self: stretch; border-right: 2px solid var(--line); border-radius: 0 8px 8px 0;
}
.lp-bracket__final {
  grid-column: 3; align-self: center; font-size: 13px; font-weight: 800; color: var(--gold);
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,210,92,.10); border: 1px solid var(--gold); border-radius: 10px; padding: 8px 11px;
  opacity: 0; animation: lp-seed-in .5s ease forwards .8s;
}
@keyframes lp-seed-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ─── Pricing tiers ───────────────────────────────────────────────── */
.lp-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .lp-tiers { grid-template-columns: 1fr; } }
.lp-tier {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.lp-tier:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -22px rgba(0,0,0,.7); }
.lp-tier--pro { border-color: rgba(255,210,92,.35); }
.lp-tier--pro:hover { border-color: var(--gold); }
.lp-tier__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.lp-tier__head h3 { margin: 0; font-size: 22px; }
.lp-tier__price {
  font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted);
}
.lp-tier__price--pro { color: var(--gold); border-color: var(--gold); }
.lp-tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-tier li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 15px; line-height: 1.45; }
.lp-tier li::before { content: "✓"; color: var(--good); font-weight: 900; flex: 0 0 auto; }
.lp-tier li b { color: var(--ink); }
.lp-tier__note { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ─── Join-by-code panel ──────────────────────────────────────────── */
.lp-join {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 36px; text-align: center;
}
.lp-join__form { max-width: 360px; margin: 18px auto 0; }
.lp-join .gr-input--code { width: 100%; }
.lp-join .lp-btn { width: 100%; margin-top: 12px; }

/* ─── Footer ──────────────────────────────────────────────────────── */
.lp-foot { text-align: center; color: var(--muted); font-size: 13px; line-height: 1.7; padding: 48px 0 8px; }
.lp-foot a { color: var(--accent-2); text-decoration: none; }
.lp-foot a:hover { text-decoration: underline; }

/* ─── Lightbox (game demo modal) ──────────────────────────────────── */
.lp-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 9, 18, .82); backdrop-filter: blur(6px);
}
.lp-lightbox.is-open { display: flex; animation: lp-lb-in .25s ease; }
@keyframes lp-lb-in { from { opacity: 0; } to { opacity: 1; } }
.lp-lightbox__panel {
  position: relative; width: min(560px, 96vw); max-height: 92vh;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
  animation: lp-lb-pop .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes lp-lb-pop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.lp-lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.lp-lightbox__title { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.lp-lightbox__close {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.lp-lightbox__close:hover { border-color: var(--accent); background: var(--panel); transform: rotate(90deg); }
.lp-lightbox__stage {
  position: relative; background: #000; aspect-ratio: 3 / 4; width: 100%;
  max-height: calc(92vh - 64px); overflow: hidden;
}
.lp-lightbox__stage iframe { width: 100%; height: 100%; border: 0; display: block; }

/* The "Tap to play" poster — sits over the iframe until the user taps it,
   so the camera/game never starts on lightbox-open. */
.lp-poster {
  position: absolute; inset: 0; z-index: 4; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 24px;
  background:
    linear-gradient(rgba(11,16,32,.55), rgba(11,16,32,.78)),
    var(--poster-img, linear-gradient(135deg, var(--panel-2), #0a1224));
  background-size: cover; background-position: center;
  border: 0; color: var(--ink); width: 100%; font: inherit;
}
.lp-poster__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 76px; height: 76px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); color: #fff; font-size: 30px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: lp-poster-pulse 2.4s ease-in-out infinite;
}
@keyframes lp-poster-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
  50%      { transform: scale(1.06); box-shadow: 0 12px 38px rgba(79,140,255,.55); }
}
.lp-poster__label { font-weight: 800; font-size: 18px; }
.lp-poster__sub { color: var(--muted); font-size: 13px; max-width: 30ch; line-height: 1.45; margin: 0; }
.lp-poster[hidden] { display: none; }

/* ─── Scroll-reveal (page-local; IntersectionObserver toggles .is-in) ── */
.lp-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.lp-reveal.is-in { opacity: 1; transform: none; }
.lp-reveal-stagger.is-in > * { animation: lp-stagger-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.lp-reveal-stagger.is-in > *:nth-child(1) { animation-delay: .04s; }
.lp-reveal-stagger.is-in > *:nth-child(2) { animation-delay: .10s; }
.lp-reveal-stagger.is-in > *:nth-child(3) { animation-delay: .16s; }
.lp-reveal-stagger.is-in > *:nth-child(4) { animation-delay: .22s; }
.lp-reveal-stagger.is-in > *:nth-child(5) { animation-delay: .28s; }
.lp-reveal-stagger.is-in > *:nth-child(6) { animation-delay: .34s; }
.lp-reveal-stagger.is-in > *:nth-child(7) { animation-delay: .40s; }
.lp-reveal-stagger > * { opacity: 0; }
.lp-reveal-stagger.is-in > * { opacity: 1; }
@keyframes lp-stagger-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ─── Reduced-motion: freeze everything, reveal everything ────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .lp-reveal { opacity: 1 !important; transform: none !important; }
  .lp-reveal-stagger > *, .lp-reveal-stagger.is-in > * { opacity: 1 !important; animation: none !important; }
  .lp-cell .mark { opacity: 1 !important; transform: none !important; }
  .lp-bracket__seed, .lp-bracket__final { opacity: 1 !important; transform: none !important; }
  .lp-chip, .lp-board.is-won .lp-cell, .lp-poster__btn,
  .lp-hero::before, .lp-top__brand .lp-breathe { animation: none !important; }
  .lp-game:hover, .lp-step:hover, .lp-tier:hover, .lp-btn:hover { transform: none !important; }
  /* RPS card: freeze to one visible shape + the count pill (the loop is off). */
  .lp-game__thumb--rps .rps-shape { opacity: 0 !important; }
  .lp-game__thumb--rps .rps-shape--2 { opacity: 1 !important; transform: translate(-50%,-50%) scale(1) !important; }
  .lp-game__thumb--rps .rps-count { opacity: 1 !important; }
}