:root{
  --bg:#050408;
  --text:#f4f1f9;
  --muted:#9d99b8;
  --red:#ff2a3c;
  --red-soft:#ff5c6b;
  --blue:#22d3ee;
  --blue-soft:#67e8f9;
  --gold:#ffd06a;
  --brd:rgba(255,255,255,.09);
  --brd-strong:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);
  --radius:20px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg);overflow-x:clip;position:relative;
  -webkit-font-smoothing:antialiased;letter-spacing:.1px;
  display:flex;
  flex-direction:column;
}
h1,h2,h3,.brand{font-family:"Sora","Inter",sans-serif}
::selection{background:rgba(255,42,60,.35)}

/* ---------- plain black background + particle canvas ---------- */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)),
    #000 url("assets/deadfoool-background.jpg?v=20260722")
    center center / cover no-repeat;
}
#particles{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  display:block;
  opacity:1;
  mix-blend-mode:screen;
}


/* ---------- cinematic loading splash ---------- */
body.splash-active{overflow:hidden}

.site-splash{
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:
    radial-gradient(circle at 50% 45%,rgba(15,13,23,.20),rgba(0,0,0,.80) 58%,#000 100%),
    linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,.38)),
    #000 url("assets/deadfoool-background.jpg?v=splash-20260722")
    center center / cover no-repeat;
  opacity:1;
  visibility:visible;
  transform:scale(1);
  transition:
    opacity .72s cubic-bezier(.4,0,.2,1),
    visibility .72s,
    transform .85s cubic-bezier(.2,.7,.2,1);
}
.site-splash.is-leaving{
  opacity:0;
  visibility:hidden;
  transform:scale(1.045);
  pointer-events:none;
}

.site-splash::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.24;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,.035) 4px
    );
  animation:splashScan 8s linear infinite;
}
.site-splash::after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  background:
    conic-gradient(
      from 90deg at 50% 50%,
      transparent 0 20%,
      rgba(255,42,60,.14) 25%,
      transparent 31% 68%,
      rgba(34,211,238,.14) 74%,
      transparent 80%
    );
  filter:blur(38px);
  animation:splashOrbit 10s linear infinite;
}

.splash-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,42,60,.10),transparent 24%,transparent 76%,rgba(34,211,238,.10)),
    radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.72) 100%);
}

.splash-grid{
  position:absolute;
  left:-15%;
  right:-15%;
  bottom:-44%;
  height:76%;
  pointer-events:none;
  opacity:.25;
  transform:perspective(420px) rotateX(66deg);
  transform-origin:center top;
  background-image:
    linear-gradient(rgba(34,211,238,.24) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,42,60,.22) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent);
  animation:splashGridMove 2.2s linear infinite;
}

.splash-content{
  position:relative;
  z-index:3;
  width:min(760px,88vw);
  text-align:center;
  animation:splashContentIn .9s cubic-bezier(.16,1,.3,1) both;
}

.splash-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:18px;
  color:rgba(255,255,255,.72);
  font-family:"Sora","Inter",sans-serif;
  font-size:clamp(.58rem,1.3vw,.72rem);
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
}
.splash-kicker span{
  width:clamp(36px,8vw,82px);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--red-soft));
}
.splash-kicker span:last-child{
  background:linear-gradient(90deg,var(--blue-soft),transparent);
}

.splash-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:0 auto;
}
.splash-df-logo{
  display:block;
  width:min(580px,76vw);
  height:auto;
  max-height:300px;
  object-fit:contain;
  filter:
    drop-shadow(-10px 0 28px rgba(255,42,60,.22))
    drop-shadow(10px 0 28px rgba(34,211,238,.24))
    drop-shadow(0 12px 28px rgba(0,0,0,.65));
  animation:
    splashLogoIn .9s cubic-bezier(.16,1,.3,1) both,
    splashLogoFloat 3.4s .9s ease-in-out infinite;
}

.splash-code{
  margin-top:20px;
  color:rgba(255,255,255,.66);
  font-size:clamp(.68rem,1.5vw,.82rem);
  font-weight:700;
  letter-spacing:3.5px;
  text-transform:uppercase;
}
.splash-code strong{
  color:#fff;
  text-shadow:0 0 18px rgba(34,211,238,.34);
}

.splash-loader{
  position:relative;
  width:min(420px,72vw);
  height:4px;
  margin:30px auto 11px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.65);
}
.splash-loader::before{
  content:"";
  position:absolute;
  inset:-8px 0;
  background:linear-gradient(90deg,rgba(255,42,60,.25),rgba(34,211,238,.25));
  filter:blur(12px);
}
.splash-loader i{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--red),#e05fa0,var(--blue));
  box-shadow:
    0 0 12px rgba(255,42,60,.65),
    0 0 20px rgba(34,211,238,.50);
  animation:splashLoad 2.45s cubic-bezier(.22,.7,.25,1) forwards;
}
.splash-loader i::after{
  content:"";
  position:absolute;
  top:50%;
  right:-3px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  transform:translateY(-50%);
  box-shadow:0 0 14px #fff,0 0 24px var(--blue);
}

.splash-status{
  display:flex;
  justify-content:space-between;
  width:min(420px,72vw);
  margin:0 auto;
  color:rgba(255,255,255,.52);
  font-family:"Inter",sans-serif;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

.splash-skip{
  position:absolute;
  right:24px;
  bottom:22px;
  z-index:4;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:rgba(0,0,0,.24);
  color:rgba(255,255,255,.52);
  font-family:"Inter",sans-serif;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:1.5px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:color .2s,border-color .2s,background .2s,transform .2s;
}
.splash-skip:hover,
.splash-skip:focus-visible{
  color:#fff;
  border-color:rgba(34,211,238,.45);
  background:rgba(34,211,238,.09);
  transform:translateY(-2px);
}

.splash-shard{
  position:absolute;
  z-index:1;
  width:clamp(80px,12vw,190px);
  aspect-ratio:1;
  opacity:.42;
  pointer-events:none;
  clip-path:polygon(50% 0,64% 40%,100% 50%,64% 60%,50% 100%,36% 60%,0 50%,36% 40%);
}
.shard-a{
  left:5%;
  top:12%;
  background:linear-gradient(135deg,transparent 34%,var(--red) 35% 40%,transparent 41%);
  animation:splashShardA 5.8s ease-in-out infinite;
}
.shard-b{
  right:5%;
  bottom:9%;
  background:linear-gradient(315deg,transparent 34%,var(--blue) 35% 40%,transparent 41%);
  animation:splashShardB 6.4s ease-in-out infinite;
}
.shard-c{
  right:15%;
  top:13%;
  width:clamp(54px,7vw,105px);
  background:linear-gradient(45deg,transparent 34%,var(--red) 35% 40%,transparent 41%);
  animation:splashShardB 4.8s -1.4s ease-in-out infinite;
}
.shard-d{
  left:14%;
  bottom:13%;
  width:clamp(54px,7vw,105px);
  background:linear-gradient(225deg,transparent 34%,var(--blue) 35% 40%,transparent 41%);
  animation:splashShardA 5.2s -2s ease-in-out infinite;
}

@keyframes splashLogoIn{
  from{opacity:0;transform:translateY(18px) scale(.90);filter:blur(12px)}
  to{opacity:1;transform:none}
}
@keyframes splashLogoFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-8px,0) scale(1.012)}
}
@keyframes splashContentIn{
  from{opacity:0;transform:translateY(24px) scale(.96);filter:blur(10px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes splashLoad{
  0%{width:0}
  28%{width:31%}
  62%{width:68%}
  100%{width:100%}
}
@keyframes splashBrandPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.14)}
}
@keyframes splashGlitchA{
  0%,88%,100%{opacity:0;transform:none;clip-path:inset(0)}
  89%{opacity:.55;transform:translate(-5px,-1px);clip-path:inset(8% 0 68% 0)}
  90%{opacity:.35;transform:translate(3px,1px);clip-path:inset(66% 0 12% 0)}
  91%{opacity:0}
}
@keyframes splashGlitchB{
  0%,90%,100%{opacity:0;transform:none;clip-path:inset(0)}
  91%{opacity:.48;transform:translate(5px,0);clip-path:inset(38% 0 40% 0)}
  92%{opacity:.28;transform:translate(-2px,1px);clip-path:inset(74% 0 5% 0)}
  93%{opacity:0}
}
@keyframes splashGridMove{
  to{background-position:0 58px,58px 0}
}
@keyframes splashScan{
  to{background-position:0 80px}
}
@keyframes splashOrbit{
  to{transform:rotate(360deg)}
}
@keyframes splashShardA{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(15px,-16px,0) rotate(9deg)}
}
@keyframes splashShardB{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-14px,14px,0) rotate(-8deg)}
}

@media(max-width:640px){
  .splash-kicker{letter-spacing:2.6px;gap:9px}
  .splash-df-logo{width:min(520px,88vw);max-height:230px}
  .splash-code{letter-spacing:2.3px}
  .splash-skip{right:14px;bottom:14px}
  .splash-shard{opacity:.28}
}

@media(prefers-reduced-motion:reduce){
  .site-splash *,
  .splash-df-logo,
  .site-splash::before,
  .site-splash::after{
    animation:none!important;
    transition:none!important;
  }
  .splash-loader i{width:100%}
}

