/* ============================================================
   shared.css — Casino UI Overhaul
   Inspired by: DraftKings Casino · BetMGM · FanDuel Casino
                Caesars Palace Online · Golden Nugget Online
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=Cinzel:wght@700;900&display=swap');

/* ──────────────────────────────────────────────────────────────
   TOKENS
   ────────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #09090f;
  --bg2:       #0d0e17;
  --bg3:       #11121e;
  --card:      #13141f;
  --card2:     #171828;
  --overlay:   rgba(9,9,15,0.92);

  /* Borders */
  --border:    #1e2036;
  --border2:   #282a40;
  --border3:   #363854;

  /* Brand / Accents */
  --gold:      #f5c518;
  --gold2:     #ffd700;
  --gold-dim:  #9a7c0a;
  --gold-glow: rgba(245,197,24,0.25);
  --green:     #00c853;
  --green2:    #00e676;
  --green-dim: #006428;
  --red:       #ff1744;
  --red-dim:   #7f0b22;
  --purple:    #7c4dff;
  --purple2:   #b388ff;
  --cyan:      #00e5ff;
  --orange:    #ff6d00;
  --orange2:   #ffab40;
  --teal:      #1de9b6;

  /* ── Legacy aliases (keep game pages working) ── */
  --card-bg:   #13141f;   /* was --card-bg, now --card */
  --dark:      #09090f;   /* was --dark, now --bg */
  --pink:      #7c4dff;   /* was --pink, now --purple */
  --border-color: #1e2036;

  /* Text */
  --text:      #eeeef5;
  --text2:     #a8abbe;
  --muted:     #5a5e7a;
  --muted2:    #404260;

  /* Header */
  --hdr-bg:    #0b0c14;
  --hdr-h:     68px;
  --hdr-sub-h: 46px;
}

/* ──────────────────────────────────────────────────────────────
   RESET & BASE
   ────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border3); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ──────────────────────────────────────────────────────────────
   LOGO
   ────────────────────────────────────────────────────────────── */
.graffiti-logo {
  display:block; width:100%; max-width:210px; height:auto;
  filter:drop-shadow(0 0 14px rgba(245,197,24,0.45));
  transition:filter 0.3s;
}
.graffiti-logo:hover { filter:drop-shadow(0 0 22px rgba(245,197,24,0.75)); }
.graffiti-logo-sm { display:block; width:140px; height:auto; filter:drop-shadow(0 0 8px rgba(245,197,24,0.3)); }
.graffiti-logo-xs { display:block; width:80px;  height:auto; }

/* ──────────────────────────────────────────────────────────────
   SITE HEADER  (two rows: brand/nav row + optional game-nav)
   ────────────────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:300;
  background: var(--hdr-bg);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 32px rgba(0,0,0,0.7);
}

/* Row 1 — logo · nav tabs · account */
.header-top {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--hdr-h);
  padding:0 24px;
  max-width:1440px; margin:0 auto;
  gap:16px;
}

.header-logo-wrap {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; flex-shrink:0;
}
.header-logo-wrap .site-name {
  font-family:'Oswald',sans-serif;
  font-size:1.15rem; font-weight:700; letter-spacing:1px;
  color:var(--gold); text-transform:uppercase;
  white-space:nowrap;
}

/* Primary nav */
.header-nav {
  display:flex; align-items:center; gap:2px;
  flex:1; justify-content:center;
  overflow-x:auto; scrollbar-width:none;
}
.header-nav::-webkit-scrollbar { display:none; }

.nav-link {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px;
  border-radius:9px;
  color:var(--text2);
  text-decoration:none;
  font-size:0.875rem; font-weight:500;
  white-space:nowrap;
  transition:all 0.18s;
  border:1px solid transparent;
  position:relative;
}
.nav-link .nav-icon { font-size:1rem; }
.nav-link:hover {
  color:var(--text); background:rgba(255,255,255,0.05);
  border-color:var(--border);
}
.nav-link.active {
  color:var(--gold);
  background:rgba(245,197,24,0.07);
  border-color:rgba(245,197,24,0.22);
}
.nav-link .nav-badge {
  font-size:0.6rem; font-weight:700; letter-spacing:0.5px;
  background:var(--red); color:#fff;
  border-radius:4px; padding:1px 5px;
  text-transform:uppercase;
}
.nav-link .nav-badge.hot  { background:var(--orange); }
.nav-link .nav-badge.new  { background:var(--purple); }

