/* X4TAR — site stylesheet
   Layout: full-width dark bands, one 1296px content column, 24px gutters (16px on phones).
   Type: Unbounded 900 italic for display, Rubik for UI/body. Loaded from Google Fonts in each page. */

:root {
  --bg: #070A08;
  --bg-2: #0A0E0B;
  --p1: #0E1410;
  --p2: #131B16;
  --p3: #1B251F;
  --ins: #080C09;
  --edge: rgba(255, 255, 255, .06);
  --edge2: rgba(255, 255, 255, .12);
  --g1: #5CF58F;
  --g2: #22D267;
  --g3: #16A84F;
  --txt: #F2F6F3;
  --mut: #9AA89F;
  --dim: #6E7C73;
  --soft: #D5DED8;
  --gold: #F5C84B;
  --silver: #E3E9EE;
  --bronze: #E9A56B;
  --discord: #5B67F0;
  --font-display: "Unbounded", "Arial Black", Impact, sans-serif;
  --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.4; }
img, svg, video { max-width: 100%; }
a { color: var(--mut); text-decoration: none; }
a:hover { color: var(--txt); }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--g1); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { max-width: 1296px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }

svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Type ---------- */
.disp { font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .95; letter-spacing: -.015em; }
.silver { background: linear-gradient(180deg, #FFFFFF 18%, #E3EAE6 48%, #A9B6AE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .18em; }
.green { background: linear-gradient(180deg, #8CFFB3 0%, #3BE87A 45%, #13A94E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .18em; }
.deep { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .9)) drop-shadow(0 6px 0 rgba(0, 0, 0, .55)) drop-shadow(0 18px 36px rgba(0, 0, 0, .6)); }
.glow { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .9)) drop-shadow(0 6px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 28px rgba(46, 224, 107, .35)); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--mut); text-transform: uppercase; }
.eyebrow.acc { color: var(--g1); }
.lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--mut); }
.lead b, .lead strong { color: var(--g1); font-weight: 600; }
.hair { height: 1px; background: linear-gradient(90deg, transparent, rgba(92, 245, 143, .45) 30%, rgba(92, 245, 143, .45) 70%, transparent); }
h1, h2, h3 { margin: 0; text-wrap: balance; }