/* ---------- navbar ---------- */
/* Three columns keep the nav centred while the wallet grows to its left,
   instead of the two overlapping. */
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:16px 34px;position:sticky;top:0;z-index:30;
  background:rgba(8,6,13,.5);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;transition:.3s;
}
.topbar.scrolled{background:rgba(8,6,13,.82);border-bottom-color:var(--brd);box-shadow:0 10px 30px -14px rgba(0,0,0,.8)}
.brand{justify-self:start;font-weight:800;font-size:1.4rem;letter-spacing:1px;color:#fff;text-decoration:none}
.brand span{background:linear-gradient(90deg,var(--red),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
/* tubelight navbar — floating pill with a glowing lamp on the active tab */
.mainnav{position:relative;justify-self:center;display:flex;gap:4px;
  padding:6px;border-radius:999px;background:transparent;border:none}
.mainnav a{position:relative;z-index:2;padding:8px 20px;border-radius:999px;
  font-weight:600;font-size:.92rem;letter-spacing:.3px;color:var(--muted);text-decoration:none;transition:color .25s}
.mainnav a:hover{color:#fff}
.mainnav a.active{color:#fff}

/* ---------- nav dropdown (Rewards) ---------- */
.nav-group{position:relative;z-index:2;display:flex}
/* Matches .mainnav a exactly so the row keeps one rhythm — the only difference
   is that this one opens a menu instead of going anywhere. */
.nav-group-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 20px;border:0;border-radius:999px;background:none;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.92rem;letter-spacing:.3px;
  color:var(--muted);transition:color .25s;
}
.nav-group-btn svg{width:13px;height:13px;transition:transform .25s}
.nav-group-btn:hover,.nav-group.is-open .nav-group-btn{color:#fff}
/* Highlighted while one of its children is the page on screen. */
.nav-group.has-active .nav-group-btn{color:#fff}
.nav-group.is-open .nav-group-btn svg{transform:rotate(180deg)}

.nav-group-menu{
  /* Right edges aligned with the trigger at every width, rather than centred on
     it. Centring puts the panel half its width past the button, which runs off
     the screen whenever the trigger sits right of centre — and it made the
     placement depend on which media query happened to be active. */
  position:absolute;top:calc(100% + 9px);left:auto;right:0;
  min-width:180px;padding:6px;display:flex;flex-direction:column;gap:2px;z-index:40;
  border:1px solid var(--brd-strong);border-radius:14px;
  background:linear-gradient(155deg,rgba(18,14,27,.99),rgba(5,4,8,.99));
  box-shadow:0 22px 60px rgba(0,0,0,.85),0 0 34px rgba(34,211,238,.07);
  /* Fades only. The shared fadeUp also slides on translateY, and with
     fill-mode:both that transform sticks — which pushed the panel 18px below
     where layout put it, tripling the gap the pointer has to cross and leaving
     the bridge below misaligned. Opacity alone keeps the position exact. */
  animation:navMenuIn .16s ease-out both;
}
@keyframes navMenuIn{from{opacity:0}to{opacity:1}}
.nav-group-menu[hidden]{display:none}
/* Bridges the 9px gap between the trigger and the panel. The menu is absolutely
   positioned, so it adds nothing to .nav-group's box — without this the pointer
   crosses dead space on its way down, .nav-group sees a mouseleave, and the menu
   closes just as you reach for it. Hit-testing this strip targets the menu, which
   is a descendant, so the group never reports the pointer as having left. */
.nav-group-menu::before{
  content:"";position:absolute;left:0;right:0;top:-11px;height:11px;
}
/* Below 1040px .mainnav scrolls horizontally, and an overflow container clips
   on both axes — which would hide this menu entirely on tablet and phone. The
   scroll is only needed when the row actually overflows, so it is released
   while a menu is open. */
.mainnav.menu-open{overflow:visible}
.nav-group-menu a{
  padding:9px 13px;border-radius:9px;white-space:nowrap;
  font-size:.86rem;font-weight:600;color:var(--muted);text-decoration:none;
  transition:color .18s,background .18s;
}
.nav-group-menu a:hover,.nav-group-menu a:focus-visible{color:#fff;background:rgba(255,255,255,.07)}
.nav-group-menu a.active{color:#fff;background:rgba(34,211,238,.1)}
.nav-lamp{position:absolute;top:6px;left:0;width:0;height:calc(100% - 12px);z-index:1;opacity:0;
  border-radius:999px;background:rgba(255,255,255,.07);pointer-events:none;
  transition:left .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1), opacity .25s}
/* the tube light bar sitting on top of the active tab */
.nav-lamp::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:60%;height:4px;border-radius:0 0 8px 8px;
  background:linear-gradient(90deg,var(--red),var(--blue))}
/* glow blooming up from the bar */
.nav-lamp::after{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:72%;height:18px;border-radius:50%;filter:blur(7px);
  background:radial-gradient(closest-side, rgba(34,211,238,.6), rgba(255,42,60,.4), transparent 78%)}

/* ---------- account button + user menu (top right) ---------- */
.nav-auth{position:relative;justify-self:end;display:flex;align-items:center;gap:9px;z-index:31}

/* ---------- wallet: coins + points ---------- */
.wallet{display:flex;align-items:center;gap:7px}
.wallet-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border-radius:999px;
  font-family:"Sora","Inter",sans-serif;font-size:.74rem;font-weight:800;
  font-variant-numeric:tabular-nums;cursor:default;
  border:1px solid var(--brd-strong);background:var(--glass-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .2s,background .2s;
}
.wallet-ico{width:16px;height:16px;flex:none}
.wallet-amt{color:#fff}
.wallet-label{font-family:"Inter",sans-serif;font-size:.52rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;opacity:.68}
.wallet-chip.coins{color:var(--gold);border-color:rgba(255,208,106,.34);background:rgba(255,208,106,.08);
  box-shadow:0 0 20px -12px rgba(255,208,106,.95)}
.wallet-chip.points{color:var(--blue-soft);border-color:rgba(34,211,238,.34);background:rgba(34,211,238,.08);
  box-shadow:0 0 20px -12px rgba(34,211,238,.95)}

.auth-btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:999px;
  font-family:"Sora","Inter",sans-serif;font-size:.72rem;font-weight:800;letter-spacing:1.6px;
  color:#fff;cursor:pointer;border:1px solid transparent;
  background:linear-gradient(90deg,var(--red),var(--blue));
  box-shadow:0 10px 26px -14px rgba(255,42,60,.85),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.auth-btn:hover,.auth-btn:focus-visible{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 16px 32px -14px rgba(34,211,238,.85),inset 0 1px 0 rgba(255,255,255,.3)}

.user-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 12px;border-radius:999px;
  font-family:"Inter",sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.3px;
  color:#fff;cursor:pointer;
  border:1px solid var(--brd-strong);background:var(--glass-2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .2s,background .2s,transform .2s;
}
.user-chip:hover{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.09);transform:translateY(-1px)}
.user-chip svg{width:14px;height:14px;opacity:.7}
.user-chip[aria-expanded="true"] svg{transform:rotate(180deg)}
.user-chip-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px rgba(74,222,128,.9);flex:none}

.user-drop{
  position:absolute;top:calc(100% + 10px);right:0;width:250px;padding:14px;
  border:1px solid var(--brd-strong);border-radius:16px;
  background:linear-gradient(155deg,rgba(18,14,27,.99),rgba(5,4,8,.99));
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95),0 0 34px -20px rgba(34,211,238,.5);
  animation:fadeUp .18s ease both;
}
.user-drop-head{padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--brd);display:grid;gap:3px}
.user-drop-name{font-family:"Sora",sans-serif;font-weight:800;font-size:.92rem;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-drop-meta{font-size:.6rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.user-drop-list{margin:0 0 13px;display:grid;gap:7px}
.user-drop-list div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.user-drop-list dt{font-size:.6rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.user-drop-list dd{margin:0;font-size:.72rem;font-weight:600;color:var(--text);
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.user-drop-admin{
  display:block;width:100%;padding:9px;margin-bottom:7px;border-radius:11px;text-align:center;text-decoration:none;
  font-family:"Sora",sans-serif;font-size:.68rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--red-soft);border:1px solid rgba(255,42,60,.3);background:rgba(255,42,60,.08);
  transition:background .2s,color .2s,border-color .2s;
}
.user-drop-admin:hover{background:rgba(255,42,60,.16);color:#fff;border-color:rgba(255,42,60,.5)}
.user-drop-settings{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:9px;margin-bottom:7px;border-radius:11px;cursor:pointer;
  font-family:"Sora",sans-serif;font-size:.68rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text);border:1px solid var(--brd-strong);background:var(--glass-2);
  transition:background .2s,color .2s,border-color .2s;
}
.user-drop-settings svg{width:14px;height:14px;opacity:.8}
.user-drop-settings:hover{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.4);color:#fff}
.user-drop-out{
  width:100%;padding:9px;border-radius:11px;cursor:pointer;
  font-family:"Sora",sans-serif;font-size:.68rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--red-soft);border:1px solid rgba(255,42,60,.32);background:rgba(255,42,60,.08);
  transition:background .2s,color .2s,border-color .2s;
}
.user-drop-out:hover{background:rgba(255,42,60,.16);color:#fff;border-color:rgba(255,42,60,.5)}

/* ---------- sign-in gates on Slot Machine / Point Store ---------- */
.auth-gate,.auth-unlocked{
  max-width:560px;margin:18px auto 0;padding:22px 26px;
  display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;
  border:1px solid var(--brd);border-radius:var(--radius);
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.auth-unlocked{display:none;border-color:rgba(74,222,128,.28);background:rgba(74,222,128,.05)}
/* The gate is only its button now, so it drops the card it used to sit in —
   a panel wrapped around one control just reads as an empty box. */
.auth-gate{
  max-width:none;margin:0 auto 26px;padding:0;gap:0;
  border:0;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.signed-in .auth-gate{display:none}
body.signed-in .auth-unlocked{display:flex}
body.auth-pending .auth-gate,body.auth-pending .auth-unlocked{display:none}
.gate-ico{font-size:1.5rem;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.gate-copy{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6}
.gate-copy strong{color:#fff}
.gate-btn{padding:11px 22px;font-size:.78rem;letter-spacing:1.2px}

/* ---------- sign in / register dialog ---------- */
#auth-modal{
  position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#auth-modal.open{display:flex}
.auth-box{
  position:relative;width:min(480px,100%);max-height:90vh;overflow-y:auto;
  padding:30px 30px 26px;border:1px solid var(--brd-strong);border-radius:20px;
  background:linear-gradient(155deg,rgba(18,14,27,.99),rgba(5,4,8,.99));
  box-shadow:0 34px 100px rgba(0,0,0,.85),0 0 60px rgba(34,211,238,.08);
  animation:fadeUp .28s cubic-bezier(.16,1,.3,1) both;
}
.auth-box::before{content:"";position:absolute;inset:0 0 auto;height:2px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,var(--red),var(--blue));pointer-events:none}
.auth-close{
  position:absolute;top:14px;right:14px;display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid var(--brd-strong);border-radius:9px;background:transparent;color:var(--muted);
  font-size:1rem;cursor:pointer;
}
.auth-close:hover,.auth-close:focus-visible{color:#fff;border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.08)}

.auth-head{text-align:center;margin-bottom:20px}
.auth-eyebrow{font-family:"Sora",sans-serif;font-size:.58rem;font-weight:800;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--blue-soft)}
.auth-head h2{margin:9px 0 6px;font-size:1.5rem;font-weight:800;letter-spacing:-.4px}
.auth-sub{margin:0;color:var(--muted);font-size:.84rem;line-height:1.55}

.auth-tabs{display:flex;gap:5px;padding:5px;margin-bottom:20px;border-radius:13px;
  border:1px solid var(--brd);background:rgba(255,255,255,.03)}
.auth-tab{
  flex:1;padding:9px;border:none;border-radius:9px;cursor:pointer;background:transparent;
  font-family:"Sora",sans-serif;font-size:.72rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);transition:color .2s,background .2s;
}
.auth-tab:hover{color:#fff}
.auth-tab.is-active{color:#fff;background:linear-gradient(90deg,rgba(255,42,60,.22),rgba(34,211,238,.22));
  box-shadow:inset 0 0 0 1px var(--brd-strong)}

.auth-form{display:grid;gap:14px}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-field{display:grid;gap:6px}
.auth-field>span{font-size:.62rem;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.auth-field input{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid var(--brd-strong);background:rgba(255,255,255,.04);
  color:var(--text);font-family:"Inter",sans-serif;font-size:.88rem;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.auth-field input::placeholder{color:rgba(157,153,184,.55)}
.auth-field input:focus{
  outline:none;border-color:rgba(34,211,238,.55);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(34,211,238,.12);
}
.auth-field.has-error input{border-color:rgba(255,42,60,.6);box-shadow:0 0 0 3px rgba(255,42,60,.12)}
.auth-hint{color:var(--muted);font-size:.67rem;line-height:1.5}
.auth-hint strong{color:var(--blue-soft)}
/* the same hint standing on its own between fields, not tucked under one */
.auth-hint-block{
  margin:0;padding:11px 13px;font-size:.72rem;
  border:1px solid var(--brd);border-radius:12px;background:rgba(255,255,255,.03);
}

.auth-msg{
  margin:0;padding:10px 13px;border-radius:11px;font-size:.78rem;line-height:1.5;
  color:#ffd7de;border:1px solid rgba(255,42,60,.32);background:rgba(255,42,60,.09);
}
.auth-msg.is-ok{color:#d3ffe4;border-color:rgba(74,222,128,.34);background:rgba(74,222,128,.09)}
.auth-submit{justify-content:center;width:100%;padding:13px;font-size:.84rem;letter-spacing:1.4px}
.auth-submit:disabled{opacity:.6;cursor:progress;transform:none}
.auth-switch{margin:0;text-align:center;color:var(--muted);font-size:.78rem}
.auth-link{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-weight:700;color:var(--blue-soft)}
.auth-link:hover{text-decoration:underline}

/* ---------- account settings dialog ---------- */
#settings-modal{
  position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#settings-modal.open{display:flex}

/* A fixed-height column rather than a box that grows with its contents: the
   heading and the tabs stay put and only the open pane scrolls. Without this a
   long order history stretches the dialog past the viewport — and capping the
   list on its own instead would put a scrollbar inside a scrollbar.
   .auth-box.settings-box, not .settings-box, so the mobile .auth-box padding
   further down the file cannot put the bottom padding back. */
.auth-box.settings-box{
  width:min(540px,100%);
  display:flex;flex-direction:column;
  max-height:min(90vh,780px);
  overflow:hidden;            /* the pane owns the scrolling, not the box */
  padding-bottom:0;
}
.settings-box .auth-head,
.settings-box .auth-tabs{flex:none}

/* min-height:0 is what lets a flex child actually shrink far enough to scroll.
   No display is set here — [hidden] on the inactive pane still has to work. */
#settings-pane-account,
#settings-pane-orders{flex:1 1 auto;min-height:0;overflow-y:auto;padding-bottom:26px}

.settings-section{padding-top:20px;margin-top:20px;border-top:1px solid var(--brd)}
.settings-section:first-of-type{padding-top:0;margin-top:0;border-top:none}
.settings-h{
  margin:0 0 12px;font-family:"Sora",sans-serif;font-size:.66rem;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;color:var(--blue-soft);
}
.settings-note{
  display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;
  color:var(--muted);font-size:.7rem;line-height:1.55;
}
/* the consequence of losing a link, called out against the muted note */
.settings-note strong{color:var(--gold);font-weight:800}

.settings-lede{margin:0 0 12px;color:var(--muted);font-size:.76rem;line-height:1.6}
.links-list{display:grid;gap:10px}
.link-row{padding:13px 15px;border:1px solid var(--brd);border-radius:14px;background:rgba(255,255,255,.025)}
.link-row.is-linked{border-color:rgba(74,222,128,.26);background:rgba(74,222,128,.05)}
.link-row.is-soon{opacity:.62}
.link-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.link-name{font-family:"Sora",sans-serif;font-size:.86rem;font-weight:800;color:#fff}
.link-badge{
  padding:3px 9px;border-radius:999px;font-size:.55rem;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;
}
.link-badge.linked{color:#8ef0b4;background:rgba(74,222,128,.14);box-shadow:inset 0 0 0 1px rgba(74,222,128,.3)}
.link-badge.open{color:var(--blue-soft);background:rgba(34,211,238,.12);box-shadow:inset 0 0 0 1px rgba(34,211,238,.3)}
.link-badge.soon{color:var(--muted);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--brd)}
.link-value{margin:8px 0 0;font-size:.8rem;font-weight:700;color:var(--text);word-break:break-all}
.link-note{margin:6px 0 0;color:var(--muted);font-size:.67rem;line-height:1.5}
/* the consequence of losing a link, called out against the muted note around it */
.link-note b{color:var(--gold);font-weight:800}
.link-form{display:flex;gap:8px;margin-top:10px}
.link-form input{
  flex:1;min-width:0;padding:10px 12px;border-radius:11px;
  border:1px solid var(--brd-strong);background:rgba(255,255,255,.04);
  color:var(--text);font-family:"Inter",sans-serif;font-size:.82rem;
  transition:border-color .2s,box-shadow .2s;
}
.link-form input:focus{outline:none;border-color:rgba(34,211,238,.55);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.link-btn{
  flex:none;padding:10px 18px;border:none;border-radius:11px;cursor:pointer;color:#fff;
  font-family:"Sora",sans-serif;font-size:.68rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  background:linear-gradient(90deg,var(--red),var(--blue));
  box-shadow:0 10px 24px -14px rgba(255,42,60,.85);
  transition:filter .2s,transform .2s;
}
.link-btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.link-btn:disabled{opacity:.6;cursor:progress}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:14px;
  font-family:"Sora",sans-serif;font-weight:700;font-size:.98rem;text-decoration:none;
  border:1px solid var(--brd);background:var(--glass);color:#fff;transition:transform .2s, box-shadow .2s, background .2s;cursor:pointer;overflow:hidden}
.btn:hover{transform:translateY(-2px)}
.btn.primary{border:none;color:#fff;
  background:linear-gradient(90deg,var(--red),var(--blue));
  box-shadow:0 14px 34px -10px rgba(255,42,60,.55), inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{box-shadow:0 20px 44px -10px rgba(34,211,238,.6), inset 0 1px 0 rgba(255,255,255,.3)}
.btn.primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);
  animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,100%{left:-60%}55%{left:130%}}
.btn.ghost{background:var(--glass);border-color:var(--brd-strong)}
.btn.ghost:hover{background:var(--glass-2)}
.nav-cta{margin-left:6px;padding:10px 20px;border:none;font-size:.92rem;
  background:linear-gradient(90deg,var(--red),var(--blue));box-shadow:0 10px 26px -12px rgba(255,42,60,.6)}


.page[hidden]{display:none !important}

.wrap{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:32px 22px 70px;
  position:relative;
  z-index:1;
  flex:1 0 auto;
}

/* ---------- hero ---------- */
.hero{text-align:center;padding:0 0 70px;position:relative;
  min-height:calc(100vh - 108px);display:flex;flex-direction:column;justify-content:center;align-items:center}
.scroll-cue{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;
  color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  animation:scrollBounce 1.8s ease-in-out infinite}
.scroll-cue:hover{color:#fff}
.scroll-cue svg{width:24px;height:24px}
@keyframes scrollBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.hero-logo{display:block;height:345px;width:auto;max-width:100%;margin:0 auto -28px;opacity:0;
  animation:heroLogoIn .6s ease forwards, glitch 4s .6s steps(1,end) infinite}
@keyframes heroLogoIn{to{opacity:1}}
@keyframes glitch{
  0%,89%,100%{transform:translate(0,0);filter:none}
  90%{transform:translate(-3px,0);filter:drop-shadow(-5px 0 rgba(0,229,255,.85)) drop-shadow(5px 0 rgba(255,45,85,.85))}
  91.5%{transform:translate(3px,0);filter:drop-shadow(5px 0 rgba(0,229,255,.85)) drop-shadow(-5px 0 rgba(255,45,85,.85))}
  93%{transform:translate(-1px,0);filter:drop-shadow(-2px 0 rgba(0,229,255,.6)) drop-shadow(2px 0 rgba(255,45,85,.6))}}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#ffd7de;padding:8px 18px;border-radius:999px;
  background:rgba(255,42,60,.1);box-shadow:inset 0 0 0 1px rgba(255,42,60,.32);
  animation:fadeUp .7s ease both}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.4rem);line-height:1.03;margin:.1em 0 .34em;letter-spacing:-1.5px;font-weight:800;
  animation:fadeUp .7s .05s ease both}
.hl{position:relative;background:linear-gradient(90deg,var(--red-soft),var(--blue-soft),var(--red-soft));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.tag{color:var(--muted);font-size:1.14rem;max-width:640px;margin:0 auto;line-height:1.65;animation:fadeUp .7s .12s ease both}
.cta{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:fadeUp .7s .18s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- gradient-border card helper ---------- */
.gcard{position:relative;border-radius:var(--radius);background:var(--glass);
  border:1px solid var(--brd);backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.gcard::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(255,42,60,.5),transparent 40%,transparent 60%,rgba(34,211,238,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;pointer-events:none}
.gcard:hover::before{opacity:1}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;margin-top:64px}
.card{position:relative;border-radius:var(--radius);background:var(--glass);border:1px solid var(--brd);
  padding:30px;text-decoration:none;color:#fff;backdrop-filter:blur(8px);box-shadow:var(--shadow);
  transition:transform .28s, box-shadow .28s, border-color .28s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(140deg,rgba(255,42,60,.55),transparent 42%,transparent 58%,rgba(34,211,238,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .28s;pointer-events:none}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -22px rgba(0,0,0,.75)}
.card:hover::before{opacity:1}
.card .ico{font-size:2.1rem;filter:drop-shadow(0 6px 14px rgba(255,42,60,.4))}
.card h3{margin:16px 0 8px;font-size:1.22rem;font-weight:700}
.card p{color:var(--muted);margin:0;font-size:.96rem;line-height:1.55}
.card-link{display:inline-block;margin-top:16px;font-weight:600;font-size:.9rem;
  background:linear-gradient(90deg,var(--red-soft),var(--blue-soft));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
.cards .reveal:nth-child(2){transition-delay:.08s}
.cards .reveal:nth-child(3){transition-delay:.16s}

/* ---------- home socials block ---------- */
.home-socials{margin-top:72px;text-align:center}
.home-socials .badge{margin-bottom:14px}
.socials-title{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.5px;margin:0 0 8px}
.home-socials .socials{text-align:left}


.section-subtitle{
  max-width:680px;
  margin:0 auto 30px;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.65;
  text-align:center;
}
.section-subtitle strong{
  color:#fff;
  font-weight:800;
}

/* ---------- section heads ---------- */
.lb-head{text-align:center;margin-bottom:30px;padding-top:36px}
.lb-head .badge{animation:fadeUp .6s ease both}
.lb-head h1{font-size:clamp(2.3rem,6vw,3.8rem);margin:.32em 0 .2em;font-weight:800;letter-spacing:-1px}
.meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:6px 0 26px;
}
#lb-content{padding-top:20px}
.lb-tag{margin:6px auto 4px;text-align:center;font-size:.9rem;max-width:520px}
.pill{background:var(--glass);border:1px solid var(--brd);padding:9px 18px;border-radius:999px;font-size:.86rem;color:#bdeef7;font-weight:600;backdrop-filter:blur(6px)}
.pill.countdown{
  padding:0;
  border:none;
  border-radius:0;
  background:none;
  color:#fff;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  font-variant-numeric:tabular-nums;
}
.pill.rakeback{color:#06210f;font-weight:800;letter-spacing:.6px;text-transform:uppercase;border:none;
  background:linear-gradient(90deg,#4ade80,#22c55e);box-shadow:0 0 22px -6px rgba(74,222,128,.7)}

/* ---------- avatars ---------- */
.avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid var(--brd-strong);background:#14101f}
.avatar.sm{width:34px;height:34px;border-width:1.5px}
.avatar.ph{display:flex;align-items:center;justify-content:center;font-family:"Sora",sans-serif;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--red),var(--blue))}
.avatar.sm.ph{font-size:.9rem}


/* DEADFOOOL logo fallback for unavailable remote avatars */
.trophy-av.df-avatar-fallback,
.avatar.df-avatar-fallback{
  object-fit:contain;
  background:#09070d;
}
.trophy-av.df-avatar-fallback{padding:8%}
.avatar.df-avatar-fallback{padding:6px}
.avatar.sm.df-avatar-fallback{padding:3px}

/* ---------- race selector nav (above podium) ---------- */
.race-nav{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 auto 34px;
  max-width:680px;
}
.race-card{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  min-width:190px;
  padding:14px 28px 13px;
  font-family:inherit;
  color:inherit;
  cursor:pointer;
  opacity:.58;
  filter:grayscale(.35);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
    rgba(5,4,8,.64);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  backdrop-filter:blur(18px) saturate(155%);
  box-shadow:
    0 18px 44px -24px rgba(0,0,0,.95),
    0 0 28px -15px rgba(74,222,128,.65),
    inset 0 1px 0 rgba(255,255,255,.11);
  text-decoration:none;
  overflow:hidden;
  transition:transform .2s,border-color .2s,box-shadow .2s,background .2s,opacity .2s,filter .2s;
}
/* the board being shown */
.race-card.is-active{opacity:1;filter:none}
.race-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg,rgba(74,222,128,.8),transparent 42%,rgba(34,211,238,.65));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.7;
  pointer-events:none;
}
.race-card:hover{
  opacity:1;
  filter:none;
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.28);
  background:
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.025)),
    rgba(5,4,8,.72);
  box-shadow:
    0 24px 52px -24px rgba(0,0,0,.98),
    0 0 34px -12px rgba(74,222,128,.75),
    inset 0 1px 0 rgba(255,255,255,.16);
}
/* every mark sits in the same 32px slot so the amount/cadence rows line up */
.race-logo{height:26px;width:auto;display:block;margin:3px 0}
/* the CSBattle artwork carries a lot of transparent padding (visible glyph is
   the middle ~29% of the file), so it is oversized and pulled back in evenly */
.race-logo.cs{height:84px;margin:-26px 0}
.race-logo-text{font-family:"Sora",sans-serif;font-weight:800;font-size:.85rem;letter-spacing:2px;color:#4ade80;margin:8px 0 6px}
.race-amt{font-family:"Sora",sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.5px;
  color:#4ade80;text-shadow:0 0 16px rgba(74,222,128,.35)}
.race-cadence{font-size:.52rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* CSBattle keeps its own orange accent */
.race-card.cs{box-shadow:
  0 18px 44px -24px rgba(0,0,0,.95),
  0 0 28px -15px rgba(255,148,64,.65),
  inset 0 1px 0 rgba(255,255,255,.11)}
.race-card.cs::before{background:linear-gradient(135deg,rgba(255,148,64,.8),transparent 42%,rgba(255,42,60,.55))}
.race-card.cs:hover{box-shadow:
  0 24px 52px -24px rgba(0,0,0,.98),
  0 0 34px -12px rgba(255,148,64,.75),
  inset 0 1px 0 rgba(255,255,255,.16)}
.race-card.cs .race-amt{color:#ff9440;text-shadow:0 0 16px rgba(255,148,64,.35)}

/* CaseBattle uses its gold/white mark and a warm gold accent. */
.race-casebattle-brand{
  display:flex;align-items:center;justify-content:center;gap:0;
  min-height:32px;margin:0;white-space:nowrap;
}
.race-logo.cb{
  width:52px;height:46px;object-fit:contain;margin:-9px -12px -7px -5px;flex:none;
}
.race-casebattle-wordmark{
  font-family:"Sora","Inter",sans-serif;font-size:.96rem;font-weight:800;
  letter-spacing:-.5px;line-height:1;color:#f6a91a;text-shadow:0 0 16px rgba(246,169,26,.28);
}
.race-casebattle-wordmark span{color:#fff}
.race-card.cb{box-shadow:
  0 18px 44px -24px rgba(0,0,0,.95),
  0 0 28px -15px rgba(246,169,26,.65),
  inset 0 1px 0 rgba(255,255,255,.11)}
.race-card.cb::before{background:linear-gradient(135deg,rgba(246,169,26,.85),transparent 42%,rgba(255,255,255,.45))}
.race-card.cb:hover{box-shadow:
  0 24px 52px -24px rgba(0,0,0,.98),
  0 0 34px -12px rgba(246,169,26,.78),
  inset 0 1px 0 rgba(255,255,255,.16)}
.race-card.cb .race-amt{color:#f6a91a;text-shadow:0 0 16px rgba(246,169,26,.35)}

/* ---------- current / previous period switch ---------- */
.lb-periods{
  display:flex;justify-content:center;gap:5px;
  width:max-content;margin:0 auto 26px;padding:5px;
  border:1px solid var(--brd);border-radius:999px;background:rgba(255,255,255,.03);
}
.period-chip{
  padding:8px 18px;border:none;border-radius:999px;cursor:pointer;background:transparent;
  font-family:"Sora","Inter",sans-serif;font-size:.62rem;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  transition:color .2s,background .2s;
}
.period-chip:hover{color:#fff}
.period-chip.is-active{
  color:#fff;background:linear-gradient(90deg,rgba(255,42,60,.22),rgba(34,211,238,.22));
  box-shadow:inset 0 0 0 1px var(--brd-strong);
}

/* banner on an archived board */
.lb-archive{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  max-width:560px;margin:0 auto 22px;padding:11px 18px;
  border:1px solid rgba(255,208,106,.28);border-radius:14px;background:rgba(255,208,106,.06);
}
.lb-archive-tag{
  padding:3px 10px;border-radius:999px;font-size:.55rem;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);
  background:rgba(255,208,106,.14);box-shadow:inset 0 0 0 1px rgba(255,208,106,.3);
}
.lb-archive-when{color:var(--muted);font-size:.74rem;font-weight:600}

/* ---------- podium (trophy graphics) ---------- */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px auto 30px;
  max-width:560px;align-items:end}
.pod{position:relative;text-align:center;background:none;border:none;box-shadow:none;padding:0}

/* raise 1st place; 2nd & 3rd sit lower */
.pod-1{transform:translateY(-24px);z-index:2}
.pod-1 .trophy{width:105%;margin-left:-2.5%}

/* only this element animates — one composited layer, NO filters inside it (filters re-rasterize
   every frame and cause the wobble/stutter) */
.trophy{--av-x:50%;--av-y:55.5%;--av-size:50%;
  position:relative;width:100%;aspect-ratio:1/1;
  transform:none;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden}

/* Static trophy artwork is rasterized once and moved with the parent compositor layer. */
.trophy::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--trophy) center bottom/contain no-repeat;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden}
/* soft gold glow behind 1st place — a gradient composites cheaply */
.pod-1 .trophy::after{content:"";position:absolute;inset:14% 10% 6%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,208,106,.22), transparent 70%)}

.trophy-av{position:absolute;left:var(--av-x);top:var(--av-y);
  width:var(--av-size);height:var(--av-size);border-radius:50%;object-fit:cover;z-index:1;
  transform:translate3d(-50%,-50%,0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  outline:2px solid rgba(255,255,255,.14);
  box-shadow:none;
  pointer-events:none}
.trophy-av.ph{display:flex;align-items:center;justify-content:center;
  font-family:"Sora",sans-serif;font-weight:800;font-size:1.1rem;color:#fff;
  background:linear-gradient(135deg,var(--red),var(--blue))}


@media(prefers-reduced-motion:reduce){.trophy{animation:none}.hero-logo{opacity:1;animation:none;filter:none}}

.pod .pname{font-family:"Sora",sans-serif;font-weight:700;margin:12px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-1 .pname{color:var(--gold)}
.pod .pwager{color:#bdeef7;font-weight:700;font-size:1.02rem}
.pod .pprize{display:inline-block;margin-top:8px;color:#4ade80;font-weight:700;font-size:.8rem;white-space:nowrap;
  padding:0;border-radius:0;background:none;box-shadow:none}

/* 100% rakeback bonus paid on top of the race prize */
.rb-bonus{color:#4ade80;font-weight:800;text-shadow:0 0 12px rgba(74,222,128,.35)}

/* ---------- table ---------- */
.lb{width:100%;border-collapse:separate;border-spacing:0;background:var(--glass);border:1px solid var(--brd);
  border-radius:var(--radius);overflow:hidden;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.lb th,.lb td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--brd)}
.lb th{color:var(--muted);font-size:.73rem;text-transform:uppercase;letter-spacing:1.2px;font-weight:600;background:rgba(255,255,255,.02)}
.lb tbody tr:last-child td{border-bottom:none}
.lb .num{text-align:right;color:#bdeef7;font-weight:700;font-variant-numeric:tabular-nums}
.lb .prize{color:#4ade80}
.lb .rk{width:70px}
.rkbadge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;padding:0 8px;
  border-radius:9px;font-weight:700;font-size:.9rem;color:var(--muted);background:var(--glass-2)}
.lb tr.top .rkbadge{color:#fff}
.player{display:inline-flex;align-items:center;gap:12px;font-weight:600}
.lb tbody tr{transition:background .18s}
.lb tbody tr:hover{background:rgba(255,255,255,.045)}
.lb tr.top{background:linear-gradient(90deg,rgba(255,42,60,.06),rgba(34,211,238,.06))}
.updated{
  text-align:center;
  color:rgba(225,221,238,.78);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.25px;
  margin-top:20px;
  font-variant-numeric:tabular-nums;
}
.empty{text-align:center;background:var(--glass);border:1px solid var(--brd);border-radius:var(--radius);padding:56px;backdrop-filter:blur(8px)}
.empty .sub{color:var(--muted);font-size:.9rem}

/* ---------- partners panel ---------- */
.partners{margin-top:64px;text-align:center}
.partners-title{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.5px;margin:0 0 8px}
.partner-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:12px;
  width:100%;
  max-width:820px;
  margin:0 auto;
}
.partner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  text-decoration:none;
  transition:transform .2s, opacity .2s;
}
.partner:hover{transform:translateY(-4px);opacity:.9}
.partner-logo{height:52px;width:auto;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.partner-logo.cs{height:156px;margin-inline:-10px}   /* compensate for transparent padding */
.partner-logo-text{font-family:"Sora",sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:2px;color:#4ade80}



.casebattle-partner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.casebattle-icon{
  display:block;
  width:128px;
  height:116px;
  object-fit:contain;
  flex:none;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));
}
.casebattle-wordmark{
  margin-left:-26px;
  font-family:"Sora","Inter",sans-serif;
  font-size:1.85rem;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1;
  color:#f6a91a;
  white-space:nowrap;
  text-shadow:0 5px 18px rgba(0,0,0,.65);
}
.casebattle-wordmark span{color:#fff}

/* ================= Jester's Jackpot slot machine =================
   Ported from the standalone demo. Every rule is scoped to .slot-app so the
   machine's styling can never leak into the rest of the site.              */
.slot-app{
  --slot-red:#ff0d2f;
  --slot-cyan:#12dcff;
  --slot-gold:#ffc52b;
  --slot-white:#f7fbff;
  --slot-muted:#9aa4b4;
  /* Visible to everyone — signing in is what makes the controls live. */
  display:block;
  width:min(1180px,100%);
  margin:0 auto;
  color:var(--slot-white);
}
body.auth-pending .slot-app{display:none}

.slot-machine{
  /* Scaled to 1/1.5. zoom rather than transform because it reflows: the page
     below collapses to the smaller size instead of leaving a full-size gap, and
     pointer targets stay where they look.
     The width is repeated here because zoom only scales the contents — a block
     with width:auto would still stretch to the full parent and render at the
     old size. Stated inside the zoomed coordinate space, 1180 units render as
     the intended ~787px, and 100% still wins on screens narrower than that. */
  zoom:.6667;
  width:min(1180px,100%);
  position:relative;
  border:2px solid rgba(255,255,255,.11);
  border-radius:34px;
  padding:28px;
  margin:52px auto 0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),transparent 22%),
    linear-gradient(180deg,#242a38 0,#10131b 12%,#090b10 100%);
  box-shadow:0 28px 70px rgba(0,0,0,.55),inset 0 0 0 6px #05070a,inset 0 0 0 8px #333a49;
}
.slot-machine::before{
  content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.08);
  border-radius:24px;pointer-events:none;
}

.slot-actions{position:absolute;top:18px;right:20px;display:flex;gap:8px;z-index:3}
.slot-icon-btn{
  width:40px;height:40px;border-radius:12px;cursor:pointer;font-weight:900;font-size:1.05rem;
  border:1px solid rgba(255,255,255,.14);color:var(--slot-white);
  background:linear-gradient(#1f2430,#0c0e14);box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.slot-icon-btn[aria-pressed="false"]{color:#5d6674}

.slot-jackpot{
  width:min(420px,88%);
  margin:-52px auto 20px;
  padding:14px 22px 13px;
  display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;
  border-radius:22px 22px 10px 10px;
  border:3px solid #f13941;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 32%),
    repeating-linear-gradient(135deg,#5e0010 0 12px,#860016 12px 24px);
  box-shadow:0 0 0 6px #0b0c11,0 0 34px rgba(255,13,47,.42);
  text-transform:uppercase;
}
.slot-jackpot span{font-weight:900;letter-spacing:.16em;font-size:.72rem;color:#ffd8dc}
.slot-jackpot strong{
  font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(1.9rem,5vw,3.6rem);letter-spacing:.07em;line-height:1;
  color:var(--slot-gold);text-shadow:0 4px 0 #4b1500,0 0 18px rgba(255,197,43,.5);
}
.slot-jackpot small{color:#ffb1bd;font-weight:800}

.slot-bezel{
  position:relative;border-radius:22px;padding:18px;
  background:linear-gradient(135deg,#fafafa,#555d6a 15%,#151820 50%,#666d78 85%,#f4f4f4);
  box-shadow:inset 0 0 0 5px #07090d,0 16px 30px rgba(0,0,0,.5);
}
.slot-reels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  border-radius:14px;padding:14px;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(18,220,255,.05),transparent 12% 88%,rgba(255,13,47,.07)),
    #030509;
  box-shadow:inset 0 0 35px #000;
}
.slot-reel{display:grid;gap:10px;min-width:0}
.slot-cell{
  position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;
  display:grid;place-items:center;
  background:
    linear-gradient(145deg,rgba(255,255,255,.09),transparent 35%),
    radial-gradient(circle at 50% 35%,#1c2230,#090b11 68%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 0 20px rgba(0,0,0,.8);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.slot-cell::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.1) 50%,transparent 75%);
  transform:translateX(-120%);
}
.slot-cell img{
  width:82%;height:82%;object-fit:contain;
  filter:drop-shadow(0 9px 6px rgba(0,0,0,.55));
  user-select:none;-webkit-user-drag:none;
}
.slot-cell.spinning img{animation:slotJitter .12s infinite alternate ease-in-out;
  filter:blur(1px) drop-shadow(0 9px 6px rgba(0,0,0,.55))}
.slot-cell.spinning::after{animation:slotSweep .42s linear infinite}
.slot-cell.winner{
  z-index:2;transform:scale(1.04);border-color:var(--slot-gold);
  box-shadow:0 0 0 2px #fff4a4,0 0 30px rgba(255,197,43,.85),inset 0 0 25px rgba(255,197,43,.25);
  animation:slotWinnerPulse .68s ease-in-out infinite alternate;
}
@keyframes slotJitter{to{transform:translateY(4px) scale(.98)}}
@keyframes slotSweep{to{transform:translateX(120%)}}
@keyframes slotWinnerPulse{to{filter:brightness(1.25)}}

.slot-payline-lights{position:absolute;inset:4px;border-radius:19px;pointer-events:none;
  box-shadow:inset 0 0 20px rgba(18,220,255,.1)}
.slot-flash{position:absolute;inset:18px;border-radius:14px;pointer-events:none}
.slot-flash.active{animation:slotFlash .55s ease-out}
@keyframes slotFlash{
  0%{box-shadow:inset 0 0 80px rgba(255,255,255,.8),0 0 40px var(--slot-cyan)}
  100%{box-shadow:none}
}

.slot-message{
  min-height:26px;text-align:center;margin:17px 0 12px;
  color:var(--slot-muted);font-weight:800;letter-spacing:.05em;font-size:.9rem;
}
.slot-message.win{color:var(--slot-gold);text-shadow:0 0 14px rgba(255,197,43,.48)}
.slot-message.jackpot{color:var(--slot-cyan);font-size:1.05rem;text-shadow:0 0 16px rgba(18,220,255,.7)}

.slot-dashboard{
  display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;gap:14px;
  border-radius:18px;padding:14px;
  background:linear-gradient(#171b24,#080a0f);
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.06);
}
.slot-meter{
  min-width:0;text-align:center;border:1px solid rgba(18,220,255,.22);
  background:#030507;border-radius:12px;padding:9px 12px;
  box-shadow:inset 0 0 14px rgba(18,220,255,.05);
}
.slot-meter span{display:block;color:var(--slot-muted);font-size:.63rem;letter-spacing:.16em;font-weight:900}
.slot-meter strong{
  color:var(--slot-cyan);font-family:"Courier New",monospace;
  font-size:clamp(1rem,3vw,1.55rem);text-shadow:0 0 10px rgba(18,220,255,.5);
}
.slot-auto-btn{
  border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--slot-white);
  background:linear-gradient(#2b303c,#11141b);cursor:pointer;font-weight:900;font-family:inherit;
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.slot-auto-btn:active{transform:translateY(1px)}
.slot-auto-btn:disabled{opacity:.5;cursor:not-allowed}

.slot-spin-btn{
  width:118px;height:118px;border-radius:50%;border:0;cursor:pointer;position:relative;
  display:grid;place-content:center;color:#fff;font-family:inherit;text-transform:uppercase;
  background:radial-gradient(circle at 35% 30%,#ff6a78,#ff0a2d 43%,#920016 70%);
  box-shadow:0 0 0 7px #050608,0 0 0 11px #69717f,0 10px 26px #000,
             0 0 30px rgba(255,13,47,.34),inset 0 -12px 16px rgba(0,0,0,.34);
}
.slot-spin-btn:hover{filter:brightness(1.1)}
.slot-spin-btn:active{transform:scale(.97)}
.slot-spin-btn:disabled{cursor:wait;filter:grayscale(.35) brightness(.7)}
.slot-spin-btn strong{font-family:Impact,"Arial Black",sans-serif;letter-spacing:.08em;font-size:1.9rem;z-index:1}
.slot-spin-btn small{z-index:1;font-weight:900;opacity:.7;letter-spacing:.15em}
.slot-spin-ring{position:absolute;inset:8px;border-radius:50%;border:2px dashed rgba(255,255,255,.46)}
.slot-spin-btn:not(:disabled):hover .slot-spin-ring{animation:slotRing 5s linear infinite}
@keyframes slotRing{to{transform:rotate(360deg)}}

.slot-auto-btn{min-height:48px;color:var(--slot-gold);letter-spacing:.05em}
.slot-auto-btn[aria-pressed="true"]{color:#081015;background:var(--slot-cyan);
  box-shadow:0 0 18px rgba(18,220,255,.45)}

/* Capped to the machine's new rendered width so the prize table lines up under
   it rather than running wider than the machine it belongs to. Not zoomed —
   these cards stay full size so the odds remain readable. */
.slot-payouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin:14px auto 0;max-width:787px}
.slot-payouts>div{
  min-width:0;display:flex;align-items:center;gap:9px;
  border:1px solid rgba(255,255,255,.08);background:rgba(15,18,25,.78);
  border-radius:14px;padding:8px 12px;
}
.slot-payouts>div.is-blank{opacity:.62}
.slot-payouts img{width:46px;height:46px;object-fit:contain;flex:none}
.slot-payouts span{color:var(--slot-muted);font-size:.7rem;line-height:1.35}
.slot-payouts b{color:var(--slot-gold);font-size:.82rem}
.slot-payouts>div.is-blank b{color:var(--slot-muted)}
/* #727b8a sat too close to the page behind it to read; lifted to the site's
   muted colour and given a shadow so it stays legible over the background art. */
.slot-legal{
  text-align:center;color:var(--muted);font-size:.78rem;line-height:1.6;
  margin:18px auto 0;max-width:560px;text-shadow:0 2px 10px rgba(0,0,0,.85);
}

/* rules dialog */
#slot-rules-modal{
  position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#slot-rules-modal.open{display:flex}
.slot-rule-grid{display:grid;gap:8px;margin:0}
.slot-rule-grid div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:7px;border-bottom:1px solid var(--brd)}
.slot-rule-grid div:last-child{border-bottom:none}
.slot-rule-grid dt{color:var(--muted);font-size:.8rem}
.slot-rule-grid dd{margin:0;color:var(--blue-soft);font-weight:800;font-size:.8rem}
.slot-rule-note{margin:16px 0 0;text-align:center;color:var(--muted);font-size:.75rem}
.slot-rule-note strong{color:#fff}

@media(max-width:820px){
  .slot-machine{padding:18px 12px 14px;border-radius:24px;margin-top:38px}
  .slot-actions{top:12px;right:12px}
  .slot-icon-btn{width:34px;height:34px;font-size:.9rem}
  .slot-jackpot{margin-top:-35px}
  .slot-bezel{padding:10px}
  .slot-reels{gap:7px;padding:8px}
  .slot-cell{border-radius:12px}
  .slot-dashboard{grid-template-columns:1fr 1fr}
  .slot-spin-btn{grid-column:1/-1;grid-row:1;justify-self:center}
  .slot-auto-btn{min-height:55px}
  .slot-payouts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .slot-jackpot{width:94%;padding:11px 16px}
  .slot-payouts>div{padding:7px}
  .slot-payouts img{width:42px;height:42px}
  .slot-message{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .slot-app *,.slot-app *::before,.slot-app *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
  }
}

/* ================= point store ================= */
/* Visible to everyone — redeeming is what needs the account. */
.store{display:block;width:min(980px,100%);margin:0 auto}
body.auth-pending .store{display:none}

.store-bar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 20px;margin-bottom:22px;
  border:1px solid var(--brd);border-radius:var(--radius);
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.store-balance{
  flex:none;display:grid;gap:2px;padding:9px 18px;border-radius:14px;
  border:1px solid rgba(34,211,238,.28);background:rgba(34,211,238,.07);
}
.store-balance span{font-size:.56rem;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted)}
.store-balance strong{font-family:"Sora",sans-serif;font-size:1.45rem;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--blue-soft)}
.store-note{flex:1 1 260px;margin:0;color:var(--muted);font-size:.82rem;line-height:1.6}
/* The wagering warning has to carry against the muted line it sits in — same
   gold the settings dialog uses for a consequence. */
.store-note strong{color:var(--gold);font-weight:800}

.store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.store-item{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:26px 20px 20px;border:1px solid var(--brd);border-radius:var(--radius);
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:var(--shadow);text-align:center;
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.store-item:hover{transform:translateY(-4px);border-color:var(--brd-strong)}
.store-item.is-short{opacity:.66}

/* the partner badge — its logo, never its name */
.store-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:6px 14px;border-radius:999px;
  border:1px solid rgba(74,222,128,.3);background:rgba(74,222,128,.08);
}
.store-badge img{height:16px;width:auto;display:block}

.store-item-name{
  margin:0;font-family:"Sora",sans-serif;font-size:1rem;font-weight:800;
  letter-spacing:.2px;color:#fff;
}
.store-cost{
  display:flex;align-items:baseline;gap:6px;
  font-family:"Sora",sans-serif;font-size:1.7rem;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--gold);
}
.store-cost small{font-family:"Inter",sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

.store-buy{width:100%;justify-content:center;padding:12px;font-size:.74rem;letter-spacing:1.3px}
.store-buy:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;
  background:var(--glass-2);border:1px solid var(--brd)}
.store-buy.is-armed{background:linear-gradient(90deg,var(--gold),#ffb347);color:#241500}
/* A visitor's button stays clickable — it opens the sign-in dialog. */
.store-buy.is-locked{background:var(--glass-2);border:1px solid var(--brd);
  color:var(--muted);box-shadow:none}
.store-buy.is-locked:hover{color:#fff;background:rgba(34,211,238,.08);
  border-color:rgba(34,211,238,.45)}

#store-msg{max-width:560px;margin:20px auto 0}

/* order status reuses the settings link badges */
.link-badge.pending{color:var(--gold);background:rgba(255,208,106,.13);
  box-shadow:inset 0 0 0 1px rgba(255,208,106,.32)}
.link-badge.approved{color:#8ef0b4;background:rgba(74,222,128,.13);
  box-shadow:inset 0 0 0 1px rgba(74,222,128,.32)}
.link-badge.rejected{color:var(--red-soft);background:rgba(255,42,60,.12);
  box-shadow:inset 0 0 0 1px rgba(255,42,60,.32)}

@media(max-width:560px){
  .store-bar{flex-direction:column;align-items:flex-start}
}

/* ---------- account → transactions ---------- */
.acct-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.acct-stat{
  display:grid;gap:4px;padding:12px 14px;
  border:1px solid var(--brd);border-radius:13px;background:rgba(255,255,255,.025);
}
.acct-stat-label{font-size:.56rem;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted)}
.acct-stat-value{font-family:"Sora",sans-serif;font-size:1.2rem;font-weight:800;
  font-variant-numeric:tabular-nums;color:#fff}
.acct-stat.spent .acct-stat-value{color:var(--blue-soft)}
.acct-stat.won .acct-stat-value{color:var(--gold)}

/* No cap of its own — the pane above is the scroll region, so a list capped
   here as well would nest one scrollbar inside another. */
.acct-orders{display:grid;gap:8px}
.acct-order{
  padding:11px 14px;border:1px solid var(--brd);border-left-width:3px;
  border-radius:12px;background:rgba(255,255,255,.025);
}
.acct-order.is-pending{border-left-color:var(--gold)}
.acct-order.is-approved{border-left-color:var(--green)}
.acct-order.is-rejected{border-left-color:var(--red)}
.acct-order-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.acct-order-name{font-weight:700;font-size:.84rem;color:#fff}
.acct-order-meta{display:flex;align-items:center;gap:10px;margin-top:5px}
.acct-order-cost{font-size:.76rem;font-weight:700;color:var(--blue-soft);
  font-variant-numeric:tabular-nums}
.acct-order-when{font-size:.7rem;color:var(--muted)}
.acct-order-refund{font-size:.55rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;color:#8ef0b4;background:rgba(74,222,128,.12)}
.acct-order-note{margin:7px 0 0;font-size:.7rem;line-height:1.5;color:var(--muted)}
.acct-order.is-rejected .acct-order-note{color:#ffc2cb}
.acct-empty{margin:0;padding:20px 4px;text-align:center;color:var(--muted);font-size:.78rem}

/* ---------- order placed confirmation ---------- */
#order-modal{
  /* Above the settings dialog: it can be opened from behind it. */
  position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#order-modal.open{display:flex}
.order-box{width:min(420px,100%);text-align:center}
.order-tick{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;
  border-radius:50%;font-size:1.5rem;font-weight:800;color:#8ef0b4;
  background:rgba(74,222,128,.12);box-shadow:inset 0 0 0 1px rgba(74,222,128,.34);
}
.order-left{display:inline-block;margin-top:8px;font-weight:800;color:var(--blue-soft)}
.order-actions{display:flex;gap:9px;margin-top:22px}
.order-actions .btn{flex:1}

@media(max-width:560px){
  .acct-stats{grid-template-columns:1fr}
  .order-actions{flex-direction:column}
}

/* ---------- coming soon placeholder ---------- */
.coming-soon{max-width:560px;margin:0 auto;text-align:center;padding:56px 34px;
  border-radius:var(--radius);background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.coming-soon .cs-ico{font-size:3rem;filter:drop-shadow(0 8px 20px rgba(255,42,60,.4))}
.coming-soon h3{font-family:"Sora",sans-serif;font-size:1.5rem;margin:14px 0 8px}
.coming-soon p{color:var(--muted);margin:0;line-height:1.6}

/* ---------- socials ---------- */
.socials{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}
.social{display:inline-flex;padding:0;background:none;border:none;text-decoration:none;
  transition:transform .2s, opacity .2s}
.social:hover{transform:translateY(-4px);opacity:.85}
.sico{width:42px;height:42px;flex:none;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}


/* ---------- DEADFOOOL footer ---------- */
.site-footer{
  position:relative;
  z-index:2;
  margin-top:auto;
  padding:16px 26px;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.018)),
    rgba(5,4,8,.74);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
  box-shadow:
    0 -18px 46px -24px rgba(0,0,0,.95),
    0 -8px 30px -18px rgba(34,211,238,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.site-footer-inner{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 24px;
}
.site-footer-brand{
  flex:none;
  font-family:"Sora","Inter",sans-serif;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:1.7px;
  color:#fff;
  text-decoration:none;
}
.site-footer-brand span{
  background:linear-gradient(90deg,var(--red-soft),var(--blue-soft));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.site-footer-links{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 14px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.65px;
  text-transform:uppercase;
}
.site-footer-link{
  color:rgba(225,221,238,.82);
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease,transform .18s ease;
}
.site-footer-link:hover,
.site-footer-link:focus-visible{
  color:#fff;
  transform:translateY(-1px);
}
.footer-link-button{
  appearance:none;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  cursor:pointer;
}
.footer-sep{color:var(--muted);opacity:.48}
.site-footer-meta{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:rgba(225,221,238,.76);
  font-size:.64rem;
  letter-spacing:.45px;
  white-space:nowrap;
}

.footer-credit{
  color:var(--muted);
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
}

.responsible{display:inline-flex;align-items:center;gap:6px}
.age-badge{
  padding:2px 6px;
  border:1px solid var(--brd-strong);
  border-radius:6px;
  color:var(--red-soft);
  font-weight:800;
  font-size:.58rem;
}

/* ---------- legal modal ---------- */
body.modal-open{overflow:hidden}
#legal-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);
}
#legal-modal.open{display:flex}
.legal-box{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(780px,100%);
  max-height:88vh;
  overflow:hidden;
  border:1px solid var(--brd-strong);
  border-radius:20px;
  background:linear-gradient(155deg,rgba(18,14,27,.99),rgba(5,4,8,.99));
  box-shadow:0 34px 100px rgba(0,0,0,.85),0 0 60px rgba(34,211,238,.08);
}
.legal-box::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,var(--red),var(--blue));
  pointer-events:none;
}
.legal-bar{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px 14px 22px;
  border-bottom:1px solid var(--brd);
  background:rgba(8,6,13,.92);
}
.legal-eyebrow{
  font-family:"Sora","Inter",sans-serif;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:2.3px;
  text-transform:uppercase;
  color:var(--blue-soft);
}
.legal-close{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid var(--brd-strong);
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:1rem;
  cursor:pointer;
}
.legal-close:hover,
.legal-close:focus-visible{
  color:#fff;
  border-color:rgba(34,211,238,.45);
  background:rgba(34,211,238,.08);
}
.legal-scroll{
  flex:1 1 auto;
  overflow-y:auto;
  padding:28px 34px 38px;
  overscroll-behavior:contain;
}
.legal-scroll::-webkit-scrollbar{width:7px}
.legal-scroll::-webkit-scrollbar-thumb{
  border-radius:20px;
  background:linear-gradient(var(--red),var(--blue));
}
.legal-content h2{
  margin:0 0 5px;
  text-align:center;
  font-family:"Sora","Inter",sans-serif;
  font-size:1.55rem;
  font-weight:800;
}
.legal-updated{
  margin-bottom:22px;
  text-align:center;
  color:var(--muted);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:1.7px;
  text-transform:uppercase;
}
.legal-content h3{
  margin:22px 0 7px;
  font-family:"Sora","Inter",sans-serif;
  font-size:.92rem;
  color:var(--blue-soft);
}
.legal-content p,
.legal-content li{
  color:var(--muted);
  font-size:.85rem;
  line-height:1.72;
}
.legal-content p{margin:0 0 9px}
.legal-content ul{margin:5px 0 10px;padding-left:20px}
.legal-content li{margin:4px 0}
.legal-content strong{color:var(--text)}
.legal-content a{color:var(--blue-soft);text-decoration:none}
.legal-content a:hover{text-decoration:underline}

/* The wallet labels are the first thing to go when the navbar gets tight. */
@media(max-width:1080px){
  .wallet-label{display:none}
}

/* Below this the brand + wallet + nav no longer fit on one line, so the nav
   drops to its own row rather than being squeezed off the edge. */
@media(max-width:1040px){
  .topbar{display:flex;flex-wrap:wrap;gap:12px}
  .brand{order:1}
  .nav-auth{order:2;margin-left:auto}
  .mainnav{order:3;width:100%;justify-content:center;margin:0;overflow-x:auto}
}

@media(max-width:760px){
  .site-footer-inner{flex-direction:column;text-align:center;gap:12px}
  .site-footer-links .footer-sep{display:none}
  .site-footer-meta{white-space:normal;justify-content:center;flex-wrap:wrap}
  .legal-scroll{padding:24px 21px 32px}
}

@media(max-width:640px){
  .partner-grid{
    grid-template-columns:1fr;
    max-width:360px;
    gap:26px;
  }
  .partner{width:100%}

  .casebattle-partner{gap:2px}
  .casebattle-wordmark{margin-left:-22px;font-size:1.45rem}

  /* Back to a wrapping flex row: brand + wallet on top, nav underneath. */
  .topbar{display:flex;padding:12px 16px;flex-wrap:wrap;gap:10px}
  .nav-auth{margin-left:auto;gap:6px}
  .wallet{gap:5px}
  .wallet-chip{padding:6px 10px 6px 8px;font-size:.7rem;gap:5px}
  .wallet-ico{width:14px;height:14px}
  .auth-btn{padding:8px 15px;font-size:.66rem;letter-spacing:1.2px}
  .user-chip{padding:7px 11px;font-size:.72rem}
  .user-chip-name{max-width:92px}
  .user-drop{width:min(258px,calc(100vw - 32px))}
  .auth-box{padding:26px 20px 22px}
  .auth-row{grid-template-columns:1fr}
  .mainnav{position:static;transform:none;order:3;justify-content:center;margin:2px auto 0;max-width:100%;overflow-x:auto}
  .mainnav a{padding:7px 12px;font-size:.82rem;white-space:nowrap}
  .nav-group-btn{padding:7px 12px;font-size:.82rem;white-space:nowrap}
  /* Alignment is handled in the base rule now; only the width tightens here. */
  .nav-group-menu{min-width:160px}
  .podium{grid-template-columns:1fr;align-items:stretch}
  .pod-1{transform:none}
  .tok{font-size:1.6rem}
  .lb th:nth-child(3),.lb td:nth-child(3){display:none}   /* hide Wagered on very small screens */
}


/* ---------- leaderboard + podium text: 1.5x smaller (66.667% scale) ---------- */
.pod .pname{font-size:.667rem}
.pod .pwager{font-size:.68rem}
.lb th{font-size:.487rem}
.lb td{font-size:.667rem}
.rkbadge{font-size:.6rem}

/* prize stays the headline number — kept above the shrunken board text,
   with the rakeback bonus stepped down beneath it */
.pod .pprize{font-size:.82rem}
.pod .pprize .rb-bonus{font-size:1em}
.lb td.prize{font-size:.86rem}
.lb td.prize .rb-bonus{font-size:1em}

/* ================= Kick stream popup (bottom-right) ================= */
.kick-popup{
  position:fixed;bottom:22px;right:22px;z-index:1200;
  opacity:0;pointer-events:none;transform:translateY(16px);
  transition:opacity .3s ease,transform .32s cubic-bezier(.23,1,.32,1);
}
.kick-popup.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.kick-popup-box{
  width:340px;max-width:calc(100vw - 20px);
  border:1px solid var(--brd-strong);border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,rgba(18,14,27,.99),rgba(5,4,8,1));
  box-shadow:0 22px 60px rgba(0,0,0,.85),0 0 40px -18px rgba(83,252,24,.5);
}
.kick-popup-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-bottom:1px solid var(--brd);background:rgba(255,255,255,.02);
}
.kick-popup-live{
  display:inline-flex;align-items:center;gap:7px;
  font-family:"Sora",sans-serif;font-size:.76rem;font-weight:800;letter-spacing:.4px;color:#6bff5a;
}
.kick-live-dot{
  width:7px;height:7px;border-radius:50%;background:#53fc18;
  box-shadow:0 0 8px rgba(83,252,24,.85);animation:kickPulse 1.5s ease-in-out infinite;
}
@keyframes kickPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
.kick-popup-close{
  width:30px;height:30px;flex:none;display:grid;place-items:center;padding:0;
  border:1px solid var(--brd);border-radius:9px;background:transparent;
  color:var(--muted);cursor:pointer;transition:all .15s;
}
.kick-popup-close svg{width:15px;height:15px}
.kick-popup-close:hover{color:#fff;border-color:rgba(255,42,60,.45);background:rgba(255,42,60,.12)}
.kick-popup-player{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.kick-popup-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kick-popup-foot{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-top:1px solid var(--brd);
}
.kick-popup-hint{
  flex:1;min-width:0;color:var(--muted);font-size:.64rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kick-popup-open{
  flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;
  background:#53fc18;color:#04120a;border-radius:8px;text-decoration:none;
  font-family:"Sora",sans-serif;font-size:.68rem;font-weight:800;letter-spacing:.3px;
  transition:filter .15s,box-shadow .15s;
}
.kick-popup-open svg{width:12px;height:12px}
.kick-popup-open:hover{filter:brightness(1.08);box-shadow:0 4px 16px -4px rgba(83,252,24,.6)}

/* ================= latest content (VOD + YouTube) ================= */
.latest{max-width:1120px;margin:64px auto 0;padding:0 24px}
.latest-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:26px;
}
.latest-title{font-family:"Sora",sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-.5px;margin:0}
.latest-tabs{
  display:flex;gap:3px;padding:4px;border:1px solid var(--brd);border-radius:12px;background:var(--glass);
}
.latest-tab{
  display:inline-flex;align-items:center;gap:7px;padding:8px 18px;cursor:pointer;
  border:0;border-radius:9px;background:transparent;color:var(--muted);
  font-family:"Sora",sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  transition:color .15s,background .15s;
}
.latest-tab svg{width:15px;height:15px}
.latest-tab .kmark{font-family:"Sora",sans-serif;font-weight:900;font-size:.95rem;line-height:1}
.latest-tab.is-active{background:var(--red);color:#fff;box-shadow:0 4px 14px -4px rgba(255,42,60,.55)}
.latest-tab.kick.is-active{background:#15803d;color:#c9ffbe;box-shadow:0 4px 14px -4px rgba(83,252,24,.4)}

.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vid-card{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  border:1px solid var(--brd);border-radius:16px;background:var(--glass);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.vid-card:hover{transform:translateY(-5px);border-color:var(--brd-strong);box-shadow:0 22px 50px -20px rgba(0,0,0,.8)}
.vid-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#06040e;flex:none}
.vid-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .28s}
.vid-card:hover .vid-thumb img{transform:scale(1.05)}
.vid-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,0);transition:background .2s}
.vid-card:hover .vid-play{background:rgba(0,0,0,.4)}
.vid-play span{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:#0a0712;transform:scale(0);
  transition:transform .2s cubic-bezier(.2,.7,.2,1);
}
.vid-play span svg{width:18px;height:18px;margin-left:2px}
.vid-card:hover .vid-play span{transform:scale(1)}
.vid-dur{
  position:absolute;bottom:8px;right:8px;padding:2px 7px;border-radius:5px;
  background:rgba(0,0,0,.88);color:#fff;font-size:.64rem;font-weight:800;letter-spacing:.4px;
}
.vid-info{padding:13px 15px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.vid-title{
  font-family:"Sora",sans-serif;font-size:.86rem;font-weight:700;line-height:1.42;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vid-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.7rem}
.vid-seeall{
  display:inline-flex;align-items:center;gap:8px;margin-top:24px;
  color:var(--muted);text-decoration:none;
  font-family:"Sora",sans-serif;font-size:.74rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  transition:color .15s;
}
.vid-seeall svg{width:15px;height:15px}
.vid-seeall:hover{color:var(--red-soft)}
.vid-status{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:56px 20px;text-align:center;color:var(--muted);line-height:1.6;
}
.vid-status a{color:var(--red-soft);text-decoration:none;font-weight:700}
.vid-status a:hover{text-decoration:underline}
.vid-spin{width:26px;height:26px;border-radius:50%;
  border:3px solid var(--brd-strong);border-top-color:var(--red);animation:vidSpin .7s linear infinite}
@keyframes vidSpin{to{transform:rotate(360deg)}}

@media(max-width:760px){.vid-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){
  .vid-grid{grid-template-columns:1fr}
  .latest-head{flex-direction:column;align-items:flex-start}
  .kick-popup{right:10px;bottom:10px}
}