/* MYBC prelanders, round 4: the ONE-SCREEN layout shared by every page (load after prelander.css, before win.css).
   Phone 390x844: header, title, hero, CTA and reward strip all inside the first viewport, no scroll.
   Desktop: the same column centred (max 480px) on the dark stage. Stage mood is pure CSS: layered glows, vignette,
   a spotlight cone behind the hero, drifting motes. No image files. Slots: see kit/one.md. */
@font-face { font-family: 'Gilroy'; src: url(fonts/Gilroy-Medium.woff2) format('woff2'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url(fonts/Gilroy-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url(fonts/Gilroy-Heavy.woff2) format('woff2'); font-weight: 800 900; font-display: swap; }
@font-face { font-family: 'Gilroy Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 900; size-adjust: 95.32%; ascent-override: 103.86%; descent-override: 26.23%; }
:root { --pl-font: 'Gilroy', 'Gilroy Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --one-bg: #1a1038; --one-deep: #0c0720; }

html, body { height: 100%; background: var(--one-deep); }
body { min-height: 0; overflow: hidden; }
.one { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; max-width: 480px; height: 100vh; height: 100dvh;
  margin: 0 auto; padding: 0 16px max(14px, env(safe-area-inset-bottom)); }
.one .pl-header { flex: none; height: 52px; border-bottom-color: rgba(255, 255, 255, .08); }

/* ---------- stage mood (fixed, full viewport, behind the column) ---------- */
.one-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 46%, #3a1f86 0%, rgba(58, 31, 134, 0) 70%),
    radial-gradient(40% 35% at 12% 18%, rgba(160, 60, 200, .28), rgba(160, 60, 200, 0) 70%),
    radial-gradient(40% 35% at 88% 22%, rgba(90, 70, 255, .25), rgba(90, 70, 255, 0) 70%),
    radial-gradient(70% 25% at 50% 100%, rgba(255, 150, 40, .16), rgba(255, 150, 40, 0) 70%), var(--one-bg); }
@media (min-width: 600px) { .one-stage { background-color: var(--one-deep); } }
.one-stage::before { content: ''; position: absolute; left: 50%; top: -6%; width: min(150vw, 760px); height: 78%; transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(255, 232, 170, .2), rgba(255, 232, 170, .05) 60%, rgba(255, 232, 170, 0));
  clip-path: polygon(42% 0, 58% 0, 88% 100%, 12% 100%); }
.one-stage::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(5, 2, 16, .72) 100%); }
.one-stage i { position: absolute; left: var(--x); top: var(--y); width: var(--s, 4px); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: #ffe2a0; box-shadow: 0 0 8px 2px rgba(255, 200, 110, .55); animation: one-mote var(--d, 9s) ease-in-out var(--w, 0s) infinite; will-change: transform, opacity; }
.one-stage i:nth-child(1) { --x: 14%; --y: 70%; --d: 10s; }
.one-stage i:nth-child(2) { --x: 82%; --y: 62%; --d: 12s; --w: -3s; --s: 3px; }
.one-stage i:nth-child(3) { --x: 30%; --y: 34%; --d: 9s; --w: -6s; --s: 3px; }
.one-stage i:nth-child(4) { --x: 70%; --y: 28%; --d: 11s; --w: -2s; }
.one-stage i:nth-child(5) { --x: 8%; --y: 44%; --d: 13s; --w: -8s; --s: 5px; }
.one-stage i:nth-child(6) { --x: 92%; --y: 40%; --d: 10s; --w: -5s; --s: 3px; }
.one-stage i:nth-child(7) { --x: 46%; --y: 86%; --d: 12s; --w: -9s; }
.one-stage i:nth-child(8) { --x: 60%; --y: 76%; --d: 9s; --w: -4s; --s: 3px; }
@keyframes one-mote { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 25%, 70% { opacity: .9; } 100% { opacity: 0; transform: translate3d(14px, -90px, 0); } }

/* ---------- the column: title, hero, CTA, strip ---------- */
.one__main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3.4vh, 34px); padding-top: 4px; }
.one__title { margin: 0; font-size: min(7.2vw, 34px); line-height: 1.05; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; text-align: center;
  text-shadow: 0 2px 18px rgba(124, 77, 255, .55); }
