/* =============================================
   SKY BETS — GLOBAL STYLES
   Palette: Black · White · Glassmorphism Blue
   ============================================= */

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

/* ── DESIGN TOKENS ── */
:root {
  /* Blacks */
  --bg:        #0a0a0a;
  --nav-bg:    #0f0f0f;
  --surface-1: #141414;
  --surface-2: #1c1c1c;
  --surface-3: #242424;

  /* Glassmorphism blues */
  --glass-bg:           rgba(37,99,235,0.08);
  --glass-bg-md:        rgba(37,99,235,0.15);
  --glass-bg-deep:      rgba(29,78,216,0.24);
  --glass-border:       rgba(99,157,255,0.20);
  --glass-border-bright:rgba(99,157,255,0.40);
  --glass-blur:         blur(18px);
  --glass-blur-sm:      blur(10px);
  --glass-shadow:       0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);

  /* Solid accent — buttons & active states */
  --accent:       #2563eb;
  --accent-light: #3b82f6;
  --accent-mid:   #1d4ed8;
  --accent-glow:  rgba(37,99,235,0.30);

  /* Borders */
  --border:    rgba(255,255,255,0.07);
  --border-md: rgba(255,255,255,0.12);

  /* Text */
  --t1: #ffffff;
  --t2: #9a9a9a;
  --t3: #4a4a4a;

  /* Status */
  --live:  #ef4444;
  --gold:  #f59e0b;
  --green: #22c55e;

  /* Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-pill: 999px;

  --t: 0.18s ease;
  --shadow: 0 4px 24px rgba(0,0,0,0.7);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
body {
  font-family:'Nunito','Century Gothic',sans-serif;
  background:var(--bg); color:var(--t1);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--surface-3); border-radius:3px; }

/* =============================================
   TOPBAR — frosted glass
   ============================================= */
.topbar {
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  background:rgba(10,10,10,0.80);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 1px 0 var(--glass-border);
}
.topbar__brand { display:flex; align-items:center; gap:9px; }
.topbar__rocket { width:28px; height:28px; filter:drop-shadow(0 0 8px rgba(59,130,246,0.65)); }
.topbar__name { font-size:1.1rem; font-weight:700; color:var(--t1); }
.topbar__name b { color:var(--accent-light); font-weight:900; }
.topbar__right { display:flex; align-items:center; gap:10px; }

/* Balance pill — glass */
.balance-pill {
  display:inline-flex; align-items:center;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--r-pill); overflow:hidden; height:33px;
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
}
.balance-pill__amount { padding:0 12px 0 14px; font-size:0.8rem; font-weight:800; color:var(--t1); }
.balance-pill__plus {
  display:flex; align-items:center; justify-content:center;
  width:33px; height:33px;
  background:var(--accent); color:#fff; font-size:0.78rem; flex-shrink:0;
}

/* Icon button — glass */
.icon-btn {
  width:33px; height:33px;
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:50%; color:var(--t2); font-size:0.85rem;
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  transition:all var(--t);
}
.icon-btn:hover { background:var(--glass-bg-md); color:var(--t1); border-color:var(--glass-border-bright); }

/* =============================================
   TICKER
   ============================================= */
