:root {
  --nba: #c9243f;
  --nba-light: #e85d04;
  --nba-accent: #1d428a;
  --gold: #e8a838;
  --dark: #0d0f12;
  --dark2: #161920;
  --lal:#552583;
  --lal2:#FDB927;
  --gsw:#1d428a;
  --gsw2:#ffc72c;
  --sas:#c4ced4;
  --sas2:#000000;
  --wemb:#7c3aed;
  --lbj:#552583;
  --surface: #252a33;
  --surface2: #2e3440;
  --text: #f0f2f5;
  --text2: #a8b2be;
  --text3: #6b7684;
  --border: rgba(255,255,255,0.07);
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--dark);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;overflow-x:hidden;}
a{color:inherit;text-decoration:none;transition: all 0.5s ease 0s;}

/* -- HEADER -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13,15,18,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 clamp(1rem,4vw,3rem);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
 /* display: flex; align-items: center; gap: 2rem;*/
  height: 60px;
}
.header-inner .logo img {
	max-width:200px;
	height:auto;
	margin-top:5px;
	}
header nav ul {
  float: right;
  margin-right: 20px;
}

header nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

header nav ul li a {
  font-family: var(--font-head);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0 1rem;
  height: 60px; display: flex; align-items: center;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  color: var(--text2);
  text-transform: uppercase;
}

header nav a.active,
header nav a:hover {
   color: var(--text); border-bottom-color: var(--nba);
}
nav a.nfl-link:hover { border-bottom-color: var(--nfl-light); }
nav a.nba-link:hover { border-bottom-color: var(--nba); }

header nav .checkbtn {
  font-size: 22px;
  color: white;
  float: right;
  line-height: 55px;
  margin-right: 18px;
  cursor: pointer;
  display: none;
}

header nav #check {
  display: none;
}


/* Responsive media query code for small screen */
@media (max-width: 767px) {
  header nav .checkbtn {
    display: block;
  }

  header nav label.logo {
    font-size: 22px;
  }

  header nav ul {
 	background:var(--surface);
    position: fixed;
    width: 100%;
    /*height: 100vh;*/
    top: 60px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  header nav ul li {
    display: block;
    /*margin: 50px 0;*/
    line-height: 30px;
  }
  header nav a:hover,
  header nav a.active {
    background: none;
  }

  header nav #check:checked~ul {
    left: 0;
  }
}
/* -- LAYOUT -- */
.layout{max-width:1280px;margin:0 auto;padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,3rem);display:grid;grid-template-columns:1fr 280px;gap:3rem;}
@media(max-width:900px){.layout{display:block;grid-template-columns:1fr;}}

img {max-width:100%; height:auto}
.table-container {overflow-x: auto;}
/* -- FOOTER -- */
footer {
  background: var(--dark2);
  border-top: 1px solid var(--border);
  padding: 3rem clamp(1rem,4vw,3rem);
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
}
.footer-brand .logo img, .footer-inner .logo img {max-width:200px; height:auto}
.footer-brand p { font-size: 13px; color: var(--text3); margin-top: 0.75rem; line-height: 1.6; }
.footer-col h4 {
  font-family: var(--font-head); font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text3); margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { font-size: 13.5px; color: var(--text2); transition: color 0.2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1280px; margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text3);
}

/* -- AD PLACEHOLDER -- */
.ad-slot {
  background: var(--dark2);
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  margin-bottom:15px;
}

/* -- BREADCRUMB -- */
.breadcrumb {
  background: var(--dark2);
  border-bottom: 1px solid var(--border);
  padding: 0.65rem clamp(1rem,4vw,3rem);
}
.breadcrumb-inner {
  max-width: 1280px; margin: 0 auto;
  font-size: 12.5px; color: var(--text3);
  display: flex; align-items: center; gap: 0.5rem;
}
.breadcrumb-inner a { color: var(--text2); }
.breadcrumb-inner a:hover { color: var(--text3); }
.breadcrumb-sep { color: var(--text2); opacity: 0.4; }

/* -- RESPONSIVE -- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-live { display: none; }
  .card-grid-2 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .money-hero { flex-direction: column; gap: 1rem; }
  .money-stat { border-left: none; border-top: 1px solid var(--border); padding: 1rem 0 0; width: 100%; }
}
@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr; }
  nav a { padding: 0 0.6rem; font-size: 13px; }
  .cap-grid { grid-template-columns: 1fr 1fr; }
}

/* -- ANIMATIONS -- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.5s ease forwards; }
.fade-up-1 { animation-delay: 0.05s; opacity: 0; }
.fade-up-2 { animation-delay: 0.12s; opacity: 0; }
.fade-up-3 { animation-delay: 0.2s; opacity: 0; }
.fade-up-4 { animation-delay: 0.28s; opacity: 0; }

.tag-hot {
  background: rgba(232,168,56,0.2); color: var(--gold);
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; vertical-align: middle; margin-left: 6px;
}
.center-block {
	margin-left:auto;
	margin-right:auto;
	display:block;
	float:none;
	}