:root {
  --bg: #0a0b0d;
  --panel: #111217;
  --panel-2: #14151b;
  --red: #ff1e3a;
  --red-2: #ff415a;
  --glow: 0 0 18px rgba(255, 30, 58, .45), 0 0 42px rgba(255, 65, 90, .35);
  --text: #e9e9f2;
  --muted: #a5a7bb;
  --line: rgba(255,255,255,.08);
}

* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0; background: radial-gradient(1200px 800px at 20% -10%, rgba(255,30,58,.08), transparent),
  linear-gradient(180deg, #090a0d, #090a0d 40%, #0b0c10 100%);
  color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.topbar { position: sticky; top: 0; z-index: 50; display:flex; align-items:center; justify-content:space-between; padding: 14px 20px; background: rgba(10,11,13,.75); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px }
.logo { display:inline-grid; place-items:center; width:38px; height:38px; border-radius: 10px; background: linear-gradient(135deg, var(--red), var(--red-2)); box-shadow: var(--glow); font-weight:800 }
.brand h1 { font-family: Orbitron, Inter, sans-serif; letter-spacing:.5px; font-size: 20px; margin: 0 }
.brand .mma { color: var(--red-2); text-shadow: 0 0 12px rgba(255,65,90,.6); margin-left:6px }
.brand .ufc { color: #777; margin-left:4px; font-weight:600 }
.nav { display:flex; gap: 14px }
.nav-link { color: var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px; border:1px solid transparent }
.nav-link:hover { color: var(--text); border-color: var(--line); background: rgba(255,255,255,.02) }

.hero { display:grid; grid-template-columns: 1.1fr .9fr; gap: 22px; padding: 28px 20px; border-bottom:1px solid var(--line) }
.eyebrow { color: var(--muted); margin: 6px 0 10px 0; text-transform: uppercase; font-size: 12px; letter-spacing: .15em }
.hero-title { font-family: Orbitron; font-size: clamp(22px, 3.2vw, 34px); margin: 4px 0 10px; }
.hero-summary { color:#d6d7e7; margin: 0 0 14px }
.hero-meta { display:flex; gap: 12px; color: var(--muted); font-size: 14px }
.champ-badge { margin-top: 14px; display: inline-flex; align-items:center; padding: 8px 12px; border:1px solid rgba(255,30,58,.35); border-radius: 14px; background: linear-gradient(180deg, rgba(255,30,58,.13), rgba(255,30,58,.05)); box-shadow: var(--glow); }
.champ-badge span { font-weight: 700; color: var(--red-2); letter-spacing: .08em }

.fightcard { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.frow { display:grid; grid-template-columns: 60px 1fr auto 1fr 28px; align-items:center; gap: 10px; padding: 10px 8px; border-bottom:1px dashed var(--line) }
.frow:last-child { border-bottom: none }
.vs { padding: 4px 8px; border:1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 12px }
.ftr { display:flex; align-items:center; gap:10px }
.pill { font-size: 11px; color:#111; background: var(--red-2); padding:6px 12px; border-radius: 999px; font-weight: 800; box-shadow: var(--glow); display: inline-block; min-width: 48px; text-align: center; white-space: nowrap; font-size: 12px; }
.rec { color: var(--muted); font-size: 12px }

.searchbar { padding: 18px 20px; display:flex; align-items: center; justify-content: space-between; gap:20px; border-bottom:1px solid var(--line) }
.search-wrap { display:flex; gap: 10px; width: min(780px, 100%) }
.search-input { flex: 1; background: var(--panel); color: var(--text); border:1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none }
.btn { background: linear-gradient(135deg, var(--red), var(--red-2)); border: none; color: white; padding: 10px 14px; border-radius: 12px; font-weight: 700; letter-spacing:.02em; box-shadow: var(--glow); cursor: pointer }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none }
.filters { display:flex; align-items:center; gap: 12px }

.grid { padding: 20px; display:grid; grid-template-columns: repeat( auto-fill, minmax(240px, 1fr) ); gap: 16px }
.card { position: relative; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--line); border-radius: 16px; padding: 12px; }
.card .tag { position: absolute; top: 10px; right: 10px; font-size: 11px; background: rgba(255,30,58,.14); color: var(--red-2); border:1px solid rgba(255,30,58,.3); padding: 2px 8px; border-radius: 999px; }
.card .name { margin: 8px 0 4px; font-weight: 700 }
.card .meta { font-size: 12px; color: var(--muted) }
.imgwrap { width: 100%; aspect-ratio: 5/6; background: #0d0f13; border:1px solid var(--line); border-radius: 12px; overflow: hidden; display:grid; place-items:center }
.imgwrap img { width: 100%; height: 100%; object-fit: cover; display:block }

.events { padding: 20px }
.section-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 8px }
.mt { margin-top: 22px }
.carousel { display: grid; grid-auto-flow: column; gap: 12px; overflow-x: auto; padding-bottom: 6px }
.event { min-width: 280px; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--line); border-radius: 16px; padding: 12px }
.event .title { font-weight: 700; margin: 4px 0 6px }
.event .meta { color: var(--muted); font-size: 12px }

.timeline { display:grid; grid-template-columns: repeat( auto-fill, minmax(300px, 1fr) ); gap: 12px }

.widgets { padding: 20px; display:grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 16px }
.widget { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border:1px solid var(--line); border-radius: 16px; }
.w-head { display:flex; align-items:center; justify-content: space-between; padding: 12px 14px; border-bottom:1px solid var(--line) }
.tabs { display:flex; gap:8px }
.tab { background: transparent; border:1px solid var(--line); color: var(--text); padding: 6px 10px; border-radius: 999px; cursor:pointer }
.tab.active { border-color: rgba(255,30,58,.5); color: var(--red-2); box-shadow: var(--glow) }
.leader-list { padding: 10px 14px; display:grid; gap: 10px }
.leader { display:grid; grid-template-columns: 1fr auto; gap: 10px; align-items:center; padding: 6px 4px; border-bottom:1px dashed var(--line) }
.leader:last-child { border-bottom: none }
.bar { height: 8px; background: #151720; border:1px solid var(--line); border-radius: 999px; overflow: hidden }
.bar > i { display:block; height: 100%; background: linear-gradient(90deg, var(--red), var(--red-2)); box-shadow: var(--glow) }

.champ-grid { padding: 10px 14px; display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px }
.champion { display:grid; grid-template-columns: 48px 1fr; gap: 300px; align-items:center; border-bottom:1px dashed var(--line); padding: 8px 0 }
.champion:last-child { border-bottom: none }
.champion img { width: 300px; height: 338px; border-radius: 10px; object-fit: cover; border:1px solid var(--line) }

.p4p { list-style: decimal-leading-zero; padding: 14px 26px; margin: 0; display:grid; gap: 6px; list-style-position: inside}
.p4p li { padding: 6px 8px; border-bottom:1px dashed var(--line) }

.footer { padding: 24px; text-align:center; color: var(--muted) }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .widgets { grid-template-columns: 1fr; }
}

/* ===========================
   PLAYER CARDS SCROLLER
   =========================== */
.products{ text-align:center; padding:48px 12px; }
.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:40px; padding:20px; }
.product{
  background:#222; padding:15px; border-radius:10px; text-align:center; box-shadow:0 0 10px rgba(255,255,255,.05);
  flex:0 0 auto; width:220px;
}
.product img{ width:100%; border-radius:5px; }
.product h3{ margin:10px 0; }
.price{ font-weight:700; margin-bottom:10px; }
.add-to-cart{ background:#171717; color:#fff; padding:8px 12px; border:none; cursor:pointer; }

.scroll-wrapper{ position:relative; overflow:hidden; padding:12px 0; }
.scroll-row{ display:flex; overflow-x:auto; scroll-behavior:smooth; gap:16px; padding:10px 42px; }
.scroll-row::-webkit-scrollbar{ display:none; }

.scroll-arrow{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); color:#fff;
  padding:12px; border-radius:50%; cursor:pointer; font-size:28px; transition:background .2s; z-index:10;
}
.scroll-arrow:hover{ background:rgba(255, 0, 21, 0.2); box-shadow:0 0 15px rgba(250, 5, 5, 0.898); }
.left-arrow{ left:0; } .right-arrow{ right:0; }

/* Neon label that sits just above each chart wrapper */
.chart-name{
  position:absolute;           /* wrapper is already position:relative */
  top:-22px;                   /* sits above the court image */
  left:50%;
  transform:translateX(-50%);
  color:#ff415a;
  font-weight:700;
  text-shadow:0 0 8px #ff415a;
  letter-spacing:.4px;
}


/* ===========================
   STATUS LABELS — neon red
   =========================== */
.status-label{
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  font-size:0.9rem;
  font-weight:700;
  color:#ff415a;
  text-shadow: 0 0 6px #ff415a, 0 0 12px #ff415aec, 0 0 20px #ff415aae;
}

/* ===========================
   FLOATING LOGO
   =========================== */
.shop-logo{
  width:150px; display:block; margin:0 auto; border-radius:50%; border:3px solid #ff415a; padding:5px;
  box-shadow:0 0 15px var(--glow); filter:drop-shadow(0 0 10px var(--glow)); animation:float 3s ease-in-out infinite;
}
.floating-logo-container{ display:flex; justify-content:center; align-items:center; background:#111; padding:40px 0 24px; position:relative; z-index:999; }
.floating-logo{ animation:floatUpDown 3s ease-in-out infinite; ;
  box-shadow:0 0 15px var(--glow); filter:drop-shadow(0 0 10px var(--glow))}
@keyframes floatUpDown{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }