/* Content pages (docs/SPEC-SITE-PAGES.md D8, D9): the server-rendered pages of gamekit/lib/pages. Self-contained — the
   app's style.css is not loaded here. Built for 280 px first (docs/PROTOCOL-LAYOUT.md): everything wraps, nothing is
   cut, taps are 24 px or more. Per-site colours arrive as variables from /brand.css; no inline style anywhere (CSP).
   Classes are prefixed pg- (page parts) and vf- (the verify tool). */
:root {
  --bg: #0b1020; --panel: #141b31; --panel2: #1b2440; --line: #26304f; --text: #e8ecf8; --muted: #9aa6c6;
  --accent: #f7b500; --good: #2ecc71; --bad: #ff5d5d; --radius: 14px; --head-font: inherit;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.pg { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-wrap: anywhere; }
a { color: var(--accent); }
.pg :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-skip { position: absolute; left: 8px; top: -60px; z-index: 9; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: #1a1300; font-weight: 700; }
.pg-skip:focus { top: 8px; }

/* Header: brand and the main button on one row when they fit, the page links on their own row. */
.pg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pg-brand { margin-right: auto; min-width: 0; padding: 6px 0; font: 800 clamp(16px, 4.8vw, 18px)/1.3 var(--head-font); color: var(--text); text-decoration: none; }
.pg-top .pg-btn { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.pg-nav { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 -8px; }
.pg-nav a, .pg-foot-nav a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 8px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; }
.pg-nav a:hover, .pg-foot-nav a:hover, .pg-nav a[aria-current], .pg-foot-nav a[aria-current] { color: var(--text); background: var(--panel2); }
/* Under 344 px the five page links (Sign in is the fifth) stay on one row: a second row made every page 34 px longer (D8). */
@media (max-width: 343px) {
  .pg-nav { gap: 2px 0; margin: 0 -4px; }
  .pg-nav a { padding: 4px; font-size: 14px; }
}

.pg-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel2); color: var(--text); font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.pg-btn-main { background: var(--accent); border-color: var(--accent); color: #1a1300; }
.pg-btn:hover { filter: brightness(1.08); }

/* Main column */
.pg-main { max-width: 760px; margin: 0 auto; padding: 8px 16px 28px; }
.pg-main h1 { margin: 6px 0 12px; font: 800 clamp(24px, 7vw, 34px)/1.2 var(--head-font); }
.pg-main h2 { margin: 0 0 10px; font: 800 clamp(18px, 5vw, 22px)/1.25 var(--head-font); }
.pg-main h3 { margin: 0 0 8px; font: 700 17px/1.3 var(--head-font); }
.pg-main p { margin: 0 0 12px; }
.pg-sec { margin: 0 0 16px; }
.pg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 13px; color: var(--muted); }
.pg-crumbs a, .pg-crumbs span { display: inline-flex; align-items: center; min-height: 28px; }
.pg-card, .pg-cta, .pg-details, .pg-faq details { margin: 0 0 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.pg-card > :last-child, .pg-cta > :last-child, .pg-details > :last-child, .pg-faq details > :last-child { margin-bottom: 0; }
.pg-note { padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--panel2); color: var(--muted); font-size: 14px; }
.pg-list, .pg-steps { margin: 0 0 12px; padding-left: 22px; }
.pg-list li, .pg-steps li { margin: 0 0 6px; }
.pg-list li > a:only-child { display: inline-block; min-height: 28px; padding: 2px 0; }
.pg-steps li::marker { color: var(--accent); font-weight: 800; }
.pg-code { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-main code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92em; }
.pg-cta { border-color: var(--accent); }
.pg-cta-t { font: 800 18px/1.3 var(--head-font); }
.pg summary { min-height: 28px; cursor: pointer; font-weight: 700; }
.pg details[open] > summary { margin-bottom: 10px; }
.pg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.pg-tiles li { display: grid; gap: 2px; min-width: 0; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.pg-tiles b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pg-tiles span { color: var(--muted); font-size: 13px; }

/* Tables: a real table from 560 px; below it every row is a small card and each cell shows its column name. */
.pg-table { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
.pg-table th, .pg-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pg-table th { color: var(--muted); font-weight: 600; }
@media (max-width: 559px) {
  .pg-table thead { display: none; }
  .pg-table, .pg-table tbody, .pg-table tr, .pg-table td { display: block; }
  .pg-table tr { margin: 0 0 8px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
  .pg-table td { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 4px 0; border: 0; }
  .pg-table td::before { content: attr(data-label); color: var(--muted); }
}

/* In-page tabs and "Show more" (D8). Every panel and row is in the HTML. With scripts on, the others are hidden before
   first paint (no layout shift); pages.js builds the tab row into the space reserved here. No scripts: all show. */
.pg-tablist { display: none; }
.pg-more-btn { display: none; }
.pg-more-btn::after { content: "Show more"; }
@media (scripting: enabled) {
  .pg-tablist { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; margin: 0 0 12px; }
  .pg-panel:not(.pg-on), .pg-panel-h, .pg-more:not(.pg-open) .pg-x { display: none; }
  .pg-more:not(.pg-open) .pg-more-btn { display: inline-flex; }
}
.pg-tablist button { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); font: inherit; font-size: clamp(13px, 3.8vw, 16px); font-weight: 700; cursor: pointer;
  white-space: nowrap; overflow-wrap: normal; word-break: keep-all; } /* a label never splits mid-word: tabs that do not fit wrap to a new row */
.pg-tablist button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #1a1300; }

/* Footer */
.pg-foot { padding: 16px 16px 20px; background: var(--panel); border-top: 1px solid var(--line); }
.pg-foot-in { max-width: 760px; margin: 0 auto; }
.pg-foot-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; }
.pg-foot-cta p { flex: 1 1 220px; min-width: 0; margin: 0; color: var(--muted); }
.pg-foot-nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 -8px 10px; }
.pg-foot-more { margin: -6px 0 10px; }
.pg-foot-more > summary { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; color: var(--muted); font-weight: 600; font-size: 15px; cursor: pointer; }
.pg-foot-more[open] > summary { color: var(--text); margin-bottom: 4px; }
.pg-fine { margin: 0; color: var(--muted); font-size: 13px; }

/* The verify tool (/verify): labelled fields that stack on a phone, an output that wraps. */
.vf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.vf-grid label { grid-column: span 2; display: grid; align-content: start; gap: 4px; min-width: 0; font-weight: 600; }
.vf-grid label.vf-half { grid-column: span 1; } /* the two short number fields share a row on a phone */
@media (min-width: 640px) { .vf-grid label { grid-column: span 1; } }
.vf-grid input, .vf-grid select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; }
.vf-grid small { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.35; }
.vf-out { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.vf-out:empty { display: none; }

/* The contact form (/contact: web/contact.html + contact-form.js): one column of labelled fields, a full-width message box. */
.ct-form { display: grid; gap: 12px; margin: 0; }
.ct-form label { display: grid; align-content: start; gap: 4px; min-width: 0; font-weight: 600; }
.ct-form input, .ct-form select, .ct-form textarea { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; }
.ct-form textarea { min-height: 132px; resize: vertical; }
.ct-form small { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.35; }
.ct-form p { margin: 0; }
.ct-form .pg-btn { min-height: 44px; min-width: 120px; }
.ct-form .pg-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.ct-out { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); }
.ct-out:empty { display: none; }
.ct-out[data-state="ok"] { border-color: var(--good); }
.ct-out[data-state="bad"] { border-color: var(--bad); }