/* Account area */
.header-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.balance-chip {
  display:flex; align-items:center; gap:10px;
  background:rgba(245,197,24,0.07);
  border:1px solid rgba(245,197,24,0.2);
  border-radius:10px; padding:7px 14px;
  cursor:default;
}
.balance-chip-icon { font-size:0.9rem; }
.balance-chip-inner { display:flex; flex-direction:column; }
.balance-chip-label {
  color:var(--muted); font-size:0.62rem;
  text-transform:uppercase; letter-spacing:1.5px; line-height:1;
}
.balance-chip-amount {
  font-family:'Oswald',sans-serif;
  font-size:1.1rem; font-weight:600;
  color:var(--gold); line-height:1.2;
}

.user-chip {
  display:flex; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border2);
  border-radius:10px; padding:7px 14px;
  font-size:0.85rem; color:var(--text);
}
.dot { width:7px; height:7px; border-radius:50%; background:var(--muted); flex-shrink:0; }
.dot.online { background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 5px var(--green)} 50%{box-shadow:0 0 12px var(--green2)} }

/* Balance bar — used by game pages (lobby uses header chip instead) */
.balance-bar {
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:11px 24px;
  display:flex; justify-content:center; align-items:center; gap:10px;
}
.balance-label {
  color:var(--muted); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:2px;
}
.balance-amount {
  font-family:'Oswald',sans-serif; font-size:1.35rem; font-weight:700;
  color:var(--gold); text-shadow:0 0 16px rgba(245,197,24,0.4);
}

/* ──────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────── */

/* Primary CTA — gold */
.btn-primary, .btn-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 28px;
  background:linear-gradient(135deg,#f5c518 0%,#d4a00a 100%);
  color:#0a0b10; font-family:'Inter',sans-serif;
  font-size:1rem; font-weight:800; letter-spacing:0.3px;
  border:none; border-radius:10px; cursor:pointer;
  transition:all 0.2s;
  box-shadow:0 4px 22px rgba(245,197,24,0.35);
  text-decoration:none;
}
.btn-primary:hover, .btn-cta:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(245,197,24,0.5);
  filter:brightness(1.06);
}
.btn-primary:active, .btn-cta:active { transform:scale(0.97); }
.btn-primary:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* Green action — play/bet */
.btn-gold {
  display:block; width:100%;
  padding:14px 24px;
  background:linear-gradient(135deg,#00c853 0%,#009624 100%);
  color:#fff; font-family:'Inter',sans-serif;
  font-size:1rem; font-weight:700; letter-spacing:0.2px;
  border:none; border-radius:10px; cursor:pointer;
  transition:all 0.2s;
  box-shadow:0 4px 22px rgba(0,200,83,0.3);
  margin-top:6px;
}
.btn-gold:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,200,83,0.45); }
.btn-gold:active { transform:scale(0.97); }
.btn-gold:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }

/* Ghost */
.btn-ghost {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--border2);
  color:var(--text2); padding:8px 16px;
  border-radius:9px; font-size:0.85rem; font-weight:500;
  cursor:pointer; transition:all 0.18s; text-decoration:none;
}
.btn-ghost:hover { border-color:var(--border3); color:var(--text); background:var(--card2); }

/* Back */
.btn-back {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--border);
  color:var(--muted); padding:7px 14px;
  border-radius:8px; font-size:0.82rem;
  cursor:pointer; transition:all 0.15s; text-decoration:none;
}
.btn-back:hover { border-color:var(--gold); color:var(--gold); }

/* Icon button */
.btn-icon {
  width:38px; height:38px; border-radius:9px;
  border:1px solid var(--border2);
  background:var(--card); color:var(--text2);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer; transition:all 0.18s;
  text-decoration:none;
}
.btn-icon:hover { border-color:var(--gold); color:var(--gold); background:var(--card2); }

/* ──────────────────────────────────────────────────────────────
   GAME PAGE INTERNALS (shared by coin, dice, slots, etc.)
   ────────────────────────────────────────────────────────────── */
.page { max-width:520px; margin:0 auto; padding:32px 16px 80px; }