.one__title b { color: var(--pl-gold); }
.one__hero { position: relative; flex: none; width: min(100%, 360px, calc(100dvh - 330px)); aspect-ratio: 1; margin-top: 4%; }
.one__hero::before { content: ''; position: absolute; inset: -22%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 100, 255, .5), rgba(255, 181, 33, .14) 60%, rgba(255, 181, 33, 0)); }
.one__foot { flex: none; width: 100%; display: grid; gap: 10px; margin-top: clamp(4px, 2vh, 20px); }
.one__cta { height: 56px; font-size: 18px; font-weight: 800; box-shadow: 0 10px 28px -8px rgba(255, 123, 23, .6); transition: transform .14s cubic-bezier(.3, .7, .4, 1); }
.one__cta:active { transform: scale(.96, .92); }
.one__strip { margin: 0; font-size: min(3.4vw, 14px); line-height: 1.2; font-weight: 700; color: var(--pl-text-2); text-align: center; white-space: nowrap; }
.one__strip b { color: var(--pl-gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.one [hidden] { display: none !important; }

/* ---------- live CTA: gold hairline + shimmer sweep every 3 s (copied from the app button) ---------- */
.pl-btn--live { position: relative; overflow: hidden; isolation: isolate; }
.pl-btn--live::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(190deg, #FDD8AD 0%, #FFB969 48%, #E8C69F 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.pl-btn--live::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none; transform: translate3d(-160%, 0, 0);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); animation: one-sheen 3s cubic-bezier(.32, .72, 0, 1) .8s infinite; }
.pl-btn--live[disabled]::before, .pl-btn--live[disabled]::after { display: none; }
@keyframes one-sheen { 0% { transform: translate3d(-160%, 0, 0); } 30%, 100% { transform: translate3d(340%, 0, 0); } }

/* ---------- header speaker toggle (kit/one.js) ---------- */
.one-snd { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 8px 0 auto; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pl-ghost-line); background: var(--pl-ghost-bg); color: var(--pl-text-2); }
.one-snd[aria-pressed="true"] { color: var(--pl-gold); border-color: rgba(255, 181, 33, .5); }

/* ---------- lamp ring (kit/one.js ONE.lamps): chase idle, fast while spinning, flash on landing ---------- */
.one-lamps { position: absolute; inset: 0; z-index: 3; pointer-events: none; container-type: size; }
.one-lamps i { position: absolute; left: 50%; top: 50%; width: 3cqw; height: 3cqw; margin: -1.5cqw 0 0 -1.5cqw; border-radius: 50%; opacity: .3;
  background: radial-gradient(circle at 40% 35%, #fff, #ffe7a0 45%, #ffb521 85%); box-shadow: 0 0 2.2cqw .5cqw rgba(255, 205, 100, .8);
  transform: rotate(var(--a)) translateY(calc(var(--lamp-r, 48.8) * -1cqw)); will-change: opacity;
  animation: one-chase var(--chase, 1.2s) linear calc(var(--k) * var(--chase, 1.2s) / -3) infinite; }
.one-lamps.is-fast { --chase: .3s; }
.one-lamps.is-flash i { opacity: 1; animation: one-flash .36s steps(1) 4 both; }
.one-lamps.is-off i { animation: none; }
@keyframes one-chase { 0%, 33% { opacity: 1; } 34%, 100% { opacity: .3; } }
@keyframes one-flash { 0% { opacity: 1; } 50% { opacity: .35; } }

@media (max-height: 700px) { .one .pl-header { height: 46px; } .one__cta { height: 50px; } }
@media (prefers-reduced-motion: reduce) { .one-stage i, .one-lamps i, .pl-btn--live::after { animation: none; } }
.pl-reduced .one-stage i, .pl-reduced .one-lamps i { animation: none; }