/* The sign-in box (/signup, /login: web/signup.html, web/login.html + auth.js): the Terms line with its checkbox, one wide button. */
.au-box { display: grid; gap: 12px; }
.au-box p { margin: 0; }
.au-agree { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.au-agree input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.au-agree label { min-width: 0; }
.au-box .pg-btn { width: 100%; min-height: 48px; font-size: 17px; }
.au-box .pg-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.au-fine { color: var(--muted); font-size: 14px; }

/* The home landing (#landing: lib/pages/home.js; v2 docs/TASK-2026-10-14-LANDING-V2.md) in the app shell, where style.css
   loads after this file and its variables win. Hidden before the first paint for a kept token and on every tab but Free
   BTC (§4.2: no flash, no CLS); the signed-out faucet view leaves #view empty, so the landing is the page. Built for
   280 px first: one column on a phone with the sign-up card right under the h1, two columns from 1001 px. Motion is CSS
   only (a glow drift, the live dot) and stops under reduced motion. */
.has-token #landing, html[data-gk-tab]:not([data-gk-tab="faucet"]):not([data-gk-landing]) #landing, #view:empty { display: none; }
.lp { max-width: 1080px; margin: 0 auto; padding: 8px 16px 40px; overflow-wrap: anywhere; container: lp / inline-size; }
/* the hero headline breaks between words only (anywhere let it fall apart letter by letter beside the mascot) */
#lp-h1 { overflow-wrap: break-word; }
@media (max-width: 1000px) { .lp { padding: 10px 12px calc(var(--bnav-h, 62px) + 24px + env(safe-area-inset-bottom)); } }
.lp-sec { margin: 0 0 22px; }
#landing h1 { margin: 0 0 8px; font-weight: 800; font-size: clamp(25px, 7.4vw, 44px); line-height: 1.12; letter-spacing: -.01em; }
#landing h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; font-size: clamp(18px, 5vw, 24px); line-height: 1.25; }
.lp p { margin: 0 0 12px; }
.lp .lp-invite { display: inline-block; max-width: 100%; margin: 0 0 8px; padding: 4px 10px; border: 1px solid var(--accent); border-radius: 999px; font-size: 13px; overflow-wrap: anywhere; }
.lp .lp-kicker { margin: 0 0 4px; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* hero: a glowing panel; the card sits under the line on a phone, right of it from 1001 px */
#lp-hero { position: relative; isolation: isolate; display: grid; gap: 0 28px; margin: 0 -4px 22px; padding: 18px 14px 14px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, var(--panel2, #111a2e), var(--bg, #05070d) 70%); }
#lp-hero::before { content: ""; position: absolute; z-index: -1; inset: -40% -20% auto auto; width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent); filter: blur(12px); animation: lp-drift 14s ease-in-out infinite alternate; pointer-events: none; }
#lp-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(transparent 31px, color-mix(in srgb, var(--line) 60%, transparent) 32px) 0 0 / 100% 32px,
    linear-gradient(90deg, transparent 31px, color-mix(in srgb, var(--line) 60%, transparent) 32px) 0 0 / 32px 100%;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); }
@keyframes lp-drift { to { transform: translate(-18%, 22%) scale(1.15); } }
.lp-hero-l > p:last-child { color: var(--muted); font-size: clamp(15px, 4vw, 18px); }
.lp-hero-l > p:last-child b { color: #ffe08a; font-weight: 900; text-shadow: 0 0 14px rgba(247, 147, 26, .55); }
.lp-hero-r { min-width: 0; }
/* Two columns only when the landing itself is wide enough (owner 2026-10-16): a container query, so the app's sidebar
   (or none on a content page) is counted — the screen width alone left a 70 px headline column at 1001–1200 px. */
@container lp (min-width: 900px) {
  #lp-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); align-items: center; margin: 0 0 26px; padding: 32px 32px 26px; }
  .lp-hero-l { grid-column: 1; grid-row: 1; }
  .lp-hero-r { grid-column: 2; grid-row: 1 / span 2; }
  #lp-hero .lp-chips { grid-column: 1; grid-row: 2; align-self: start; }
}

/* the sign-up card (RewardJoy / DropBTC): title, one big button, the four ways, the Terms tick, "Sign in" */
.lp-cta { margin: 0 0 12px; }
.lp-cta[data-cta="hero"] { padding: 22px 14px 12px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.lp .lp-cta-t { margin: 0 0 2px; font-weight: 800; font-size: clamp(19px, 5.4vw, 22px); line-height: 1.25; }
.lp .lp-cta-s { color: var(--muted); font-size: 14px; }
.lp .lp-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.lp-btns .btn { display: inline-flex; flex: 1 1 140px; align-items: center; justify-content: center; min-height: 48px; text-align: center; text-decoration: none; font-weight: 700; }
.lp-btns .btn-main { flex-grow: 2; min-height: 54px; font-size: 18px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 26px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: lp-pulse 2.6s ease-out infinite; }
@keyframes lp-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 8px 26px color-mix(in srgb, var(--accent) 35%, transparent); }
  70%, 100% { box-shadow: 0 0 0 12px transparent, 0 8px 26px color-mix(in srgb, var(--accent) 35%, transparent); } }
