/* Social casino lander. Self-contained; base.css still styles the debug panels. */
:root {
  --lp-bg: #0b0a14;
  --lp-bg-2: #15122a;
  --lp-ink: #f4efe6;
  --lp-muted: #a89fc2;
  --lp-gold: #f3c452;
  --lp-gold-2: #b98618;
  --lp-line: rgba(243, 196, 82, .22);
  --lp-font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}
body.lp {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(243,196,82,.18), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(120,80,255,.16), transparent 60%),
    var(--lp-bg);
  color: var(--lp-ink);
  font: 17px/1.55 var(--lp-font);
  min-height: 100vh;
}
.lp-wrap { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; text-align: center; }
.lp-badge {
  display: inline-block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lp-gold); border: 1px solid var(--lp-line); border-radius: 999px; padding: .35rem .9rem;
}
.lp-title { font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.08; margin: 1.1rem 0 .6rem; letter-spacing: -.01em; }
.lp-title em { font-style: normal; color: var(--lp-gold); }
.lp-sub { color: var(--lp-muted); font-size: 1.05rem; margin: 0 auto 1.8rem; max-width: 34ch; }
.lp-coins { font-size: clamp(3rem, 12vw, 5.5rem); line-height: 1; letter-spacing: .04em; margin: .2rem 0 1.6rem;
  background: linear-gradient(180deg, #fff3c4, var(--lp-gold) 55%, var(--lp-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.lp-coins small { display: block; font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lp-muted); -webkit-text-fill-color: var(--lp-muted); font-weight: 600; margin-top: .4rem; }
.lp-cta {
  display: inline-block; font-size: 1.2rem; font-weight: 800; letter-spacing: .02em;
  color: #1c1300; background: linear-gradient(180deg, #ffe08a, var(--lp-gold) 60%, #d9a52a);
  border-radius: 14px; padding: 1rem 2.4rem; text-decoration: none;
  box-shadow: 0 10px 30px rgba(243,196,82,.28), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .12s ease, box-shadow .12s ease;
}
.lp-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(243,196,82,.36), inset 0 1px 0 rgba(255,255,255,.6); }
.lp-cta.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.lp-cta-note { color: var(--lp-muted); font-size: .9rem; margin: .8rem 0 2.4rem; }
.lp-points { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); text-align: left; margin: 0 0 2.4rem; padding: 0; list-style: none; }
.lp-points li { background: rgba(255,255,255,.04); border: 1px solid var(--lp-line); border-radius: 12px; padding: .9rem 1rem; }
.lp-points b { display: block; color: var(--lp-gold); font-size: .95rem; margin-bottom: .15rem; }
.lp-points span { color: var(--lp-muted); font-size: .9rem; }
.lp-legal { color: var(--lp-muted); font-size: .78rem; line-height: 1.5; border-top: 1px solid var(--lp-line); padding-top: 1.2rem; max-width: 60ch; margin: 0 auto; }
.lp-legal b { color: var(--lp-ink); }
/* Debug panels sit under the lander in the normal tool styling */
.lp-debug { text-align: left; margin-top: 3rem; }
.lp-debug .card { margin-bottom: 1.25rem; }

/* Sign-up form */
.lp-form { display: grid; gap: .9rem; max-width: 420px; margin: 0 auto 1rem; text-align: left; }
.lp-form label { display: grid; gap: .35rem; font-size: .9rem; color: var(--lp-muted); }
.lp-form input {
  font: inherit; color: var(--lp-ink); background: rgba(255,255,255,.06);
  border: 1px solid var(--lp-line); border-radius: 10px; padding: .8rem .95rem; width: 100%;
}
.lp-form input:focus { outline: 2px solid var(--lp-gold); outline-offset: 1px; }
.lp-form .lp-cta { width: 100%; border: 0; cursor: pointer; margin-top: .3rem; }
.lp-form .lp-cta:disabled { opacity: .6; cursor: progress; transform: none; }
.lp-form-error { color: #ff9b8a; font-size: .88rem; margin: 0; }
/* Preset panel (debug) */
ol.presets { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
ol.presets li { display: grid; grid-template-columns: 11rem 1fr; gap: .8rem; align-items: center; }
ol.presets .btn { justify-self: stretch; text-align: left; }
.preset-verify { font-size: .8rem; color: var(--muted); font-family: var(--mono); }
@media (max-width: 560px) { ol.presets li { grid-template-columns: 1fr; } }