/* ============================================================
   skin.css — shared premium reskin for the inner pages
   (leaderboard, previous, rewards hub + detail pages)

   Loaded AFTER each page's own <style> so these rules win ties.
   Accent-agnostic on purpose: each page keeps its own accent
   colour (teal / gold / orange / blue / purple); this layer only
   upgrades depth, glass, motion and spacing. It never touches
   opacity/transform on JS-animated rows or grid-template-columns
   set inline by scripts.
   ============================================================ */

:root{
  --sk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sk-line: rgba(255,255,255,0.09);
  --sk-glass: rgba(14,16,30,0.66);
  --sk-glass-2: rgba(10,12,24,0.8);
}

/* ---- Deepen the base + let the 3D canvas breathe through -------------- */
body{
  background:
    radial-gradient(1100px 640px at 50% -12%, #11173400 0%, transparent 60%),
    linear-gradient(180deg, #06070f 0%, #080a18 42%, #05060f 100%) !important;
}
.bg-pattern{ opacity:.55; mix-blend-mode:screen; }

/* ---- Headings / titles get a touch more presence --------------------- */
.title{ text-shadow:0 0 30px rgba(0,0,0,0.4); }

/* ---- Buttons: back / home / nav -------------------------------------- */
.back-btn, .home-btn, .previous-lb-btn{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:12px !important;
  transition:transform .28s var(--sk-ease), background .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}
.back-btn:hover, .home-btn:hover, .previous-lb-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
}

/* ---- Generic glass cards -------------------------------------------- */
.content-box, .info-section, .rewards-container, .leaderboard-container,
.lookup-container, .countdown-container, .stat, .reward-card{
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
}

.content-box, .info-section{
  background:var(--sk-glass) !important;
  border:1px solid var(--sk-line) !important;
  border-radius:22px !important;
  box-shadow:0 24px 50px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition:transform .4s var(--sk-ease), box-shadow .4s var(--sk-ease), border-color .4s ease;
}
.content-box:hover, .info-section:hover{
  transform:translateY(-3px);
  box-shadow:0 34px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ---- Reward hero (detail pages) ------------------------------------- */
.reward-hero{
  position:relative; overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:26px !important;
  box-shadow:0 30px 70px rgba(0,0,0,0.4);
}
.reward-hero::after{
  content:""; position:absolute; inset:-40%;
  background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.06), transparent 55%);
  pointer-events:none;
  animation:skDrift 11s ease-in-out infinite alternate;
}
@keyframes skDrift{ 0%{transform:translate(0,0)} 100%{transform:translate(3%,4%)} }
.reward-icon{ filter:drop-shadow(0 10px 24px rgba(0,0,0,0.5)); animation:skFloat 4.5s ease-in-out infinite; display:inline-block; }
@keyframes skFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.reward-highlight{ letter-spacing:1px; }

/* ---- Reward hub cards ----------------------------------------------- */
.reward-card{
  background:var(--sk-glass) !important;
  border:1px solid var(--sk-line) !important;
  border-radius:22px !important;
  box-shadow:0 22px 46px rgba(0,0,0,0.32);
  transition:transform .4s var(--sk-ease), box-shadow .4s var(--sk-ease), border-color .4s ease !important;
}
.reward-card:hover{
  transform:translateY(-4px) translateX(6px) !important;
  box-shadow:0 34px 70px rgba(0,0,0,0.46) !important;
}
.reward-card-icon{ transition:transform .4s var(--sk-ease); }
.reward-card:hover .reward-card-icon{ transform:scale(1.08) rotate(-4deg); }

/* ---- CTA boxes ------------------------------------------------------ */
.cta-box{
  position:relative; overflow:hidden;
  border-radius:20px !important;
  box-shadow:0 26px 60px rgba(0,0,0,0.4);
}
.cta-box .cta-btn{ transition:transform .26s var(--sk-ease), box-shadow .26s ease !important; }
.cta-box .cta-btn:hover{ transform:translateY(-3px) scale(1.03) !important; }

/* ---- Leaderboard container + rows ----------------------------------- */
.leaderboard-container{
  background:var(--sk-glass-2) !important;
  border:1px solid var(--sk-line) !important;
  border-radius:26px !important;
  box-shadow:0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.leaderboard-header{
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:5;
}
.player-row{ transition:background .3s ease, box-shadow .3s ease, transform .3s var(--sk-ease); }
.player-row:hover{
  background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)) !important;
  box-shadow:inset 3px 0 0 currentColor;
}

