/* =======================================================
   FOOKIN' FRIDAY — Hype overhaul
   Three themes via [data-theme]: vegas | ember | neon
   ======================================================= */

/* ---------- Base tokens shared ---------- */
:root{
  --base:#08070A;
  --surf1:#111114;
  --surf2:#17181C;
  --surf3:#1F2025;
  --line:#2A2B31;
  --txt:#ECEDEE;
  --txt-dim:#B8BBC2;
  --txt-mute:#6E7178;
  --gold:#CBA44D;
  --gold-rich:#D6B15D;
  --gold-deep:#9A7A32;
  --gold-glow:#FFD27A;
  --gold-bright:#FFE4A6;
  --brown-warm:#8B6F3F;
  --brown-ember:#C4823C;
  --discord:#5865F2;
  --discord-dim:#4752C4;
  --ok:#44C08A;
  --warn:#E7B64B;
  --err:#E56363;
  --radius:18px;
  --radius-sm:12px;
  --stage-max:1280px;
}

/* ---------- Theme: VEGAS (default) ---------- */
[data-theme="vegas"]{
  --base:#08070A;
  --accent:#FFD27A;
  --accent-deep:#9A7A32;
  --accent-soft:rgba(203,164,77,.2);
  --hero-bg1:#1A1106;
  --hero-bg2:#08070A;
  --ticker-bg:linear-gradient(90deg,#1A1106,#0E0B06,#1A1106);
  --surface-tint:rgba(203,164,77,.04);
  --cta-grad:linear-gradient(135deg,#FFE4A6,#D6B15D 55%,#9A7A32);
  --cta-text:#140C02;
  --cta-shadow:0 10px 30px rgba(203,164,77,.35), 0 0 0 1px rgba(255,228,166,.2) inset;
  --ring:rgba(255,210,122,.55);
}

/* ---------- Theme: EMBER ---------- */
[data-theme="ember"]{
  --base:#0A0605;
  --accent:#FF6B3D;
  --accent-deep:#8E2B13;
  --accent-soft:rgba(255,107,61,.18);
  --hero-bg1:#1F0906;
  --hero-bg2:#0A0605;
  --ticker-bg:linear-gradient(90deg,#2A0C07,#150604,#2A0C07);
  --surface-tint:rgba(255,107,61,.05);
  --cta-grad:linear-gradient(135deg,#FFB97A,#FF6B3D 50%,#B83314);
  --cta-text:#140403;
  --cta-shadow:0 10px 30px rgba(255,107,61,.4), 0 0 0 1px rgba(255,185,122,.2) inset;
  --ring:rgba(255,107,61,.6);
  --gold-glow:#FFB97A;
  --gold-bright:#FFD9BC;
}

/* ---------- Theme: NEON NOIR ---------- */
[data-theme="neon"]{
  --base:#050610;
  --accent:#00F5D4;
  --accent-deep:#006A5E;
  --accent-soft:rgba(0,245,212,.15);
  --hero-bg1:#070E18;
  --hero-bg2:#050610;
  --ticker-bg:linear-gradient(90deg,#081219,#04060C,#081219);
  --surface-tint:rgba(0,245,212,.04);
  --cta-grad:linear-gradient(135deg,#FFE4A6,#D6B15D 50%,#8C6A1E);
  --cta-text:#140C02;
  --cta-shadow:0 10px 30px rgba(255,210,122,.3), 0 0 30px rgba(0,245,212,.2), 0 0 0 1px rgba(0,245,212,.25) inset;
  --ring:rgba(0,245,212,.6);
  --gold-glow:#FFD27A;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--base);color:var(--txt);
  font:16px/1.55 "Manrope",system-ui,sans-serif;
  min-height:100vh;scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{
  background:
    radial-gradient(ellipse 1200px 600px at 50% -100px, var(--hero-bg1), transparent 70%),
    radial-gradient(ellipse 900px 500px at 0% 30%, var(--surface-tint), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 70%, var(--surface-tint), transparent 60%),
    var(--base);
  background-attachment:fixed;
}
button,input,select{font:inherit;color:inherit}
a{color:inherit}

.gold-text{
  background:linear-gradient(135deg,var(--accent-deep),var(--gold-rich) 35%,var(--gold-bright) 55%,var(--accent) 75%,var(--accent-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:shimmer 6s linear infinite;
}
@keyframes shimmer{to{background-position:-200% 0}}

.hidden{display:none !important}

/* ================================================================
   LIVE TICKER
   ================================================================ */
.live-ticker{
  position:sticky;top:0;z-index:110;
  height:36px;overflow:hidden;
  background:var(--ticker-bg);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.ticker-rail{
  display:flex;align-items:center;gap:40px;
  white-space:nowrap;height:100%;padding-right:40px;
  /* One-time entrance: rail starts fully off-screen to the right and slides
     in. Once it reaches its natural start, the seamless infinite scroll
     takes over (translateX(0) -> translateX(-50%) lands on the duplicate
     half so the loop point is invisible). */
  animation:
    tickerEntrance 8s linear forwards,
    tickerScroll 40s linear 8s infinite;
  will-change:transform;
}
@keyframes tickerEntrance{
  from{transform:translateX(100vw)}
  to{transform:translateX(0)}
}
@media (max-width:600px){
  /* Mobile scroll: 30s cycle. Desktop is 40s; mobile feels noticeably slower
     than desktop at the same duration because the narrower viewport makes
     each item linger longer in view. 30s lands at a brisk-but-readable pace. */
  .ticker-rail{
    animation:
      tickerEntrance 3s linear forwards,
      tickerScroll 30s linear 3s infinite;
  }
}
.ticker-item{
  display:inline-flex;align-items:center;gap:8px;
  font:700 12px/1 "Manrope",sans-serif;
  color:var(--txt-dim);letter-spacing:.3px;
  flex-shrink:0;
}
.ticker-item .wallet{font-family:"DM Mono",monospace;color:var(--accent);}
.ticker-item .action{color:var(--txt)}
.ticker-item .amt{color:var(--gold-bright);font-weight:800}
.ticker-item .amt.free-entry-amt{color:#9AA3F5}  /* Discord blurple — matches the Free Entry ticket ribbon */
.ticker-item .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
[data-motion="reduced"] .ticker-rail{animation: tickerScroll 180s linear infinite}

/* ================================================================
   TOP BAR
   ================================================================ */
.top-bar{
  position:sticky;top:36px;z-index:100;
  background:rgba(8,7,10,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:12px 20px;
}
.top-inner{max-width:var(--stage-max);margin:0 auto;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt);font:900 17px/1 "Playfair Display",serif;letter-spacing:.02em}
.brand-mark{
  /* Matches the raining F-ball look from the coin-rain canvas: a circular
     sphere with an off-axis highlight (upper-left), warm mid-tones and a
     deep shadow rim, with a dark "F" in Manrope 900 centered on top. */
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 28%, #FFF3C9 0%, #F2C86A 28%, #8A5F22 82%, #2E1D08 100%);
  color:#181E02;font:900 15px/1 "Manrope",sans-serif;
  box-shadow:
    0 4px 14px rgba(0,0,0,.45),                     /* ambient drop */
    inset 0 -3px 6px rgba(0,0,0,.35),               /* terminator shadow */
    inset 2px 2px 4px rgba(255,245,210,.45);         /* rim bounce */
  text-shadow:0 1px 0 rgba(255,245,210,.35);
}
.brand-suffix{color:var(--accent)}
.anchors{display:flex;gap:20px;margin-left:16px}
.anchors a{color:var(--txt-dim);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.02em;transition:color .2s}
.anchors a:hover{color:var(--gold-bright)}
.top-spacer{flex:1}
.top-actions{display:flex;gap:10px;align-items:center}
.viewers-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:999px;font:700 11px/1 "Manrope",sans-serif;color:var(--txt-dim);
  letter-spacing:.04em;
}
.viewers-pill #viewersNum{color:var(--txt);font-weight:900;font-variant-numeric:tabular-nums}
.viewers-label{color:var(--txt-mute);text-transform:uppercase;font-size:10px}
.pulse-dot{
  width:7px;height:7px;border-radius:50%;background:#44C08A;
  box-shadow:0 0 0 0 rgba(68,192,138,.7);
  animation:liveDot 1.8s ease infinite;
}
@keyframes liveDot{
  0%{box-shadow:0 0 0 0 rgba(68,192,138,.7)}
  70%{box-shadow:0 0 0 8px rgba(68,192,138,0)}
  100%{box-shadow:0 0 0 0 rgba(68,192,138,0)}
}
/* Mobile hamburger chip — hidden on desktop, animated burger->X on toggle. */
.menu-chip{display:none}
@media(max-width:860px){
  .anchors{display:none}
  .viewers-pill .viewers-label{display:none}
  .menu-chip{
    display:inline-flex;flex-direction:column;align-items:stretch;justify-content:center;
    gap:5px;
    width:40px;height:40px;
    padding:10px 8px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    border-radius:10px;
    cursor:pointer;
    transition:background .15s, border-color .15s;
  }
  .menu-chip:hover, .menu-chip:focus-visible{
    background:rgba(255,210,122,.08);
    border-color:var(--gold);
    outline:none;
  }
  .menu-chip span{
    display:block;height:2px;background:var(--gold);border-radius:1px;
    transition:transform .2s ease, opacity .15s ease;
    transform-origin:center;
  }
  .menu-chip.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-chip.is-open span:nth-child(2){opacity:0}
  .menu-chip.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* When open: render the anchors as a vertical dropdown dropping out of the
     top-bar's bottom edge, full-width on the viewport. */
  .top-bar.nav-open .anchors{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%;left:0;right:0;
    margin:0;
    padding:14px 18px 18px;
    gap:6px;
    background:linear-gradient(180deg, rgba(15,11,6,.98), rgba(10,8,4,.98));
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,.45);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    z-index:99;
  }
  .top-bar.nav-open .anchors a{
    font-size:15px;font-weight:700;
    padding:10px 6px;
    border-radius:8px;
    color:var(--txt);
  }
  .top-bar.nav-open .anchors a:hover,
  .top-bar.nav-open .anchors a:focus-visible{
    background:rgba(255,210,122,.06);
    color:var(--gold-bright);
  }
}
@media(max-width:860px){
  /* Wordmark + Enter Draw CTA both stay in the top-bar. The hamburger chip
     becomes a floating action button at the bottom-right of the viewport
     so it doesnt compete for horizontal space with the brand and CTA. */
  .top-bar{padding:10px 12px}
  .top-inner{gap:10px}
  .brand{flex-shrink:0}
  .menu-chip{
    position:fixed;
    bottom:18px;right:18px;
    z-index:150;
    width:48px;height:48px;
    padding:12px 10px;
    background:linear-gradient(135deg, rgba(15,11,6,.95), rgba(28,20,8,.95));
    border-color:var(--gold);
    box-shadow:
      0 8px 24px rgba(0,0,0,.6),
      0 0 0 1px rgba(255,210,122,.15),
      inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .menu-chip:hover, .menu-chip:focus-visible{
    background:linear-gradient(135deg, rgba(40,28,12,.95), rgba(60,40,16,.95));
  }
  .menu-chip span{height:2.5px}
}
@media(max-width:380px){
  /* Smallest phones — shrink the brand a touch but keep both words visible. */
  .brand{font-size:15px;gap:8px}
  .brand-mark{width:28px;height:28px;font-size:13px}
  .top-bar{padding:10px 10px}
  .top-inner{gap:8px}
  .top-actions .btn-hero{padding:8px 12px;font-size:12px}
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:11px 18px;border-radius:12px;font-weight:800;border:0;cursor:pointer;
  font-size:13px;transition:transform .1s,filter .15s,box-shadow .2s;
  white-space:nowrap;letter-spacing:.01em;
  text-decoration:none;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-hero{
  color:var(--cta-text);background:var(--cta-grad);
  box-shadow:var(--cta-shadow);
  position:relative;overflow:hidden;
}
.btn-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-100%);
}
.btn-hero:hover:not(:disabled){filter:brightness(1.08) saturate(1.1)}
.btn-hero:hover:not(:disabled)::after{animation:sheen .9s ease}
@keyframes sheen{to{transform:translateX(100%)}}
.btn-discord{color:#fff;background:linear-gradient(135deg,#7B85FF,#4752C4);box-shadow:0 8px 22px rgba(88,101,242,.35)}
.btn-discord:hover:not(:disabled){filter:brightness(1.1)}
.btn-ghost{color:var(--txt);background:transparent;border:1px solid var(--line)}
.btn-ghost:hover:not(:disabled){border-color:var(--ring);background:rgba(255,255,255,.02)}
.btn-sm{padding:7px 14px;font-size:12px;border-radius:10px}
.btn-lg{padding:14px 24px;font-size:14px;border-radius:14px}
.btn-xl{padding:18px 32px;font-size:16px;border-radius:16px}
.cta-arrow{display:inline-block;transition:transform .2s}
.btn:hover .cta-arrow{transform:translateX(3px)}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  position:relative;overflow:hidden;
  padding:56px 20px 68px;
  min-height:92vh;
  display:flex;align-items:center;justify-content:center;
}
.coin-rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.85}
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, transparent 40%, var(--base) 95%),
    linear-gradient(180deg, transparent 0%, transparent 60%, var(--base) 100%);
}
.hero-inner{
  position:relative;z-index:2;max-width:var(--stage-max);width:100%;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;
  font:800 11px/1 "Manrope",sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-dim);margin-bottom:32px;
}
.hero-eyebrow b{color:var(--gold-bright);font-weight:900}
.paused-banner{
  max-width:720px;margin:24px auto 32px;padding:32px 28px;text-align:center;
  background:linear-gradient(180deg,rgba(229,99,99,.12),rgba(229,99,99,.04));
  border:1px solid rgba(229,99,99,.5);border-radius:20px;
  box-shadow:0 10px 40px rgba(229,99,99,.2);
}
.paused-banner-icon{font-size:44px;line-height:1;margin-bottom:10px;opacity:.9}
.paused-banner-title{font:900 26px/1.2 "Playfair Display",serif;color:var(--txt);margin-bottom:8px}
.paused-banner-sub{font-size:14px;color:var(--txt-dim);line-height:1.5;max-width:520px;margin:0 auto}
.paused-banner-countdown{margin-top:20px}
.paused-cd-row{display:flex;justify-content:center;gap:12px;flex-wrap:nowrap}
.paused-cd-cell{
  flex:1 1 0;min-width:0;padding:10px 14px;border-radius:12px;
  background:rgba(203,164,77,.08);border:1px solid rgba(203,164,77,.35);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.paused-cd-num{font:900 28px/1 "Bebas Neue","Manrope",sans-serif;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.paused-cd-label{font-size:10px;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.paused-cd-meta{margin-top:12px;font-size:12px;color:var(--txt-dim)}
.paused-cd-meta strong{color:var(--txt)}
.eyebrow-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent);
  animation:liveDot 1.6s ease infinite;
}

.hero-title{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-bottom:40px;line-height:1;
}
.title-line{
  font:700 22px/1.2 "Manrope",sans-serif;
  color:var(--txt-dim);letter-spacing:.01em;
}
.title-line.small{font-size:clamp(14px, 2.2vw, 22px);text-transform:uppercase;letter-spacing:.22em;font-weight:800;color:var(--txt-mute)}
.title-line.in-fook{color:var(--txt-dim)}
.title-line.in-fook .jackpot-denom{color:var(--gold-bright);font-weight:900;font-family:"DM Mono",monospace;letter-spacing:.04em}

.title-jackpot{
  display:inline-flex;align-items:flex-start;justify-content:center;
  font-family:"Bebas Neue","Playfair Display",serif;
  font-weight:900;
  font-size:clamp(72px, 16vw, 220px);
  line-height:.88;
  letter-spacing:-0.02em;
  background:linear-gradient(180deg,var(--gold-bright) 0%, var(--accent) 35%, var(--gold-rich) 55%, var(--accent-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 8px 40px rgba(255,210,122,.35));
  position:relative;
  margin:8px 0;
}
[data-theme="ember"] .title-jackpot{filter:drop-shadow(0 8px 40px rgba(255,107,61,.4))}
[data-theme="neon"] .title-jackpot{filter:drop-shadow(0 8px 40px rgba(0,245,212,.25)) drop-shadow(0 0 30px rgba(255,210,122,.35))}
.jackpot-currency{font-size:.72em;padding-top:.05em;margin-right:.04em;opacity:.95;background:linear-gradient(180deg,var(--gold-bright) 0%, var(--accent) 35%, var(--gold-rich) 55%, var(--accent-deep) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.jackpot-digits{display:inline-flex;font-variant-numeric:tabular-nums}
.jackpot-digit{
  display:inline-block;min-width:.62em;text-align:center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.jackpot-digit.bump{animation:digitBump .55s ease}
@keyframes digitBump{
  0%{transform:translateY(0) scale(1)}
  35%{transform:translateY(-8%) scale(1.12)}
  100%{transform:translateY(0) scale(1)}
}

/* countdown */
.countdown-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:32px}
.countdown-label{
  font:800 11px/1 "Manrope",sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--txt-dim);
}
.countdown-big{
  display:flex;align-items:stretch;gap:10px;
  width:100%;max-width:520px;
}
.cd-unit{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 18px;min-width:0;flex:1 1 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.35);
  text-align:center;
}
.cd-num{
  display:block;font:900 40px/1 "Bebas Neue","Playfair Display",serif;
  color:var(--gold-bright);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(255,210,122,.2);
}
.cd-label{display:block;font-size:10px;color:var(--txt-mute);letter-spacing:.18em;text-transform:uppercase;margin-top:6px;font-weight:800}
.cd-sep{font:900 34px "Bebas Neue",serif;color:var(--accent);opacity:.55;animation:cdBlink 1s ease infinite;padding-bottom:12px}
@keyframes cdBlink{50%{opacity:.15}}
@media (max-width:480px){
  .cd-unit{padding:10px 8px}
  .cd-num{font-size:30px}
  .cd-label{font-size:9px;letter-spacing:.12em}
  .countdown-big{gap:6px}
  .paused-cd-cell{padding:8px 6px}
  .paused-cd-num{font-size:22px}
  .paused-cd-label{font-size:9px;letter-spacing:.08em}
  .paused-cd-row{gap:8px}
}
.tick-secs{animation:secPulse 1s ease infinite}
@keyframes secPulse{0%,100%{text-shadow:0 0 30px rgba(255,210,122,.2)}50%{text-shadow:0 0 40px rgba(255,210,122,.5)}}
.cd-meta{color:var(--txt-dim);font-size:12px;margin-top:4px;line-height:1.6}
.cd-meta strong{color:var(--txt);font-weight:800}
.cd-meta .local{color:var(--gold-bright)}

.hero-cta-row{display:flex;gap:14px;margin-bottom:48px;flex-wrap:wrap;justify-content:center}

/* Prize ladder */
.prize-ladder{
  width:100%;max-width:var(--stage-max);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border:1px solid var(--line);border-radius:20px;padding:22px;
  margin-bottom:28px;
}
.ladder-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:0 4px 16px;flex-wrap:wrap;
}
.ladder-title{font:900 13px/1 "Manrope",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--txt)}
.ladder-sub{font-size:12px;color:var(--txt-dim)}
.ladder-rungs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.rung{
  position:relative;padding:16px 14px 14px;
  background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;
  transition:border-color .3s,background .3s;
  overflow:hidden;
}
.rung.unlocked{border-color:var(--accent-soft)}
.rung.locked{
  opacity:.62;
  background:rgba(255,255,255,.015);
  border-style:dashed;
}
.rung.locked .rung-prize{color:var(--txt-mute)}
.rung.locked .rung-fook{opacity:.8}
.rung.locked .rung-status{color:var(--txt-mute)}
.rung-match{font:800 11px/1 "Manrope",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-mute)}
.rung-prize{font:900 34px/1 "Bebas Neue",serif;color:var(--txt);letter-spacing:.01em;margin-top:2px}
.rung-meta{font-size:11px;color:var(--txt-dim);line-height:1.4;min-height:2.4em}
.rung-bar{height:4px;width:100%;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-top:4px}
.rung-fill{height:100%;background:linear-gradient(90deg,var(--brown-ember),var(--gold-bright));border-radius:2px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.rung-status{font:700 10px/1.2 "DM Mono",monospace;color:var(--accent);margin-top:auto;padding-top:6px;letter-spacing:.04em}
.rung.jackpot{
  border-color:rgba(255,210,122,.5);
  background:linear-gradient(180deg,rgba(255,210,122,.1),rgba(154,122,50,.03));
  box-shadow:0 0 30px rgba(255,210,122,.12), inset 0 0 0 1px rgba(255,210,122,.15);
}
.rung.jackpot .rung-prize{font-size:30px}
@media(max-width:760px){
  .ladder-rungs{grid-template-columns:repeat(2,1fr)}
  .rung.jackpot{grid-column:span 2}
}

/* hero pulse */
.hero-pulse{
  width:100%;max-width:var(--stage-max);
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
  border:1px solid var(--line);border-radius:16px;
  overflow:hidden;
}
.pulse-item{padding:18px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;text-align:left}
.pulse-item:last-child{border-right:0}
.pulse-label{font-size:10px;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.14em;font-weight:800}
.pulse-value{font:900 22px/1.2 "Manrope",sans-serif;color:var(--txt);display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.pulse-unit{font:700 10px/1 "DM Mono",monospace;color:var(--txt-mute);letter-spacing:.04em;text-transform:uppercase}
.pulse-delta{font-size:11px;font-weight:800;color:var(--ok);opacity:0;transition:opacity .2s}
.pulse-delta.show{opacity:1;animation:deltaPop .8s ease}
@keyframes deltaPop{0%{transform:translateY(4px);opacity:0}20%{opacity:1}100%{opacity:.7}}
.tier-apex-text{
  background:linear-gradient(135deg,#FFE4A6,#D6B15D);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(max-width:760px){
  .hero-pulse{grid-template-columns:repeat(2,1fr)}
  .pulse-item{border-right:0;border-bottom:1px solid var(--line)}
  .pulse-item:nth-child(even){border-left:1px solid var(--line)}
  /* Only the genuinely-last visual row should drop its bottom border. With 5
     items in a 2-col grid the final row contains just item 5 (Last winner),
     so scoping to `:last-child` prevents Biggest tier (item 4, mid row) from
     dropping its border and looking disconnected from Burned this draw. */
  .pulse-item:last-child{border-bottom:0}
  /* Lone last item on its row: span both columns so it fills the space. */
  .hero-pulse > .pulse-item:last-child:nth-child(odd){
    grid-column:1 / -1;border-left:0;text-align:center;align-items:center;
  }
}

/* ================================================================
   SECTIONS
   ================================================================ */
.section{max-width:var(--stage-max);margin:0 auto;padding:56px 20px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.section-kicker{font:800 11px/1 "Manrope",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.section-title{font:900 clamp(24px,3.5vw,40px)/1.1 "Playfair Display",serif;letter-spacing:-0.01em;color:var(--txt);max-width:780px}
.section-sub{font-size:14px;color:var(--txt-dim);margin-top:10px;max-width:680px;line-height:1.6}
.section-sub code{font-family:"DM Mono",monospace;color:var(--gold-bright);background:rgba(255,255,255,.03);padding:2px 6px;border-radius:4px;font-size:12px}

.card{
  background:var(--surf1);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.03);
  padding:22px;
}

/* ================================================================
   DRAW
   ================================================================ */
.draw-section .section-head{align-items:flex-start}
.draw-status-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  font:800 11px/1 "Manrope",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim);
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--txt-mute)}
.status-dot.idle{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.status-dot.drawing{background:var(--err);box-shadow:0 0 10px var(--err);animation:liveDot 1s ease infinite}
.status-dot.complete{background:var(--ok);box-shadow:0 0 10px var(--ok)}

.draw-shell{
  position:relative;background:var(--surf1);border:1px solid var(--line);border-radius:22px;
  box-shadow:0 16px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
  padding:20px;overflow:hidden;
}
.draw-shell::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.canvas-wrap{
  position:relative;display:flex;justify-content:center;align-items:center;
  background:radial-gradient(ellipse at 50% 40%,var(--surface-tint),transparent 70%);
  border-radius:16px;overflow:hidden;
}
canvas#tumbler{display:block;max-width:100%;height:auto}

.draw-overlay{
  position:absolute;inset:20px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  pointer-events:none;text-align:center;padding:32px 20px 20px;border-radius:16px;
  background:radial-gradient(ellipse at 50% 40%,rgba(8,7,10,.75),rgba(8,7,10,.5) 60%,transparent 85%);
  transition:opacity .5s;z-index:2;
}
.draw-overlay.hidden{opacity:0;pointer-events:none}
.overlay-eyebrow{color:var(--accent);font:800 11px/1 "Manrope",sans-serif;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.overlay-countdown{display:flex;gap:10px;margin-bottom:14px}
.overlay-cd-unit{
  background:rgba(17,18,20,.88);border:1px solid var(--accent-soft);border-radius:12px;
  padding:12px 18px;min-width:76px;
}
.overlay-cd-num{display:block;font:900 32px/1 "Bebas Neue",serif;color:var(--gold-bright)}
.overlay-cd-label{display:block;font-size:10px;color:var(--txt-mute);letter-spacing:.14em;text-transform:uppercase;margin-top:4px;font-weight:800}
/* Schedule pill — lives in the dead space under the tumbler, not on top of it */
.draw-shell{display:flex;flex-direction:column;align-items:center}
.draw-shell .canvas-wrap{width:100%}
.draw-shell .complete-banner{width:100%}
.overlay-time{
  display:inline-block;position:relative;z-index:3;
  color:var(--txt-dim);font-size:11px;max-width:calc(100% - 24px);
  background:rgba(8,7,10,.85);border:1px solid rgba(203,164,77,.28);
  padding:5px 14px;border-radius:14px;line-height:1.3;text-align:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
/* Desktop: slot into the canvas's own dead space below the winning slots
   so it visually belongs to the tumbler instead of floating below it. */
.overlay-time.schedule-pill{margin:-38px auto 8px}
.overlay-time strong{color:var(--txt)}
@media(max-width:600px){
  /* Mobile canvas has no dead space below slots, so let the pill flow under the canvas */
  .overlay-time.schedule-pill{margin:10px auto 0}
  .draw-overlay{inset:12px;padding:20px 12px 14px}
  .overlay-eyebrow{font-size:10px;letter-spacing:.18em;margin-bottom:10px}
  .overlay-countdown{gap:6px;margin-bottom:10px}
  .overlay-cd-unit{padding:8px 10px;min-width:48px}
  .overlay-cd-num{font-size:22px}
  .overlay-cd-label{font-size:9px;margin-top:3px}
  .overlay-time{
    font-size:10.5px;padding:5px 10px;line-height:1.45;
  }
}

.drawing-status{
  position:absolute;bottom:32px;left:0;right:0;text-align:center;color:var(--txt-dim);font-size:13px;z-index:2;
  pointer-events:none;
}
.drawing-status strong{color:var(--gold-bright)}

.complete-banner{
  position:relative;
  background:linear-gradient(180deg,rgba(255,210,122,.1),rgba(154,122,50,.04));
  border:1px solid rgba(255,210,122,.4);border-radius:16px;padding:24px;text-align:center;margin-top:18px;
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;
}
.complete-dismiss{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border-radius:8px;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,210,122,.25);
  color:var(--gold-glow);font:300 22px/1 -apple-system,sans-serif;
  cursor:pointer;line-height:1;padding:0;
  transition:background .15s, border-color .15s, color .15s;
}
.complete-dismiss:hover{
  background:rgba(255,210,122,.1);
  border-color:var(--gold-bright);
  color:var(--gold-bright);
}
.complete-banner.visible{opacity:1;transform:translateY(0)}
.complete-label{font-size:11px;color:var(--txt-dim);letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;font-weight:800}
.complete-number{
  /* Parent row: never wraps. Digits scale with viewport so 5 always fit. */
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;
  gap:clamp(4px, 1.2vw, 10px);
  width:100%;
  letter-spacing:0;
}
.complete-digit{
  /* Bebas Neue renders digits centered in their advance width by design,
     so combined with grid+place-items the glyph sits dead-center every time. */
  display:grid;
  place-items:center;
  width:clamp(40px, 11vw, 80px);
  aspect-ratio:1;
  padding:0;
  font:900 clamp(28px, 7vw, 56px)/1 "Bebas Neue","Playfair Display",serif;
  background:linear-gradient(180deg,rgba(255,210,122,.12),rgba(154,122,50,.05));
  border:1px solid rgba(255,210,122,.5);
  border-radius:clamp(6px, 1.4vw, 12px);
  color:var(--gold-bright);
  letter-spacing:0 !important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum';
}
.complete-meta{margin-top:14px;font-family:"DM Mono",monospace;font-size:12px;color:var(--txt-dim)}
.complete-meta a{color:var(--gold-bright);text-decoration:none}

/* ================================================================
   ENTRY
   ================================================================ */
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
@media(max-width:720px){.account-grid{grid-template-columns:1fr}}
.acc{
  background:var(--surf1);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03);
}
.acc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.acc-icon{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.acc-icon.wallet{background:linear-gradient(135deg,rgba(203,164,77,.2),rgba(139,111,63,.1));color:var(--gold-bright);border:1px solid rgba(203,164,77,.4)}
.acc-icon.discord{background:rgba(88,101,242,.15);color:#9AA3F5;border:1px solid rgba(88,101,242,.4)}
.acc-title{font:800 15px/1.2 "Manrope",sans-serif}
.acc-sub{font-size:12px;color:var(--txt-dim);margin-top:2px}
.acc-body{min-height:68px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.acc-body.empty{align-items:center;justify-content:center;padding:8px 0}

.connected{display:flex;flex-direction:column;gap:10px}
.conn-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.conn-addr{font-family:"DM Mono",monospace;font-size:13px;color:var(--txt)}
.conn-balance{font:900 26px/1 "Manrope",sans-serif}
.conn-balance .unit{font-size:11px;color:var(--txt-dim);font-weight:600;margin-left:6px;letter-spacing:.08em}
.conn-meta{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--line);gap:10px;flex-wrap:wrap}

.tier-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;font:800 11px/1 "Manrope",sans-serif;
  text-transform:uppercase;letter-spacing:.08em;
}
.tier-chip.zombie{background:rgba(122,107,82,.18);color:#D4C19B;border:1px solid rgba(122,107,82,.45)}
.tier-chip.horde{background:rgba(203,164,77,.15);color:var(--gold-bright);border:1px solid rgba(203,164,77,.45)}
.tier-chip.apex{background:rgba(232,184,102,.2);color:#FFE4A6;border:1px solid rgba(232,184,102,.55)}

.discord-user{display:flex;align-items:center;gap:10px}
.discord-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;border:2px solid rgba(88,101,242,.4)}
.discord-name{font:800 14px/1.2 "Manrope",sans-serif}
.discord-id{font-family:"DM Mono",monospace;font-size:10px;color:var(--txt-mute);margin-top:2px}

.entry-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:18px}

.card.locked{opacity:.5;pointer-events:none;position:relative;filter:saturate(.6)}
.card.locked::after{
  content:'◆  ' attr(data-lock-reason);
  position:absolute;top:14px;right:20px;font-size:11px;color:var(--txt-mute);
  text-transform:uppercase;letter-spacing:.08em;font-weight:800;
}
.card.locked:not([data-lock-reason])::after{
  content:'◆  Connect wallet to unlock';
}
/* Hide the status pill when the card is locked — the unlock label takes its spot */
.card.locked #freeStatusWrap{visibility:hidden}
.card-head-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.card-title-mini{font:900 17px/1 "Manrope",sans-serif}
.card-sub-mini{font-size:12px;color:var(--txt-dim);margin-top:3px}
.nph-tag{color:var(--accent);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-left:4px}
.step-chip{
  display:inline-flex;align-items:center;vertical-align:middle;
  font:800 9px/1 "Manrope",sans-serif;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;margin-right:8px;
  background:linear-gradient(135deg,rgba(203,164,77,.18),rgba(154,122,50,.08));
  color:var(--gold-bright);border:1px solid rgba(203,164,77,.4);
  white-space:nowrap;
}
.step-chip.bonus{
  background:linear-gradient(135deg,rgba(196,130,60,.25),rgba(139,111,63,.12));
  color:#FFE4A6;border:1px solid rgba(196,130,60,.55);
}

/* ---- Mobile: fix locked-card unlock label + title collisions ---- */
@media(max-width:600px){
  /* Make room for the absolute-positioned unlock label above the title */
  .card.locked{padding-top:42px}
  .card.locked::after{
    top:12px;right:auto;left:20px;
    font-size:10px;letter-spacing:.06em;
    max-width:calc(100% - 40px);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }
  /* Ensure the head-row's text column takes the full width so chip + title
     don't get squeezed by the right-side badge area */
  .card-head-row{flex-wrap:wrap;align-items:flex-start}
  .card-head-row > div:first-child{flex:1 1 100%;min-width:0}
  .card-head-row .live-badge,
  .card-head-row #freeStatusWrap{flex:0 0 auto}
  /* Slightly tighter typography so the chip + title + tag fit cleanly */
  .card-title-mini{font-size:15px;line-height:1.3}
  .card-sub-mini{font-size:11px;line-height:1.4;margin-top:4px}
  .step-chip{font-size:8px;padding:3px 7px;margin-right:6px;letter-spacing:.12em}
  /* The meta tags ("no purchase necessary", "random numbers only") are
     tiny inline labels — drop them to a new line on mobile so they don't
     crash into the title text. */
  .nph-tag,.qp-tag{display:block;margin-left:0;margin-top:4px;font-size:10px}
}

.live-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,107,61,.18),rgba(255,210,122,.12));
  border:1px solid rgba(255,210,122,.4);
  font:800 11px/1 "Manrope",sans-serif;color:var(--gold-bright);
  letter-spacing:.06em;
}

.action-row{display:grid;grid-template-columns:1.1fr .8fr 1fr auto;gap:18px;align-items:end}
@media(max-width:780px){.action-row{grid-template-columns:1fr}}
label{display:block;font-weight:800;font-size:11px;color:var(--txt-mute);margin-bottom:7px;text-transform:uppercase;letter-spacing:.1em}

.qty-stepper{display:flex;align-items:stretch;background:var(--surf2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qty-stepper input{
  flex:1;padding:11px 10px;border:0;background:transparent;color:var(--txt);font-size:16px;font-weight:800;text-align:center;-moz-appearance:textfield;
  font-variant-numeric:tabular-nums;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-stepper input:focus{outline:none}
.qty-btn{
  width:44px;background:transparent;border:0;color:var(--accent);font-size:20px;font-weight:800;cursor:pointer;
  transition:background .15s;
}
.qty-btn:hover{background:rgba(255,255,255,.04)}
.qty-quick{display:flex;gap:6px;margin-top:8px}
.qty-quick button{
  flex:1;padding:5px;background:transparent;border:1px solid var(--line);border-radius:8px;
  font-size:11px;font-weight:700;color:var(--txt-dim);cursor:pointer;transition:all .15s;
}
.qty-quick button:hover{border-color:var(--ring);color:var(--gold-bright)}

.preview-pill{
  padding:11px 14px;background:var(--surf2);border:1px solid var(--line);border-radius:12px;
  font-weight:800;color:var(--gold-bright);font-size:14px;min-height:44px;display:flex;align-items:center;
}
.preview-pill.big{font-size:16px;font-weight:900}
.buy-btn-wrap{display:flex;flex-direction:column;gap:6px}

.free-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.free-copy{flex:1;min-width:220px;font-size:13px;color:var(--txt-dim);line-height:1.6}
.free-copy strong{color:var(--txt)}
.free-status{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  font:800 12px/1 "Manrope",sans-serif;text-transform:uppercase;letter-spacing:.08em;
}
.free-status.available{background:rgba(68,192,138,.12);color:var(--ok);border:1px solid rgba(68,192,138,.4)}
.free-status.available::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok);animation:liveDot 1.6s ease infinite}
.free-status.claimed{background:rgba(203,164,77,.12);color:var(--gold-bright);border:1px solid rgba(203,164,77,.4)}

/* summary */
.summary-strip{
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;
  padding:18px 24px;margin-bottom:22px;
  background:linear-gradient(180deg,var(--accent-soft),transparent 60%),var(--surf1);
  border:1px solid var(--accent-soft);border-radius:16px;
}
.summary-item{display:flex;flex-direction:column;gap:3px}
.summary-label{font-size:10px;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.summary-value{font:900 22px/1.2 "Manrope",sans-serif;font-variant-numeric:tabular-nums}
.summary-divider{width:1px;height:36px;background:var(--line)}
.summary-explainer{
  font:500 12px/1.5 "Manrope",sans-serif;color:var(--txt-dim);
  margin:-12px 0 22px;padding:0 24px;text-align:center;
}
.summary-explainer b{color:var(--txt);font-weight:700}
.summary-explainer .tier-apex{color:var(--gold-bright)}
.summary-explainer .tier-horde{color:var(--accent)}
.summary-explainer .tier-zombie{color:var(--txt-mute)}

/* tickets */
.tickets-area{min-height:200px}
.tickets-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px 20px;color:var(--txt-dim);text-align:center;
  border:1px dashed var(--line);border-radius:18px;gap:6px;
}
.empty-icon{font-size:34px;margin-bottom:4px;opacity:.5}
.empty-title{font:800 14px/1.4 "Manrope",sans-serif;color:var(--txt)}
.empty-sub{font-size:12px;color:var(--txt-mute);max-width:360px}
.tickets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.tickets-grid.compact{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}

/* Tickets toolbar (summary + view toggle) */
.tickets-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;padding:12px 18px;
  background:var(--surf2);border:1px solid var(--line);border-radius:14px;
}
.tickets-summary{font-size:13px;color:var(--txt-dim)}
.tickets-summary b{color:var(--gold-bright);font-weight:900;font-size:16px;margin:0 3px}
.tickets-draw-context{margin-top:4px;font-size:11px;color:var(--txt-mute);letter-spacing:.04em}
.tickets-draw-context .winning{color:var(--gold-glow);font-weight:800;font-family:"DM Mono",monospace}
.tickets-draw-context .won{color:var(--ok);font-weight:800}
.tickets-draw-context .lost{color:var(--txt-dim)}
.tickets-draw-picker{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:#0d0d10;border:1px solid var(--line);border-radius:10px}
.tickets-draw-picker label{font:800 10px/1 "Manrope",sans-serif;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.12em}
.tickets-draw-picker select{
  appearance:none;padding:4px 22px 4px 8px;border:0;background:transparent;
  color:#ffffff;font:700 12px/1 "Manrope",sans-serif;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt-dim) 50%),linear-gradient(135deg,var(--txt-dim) 50%,transparent 50%);
  background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
/* Force black-bg / white-text on the dropdown popup options (Chrome + FF
   respect option-level color/background). Won-draw options render gold. */
.tickets-draw-picker select option{background:#0d0d10;color:#ffffff}
.tickets-draw-picker select option.won{color:var(--gold-glow);font-weight:900}
.tickets-view-toggle{display:inline-flex;gap:2px;padding:3px;background:var(--base);border:1px solid var(--line);border-radius:10px}
.tvt-btn{
  padding:6px 14px;border-radius:8px;border:0;background:transparent;
  color:var(--txt-dim);font:800 10px/1 "Manrope",sans-serif;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:color .15s,background .15s;
}
.tvt-btn:hover{color:var(--txt)}
.tvt-btn.active{
  background:var(--cta-grad);color:var(--cta-text);
  box-shadow:0 2px 8px rgba(203,164,77,.25);
}

/* Compact ticket pill */
.ticket-pill{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;background:var(--surf1);border:1px solid var(--line);
  border-radius:10px;transition:transform .12s,border-color .15s,box-shadow .15s;
  cursor:default;
}
.ticket-pill:hover{transform:translateY(-1px);border-color:rgba(203,164,77,.5);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.ticket-pill.tier-zombie{border-color:rgba(122,107,82,.35)}
.ticket-pill.tier-horde{border-color:rgba(196,130,60,.4)}
.ticket-pill.tier-apex{border-color:rgba(203,164,77,.5)}
.ticket-pill.free{border-color:rgba(88,101,242,.45);background:linear-gradient(180deg,rgba(88,101,242,.06),rgba(88,101,242,.02))}
.ticket-pill.bonus{background:linear-gradient(180deg,rgba(196,130,60,.08),rgba(196,130,60,.02))}
.ticket-pill-digits{
  font:900 16px/1 "Manrope",system-ui,sans-serif;
  color:var(--gold-bright);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.ticket-pill-tier{
  font:800 9px/1 "Manrope",sans-serif;letter-spacing:.1em;color:var(--txt-mute);
  text-transform:uppercase;white-space:nowrap;
}
.ticket-pill.free .ticket-pill-tier{color:#9AA3F5}
.ticket-pill.tier-apex .ticket-pill-tier{color:var(--gold-bright)}
.ticket-pill.bonus .ticket-pill-tier{color:var(--brown-ember)}

/* ================================================================
   WINNING TICKETS — compact pills and detailed cards
   ================================================================ */
@keyframes winPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,210,122,.0),0 4px 12px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 0 6px rgba(255,210,122,.35),0 0 30px rgba(255,210,122,.45),0 4px 12px rgba(0,0,0,.3)}
}
@keyframes jackpotShimmer{
  0%,100%{background-position:0 0}
  50%{background-position:200% 0}
}
.ticket-pill.won{
  border-color:var(--gold-bright)!important;background:linear-gradient(135deg,rgba(255,210,122,.16),rgba(154,122,50,.04));
  animation:winPulse 2.4s ease-in-out infinite;
}
.ticket-pill.won .ticket-pill-tier{color:var(--gold-bright);font-weight:900}
.ticket-pill.won-m5{
  border-color:var(--gold-bright)!important;
  background:linear-gradient(135deg,#5A4423,#FFD27A 35%,#FFE4A6 55%,#D6B15D 75%,#5A4423);
  background-size:200% 100%;
  animation:winPulse 1.8s ease-in-out infinite, jackpotShimmer 4s linear infinite;
  color:#1a1300;
}
.ticket-pill.won-m5 .ticket-pill-digits{color:#1a1300;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.ticket-pill.won-m5 .ticket-pill-tier{color:#1a1300;font-weight:900;letter-spacing:.12em}

.ticket.won{
  border-color:var(--gold-bright)!important;
  box-shadow:0 0 0 1px rgba(255,210,122,.4),0 0 36px rgba(255,210,122,.22),0 8px 24px rgba(0,0,0,.4)!important;
  animation:winPulse 2.6s ease-in-out infinite;
}
.ticket.won-m5{
  background:linear-gradient(180deg,rgba(255,210,122,.14),rgba(154,122,50,.04)),var(--surf1);
  animation:winPulse 2s ease-in-out infinite;
}
.ticket-ribbon.win-ribbon-m5{
  background:linear-gradient(90deg,#D6B15D,#FFE4A6 50%,#D6B15D);
  background-size:200% 100%;color:#1a1300;font-weight:900;letter-spacing:.05em;
  animation:jackpotShimmer 3s linear infinite;
}
.ticket-ribbon.win-ribbon-m4{
  background:linear-gradient(90deg,#9A7A32,#FFD27A);color:#1a1300;font-weight:900;
}
.ticket-ribbon.win-ribbon-m3{
  background:linear-gradient(90deg,#5A4423,#C4823C);color:#FFE4A6;
}

/* Non-winning tickets (resolved but no match) — dim so winners stand out */
.ticket.no-win{
  opacity:.45;filter:saturate(.55);
  border-color:var(--line)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.3)!important;
}
.ticket.no-win::before{opacity:.3}
.ticket.no-win .digit{filter:grayscale(.7) brightness(.7)}
.ticket.no-win .ticket-ribbon{display:none}
.ticket.no-win:hover{opacity:.75;filter:saturate(.8);transition:opacity .2s, filter .2s}
.ticket.no-win .nomatch-flag{color:var(--txt-mute);letter-spacing:.5px;text-transform:uppercase;font-size:10px}

.ticket-pill.no-win{
  opacity:.5;filter:saturate(.55);
  border-color:var(--line)!important;
}
.ticket-pill.no-win .ticket-pill-digits{color:var(--txt-dim)}
.ticket-pill.no-win .ticket-pill-tier{color:var(--txt-mute)}
.ticket-pill.no-win:hover{opacity:.85;filter:saturate(.85);transform:none;box-shadow:none}

/* ================================================================
   WALLET PICKER MODAL — mobile deep-links + desktop install
   ================================================================ */
.wallet-picker{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center}
.wallet-picker.hidden{display:none}
.wallet-picker-backdrop{position:absolute;inset:0;background:rgba(4,3,6,.8);backdrop-filter:blur(6px)}
.wallet-picker-sheet{
  position:relative;width:min(420px, calc(100vw - 32px));
  background:linear-gradient(180deg,rgba(26,17,6,.98),rgba(10,7,11,.98));
  border:1px solid rgba(203,164,77,.35);border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 50px rgba(203,164,77,.12),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  animation:walletPickerIn .25s cubic-bezier(.2,.7,.2,1);
}
@keyframes walletPickerIn{from{transform:translateY(12px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.wallet-picker-head{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 22px 14px;border-bottom:1px solid var(--line);gap:12px}
.wallet-picker-eyebrow{color:var(--brown-ember);font:800 10px/1 "Manrope",sans-serif;letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px}
.wallet-picker-title{font:800 22px/1.15 "Playfair Display",serif;color:var(--gold-bright)}
.wallet-picker-close{background:transparent;border:1px solid var(--line);color:var(--txt-dim);width:32px;height:32px;border-radius:10px;font-size:20px;cursor:pointer;line-height:1;transition:border-color .15s,color .15s}
.wallet-picker-close:hover{border-color:var(--ring);color:var(--gold-bright)}
.wallet-picker-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px}
.wallet-picker-copy{color:var(--txt-dim);font-size:13px;line-height:1.6;margin-bottom:8px}
.wallet-picker-foot{margin-top:10px;font-size:12px;color:var(--txt-mute);text-align:center;line-height:1.6}
.wallet-picker-foot a{color:var(--gold-bright);text-decoration:none}
.wallet-picker-foot a:hover{text-decoration:underline}

.wallet-opt{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:14px;text-decoration:none;
  background:var(--surf2);border:1px solid var(--line);
  transition:border-color .15s, background .15s, transform .1s;
  color:var(--txt);
}
.wallet-opt:hover{border-color:var(--gold-bright);background:rgba(203,164,77,.05);transform:translateY(-1px)}
.wallet-opt:active{transform:translateY(0)}
.wallet-opt-logo{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.wallet-opt-logo svg,.wallet-opt-logo img{width:100%;height:100%;display:block;object-fit:cover}
.wallet-opt.phantom .wallet-opt-logo{box-shadow:0 4px 12px rgba(171,159,242,.3)}
.wallet-opt.solflare .wallet-opt-logo{box-shadow:0 4px 12px rgba(252,141,77,.3)}
.wallet-opt-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wallet-opt-name{font:800 15px/1 "Manrope",sans-serif;color:var(--txt)}
.wallet-opt-sub{font-size:12px;color:var(--txt-dim)}
.wallet-opt-arrow{font-size:20px;color:var(--txt-mute);transition:transform .15s, color .15s}
.wallet-opt:hover .wallet-opt-arrow{transform:translateX(3px);color:var(--gold-bright)}

/* ================================================================
   WIN CELEBRATION TOAST — fixed top-right notification
   ================================================================ */
.win-toast{
  position:fixed;top:104px;right:20px;z-index:250;
  width:min(360px, calc(100vw - 40px));
  background:linear-gradient(180deg, rgba(26,17,6,.98), rgba(10,7,11,.98));
  border:1px solid var(--gold-bright);border-radius:16px;padding:16px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.55), 0 0 40px rgba(255,210,122,.28), inset 0 0 0 1px rgba(255,210,122,.18);
}
.win-toast.hidden{display:none}
.win-toast-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.win-icon{font-size:26px;filter:drop-shadow(0 0 12px rgba(255,210,122,.7))}
.win-title{
  font:900 18px/1 "Playfair Display","Manrope",sans-serif;
  background:linear-gradient(135deg,#9a7a32,#d6b15d 35%,#ffd27a 55%,#cba44d 75%,#8f6f2e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.06em;flex:1;
}
.win-dismiss{
  background:transparent;border:1px solid var(--line);color:var(--txt-dim);
  width:28px;height:28px;border-radius:8px;font-size:18px;cursor:pointer;line-height:1;
}
.win-dismiss:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.win-toast-body{font-size:13px;line-height:1.7;color:var(--txt)}
.win-line{padding:4px 0}
.win-line.jackpot{color:var(--gold-bright);font-size:14px;margin-bottom:2px}
.win-line.m4{color:var(--gold-glow)}
.win-line.m3{color:var(--txt-dim)}
.win-line.total{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--txt-dim);font-size:12px}
.win-line.total b{color:var(--gold-bright);font:900 18px/1 "Playfair Display",serif}
.win-toast-cta{
  display:block;width:100%;margin-top:12px;padding:10px 14px;
  background:var(--cta-grad);color:var(--cta-text);
  border:0;border-radius:10px;font:800 13px/1 "Manrope",sans-serif;cursor:pointer;
  transition:filter .15s;
}
.win-toast-cta:hover{filter:brightness(1.05)}
@media(max-width:480px){
  .win-toast{top:96px;right:10px;left:10px;width:auto}
}

.ticket{
  position:relative;background:var(--surf1);
  border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;opacity:0;transform:translateY(20px) scale(.95);
}
.ticket::before{
  content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,210,122,.1), transparent 60%);
}
.ticket.bonus{border-color:rgba(196,130,60,.5)}
.ticket.tier-apex{border-color:rgba(232,184,102,.6);box-shadow:0 8px 24px rgba(232,184,102,.12),inset 0 0 0 1px rgba(232,184,102,.15)}
.ticket.tier-horde{border-color:rgba(203,164,77,.5)}
.ticket.tier-zombie{border-color:rgba(122,107,82,.45)}
.ticket.free{border-color:rgba(88,101,242,.5);box-shadow:0 8px 24px rgba(88,101,242,.1),inset 0 0 0 1px rgba(88,101,242,.1)}
.ticket.free::before{background:radial-gradient(ellipse at 50% 0%, rgba(88,101,242,.12), transparent 60%)}

.ticket-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:16px;position:relative;gap:10px}
.ticket-wallet{font-family:"DM Mono",monospace;font-size:12px;color:var(--txt-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.tier-badge{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  padding:4px 10px;border-radius:999px;font:800 10px/1 "Manrope",sans-serif;
  text-transform:uppercase;letter-spacing:.08em;
}
.tier-badge.zombie{background:rgba(122,107,82,.18);color:#D4C19B;border:1px solid rgba(122,107,82,.45)}
.tier-badge.horde{background:rgba(203,164,77,.15);color:var(--gold-bright);border:1px solid rgba(203,164,77,.45)}
.tier-badge.apex{background:rgba(232,184,102,.2);color:#FFE4A6;border:1px solid rgba(232,184,102,.55)}
.tier-badge.free{background:rgba(88,101,242,.18);color:#9AA3F5;border:1px solid rgba(88,101,242,.5)}

.digits{display:flex;justify-content:center;gap:8px;margin-bottom:16px;padding:8px 0}
.digit{
  position:relative;width:48px;height:48px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 30%, #FCEFCB, #E6C988 40%, #B08738 85%, #6A4F20 100%);
  border:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 8px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.45);
}
.digit::after{
  content:'';position:absolute;top:5px;left:22%;width:32%;height:22%;
  background:radial-gradient(ellipse,rgba(255,255,255,.85),transparent 70%);
  border-radius:50%;pointer-events:none;z-index:2;
}
.digit-reel{position:absolute;top:0;left:0;right:0;will-change:transform}
.digit-reel span{display:block;height:48px;line-height:48px;text-align:center;font:900 26px "Manrope",system-ui,sans-serif;color:#2A1E08}
.digit.locked{animation:lockFlash .5s ease}
@keyframes lockFlash{
  0%,100%{box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 8px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.45)}
  50%{box-shadow:inset 0 2px 3px rgba(255,255,255,.55),inset 0 -4px 8px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.45),0 0 18px 4px rgba(255,210,122,.7)}
}
.ticket-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--txt-mute)}
.tx-link{font-family:"DM Mono",monospace;color:var(--txt-dim);text-decoration:none}
.bonus-flag{color:var(--accent);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.free-flag{color:#9AA3F5;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
.ticket-ribbon{
  position:absolute;top:18px;right:-36px;transform:rotate(35deg);z-index:3;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  color:var(--cta-text);font:900 9px/1 "Manrope",sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 40px;box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.ticket.tier-apex .ticket-ribbon{background:linear-gradient(90deg,#6A4F20,#E8B866);color:#2A1E08}
.ticket.tier-horde .ticket-ribbon{background:linear-gradient(90deg,#5C4815,#CBA44D);color:#1E1A0A}
.ticket.tier-zombie .ticket-ribbon{background:linear-gradient(90deg,#3E3628,#7A6B52);color:#F1E7D1}
.ticket.free .ticket-ribbon{background:linear-gradient(90deg,#2D3380,#5865F2);color:#fff}

/* ================================================================
   WINNERS
   ================================================================ */
/* ================================================================
   HALL OF FOOKIN' FAME
   ================================================================ */
.winners-section{position:relative;isolation:isolate}
.winners-section::before{
  content:'';position:absolute;inset:-40px 0 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,210,122,.06), transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(214,177,93,.05), transparent 65%);
}
.winners-section .section-kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid;
  border-image:linear-gradient(90deg, var(--gold), transparent) 1;
}
.winners-section .section-kicker::before{
  content:'\1F3C6';font-size:18px;line-height:1;
  filter:drop-shadow(0 0 8px rgba(255,210,122,.5));
}
.winners-totals{
  text-align:right;
  padding:14px 20px;
  background:linear-gradient(135deg,rgba(255,210,122,.08),rgba(154,122,50,.02));
  border:1px solid rgba(255,210,122,.25);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  min-width:200px;
}
.wt-num{
  font:900 clamp(26px,4vw,42px)/1 "Bebas Neue",serif;
  background:linear-gradient(135deg,#FFE4A6,#D6B15D);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.02em;
}
.wt-label{font-size:11px;color:var(--txt-dim);margin-top:6px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.wt-label b{color:var(--gold-bright);font-weight:900}

.winners-rail{
  display:flex;gap:16px;overflow-x:auto;padding:8px 20px 28px;margin:0 -20px;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.winners-rail::-webkit-scrollbar{display:none}

.winners-empty{
  flex:1;min-width:0;
  padding:42px 28px;text-align:center;
  background:linear-gradient(180deg,rgba(255,210,122,.05),rgba(255,210,122,.01));
  border:1px dashed rgba(255,210,122,.25);
  border-radius:18px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.we-icon{font-size:42px;line-height:1;filter:drop-shadow(0 4px 12px rgba(255,210,122,.4))}
.we-title{font:900 clamp(20px,2.4vw,28px)/1.1 "Playfair Display",serif;color:var(--txt)}
.we-sub{font-size:13px;color:var(--txt-dim);max-width:480px;line-height:1.5}
.we-cta{margin-top:14px}

.winner-card{
  flex:0 0 280px;scroll-snap-align:start;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.005));
  border:1px solid var(--line);border-radius:18px;padding:18px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.winner-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,210,122,.35);
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,210,122,.1);
}
.winner-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-soft),transparent);
  opacity:.7;
}
.winner-card[data-tier="zombie"]::before{background:linear-gradient(90deg,transparent,#7BAA84,transparent)}
.winner-card[data-tier="horde"]::before{background:linear-gradient(90deg,transparent,#D89856,transparent)}
.winner-card[data-tier="apex"]::before{background:linear-gradient(90deg,transparent,#FFD27A,transparent)}

.winner-card.big{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,210,122,.18), transparent 60%),
    linear-gradient(180deg,rgba(255,210,122,.08),rgba(154,122,50,.02));
  border-color:rgba(255,210,122,.5);
  box-shadow:
    0 0 50px rgba(255,210,122,.15),
    inset 0 0 50px rgba(255,210,122,.04);
}
.winner-card.big::before{
  height:3px;
  background:linear-gradient(90deg,transparent,#FFE4A6 30%,#FFD27A 50%,#FFE4A6 70%,transparent);
  opacity:1;
  animation:hofShimmer 4s ease-in-out infinite;
}
@keyframes hofShimmer{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

.w-jackpot-tag{
  position:absolute;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  background:linear-gradient(135deg,#FFE4A6,#D6B15D);
  color:#3E2608;font:900 9px/1 "Manrope",sans-serif;letter-spacing:.18em;
  box-shadow:0 4px 12px rgba(214,177,93,.4);
}
.w-jackpot-tag span{font-size:11px;line-height:1}

.w-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.12em;font-weight:800}

.w-match-badge{
  align-self:flex-start;
  padding:5px 11px;border-radius:6px;
  font:900 11px/1 "Manrope",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.05);
  color:var(--txt-dim);
  border:1px solid var(--line);
}
.winner-card[data-match="match5"] .w-match-badge{
  background:linear-gradient(135deg,rgba(255,228,166,.18),rgba(214,177,93,.08));
  color:var(--gold-bright);
  border-color:rgba(255,210,122,.4);
}
.winner-card[data-match="match4"] .w-match-badge{
  background:rgba(216,152,86,.12);
  color:#E5B17A;
  border-color:rgba(216,152,86,.35);
}
.winner-card[data-match="match3"] .w-match-badge{
  background:rgba(123,170,132,.1);
  color:#9BC5A4;
  border-color:rgba(123,170,132,.3);
}

.w-prize{
  font:900 clamp(32px,3.4vw,46px)/1 "Bebas Neue",serif;
  color:var(--gold-bright);letter-spacing:.01em;
  text-shadow:0 0 30px rgba(255,210,122,.15);
}
.w-prize.jackpot-w{
  background:linear-gradient(135deg,#FFE4A6,#D6B15D 55%,#9A7A32);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
}

.w-wallet-pill{
  display:inline-flex;align-self:flex-start;
  padding:6px 12px;border-radius:8px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  font:700 12px/1 "DM Mono",monospace;
  color:var(--txt);
  letter-spacing:.02em;
}

.w-tier{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.05);
}
.w-tier-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:6px;
  font:800 10px/1 "Manrope",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.04);color:var(--txt-mute);
  border:1px solid var(--line);
}
.w-tier-badge[data-tier="zombie"]{background:rgba(123,170,132,.1);color:#9BC5A4;border-color:rgba(123,170,132,.25)}
.w-tier-badge[data-tier="horde"]{background:rgba(216,152,86,.12);color:#E5B17A;border-color:rgba(216,152,86,.3)}
.w-tier-badge[data-tier="apex"]{
  background:linear-gradient(135deg,rgba(255,228,166,.18),rgba(214,177,93,.08));
  color:var(--gold-bright);border-color:rgba(255,210,122,.4);
}
.w-verified{
  font:800 10px/1 "Manrope",sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:#7BAA84;
  display:inline-flex;align-items:center;gap:4px;
}

@media (max-width:600px){
  .winner-card{flex:0 0 240px;padding:16px;border-radius:16px}
  .winners-totals{min-width:0;width:100%;text-align:left;padding:12px 16px}
  .winners-totals .wt-label{margin-top:4px}
  .winners-empty{padding:32px 20px}
  .we-icon{font-size:36px}
}
.w-match{font:800 11px/1 "Manrope",sans-serif;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.w-wallet{font-family:"DM Mono",monospace;font-size:12px;color:var(--txt-dim)}
.w-tier{font-size:10px;color:var(--txt-mute);padding-top:8px;border-top:1px solid var(--line);display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* ================================================================
   TOP-BUYER LEADERBOARD
   ================================================================ */
.leaderboard-section{position:relative;isolation:isolate;margin-top:24px}
.leaderboard-section::before{
  content:'';position:absolute;inset:-30px 0 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 70% 20%, rgba(255,210,122,.05), transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(214,177,93,.04), transparent 65%);
}
.leaderboard-section .section-kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid;
  border-image:linear-gradient(90deg, var(--gold), transparent) 1;
}
.leaderboard-section .section-kicker::before{
  content:'\1F31F';font-size:16px;line-height:1;
  filter:drop-shadow(0 0 6px rgba(255,210,122,.45));
}

.lb-pool-totals{
  text-align:right;
  padding:14px 20px;
  background:linear-gradient(135deg,rgba(255,210,122,.08),rgba(154,122,50,.02));
  border:1px solid rgba(255,210,122,.25);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  min-width:220px;
}
.lb-pool-num{
  font:900 clamp(26px,4vw,38px)/1 "Bebas Neue",serif;
  background:linear-gradient(135deg,#FFE4A6,#D6B15D);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.02em;
}
.lb-pool-label{
  font-size:11px;color:var(--txt-dim);margin-top:6px;
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;
}
.lb-pool-split{
  font-size:10px;color:var(--txt-mute);margin-top:8px;
  letter-spacing:.05em;font-weight:700;
}

.leaderboard-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  margin-top:8px;
}
@media (max-width:860px){
  .leaderboard-cards{grid-template-columns:1fr}
}

.lb-card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.005));
  border:1px solid var(--line);border-radius:18px;padding:18px;
  display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden;
}
.lb-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,210,122,.55),transparent);
  opacity:.6;
}
.lb-card-prev{opacity:.92}
.lb-card-prev::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  opacity:.4;
}
.lb-card-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:4px;
}
.lb-card-title{
  font:900 14px/1.1 "Manrope",sans-serif;
  letter-spacing:.04em;color:var(--txt);
}
.lb-card-title span{color:var(--gold-bright)}
.lb-card-meta{
  font:700 10px/1 "Manrope",sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt-mute);
}

.lb-list{display:flex;flex-direction:column;gap:6px}
.lb-empty{
  padding:28px 16px;text-align:center;
  background:linear-gradient(180deg,rgba(255,210,122,.04),rgba(255,210,122,.01));
  border:1px dashed rgba(255,210,122,.22);border-radius:12px;
  color:var(--txt-dim);font-size:13px;line-height:1.5;
}

.lb-row{
  display:grid;
  grid-template-columns:46px 1fr auto auto;
  align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.04);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.lb-row:hover{
  transform:translateX(2px);
  border-color:rgba(255,210,122,.18);
  background:rgba(255,255,255,.045);
}
.lb-rank-pos{
  font:900 16px/1 "Bebas Neue",serif;
  color:var(--txt-dim);text-align:center;
  letter-spacing:.04em;
}
.lb-row.lb-top3 .lb-rank-pos{font-size:22px}
.lb-rank-1{
  background:linear-gradient(180deg,rgba(255,228,166,.12),rgba(214,177,93,.03));
  border-color:rgba(255,210,122,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 4px 18px rgba(255,210,122,.06);
}
.lb-rank-2{
  background:linear-gradient(180deg,rgba(220,220,230,.07),rgba(180,180,200,.02));
  border-color:rgba(220,220,230,.28);
}
.lb-rank-3{
  background:linear-gradient(180deg,rgba(216,152,86,.10),rgba(154,108,60,.02));
  border-color:rgba(216,152,86,.30);
}
.lb-id{
  font:700 13px/1.2 "Manrope",sans-serif;
  color:var(--txt);
  display:inline-flex;align-items:center;gap:8px;
  min-width:0;
}
.lb-discord{
  color:var(--gold-bright);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:18ch;
}
.lb-wallet{
  font-family:"DM Mono",monospace;font-size:12px;color:var(--txt-dim);
  letter-spacing:.02em;
}
.lb-solscan{
  font-size:11px;color:var(--txt-mute);text-decoration:none;
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;background:rgba(255,255,255,.04);
  transition:color .15s ease, background .15s ease;
}
.lb-solscan:hover{color:var(--gold-bright);background:rgba(255,210,122,.10)}
.lb-tickets{
  font:700 12px/1 "Manrope",sans-serif;
  color:var(--txt-dim);letter-spacing:.04em;
  white-space:nowrap;
}
.lb-prize{
  font:900 14px/1 "Bebas Neue",serif;
  color:var(--gold-bright);letter-spacing:.02em;
  text-align:right;
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.lb-paid{
  font:700 9px/1 "Manrope",sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
  color:#7BAA84;
  padding:2px 6px;border-radius:4px;
  background:rgba(123,170,132,.10);
  border:1px solid rgba(123,170,132,.25);
}

@media (max-width:600px){
  .lb-pool-totals{min-width:0;width:100%;text-align:left;padding:12px 16px}
  /* Two-line layout on mobile: rank + identity + prize on top row;
     ticket count tucked under the identity on a smaller second row. The
     ticket count is the most important number on the page (it's what
     defines the rank), so we keep it visible — never hidden. */
  .lb-row{
    grid-template-columns: 36px 1fr auto;
    grid-template-areas:
      "rank id    prize"
      ".    tickets prize";
    column-gap: 8px;
    row-gap: 2px;
    padding: 9px 10px;
    align-items: center;
  }
  .lb-rank-pos { grid-area: rank; align-self: center; }
  .lb-id       { grid-area: id; }
  .lb-tickets  { grid-area: tickets; font-size: 11px; opacity: .85; }
  .lb-prize    { grid-area: prize; align-self: center; }
  .lb-discord{max-width:14ch}
}

/* ---- Top-3 personal toast (separate from win/lose toast) ---- */
.lb-win-toast{
  position:fixed;top:90px;right:20px;z-index:9000;
  width:min(380px, calc(100vw - 40px));
  padding:18px 20px;border-radius:16px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255,210,122,.20), transparent 60%),
    linear-gradient(180deg,rgba(40,28,12,.95),rgba(20,14,6,.98));
  border:1px solid rgba(255,210,122,.45);
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 40px rgba(255,210,122,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .25s ease, transform .25s ease;
}
.lb-win-toast.hidden{display:none}
.lb-win-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,210,122,.18);
}
.lb-win-icon{font-size:28px;line-height:1;filter:drop-shadow(0 4px 14px rgba(255,210,122,.5))}
.lb-win-title{
  flex:1;
  font:900 14px/1 "Manrope",sans-serif;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-bright);
}
.lb-win-dismiss{
  background:transparent;border:0;color:var(--txt-mute);cursor:pointer;
  font-size:22px;line-height:1;padding:0 4px;
  transition:color .15s ease;
}
.lb-win-dismiss:hover{color:var(--txt)}
.lb-win-body{
  font:600 13px/1.55 "Manrope",sans-serif;
  color:var(--txt);
  margin-bottom:14px;
}
.lb-win-body b{color:var(--gold-bright)}
.lb-win-cta{
  display:block;width:100%;
  padding:10px 14px;border-radius:10px;
  background:linear-gradient(135deg,#FFE4A6,#D6B15D);color:#3E2608;
  font:900 12px/1 "Manrope",sans-serif;letter-spacing:.12em;text-transform:uppercase;
  border:0;cursor:pointer;
  box-shadow:0 6px 18px rgba(214,177,93,.32);
  transition:transform .12s ease, box-shadow .12s ease;
}
.lb-win-cta:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(214,177,93,.45)}

/* ================================================================
   TRANSPARENCY
   ================================================================ */
.transparency-card{padding:28px}
.verify-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
@media(max-width:720px){.verify-steps{grid-template-columns:1fr}}
.verify-step{
  padding:20px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;gap:8px;
}
.vs-num{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--cta-grad);color:var(--cta-text);font:900 16px/1 "Manrope",sans-serif;
}
.vs-title{font:900 16px/1.2 "Manrope",sans-serif}
.vs-body{font-size:13px;color:var(--txt-dim);line-height:1.6}
.vs-body code{font-family:"DM Mono",monospace;color:var(--gold-bright);background:rgba(255,255,255,.04);padding:1px 6px;border-radius:4px;font-size:11px}
.commit-box{
  padding:14px 18px;background:var(--surf2);border:1px solid var(--line);border-radius:12px;
  font-family:"DM Mono",monospace;font-size:11px;color:var(--gold-bright);word-break:break-all;
}

/* ================================================================
   FOOTER
   ================================================================ */
.legal-foot{
  margin-top:40px;padding:32px 20px 48px;text-align:center;border-top:1px solid var(--line);
  font-size:11px;color:var(--txt-dim);line-height:1.8;max-width:var(--stage-max);margin-left:auto;margin-right:auto;
}
.legal-foot b{color:var(--txt)}
.legal-foot a{color:var(--gold-bright);text-decoration:none}
.legal-sub{margin-top:10px;font-size:10px;color:var(--txt-mute)}
.legal-tweak{margin-top:14px;font-size:10px;color:var(--txt-mute)}
.legal-tweak a{color:var(--txt-mute);margin:0 6px}

/* ================================================================
   TWEAKS PANEL
   ================================================================ */
.tweaks-panel{
  position:fixed;right:20px;bottom:20px;z-index:2000;
  width:300px;background:var(--surf1);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.tweaks-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  font:900 12px/1 "Manrope",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.tweaks-close{background:transparent;border:0;color:var(--txt-dim);font-size:22px;cursor:pointer;line-height:1;padding:0 6px}
.tweaks-body{padding:16px;display:flex;flex-direction:column;gap:18px}
.tweak-group{display:flex;flex-direction:column;gap:8px}
.tweak-label{font:800 10px/1 "Manrope",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute)}
.theme-options{display:flex;flex-direction:column;gap:6px}
.theme-options.compact{flex-direction:row}
.theme-opt{
  display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;gap:2px 10px;
  padding:10px 12px;background:var(--surf2);border:1px solid var(--line);border-radius:10px;
  cursor:pointer;text-align:left;transition:all .15s;align-items:center;
}
.theme-opt:hover{border-color:var(--ring)}
.theme-opt.active{border-color:var(--accent);background:var(--accent-soft)}
.theme-swatch{grid-row:span 2;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.1)}
.theme-swatch.vegas{background:linear-gradient(135deg,#FFD27A 0%,#9A7A32 100%)}
.theme-swatch.ember{background:linear-gradient(135deg,#FFB97A 0%,#B83314 100%)}
.theme-swatch.neon{background:linear-gradient(135deg,#00F5D4 0%,#FFD27A 100%)}
.theme-name{font:800 13px/1.1 "Manrope",sans-serif;color:var(--txt)}
.theme-desc{font-size:11px;color:var(--txt-mute);grid-column:2}
.motion-opt{
  flex:1;padding:10px;background:var(--surf2);border:1px solid var(--line);border-radius:10px;
  font-size:12px;font-weight:800;color:var(--txt-dim);cursor:pointer;transition:all .15s;
}
.motion-opt.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-tweak{
  padding:9px 12px;background:var(--surf2);border:1px solid var(--line);border-radius:10px;
  font-size:12px;font-weight:700;color:var(--txt);cursor:pointer;text-align:left;transition:all .15s;
}
.btn-tweak:hover{border-color:var(--ring);color:var(--gold-bright)}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
[data-motion="reduced"] .coin-rain{display:none}
[data-motion="reduced"] .gold-text{animation:none}
[data-motion="reduced"] .cd-sep{animation:none;opacity:.4}
[data-motion="reduced"] .tick-secs{animation:none}
[data-motion="reduced"] .pulse-dot,
[data-motion="reduced"] .eyebrow-dot{animation:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ================================================================
   MOBILE TUNING
   ================================================================ */
@media(max-width:760px){
  .hero{padding:36px 16px 48px;min-height:auto}
  .hero-title{margin-bottom:28px}
  .countdown-big{gap:6px}
  .cd-unit{padding:10px 12px;min-width:64px}
  .cd-num{font-size:30px}
  .cd-sep{font-size:24px;padding-bottom:8px}
  .countdown-big .cd-sep:nth-of-type(2){display:none} /* hide middle separator on mobile */
  .section{padding:40px 16px}
  .section-head{flex-direction:column;align-items:flex-start}
  .draw-shell{padding:12px}
  .action-row{gap:12px}
  .summary-strip{padding:14px 16px;gap:14px}
  .summary-divider{display:none}
  .summary-value{font-size:18px}
  .tweaks-panel{right:10px;left:10px;width:auto;bottom:10px}
}
@media(max-width:420px){
  .title-jackpot{font-size:22vw}
  .cd-unit{padding:8px 10px;min-width:52px}
  .cd-num{font-size:24px}
  .btn-xl{padding:14px 22px;font-size:14px}
}


/* ========== TIER SECTION ========== */
.tier-section{padding-top:60px;padding-bottom:40px}
.tier-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;
  max-width:var(--stage-max);
}
.tier-card{
  position:relative;padding:26px 22px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:20px;
  display:flex;flex-direction:column;gap:14px;overflow:hidden;
}
.tier-card.featured{border-color:rgba(203,164,77,.45);background:linear-gradient(180deg,rgba(203,164,77,.08),rgba(203,164,77,.02))}
.tier-card.apex{
  border-color:rgba(255,210,122,.55);
  background:linear-gradient(180deg,rgba(255,210,122,.14),rgba(154,122,50,.04));
  box-shadow:0 0 40px rgba(255,210,122,.15),inset 0 0 0 1px rgba(255,210,122,.2);
}
.tier-badge-row{display:flex;align-items:center;gap:10px}
.tier-icon{font-size:24px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.tier-mult{
  font-family:"Bebas Neue",serif;display:flex;align-items:flex-start;line-height:.85;
  color:var(--gold-bright);
}
.tier-card .tier-x{font-size:48px;opacity:.7;padding-top:10px}
.tier-card .tier-n{font-size:96px;font-weight:900}
.tier-card.apex .tier-mult{color:var(--gold-bright);text-shadow:0 0 30px rgba(255,210,122,.5)}
.tier-hold{display:flex;flex-direction:column;gap:2px;font-family:"DM Mono",monospace}
.tier-hold-label{font-size:10px;color:var(--txt-mute);text-transform:uppercase;letter-spacing:.14em;font-weight:800}
.tier-hold-amt{font-size:20px;font-weight:800;color:var(--txt)}
.tier-hold-usd{font-size:12px;color:var(--txt-dim)}
.tier-hold-usd b{color:var(--gold-bright)}
.usd-hint{color:var(--txt-mute);font-size:10px;margin-left:4px}
.tier-line{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.tier-math{display:flex;flex-direction:column;gap:8px}
.math-row{display:flex;justify-content:space-between;font-size:13px;color:var(--txt-dim)}
.math-row b{color:var(--gold-bright);font-weight:800;font-family:"DM Mono",monospace}
.tier-foot{font-size:12px;color:var(--txt-mute);line-height:1.5;margin-top:auto}
.tier-note{
  margin-top:18px;padding:14px 18px;border:1px dashed var(--line);border-radius:12px;
  font-size:13px;color:var(--txt-dim);text-align:center;max-width:var(--stage-max);
}
@media(max-width:860px){
  .tier-grid{grid-template-columns:1fr}
}

/* ========== Ladder 3-col ========== */
.ladder-rungs.three{grid-template-columns:repeat(3,1fr)}
.rung-fook{font:700 11px/1.2 "DM Mono",monospace;color:var(--txt-mute);margin-top:2px;letter-spacing:.02em}
.rung-fook .fook-amt{color:var(--accent)}
@media(max-width:760px){
  /* Single column so Match 3 / 4 / 5 each get the full mobile width instead
     of squeezing into a fractional cell. Also override the `.rung.jackpot`
     span-2 rule from the base mobile block — with only 1 column, `span 2`
     would otherwise spawn an implicit second column and make Match 3 and
     Match 4 unequal widths. */
  .ladder-rungs.three{grid-template-columns:1fr}
  .ladder-rungs.three .rung.jackpot{grid-column:auto}
}

/* ========== Hero title tweaks ========== */
.title-line.in-fook{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.rate-note{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-mute);padding:3px 8px;border:1px solid var(--line);border-radius:100px;
}

/* ========== Quick Pick UI ========== */
.qp-tag{
  display:inline-block;margin-left:6px;padding:2px 8px;
  background:rgba(255,210,122,.12);color:var(--gold-bright);
  border:1px solid rgba(255,210,122,.3);border-radius:100px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.qp-callout{
  display:flex;align-items:center;gap:14px;padding:14px 16px;margin:10px 0 18px;
  background:linear-gradient(90deg,rgba(255,210,122,.08),rgba(255,210,122,.02));
  border:1px solid rgba(255,210,122,.25);border-radius:14px;
}
.qp-dice{font-size:32px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.qp-head{font:900 14px/1.2 "Manrope",sans-serif;color:var(--gold-bright);margin-bottom:3px}
.qp-sub{font-size:12px;color:var(--txt-dim);line-height:1.4}

.qp-bundle-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:2px}
.qp-bundle{
  display:flex;flex-direction:column;gap:2px;padding:12px 8px;
  background:var(--surf2);border:1.5px solid var(--line);border-radius:12px;
  color:var(--txt-dim);cursor:pointer;transition:all .18s;text-align:center;
}
.qp-bundle:hover{border-color:var(--accent-soft);color:var(--txt)}
.qp-bundle.selected{
  border-color:var(--gold-bright);background:linear-gradient(180deg,rgba(255,210,122,.12),rgba(255,210,122,.02));
  color:var(--txt);box-shadow:0 0 18px rgba(255,210,122,.15);
}
.qpb-count{font:900 26px/1 "Bebas Neue",serif;color:var(--txt)}
.qp-bundle.selected .qpb-count{color:var(--gold-bright)}
.qpb-sub{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-mute)}
.qpb-price{font:800 13px/1 "DM Mono",monospace;color:var(--accent);margin-top:4px}

.price-split{
  font-family:"DM Mono",monospace;text-align:center;margin-top:10px;line-height:1.35;
}
.price-split .price-primary{
  font:800 15px/1.15 "Manrope",sans-serif;color:var(--gold-bright);letter-spacing:.01em;
}
.price-split .price-primary-unit{
  font:700 10px/1 "Manrope",sans-serif;color:var(--accent);letter-spacing:.1em;margin-left:3px;
}
.price-split .price-secondary{
  font-size:11px;color:var(--txt-mute);margin-top:3px;
}
.price-split .price-secondary b{color:var(--txt);font-size:12px}

@media(max-width:620px){
  .qp-bundle-row{grid-template-columns:repeat(2,1fr)}
}

.qp-custom{
  display:flex;align-items:stretch;gap:0;margin-top:10px;
  background:var(--surf2);border:1.5px solid var(--line);border-radius:12px;
  overflow:hidden;transition:border-color .18s, box-shadow .18s, background .18s;
}
.qp-custom:focus-within{
  border-color:var(--gold-bright);
  background:linear-gradient(180deg,rgba(255,210,122,.08),rgba(255,210,122,.01));
  box-shadow:0 0 18px rgba(255,210,122,.12);
}
.qp-custom-label{
  display:flex;align-items:center;gap:6px;
  padding:0 14px;
  font:800 10px/1 "Manrope",sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-mute);
  border-right:1px solid var(--line);
  white-space:nowrap;
}
.qp-custom-label::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); opacity:.55;
}
.qp-custom:focus-within .qp-custom-label::before{opacity:1;box-shadow:0 0 8px var(--accent)}
.qp-custom-field{
  position:relative;flex:1;min-width:0;
  display:flex;align-items:baseline;
}
.qp-custom-input{
  flex:1;min-width:0;
  background:transparent;border:0;outline:none;
  padding:12px 4px 12px 14px;
  font:900 22px/1 "Bebas Neue",serif;
  color:var(--txt);
  letter-spacing:.04em;
}
.qp-custom:focus-within .qp-custom-input{color:var(--gold-bright)}
.qp-custom-input::placeholder{color:var(--txt-mute);opacity:.45;font-weight:400;font-size:18px}
.qp-custom-input::-webkit-outer-spin-button,
.qp-custom-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qp-custom-input[type=number]{-moz-appearance:textfield}
.qp-custom-input:-webkit-autofill,
.qp-custom-input:-webkit-autofill:hover,
.qp-custom-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--gold-bright) !important;
  -webkit-box-shadow:0 0 0 1000px transparent inset !important;
  box-shadow:0 0 0 1000px transparent inset !important;
  transition:background-color 5000s ease-in-out 0s;
}
.qp-custom-suffix{
  padding:0 16px 0 4px;
  font:800 10px/1 "Manrope",sans-serif;
  color:var(--txt-mute);text-transform:uppercase;letter-spacing:.14em;
  display:flex;align-items:center;
}

/* Narrow mobile: prevent placeholder + suffix from overlapping */
@media(max-width:420px){
  .qp-custom-label{padding:0 10px;font-size:9px;letter-spacing:.1em}
  .qp-custom-suffix{padding:0 10px 0 4px;font-size:9px;letter-spacing:.1em}
  .qp-custom-input{padding:12px 6px 12px 10px;font-size:20px}
  .qp-custom-input::placeholder{font-size:13px;letter-spacing:.02em}
}

/* Burn note under the prize ladder — scarcity messaging */
.ladder-burn-note{
  display:flex;align-items:center;gap:12px;
  margin-top:16px;padding:12px 16px;
  background:linear-gradient(90deg, rgba(255,90,30,.08), rgba(255,180,60,.04));
  border:1px solid rgba(255,140,60,.25);border-radius:12px;
  font-size:13px;line-height:1.45;color:var(--txt);
}
.ladder-burn-note b{color:#FFB266}
.ladder-burn-note .burn-flame{font-size:20px;flex-shrink:0;line-height:1}
@media (max-width:600px){
  .ladder-burn-note{font-size:12px;padding:10px 12px;gap:10px}
  .ladder-burn-note .burn-flame{font-size:18px}
}

/* ============================================================
   Partners / advertisers banner — sits under the top nav.
   Hidden by default; revealed via JS once /api/partners returns
   at least one active row. Designed to stay tasteful and not
   compete with the hero.
   ============================================================ */
.partners-banner{
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
  border-bottom:1px solid var(--line);
  padding:14px 16px;
}
.partners-inner{
  max-width:var(--stage-max);
  margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:18px;
}
/* Label: sits inline to the LEFT of the chips. Editable from admin. */
.partners-label{
  font:800 14px/1 "Manrope",sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--txt-mute);
  flex-shrink:0;
  padding-right:6px;
  align-self:center;
  display:inline-flex;
  align-items:center;
  min-height:62px;
}
.partner-card{
  display:inline-flex;align-items:center;gap:14px;
  padding:9px 18px 9px 9px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);border-radius:14px;
  text-decoration:none;color:var(--txt);
  transition:border-color .2s, background .2s, transform .15s;
  max-width:100%;
}
.partner-card:hover{
  border-color:var(--gold);
  background:rgba(255,210,122,.06);
  transform:translateY(-1px);
}
.partner-logo{
  width:42px;height:42px;border-radius:10px;
  object-fit:contain;flex-shrink:0;
  padding:3px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.15);
}
.partner-logo.logo-bg-white{ background:#fff; }
.partner-logo.logo-bg-dark{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}
.partner-logo-fallback{
  display:inline-flex;align-items:center;justify-content:center;
  font:900 18px/1 "Manrope",sans-serif;
  color:var(--gold-glow);
  background:linear-gradient(135deg, rgba(255,210,122,.18), rgba(245,196,66,.06));
  border:1px solid rgba(255,210,122,.25);
}
.partner-text{display:inline-flex;flex-direction:column;gap:2px;line-height:1.2}
.partner-name{font:800 14px/1.1 "Manrope",sans-serif;color:var(--txt)}
.partner-blurb{font-size:12px;color:var(--txt-dim);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Default (any viewport): chips wrap and center, dups hidden, static. */
.partner-card.dup{display:none}
.partners-scroll{display:contents}
.partners-track{
  display:flex;flex-wrap:wrap;
  gap:24px;
  justify-content:center;
  align-items:center;
}

/* Overflow mode — toggled via JS when natural chip width exceeds row width.
   Same behavior on mobile and desktop; mobile just hits it sooner because
   the row is narrower. Holds chips twice and slides translateX(-50%) for a
   seamless loop. Hover/focus/touch pauses. */
.partners-inner.has-overflow .partners-scroll{
  display:block;
  overflow:hidden;
  flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.partners-track.is-overflowing{
  flex-wrap:nowrap;
  width:max-content;
  justify-content:flex-start;
  animation: partners-marquee 36s linear infinite;
  will-change: transform;
}
.partners-track.is-overflowing:hover,
.partners-track.is-overflowing:focus-within,
.partners-track.is-overflowing:active{
  animation-play-state: paused;
}
.partners-track.is-overflowing .partner-card{flex-shrink:0}
.partners-track.is-overflowing .partner-card.dup{display:inline-flex}

@keyframes partners-marquee{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}
@media (prefers-reduced-motion: reduce){
  .partners-track.is-overflowing{ animation: none; }
  .partners-inner.has-overflow .partners-scroll{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
}

/* Mobile size adjustments — independent of overflow. */
@media (max-width:600px){
  .partners-banner{padding:10px 10px}
  .partners-inner{gap:10px}
  .partners-label{font-size:11px;letter-spacing:.18em;padding-right:8px;min-height:0}
  .partner-card{padding:7px 14px 7px 7px;gap:10px;border-radius:12px}
  .partner-logo{width:34px;height:34px;border-radius:8px}
  .partner-logo-fallback{font-size:14px}
  .partner-name{font-size:12px}
  .partner-blurb{font-size:11px;max-width:180px}
  .partners-track{gap:12px}
}

/* Winner banner meta rows — desktop side-by-side, mobile stacked. */
.cm-row{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
@media (max-width:600px){
  .cm-row{
    flex-direction:column;
    align-items:flex-start !important;
    gap:4px;
  }
  /* Breathing room between stacked rows so the COPY button on row N
     doesn't crowd the label on row N+1. */
  .cm-row + .cm-row{
    margin-top:14px;
  }
  .cm-row .cm-lbl{
    min-width:0 !important;
  }
  .cm-row > span:not(.cm-lbl){
    width:100%;
  }
}


/* Commit box — split layout (label + hash + subtitle) so the Fingerprint label
   isn't smushed against the hex string. */
.commit-box-lbl{
  font:800 11px/1 "Manrope",sans-serif;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--brown-ember);
  margin-bottom:6px;
}
.commit-box-hash{
  font-family:"DM Mono",monospace;
  font-size:13px;color:var(--gold-bright);
  word-break:break-all;line-height:1.4;
}
.commit-box-sub{
  margin-top:6px;
  font-size:11px;color:var(--txt-mute);
}


/* ================================================================
   LOSER TOAST — subtle, pivots to next draw. Same position rules as
   the winner toast but muted styling so it doesnt feel like a sad
   parallel celebration.
   ================================================================ */
.loser-toast{
  position:fixed;top:104px;right:20px;z-index:240;
  width:min(320px, calc(100vw - 40px));
  background:linear-gradient(180deg, rgba(28,28,32,.95), rgba(18,18,22,.95));
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.loser-toast.hidden{display:none}
.loser-toast-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.loser-toast-title{
  font:800 13px/1 "Manrope",sans-serif;
  letter-spacing:.06em;color:var(--txt);flex:1;
}
.loser-toast-dismiss{
  background:transparent;border:1px solid var(--line);color:var(--txt-mute);
  width:24px;height:24px;border-radius:6px;font-size:16px;cursor:pointer;line-height:1;
}
.loser-toast-dismiss:hover{border-color:var(--gold);color:var(--gold-bright)}
.loser-toast-body{font-size:12px;line-height:1.55;color:var(--txt-dim);margin-bottom:10px}
.loser-toast-cta{
  display:block;width:100%;padding:9px 12px;
  background:rgba(255,210,122,.08);color:var(--gold-bright);
  border:1px solid rgba(255,210,122,.3);border-radius:8px;
  font:800 12px/1 "Manrope",sans-serif;cursor:pointer;
  transition:background .15s, border-color .15s;
}
.loser-toast-cta:hover{
  background:rgba(255,210,122,.14);
  border-color:var(--gold-bright);
}
@media(max-width:480px){
  .loser-toast{top:96px;right:10px;left:10px;width:auto}
}


/* Rollover hype bar — sticky at top, above the top-bar. */
.rollover-bar{
  position:sticky;top:36px;z-index:115;
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;
  background:linear-gradient(90deg, rgba(255,140,30,.18), rgba(255,210,122,.18) 40%, rgba(255,140,30,.18));
  border-bottom:1px solid rgba(255,180,60,.4);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  font:700 13px/1.3 "Manrope",sans-serif;
  color:var(--txt);
}
.rollover-bar[hidden]{display:none}
.rollover-bar-icon{font-size:18px;line-height:1;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(255,180,60,.6))}
.rollover-bar-text{flex:1;min-width:0}
.rollover-bar-text b{color:var(--gold-bright);font-weight:900}
.rollover-bar-detail{display:inline;color:var(--txt-dim);font-weight:600;margin-left:6px}
.rollover-bar-cta{
  display:inline-flex;align-items:center;flex-shrink:0;
  padding:6px 14px;border-radius:8px;
  background:linear-gradient(135deg, #FFE4A6, #D6B15D);
  color:#3E2608;text-decoration:none;
  font:900 12px/1 "Manrope",sans-serif;letter-spacing:.04em;
  transition:filter .15s, transform .15s;
}
.rollover-bar-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.rollover-bar-dismiss{
  background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--txt-mute);
  width:26px;height:26px;border-radius:6px;font-size:16px;cursor:pointer;line-height:1;
  flex-shrink:0;
}
.rollover-bar-dismiss:hover{border-color:var(--gold);color:var(--gold-bright)}
.cm-rollover-val{font-family:inherit;color:var(--gold-glow);font-weight:800;font-size:13px}
.cm-rollover-val b{color:var(--gold-bright)}
@media (max-width:600px){
  .rollover-bar{padding:8px 10px;gap:8px;font-size:12px}
  .rollover-bar-detail{display:block;margin-left:0;margin-top:2px;font-size:11px}
  .rollover-bar-cta{padding:5px 10px;font-size:11px}
  .rollover-bar-dismiss{width:24px;height:24px;font-size:14px}
}