.game-title-bar { text-align:center; margin-bottom:32px; }
.game-title-bar h1 {
  font-family:'Oswald',sans-serif;
  font-size:2.4rem; font-weight:700; letter-spacing:1px;
  background:linear-gradient(135deg,#fff 0%,var(--text2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.game-title-bar p { color:var(--muted); font-size:0.85rem; margin-top:8px; }

/* Odds */
.odds-row { display:flex; gap:10px; margin-bottom:24px; }
.odds-box {
  flex:1; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:14px; text-align:center;
}
.odds-box .odds-label {
  color:var(--muted); font-size:0.68rem;
  text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;
}
.odds-box .odds-val {
  font-family:'Oswald',sans-serif; font-size:1.25rem; color:var(--gold);
}

/* Bet panel */
.bet-panel {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:22px; margin-bottom:16px;
}
.bet-panel-title {
  font-family:'Oswald',sans-serif; font-size:0.72rem;
  color:var(--muted); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:16px;
}
.bet-amount-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.bet-amount-row label { color:var(--muted); font-size:0.85rem; white-space:nowrap; }
.bet-input {
  flex:1; padding:12px 16px; border-radius:9px;
  border:1px solid var(--border2);
  background:var(--bg2); color:var(--gold);
  font-family:'Oswald',sans-serif; font-size:1.4rem;
  text-align:center; outline:none; transition:border-color 0.2s;
}
.bet-input:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(245,197,24,0.1); }
.quick-bets { display:flex; gap:6px; margin-bottom:16px; }
.qb {
  flex:1; padding:8px 4px;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; color:var(--muted); font-size:0.78rem;
  cursor:pointer; text-align:center; transition:all 0.15s;
}
.qb:hover { border-color:var(--gold); color:var(--gold); background:rgba(245,197,24,0.05); }

/* Result banner */
.result-banner {
  border-radius:12px; padding:16px; text-align:center;
  margin-bottom:16px;
  font-family:'Oswald',sans-serif; font-size:1.25rem; font-weight:600;
  letter-spacing:1px; min-height:58px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s;
}
.result-banner.idle {
  background:rgba(255,255,255,0.02); border:1px solid var(--border);
  color:var(--muted); font-family:'Inter',sans-serif; font-size:0.85rem;
}
.result-banner.win {
  background:rgba(0,200,83,0.08); border:1px solid rgba(0,200,83,0.35);
  color:var(--green); box-shadow:0 0 40px rgba(0,200,83,0.12);
}
.result-banner.lose {
  background:rgba(255,23,68,0.08); border:1px solid rgba(255,23,68,0.35);
  color:var(--red); box-shadow:0 0 40px rgba(255,23,68,0.12);
}

/* Session history */
.history {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:18px; margin-bottom:16px;
}
.history-title {
  font-family:'Oswald',sans-serif; font-size:0.72rem;
  color:var(--muted); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:12px;
}
.history-list { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; }
.history-item {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg2); border-radius:8px; padding:8px 12px;
  font-size:0.85rem; border-left:3px solid var(--border);
  animation:fadeIn 0.3s;
}
.history-item.win  { border-left-color:var(--green); }
.history-item.lose { border-left-color:var(--red); }
.h-amt { font-family:'Oswald',sans-serif; }
.history-item.win  .h-amt { color:var(--green); }
.history-item.lose .h-amt { color:var(--red); }

/* ──────────────────────────────────────────────────────────────
   PROVABLY FAIR WIDGET
   ────────────────────────────────────────────────────────────── */
.pf-widget {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px; margin-bottom:16px; font-size:0.8rem;
}
.pf-title {
  font-family:'Oswald',sans-serif; font-size:0.7rem;
  color:var(--muted); letter-spacing:2px; text-transform:uppercase;
  margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.pf-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.pf-label { color:var(--muted); min-width:120px; flex-shrink:0; }
.pf-val   { color:var(--text); font-family:monospace; word-break:break-all; }
.pf-hash  { color:var(--gold); font-size:0.75rem; }
.pf-input {
  flex:1; min-width:0; padding:5px 8px; border-radius:6px;
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text); font-family:monospace; font-size:0.75rem; outline:none;
}
.pf-input:focus { border-color:var(--gold); }
.pf-btn {
  padding:4px 10px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg2); color:var(--muted); font-size:0.75rem;
  cursor:pointer; white-space:nowrap; transition:all 0.15s;
}
.pf-btn:hover { border-color:var(--gold); color:var(--gold); }
.pf-verify-btn {
  width:100%; margin-top:8px; padding:8px;
  background:rgba(0,200,83,0.05); border-color:rgba(0,200,83,0.3); color:var(--green);
}
.pf-verify-result { margin-top:8px; font-size:0.82rem; min-height:18px; }

