/* Football pitch theme — grass, lines & goals */
:root {
  --grass-dark: #145a28;
  --grass-light: #1e7a34;
  --grass-stripe-a: #124d22;
  --grass-stripe-b: #1a6b2e;
  --line-chalk: rgba(255, 255, 255, 0.72);
  --line-faint: rgba(255, 255, 255, 0.22);
  --goal-white: #f8fafc;
  --net-color: rgba(255, 255, 255, 0.35);

  --primary: #ffffff;
  --primary-dark: #dcfce7;
  --secondary: #0f3d1c;
  --accent: #fef08a;
  --bg-dark: #0d4a1f;
  --bg-card: rgba(10, 50, 24, 0.82);
  --bg-card-hover: rgba(16, 68, 34, 0.92);
  --text-primary: #f0fdf4;
  --text-secondary: #bbf7d0;
  --text-muted: #86efac;
  --border: rgba(255, 255, 255, 0.22);
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #93c5fd;
}

body {
  background-color: var(--grass-dark);
  color: var(--text-primary);
}

/* Grass mowing stripes */
.pitch-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: repeating-linear-gradient(
    90deg,
    var(--grass-stripe-a) 0px,
    var(--grass-stripe-a) 90px,
    var(--grass-stripe-b) 90px,
    var(--grass-stripe-b) 180px
  );
}

/* Pitch markings — center circle, halfway line, penalty areas */
.pitch-markings {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Crect x='40' y='40' width='1120' height='720' rx='2'/%3E%3Cline x1='600' y1='40' x2='600' y2='760'/%3E%3Ccircle cx='600' cy='400' r='80'/%3E%3Ccircle cx='600' cy='400' r='4' fill='%23ffffff'/%3E%3Crect x='40' y='220' width='180' height='360'/%3E%3Crect x='980' y='220' width='180' height='360'/%3E%3Crect x='40' y='310' width='60' height='180'/%3E%3Crect x='1100' y='310' width='60' height='180'/%3E%3Cpath d='M40 400 Q220 400 220 400'/%3E%3Cpath d='M980 400 Q1160 400 1160 400'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

/* Goal posts */
.goal {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 140px;
}

.goal-left {
  left: 8px;
  border-top: 5px solid var(--goal-white);
  border-bottom: 5px solid var(--goal-white);
  border-left: 5px solid var(--goal-white);
  border-radius: 2px 0 0 2px;
  box-shadow:
    inset -8px 0 0 0 var(--net-color),
    2px 0 12px rgba(0, 0, 0, 0.25);
}

.goal-left::after {
  content: '';
  position: absolute;
  inset: 5px 0 5px -6px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 6px,
    var(--net-color) 6px 7px
  ),
  repeating-linear-gradient(
    0deg,
    transparent 0 8px,
    var(--net-color) 8px 9px
  );
  opacity: 0.5;
}

.goal-right {
  right: 8px;
  border-top: 5px solid var(--goal-white);
  border-bottom: 5px solid var(--goal-white);
  border-right: 5px solid var(--goal-white);
  border-radius: 0 2px 2px 0;
  box-shadow:
    inset 8px 0 0 0 var(--net-color),
    -2px 0 12px rgba(0, 0, 0, 0.25);
}

.goal-right::after {
  content: '';
  position: absolute;
  inset: 5px -6px 5px 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 6px,
    var(--net-color) 6px 7px
  ),
  repeating-linear-gradient(
    0deg,
    transparent 0 8px,
    var(--net-color) 8px 9px
  );
  opacity: 0.5;
}

/* Header — dark touchline bar */
.header {
  background: rgba(8, 40, 18, 0.92) !important;
  border-bottom: 2px solid var(--line-chalk) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.logo-icon {
  background: linear-gradient(135deg, var(--grass-light), var(--secondary)) !important;
  border: 2px solid var(--line-chalk);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.logo-text h1 {
  background: linear-gradient(135deg, #fff, var(--accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.nav-btn.active {
  color: var(--accent) !important;
  border-bottom-color: var(--line-chalk) !important;
}

.nav-btn .badge {
  background: var(--line-chalk) !important;
  color: var(--secondary) !important;
}

/* Cards — frosted panels on the pitch */
.card,
.stat-card,
.match-card,
.news-card,
.prediction-card,
.video-card,
.city-card,
.bracket-match,
.modal {
  border-color: var(--border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.card:hover,
.stat-card:hover,
.match-card:hover,
.news-card:hover,
.video-card:hover {
  border-color: var(--line-chalk) !important;
}

.stat-card .stat-value {
  background: linear-gradient(135deg, #fff, var(--accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.stat-bar-fill {
  background: linear-gradient(90deg, var(--line-chalk), var(--accent)) !important;
}

.ticker {
  background: rgba(8, 40, 18, 0.75) !important;
  border: 1px solid var(--line-faint) !important;
}

.ticker-item .dot {
  background: var(--accent) !important;
}

.tab-btn.active,
.pill.active {
  background: var(--line-chalk) !important;
  color: var(--secondary) !important;
}

.pill.active {
  border-color: var(--line-chalk) !important;
}

.scorer-goals,
.action-time,
.bracket-round-title {
  color: var(--accent) !important;
}

.city-image {
  background: linear-gradient(135deg, var(--grass-light), var(--grass-dark)) !important;
}

.video-thumb {
  background: linear-gradient(135deg, var(--secondary), var(--grass-dark)) !important;
}

.video-card:hover .video-play {
  background: var(--line-chalk) !important;
  color: var(--secondary) !important;
}

.search-box input:focus {
  border-color: var(--line-chalk) !important;
}

.read-more,
.modal-body .article-body a {
  color: var(--accent) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 768px) {
  .goal {
    width: 16px;
    height: 90px;
  }
  .goal-left { left: 2px; }
  .goal-right { right: 2px; }
  .pitch-markings { opacity: 0.18; }
}