/* ---------- Buttons ---------- */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 10px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border: 0; cursor: pointer; color: var(--txt); transition: filter .12s; }
.b:hover { color: var(--txt); filter: brightness(1.08); }
.b.sm { height: 46px; padding: 0 18px; font-size: 13px; border-radius: 9px; }
.b.xs { height: 42px; padding: 0 14px; font-size: 12px; border-radius: 8px; }
.b.lg { height: 58px; padding: 0 30px; }
.b.full { width: 100%; }
.b-g, .b-g:hover { color: #04170A; background: linear-gradient(180deg, #6CFF9E 0%, #2BDB70 48%, #17B457 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 10px 28px rgba(34, 210, 103, .30), 0 2px 3px rgba(0, 0, 0, .5); }
.b-d { background: linear-gradient(180deg, #1B251F 0%, #121A15 100%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .45); }
.b-l, .b-l:hover { color: #0B1410; background: linear-gradient(180deg, #FFFFFF 0%, #D9E0DC 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .12), 0 6px 16px rgba(0, 0, 0, .45); }
.b-k { background: linear-gradient(180deg, #141C17, #0E1511); border: 1px solid rgba(92, 245, 143, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.b-dc, .b-dc:hover { color: #fff; background: linear-gradient(180deg, #6B77FF, #4A57E8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(88, 101, 242, .3); }
.b-y, .b-y:hover { color: #3A2600; background: linear-gradient(180deg, #FFE79A, #D6A33A 55%, #B8862A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 20px rgba(214, 163, 58, .3); }
.b:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; }
.b .code { color: var(--g1); font-weight: 800; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--g1); box-shadow: 0 0 0 3px rgba(92, 245, 143, .18), 0 0 12px var(--g1); flex: none; }

/* ---------- Wordmark ---------- */
.wm { display: inline-flex; flex-direction: column; font-family: var(--font-display); font-weight: 900; font-style: italic; line-height: .88; color: #fff; }
.wm .t { display: flex; letter-spacing: -.04em; }
.wm .g { color: var(--g2); }
.wm .bar { height: .09em; margin: .07em 0 0 33%; background: linear-gradient(90deg, var(--g1), var(--g3)); clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%); }
.wm img { height: 1.2em; width: auto; display: block; }

/* ---------- Header ---------- */
.site-head { position: relative; z-index: 20; background: linear-gradient(180deg, #0D1210, #0A0E0B); border-bottom: 1px solid var(--edge); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 18px; }
.site-head .brand { font-size: 26px; margin-right: 18px; flex: none; }
.menu { display: flex; flex-wrap: wrap; gap: 3px; padding: 5px; border-radius: 14px; background: linear-gradient(180deg, #0A0E0B, #0D1310); border: 1px solid var(--edge); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6); }
.menu a { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 9px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.menu a svg { width: 16px; height: 16px; }
.menu a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.menu a.on, .menu a.on:hover { color: #04170A; background: linear-gradient(180deg, #6CFF9E, #22D267); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 14px rgba(34, 210, 103, .3); }
.head-actions { display: flex; gap: 10px; align-items: center; }
.burger { display: none; width: 42px; height: 42px; padding: 0; align-items: center; justify-content: center; }
/* Logged-in Discord user (replaces the Login button) */
.uchip { position: relative; }
.uchip-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px 0 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, #1B251F 0%, #121A15 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .45); color: var(--txt); font-weight: 700; font-size: 13px; cursor: pointer; }
.uchip-btn img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--discord); flex: none; }
.uchip-btn .un { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uchip-btn svg { width: 14px; height: 14px; color: var(--mut); }
.uchip-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 220px; padding: 6px; border-radius: 12px; background: var(--p1); border: 1px solid var(--edge2); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
.uchip-menu .mi { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--txt); }
.uchip-menu .mi:hover { background: rgba(255, 255, 255, .05); color: var(--txt); }
.uchip-menu .mi svg.i { width: 17px; height: 17px; color: var(--g1); }
.uchip-menu .mi.out svg.i { color: var(--mut); }
.uchip-menu .mi .cnt { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.uchip-menu hr { border: 0; border-top: 1px solid var(--edge); margin: 6px 4px; }
.b.is-in { cursor: default; filter: none; text-transform: none; letter-spacing: .02em; }
.b.is-in img { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.b.is-in span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .uchip-btn { padding: 0 6px; } .uchip-btn .un, .uchip-btn svg { display: none; } }

@media (max-width: 1100px) {
  .menu a { padding: 0 9px; font-size: 11px; }
  .menu a svg { display: none; }
}
@media (max-width: 900px) {
  .site-head .wrap { flex-wrap: wrap; padding-block: 14px; }
  .site-head .brand { font-size: 22px; margin-right: 0; }
  .burger { display: inline-flex; }
  .menu { display: none; flex: 1 1 100%; flex-direction: column; gap: 4px; order: 3; margin-top: 6px; }
  .menu a { height: 46px; font-size: 13px; }
  .menu a svg { display: block; }
  .site-head.open .menu { display: flex; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Mobile bottom tab bar */
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px max(6px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); background: linear-gradient(180deg, #0D1210, #0A0E0B); border-top: 1px solid rgba(255, 255, 255, .08); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a.on { color: var(--g1); }
@media (max-width: 900px) { .tabbar { display: grid; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 48% 42% at 50% 38%, rgba(46, 224, 107, .22), transparent 70%), radial-gradient(ellipse 80% 60% at 50% 110%, rgba(46, 224, 107, .10), transparent 60%), linear-gradient(180deg, #0B100D 0%, #070A08 100%); }
.hero.sub { background: radial-gradient(ellipse 48% 50% at 50% 30%, rgba(46, 224, 107, .20), transparent 70%), linear-gradient(180deg, #0B100D 0%, #070A08 100%); }
.hero.left { background: radial-gradient(ellipse 45% 80% at 15% 0%, rgba(46, 224, 107, .18), transparent 70%), linear-gradient(180deg, #0B100D 0%, #070A08 100%); }
.hero > .wrap { position: relative; }
.beams { position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(112deg, transparent 30%, rgba(120, 255, 170, .055) 40%, transparent 48%), linear-gradient(112deg, transparent 56%, rgba(120, 255, 170, .04) 66%, transparent 74%), linear-gradient(68deg, transparent 52%, rgba(120, 255, 170, .03) 60%, transparent 66%); }
.gridbg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 80%); }
.noise { position: absolute; inset: 0; pointer-events: none; opacity: .8; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.vig { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 180px 60px rgba(0, 0, 0, .65); }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; padding-block: 96px 90px; }
.hero.sub .hero-in { padding-block: 80px 60px; gap: 18px; }
.hero-wm { font-size: clamp(60px, 12.5vw, 186px); }
.hero-wm .t > span { padding: 0 .24em; margin: 0 -.24em; }
.hero-wm .bar { box-shadow: 0 0 30px #22D267; }
.hero h1.rewards { font-size: clamp(38px, 7vw, 100px); margin-top: -6px; }
.hero .lead { max-width: 640px; font-size: 19px; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tag { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 18px; border-radius: 999px; background: linear-gradient(180deg, #121A15, #0C120E); border: 1px solid rgba(92, 245, 143, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 20px rgba(0, 0, 0, .5); font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--mut); text-transform: uppercase; }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; }
.scroll-cue span { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #141C17, #0C120E); border: 1px solid rgba(92, 245, 143, .25); color: var(--g1); box-shadow: 0 0 20px rgba(46, 224, 107, .2); }
@media (max-width: 600px) {
  .hero-in { padding-block: 44px 40px; gap: 18px; }
  .hero .lead { font-size: 15px; }
  .cta-row { width: 100%; flex-direction: column; }
  .cta-row .b { width: 100%; }
  .scroll-cue { display: none; }
}

/* Stats strip */
.stats { display: flex; flex-wrap: wrap; width: 100%; max-width: 840px; border-radius: 14px; background: var(--p1); border: 1px solid var(--edge); box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden; margin-top: 8px; }
.stats div { flex: 1 1 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 30px; border-right: 1px solid var(--edge); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent); }
.stats div:last-child { border-right: 0; }
.stats b { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.stats div > span { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
@media (max-width: 600px) {
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div { padding: 16px 18px; border-bottom: 1px solid var(--edge); }
  .stats div:nth-child(2n) { border-right: 0; }
  .stats div:nth-last-child(-n+2) { border-bottom: 0; }
  .stats b { font-size: 22px; }
}

/* ---------- Sections & cards ---------- */
.sec { padding-block: 96px; }
.sec.tight { padding-block: 56px; }
@media (max-width: 600px) { .sec { padding-block: 48px; } .sec.tight { padding-block: 36px; } }
.sec-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; }
.sec-title h2 { font-size: clamp(44px, 5.8vw, 84px); }
.sec-title .deco { width: 64px; height: 64px; flex: none; }
.sec-sub { margin: 14px 0 0; text-align: center; font-size: 13px; letter-spacing: .2em; }
@media (max-width: 600px) { .sec-title { gap: 14px; } .sec-title h2 { font-size: clamp(34px, 10.5vw, 44px); } .sec-title .deco { width: 32px; height: 32px; } }
.card { background: linear-gradient(180deg, #131B16 0%, #0E1410 100%); border: 1px solid var(--edge); border-top-color: var(--edge2); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); }
.card.dashed { border-style: dashed; border-color: rgba(92, 245, 143, .35); background: linear-gradient(180deg, rgba(46, 224, 107, .08), #0E1410); }
.rule { width: 100%; display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--dim); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18)); }
.rule::after { background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent); }
.ins { padding: 18px 14px; border-radius: 12px; background: var(--ins); border: 1px solid rgba(0, 0, 0, .6); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .05); }
.ins.center { text-align: center; }
.ins small { display: block; font-size: 12px; color: var(--mut); margin-bottom: 6px; }
.ins strong { display: block; font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 21px; white-space: nowrap; }
.kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.kv-row span { color: var(--mut); }

/* Bonus tickets ("tear off your rewards") */
.tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.tkt { position: relative; display: flex; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #131B16, #0E1410); border: 1px solid var(--edge); border-top-color: var(--edge2); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tkt:hover { transform: translateY(-3px); border-color: rgba(92, 245, 143, .28); box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(92, 245, 143, .12), inset 0 1px 0 rgba(255, 255, 255, .06); }
.tkt .stub { position: relative; flex: 0 0 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 18px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(46, 224, 107, .25), transparent 70%), #0B110D; border-right: 2px dashed rgba(255, 255, 255, .14); }
.tkt .stub.gold { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245, 200, 75, .22), transparent 70%), #0B110D; }
.tkt .val { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 64px; line-height: .9; padding: 0 .12em; white-space: nowrap; }
.tkt .val.gold { color: var(--gold); filter: drop-shadow(0 6px 18px rgba(245, 200, 75, .25)); }
.tkt .valwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tkt .pre { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--g1); }
.stats b .upto { display: inline-block; vertical-align: middle; margin: -4px 7px 0 0; font-family: var(--font-body); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--g1); }
.tkt .lab { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); text-align: center; }
.tkt .notch { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); right: -15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); z-index: 1; }
.tkt .notch.top { top: -13px; }
.tkt .notch.bot { bottom: -13px; }
.tkt .tb { position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; min-width: 0; }
.tkt .tb h3 { margin: 0; font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 24px; text-transform: uppercase; color: #fff; line-height: 1.05; }
.tkt .tb p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mut); }
.tkt .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.tkt .stamp { position: absolute; right: 22px; top: 20px; padding: 5px 10px; border: 2px solid rgba(92, 245, 143, .5); border-radius: 6px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--g1); transform: rotate(-8deg); opacity: .9; white-space: nowrap; }
.tkt .stamp.gold { border-color: rgba(245, 200, 75, .55); color: var(--gold); }
.tkt .serial { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: .2em; color: var(--dim); }
.tickets-note { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; font-size: 12px; color: var(--dim); text-align: center; }
@media (max-width: 1000px) { .tickets { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .tickets { margin-top: 28px; gap: 14px; }
  .tkt { flex-direction: column; }
  .tkt .stub { flex: none; flex-direction: row; justify-content: space-between; gap: 14px; padding: 18px 22px; border-right: 0; border-bottom: 2px dashed rgba(255, 255, 255, .14); }
  .tkt .stub .lab { text-align: right; }
  .tkt .valwrap { align-items: flex-start; gap: 4px; }
  .tkt .val { font-size: 44px; }
  .tkt .notch { right: auto; top: auto; bottom: -13px; }
  .tkt .notch.top { left: -13px; }
  .tkt .notch.bot { right: -13px; }
  .tkt .tb { padding: 20px 18px 18px; }
  .tkt .tb h3 { font-size: 20px; }
  .tkt .stamp { right: 16px; top: 16px; }
  .tkt .acts .b { flex: 1 1 auto; }
}

/* Leaderboard banner */
.lb { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; gap: 40px; padding: 56px clamp(20px, 4vw, 60px); border-radius: 20px; background: linear-gradient(180deg, #121B15, #0C1310); border: 1px solid rgba(92, 245, 143, .28); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08); }
.lb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 90% at 90% 50%, rgba(46, 224, 107, .16), transparent 65%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 30px); }
.lb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--g1), transparent); }
.lb > * { position: relative; }
.lb .l { flex: 1 1 470px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.partner { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: #fff; }
.partner i { width: 1px; height: 16px; background: rgba(255, 255, 255, .3); }
.partner .x { color: var(--g1); }
.lb .amount { font-size: clamp(48px, 6vw, 88px); line-height: .9; padding-right: .22em; }
.lb .amount-sub { font-size: clamp(22px, 3vw, 44px); margin-top: 6px; }
.lb .twoline { display: flex; flex-wrap: wrap; gap: 0 .26em; font-size: clamp(24px, 3.2vw, 44px); line-height: 1.05; margin-top: 6px; }
.lb .top3 { flex: 1 1 600px; flex-wrap: nowrap; gap: 14px; align-self: flex-end; }
.rc.mini { flex: 0 1 190px; padding: 22px 14px 20px; gap: 7px; }
.rc.mini.first { flex-basis: 200px; margin-bottom: 26px; }
.rc.mini .avr { width: 64px; height: 64px; font-size: 22px; }
.rc.mini .bdg { width: 24px; height: 24px; font-size: 11px; }
.rc.mini .nm { font-size: 15px; }
.rc.mini .wg { font-size: 12px; padding: 5px 12px; }
.rc.mini .pz { font-size: 26px; }
.rc.mini .crown { width: 30px; height: 30px; top: -18px; }
@media (max-width: 1100px) { .lb .top3 { flex-basis: 100%; justify-content: center; } }
@media (max-width: 600px) { .lb .top3 { flex-wrap: wrap; gap: 10px; } .rc.mini, .rc.mini.first { flex: 1 1 100%; padding: 14px 16px; margin-bottom: 0; } .rc.mini .avr { width: 52px; height: 52px; font-size: 18px; } .rc.mini .crown { top: -16px; left: 30px; } }
.timer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.timer div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 74px; height: 70px; border-radius: 12px; background: var(--ins); border: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .06); }
.timer b { font-family: var(--font-display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
.timer span { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--dim); }
.timer em { font-style: normal; font-size: 13px; color: var(--mut); margin-left: 8px; }
.timer.big { justify-content: center; }
.timer.big div { width: 96px; height: 92px; border-radius: 14px; }
.timer.big b { font-size: 34px; }
.timer.big span { font-size: 11px; }
@media (max-width: 600px) {
  .lb { padding: 24px 18px; gap: 20px; }
  .timer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timer div { width: auto; }
  .timer em { grid-column: 1 / -1; margin: 0; }
  .timer.big { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .timer.big div { width: auto; height: 72px; }
  .timer.big b { font-size: 22px; }
}
.medal { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-display); font-weight: 900; font-size: 18px; box-shadow: 0 8px 20px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 255, 255, .35); flex: none; }
.m1 { width: 68px; height: 68px; font-size: 22px; background: linear-gradient(180deg, #FFE79A, #D6A33A 55%, #9C6F1D); color: #3A2600; box-shadow: 0 8px 24px rgba(214, 163, 58, .35), inset 0 2px 0 rgba(255, 255, 255, .5); }
.m2 { width: 56px; height: 56px; background: linear-gradient(180deg, #F4F7F8, #B9C4CB 55%, #7C8A93); color: #1E272D; }
.m3 { width: 56px; height: 56px; background: linear-gradient(180deg, #F3B57C, #C9793A 55%, #8A4D1C); color: #331A05; }
.medal.lg { width: 84px; height: 84px; font-size: 30px; }
.medal.lg.m1 { width: 104px; height: 104px; font-size: 38px; }
.medal.sm { width: 36px; height: 36px; font-size: 13px; }
.crown { width: 30px; height: 30px; color: #F0C75A; stroke-width: 1.8; filter: drop-shadow(0 0 10px rgba(240, 199, 90, .6)); }
.prize { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(46, 224, 107, .14); color: var(--g1); font-weight: 700; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prize.gold { background: rgba(245, 200, 75, .16); color: var(--gold); }
.prize.silv { background: rgba(201, 211, 220, .14); color: var(--silver); }
.prize.bron { background: rgba(216, 139, 74, .16); color: var(--bronze); }

/* Feature cards (home) */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.feat { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: 22px; }
.ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(180deg, #1B251F, #0E1410); border: 1px solid rgba(92, 245, 143, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 24px rgba(0, 0, 0, .5); color: var(--g1); flex: none; }
.ico svg.i { width: 26px; height: 26px; }
.ico.sm { width: 46px; height: 46px; border-radius: 12px; }
.ico.sm svg.i { width: 20px; height: 20px; }
.tagp { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(46, 224, 107, .12); border: 1px solid rgba(92, 245, 143, .25); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--g1); white-space: nowrap; }
.tagp.gold { background: rgba(245, 200, 75, .16); border-color: rgba(245, 200, 75, .35); color: var(--gold); }
.tagp.silv { background: rgba(201, 211, 220, .14); border-color: rgba(201, 211, 220, .3); color: var(--silver); }
.tagp.bron { background: rgba(216, 139, 74, .16); border-color: rgba(216, 139, 74, .35); color: var(--bronze); }

/* Total given away */
.total-band { background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(46, 224, 107, .10), transparent 70%); }
.total { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.total h2 { font-size: clamp(30px, 4.4vw, 64px); }
.digits { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.digit { display: flex; align-items: center; justify-content: center; width: 66px; height: 92px; border-radius: 12px; background: linear-gradient(180deg, #141C17, #0A0F0C); border: 1px solid var(--edge2); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 -14px 20px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .6); font-family: var(--font-display); font-weight: 900; font-size: 46px; color: #fff; position: relative; }
.digit::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px; background: rgba(0, 0, 0, .6); }
.digits .sym { font-family: var(--font-display); font-weight: 900; font-size: 52px; color: var(--g1); filter: drop-shadow(0 0 16px rgba(46, 224, 107, .5)); }
.digits .sep { font-family: var(--font-display); font-size: 46px; color: var(--dim); }
@media (max-width: 600px) {
  .digit { width: 38px; height: 56px; font-size: 26px; border-radius: 9px; }
  .digits { gap: 5px; }
  .digits .sym { font-size: 30px; }
  .digits .sep { font-size: 26px; }
}

/* How it works */
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.how .card { display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.how .num { font-size: 34px; padding: 0; }
.how h3 { font-weight: 700; font-size: 17px; }
.how p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mut); }
.sec-h2 { text-align: center; font-size: clamp(28px, 3.6vw, 48px); }

/* ---------- Footer ---------- */
.site-foot { margin-top: 40px; border-top: 1px solid var(--edge); background: linear-gradient(180deg, #0A0E0B, #050705); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; padding-block: 64px 44px; }
.foot-top h4 { margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .2em; color: #fff; text-transform: uppercase; }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.foot-brand p { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.65; color: var(--mut); }
.foot-brand p b { color: #fff; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.foot-col a { font-size: 14px; }
.foot-soc { display: flex; align-items: center; gap: 10px; width: max-content; }
.foot-soc + .foot-soc { margin-top: 14px; }
.foot-soc svg.i { width: 16px; height: 16px; }
.foot-soc .kick { color: #53FC18; }
.foot-soc .dc { stroke: #7C86F5; }
.foot-soc .xx { stroke: var(--soft); }
.foot-rg .rg { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-rg .badge18 { width: 36px; height: 36px; font-size: 12px; }
.foot-top .dis { margin: 0; font-size: 12.5px; line-height: 1.65; color: #8A988F; max-width: 340px; }
.foot-bot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 22px 34px; border-top: 1px solid var(--edge); font-size: 12px; color: var(--dim); }
.foot-bot nav { display: flex; gap: 28px; }
.foot-bot nav a { font-size: 12px; }
.foot-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 28px; font-size: 13px; color: var(--dim); }
.foot-mini .rs { display: flex; align-items: center; gap: 12px; }
.badge18 { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--mut); font-weight: 800; font-size: 13px; color: #fff; flex: none; }
.badge18.sm { width: 28px; height: 28px; font-size: 10px; }
.gaw { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 6px; background: #141C17; border: 1px solid var(--edge2); font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #fff; }
@media (max-width: 980px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }
@media (max-width: 600px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 44px 32px; }
  .foot-bot { flex-direction: column; align-items: flex-start; }
  .foot-bot nav { flex-wrap: wrap; gap: 10px 24px; }
}

/* ---------- Page headers (inner pages) ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; padding-block: 36px 20px; }
.page-head .crumbs { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.page-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.page-head h1 .silver { font-size: clamp(40px, 5vw, 72px); }
.balance { display: flex; align-items: center; gap: 14px; padding: 12px 18px; }
.balance .amt { font-family: var(--font-display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.balance .reset { font-size: 11px; color: var(--dim); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }

/* Data lists (leaderboard, raffle) */
.tbl-scroll { overflow-x: auto; }
.tbl { min-width: 620px; font-size: 15px; }
.tbl .tr { display: grid; align-items: center; padding: 14px 24px; border-top: 1px solid var(--edge); }
.tbl .tr.th { padding: 20px 24px; border-top: 0; color: var(--g1); font-weight: 800; }
.tbl.lb-cols .tr { grid-template-columns: 100px minmax(0, 1fr) 180px 160px; }
.tbl.rf-cols .tr { grid-template-columns: 70px minmax(0, 1fr) 200px 140px; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .user { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.rk { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 36px; padding: 0 8px; border-radius: 10px; background: linear-gradient(180deg, #1B251F, #121A15); border: 1px solid var(--edge2); font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #fff; }
.av { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(180deg, #1B251F, #0E1410); border: 1px solid var(--edge2); font-weight: 700; font-size: 13px; color: var(--mut); flex: none; }
.tk { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(46, 224, 107, .14); color: var(--g1); font-weight: 700; font-variant-numeric: tabular-nums; }
.tk svg.i { width: 14px; height: 14px; }
.empty-row { padding: 36px 24px; text-align: center; color: var(--dim); border-top: 1px solid var(--edge); }

/* Podium cards (leaderboard page) */
/* Leaderboard page — "Ghost" layout: ghost wordmark, pill buttons, top-3 avatar cards, row cards, payout grid */
.lb-hero { position: relative; }
.ghost { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: clamp(90px, 17vw, 250px); line-height: 1; letter-spacing: -.02em; color: rgba(255, 255, 255, .025); -webkit-text-stroke: 2px rgba(255, 255, 255, .06); pointer-events: none; white-space: nowrap; user-select: none; }
.lb-head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 64px 0 48px; }
.lb-head .amount2 { font-size: clamp(64px, 9vw, 120px); line-height: .9; }
.lb-head .twoline { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .28em; font-size: clamp(28px, 4.2vw, 56px); line-height: 1.05; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 9px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #141C17, #0E1511); border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 16px rgba(0, 0, 0, .45); cursor: pointer; text-decoration: none; white-space: nowrap; }
.pill:hover { border-color: rgba(255, 255, 255, .22); }
.pill.code { border-color: rgba(92, 245, 143, .5); background: linear-gradient(180deg, rgba(46, 224, 107, .16), rgba(46, 224, 107, .04)); }
.pill.code span { color: var(--g1); }
.pill.code b { color: #fff; }
.pill svg.i { width: 13px; height: 13px; color: var(--g1); }
.top3 { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 24px; }
.rc { position: relative; flex: 0 1 250px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 22px 28px; border-radius: 18px; background: linear-gradient(180deg, #121A15, #0C1310); border: 1px solid rgba(92, 245, 143, .35); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.rc.first { flex-basis: 260px; margin-bottom: 34px; border-color: rgba(245, 200, 75, .6); background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(245, 200, 75, .16), transparent 70%), linear-gradient(180deg, #121A15, #0C1310); box-shadow: 0 24px 70px rgba(245, 200, 75, .12), 0 24px 60px rgba(0, 0, 0, .55); }
.rc .crown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; }
.rc .nm { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 17px; color: #fff; margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc .lbl2 { font-size: 10px; font-weight: 800; letter-spacing: .22em; color: var(--mut); }
.rc .wg { padding: 7px 16px; border-radius: 8px; background: var(--ins); border: 1px solid rgba(0, 0, 0, .6); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7); font-weight: 700; font-size: 14px; color: #fff; font-variant-numeric: tabular-nums; }
.rc .pz { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 36px; margin-top: 6px; padding-right: .1em; color: var(--g1); filter: drop-shadow(0 4px 16px rgba(92, 245, 143, .25)); }
.rc.first .pz { color: var(--gold); filter: drop-shadow(0 4px 16px rgba(245, 200, 75, .3)); }
.avw { position: relative; display: inline-flex; }
.avr { display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 50%; background: linear-gradient(180deg, #1B251F, #0E1410); border: 3px solid var(--g1); font-family: var(--font-display); font-weight: 900; font-size: 30px; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); overflow: hidden; }
.avr img { width: 100%; height: 100%; object-fit: cover; }
.avr.gl { border-color: var(--gold); box-shadow: 0 0 0 6px rgba(245, 200, 75, .1), 0 10px 30px rgba(0, 0, 0, .6); }
.avr.sl { border-color: #C9D3DC; }
.avr.br { border-color: var(--bronze); }
.bdg { position: absolute; right: -6px; top: -4px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #04170A; background: linear-gradient(180deg, #6CFF9E, #22D267); border: 3px solid #0C1310; }
.bdg.gl { background: linear-gradient(180deg, #FFE79A, #D6A33A); color: #3A2600; }
.bdg.sl { background: linear-gradient(180deg, #F4F7F8, #B9C4CB); color: #1E272D; }
.bdg.br { background: linear-gradient(180deg, #F3B57C, #C9793A); color: #331A05; }
.cdp { display: flex; align-items: center; gap: 22px; width: 100%; max-width: 760px; margin: 0 auto; }
.cdp::before, .cdp::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18)); }
.cdp::after { background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent); }
.cdp .u { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.cdp b { font-family: var(--font-display); font-weight: 800; font-size: 32px; color: #fff; font-variant-numeric: tabular-nums; }
.cdp .u:first-of-type b { color: var(--g1); }
.cdp span { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--dim); }
.rowh { display: grid; grid-template-columns: 90px minmax(0, 1fr) 200px 140px; gap: 16px; padding: 0 26px 10px; font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--mut); text-transform: uppercase; }
.rowh span:nth-child(3), .rowh span:nth-child(4) { text-align: right; }
.rows { display: flex; flex-direction: column; gap: 10px; }
.rowc { display: grid; grid-template-columns: 90px minmax(0, 1fr) 200px 140px; align-items: center; gap: 16px; padding: 0 26px; min-height: 66px; border-radius: 12px; background: linear-gradient(180deg, #121A15, #0D1310); border: 1px solid var(--edge); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.rowc .rkh { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--mut); }
.rowc .pl { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; color: #fff; min-width: 0; }
.rowc .pl span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowc .wg { text-align: right; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.rowc .pz { text-align: right; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.upd { text-align: center; font-size: 12px; color: var(--dim); margin-top: 18px; }
.sh { text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .24em; color: var(--g1); text-transform: uppercase; margin-bottom: 22px; }
.paygrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ptile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 12px 18px; border-radius: 12px; background: linear-gradient(180deg, #121A15, #0D1310); border: 1px solid var(--edge); border-top-color: var(--edge2); }
.ptile span { font-size: 10px; font-weight: 800; letter-spacing: .22em; color: var(--mut); }
.ptile b { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: clamp(20px, 2vw, 28px); color: #fff; font-variant-numeric: tabular-nums; padding-right: .08em; white-space: nowrap; }
.ptile.p1 { border-color: rgba(245, 200, 75, .55); background: linear-gradient(180deg, rgba(245, 200, 75, .16), #0D1310); box-shadow: 0 0 0 1px rgba(245, 200, 75, .15), 0 14px 40px rgba(245, 200, 75, .12); }
.ptile.p1 b, .ptile.p1 span { color: var(--gold); }
.ptile.p2 { border-color: rgba(201, 211, 220, .35); }
.ptile.p2 b { color: var(--silver); }
.ptile.p3 { border-color: rgba(216, 139, 74, .4); }
.ptile.p3 b { color: var(--bronze); }
.prev-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; padding: 18px 24px; }
.prev-strip .eyebrow { flex: 1 1 100%; }
.prev-strip .pw { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.prev-strip .pw b { color: var(--mut); font-weight: 600; }
@media (max-width: 900px) {
  .rowh, .rowc { grid-template-columns: 60px minmax(0, 1fr) 130px 100px; gap: 12px; padding-left: 16px; padding-right: 16px; }
  .paygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .lb-head { padding: 40px 0 32px; gap: 12px; }
  .top3 { gap: 14px; }
  .rc { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 16px; padding: 18px 18px 18px 20px; }
  .rc.first { order: -1; margin-bottom: 0; }
  .rc .avw { margin-right: 4px; }
  .rc .avr { width: 60px; height: 60px; font-size: 22px; }
  .rc .nm { margin-top: 0; }
  .rc .lbl2 { display: none; }
  .rc .pz { margin-left: auto; margin-top: 0; font-size: 28px; }
  .rc .crown { top: -18px; left: 36px; transform: none; width: 30px; height: 30px; }
  .cdp { gap: 12px; }
  .cdp .u { min-width: 54px; }
  .cdp b { font-size: 26px; }
  .rowh { display: none; }
  .rowc { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "rank name prize" "rank wager prize"; row-gap: 2px; padding: 12px 14px; }
  .rowc .rkh { grid-area: rank; }
  .rowc .pl { grid-area: name; }
  .rowc .wg { grid-area: wager; text-align: left; font-size: 13px; color: var(--mut); padding-left: 42px; }
  .rowc .pz { grid-area: prize; }
  .paygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Bonuses page: hero split + partner card + claim timeline + CTA band */
.ph { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; padding-block: 72px 64px; position: relative; }
.ph h1 { font-size: clamp(56px, 7vw, 96px); }
.ph .l2 { display: flex; flex-direction: column; gap: 18px; }
.pcard2 { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-color: rgba(92, 245, 143, .3); }
.pcard2 .hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pcard2 .wm2 { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 54px; color: #fff; line-height: 1; }
.rating { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--ins); border: 1px solid rgba(255, 255, 255, .08); }
.rating b { font-size: 14px; }
.tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; margin-top: 36px; }
.tl::before { content: ""; position: absolute; left: 12%; right: 12%; top: 28px; height: 2px; background: linear-gradient(90deg, transparent, rgba(92, 245, 143, .5), rgba(92, 245, 143, .5), transparent); }
.tl .st { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 20px; }
.tl .no { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 18px; color: #04170A; background: linear-gradient(180deg, #6CFF9E, #22D267); box-shadow: 0 0 0 8px var(--bg), 0 10px 30px rgba(34, 210, 103, .35); }
.tl h3 { font-weight: 700; font-size: 17px; margin: 6px 0 0; }
.tl p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--mut); max-width: 300px; }
.cta-band { position: relative; overflow: hidden; border-radius: 20px; padding: 40px clamp(20px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(90deg, #17B457, #22D267 50%, #6CFF9E); color: #04170A; box-shadow: 0 24px 60px rgba(34, 210, 103, .25); }
.cta-band h3 { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: clamp(22px, 3vw, 30px); text-transform: uppercase; margin: 0; }
.cta-band p { margin: 6px 0 0; font-weight: 600; opacity: .8; }
.cta-band .b, .cta-band .b:hover { background: #04170A; color: #fff; border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
@media (max-width: 900px) {
  .ph { grid-template-columns: 1fr; gap: 28px; padding-block: 48px 40px; }
  .tl { grid-template-columns: 1fr; gap: 26px; }
  .tl::before { display: none; }
  .tl .st { flex-direction: row; text-align: left; align-items: flex-start; padding: 0; }
  .tl .st > div { display: flex; flex-direction: column; gap: 6px; }
  .tl .no { flex: none; width: 44px; height: 44px; font-size: 15px; box-shadow: 0 10px 30px rgba(34, 210, 103, .35); }
  .tl h3 { margin: 0; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .cta-band .b { width: 100%; }
}

/* Stat tiles (raffle) */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.stat { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; }
.stat b { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .note { font-size: 13px; color: var(--dim); }
.stat .timer div { width: 62px; height: 60px; }
.stat .timer b { font-size: 20px; }
.stat .timer span { font-size: 9px; }
.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.winners { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.winners .w { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--edge); font-size: 14px; }
.winners .w:last-child { border-bottom: 0; }
.winners .w span { color: var(--mut); }
.winners .w em { font-style: normal; color: var(--g1); font-weight: 700; }

/* ---------- Store ---------- */
.store-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; padding-block: 72px 48px; }
.store-head .intro { flex: 1 1 480px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.store-head h1 { font-size: clamp(44px, 6.4vw, 96px); }
.bal-card { flex: 0 1 380px; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-color: rgba(92, 245, 143, .3); }
.bal-card .big { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: #fff; font-variant-numeric: tabular-nums; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 9px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border: 1px solid rgba(255, 255, 255, .08); color: var(--mut); background: linear-gradient(180deg, #1B251F, #121A15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .4); }
.chip:hover { color: #fff; }
.chip.on { color: #04170A; border-color: transparent; background: linear-gradient(180deg, #6CFF9E, #22D267); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px rgba(34, 210, 103, .3); }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.prod { display: flex; flex-direction: column; overflow: hidden; }
.prod .art { position: relative; height: 176px; display: flex; align-items: center; justify-content: center; border-radius: 14px 14px 0 0; background: radial-gradient(circle at 50% 60%, rgba(46, 224, 107, .18), transparent 62%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 24px), var(--ins); box-shadow: inset 0 2px 12px rgba(0, 0, 0, .7); }
.prod .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prod .ic { display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 22px; background: linear-gradient(180deg, #1B251F, #0E1410); border: 1px solid rgba(92, 245, 143, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 30px rgba(0, 0, 0, .6); color: var(--g1); }
.prod .ic svg.i { width: 40px; height: 40px; stroke-width: 1.7; }
.prod .lab { position: absolute; top: 14px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.prod .lab.cat { left: 14px; background: rgba(5, 8, 6, .9); border: 1px solid rgba(255, 255, 255, .1); color: var(--soft); }
.prod .lab.stock { right: 14px; background: rgba(245, 200, 75, .16); color: var(--gold); }
.prod .lab.out { right: 14px; background: rgba(233, 17, 60, .16); color: #FF6B8A; }
.prod .body { display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 20px; flex: 1; }
.prod .name { font-weight: 600; font-size: 16px; line-height: 1.35; min-height: 44px; }
.prod .buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.price { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--g1); }

/* ---------- Rewards ---------- */
.reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.reward { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.reward .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reward h3 { font-size: 28px; color: #fff; }
.reward p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--mut); }
.claim-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding: 36px clamp(20px, 4vw, 48px); }
.claim-banner .txt { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.claim-banner h2 { font-size: clamp(26px, 3vw, 40px); }
.perk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.perk { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--ins); border: 1px solid rgba(0, 0, 0, .6); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05); font-weight: 600; font-size: 15px; }
.chk { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, #6CFF9E, #22D267); color: #04170A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 10px rgba(34, 210, 103, .3); flex: none; }
.chk svg.i { width: 15px; height: 15px; stroke-width: 3; }
.stars { color: var(--gold); letter-spacing: .1em; font-size: 16px; }
.code-card { flex: 0 1 360px; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-color: rgba(92, 245, 143, .3); }
.code-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 22px; }
.code-box .big { font-size: 48px; padding: 0; }

/* ---------- Games hub ---------- */
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 20px; }
.game { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 440px; padding: 210px 32px 32px; border-radius: 22px; border: 1px solid rgba(92, 245, 143, .25); background: linear-gradient(180deg, #121B15, #0C1310); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08); color: var(--txt); }
.game.keno { background: radial-gradient(circle at 80% 20%, rgba(46, 224, 107, .30), transparent 60%), linear-gradient(180deg, #121B15, #0C1310); }
.game.bj { background: radial-gradient(circle at 80% 20%, rgba(245, 200, 75, .18), transparent 60%), linear-gradient(180deg, #121B15, #0C1310); border-color: rgba(245, 200, 75, .3); }
.game::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--g1), transparent); }
.game.bj::after { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.game > * { position: relative; }
.game .deco { position: absolute; top: 28px; right: 28px; }
.game h2 { font-size: 56px; color: #fff; }
.game p { margin: 0; font-size: 15px; color: var(--mut); max-width: 420px; }
.kgrid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; }
.kcell { height: 34px; border-radius: 8px; background: #13201A; border: 1px solid rgba(255, 255, 255, .05); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--dim); }
.kcell.on { background: linear-gradient(180deg, #6CFF9E, #22D267); color: #04170A; border-color: transparent; box-shadow: 0 0 14px rgba(46, 224, 107, .5); }
.kcell.gold { background: linear-gradient(180deg, #FFE79A, #D6A33A); color: #3A2600; border-color: transparent; box-shadow: 0 0 14px rgba(214, 163, 58, .5); }
.pc { width: 64px; height: 92px; border-radius: 9px; background: linear-gradient(180deg, #FFFFFF, #E6ECE8); color: #0B1410; box-shadow: 0 10px 24px rgba(0, 0, 0, .6), inset 0 1px 0 #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; font-weight: 800; font-size: 16px; flex: none; }
.pc.red { color: #D83A3A; }
.pc.back { background: repeating-linear-gradient(45deg, #17B457 0 6px, #0F8A40 6px 12px); border: 4px solid #fff; }
.pc .flip { align-self: flex-end; transform: rotate(180deg); }
.pc small { font-size: 12px; }
.coming { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; padding: 28px; border-radius: 22px; border: 1px dashed rgba(92, 245, 143, .25); background: #090D0A; text-align: center; grid-column: 1 / -1; }
@media (max-width: 600px) {
  .game { padding: 170px 20px 24px; min-height: 380px; }
  .game h2 { font-size: 40px; }
  .game .deco { top: 20px; right: 16px; }
  .kgrid { grid-template-columns: repeat(6, 30px); gap: 5px; }
  .kgrid .kcell { height: 28px; font-size: 11px; }
  .game .deco .pc { width: 52px; height: 76px; font-size: 13px; }
}

/* ---------- Game frame (Keno / Blackjack) ---------- */
.frame { display: flex; flex-wrap: wrap; border-radius: 12px; overflow: hidden; background: #0F212E; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .04); color: #B1BAD3; }
.frame.noanim * { animation: none !important; transition: none !important; }
.side { flex: 0 0 280px; background: #213743; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.canvas { flex: 1 1 560px; min-width: 0; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; position: relative; }
.fbar { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: #213743; border-top: 1px solid rgba(255, 255, 255, .04); }
.fbar .wm { font-size: 16px; opacity: .9; }
.fbar .wm .bar { height: 2px; margin-top: 2px; }
.panel { flex: 1 1 100%; padding: 14px 16px; background: #1A2C3A; border-top: 1px solid rgba(255, 255, 255, .04); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.panel .hint { flex: 1 1 100%; font-size: 12px; color: #7F8DA3; }
@media (max-width: 900px) { .side { order: 2; flex: 1 1 100%; } .canvas { order: 1; padding: 16px 12px; } .fbar { order: 3; } .panel { order: 4; } }
.seg { display: flex; padding: 4px; border-radius: 999px; background: #0F212E; }
.seg button { flex: 1; height: 38px; border-radius: 999px; border: 0; background: transparent; color: #B1BAD3; font-weight: 700; font-size: 13px; cursor: pointer; }
.seg button.on { background: #2F4553; color: #fff; }
.seg button:disabled { opacity: .5; cursor: not-allowed; }
.seg.mini { padding: 3px; flex: 1 1 150px; }
.seg.mini button { height: 34px; font-size: 12px; }
.lbl { font-size: 12px; font-weight: 600; color: #B1BAD3; display: flex; justify-content: space-between; align-items: center; }
.lbl .sub { font-weight: 500; color: #7F8DA3; }
.fgroup { display: flex; flex-direction: column; gap: 6px; }
.field { display: flex; align-items: center; background: #0F212E; border: 2px solid #2F4553; border-radius: 6px; overflow: hidden; }
.field:focus-within { border-color: #557086; }
.field .ic { padding: 0 0 0 10px; display: flex; color: #00E701; }
.field input { flex: 1; min-width: 0; width: 100%; height: 40px; padding: 0 10px; border: 0; background: transparent; color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; outline: none; -moz-appearance: textfield; appearance: textfield; }
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input:disabled { color: #B1BAD3; }
.field .pct { padding-right: 10px; font-weight: 700; color: #B1BAD3; }
.field .ib { height: 40px; padding: 0 12px; border: 0; border-left: 2px solid #213743; background: #2F4553; color: #fff; font-weight: 700; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; }
.field .ib:hover { background: #557086; }
.field .ib:disabled { opacity: .5; cursor: not-allowed; }
.field.w86 { flex: 0 0 86px; }
.sel { appearance: none; -webkit-appearance: none; width: 100%; height: 42px; padding: 0 36px 0 12px; border: 2px solid #2F4553; border-radius: 6px; background: #0F212E url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B1BAD3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center; color: #fff; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; }
.sel:hover { border-color: #557086; }
.sel:disabled { opacity: .6; cursor: not-allowed; }
.sb { height: 42px; padding: 0 12px; border-radius: 6px; border: 0; background: #2F4553; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.sb:hover { background: #557086; }
.sb:disabled { opacity: .5; cursor: not-allowed; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.betbtn { height: 54px; border-radius: 6px; border: 0; background: #00E701; color: #0F212E; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); transition: background .12s; margin-top: 4px; }
.betbtn:hover { background: #1FFF20; }
.betbtn:disabled { opacity: .5; cursor: not-allowed; background: #00E701; }
.betbtn.stop, .betbtn.stop:hover { background: #E9113C; color: #fff; }
.betbtn.gold, .betbtn.gold:hover { background: linear-gradient(180deg, #FFE79A, #D6A33A 55%, #B8862A); color: #3A2600; }
.kboard { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; width: 100%; max-width: 640px; touch-action: none; }
.tile { aspect-ratio: 1 / 1; max-width: 100%; border-radius: 6px; border: 0; padding: 0; background: #2F4553; box-shadow: inset 0 2px 0 #3D5667, 0 2px 0 rgba(0, 0, 0, .35); color: #fff; font-weight: 800; font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: transform .12s ease-out, background .18s ease-out, box-shadow .18s; user-select: none; -webkit-user-select: none; }
.tile:hover { background: #557086; transform: translateY(-2px); }
.tile:active { transform: translateY(2px); }
.tile.sel { background: #7F32FF; box-shadow: inset 0 2px 0 #9B5CFF, 0 2px 0 rgba(0, 0, 0, .35); animation: punch .18s cubic-bezier(.34, 1.56, .64, 1); }
.tile.sel:hover { background: #8F4BFF; }
.tile.miss { background: #071824; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7); color: #E9113C; animation: sink .15s ease-out; }
.tile.miss:hover { background: #071824; transform: none; }
.tile.hit { background: #0F212E; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6); }
.tile.hit:hover { background: #0F212E; transform: none; }
.tile .gem { width: 58%; height: 58%; animation: gemin .28s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 0 8px rgba(0, 231, 1, .7)); }
.tile .tn-small { position: absolute; bottom: 3px; right: 6px; font-size: 10px; color: #00E701; }
.tile.lock { pointer-events: none; }
@media (max-width: 600px) { .tile { font-size: 15px; border-radius: 5px; } .kboard { gap: 6px; } }
@keyframes punch { 0% { transform: scale(1); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes sink { 0% { transform: scale(1); } 50% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes gemin { 0% { transform: scale(0); filter: drop-shadow(0 0 0 rgba(0, 231, 1, 0)); } 60% { transform: scale(1.15); filter: drop-shadow(0 0 16px rgba(0, 231, 1, 1)); } 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(0, 231, 1, .7)); } }
.strip { display: flex; gap: 6px; width: 100%; max-width: 640px; }
.pt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.pt .m { width: 100%; padding: 9px 4px; border-radius: 6px; background: #2F4553; color: #fff; font-weight: 800; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s, color .15s; }
.pt.dim .m { opacity: .45; }
.pt.lit .m { background: #00E701; color: #0F212E; opacity: 1; }
.pt .h { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #B1BAD3; }
.pt .h svg { width: 10px; height: 10px; }
@media (max-width: 600px) { .pt .m { font-size: 10px; padding: 7px 2px; } .pt .h { font-size: 10px; } }
.empty { width: 100%; max-width: 640px; padding: 13px; border-radius: 6px; background: #213743; color: #B1BAD3; text-align: center; font-weight: 600; font-size: 13px; }
.modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.modal .box { min-width: 190px; padding: 18px 30px; border-radius: 10px; background: #213743; border: 3px solid #00E701; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); animation: pop .18s ease-out; }
.modal .mult { font-size: 32px; font-weight: 800; color: #00E701; line-height: 1; }
.modal .pay { margin-top: 10px; padding-top: 10px; border-top: 1px solid #2F4553; font-weight: 700; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fb { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 6px; border: 0; background: transparent; color: #B1BAD3; font-weight: 600; font-size: 12px; cursor: pointer; white-space: nowrap; }
@media (max-width: 600px) { .fbar .wm { display: none; } .fb { padding: 0 8px; } }
.fb:hover, .fb.on { color: #fff; background: #2F4553; }
.fb svg.i { width: 16px; height: 16px; }
.tog { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #B1BAD3; cursor: pointer; border: 0; background: transparent; padding: 0; }
.tog .sw { width: 36px; height: 20px; border-radius: 999px; background: #2F4553; position: relative; transition: background .15s; flex: none; }
.tog .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.tog.on .sw { background: #00E701; }
.tog.on .sw::after { left: 18px; }
.kv { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: #B1BAD3; min-width: 0; }
.kv b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.kv b.pos { color: #00E701; }
.kv b.neg { color: #E9113C; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; color: #fff; }
.field input.mono-in { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; }

/* Blackjack table */
.bjtable { position: relative; overflow: hidden; flex: 1 1 560px; min-width: 0; min-height: 560px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; border-radius: 12px 0 0 0; border-right: 1px solid rgba(255, 255, 255, .04); background: radial-gradient(ellipse 70% 60% at 50% 50%, #17382A, #0C1A13 70%, #0A110C); box-shadow: inset 0 0 120px rgba(0, 0, 0, .5); }
.bjtable::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.bjtable > * { position: relative; }
.arc { position: absolute; left: 50%; top: 46%; width: 1100px; height: 600px; margin-left: -550px; border: 2px solid rgba(245, 200, 75, .14); border-radius: 50%; pointer-events: none; }
.hand { display: flex; flex-wrap: wrap; min-height: 120px; padding-right: 18px; }
.hand .pc { width: 84px; height: 120px; border-radius: 10px; padding: 10px; font-size: 20px; margin-right: -18px; }
.hand .pc .mid { font-size: 32px; align-self: center; }
.hand .pc small { font-size: 13px; }
.tot { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 999px; background: var(--ins); border: 1px solid var(--edge2); font-family: var(--font-display); font-weight: 800; font-size: 14px; }
.msg { padding: 12px 22px; border-radius: 999px; font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--edge2); background: var(--ins); }
.msg.win { color: var(--gold); border-color: rgba(245, 200, 75, .5); box-shadow: 0 0 30px rgba(245, 200, 75, .25); }
.msg.lose { color: var(--mut); }
.msg.push { color: var(--g1); border-color: rgba(92, 245, 143, .4); }
.bjchip { flex: 1; height: 46px; border-radius: 9px; font-family: var(--font-display); font-weight: 800; font-size: 14px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .08); color: #B1BAD3; background: linear-gradient(180deg, #1B251F, #121A15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px rgba(0, 0, 0, .4); }
.bjchip.on { color: #3A2600; border-color: transparent; background: linear-gradient(180deg, #FFE79A, #D6A33A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 16px rgba(214, 163, 58, .3); }
.bjchip:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) { .bjtable { order: 1; border-radius: 12px 12px 0 0; border-right: 0; min-height: 440px; padding: 20px 16px; } }
@media (max-width: 600px) { .hand .pc { width: 64px; height: 92px; padding: 8px; font-size: 16px; } .hand .pc .mid { font-size: 24px; } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); padding: 12px 18px; border-radius: 10px; background: #0F1912; border: 1px solid rgba(92, 245, 143, .35); color: var(--txt); font-weight: 600; font-size: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .2s, transform .2s; z-index: 50; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 900px) { .toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Profile page (profile.html) ---------- */
#pf[data-state="out"] .pf-in, #pf[data-state="error"] .pf-in { display: none; }
#pf:not([data-state="out"]):not([data-state="error"]) .pf-gate { display: none; }
#pf[data-state="loading"] .pf-in { opacity: .55; }
#pf[data-state="error"] .pf-gate .b { display: none; }
.pf-hero { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 64px 56px; }
.pf-card { position: relative; aspect-ratio: 1.586; border-radius: 26px; padding: clamp(18px, 2.6vw, 30px) clamp(20px, 3vw, 34px); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(108, 255, 158, .35), transparent 60%), radial-gradient(ellipse 60% 80% at 0% 100%, rgba(192, 76, 255, .28), transparent 60%), linear-gradient(135deg, #1E2A23 0%, #0D1410 55%, #16211B 100%);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 90px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18); transform: rotate(-3deg); }
.pf-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 14px); pointer-events: none; }
.pf-card::after { content: ""; position: absolute; top: -40%; left: -30%; width: 60%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent); transform: rotate(18deg); pointer-events: none; }
.pf-card > * { position: relative; z-index: 1; }
.pf-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pf-tier { font-size: clamp(9px, 1vw, 12px); font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--silver); padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .25); white-space: nowrap; }
.pf-card-mid { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }
.pf-chip { width: clamp(40px, 5vw, 58px); aspect-ratio: 1.32; border-radius: 9px; background: linear-gradient(135deg, #F7E39A, #C99A35 60%, #F2D27A); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pf-no { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 2vw, 22px); letter-spacing: .14em; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.pf-card-bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pf-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-avimg { width: clamp(34px, 4vw, 46px); height: clamp(34px, 4vw, 46px); border-radius: 50%; box-shadow: 0 0 0 2px var(--discord), 0 6px 16px rgba(0, 0, 0, .5); flex: none; object-fit: cover; }
.pf-lab { font-size: clamp(8px, .9vw, 10px); font-weight: 700; letter-spacing: .2em; color: rgba(255, 255, 255, .55); text-transform: uppercase; }
.pf-val { font-family: var(--font-display); font-weight: 800; font-size: clamp(13px, 1.6vw, 18px); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.pf-val.g { color: var(--g1); }
.pf-r h1 { font-size: clamp(44px, 5.6vw, 64px); margin-top: 10px; }
.pf-r .lead { margin-top: 14px; max-width: 480px; }
.pf-q { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.pf-q .ins { padding: 16px 18px; }
.pf-q .ins small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.pf-q .ins strong a { color: var(--g1); font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.pf-sec { padding-block: 20px 40px; }
.pf-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pf-h h2 { font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 20px; letter-spacing: -.01em; }
.pf-h a, .pf-cnt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--g1); }
.pf-st { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pf-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pf-st.ok { background: rgba(46, 224, 107, .12); border: 1px solid rgba(92, 245, 143, .3); color: var(--g1); }
.pf-st.wait { background: rgba(245, 200, 75, .12); border: 1px solid rgba(245, 200, 75, .32); color: var(--gold); }
.pf-st.no { background: rgba(255, 99, 99, .10); border: 1px solid rgba(255, 99, 99, .3); color: #FF8F8F; }
.pf-st.off { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--dim); }
.pf-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; flex: none; background: linear-gradient(180deg, #1B251F, #0E1410); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); color: var(--g1); }
.pf-ic svg.i { width: 20px; height: 20px; }
.pf-ic.dc { background: linear-gradient(180deg, #6B77FF, #4A57E8); border-color: transparent; color: #fff; }
.pf-ic.stk { background: #0F212E; border-color: rgba(255, 255, 255, .12); color: #fff; font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 15px; }
.pf-ic.kick { background: #0B0E0C; border-color: rgba(83, 252, 24, .35); color: #53FC18; }
.pf-ic.x { background: #000; border-color: rgba(255, 255, 255, .18); color: #fff; font-weight: 800; font-size: 18px; }
.pf-claims { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.pf-stub { display: grid; grid-template-columns: 120px minmax(0, 1fr); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #131B16, #0E1410); border: 1px solid var(--edge); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.pf-stub .v { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px 10px; background: linear-gradient(180deg, rgba(46, 224, 107, .16), rgba(46, 224, 107, .04)); border-right: 2px dashed rgba(255, 255, 255, .12); }
.pf-stub .v b { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 26px; white-space: nowrap; }
.pf-stub .v span { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--mut); text-transform: uppercase; text-align: center; }
.pf-stub .v.wait { background: linear-gradient(180deg, rgba(245, 200, 75, .16), rgba(245, 200, 75, .03)); }
.pf-stub .v.no { background: linear-gradient(180deg, rgba(255, 99, 99, .12), rgba(255, 99, 99, .02)); }
.pf-stub .v::before, .pf-stub .v::after { content: ""; position: absolute; right: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.pf-stub .v::before { top: -11px; }
.pf-stub .v::after { bottom: -11px; }
.pf-stub .d { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 16px 20px; }
.pf-stub .d .t { font-weight: 700; font-size: 16px; }
.pf-stub .d .s { font-size: 12.5px; color: var(--dim); }
.pf-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf-prod { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.pf-prod .art { height: 120px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(245, 200, 75, .18), transparent 70%), var(--ins); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .7); }
.pf-prod .art svg.i { width: 54px; height: 54px; color: var(--gold); stroke-width: 1.6; }
.pf-prod .t { font-weight: 700; font-size: 16px; }
.pf-prod .s { font-size: 12.5px; color: var(--dim); margin-top: 4px; }
.pf-prod .f { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pf-prod .f b { font-family: var(--font-display); font-weight: 800; }
.pf-prod .f b small { font-size: 11px; color: var(--dim); }
.pf-empty { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 22px 24px; }
.pf-empty .tx { flex: 1 1 260px; }
.pf-empty .tx b { display: block; font-size: 16px; }
.pf-empty .tx span { display: block; margin-top: 4px; font-size: 14px; color: var(--mut); }
.pf-conn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pf-conn .card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.pf-conn .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pf-conn .t { font-weight: 800; font-size: 16px; }
.pf-conn .s { font-size: 12.5px; color: var(--dim); margin-top: 2px; overflow-wrap: anywhere; }
.pf-conn .foot { margin-top: auto; }
.pf-link { display: flex; gap: 8px; }
.pf-link input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .1); background: var(--ins); color: var(--txt); font: inherit; font-size: 14px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.pf-link input:focus { outline: 2px solid var(--g1); outline-offset: 1px; }
.pf-link .b { height: 40px; padding: 0 14px; }
.pf-msg { font-size: 12.5px; color: var(--mut); min-height: 1em; }
.pf-msg.err { color: #FF8F8F; }
.pf-unlink { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); cursor: pointer; }
.pf-unlink:hover, .pf-unlink.arm { color: #FF8F8F; }
@media (max-width: 1100px) { .pf-conn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pf-hero { grid-template-columns: 1fr; gap: 40px; padding-block: 40px 36px; }
  .pf-card { max-width: 520px; width: 100%; margin: 0 auto; transform: rotate(-2deg); }
  .pf-prods { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pf-q { gap: 10px; }
  .pf-q .ins { padding: 14px; }
  .pf-q .ins strong { font-size: 18px; }
  .pf-conn { grid-template-columns: 1fr; }
  .pf-stub { grid-template-columns: 100px minmax(0, 1fr); }
  .pf-stub .v b { font-size: 22px; }
  .pf-card { border-radius: 18px; }
}

/* ---------- Motion: page transitions + staggered entrance ----------
   1. Moving between pages cross-fades (cross-document View Transitions; header and tab bar stay put
      because their pixels are identical on both pages).
   2. On load, blocks rise in one after another in reading order: hero first, then the sections below.
      Pure CSS, so nothing flashes before the scripts run and everything still appears without JS.
   3. site.js holds back blocks that start below the fold and reveals them as they scroll into view
      (.x4-rv → .x4-in); lists the scripts render later (leaderboard, store, profile) rise in when inserted.
   The `translate` property is used (not `transform`), so tilts and hover lifts on cards are untouched.
   With "Reduce motion" on, the same sequence plays as fades without movement (see the end of this block). */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }

@property --x4n { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes x4-rise { from { opacity: 0; translate: 0 22px; } }
@keyframes x4-fade { from { opacity: 0; } }

main { --x4b: 240ms; }
main > section:first-child, .pf-gate { --x4b: 40ms; }
:where(.stats, .pf-q, .tickets, .how, .tl, .rows, .paygrid, .prod-grid, .pf-claims, .pf-prods, .pf-conn, .top3) { --x4b: 330ms; }

:where(
  main > section > .wrap > :not(.l2, .intro, .lb-head, .pf-r, .stats, .tickets, .how, .tl, .rows, .paygrid, .prod-grid, .pf-claims, .pf-prods, .pf-conn, .top3, .page-head > :first-child),
  :is(.l2, .intro, .lb-head, .page-head > :first-child) > *,
  .pf-r > :not(.pf-q),
  :is(.stats, .pf-q, .tickets, .how, .tl, .rows, .paygrid, .prod-grid, .pf-claims, .pf-prods, .pf-conn, .top3) > *
) {
  animation: x4-rise .7s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--x4b, 240ms) + var(--x4n) * 65ms);
}
main :nth-child(2) { --x4n: 1; }
main :nth-child(3) { --x4n: 2; }
main :nth-child(4) { --x4n: 3; }
main :nth-child(5) { --x4n: 4; }
main :nth-child(6) { --x4n: 5; }
main :nth-child(7) { --x4n: 6; }
main :nth-child(8) { --x4n: 7; }
main :nth-child(9) { --x4n: 8; }
main :nth-child(10) { --x4n: 9; }
main :nth-child(n+11) { --x4n: 10; }
:where(.hero) > :is(.beams, .gridbg) { animation: x4-fade 1.1s ease-out backwards; }

/* below the fold: held back by site.js until scrolled into view */
.x4-rv:not(.x4-in) { animation: none !important; opacity: 0 !important; }
.x4-rv.x4-in { animation: x4-rise .7s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: var(--x4d, 0ms); }
/* lists re-rendered later (5-min leaderboard refresh, Stake link/unlink) update without replaying */
.x4-still > *, #pf.x4-still :is(.pf-claims, .pf-prods, .pf-conn) > * { animation: none; }
/* browsers without cross-page transitions: site.js fades the page out before following a link */
html.x4-leave main { opacity: 0; translate: 0 -8px; transition: opacity .16s ease, translate .16s ease; }

/* "Reduce motion" turned on (OS setting): nothing slides; blocks only fade in, still one after another,
   and pages still cross-fade (a dissolve, as Apple/WCAG suggest instead of movement). The global
   reduced-motion rule above shortens every other animation and transition as before. */
@media (prefers-reduced-motion: reduce) {
  @keyframes x4-rise { from { opacity: 0; } }
  main :where(
    main > section > .wrap > :not(.l2, .intro, .lb-head, .pf-r, .stats, .tickets, .how, .tl, .rows, .paygrid, .prod-grid, .pf-claims, .pf-prods, .pf-conn, .top3, .page-head > :first-child),
    :is(.l2, .intro, .lb-head, .page-head > :first-child) > *,
    .pf-r > :not(.pf-q),
    :is(.stats, .pf-q, .tickets, .how, .tl, .rows, .paygrid, .prod-grid, .pf-claims, .pf-prods, .pf-conn, .top3) > *,
    .x4-rv.x4-in
  ) { animation-duration: .6s !important; }
  main :where(.hero) > :is(.beams, .gridbg) { animation-duration: 1.1s !important; }
  html.x4-leave main { translate: none; transition-duration: .16s !important; }
}