/* ============================================
   BOW & ZOW — Stadium Scoreboard System
   ============================================ */

:root {
  --bg:        #07090F;
  --bg-2:      #0B0F18;
  --panel:     #11161F;
  --panel-2:   #161C28;
  --line:      #1E2533;
  --line-2:    #2A3344;
  --text:      #FFFFFF;
  --mute:      #6B7280;
  --mute-2:    #9CA3AF;

  --bow:       #FF2E4C;           /* shame red */
  --bow-deep:  #B0001E;
  --bow-glow:  rgba(255, 46, 76, 0.35);

  --zow:       #00FF87;           /* glory green */
  --zow-deep:  #009E55;
  --zow-glow:  rgba(0, 255, 135, 0.30);

  --gold:      #FFB627;
  --gold-deep: #B4750B;
  --gold-glow: rgba(255, 182, 39, 0.28);

  --maxw: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
  min-height: 100vh;
}

/* Pitch diagonal stripe texture */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -28deg,
    rgba(255,255,255,0.012) 0 22px,
    rgba(255,255,255,0.000) 22px 44px
  );
  z-index: 0;
}

/* Vignette */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(0,0,0,0.55) 100%);
  z-index: 0;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ============ TYPE ============ */

.display, h1, h2, h3 {
  font-family: 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.9;
}
.condensed {
  font-family: 'Barlow Condensed', 'Bebas Neue', sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.mono { font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace; }

/* ============ LAYOUT ============ */

.shell {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* ============ TOP STADIUM BAR ============ */

.stadium {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0A0F18 0%, #07090F 100%);
}
.stadium-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-mark {
  width: 44px; height: 44px;
  position: relative;
  display: grid; place-items: center;
  background: #000;
  border: 1px solid var(--line-2);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.02em;
}
.brand-mark::after {
  content: '';
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(90deg, var(--bow) 0 50%, var(--zow) 50% 100%);
  z-index: -1;
  filter: blur(8px);
  opacity: 0.35;
}
.brand-mark .b { color: var(--bow); }
.brand-mark .z { color: var(--zow); }
.brand-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.brand-title .amp { color: var(--mute); font-size: 22px; }
.brand-title .b { color: var(--bow); }
.brand-title .z { color: var(--zow); }
.brand-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--mute);
  text-transform: uppercase;
  margin-top: 2px;
}

.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  background: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.live-dot {
  width: 7px; height: 7px;
  background: var(--zow);
  box-shadow: 0 0 8px var(--zow-glow);
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* ============ TABS (stadium sections) ============ */

.tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  padding: 14px 22px 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--mute);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease;
  display: flex; align-items: center; gap: 10px;
}
.tab .tab-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--line-2);
  letter-spacing: 0;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.tab.active .tab-num { color: var(--mute); }

/* ============ PAGE HEADER ============ */

.page-head {
  padding: 36px 0 28px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
  position: relative;
}
.page-head .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--mute);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.page-head h1 {
  font-size: clamp(48px, 8vw, 88px);
  text-transform: uppercase;
}
.page-head h1 .accent-bow { color: var(--bow); }
.page-head h1 .accent-zow { color: var(--zow); }
.page-head .meta {
  display: flex; gap: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mute-2);
  letter-spacing: 0.06em;
  padding-bottom: 12px;
}
.page-head .meta b { color: var(--text); font-weight: 500; }

/* ============ BADGES ============ */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 5px;
  border-radius: 999px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 1;
}
.badge-bow {
  background: linear-gradient(180deg, #FF2E4C 0%, #C7102E 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,46,76,0.4), 0 6px 18px -8px var(--bow-glow);
}
.badge-zow {
  background: linear-gradient(180deg, #FFCB45 0%, #E08F00 100%);
  color: #1a0f00;
  box-shadow: 0 0 0 1px rgba(255,182,39,0.5), 0 6px 18px -8px var(--gold-glow);
}

/* ============ ANIMATIONS ============ */

@keyframes slideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.stagger { animation: slideUp 0.5s cubic-bezier(.2,.7,.2,1) both; }

/* ============ FOOTER ============ */

footer.foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  margin-top: 80px;
  padding: 28px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--mute);
  text-transform: uppercase;
  max-width: var(--maxw);
  margin-left: auto; margin-right: auto;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
footer.foot .bow-c { color: var(--bow); }
footer.foot .zow-c { color: var(--zow); }

/* ============ MOBILE ============ */
@media (max-width: 640px) {
  .shell { padding: 0 16px 80px; }
  .stadium-inner { padding: 14px 16px 0; }
  .brand-title { font-size: 24px; }
  .live-pill { display: none; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head .meta { padding-bottom: 0; }
}