/* Rank badges: deepen + animate the leader */
.rank{ box-shadow:0 8px 22px rgba(0,0,0,0.4); }
.rank-1{ animation:skLeader 2.6s ease-in-out infinite; }
@keyframes skLeader{
  0%,100%{ box-shadow:0 6px 22px rgba(255,206,74,0.45); }
  50%{ box-shadow:0 10px 36px rgba(255,206,74,0.85); }
}
.crown{ animation:skCrown 2.4s ease-in-out infinite; transform-origin:bottom center; }
@keyframes skCrown{ 0%,100%{ transform:translateY(0) rotate(-6deg);} 50%{ transform:translateY(-4px) rotate(6deg);} }
.prize-amount.top-prize{ animation:skGoldPulse 3s ease-in-out infinite; }
@keyframes skGoldPulse{ 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.25);} }

/* ---- Countdown tiles ------------------------------------------------ */
.countdown-container{
  background:linear-gradient(135deg, rgba(255,206,74,0.08), rgba(255,255,255,0.02)) !important;
  border:1px solid rgba(255,206,74,0.22) !important;
  border-radius:20px !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.36);
}
.countdown-block{
  background:rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:12px 6px 10px;
  min-width:74px;
  transition:transform .3s var(--sk-ease);
}
.countdown-block:hover{ transform:translateY(-3px); }

/* ---- Lookup --------------------------------------------------------- */
.lookup-container{
  border-radius:20px !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.34);
}
.lookup-input{ border-radius:12px !important; backdrop-filter:blur(6px); }
.lookup-btn{ transition:transform .25s var(--sk-ease), box-shadow .25s ease !important; }
.lookup-btn:hover{ transform:translateY(-2px) scale(1.03) !important; }
.result-stat{ transition:transform .3s var(--sk-ease); }
.result-stat:hover{ transform:translateY(-3px); }

/* ---- Stat tiles ----------------------------------------------------- */
.stat{
  border-radius:18px !important;
  transition:transform .35s var(--sk-ease), box-shadow .35s ease, border-color .35s ease;
}
.stat:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(0,0,0,0.4); }

/* ---- Tables / rows on reward pages ---------------------------------- */
.vip-table tr{ transition:background .25s ease; }
.reward-row{ transition:background .3s ease, transform .3s var(--sk-ease) !important; }
.reward-row:hover{ transform:translateX(4px); }
.race-card, .giveaway-card, .term-item, .example-item{
  transition:transform .35s var(--sk-ease), box-shadow .35s ease, border-color .35s ease;
}
.race-card:hover, .giveaway-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,0.4); }

/* ---- Period tabs (previous) ----------------------------------------- */
.period-tab{ transition:transform .25s var(--sk-ease), background .25s ease, border-color .25s ease, color .25s ease !important; }
.period-tab:hover{ transform:translateY(-2px); }

/* ---- Rules panel ---------------------------------------------------- */
.rules-toggle-btn{ transition:transform .25s var(--sk-ease), background .25s ease, border-color .25s ease, color .25s ease !important; }
.rules-toggle-btn:hover{ transform:translateY(-2px); }
.rules-inner{ border-radius:18px !important; box-shadow:0 18px 44px rgba(0,0,0,0.36); }

/* ---- Footer link shimmer ------------------------------------------- */
footer a{ transition:color .2s ease, text-shadow .2s ease; }
footer a:hover{ text-shadow:0 0 16px currentColor; }

/* ---- Respect reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .reward-hero::after, .reward-icon, .rank-1, .crown,
  .prize-amount.top-prize{ animation:none !important; }
}

/* ====================================================================
   MODERN LUXE TYPOGRAPHY  (Space Grotesk / Inter / JetBrains Mono)
   Loaded after each page's inline <style> so it wins the cascade.
   ==================================================================== */

/* Crisp rendering everywhere */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Numbers & money → JetBrains Mono, tabular (aligns columns, reads "fintech") */
.countdown-value, .wagered-amount, .total-wager-amount, .prize-amount,
.stat-value, .result-stat-value,
.vip-table .swifty-bonus, .vip-table .total-bonus,
.wager-amount, .bonus-amount, .race-amount,
.example-value, .term-value, .rank{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.5px;
}
.countdown-value{ letter-spacing:-1px; }

/* Data labels & table headers → mono uppercase, precise */
.section-title, .stat-label, .result-stat-label,
.countdown-label, .countdown-unit,
.leaderboard-header, .rewards-header, .lookup-title,
.rules-key, .period-label{
  font-family:'JetBrains Mono', ui-monospace, monospace !important;
}

/* Display headings: a touch tighter for a confident, premium feel
   (Space Grotesk reads better than Orbitron at slightly negative tracking) */
.reward-title, .page-title, .cta-title, .reward-highlight{
  letter-spacing:-.4px !important;
}
.player-name{ letter-spacing:.2px; font-weight:600; }

/* Body copy comfort */
.reward-desc, .action-desc, .result-message, .info-list li,
.content-box p, .content-box li{ letter-spacing:.1px; line-height:1.65; }