.ticker-bar {
  background:rgba(15,15,15,0.85);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
  overflow:hidden; padding:6px 0;
}
.ticker-track {
  display:inline-flex; gap:60px; white-space:nowrap;
  animation:ticker 30s linear infinite; width:max-content;
}
.ticker-track span {
  font-size:0.68rem; font-weight:700;
  color:var(--accent-light);
  letter-spacing:0.02em;
}
.ticker-track span::before { content:"•"; margin-right:8px; color:var(--glass-border-bright); opacity:0.8; }
@keyframes ticker { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* =============================================
   HERO BANNER — Scores-app style match center
   ============================================= */
.hero { padding:14px 16px 0; position:relative; }
.hero::before {
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:280px; height:180px;
  background:radial-gradient(ellipse, rgba(37,99,235,0.18) 0%, transparent 70%);
  pointer-events:none; z-index:0;
  filter:blur(20px);
}
.hero__card {
  background:
    radial-gradient(circle at 12% 0%, rgba(59,130,246,0.18) 0%, transparent 55%),
    linear-gradient(180deg, #14181f 0%, #0a0d12 100%);
  border-radius:var(--r-xl);
  padding:18px 18px 18px;
  position:relative; overflow:hidden;
  border:1px solid var(--glass-border-bright);
  box-shadow:0 10px 34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04);
}
.hero__card::before {
  content:''; position:absolute; top:-50px; right:-30px;
  width:200px; height:200px;
  background:radial-gradient(circle, rgba(99,157,255,0.15) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
}
.hero__card::after {
  content:''; position:absolute; bottom:-40px; left:-20px;
  width:140px; height:140px;
  background:radial-gradient(circle, rgba(37,99,235,0.20) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
}

.hero__top {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; position:relative; z-index:1; margin-bottom:20px;
}
.hero__venue-block { display:flex; flex-direction:column; gap:3px; }
.hero__venue { font-size:0.94rem; font-weight:900; color:#fff; letter-spacing:0.01em; }
.hero__comp { font-size:0.62rem; font-weight:700; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:0.05em; }
.hero__kickoff-chip {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0;
  background:var(--glass-bg-md); border:1px solid var(--glass-border-bright);
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
  color:#fff; font-size:0.6rem; font-weight:800;
  padding:5px 10px; border-radius:var(--r-pill);
  white-space:nowrap;
}
.hero__kickoff-chip i { color:var(--accent-light); font-size:0.62rem; }

.hero__matchup {
  display:flex; align-items:flex-start; justify-content:space-between;
  position:relative; z-index:1; margin-bottom:18px;
}
.hero__team {
  display:flex; flex-direction:column; align-items:center; gap:8px; flex:1;
}
.hero__team--right { align-items:center; }
.hero__team-name {
  font-size:0.76rem; font-weight:800; color:#fff;
  text-transform:uppercase; letter-spacing:0.03em; text-align:center;
}
.hero__tag {
  font-size:0.56rem; font-weight:800; color:rgba(255,255,255,0.5);
  text-transform:uppercase; letter-spacing:0.08em;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-pill); padding:2px 8px;
}
.hero__center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding-top:14px; }
.hero__vs {
  font-size:0.78rem; font-weight:900; color:rgba(255,255,255,0.5);
  border:1.5px solid rgba(255,255,255,0.18); border-radius:50%;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  letter-spacing:0.02em;
}
.team-crest {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.10);
  border:1.5px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  font-size:0.58rem; font-weight:900; color:#fff; flex-shrink:0;
  box-shadow:0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
.hero-crest { width:56px; height:56px; font-size:0.72rem; }
.hero-crest--home { background:linear-gradient(135deg,#6dd5fa,#1d4ed8); border-color:rgba(255,255,255,0.25); }
.hero-crest--away { background:linear-gradient(135deg,#f8fafc,#312e81); color:#0f172a; border-color:rgba(255,255,255,0.25); }

.hero__odds { display:flex; gap:8px; margin-bottom:14px; position:relative; z-index:1; }

.btn-hero {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.02) 55%, rgba(255,255,255,0.06) 100%),
    linear-gradient(135deg, rgba(96,165,250,0.45), rgba(29,78,216,0.55));
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,0.4);
  border-bottom-color:rgba(255,255,255,0.12);
  color:#fff; text-align:center; padding:13px; border-radius:var(--r-pill);
  font-size:0.82rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase;
  position:relative; z-index:1; overflow:hidden;
  isolation:isolate;
  transition:transform var(--t), box-shadow var(--t), filter var(--t);
  box-shadow:
    0 8px 26px rgba(37,99,235,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 1px rgba(0,0,0,0.18),
    inset 0 0 18px rgba(255,255,255,0.05);
  text-shadow:0 1px 2px rgba(0,0,0,0.25);
}
/* glossy top-half sheen — the "liquid glass" cap-light */
.btn-hero::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%);
  border-radius:inherit; pointer-events:none;
}
/* diagonal shine sweep on hover */
.btn-hero::after {
  content:''; position:absolute; top:-50%; left:-60%; z-index:-1;
  width:40%; height:200%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transform:rotate(20deg); transition:left 0.65s ease;
  pointer-events:none;
}
.btn-hero:hover::after { left:130%; }
.btn-hero:hover {
  filter:brightness(1.08);
  box-shadow:
    0 10px 30px rgba(37,99,235,0.45),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 1px rgba(0,0,0,0.18),
    inset 0 0 20px rgba(255,255,255,0.08);
}
.btn-hero:active { transform:scale(0.97); }
.btn-hero i { font-size:0.72rem; }
.hero__dots { display:flex; justify-content:center; gap:6px; padding:12px 0 2px; }
.hero-dot { width:6px; height:6px; background:var(--t3); border-radius:50%; transition:all var(--t); }
.hero-dot--active { width:22px; border-radius:3px; background:var(--accent-light); }

/* =============================================
   SPORT TABS
   ============================================= */
.sport-tabs-section { padding:20px 16px 0; }
.section-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.section-title { font-size:1rem; font-weight:900; color:var(--t1); }
.view-all { font-size:0.72rem; font-weight:700; color:var(--t2); transition:color var(--t); }
.view-all:hover { color:var(--t1); }
.sport-tabs { display:flex; gap:9px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.sport-tabs::-webkit-scrollbar { display:none; }

/* Inactive tab */
.sport-tab {
  width:46px; height:46px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-1); border:1px solid var(--border);
  color:var(--t3); font-size:1rem; transition:all var(--t);
}
.sport-tab:hover { border-color:var(--glass-border); color:var(--t2); }

/* Active tab — glass pill */
.sport-tab--active {
  background:var(--glass-bg-md);
  border:1.5px solid var(--glass-border-bright);
  color:var(--accent-light);
  box-shadow:0 0 20px rgba(37,99,235,0.20), inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
}
.sport-tab--active-labeled {
  width:auto !important; padding:0 16px;
  border-radius:var(--r-pill) !important;
  gap:7px; flex-direction:row;
  font-size:0.75rem; font-weight:800;
}

/* =============================================
   MATCH CARDS
   ============================================= */
.matches-section { padding:14px 16px 0; display:flex; flex-direction:column; gap:10px; }
.match-card {
  background:var(--surface-1);
  border-radius:var(--r-xl); border:1px solid var(--border);
  overflow:hidden; box-shadow:var(--shadow); transition:border-color var(--t);
}
.match-card:hover { border-color:var(--glass-border); }

/* Top strip — glass blue tint */
.match-card__top {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 16px;
  background:var(--glass-bg);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
}
.match-round { font-size:0.68rem; font-weight:700; color:var(--t3); letter-spacing:0.03em; text-transform:uppercase; }

/* Live chip — glass */
.live-chip {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(239,68,68,0.08);
  border:1.5px solid rgba(239,68,68,0.35);
  border-radius:var(--r-pill); padding:3px 10px;
  font-size:0.62rem; font-weight:800; color:var(--live);
  letter-spacing:0.06em; text-transform:uppercase;
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
}
.live-ring { width:6px; height:6px; background:var(--live); border-radius:50%; animation:pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(239,68,68,0.55); } 70% { box-shadow:0 0 0 5px rgba(239,68,68,0); } 100% { box-shadow:0 0 0 0 rgba(239,68,68,0); } }

.upcoming-chip {
  font-size:0.62rem; font-weight:700; color:var(--accent-light);
  background:var(--glass-bg);
  border:1.5px solid var(--glass-border);
  border-radius:var(--r-pill); padding:3px 10px;
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
}

/* Score body */
.match-card__body { padding:16px 16px 10px; }
.mc-crest {
  width:38px; height:38px; border-radius:50%;
  background:var(--surface-3); border:1.5px solid var(--border-md);
  display:flex; align-items:center; justify-content:center;
  font-size:0.58rem; font-weight:900; color:var(--t1); flex-shrink:0;
}
.mc-team { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; }
.mc-score { font-size:2rem; font-weight:900; color:var(--t1); min-width:28px; text-align:center; line-height:1; }
.mc-score--upcoming { font-size:1.6rem; color:var(--t3); }
.mc-colon { font-size:1.8rem; font-weight:900; color:var(--t3); padding-bottom:4px; }
.mc-names { display:flex; align-items:center; justify-content:space-between; font-size:0.72rem; font-weight:800; color:var(--t2); text-transform:uppercase; letter-spacing:0.04em; }
.mc-half  { font-size:0.6rem; font-weight:600; color:var(--t3); text-align:center; }

/* Odds strip — glass */
.match-card__odds {
  display:flex; gap:8px; padding:10px 16px 14px;
  background:var(--glass-bg);
  border-top:1px solid var(--glass-border);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
}
.odd-pill {
  flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
  padding:10px 4px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border);
  border-radius:var(--r-md); transition:all var(--t);
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
}
.odd-pill:hover, .odd-pill.selected {
  background:var(--glass-bg-md);
  border-color:var(--glass-border-bright);
  box-shadow:0 0 18px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.op-label { font-size:0.65rem; font-weight:700; color:var(--t3); letter-spacing:0.04em; transition:color var(--t); }
.op-value { font-size:0.92rem; font-weight:900; color:var(--t1); transition:color var(--t); }
.odd-pill:hover .op-label, .odd-pill.selected .op-label { color:rgba(147,197,253,0.8); }
.odd-pill:hover .op-value, .odd-pill.selected .op-value { color:#fff; }

/* =============================================
   PROMOTIONS
   ============================================= */
.promos-section { padding:22px 16px 0; }
.promos-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.promo-card {
  background:var(--surface-1); border:1px solid var(--glass-border);
  border-radius:var(--r-xl); padding:16px 14px;
  display:flex; flex-direction:column; gap:8px;
  position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.promo-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--glass-bg-deep), var(--accent-light));
}
.promo-badge { position:absolute; top:10px; right:10px; background:var(--glass-bg-md); backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); color:var(--accent-light); border:1px solid var(--glass-border-bright); font-size:0.52rem; font-weight:900; padding:2px 7px; border-radius:var(--r-pill); letter-spacing:0.08em; text-transform:uppercase; }
.promo-badge--hot { background:var(--gold); color:#000; border:none; backdrop-filter:none; }
.promo-icon { width:34px; height:34px; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--accent-light); font-size:0.95rem; backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm); }
.promo-title { font-size:0.78rem; font-weight:800; color:var(--t1); line-height:1.3; }
.promo-desc  { font-size:0.67rem; color:var(--t2); line-height:1.5; flex:1; }
.btn-promo { display:inline-block; background:var(--accent); color:#fff; padding:7px 14px; border-radius:var(--r-md); font-size:0.7rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; text-align:center; box-shadow:0 3px 12px var(--accent-glow); transition:background var(--t); }
.btn-promo:hover { background:var(--accent-light); }

/* =============================================
   BETSLIP FAB — glass
   ============================================= */
.betslip-fab {
  position:fixed; right:18px; bottom:92px;
  width:50px; height:50px;
  background:var(--glass-bg-md);
  border:1.5px solid var(--glass-border-bright);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,99,235,0.25), inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  cursor:pointer; z-index:150; color:var(--accent-light); font-size:1rem;
  transition:transform var(--t), box-shadow var(--t);
}
.betslip-fab:hover { transform:scale(1.08); box-shadow:0 4px 28px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.1); }
.fab-count { position:absolute; top:-3px; right:-3px; background:var(--live); color:#fff; font-size:0.55rem; font-weight:900; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg); }

/* =============================================
   BOTTOM NAV — glass floating pill
   ============================================= */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  display:flex; justify-content:center;
  padding:0 20px 20px;
  background:linear-gradient(to top, rgba(10,10,10,0.95) 55%, transparent);
  pointer-events:none;
}
.bottom-nav__pill {
  display:flex; align-items:center;
  background:rgba(14,14,14,0.75);
  border:1px solid var(--glass-border-bright);
  border-radius:var(--r-pill); padding:8px 10px; gap:2px;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 8px 40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05);
  pointer-events:all;
}
.bnav-item { display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 14px; border-radius:var(--r-pill); font-size:0.57rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.04em; transition:all var(--t); white-space:nowrap; }
.bnav-item i { font-size:1.05rem; }
.bnav-item:hover { color:var(--t2); background:var(--glass-bg); }
.bnav-item--active {
  background:var(--glass-bg-md);
  color:var(--accent-light);
  border:1px solid var(--glass-border-bright);
  box-shadow:0 0 18px rgba(37,99,235,0.20), inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter:var(--glass-blur-sm);
  -webkit-backdrop-filter:var(--glass-blur-sm);
}