/* ELIXIR: THE LANDING PAGE round the game (desktop): a sticky header, the hero (the pitch on the left, the game in its gold frame,
   the live rail on the right, all over the painted kingdom), then the sections (the game, three ways to play, the live board, the
   trailer, the pot, questions) and the footer. Quiet and exact: Geist for words, Geist Mono for every number, Lilita One only for
   headlines; one accent (gold), hairlines, soft depth; blur only on the header. The original's chunky look stays INSIDE the game's
   frame and its popups. Phones: the game is the whole screen (app mode) and the sections are not shown. */
:root {
  --bar: 72px;
  --lp-bg: #070d22; --lp-bg2: #091127; --lp-card: #0d1735; --lp-card2: #111d42;
  --lp-line: rgba(160, 185, 255, 0.12); --lp-line2: rgba(160, 185, 255, 0.22);
  --lp-ink: #f3f6ff; --lp-ink2: #b8c4e4; --lp-ink3: #7d8ab2;
  --lp-gold: #ffcf4a; --lp-gold2: #ffb21a; --lp-green: #62dc3e;
  --f-ui: 'Geist', 'Signika', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-num: 'Geist Mono', 'Reddit Mono', ui-monospace, monospace;
  --lp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lp-gold-grad: linear-gradient(180deg, #ffe680 0%, #ffcf3a 50%, #ffb21a 100%);
}
html { scroll-behavior: smooth; background: var(--lp-bg); }
body { overflow-x: hidden; overflow-y: auto; background: var(--lp-bg); font-family: var(--f-ui); }
body.is-duel { overflow: hidden; }
::selection { background: rgba(255, 207, 74, 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- the header */
.bar { position: sticky; top: 0; z-index: 20; height: var(--bar); display: flex; align-items: center; gap: 30px; padding: 0 max(32px, calc((100vw - 1800px) / 2));
  background: rgba(7, 13, 34, 0.74); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--lp-line); }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.medal { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none;
  background: radial-gradient(circle at 50% 30%, #4f9bff 0%, #2560cc 55%, #133a86 100%); box-shadow: 0 0 0 2px #f2c53d, 0 0 0 4px rgba(7, 13, 34, 0.9), 0 8px 20px rgba(0, 0, 0, 0.35); }
.medal.sm { width: 40px; height: 40px; }
.mark { width: 34px; height: 34px; display: block; }
.mark canvas { display: none; }
.mark-img, img.mark { width: 34px; height: 34px; display: block; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.medal.sm .mark-img { width: 30px; height: 30px; }
.logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.word { position: relative; display: block; font: 400 28px/1 var(--f-d); letter-spacing: 0.02em; color: #ffc42e; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); white-space: nowrap; }
.word::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: transparent; text-shadow: none; pointer-events: none; background: linear-gradient(180deg, #fff7d1 0%, #ffd23f 55%, #ffa514 100%); -webkit-background-clip: text; background-clip: text; }
.links { display: flex; gap: 2px; }
.lnk { font: 500 14.5px/1 var(--f-ui); color: var(--lp-ink2); padding: 10px 12px; border-radius: 9px; transition: color 0.15s, background 0.15s; white-space: nowrap; }
.lnk:hover { color: var(--lp-ink); background: rgba(255, 255, 255, 0.06); }
.bar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-line); font: 500 13px/1 var(--f-num); color: var(--lp-ink2); white-space: nowrap; }
.chip.live b { color: var(--lp-ink); font-weight: 600; min-width: 1ch; text-align: right; }
.chip .dot { width: 7px; height: 7px; border: 0; background: var(--lp-green); box-shadow: 0 0 0 3px rgba(98, 220, 62, 0.18); }
.ca-pill { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 4px 0 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-line); max-width: 520px; min-width: 0; }
.ca-pill.is-live { border-color: rgba(255, 207, 74, 0.45); background: rgba(255, 207, 74, 0.06); }
.ca-lab { display: flex; align-items: baseline; gap: 6px; flex: none; }
.ca-lab b { font: 600 13px/1 var(--f-num); color: var(--lp-gold); }
.ca-lab i { font: 500 10.5px/1 var(--f-num); font-style: normal; letter-spacing: 0.14em; color: var(--lp-ink3); }
.ca-addr { display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 4px 0 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); font: 500 12.5px/1 var(--f-num); color: var(--lp-ink); cursor: copy; user-select: text; -webkit-user-select: text; }
.ca-addr:disabled { cursor: default; color: var(--lp-ink3); font: 500 12.5px/1 var(--f-ui); padding-right: 13px; }
.ca-addr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copy { flex: none; font: 600 12px/1 var(--f-ui); font-style: normal; padding: 7px 12px; border-radius: 999px; color: #2a1700; background: var(--lp-gold-grad); }
.ca-link { flex: none; font: 600 12px/1 var(--f-ui); padding: 9px 12px; border-radius: 999px; color: var(--lp-ink); background: rgba(255, 255, 255, 0.08); white-space: nowrap; }
.ca-link:hover { background: rgba(255, 255, 255, 0.14); }
.menu-btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 14px; border-radius: 999px; cursor: pointer; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--lp-line2); font: 600 14px/1 var(--f-ui); color: var(--lp-ink); transition: background 0.15s; }
.menu-btn:hover { background: rgba(255, 255, 255, 0.11); }
.menu-btn kbd { height: 20px; min-width: 0; padding: 0 6px; border-radius: 6px; font: 500 10.5px/1 var(--f-num); letter-spacing: 0; color: var(--lp-ink3); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--lp-line); }
.burger { position: relative; width: 16px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }

/* the app stores (coming soon) */
.store { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 11px; border-radius: 11px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--lp-line2); color: #fff; white-space: nowrap; cursor: default; }
.store svg { width: 20px; height: 20px; flex: none; }
.store > span { display: flex; flex-direction: column; gap: 3px; }
.store em { font: 500 8.5px/1 var(--f-num); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-gold); }
.store b { font: 600 14px/1 var(--f-ui); letter-spacing: -0.01em; color: #fff; }
/* PLAY NOW opens the game in the middle: the pitch and the rail step aside (the emotes stay in a duel) */
.focus-x { display: none; position: absolute; left: max(40px, calc((100vw - 1800px) / 2)); top: 22px; z-index: 2; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 8px; border-radius: 999px;
  background: rgba(9, 17, 44, 0.82); border: 1px solid var(--lp-line2); font: 600 14px/1 var(--f-ui); color: var(--lp-ink); transition: background 0.15s; }
.focus-x:hover { background: rgba(20, 32, 70, 0.92); }
.focus-x i { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; background: rgba(255, 255, 255, 0.1); }
body.is-focus { overflow: hidden; }
body.is-focus .stage { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
body.is-focus .col-l, body.is-focus .scroll-cue { visibility: hidden; }
body.is-focus .col-r { justify-self: start; width: 100%; max-width: 360px; }
body.is-focus .col-r > :not(#p-emote) { display: none; }
body.is-focus .focus-x { display: inline-flex; }
body.is-focus .hero-bg::after { background: radial-gradient(640px 680px at 50% 50%, rgba(255, 196, 60, 0.14), rgba(255, 196, 60, 0) 70%), rgba(7, 13, 34, 0.78); }

/* ---------------------------------------------------------------- the hero: the pitch, the game, the live rail, over the kingdom */
.stage { position: relative; height: calc(100vh - var(--bar)); min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 360px); grid-template-rows: minmax(0, 1fr);
  align-items: center; gap: 0 56px; padding: 18px max(40px, calc((100vw - 1800px) / 2)); isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: url(/art/ui/backdrop.webp) center 34% / cover no-repeat; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(560px 600px at 64% 50%, rgba(255, 196, 60, 0.16), rgba(255, 196, 60, 0) 70%),
  linear-gradient(90deg, rgba(7, 13, 34, 0.97) 0%, rgba(7, 13, 34, 0.88) 28%, rgba(7, 13, 34, 0.5) 50%, rgba(7, 13, 34, 0.42) 66%, rgba(7, 13, 34, 0.86) 84%, rgba(7, 13, 34, 0.95) 100%),
  linear-gradient(180deg, rgba(7, 13, 34, 0.5) 0%, rgba(7, 13, 34, 0) 24%, rgba(7, 13, 34, 0) 72%, var(--lp-bg) 100%); }
.col { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.col-c { align-items: center; }
.col-l { gap: 36px; padding-right: 8px; }
.col-r { gap: 12px; overflow: hidden; }
.hero-copy { max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--f-num); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-gold); padding: 9px 15px; border-radius: 999px; background: rgba(255, 207, 74, 0.07); border: 1px solid rgba(255, 207, 74, 0.24); }
.eyebrow .dot { width: 7px; height: 7px; border: 0; background: var(--lp-green); box-shadow: 0 0 0 3px rgba(98, 220, 62, 0.18); }
.h1 { margin-top: 24px; font: 400 clamp(54px, 4.9vw, 94px)/0.97 var(--f-d); letter-spacing: 0.004em; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.22), 0 18px 50px rgba(0, 0, 0, 0.45); }
.h1 em { font-style: normal; display: inline-block; padding-bottom: 0.06em; color: transparent; text-shadow: none; background: linear-gradient(180deg, #fff3c4 0%, #ffd23f 50%, #ff9f1a 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.22)); }
.lede { margin-top: 22px; max-width: 33em; font: 400 19px/1.6 var(--f-ui); color: var(--lp-ink2); }
.cta-row { margin-top: 34px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cta { height: 62px; padding: 0 36px; border-radius: 15px; font: 400 25px/1 var(--f-d); letter-spacing: 0.02em; color: #2a1700; background: var(--lp-gold-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 rgba(170, 90, 0, 0.32), 0 12px 32px rgba(255, 180, 30, 0.3), 0 2px 0 rgba(0, 0, 0, 0.3); transition: transform 0.14s var(--lp-ease), box-shadow 0.14s; }
.cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -3px 0 rgba(170, 90, 0, 0.32), 0 18px 40px rgba(255, 180, 30, 0.42), 0 2px 0 rgba(0, 0, 0, 0.3); }
.cta:active { transform: translateY(1px); }
.cta2 { height: 62px; display: inline-flex; align-items: center; gap: 13px; padding: 0 22px 0 11px; border-radius: 15px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--lp-line2); font: 600 15.5px/1 var(--f-ui); color: var(--lp-ink); transition: background 0.15s, border-color 0.15s; }
.cta2:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.3); }
.cta2 em { font: 500 13px/1 var(--f-num); font-style: normal; color: var(--lp-ink3); }
.play-ic { position: relative; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); flex: none; }
.play-ic::after { content: ''; position: absolute; left: 16px; top: 13px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.trust { margin-top: 26px; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.trust li { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1 var(--f-ui); color: var(--lp-ink2); }
.trust li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; flex: none; background: rgba(98, 220, 62, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.8' fill='none' stroke='%2362dc3e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* the pot, as one band of numbers */
.plaque { max-width: 640px; display: grid; grid-template-columns: 1.35fr 1fr 1fr 0.8fr; border-radius: 18px; overflow: hidden; background: rgba(9, 17, 44, 0.74); border: 1px solid var(--lp-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.35); }
.pq { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 18px 17px; border-right: 1px solid var(--lp-line); }
.pq:nth-child(4) { border-right: 0; }
.plaque .lbl, .col-r .lbl { font: 500 10.5px/1 var(--f-num); letter-spacing: 0.15em; text-transform: uppercase; color: var(--lp-ink3); text-shadow: none; }
.pq b { font: 600 22px/1 var(--f-num); letter-spacing: -0.02em; color: var(--lp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pq-pot b { font-size: 28px; color: var(--lp-gold); }
.pq-rule { grid-column: 1 / -1; padding: 12px 18px; border-top: 1px solid var(--lp-line); font: 400 13px/1.4 var(--f-ui); color: var(--lp-ink3); }
#pq-pot::after, #pq-max::after, #pq-paid::after, #ec-bal::after, #ec-pays::after, .sol::after { content: 'SOL'; margin-left: 0.34em; font-size: 0.5em; font-weight: 500; letter-spacing: 0.08em; color: var(--lp-ink3); }
/* the live rail */
.earncard, .panel { flex: none; border-radius: 18px; background: rgba(9, 17, 44, 0.82); border: 1px solid var(--lp-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden; }
.earncard { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.ec-head { display: flex; align-items: center; gap: 12px; }
.ec-badge { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }
.ec-league { display: block; margin-top: 7px; font: 600 15px/1 var(--f-ui); color: var(--lp-ink); }
.ec-bal { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ec-bal b { font: 600 30px/1 var(--f-num); letter-spacing: -0.03em; color: var(--lp-gold); font-variant-numeric: tabular-nums; }
.ec-bal span { font: 400 13px/1.3 var(--f-ui); color: var(--lp-ink3); }
.ec-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 13px; border-top: 1px solid var(--lp-line); font: 400 13.5px/1 var(--f-ui); color: var(--lp-ink2); }
.ec-row b { font: 600 13.5px/1 var(--f-num); color: var(--lp-ink); }
.ec-act { display: flex; align-items: center; gap: 12px; }
.ec-note { font: 400 12.5px/1.35 var(--f-ui); color: var(--lp-ink3); }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--lp-line); }
.p-head .lbl { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-ink2); }
.p-head .lbl::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-gold); }
#p-live .p-head .lbl::before { background: var(--lp-green); box-shadow: 0 0 0 3px rgba(98, 220, 62, 0.18); }
.p-n { font: 500 12px/1 var(--f-num); color: var(--lp-ink3); }
.panel > .rows, .panel > .emotes { padding: 8px 9px 10px; }
.col-r .rows { gap: 2px; }
.col-r .empty { font: 400 13px/1.45 var(--f-ui); color: var(--lp-ink3); padding: 6px 7px 4px; text-shadow: none; }
.duelrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 10px 9px; border-radius: 12px; cursor: pointer; transition: background 0.15s; }
.duelrow:hover, .duelrow.is-on { background: rgba(255, 255, 255, 0.05); }
.duelrow .n { font: 600 13.5px/1.2 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duelrow .n.a { color: #9cc8ff; } .duelrow .n.b { color: #ffb0a8; } .duelrow .n.r { text-align: right; }
.duelrow .sc { font: 600 14px/1 var(--f-num); color: var(--lp-ink); white-space: nowrap; }
.duelrow .w { font: 600 11.5px/1 var(--f-ui); color: var(--lp-ink); padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.duelrow .meta { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 500 11.5px/1 var(--f-num); color: var(--lp-ink3); }
.duelrow .meta b { color: var(--lp-gold); font-weight: 600; }
.frow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; font: 400 13px/1.3 var(--f-ui); color: var(--lp-ink2); }
.frow b { font: 600 13px/1 var(--f-num); color: var(--lp-gold); }
.emotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.emotes button { aspect-ratio: 1; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lp-line); display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.emotes button:hover { background: rgba(255, 255, 255, 0.09); }
.emotes button:disabled { opacity: 0.35; cursor: default; }
.emotes canvas { width: 80%; height: 80%; }
/* the game's chunky buttons, made quiet out here */
.col-r .btn, .lp .btn, .bar .btn { height: 38px; padding: 0 16px; border-radius: 11px; border: 1px solid transparent; font: 600 13.5px/1 var(--f-ui); letter-spacing: 0; color: #2a1700; text-shadow: none;
  background: var(--lp-gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 18px rgba(255, 180, 30, 0.2); }
.col-r .btn.ghost, .col-r .btn.blue, .lp .btn.ghost { color: var(--lp-ink); background: rgba(255, 255, 255, 0.07); border-color: var(--lp-line2); box-shadow: none; }
.col-r .btn:disabled, .lp .btn:disabled { color: var(--lp-ink3); background: rgba(255, 255, 255, 0.05); border-color: var(--lp-line); box-shadow: none; }
.col-r .btn:active, .lp .btn:active { transform: translateY(1px); }
.frow .btn.small { height: 30px; padding: 0 11px; font-size: 12px; }
.scroll-cue { position: absolute; left: max(40px, calc((100vw - 1800px) / 2)); bottom: 16px; width: 26px; height: 42px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, 0.28); }
.scroll-cue i { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: rgba(255, 255, 255, 0.7); animation: cue 1.8s var(--lp-ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
body.is-duel .scroll-cue, body.is-watch .scroll-cue { display: none; }

/* ---------------------------------------------------------------- the sections */
.lp { position: relative; background: radial-gradient(1200px 600px at 50% 0%, rgba(40, 80, 180, 0.12), rgba(0, 0, 0, 0) 70%), var(--lp-bg); padding-bottom: 0; }
.lp-sec { max-width: 1240px; margin: 0 auto; padding: 130px 40px 0; scroll-margin-top: var(--bar); }
.lp-head { display: grid; gap: 14px; margin-bottom: 42px; max-width: 1000px; }
.lp-k { font: 500 12px/1 var(--f-num); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-gold); }
.lp-h2 { font: 400 clamp(40px, 3.5vw, 60px)/1.02 var(--f-d); letter-spacing: 0.004em; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.22); }
.lp-lead { font: 400 18px/1.6 var(--f-ui); color: var(--lp-ink2); max-width: 36em; }
/* 01 the game: a bento of the game's own art */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 290px; gap: 16px; }
.tile { position: relative; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate;
  background: radial-gradient(90% 70% at 50% 30%, rgba(80, 140, 255, 0.18), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #111f48 0%, #0b1534 100%); border: 1px solid var(--lp-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.t-cards { grid-column: span 4; grid-row: span 2; background: radial-gradient(70% 60% at 50% 38%, rgba(255, 196, 60, 0.2), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #13214d 0%, #0b1534 100%); }
.t-chests, .t-leagues { grid-column: span 2; }
.t-arenas { grid-column: span 6; grid-row: span 1; }
.t-art { position: absolute; inset: 0; z-index: -1; display: flex; align-items: center; justify-content: center; }
.t-txt { position: relative; padding: 26px 28px 26px; background: linear-gradient(180deg, rgba(11, 21, 52, 0) 0%, rgba(11, 21, 52, 0.9) 42%); }
.t-txt h3 { font: 400 30px/1.05 var(--f-d); letter-spacing: 0.005em; color: #fff; }
.t-txt p { margin-top: 8px; max-width: 36em; font: 400 15px/1.55 var(--f-ui); color: var(--lp-ink2); }
.t-cards .t-art { inset: 0 0 26% 0; }
.fan { position: relative; width: 100%; height: 100%; }
.fan canvas { position: absolute; left: 50%; top: 50%; width: 176px; height: 220px; margin: -110px 0 0 -88px; border-radius: 12px; transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--r)); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.5)); transition: transform 0.35s var(--lp-ease); }
.t-cards:hover .fan canvas { transform: translateX(calc(var(--x) * 1.08)) translateY(calc(var(--y) - 6px)) rotate(calc(var(--r) * 1.15)); }
.t-chests .t-art { inset: 0 0 34% 0; gap: 0; }
.t-chests .t-art img { width: 120px; height: 120px; margin: 0 -14px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)); }
.t-chests .t-art img:nth-child(2) { width: 150px; height: 150px; z-index: 1; }
.t-leagues .t-art { inset: 0 0 34% 0; }
.badges { display: grid; grid-template-columns: repeat(5, 54px); gap: 6px 8px; }
.badges img { width: 54px; height: 54px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.t-arenas { flex-direction: row; align-items: stretch; justify-content: flex-start; }
.t-arenas .t-art { position: relative; inset: auto; flex: 1; z-index: 0; justify-content: flex-end; gap: 14px; padding: 18px; order: 2; }
.t-arenas .t-art img { height: 100%; width: auto; max-width: 31%; object-fit: cover; border-radius: 16px; border: 1px solid var(--lp-line2); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4); }
.t-arenas .t-txt { width: 340px; flex: none; align-self: flex-end; background: none; }
/* 02 three ways to play */
.three { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.way { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 28px; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #111f48 0%, #0b1534 100%); border: 1px solid var(--lp-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.way::before { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(80, 140, 255, 0.22), rgba(0, 0, 0, 0) 70%); pointer-events: none; }
.w-ladder::before { background: radial-gradient(circle, rgba(80, 140, 255, 0.24), rgba(0, 0, 0, 0) 70%); }
.w-ranked { border-color: rgba(255, 207, 74, 0.34); }
.w-ranked::before { background: radial-gradient(circle, rgba(255, 196, 60, 0.26), rgba(0, 0, 0, 0) 70%); }
.w-wager::before { background: radial-gradient(circle, rgba(98, 220, 62, 0.18), rgba(0, 0, 0, 0) 70%); }
.way img { width: 86px; height: 86px; margin-left: -4px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.way b { font: 400 36px/1 var(--f-d); letter-spacing: 0.005em; color: #fff; }
.way span { flex: 1; font: 400 15.5px/1.55 var(--f-ui); color: var(--lp-ink2); }
.way em { font: 600 14px/1.2 var(--f-num); font-style: normal; color: var(--lp-gold); padding: 11px 0 3px; border-top: 1px solid var(--lp-line); }
.way .btn { align-self: flex-start; margin-top: 6px; height: 42px; padding: 0 20px; font-size: 14px; }
/* 03 the live board */
.board2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-card { border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #0f1b42 0%, #0b1534 100%); border: 1px solid var(--lp-line); }
.lp-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.lp-pay { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 12px; }
.lp-pay:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.lp-pay img { width: 38px; height: 38px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); }
.lp-pay .nm { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-pay .nm b { font: 600 14.5px/1.1 var(--f-ui); color: var(--lp-ink); }
.lp-pay .nm i { font: 500 11.5px/1 var(--f-num); font-style: normal; color: var(--lp-ink3); }
.lp-pay .v2 { font: 600 15px/1 var(--f-num); color: var(--lp-gold); text-align: right; min-width: 118px; }
.lp-pay .v { font: 500 13px/1 var(--f-num); color: var(--lp-ink2); text-align: right; min-width: 104px; }
.lp-pay.hd { margin: 0 12px; padding: 12px 12px 4px; font: 500 10.5px/1.2 var(--f-num); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink3); }
.lp-pay.hd span:nth-child(3) { text-align: right; min-width: 118px; } .lp-pay.hd span:nth-child(4) { text-align: right; min-width: 104px; }
.lp-climb { display: flex; align-items: center; gap: 22px; padding: 24px 26px; background: radial-gradient(70% 120% at 0% 50%, rgba(220, 120, 255, 0.18), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #13204c 0%, #0c1636 100%); }
.lp-climb img { width: 108px; height: 108px; flex: none; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)); }
.lp-climb b { display: block; font: 400 26px/1.08 var(--f-d); color: #fff; }
.lp-climb p { margin: 8px 0 14px; font: 400 14.5px/1.55 var(--f-ui); color: var(--lp-ink2); }
.lp-nums { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 20px; overflow: hidden; border: 1px solid var(--lp-line); background: #0b1534; }
.lp-nums > div { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; border-right: 1px solid var(--lp-line); }
.lp-nums > div:last-child { border-right: 0; }
.lp-nums span { font: 500 10.5px/1 var(--f-num); letter-spacing: 0.15em; text-transform: uppercase; color: var(--lp-ink3); }
.lp-nums b { font: 600 26px/1 var(--f-num); letter-spacing: -0.02em; color: var(--lp-ink); }
.lp-nums > div:nth-child(2) b { color: var(--lp-gold); }
.lp-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 18px; border-bottom: 1px solid var(--lp-line); font: 600 16px/1 var(--f-ui); color: var(--lp-ink); }
.lp-card-h em { font: 500 12.5px/1 var(--f-num); font-style: normal; color: var(--lp-ink3); }
.lp-table { padding: 8px 12px 14px; display: flex; flex-direction: column; }
.lp-table .empty { padding: 18px 12px; font: 400 14.5px/1.55 var(--f-ui); color: var(--lp-ink3); text-shadow: none; }
.lr { display: grid; grid-template-columns: 30px 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font: 500 14.5px/1.2 var(--f-ui); color: var(--lp-ink); }
.lr:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.lr .rk { font: 600 13px/1 var(--f-num); color: var(--lp-ink3); text-align: center; }
.lr:nth-child(-n+3) .rk { color: var(--lp-gold); }
.lr img { width: 32px; height: 32px; }
.lr .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr .v { font: 600 13.5px/1 var(--f-num); color: var(--lp-ink); text-align: right; white-space: nowrap; }
.lr .v2 { font: 600 13.5px/1 var(--f-num); color: var(--lp-gold); text-align: right; white-space: nowrap; min-width: 84px; }
.ld { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; font: 600 14.5px/1.2 var(--f-ui); cursor: pointer; transition: background 0.15s; }
.ld:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.ld:hover { background: rgba(255, 255, 255, 0.06); }
.ld .a { color: #9cc8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ld .b { color: #ffb0a8; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld .sc { font: 600 15px/1 var(--f-num); color: #fff; }
.ld .m { font: 500 12px/1 var(--f-num); color: var(--lp-ink3); white-space: nowrap; }
/* 04 the trailer */
.vid { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; border: 1px solid var(--lp-line2); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(255, 207, 74, 0.06); }
.vid video { width: 100%; height: 100%; display: block; object-fit: cover; }
/* 05 the pot */
.steps3 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps3 li { position: relative; padding: 28px 28px 30px; border-radius: 24px; background: linear-gradient(180deg, #0f1b42 0%, #0b1534 100%); border: 1px solid var(--lp-line); }
.steps3 li + li::before { content: ''; position: absolute; left: -17px; top: 50%; width: 18px; height: 1px; background: var(--lp-line2); }
.steps3 b { display: inline-block; font: 600 12.5px/1 var(--f-num); color: var(--lp-gold); padding: 7px 10px; border-radius: 999px; background: rgba(255, 207, 74, 0.08); border: 1px solid rgba(255, 207, 74, 0.22); }
.steps3 h3 { margin-top: 18px; font: 400 28px/1.05 var(--f-d); color: #fff; }
.steps3 p { margin-top: 10px; font: 400 15px/1.6 var(--f-ui); color: var(--lp-ink2); }
.lp-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font: 600 15px/1 var(--f-ui); color: var(--lp-gold); }
.lp-link i { font-style: normal; transition: transform 0.15s var(--lp-ease); }
.lp-link:hover i { transform: translateX(4px); }
/* 06 questions */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.faq details { border-radius: 18px; background: #0d1735; border: 1px solid var(--lp-line); padding: 0 24px; transition: border-color 0.15s, background 0.15s; }
.faq details[open] { border-color: var(--lp-line2); background: #0f1b40; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 0; font: 600 16.5px/1.3 var(--f-ui); color: var(--lp-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 500 18px/1 var(--f-num); color: var(--lp-gold); background: rgba(255, 207, 74, 0.08); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 22px; font: 400 15px/1.65 var(--f-ui); color: var(--lp-ink2); }
/* the footer */
.lp-foot { margin-top: 150px; padding: 50px 40px 44px; background: #050a1b; border-top: 1px solid var(--lp-line); }
.lp-foot-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.lp-foot-b { display: flex; align-items: center; gap: 14px; }
.lp-foot-b b { font: 400 26px/1 var(--f-d); color: var(--lp-gold); }
.lp-foot-b p { margin-top: 6px; font: 400 14px/1.4 var(--f-ui); color: var(--lp-ink3); }
.lp-foot-l { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.lp-foot-l a { font: 500 14px/1 var(--f-ui); color: var(--lp-ink2); }
.lp-foot-l a:hover { color: var(--lp-ink); }
.lp-legal { max-width: 1240px; margin: 34px auto 0; padding-top: 24px; border-top: 1px solid var(--lp-line); font: 400 12.5px/1.6 var(--f-ui); color: var(--lp-ink3); }
/* sections rise in as they come into view (landing.js adds .in) */
.lp-sec > * { opacity: 1; }
.lp-sec.pre > .lp-head, .lp-sec.pre > :not(.lp-head) { opacity: 0; transform: translateY(16px); }
.lp-sec.in > .lp-head, .lp-sec.in > :not(.lp-head) { opacity: 1; transform: none; transition: opacity 0.7s var(--lp-ease), transform 0.7s var(--lp-ease); }
.lp-sec.in > :not(.lp-head) { transition-delay: 0.08s; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-cue i { animation: none; } .lp-sec.pre > * { opacity: 1 !important; transform: none !important; } }

/* ---------------------------------------------------------------- narrower desktops: the rail goes, then the copy tightens */
@media (max-width: 1720px) { .chip.live { display: none; } }
@media (max-width: 1560px) { .store em { display: none; } .store { height: 38px; padding: 0 11px 0 9px; } }
@media (max-width: 1500px) {
  .plaque { grid-template-columns: 1fr 1fr; }
  .pq:nth-child(1), .pq:nth-child(2) { border-bottom: 1px solid var(--lp-line); }
  .pq:nth-child(2) { border-right: 0; }
}
@media (max-width: 1439px) {
  .stage { grid-template-columns: minmax(0, 1fr) auto; gap: 0 64px; }
  .col-r { display: none; }
}
@media (max-width: 1240px) {
  .links .lnk:nth-child(3) { display: none; }
}
@media (max-width: 1300px) { .store { display: none; } }
@media (max-width: 1100px) {
  .h1 { font-size: 54px; } .lede { font-size: 17px; } .bento { grid-auto-rows: 260px; } .t-arenas .t-txt { width: 280px; }
  .links { display: none; }
}
/* short laptop screens: the hero keeps everything above the fold */
@media (max-height: 820px) and (min-width: 901px) {
  .scroll-cue { display: none; }
  .col-l { gap: 24px; } .h1 { font-size: clamp(48px, 4.4vw, 74px); margin-top: 18px; } .lede { margin-top: 16px; font-size: 17px; } .cta-row { margin-top: 24px; } .trust { margin-top: 18px; }
  .cta, .cta2 { height: 54px; } .cta { font-size: 22px; } .pq { padding: 14px 16px 13px; gap: 8px; } .pq b { font-size: 19px; } .pq-pot b { font-size: 24px; } .pq-rule { padding: 10px 16px; }
  .earncard { padding: 14px 16px 13px; gap: 11px; } .ec-bal b { font-size: 26px; }
}
/* ---------------------------------------------------------------- phones: the game is the whole screen (app mode) */
@media (max-width: 900px), (pointer: coarse) and (orientation: portrait) {
  :root { --bar: 54px; }
  html, body { overflow: hidden; height: 100%; }
  .bar { position: fixed; inset: 0 0 auto 0; gap: 8px; padding: 0 8px 0 7px; }
  .links, .chip.live, .store, .focus-x { display: none !important; }
  .brand { gap: 9px; }
  .medal { width: 38px; height: 38px; } .mark, .mark-img, img.mark { width: 29px; height: 29px; }
  .word { font-size: 23px; }
  .bar-r { gap: 6px; }
  .ca-pill { height: 36px; max-width: 46vw; gap: 6px; padding: 0 3px 0 10px; }
  .ca-lab i { display: none; }
  .ca-addr { height: 28px; padding: 0 3px 0 8px; } .ca-addr:disabled { padding-right: 9px; font-size: 12px; }
  .ca-copy { padding: 6px 8px; }
  .ca-link { display: none; }
  .menu-btn { width: 40px; height: 38px; padding: 0; justify-content: center; }
  .menu-btn span, .menu-btn kbd { display: none; }
  .stage { position: fixed; inset: var(--bar) 0 0 0; height: auto; min-height: 0; display: block; padding: 0; }
  .hero-bg, .scroll-cue { display: none; }
  .col-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; height: auto; }
  .col-l, .col-r { display: none !important; }
  .lp { display: none; }
}