/* signed out and the Terms box not ticked yet: the buttons stay bright (a dim main button sells less), the box asks instead */
.lp-btns .btn.off, .lp-bar .btn.off { opacity: 1; }
.lp .lp-or { display: flex; align-items: center; gap: 10px; margin: 2px 0 8px; color: var(--muted); font-size: 13px; }
.lp-or::before, .lp-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lp-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.lp-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel2, #111a2e); color: var(--text); font-size: 12px; font-weight: 700; text-decoration: none; transition: border-color .15s, transform .15s; }
.lp-mark:hover { border-color: var(--accent); transform: translateY(-1px); }
.lp-mark-i { display: block; width: 22px; height: 22px; }
.lp-mark-i svg { display: block; width: 100%; height: 100%; }
.lp .lp-agree { display: flex; align-items: center; justify-content: center; text-align: center; gap: 10px; margin: 0 0 8px; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 10px; color: var(--muted); font-size: 14px; }
.lp .lp-agree:has(input:checked) { border-color: transparent; }
.lp-agree input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.lp-agree label { min-width: 0; }
.lp .lp-old { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.lp-old a { display: inline-block; padding: 4px 2px; font-weight: 800; }
.lp .lp-hero-r > .pg-note { margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 13px; text-align: center; }

/* landing motion v2 (landing-fx.js, owner 2026-10-14): a live-wins rail, a beam round the sign-up card, a cursor that
   taps Claim with a ripple, coins into a wallet badge, a jackpot strip with rolling digits and a spinning coin, sections
   rising in. One 4 s loop shared by the cursor, the press, the coins and the badge; transforms / opacity only; paused
   off screen (.lp-fx-off). Under reduced motion the JS adds only the one-line ticker and the jackpot figure. */
@property --lp-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lp-cta[data-cta="hero"] { position: relative; }
/* the 3D mascot: floated right of the h1 (the h1 wraps round it), a warm halo behind, drag to spin */
.lp-mascot { position: relative; float: right; width: clamp(104px, 34vw, 220px); aspect-ratio: 1; margin: -6px -6px 4px 8px; cursor: grab; touch-action: pan-y; }
.lp-mascot:active { cursor: grabbing; }
.lp-mascot::before { content: ""; position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 176, 32, .28), rgba(34, 211, 238, .08) 60%, transparent); }
.lp-mascot::after { content: attr(data-label); position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; color: #ffe08a;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent); font-size: 11px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; pointer-events: none; text-shadow: 0 0 8px rgba(247, 147, 26, .6); }
.lp-mascot canvas, .lp-mascot img { display: block; width: 100%; height: 100%; }
@container lp (min-width: 900px) { .lp-mascot { width: clamp(140px, 20cqi, 220px); margin: -10px 0 4px 16px; } }
/* the mascot follows the Claim button's climb (landing-fx.js, owner 2026-10-15): it shakes and glows near the top, jumps,
   spins and throws coins on the big win — transforms and opacity only */
.lp-mascot.hot { animation: lp-m-shake .16s linear infinite; }
.lp-mascot.hot::before { background: radial-gradient(closest-side, rgba(255, 176, 32, .55), rgba(255, 120, 20, .18) 60%, transparent); }
.lp-mascot.boom { animation: lp-m-jump .9s cubic-bezier(.2, .9, .25, 1.2); }
.lp-mascot.boom::before { animation: lp-m-glow 1.2s ease-out; }
@keyframes lp-m-shake { 25% { transform: translate(1px, -1px) rotate(1deg); } 75% { transform: translate(-1px, 1px) rotate(-1deg); } }
@keyframes lp-m-jump { 0% { transform: none; } 25% { transform: translateY(-18%) scale(1.06); } 50% { transform: translateY(0) scale(1.04, .94); } 70% { transform: translateY(-5%); } 100% { transform: none; } }
@keyframes lp-m-glow { 0% { transform: scale(1); } 30% { transform: scale(1.35); } 100% { transform: scale(1); } }
.lp-mb { position: absolute; left: 50%; top: 45%; pointer-events: none; }
.lp-mb i { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a8, #f7931a 60%, #b85c00);
  color: #5a2d00; font: 900 11px/18px system-ui, sans-serif; font-style: normal; text-align: center; opacity: 0; }
.lp-mascot.boom .lp-mb i { animation: lp-m-coin 1.1s cubic-bezier(.2, .7, .4, 1) both; }
.lp-mb i:nth-child(1) { --x: -70px; --y: -60px; } .lp-mb i:nth-child(2) { --x: 60px; --y: -75px; animation-delay: .04s !important; }
.lp-mb i:nth-child(3) { --x: -90px; --y: 10px; animation-delay: .08s !important; } .lp-mb i:nth-child(4) { --x: 85px; --y: 0px; animation-delay: .02s !important; }
.lp-mb i:nth-child(5) { --x: -30px; --y: -95px; animation-delay: .1s !important; } .lp-mb i:nth-child(6) { --x: 25px; --y: -90px; animation-delay: .06s !important; }
.lp-mb i:nth-child(7) { --x: -55px; --y: 55px; animation-delay: .12s !important; } .lp-mb i:nth-child(8) { --x: 50px; --y: 60px; animation-delay: .09s !important; }
@keyframes lp-m-coin { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 40px)) scale(1) rotate(320deg); } }
@media (prefers-reduced-motion: reduce) { .lp-mascot.hot, .lp-mascot.boom, .lp-mascot.boom::before, .lp-mb i { animation: none !important; } }
.lp-hero-r { clear: both; }
@container lp (min-width: 900px) { .lp-hero-r { clear: none; } }

