/* landing page: Lisa's design handoff "Global Player Landing" (17 Oct 2026) */
@font-face { font-family: Poppins; font-weight: 800; src: url(/fonts/Poppins-ExtraBold.ttf); }
body.landing { margin: 0; background: #120f24; }
body.landing a { color: #a5b4fc; }
body.landing a:hover { color: #f9a8d4; }
.lp { min-height: 100vh; font-family: Poppins, sans-serif; color: #fff; overflow: hidden; box-sizing: border-box;
  background: radial-gradient(60% 50% at 12% 10%, #38418a 0%, transparent 70%), radial-gradient(50% 50% at 92% 30%, #6b2a55 0%, transparent 70%), radial-gradient(50% 40% at 15% 95%, #27493f 0%, transparent 70%), radial-gradient(40% 40% at 85% 95%, #5a3c30 0%, transparent 70%), #1a1530;
  padding: 28px max(32px, calc((100% - 1160px) / 2)) 48px; display: flex; flex-direction: column; gap: 80px; }
.lp *, .lp *::before { box-sizing: border-box; }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lp-brand { display: flex; align-items: center; gap: 12px; color: #d4cfee; font-size: 15px; }
.lp-logo { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #fff; overflow: hidden; flex: none; }
.lp-logo img { position: absolute; width: 105px; height: 105px; left: -26px; top: -21px; max-width: none; }
.lp-ghost { font: 500 14px Poppins, sans-serif; color: #fff !important; text-decoration: none; padding: 10px 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.07); cursor: pointer; }
.lp-ghost:hover { background: rgba(255,255,255,.14); }
.lp-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 48px; align-items: center; }
.lp-left { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.lp-pill { align-self: flex-start; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #f0abfc; padding: 6px 14px; border-radius: 99px; background: rgba(240,171,252,.12); border: 1px solid rgba(240,171,252,.3); }
.lp-title { margin: 0; font-size: clamp(48px, 7vw, 84px); line-height: 1; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(90deg, #818cf8, #e879f9 70%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-tag { margin: 0; font-size: 22px; line-height: 1.5; color: #e4e0f5; max-width: 460px; text-wrap: pretty; }
.lp-join { display: flex; flex-direction: column; gap: 12px; max-width: 460px; padding: 20px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lp-join label { font-size: 14px; font-weight: 600; }
.lp-row { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-row input { flex: 1 1 140px; min-width: 0; font: 600 22px Poppins, sans-serif; letter-spacing: .3em; text-align: center; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 12px; outline: none; }
.lp-row input:focus { border-color: #a78bfa; }
.lp-grad { flex: 1 1 120px; font: 600 16px Poppins, sans-serif; color: #fff; border: 0; border-radius: 12px; padding: 14px 24px; cursor: pointer; background: linear-gradient(90deg, #5b6cf5, #ec4899); box-shadow: 0 8px 28px rgba(168,85,247,.4); }
.lp-grad:hover { filter: brightness(1.12); }
.lp-hint, .lp-host span { font-size: 14px; color: #cfc9ea; }
.lp-host { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 460px; }
.lp-host .lp-ghost { font-size: 15px; font-weight: 600; padding: 13px 22px; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.lp-host .lp-ghost:hover { background: rgba(255,255,255,.16); }
/* the globe */
.lp-globe-wrap { display: flex; justify-content: center; align-items: center; min-height: 420px; }
.lp-globe { position: relative; width: min(420px, 100%); aspect-ratio: 1; animation: lpFloat 7s ease-in-out infinite; }
.lp-sphere, .lp-landclip, .lp-shade { position: absolute; inset: 6%; border-radius: 50%; }
.lp-sphere { background: radial-gradient(circle at 35% 30%, #7c7cf0 0%, #4a3b9c 40%, #1c1745 80%); box-shadow: 0 0 80px rgba(129,140,248,.45), inset -20px -30px 60px rgba(0,0,0,.5); }
.lp-landclip { overflow: hidden; filter: blur(.6px); }
.lp-strip { display: flex; width: 400%; height: 100%; animation: lpPan 40s linear infinite; }
.lp-strip svg { width: 50%; height: 100%; flex: none; display: block; }
.lp-shade { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.35), transparent 35%), radial-gradient(circle at 70% 75%, transparent 40%, rgba(10,6,40,.75) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
/* the ring: drawn twice, the back copy sits behind the sphere, the front copy only shows its lower (near) half */
.lp-ring { position: absolute; inset: -4%; border-radius: 50%; border: 2px solid rgba(244,114,182,.55); transform: rotateX(72deg); }
.lp-ring.front { clip-path: inset(50% 0 0 0); }
.lp-orbit { position: absolute; inset: 0; animation: lpSpin 18s linear infinite; }
.lp-orbit.b { inset: -10%; animation: lpSpin 30s linear infinite reverse; }
.lp-orbit i { position: absolute; border-radius: 50%; }
.lp-orbit.a i { top: 3%; left: 50%; width: 18px; height: 18px; margin-left: -9px; background: #f472b6; box-shadow: 0 0 20px #f472b6; }
.lp-orbit.b i { top: 50%; right: 0; width: 12px; height: 12px; background: #a5b4fc; box-shadow: 0 0 16px #a5b4fc; }
@keyframes lpSpin { to { transform: rotate(360deg); } }
@keyframes lpPan { to { transform: translateX(-50%); } }
@keyframes lpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .lp-globe, .lp-strip, .lp-orbit { animation: none; } }
/* how to play */
.lp-how { display: flex; flex-direction: column; gap: 28px; }
.lp-how h2 { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.01em; }
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.lp-step { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.lp-step span { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; background: linear-gradient(135deg, #5b6cf5, #ec4899); }
.lp-step h3 { margin: 0; font-size: 20px; font-weight: 600; }
.lp-step p { margin: 0; font-size: 16px; line-height: 1.55; color: #d9d4f0; text-wrap: pretty; }
.lp-more { align-self: flex-start; font-weight: 500; }
.lp-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; color: #cfc9ea; }
@media (max-width: 600px) {
  .lp { padding: 20px 16px 40px; gap: 56px; }
  .lp-tag { font-size: 19px; }
  .lp-globe-wrap { min-height: 0; }
  .lp-globe { width: min(300px, 80%); }
  .lp-head { flex-wrap: nowrap; }
  .lp-brand { font-size: 13px; gap: 10px; }
  .lp-head .lp-ghost { padding: 9px 14px; white-space: nowrap; }
  .lp-row input { flex-basis: 100px; letter-spacing: .2em; }
  .lp-grad { white-space: nowrap; padding: 14px 18px; }
}