/* ──────────────────────────────────────────────────────────────
   PARTICLES & ANIMATIONS
   ────────────────────────────────────────────────────────────── */
.particle {
  position:fixed; pointer-events:none; border-radius:50%;
  z-index:9999; animation:burst 0.8s ease-out forwards;
}

@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
@keyframes burst  { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0} }
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
@keyframes float-up { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-60px);opacity:0} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes glow-pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ──────────────────────────────────────────────────────────────
   SITE FOOTER
   ────────────────────────────────────────────────────────────── */
.site-footer {
  background:var(--bg2);
  border-top:1px solid var(--border);
  margin-top:80px;
  padding:56px 24px 32px;
}

.footer-inner {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px;
  max-width:1200px; margin:0 auto 48px;
}

/* Brand column */
.footer-brand .graffiti-logo-xs { margin-bottom:16px; }
.footer-brand-desc {
  color:var(--muted); font-size:0.82rem; line-height:1.75;
  max-width:260px; margin-bottom:22px;
}

.footer-social { display:flex; gap:8px; }
.footer-social-btn {
  width:38px; height:38px; border-radius:9px;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:1rem; text-decoration:none;
  transition:all 0.2s;
}
.footer-social-btn:hover { border-color:var(--gold); color:var(--gold); }

/* Nav columns */
.footer-col-title {
  font-family:'Oswald',sans-serif;
  font-size:0.72rem; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.footer-col-links { list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-col-links li a {
  color:var(--text2); text-decoration:none;
  font-size:0.875rem; display:inline-flex; align-items:center; gap:8px;
  transition:color 0.18s;
}
.footer-col-links li a:hover { color:var(--gold); }

/* Bottom bar */
.footer-bottom {
  max-width:1200px; margin:0 auto;
  border-top:1px solid var(--border);
  padding-top:28px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
}
.footer-copy { color:var(--muted); font-size:0.78rem; line-height:1.6; }
.footer-badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.footer-badge {
  background:var(--card); border:1px solid var(--border);
  border-radius:6px; padding:4px 10px;
  font-size:0.68rem; font-weight:600; letter-spacing:0.5px;
  color:var(--muted); text-transform:uppercase;
}
.footer-badge.green { border-color:rgba(0,200,83,0.3); color:var(--green); }
.footer-badge.gold  { border-color:rgba(245,197,24,0.3); color:var(--gold); }
.footer-badge.blue  { border-color:rgba(0,229,255,0.3); color:var(--cyan); }

/* Legacy aliases — used by game pages, kept for compatibility */
.footer-logo-wrap  { display:flex; justify-content:center; margin-bottom:14px; }
.footer-tagline    { color:var(--muted); font-size:0.75rem; letter-spacing:3px; text-transform:uppercase; text-align:center; margin-bottom:16px; }
.footer-links      { display:flex; justify-content:center; gap:20px; margin-bottom:16px; flex-wrap:wrap; }
.footer-links a    { color:var(--muted); font-size:0.8rem; text-decoration:none; transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }
.footer-copy        { color:var(--muted); font-size:0.78rem; line-height:1.6; }
.footer-copy-center { color:var(--muted2); font-size:0.72rem; text-align:center; }

/* Legacy spray-tag: hidden */
.spray-tag { display:none; }

/* ──────────────────────────────────────────────────────────────
   LEADERBOARD / WALLET / HISTORY page styles
   ────────────────────────────────────────────────────────────── */
/* Keep for pages that use old header-inner */
.header-inner {
  display:flex; justify-content:space-between; align-items:center;
  max-width:1440px; margin:0 auto; padding:0 24px; height:var(--hdr-h); gap:12px;
}

/* ──────────────────────────────────────────────────────────────
   CARD UTILITIES
   ────────────────────────────────────────────────────────────── */
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:20px;
}
.card-sm {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px;
}

/* ──────────────────────────────────────────────────────────────
   MISC UTILITY
   ────────────────────────────────────────────────────────────── */
.text-gold   { color:var(--gold); }
.text-green  { color:var(--green); }
.text-red    { color:var(--red); }
.text-muted  { color:var(--muted); }
.text-oswald { font-family:'Oswald',sans-serif; }
.sr-only     { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .header-nav { display:none; }
  .footer-inner { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:600px) {
  .footer-inner { grid-template-columns:1fr; gap:24px; }
  .header-top { padding:0 16px; }
  .balance-chip-label { display:none; }
  .user-chip span:last-child { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}