/* the merged live feed (landing-fx.js): wins + withdrawals newest first, a new row slides in on top, a call to start */
#landing { overflow-x: clip; } /* nothing in the landing ever widens the page sideways */
.lp-pay-off { display: none; }
.lp-feed { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.lp-fr { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--good, #22d3a6) 7%, var(--panel2, #111a2e)), var(--panel2, #111a2e) 60%); }
.lp-fr.paid { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--panel2, #111a2e)), var(--panel2, #111a2e) 60%); }
.lp-fr-i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--panel) 70%, #000); font-size: 15px; }
.lp-fr-t { min-width: 0; font-size: 13.5px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.lp-fr-t b { color: var(--text); font-weight: 800; }
.lp-fr-t em { color: var(--good, #22d3a6); font-style: normal; font-weight: 900; font-variant-numeric: tabular-nums; }
.lp-fr.paid .lp-fr-t em { color: var(--accent); }
.lp-fr-t small { display: block; color: var(--muted); font-size: 11.5px; opacity: .85; }
.lp-fr.in { animation: lp-fr-in .55s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes lp-fr-in { from { opacity: 0; transform: translateY(-14px) scale(.97); box-shadow: 0 0 0 1px var(--good, #22d3a6); } 60% { box-shadow: 0 0 18px color-mix(in srgb, var(--good, #22d3a6) 40%, transparent); } to { opacity: 1; transform: none; } }
.lp-feed-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin: 0 0 12px; font-size: 16px; font-weight: 800; text-decoration: none; text-align: center; }
@media (prefers-reduced-motion: reduce) { .lp-fr.in { animation: none; } }

/* "WIN UP TO 50,000×": one line under the h1 words, climbing 2× … 50,000× then bursting; a button to the free claim */
.lp-win { position: relative; clear: both; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 6px 0 0; padding: 6px 0 2px; color: inherit; text-decoration: none; }
.lp-win-l { color: var(--accent); font-size: clamp(13px, 3.8vw, 18px); font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.lp-win-x { display: inline-block; min-width: 7.2ch; white-space: nowrap; font-size: clamp(38px, 12.5vw, 64px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff6c9, #ffd36b 40%, #f7931a 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(247, 147, 26, .45)); transform-origin: 0 70%; }
.lp-win-n { display: inline; }
.lp-win-n > span { color: inherit; }
.lp-win-s { flex-basis: 100%; margin-top: 4px; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: 0; }
.lp-win:hover .lp-win-s { color: var(--accent); }
.lp-win.tick .lp-win-x { animation: lp-win-tick .22s cubic-bezier(.2, .9, .3, 1.4); }
.lp-win.hot .lp-win-x { filter: drop-shadow(0 0 22px rgba(255, 120, 20, .8)); }
.lp-win.boom .lp-win-x { animation: lp-win-boom .9s cubic-bezier(.2, .9, .25, 1.3) both; }
.lp-win.boom { animation: lp-win-shake .45s ease-out; }
@keyframes lp-win-tick { 50% { transform: scale(1.08); } }
@keyframes lp-win-boom { 0% { transform: scale(1); } 30% { transform: scale(1.22); filter: drop-shadow(0 0 34px rgba(255, 200, 60, 1)); } 100% { transform: scale(1); } }
@keyframes lp-win-shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
.lp-win-b { position: absolute; left: 30%; top: 45%; width: 0; height: 0; pointer-events: none; }
.lp-win-b i { position: absolute; left: -8px; top: -8px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; opacity: 0; color: #fff; font-size: 10px; font-weight: 900; font-style: normal;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), transparent 45%), #f7931a; box-shadow: 0 0 10px rgba(247, 147, 26, .8); }
.lp-win.boom .lp-win-b i { animation: lp-win-coin 1.1s cubic-bezier(.15, .7, .3, 1) both; }
.lp-win-b i:nth-child(1) { --x: -90px; --y: -40px; } .lp-win-b i:nth-child(2) { --x: 70px; --y: -55px; } .lp-win-b i:nth-child(3) { --x: 120px; --y: -10px; } .lp-win-b i:nth-child(4) { --x: -60px; --y: 30px; }
.lp-win-b i:nth-child(5) { --x: 30px; --y: -70px; } .lp-win-b i:nth-child(6) { --x: 150px; --y: 25px; } .lp-win-b i:nth-child(7) { --x: -20px; --y: -60px; } .lp-win-b i:nth-child(8) { --x: 95px; --y: 40px; }
@keyframes lp-win-coin { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(300deg); } }
@media (prefers-reduced-motion: reduce) { .lp-win, .lp-win .lp-win-x, .lp-win-b i { animation: none !important; } }

/* "Unique faucet" (owner 2026-10-15): the real level-0 claim climbs through the Claim × chips INSIDE the main Claim button
   (landing-fx.js) — label on top, the growing coin under it; the h1 line keeps only the sentence for readers and the twin */
.lp-climb { position: relative; margin: 4px 0 2px; color: var(--muted); font-size: 14px; }
.lp-climb.fx { margin: 0; }
.lp-climb.fx .lp-climb-s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* claim pulse under the Claim button: real players of the last hour, the newest claim's age (landing-fx.js) */
.lp .lp-pls { display: flex; align-items: center; justify-content: center; gap: 7px; margin: -4px 0 8px; color: var(--muted); font-size: 12.5px; line-height: 1.35; text-align: center; font-variant-numeric: tabular-nums; }
.lp-pls b { color: var(--text, #fff); font-weight: 800; }
.lp-pls-a { white-space: nowrap; }
.lp .lp-gw { display: grid; gap: 3px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 196, 0, .45);
  background: linear-gradient(135deg, rgba(255, 196, 0, .14), rgba(124, 140, 255, .10)); text-align: center; min-width: 0; overflow-wrap: anywhere; }
.lp-gw-h { font-size: 15px; line-height: 1.3; }
.lp-gw-h em { font-style: normal; color: #ffd34d; font-variant-numeric: tabular-nums; }
.lp-gw small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.lp-gw-f { display: inline; }
.lp-gw-f summary { display: inline; cursor: pointer; text-decoration: underline; }
.lp-gw-f code { display: block; font-size: 10.5px; word-break: break-all; text-align: left; margin-top: 2px; }
.lp-cb.lp-held .lp-cb-v b { font-variant-numeric: tabular-nums; }
.lp-btns .btn-main.lp-cb { flex-direction: column; gap: 3px; min-height: 66px; padding-block: 8px; line-height: 1.1; }
.lp-cb-t { display: block; }
.lp-cb-v { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; padding: 3px 10px 3px 6px;
  border-radius: 999px; background: rgba(20, 10, 0, .82); box-shadow: 0 0 0 1px rgba(255, 224, 138, .35) inset, 0 2px 8px rgba(0, 0, 0, .25);
  white-space: nowrap; font-size: clamp(12px, 4vw, 15px); font-weight: 900; letter-spacing: 0; transform-origin: 50% 50%; }
.lp-cb-k { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: #f7931a; color: #1a1000; font-size: .8em; }
.lp-cb-n { font-variant-numeric: tabular-nums; letter-spacing: -.02em; background: linear-gradient(180deg, #fff, #ffe08a 50%, #ffb43a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-cb-v i { color: #ffd36b; font-size: .78em; font-style: normal; font-weight: 800; letter-spacing: .05em; }
.lp-cb-v em { min-width: 4.4ch; padding: 1px 5px; border-radius: 5px; background: linear-gradient(180deg, #ffe08a, #f7931a); color: #1a1000; font-size: .8em; font-style: normal; text-align: center; font-variant-numeric: tabular-nums; }
.lp-cb.tick .lp-cb-v { animation: lp-win-tick .24s cubic-bezier(.2, .9, .3, 1.4); }
.lp-cb.tick .lp-cb-v em { animation: lp-win-tick .24s cubic-bezier(.2, .9, .3, 1.7); }
.lp-cb.hot .lp-cb-v { box-shadow: 0 0 0 1px rgba(255, 224, 138, .8) inset, 0 0 14px rgba(255, 140, 30, .7); }
.lp-cb.hot .lp-cb-k { animation: lp-cb-spin .5s linear infinite; }
.lp-cb.boom .lp-cb-v { animation: lp-cb-boom .9s cubic-bezier(.2, .9, .25, 1.3) both; }
.lp-cb.boom { filter: brightness(1.12); }
@keyframes lp-cb-boom { 0% { transform: scale(1); } 30% { transform: scale(1.14); box-shadow: 0 0 0 1px #ffe08a inset, 0 0 24px rgba(255, 200, 60, 1); } 100% { transform: scale(1); } }
@keyframes lp-cb-spin { to { transform: rotateY(360deg); } }
/* a phone: the h1 line repeats the stat tiles (timer, paid out) — hidden for page length (D8) */
@media (max-width: 699px) { #lp-hero .lp-climb.fx ~ p:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) { .lp-cb .lp-cb-v, .lp-cb .lp-cb-v em, .lp-cb .lp-cb-k { animation: none !important; } }

/* calm: the one-line ticker */
.lp-tick { display: flex; align-items: center; gap: 8px; min-height: 34px; margin: 0 0 16px; padding: 6px 12px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--good, #22d3a6) 35%, var(--line)); border-radius: 17px; background: color-mix(in srgb, var(--panel) 80%, transparent); font-size: 12.5px; line-height: 1.3; }
.lp-tick[hidden], .lp-rail[hidden], .lp-jp[hidden] { display: none; }
.lp-tick-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good, #22d3a6); box-shadow: 0 0 0 0 var(--good, #22d3a6); animation: lp-live 1.8s ease-out infinite; }
.lp-tick-t { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.lp-tick-t b { color: var(--text); font-weight: 800; }
.lp-tick-t em { color: var(--accent); font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-tick-t i { font-style: normal; opacity: .7; }
@media (max-width: 459px) { .lp-tick-t i { display: none; } }
@media (max-width: 339px) { .lp-tick { gap: 6px; padding: 5px 10px; font-size: 11.5px; } }
/* the live-wins rail (Stake / BC.Game): a label, then win cards gliding left forever, faded at both edges */
.lp-rail { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; min-width: 0; }
.lp-rail-h { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--good, #22d3a6); font-size: 10px; font-weight: 900; letter-spacing: .1em; writing-mode: horizontal-tb; line-height: 1.1; max-width: 46px; }
.lp-rail-v { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp-rail-t { display: flex; gap: 8px; width: max-content; margin: 0; padding: 2px 0; list-style: none; animation: lp-rail calc(var(--n, 10) * 3.4s) linear infinite; }
.lp-rail-v:hover .lp-rail-t { animation-play-state: paused; }
@keyframes lp-rail { to { transform: translateX(calc(-50% - 4px)); } }
.lp-wc { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel2, #111a2e) 92%, #fff 3%), var(--panel)); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.lp-wc.jp { border-color: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); }
.lp-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 900;
  background: linear-gradient(135deg, hsl(var(--h) 80% 58%), hsl(calc(var(--h) + 50) 75% 40%)); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .3); }
.lp-wc-t { display: flex; flex-direction: column; line-height: 1.15; }
.lp-wc-t b { color: var(--text); font-size: 12px; font-weight: 800; }
.lp-wc-t small { color: var(--muted); font-size: 10.5px; }
.lp-wc em { color: var(--accent); font-style: normal; font-size: 12.5px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }
/* the beam: a bright arc running round the card's border (a conic gradient masked to the 1.5 px edge) */
.lp-beam::before { content: ""; position: absolute; inset: -1px; z-index: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--lp-a), transparent 0 70%, color-mix(in srgb, var(--accent) 30%, transparent) 78%, #ffe08a 88%, #fff 90%, transparent 92%);
  -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 exclude, linear-gradient(#000 0 0);
  animation: lp-beam 5s linear infinite; }
@keyframes lp-beam { to { --lp-a: 360deg; } }
.lp-beam > * { position: relative; z-index: 1; }
.lp-beam > .lp-coins { position: absolute; z-index: 3; }
.lp-beam > .lp-wal { position: absolute; }
/* the wallet badge on the card's top border; bumps and shows "+₿" when the coins land */
.lp-wal { position: absolute; z-index: 2; top: -12px; right: 14px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 7px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: var(--panel2, #111a2e); color: var(--accent); font-size: 11px; font-weight: 800; line-height: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4); animation: lp-wal 4s ease-out infinite; }
.lp-wal-i { font-size: 13px; }
.lp-wal-p { position: absolute; right: 6px; top: -14px; color: #ffd36b; font-size: 12px; font-weight: 900; opacity: 0; animation: lp-walp 4s ease-out infinite; text-shadow: 0 0 8px rgba(247, 147, 26, .8); }
@keyframes lp-wal { 0%, 46% { transform: none; } 52% { transform: scale(1.16); box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 75%, transparent); } 62%, 100% { transform: none; } }
@keyframes lp-walp { 0%, 48% { opacity: 0; transform: translateY(6px); } 54% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; transform: translateY(-8px); } }
/* the cursor glides in, taps Claim (ripple + press), leaves */
.lp-cta .lp-btns { position: relative; }
.lp-cur { position: absolute; z-index: 4; left: 58%; top: 52%; width: 26px; height: 26px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); animation: lp-cur 4s cubic-bezier(.45, 0, .2, 1) infinite; }
.lp-cur svg { display: block; }
.lp-rip { position: absolute; left: -16px; top: -16px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); opacity: 0; animation: lp-rip 4s ease-out infinite; }
@keyframes lp-cur { 0%, 4% { transform: translate(60px, 50px); opacity: 0; } 10% { opacity: 1; } 18% { transform: translate(0, 0); } 20% { transform: translate(0, 0) scale(.82); } 24% { transform: translate(0, 0); }
  56% { transform: translate(0, 0); opacity: 1; } 66%, 100% { transform: translate(50px, 46px); opacity: 0; } }
@keyframes lp-rip { 0%, 19% { opacity: 0; transform: scale(.3); } 21% { opacity: 1; } 34%, 100% { opacity: 0; transform: scale(1.6); } }
.lp-cta:has(.lp-cur) .lp-btns .btn-main { animation: lp-pulse 2.6s ease-out infinite, lp-press 4s ease-in-out infinite; }
@keyframes lp-press { 0%, 18% { transform: none; } 20.5% { transform: scale(.955); } 26%, 100% { transform: none; } }
.lp-touched .lp-cur { display: none; }
/* five coins on a ballistic arc (x linear, y eased) from the button to the badge */
.lp-coins { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.lp-coins i { position: absolute; left: -9px; top: -9px; animation: lp-coin-x 4s linear infinite; }
.lp-coins b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; opacity: 0; color: #fff; font-size: 11px; font-weight: 900; font-style: normal;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), transparent 45%), #f7931a; box-shadow: 0 0 12px rgba(247, 147, 26, .8); animation: lp-coin-y 4s linear infinite; }
.lp-coins i:nth-child(2), .lp-coins i:nth-child(2) b { animation-delay: .08s; }
.lp-coins i:nth-child(3), .lp-coins i:nth-child(3) b { animation-delay: .16s; }
.lp-coins i:nth-child(4), .lp-coins i:nth-child(4) b { animation-delay: .24s; }
.lp-coins i:nth-child(5), .lp-coins i:nth-child(5) b { animation-delay: .32s; }
@keyframes lp-coin-x { 0%, 22% { transform: translateX(0); } 47%, 100% { transform: translateX(var(--dx, 0)); } }
@keyframes lp-coin-y { 0%, 21% { transform: translateY(0) scale(.4); opacity: 0; } 23% { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.12, .8, .3, 1); }
  46% { transform: translateY(var(--dy, 0)) scale(.7) rotate(240deg); opacity: 1; } 49%, 100% { transform: translateY(var(--dy, 0)) scale(.3); opacity: 0; } }
/* a shine across every main button */
.lp-cta[data-cta] .btn-main { position: relative; overflow: hidden; }
.lp-cta[data-cta] .btn-main::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); animation: lp-shine 4s ease-in-out infinite; }
@keyframes lp-shine { 0%, 55% { transform: translateX(-120%); } 78%, 100% { transform: translateX(120%); } }
/* the jackpot strip: a spinning gold coin, the pool in rolling digits, the way to win it */
.lp-jp { position: relative; display: flex; align-items: center; gap: 12px; margin: 10px 0 0; padding: 10px 12px; overflow: hidden; color: var(--text); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 16px;
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), linear-gradient(150deg, var(--panel2, #111a2e), var(--panel)); }
.lp-jp::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%); background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%); animation: lp-shine 5s ease-in-out infinite 1s; }
.lp-coin3d { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #7a3e00; font-size: 24px; font-weight: 900;
  background: radial-gradient(circle at 32% 28%, #fff6c9, #ffd36b 30%, #f7931a 62%, #b35c00); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 255, 255, .6), 0 0 18px rgba(247, 147, 26, .55);
  animation: lp-spin 3.6s ease-in-out infinite; }
.lp-coin3d b { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
@keyframes lp-spin { 0%, 40% { transform: perspective(200px) rotateY(0); } 70% { transform: perspective(200px) rotateY(180deg) scale(1.05); } 100% { transform: perspective(200px) rotateY(360deg); } }
.lp-jp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lp-jp-t small { color: var(--accent); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.lp-jp-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; color: #ffe08a; font-weight: 900; font-size: clamp(17px, 5.4vw, 24px); line-height: 1.15; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px rgba(247, 147, 26, .55); }
.lp-jp-u { font-size: .6em; color: var(--accent); }
.lp-jp-s { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.lp-jp-go { flex: none; color: var(--accent); font-size: 28px; font-weight: 300; line-height: 1; animation: lp-nudge 1.6s ease-in-out infinite; }
@keyframes lp-nudge { 50% { transform: translateX(4px); } }
.lp-od { display: inline-flex; }
.od-d { display: inline-block; height: 1.15em; overflow: hidden; }
.od-d > span { display: flex; flex-direction: column; transition: transform 1.1s cubic-bezier(.2, .9, .25, 1); }
.od-d i { display: block; height: 1.15em; font-style: normal; text-align: center; }
/* sections under the hero rise in once; their cards follow one by one (only when the JS adds .lp-rv) */
.lp-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .9, .25, 1); }
.lp-rv.in { opacity: 1; transform: none; }
.lp-rv :is(.lp-ways, .lp-games, .lp-pay, .lp-pools) > li { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .25, 1); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.lp-rv.in :is(.lp-ways, .lp-games, .lp-pay, .lp-pools) > li { opacity: 1; transform: none; }
.lp-fx-off :is(.lp-cur, .lp-rip, .lp-coins i, .lp-coins b, .lp-wal, .lp-wal-p, .btn-main, .btn-main::after, .lp-tick-dot, .lp-rail-t, .lp-coin3d, .lp-jp-go, .lp-jp::after), .lp-fx-off.lp-beam::before, .lp-fx-off .lp-beam::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lp-cta[data-cta] .btn-main::after, .lp-tick-dot, .lp-coin3d, .lp-jp-go, .lp-jp::after { animation: none; } .od-d > span { transition: none; } }

/* live stats (DropBTC's three numbers): centred tiles, an accent line on top, the figure in the accent colour, a label
   under; one row of three on a phone with the coin tile a little wider; a coin figure breaks only at its unit (2026-10-14) */
.lp-chips, .lp-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.lp-pools { grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); }
.lp-chips li, .lp-pools li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 10px 8px 8px;
  overflow: hidden; text-align: center; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--panel)), color-mix(in srgb, var(--panel) 85%, transparent)); }
.lp-chips li::before, .lp-pools li::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.lp-chips b, .lp-pools b { max-width: 100%; color: var(--accent); font-weight: 800; font-size: clamp(16px, 4.6vw, 20px); line-height: 1.2; font-variant-numeric: tabular-nums;
  overflow-wrap: normal; word-break: keep-all; text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.lp-chips li > span, .lp-pools li > span { color: var(--muted); font-size: 13px; line-height: 1.25; }
@media (max-width: 699px) {
  #lp-hero .lp-chips { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
  #lp-hero .lp-chips:has(> li:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); }
  #lp-hero .lp-chips li { padding: 9px 4px 7px; }
  #lp-hero .lp-chips b { font-size: clamp(14px, 4.6vw, 18px); letter-spacing: -.03em; }
  #lp-hero .lp-chips li:last-child b { font-size: clamp(11px, 3.3vw, 14px); }
  #lp-hero .lp-chips li > span { font-size: 11px; }
}

/* live payouts (Stake / BC.Game): a card, a pulsing dot by the heading, one row per payout */
#lp-proof { padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
#lp-proof h2::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--good, #22d3a6); box-shadow: 0 0 0 0 var(--good, #22d3a6); animation: lp-live 1.8s ease-out infinite; }
@keyframes lp-live { 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
#lp-proof > p { margin: 0; color: var(--muted); font-size: 14px; }
.lp-pay, .lp-games, .lp-foot-nav, .lp-ways { margin: 0 0 12px; padding: 0; list-style: none; }
.lp-pay li { position: relative; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--line); font-size: 14px; }
.lp-pay li::before { content: ""; position: absolute; left: 0; top: 11px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6, transparent 45%), var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }
.lp-pay li > span:first-child { color: var(--good, #22d3a6); font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-pay time { color: var(--muted); }

/* ways to earn (DropBTC features / Stake categories): a card per part, the whole card opens it */
.lp-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; }
.lp-ways li { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel) 60%); transition: border-color .15s, transform .15s; }
.lp-ways li:hover { border-color: var(--accent); transform: translateY(-2px); }
.lp .lp-ni { width: 30px; height: 30px; padding: 5px; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-ways a { color: var(--muted); font-size: 13px; line-height: 1.4; text-decoration: none; }
.lp-ways a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lp-ways strong { display: block; margin: 0 0 2px; color: var(--text); font-size: 16px; }
@media (min-width: 700px) { .lp-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the cards' motion (owner 2026-10-14: each part looks different): every icon moves its own way and the faucet / mine
   cards fill a level bar; one loop each, transforms only, paused under reduced motion. landing-fx.js slides the phone row. */
.lp-ways li[data-w] .lp-ni { animation: 3.2s ease-in-out infinite; }
.lp-ways li[data-w="faucet"] .lp-ni { animation-name: lp-drip; }
.lp-ways li[data-w="mine"] .lp-ni { animation-name: lp-swing; transform-origin: 70% 70%; }
.lp-ways li[data-w="games"] .lp-ni { animation-name: lp-roll; }
.lp-ways li[data-w="slots"] .lp-ni { animation-name: lp-spin-y; }
.lp-ways li[data-w="lottery"] .lp-ni { animation-name: lp-hop; }
.lp-ways li[data-w="quests"] .lp-ni { animation-name: lp-tickle; }
@keyframes lp-drip { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(3px) scaleY(.9); } 80% { transform: translateY(-2px); } }
@keyframes lp-swing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-22deg); } 25% { transform: rotate(8deg); } 35% { transform: rotate(0); } }
@keyframes lp-roll { 0%, 55% { transform: none; } 75% { transform: rotate(180deg) scale(.9); } 100% { transform: rotate(360deg); } }
@keyframes lp-spin-y { 0%, 50% { transform: none; } 75% { transform: rotateX(180deg); } 100% { transform: rotateX(360deg); } }
@keyframes lp-hop { 0%, 50%, 100% { transform: none; } 62% { transform: translateY(-6px) rotate(-6deg); } 74% { transform: translateY(0) scale(1.06, .94); } }
@keyframes lp-tickle { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.15) rotate(8deg); } 86% { transform: scale(1); } }
.lp-ways li[data-w="faucet"]::before, .lp-ways li[data-w="mine"]::before { content: ""; order: 9; display: block; height: 4px; margin-top: auto; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), #ffd36b) 0 0 / 0% 100% no-repeat, color-mix(in srgb, var(--accent) 14%, transparent); animation: lp-fill 4.8s ease-in-out infinite; }
.lp-ways li[data-w="mine"]::before { background-image: linear-gradient(90deg, #22d3a6, #7fe3d8); animation-duration: 3.6s; }
@keyframes lp-fill { 0% { background-size: 0% 100%; } 80% { background-size: 100% 100%; } 90%, 100% { background-size: 100% 100%; filter: brightness(1.5); } }
@media (prefers-reduced-motion: reduce) { .lp-ways li[data-w] .lp-ni, .lp-ways li[data-w]::before { animation: none; } }

/* the four tabs */
.lp-tabs .seg button { min-height: 40px; font-size: 14px; }
.lp-panel-h { display: none; }
@media (scripting: none) { .lp-tabs .seg { display: none; } .lp-panel[hidden] { display: block; } .lp-panel-h { display: block; } }
.lp summary { min-height: 28px; cursor: pointer; font-weight: 700; }
.lp details[open] > summary { margin-bottom: 8px; }

/* games strip (Stake tiles): a gradient per game and its glyph */
.lp-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); gap: 8px; }
.lp-games li { --g1: #ff8a00; --g2: #5b2a00; }
.lp-games li[data-g="crash"] { --g1: #22d3a6; --g2: #063b33; }
.lp-games li[data-g="plinko"] { --g1: #a66bff; --g2: #2a0f55; }
.lp-games li[data-g="mines"] { --g1: #3fa9ff; --g2: #0a2c4f; }
.lp-games li[data-g="limbo"] { --g1: #ff5d8f; --g2: #4d0c22; }
.lp-games li[data-g="keno"] { --g1: #ffd23f; --g2: #4a3a00; }
.lp-games a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 84px; padding: 8px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--g1) 45%, transparent); border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--g1) 55%, transparent), var(--g2));
  color: #fff; font-weight: 800; text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); transition: transform .15s; }
.lp-games a:hover { transform: translateY(-2px); }
.lp-games a::before { position: absolute; top: 8px; font-size: 30px; line-height: 1; opacity: .9; content: "⚄"; }
.lp-games li[data-g="crash"] a::before { content: "↗"; }
.lp-games li[data-g="plinko"] a::before { content: "◉"; }
.lp-games li[data-g="mines"] a::before { content: "◆"; }
.lp-games li[data-g="limbo"] a::before { content: "▲"; }
.lp-games li[data-g="keno"] a::before { content: "▦"; }
@media (min-width: 700px) { .lp-games { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* a phone: the cards and the game tiles are sideways rows (Stake), one row tall, snapping card by card */
@media (max-width: 699px) {
  .lp-ways, .lp-games { display: flex; gap: 8px; margin: 0 -12px 12px; padding: 0 12px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .lp-ways::-webkit-scrollbar, .lp-games::-webkit-scrollbar { display: none; }
  .lp-ways li { flex: 0 0 150px; scroll-snap-align: start; }
  .lp-games li { flex: 0 0 min(92px, 30%); scroll-snap-align: start; }
  .lp-games a { min-height: 76px; }
}

/* final banner (BC.Game): glow, big title, big button */
.lp-cta[data-cta="final"] { position: relative; isolation: isolate; overflow: hidden; padding: 20px 16px 10px; border: 1px solid var(--accent); border-radius: 20px;
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%), linear-gradient(150deg, var(--panel2, #111a2e), var(--panel)); }
.lp-cta[data-cta="final"] .lp-cta-t { font-size: clamp(20px, 5.6vw, 30px); }
@media (min-width: 1001px) { .lp-cta[data-cta="final"] { padding: 28px 28px 16px; } .lp-cta[data-cta="final"] .lp-btns { max-width: 520px; } }

/* the phone's sign-up bar: fixed above the bottom nav (app.js shows it once the cards are off screen) */
.lp-bar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(var(--bnav-h, 62px) + 10px + env(safe-area-inset-bottom)); }
.lp-bar[hidden], .has-token .lp-bar { display: none; }
.lp-bar .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; font-size: 17px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
@media (min-width: 1001px) { .lp-bar { display: none; } }

@media (max-width: 339px) {
  .lp-sec { margin-bottom: 14px; }
  /* the h1 line and "Sign in" (the top bar has it) give way to the card on a Fold cover */
  .lp-hero-l > p:last-child, .lp .lp-old { display: none; }
  .lp .lp-cta-t { font-size: 17px; }
  .lp-ways a { font-size: 12px; }
  .lp-pools { grid-template-columns: 1fr; gap: 6px; }
  .lp-pools li { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; padding: 6px 10px; }
  .lp-pools b { font-size: 14px; }
  .lp-cta[data-cta="final"] .lp-cta-t { font-size: 18px; }
  #lp-hero { padding: 14px 10px 10px; }
  .lp-cta[data-cta="hero"] { padding: 12px 10px 10px; }
  #landing h1 { font-size: 23px; }
  .lp-mark-l { display: none; }
  .lp .lp-kicker { display: none; }
  #lp-proof { padding: 12px 10px; }
  .lp-cta[data-cta="final"] { padding: 14px 10px 4px; }
  .lp .lp-agree { font-size: 13px; }
  .lp-foot-nav a { min-height: 28px; padding: 2px 7px; font-size: 13px; }
  .lp-mark { min-height: 44px; }
  .lp .lp-agree { padding: 6px 8px; }
}
.lp-foot { padding: 14px 0 0; border-top: 1px solid var(--line); }
.lp-foot-nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 -8px 8px; }
.lp-foot-nav a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 8px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.lp-foot-nav a:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { #lp-hero::before, .lp-btns .btn-main, #lp-proof h2::before { animation: none; } .lp-ways li, .lp-mark, .lp-games a { transition: none; } }

/* The demo round on a game page (D30, web/demo.js): its box keeps its size before the script fills it, so nothing moves. */
.pg-demo { margin: 0 0 12px; padding: 14px; min-height: 230px; box-sizing: border-box; background: var(--panel); border: 1px dashed var(--accent); border-radius: var(--radius); overflow-wrap: anywhere; }
.pg-demo-l { margin: 0 0 8px; font-weight: 800; color: var(--accent); }
.pg-demo-out { min-height: 44px; margin: 0 0 10px; }
.pg-demo .pg-btn { min-height: 44px; max-width: 100%; box-sizing: border-box; }
.pg-demo-cta { margin: 10px 0 0; }
.pg-demo-details { margin: 10px 0 0; }
.pg-demo-details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
/* pre-line, not pre-wrap: a space where a line wraps is dropped instead of hanging past the box (a 2 px spill at 344 px) */
.pg-demo-seeds { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; font-size: 12px; }

/* the /economy bars: a fill meter, the split of the house edge and its colour swatch (whole at 280 px) */
.pg-meter { display: block; width: 100%; max-width: 100%; height: 10px; margin: 4px 0 8px; border: 0; border-radius: 5px; background: var(--line); accent-color: var(--accent, #f7931a); overflow: hidden; }
.pg-meter::-webkit-meter-bar { background: var(--line); border: 0; border-radius: 5px; height: 10px; }
.pg-meter::-webkit-meter-optimum-value, .pg-meter::-webkit-meter-suboptimum-value, .pg-meter::-webkit-meter-even-less-good-value { background: var(--accent, #f7931a); border-radius: 5px; }
.pg-meter::-moz-meter-bar { background: var(--accent, #f7931a); border-radius: 5px; }
.pg-stack { display: block; width: 100%; max-width: 100%; height: 14px; margin: 4px 0 10px; border-radius: 7px; overflow: hidden; }
.pg-swatch { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 6px; vertical-align: baseline; }
/* ?embed=1 (pages.js): the verifier inside the app's popup — the tool alone */
.pg-embed .pg-top, .pg-embed .pg-crumbs, .pg-embed .pg-sec, .pg-embed .pg-cta, .pg-embed .pg-foot, .pg-embed .pg-main > h1 { display: none; }
.pg-embed .pg-main { padding: 0; }
.pg-embed .pg-tool { margin: 0; }