/* StatsOverScore - Exact Dark Theme Clone */

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Exact color scheme from statsoverscore.com */
  --primary-blue: #60a5fa;
  --primary-purple: #a78bfa;
  --primary-pink: #ec4899;
  --primary-gold: #ffd700;
  --primary-orange: #f97316;

  /* Dark backgrounds */
  --dark-bg: #0a0a0f;
  --dark-bg-secondary: #0f172a;
  --card-bg: #1e293b;
  --card-bg-hover: #334155;
  --surface-elevated: #1f2937;

  /* Text colors */
  --text-primary: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Border colors */
  --border-color: #334155;
  --border-hover: #64748b;

  /* Semantic colors */
  --success-green: #10b981;
  --danger-red: #ef4444;
  --warning-orange: #f97316;
  --info-blue: #3b82f6;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  --gradient-header: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #ec4899 100%);
  --gradient-gold: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  --gradient-fire: linear-gradient(135deg, #ff6b35 0%, #ff4444 100%);
  --gradient-ice: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4);
  --shadow-glow-blue: 0 0 20px rgba(96, 165, 250, 0.3);
  --shadow-glow-purple: 0 0 20px rgba(167, 139, 250, 0.3);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Font families */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Alias variables for vanilla page compatibility */
  --bg-card: var(--card-bg);
  --bg-secondary: var(--dark-bg-secondary);
  --bg-tertiary: var(--surface-elevated);
  --bg-hover: var(--card-bg-hover);
  --accent-blue: var(--primary-blue);
  --accent-purple: var(--primary-purple);
  --accent-pink: var(--primary-pink);
  --accent-gold: var(--primary-gold);
  --accent-orange: var(--primary-orange);
  --accent-red: var(--danger-red);
  --accent-green: var(--success-green);
  --accent-yellow: #fbbf24;
  --transition: all 0.2s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--dark-bg);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

/* App Container */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding-bottom: 20px;
}

/* Container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-sm {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 {
  font-size: 2.5rem;
  font-weight: 700;
}

h1.gradient-text {
  background: var(--gradient-header);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: var(--space-md);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Links */
a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-purple);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  min-height: 44px;
}

.btn-primary {
  background: var(--primary-blue);
  color: white;
}

.btn-primary:hover {
  background: #3b82f6;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-blue);
}

.btn-secondary {
  background: transparent;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}

.btn-secondary:hover {
  background: rgba(96, 165, 250, 0.1);
  border-color: var(--primary-purple);
  color: var(--primary-purple);
}

.btn-pill {
  border-radius: var(--radius-full);
  padding: 0.5rem 1.25rem;
}

/* Cards - Dark theme with gradient border */
.card {
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, var(--border-color), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-hover);
}

.card-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-color);
}

/* Badges/Pills */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-primary {
  background: rgba(96, 165, 250, 0.2);
  color: var(--primary-blue);
}

.badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-green);
}

.badge-warning {
  background: rgba(249, 115, 22, 0.2);
  color: var(--warning-orange);
}

.badge-danger {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger-red);
}

.badge-gold {
  background: rgba(255, 215, 0, 0.2);
  color: var(--primary-gold);
}

.badge-purple {
  background: rgba(167, 139, 250, 0.2);
  color: var(--primary-purple);
}

/* Pills (rounded badges) */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.pill-fire {
  background: var(--gradient-fire);
  color: white;
}

.pill-ice {
  background: var(--gradient-ice);
  color: white;
}

.pill-gold {
  background: var(--gradient-gold);
  color: #1a1a2e;
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* Spacing Utilities */
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Text Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-blue { color: var(--primary-blue); }
.text-purple { color: var(--primary-purple); }
.text-success { color: var(--success-green); }
.text-danger { color: var(--danger-red); }
.text-warning { color: var(--warning-orange); }
.text-gold { color: var(--primary-gold); }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* Loading State */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  font-size: 1.25rem;
  color: var(--text-muted);
}

.spinner {
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-blue);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Error State */
.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--danger-red);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--danger-red);
  text-align: center;
}

/* Tables */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

th {
  background: var(--dark-bg-secondary);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 1;
}

tr:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* Responsive */
@media (max-width: 768px) {
  .container, .container-sm {
    padding: 0 var(--space-md);
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  .card {
    padding: var(--space-lg);
  }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }

  th, td {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.35rem; }
  h3 { font-size: 1.15rem; }

  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }

  th, td {
    padding: 8px 10px;
    font-size: 0.7rem;
  }
}

/* Animations */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Selection styling */
::selection {
  background: rgba(96, 165, 250, 0.3);
  color: var(--text-primary);
}
/**
 * Site Header Styles - Portal-Matching Design
 */

.site-header {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 15px 25px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-bottom: none;
  flex-wrap: wrap;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 101;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Top Navigation - Matches Vanilla Portal Button Style */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.top-nav::-webkit-scrollbar {
  display: none;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 1600px;
  flex-wrap: wrap;
}

.top-nav .nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: pointer;
}

.top-nav .nav-item:hover {
  border-color: var(--primary-purple);
  color: var(--primary-purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.2);
}

.top-nav .nav-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.top-nav .nav-icon {
  font-size: 1rem;
  line-height: 1;
}

.top-nav .nav-label {
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Vanilla Portal Style - Single Row Combined Header */
.site-header.vanilla-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--dark-bg-secondary);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
  gap: 12px;
  min-height: 60px;
}

.vanilla-header .header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.vanilla-header .header-left::-webkit-scrollbar {
  display: none;
}

.vanilla-header .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-right: 12px;
  flex-shrink: 0;
}

.vanilla-header .logo-img {
  height: 32px;
  width: auto;
}

.vanilla-header .logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  background: none;
  -webkit-text-fill-color: inherit;
}

.vanilla-header .nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--card-bg);
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.vanilla-header .nav-item:hover {
  background: var(--card-bg-hover);
  color: var(--text-primary);
  border-color: var(--primary-purple);
}

.vanilla-header .nav-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-color: transparent;
}

.vanilla-header .nav-icon {
  font-size: 0.9rem;
}

.vanilla-header .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-right,
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-date-input {
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
}

.nav-date-input:focus {
  outline: none;
  border-color: var(--primary-purple);
}

.nav-search-input {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.85rem;
  width: 180px;
}

.nav-search-input:focus {
  outline: none;
  border-color: var(--primary-purple);
}

.nav-search-input::placeholder {
  color: var(--text-muted);
}

.nav-export-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: none;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-export-btn.csv-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.nav-export-btn.csv-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.nav-export-btn.json-btn {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

.nav-export-btn.json-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* Settings Button */
.nav-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #94a3b8;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.nav-settings-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #3b82f6;
  transform: rotate(45deg);
}

/* Mobile adjustments for top nav */
@media (max-width: 1200px) {
  .top-nav.vanilla-style {
    flex-wrap: wrap;
    gap: 10px;
  }

  .nav-right {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .top-nav {
    padding: 10px 15px;
    justify-content: flex-start;
    top: 60px;
  }

  .nav-container {
    gap: 8px;
    justify-content: flex-start;
  }

  .top-nav .nav-item {
    padding: 8px 14px;
    font-size: 0.8rem;
    gap: 6px;
  }

  .top-nav .nav-icon {
    font-size: 0.9rem;
  }

  .top-nav .nav-label {
    font-size: 0.8rem;
  }

  .nav-right {
    flex-wrap: wrap;
  }

  .nav-search-input {
    width: 140px;
  }
}

.header-container {
  width: 100%;
  max-width: 1600px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Logo / Brand - Portal Style */
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.site-header .logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.site-header .logo-text {
  font-size: 1.35rem;
  font-weight: bold;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-right: 20px;
}

/* Legacy Logo Classes */
.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.header-logo-icon {
  font-size: 32px;
}

.header-logo-text {
  display: flex;
  flex-direction: column;
}

.header-title {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.header-subtitle {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Search Bar - Portal Style */
.search-container {
  flex: 1;
  max-width: 300px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 10px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-results {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  max-height: 400px;
  overflow-y: auto;
  z-index: 200;
}

.search-results.active {
  display: block;
}

.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.15s ease;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: var(--card-bg-hover);
}

.search-result-item .player-name {
  font-weight: 600;
}

.search-result-item .player-team {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.search-result-item .player-position {
  color: var(--primary-purple);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Legacy Search Bar */
.header-search {
  flex: 1;
  max-width: 400px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.search-bar:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.search-icon {
  font-size: 16px;
  opacity: 0.7;
}

.search-placeholder {
  color: #64748b;
  font-size: 14px;
}

/* Quick Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.header-action-btn--primary {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: white;
}

.header-action-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Search Modal */
.search-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 20px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.search-modal {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.search-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94a3b8;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.search-modal-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.search-modal .player-search {
  padding: 16px 20px;
}

/* User Section - Portal Style */
.user-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-login {
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-menu-trigger:hover {
  border-color: var(--primary-purple);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.user-name {
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.9rem;
}

.tier-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tier-badge.premium {
  background: linear-gradient(135deg, var(--primary-gold) 0%, #ffaa00 100%);
  color: #000;
}

.tier-badge.admin {
  background: linear-gradient(135deg, var(--danger-red) 0%, #ff6b6b 100%);
  color: #fff;
}

.user-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 200px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 200;
}

.user-dropdown.active {
  display: block;
}

.dropdown-header {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-color);
}

.dropdown-email {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.dropdown-tier {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
}

.dropdown-item:hover {
  background: var(--card-bg-hover);
  color: var(--text-primary);
}

.logout-btn {
  color: var(--danger-red);
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* ============================================
   Bottom Navigation - Portal Style
   ============================================ */

.bottom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-top: 1px solid var(--border-color);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bottom-nav::-webkit-scrollbar {
  display: none;
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.3s ease;
  min-width: 70px;
  position: relative;
}

.bottom-nav .nav-item:hover {
  border-color: var(--primary-purple);
  color: var(--primary-purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.2);
}

.bottom-nav .nav-item.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.bottom-nav .nav-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.bottom-nav .nav-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.bottom-nav .nav-lock {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.6rem;
  opacity: 0.7;
}

/* Mobile adjustments for bottom nav */
@media (max-width: 768px) {
  .bottom-nav {
    padding: 10px 12px;
    gap: 4px;
    justify-content: flex-start;
  }

  .bottom-nav .nav-item {
    padding: 6px 10px;
    min-width: 60px;
    font-size: 0.7rem;
  }

  .bottom-nav .nav-icon {
    font-size: 1rem;
  }

  .bottom-nav .nav-label {
    font-size: 0.6rem;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .header-container {
    padding: 0 12px;
  }

  .header-logo-text {
    display: none;
  }

  .header-logo-icon {
    font-size: 28px;
  }

  .header-search {
    max-width: none;
  }

  .action-text {
    display: none;
  }

  .header-action-btn {
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .search-bar {
    padding: 8px 12px;
  }

  .search-placeholder {
    font-size: 13px;
  }
}
/* Navigation Styles - StatsOverScore Dark Theme */

/* Fixed Bottom Navigation Bar (like live site) */
.navigation {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-top: 1px solid #334155;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
}

.navigation .container {
  padding: 0;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0 8px;
}

/* Logo/Brand - Hidden in bottom nav, shown in header */
.nav-brand {
  display: none;
}

.nav-brand a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
}

.logo-icon {
  font-size: 1.5rem;
}

.logo-text {
  white-space: nowrap;
}

/* Navigation Links - Bottom Bar Style */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 1;
  gap: 0;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  text-decoration: none;
  padding: 10px 12px;
  min-height: 56px;
  min-width: 64px;
  border-radius: 0;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.7rem;
  text-align: center;
  border-top: 2px solid transparent;
}

.nav-link:hover {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.08);
}

.nav-link.active {
  color: #60a5fa;
  border-top-color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
  font-weight: 600;
}

/* MCP Link Highlight */
.nav-link--mcp {
  color: #a78bfa;
}

.nav-link--mcp:hover {
  color: #c4b5fd;
  background: rgba(167, 139, 250, 0.08);
}

.nav-link--mcp.active {
  color: #a78bfa;
  border-top-color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
}

/* Search Button */
.nav-actions {
  display: flex;
  align-items: center;
  padding: 8px;
}

.search-toggle {
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid #334155;
  color: #60a5fa;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-toggle:hover {
  background: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
  transform: scale(1.05);
}

/* Search Dropdown */
.nav-search-dropdown {
  position: fixed;
  bottom: 70px;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-top: 1px solid #334155;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  padding: 1.5rem;
  animation: slideUp 0.2s ease;
  max-height: 70vh;
  overflow-y: auto;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .nav-link {
    padding: 8px 6px;
    font-size: 0.6rem;
    min-width: 50px;
  }

  .search-toggle {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .nav-link {
    padding: 8px 4px;
    font-size: 0.55rem;
    min-width: 44px;
  }

  /* Hide text on very small screens, show icons only */
  .nav-link {
    min-height: 50px;
  }
}

/* Player Search Styles - Dark Theme */
.player-search {
  max-width: 600px;
  margin: 0 auto;
}

.search-input-wrapper {
  position: relative;
}

.search-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  outline: none;
  color: white;
  transition: all 0.2s ease;
}

.search-input::placeholder {
  color: #64748b;
}

.search-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.search-loading {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #60a5fa;
}

/* Search Results */
.search-results,
.popular-players {
  margin-top: 1rem;
  max-height: 400px;
  overflow-y: auto;
}

.search-results-header,
.popular-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-result-item,
.popular-player-item {
  padding: 0.875rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid transparent;
}

.search-result-item:hover,
.popular-player-item:hover {
  background: rgba(96, 165, 250, 0.08);
  border-color: #334155;
}

.result-player-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.result-player-name,
.popular-player-name {
  font-weight: 600;
  color: white;
}

.result-player-meta,
.popular-player-team {
  font-size: 0.8rem;
  color: #94a3b8;
}

.no-results {
  text-align: center;
  padding: 2rem;
  color: #94a3b8;
}

.no-results-hint {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  color: #64748b;
}

/* Component Styles - Reusable UI Components */

/* Buttons */
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
}

.btn-secondary {
  background: var(--border-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--primary-blue);
  color: white;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary-blue);
  color: var(--primary-blue);
}

.btn-outline:hover {
  background: var(--primary-blue);
  color: white;
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn-disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-primary {
  background: var(--gradient-primary);
  color: white;
}

.badge-secondary {
  background: var(--border-color);
  color: var(--text-primary);
}

.badge-success {
  background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
  color: white;
}

.badge-warning {
  background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%);
  color: white;
}

.badge-danger {
  background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
  color: white;
}

.badge-info {
  background: linear-gradient(135deg, #2196F3 0%, #03A9F4 100%);
  color: white;
}

.badge-small {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

/* Cards - Glassmorphism style matching statsoverscore.com */
.card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.3);
}

.card-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-color);
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.card-body {
  color: var(--text-primary);
}

.card-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.card-compact {
  padding: 1rem;
}

.card-gradient {
  background: var(--gradient-primary);
  color: white;
}

.card-gradient .card-title {
  color: white;
}

/* Loading Spinner */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--border-color);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner-small {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-large {
  width: 80px;
  height: 80px;
  border-width: 6px;
}

.loading-text {
  margin-top: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Error Message */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.error-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.error-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.error-message {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 500px;
}

/* Alerts */
.alert {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.alert-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.alert-info {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-left: 4px solid #3b82f6;
}

.alert-success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-left: 4px solid #10b981;
}

.alert-warning {
  background: rgba(249, 115, 22, 0.15);
  color: #f97316;
  border-left: 4px solid #f97316;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-left: 4px solid #ef4444;
}

/* Tooltips */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 6px;
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  margin-bottom: 0.5rem;
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
}

/* Modal - Glassmorphism style */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.modal {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 2rem;
}

.modal-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

/* Form Elements */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
  font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-helper {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.form-error {
  color: #f44336;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border-color);
  margin: 2rem 0;
}

.divider-vertical {
  width: 1px;
  background: var(--border-color);
  margin: 0 1rem;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  margin-bottom: 1.5rem;
}

/* Skeleton Loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.skeleton-title {
  height: 2rem;
  margin-bottom: 1rem;
}

.skeleton-card {
  height: 200px;
}

/* Tabs */
.tabs {
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 2rem;
}

.tab-list {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab {
  padding: 1rem 0;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  position: relative;
  top: 2px;
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  color: var(--primary-blue);
  border-bottom-color: var(--primary-blue);
}

/* Pagination */
.pagination {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

.pagination-btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 600;
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.pagination-btn.active {
  background: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}

.pagination-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

.flex { display: flex; }
.flex-column { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

.hidden { display: none !important; }
.visible { display: block !important; }
/**
 * StatsOverScore Component Styles
 * Matches the live site design
 */

/* ==========================================================================
   Top Projections Cards
   ========================================================================== */

.top-projection-card {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-bottom: 16px;
}

.top-projection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-projection-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.projection-icon {
  font-size: 20px;
}

.projection-count {
  font-size: 12px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 12px;
}

.projection-list {
  padding: 8px 0;
}

.projection-row {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
  gap: 12px;
}

.projection-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.projection-rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-color, #60a5fa);
  min-width: 30px;
}

.projection-player-info {
  flex: 1;
  min-width: 0;
}

.projection-player-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.projection-player-meta {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.vs-opponent {
  color: #64748b;
}

.projection-stat {
  text-align: right;
}

.projection-stat-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-color, #60a5fa);
}

.projection-stat-label {
  display: block;
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
}

.projection-toggle {
  width: 100%;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.projection-toggle:hover {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* ==========================================================================
   Hot/Cold & Injury Indicators
   ========================================================================== */

.heat-indicator {
  font-size: 14px;
  margin-left: 4px;
}

.injury-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  margin-left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

/* ==========================================================================
   Game Cards
   ========================================================================== */

.game-card {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
}

.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--away-color) 0%, var(--away-color) 50%, var(--home-color) 50%, var(--home-color) 100%);
}

.game-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.game-card-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.game-teams-display {
  display: flex;
  align-items: center;
  gap: 16px;
}

.team-badge {
  text-align: center;
}

.team-abbrev {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.team-sog {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

.game-at {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.game-time {
  font-size: 14px;
  color: #94a3b8;
}

.expand-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94a3b8;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.expand-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.game-card-body {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Game Card Footer - Link to Matchups */
.game-card-footer {
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}

.view-matchups-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #667eea;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s;
}

.view-matchups-link:hover {
  background: rgba(102, 126, 234, 0.15);
  color: #818cf8;
}

/* Game Card Expand/Collapse Toggle */
.game-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(96, 165, 250, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}

.game-expand-toggle:hover {
  background: rgba(96, 165, 250, 0.12);
}

.game-expand-toggle.expanded {
  background: rgba(96, 165, 250, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.expand-icon {
  font-size: 12px;
  color: var(--primary-blue);
  transition: transform 0.3s ease;
}

.game-expand-toggle.expanded .expand-icon {
  transform: rotate(180deg);
}

.expand-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-blue);
}

/* Expanded Player Details Section */
.game-details-expanded {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: rgba(0, 0, 0, 0.2);
}

.game-details-expanded.expanded {
  max-height: 800px;
  transition: max-height 0.4s ease-in;
}

.expanded-content {
  padding: 16px;
}

.expanded-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .expanded-teams {
    grid-template-columns: 1fr;
  }
}

.expanded-team {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 8px;
  overflow: hidden;
}

.expanded-team-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
}

.expanded-players-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.expanded-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.expanded-player-row:last-child {
  border-bottom: none;
}

.expanded-player-row:hover {
  background: rgba(96, 165, 250, 0.1);
}

.expanded-player-row.hot {
  background: rgba(255, 107, 53, 0.08);
}

.expanded-player-row.cold {
  background: rgba(79, 172, 254, 0.08);
}

.exp-player-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.exp-player-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exp-player-pos {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.heat-indicator {
  font-size: 12px;
}

.exp-player-context {
  display: flex;
  gap: 4px;
  margin: 0 8px;
}

.line-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(96, 165, 250, 0.15);
  color: var(--primary-blue);
  border-radius: 4px;
  font-weight: 600;
}

.pp-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: rgba(167, 139, 250, 0.15);
  color: var(--primary-purple);
  border-radius: 4px;
  font-weight: 600;
}

.exp-player-stats {
  display: flex;
  gap: 12px;
}

.exp-stat {
  font-size: 12px;
  font-weight: 600;
}

.exp-stat.goals {
  color: var(--primary-gold);
}

.exp-stat.sog {
  color: var(--text-muted);
}

/* Games Grid Layout */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 420px));
  gap: 24px;
  padding: 0 16px;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .games-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 12px;
  }
}

/* Team Sections within Game Cards */
.team-section {
  padding: 16px 20px;
}

.team-section:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.away-section {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
}

.home-section {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
}

.team-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid;
}

/* Players List */
.players-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.player-row:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

.player-row .player-info {
  flex: 1;
  min-width: 0;
}

.player-row .player-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-row .player-position {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 6px;
}

.player-row .player-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.player-row .player-projections {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.player-row .stat {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.player-row .stat-goals {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.player-row .stat-sog {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

.player-row .stat-pts {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
}

/* Player Row Container with Exclude Button */
.player-row-container {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.player-row-container .player-row {
  flex: 1;
  min-width: 0;
}

.exclude-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger-red);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-row-container:hover .exclude-btn {
  opacity: 1;
}

.exclude-btn:hover {
  background: var(--danger-red);
  color: white;
  transform: scale(1.1);
}

.exclude-btn:disabled {
  cursor: wait;
  opacity: 0.5;
}

/* Mobile: always show exclude button */
@media (max-width: 768px) {
  .exclude-btn {
    opacity: 0.7;
  }
}

.no-players {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
  padding: 12px 0;
  text-align: center;
}

/* Goalie Bar */
.goalie-bar {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.goalie-slot {
  text-align: center;
}

.goalie-label {
  display: block;
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.goalie-name {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

.goalie-stat {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Team Tabs */
.team-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.team-tab {
  flex: 1;
  padding: 12px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.team-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.team-tab.active {
  color: #fff;
}

.team-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--tab-color, #60a5fa);
  border-radius: 3px 3px 0 0;
}

/* View Controls */
.view-controls {
  padding: 8px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.compact-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
}

.compact-toggle input {
  accent-color: #60a5fa;
}

/* Player List in Game Card */
.game-player-list {
  max-height: 400px;
  overflow-y: auto;
}

.game-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.game-player-row:last-child {
  border-bottom: none;
}

.game-player-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.game-player-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #fff;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-player-stats {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.stat-pill {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.stat-pill--sog {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

.stat-pill--pts {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
}

.stat-pill--goals {
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
}

.stat-pill--assists {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.game-player-row--compact .game-player-stats {
  gap: 4px;
}

.game-player-row--compact .stat-pill {
  padding: 3px 6px;
  font-size: 10px;
}

.no-players {
  padding: 40px 20px;
  text-align: center;
  color: #64748b;
}

.top-targets-summary {
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: #94a3b8;
}

.summary-label {
  font-weight: 600;
  margin-right: 8px;
}

.top-target-name {
  color: #fff;
}

/* ==========================================================================
   Date Selector
   ========================================================================== */

.date-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.date-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-nav-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.date-picker-wrapper {
  position: relative;
}

.date-picker-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 160px;
}

.date-picker-trigger:hover {
  background: rgba(255, 255, 255, 0.15);
}

.date-icon {
  font-size: 16px;
}

.date-display {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.date-arrow {
  font-size: 10px;
  color: #94a3b8;
}

.date-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  z-index: 100;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  max-height: 300px;
  overflow-y: auto;
}

.date-option {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: #94a3b8;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.date-option.active {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

.date-option--today {
  font-weight: 600;
  color: #fff;
}

.date-option--past {
  opacity: 0.7;
}

.today-badge {
  font-size: 10px;
  background: rgba(96, 165, 250, 0.3);
  color: #60a5fa;
  padding: 2px 6px;
  border-radius: 4px;
}

.today-btn {
  padding: 8px 12px;
  background: rgba(96, 165, 250, 0.2);
  border: none;
  border-radius: 8px;
  color: #60a5fa;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.today-btn:hover {
  background: rgba(96, 165, 250, 0.3);
}

/* ==========================================================================
   Projections Grid Layout
   ========================================================================== */

.projections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 1024px) {
  .projections-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .projections-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Games Grid
   ========================================================================== */

.games-slate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* ==========================================================================
   Section Headers
   ========================================================================== */

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

.section-title-icon {
  font-size: 22px;
}

/* ==========================================================================
   Pace Tags
   ========================================================================== */

.pace-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 12px;
  white-space: nowrap;
}

.pace-icon {
  font-size: 12px;
}

.pace-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Game Header Layout for Pace Tags */
.game-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.game-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   Quick Stats Row (Collapsed View)
   ========================================================================== */

.quick-stats-row {
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 16px;
}

.quick-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.quick-stat-label {
  color: #64748b;
}

.quick-stat-value {
  color: #fff;
  font-weight: 500;
}

/* Mobile adjustments for pace tags */
@media (max-width: 480px) {
  .pace-tag {
    padding: 3px 8px;
    font-size: 10px;
    margin-left: 8px;
  }

  .pace-icon {
    font-size: 10px;
  }

  .game-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .pace-tag {
    margin-left: 0;
  }

  .quick-stats-row {
    padding: 6px 12px;
  }

  .quick-stat {
    font-size: 11px;
  }
}
/* Player Page Styles - Exact match to original */

.player-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.player-main {
  min-width: 0; /* Prevents grid overflow */
}

/* Player Header */
.player-header {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.player-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.player-name-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.player-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--primary-purple);
  line-height: 1;
}

.player-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.player-name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.player-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-secondary);
  font-size: 1rem;
}

.team-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gradient-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
}

.position-badge {
  background: var(--border-color);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Performance Badges */
.performance-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.performance-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.performance-badge.positive {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.performance-badge.negative {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* Streak Stats */
.streak-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.streak-stat {
  text-align: center;
}

.streak-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.streak-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-blue);
}

/* Season Stats Grid */
.season-stats {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  text-align: center;
  padding: 1rem;
  border-radius: 8px;
  background: var(--bg-secondary);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card.gradient {
  background: var(--gradient-primary);
  color: white;
}

.stat-card.gradient .stat-label {
  color: rgba(255, 255, 255, 0.9);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-card.gradient .stat-value {
  color: white;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* ===========================================
   ENHANCED PLAYER HERO SECTION
   Statsoverscore-inspired design
   =========================================== */

.player-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(var(--team-color-rgb, 102, 126, 234), 0.15) 0%, var(--card-bg) 100%);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(135deg, rgba(var(--team-color-rgb, 102, 126, 234), 0.3) 0%, transparent 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero-left {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex: 1;
  min-width: 300px;
}

.player-photo-container {
  position: relative;
  flex-shrink: 0;
}

.player-photo-container .headshot-hero,
.player-photo-container img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--team-color, var(--primary-purple));
  box-shadow: 0 8px 32px rgba(var(--team-color-rgb, 102, 126, 234), 0.4);
  object-fit: cover;
  background: var(--bg-secondary);
}

.jersey-number {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: var(--gradient-primary);
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}

.player-identity {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.player-name-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.player-name-hero {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  line-height: 1.2;
}

.injury-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.injury-badge.injury-out {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.injury-badge.injury-doubtful {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

.injury-badge.injury-probable {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
  color: #000;
}

.injury-badge.injury-dtd {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.player-meta-hero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary);
  font-size: 1rem;
  flex-wrap: wrap;
}

.meta-divider {
  color: var(--text-muted);
  opacity: 0.5;
}

.position-badge {
  background: var(--bg-secondary);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-weight: 600;
  color: var(--text-primary);
}

.line-badge {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-weight: 600;
}

.pp-badge-hero {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-weight: 700;
}

/* Performance Tags */
.performance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.perf-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: help;
  transition: transform 0.2s, box-shadow 0.2s;
}

.perf-tag:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.perf-tag.sog-machine {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.perf-tag.high-volume {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: white;
}

.perf-tag.home-ice {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
}

.perf-tag.road-warrior {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
}

.perf-tag.nuclear {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  animation: pulse-glow 2s ease-in-out infinite;
}

.perf-tag.hot {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

.perf-tag.frozen {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color: white;
}

.perf-tag.clutch {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  color: white;
}

.perf-tag.pp-sniper {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000;
}

.perf-tag.breakout-due {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: white;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); }
}

/* Hero Right - Season Stats */
.hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.hero-season-stats {
  display: flex;
  gap: 1.5rem;
  background: rgba(var(--team-color-rgb, 102, 126, 234), 0.1);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--team-color-rgb, 102, 126, 234), 0.2);
}

.hero-stat {
  text-align: center;
  min-width: 50px;
}

.hero-stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.hero-stat-value.goals { color: #ec4899; }
.hero-stat-value.assists { color: #22c55e; }
.hero-stat-value.points { color: #a855f7; }
.hero-stat-value.sog { color: #3b82f6; }

.hero-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-tier {
  display: flex;
  justify-content: flex-end;
}

/* Projection Summary Bar */
.hero-projection-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: linear-gradient(90deg, rgba(var(--team-color-rgb, 102, 126, 234), 0.15) 0%, var(--bg-secondary) 100%);
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 1rem;
}

.projection-opponent {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vs-label {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.opponent-name {
  font-weight: 600;
  color: var(--text-primary);
}

.matchup-quality {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.matchup-quality.favorable {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border-color: transparent;
}

.matchup-quality.good {
  background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
  color: white;
  border-color: transparent;
}

.matchup-quality.tough {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border-color: transparent;
}

.matchup-quality.challenging {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
  border-color: transparent;
}

.projection-quick-stats {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.quick-stat {
  text-align: center;
}

.quick-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.quick-value.ags-elite { color: #fbbf24; }
.quick-value.ags-good { color: #22c55e; }
.quick-value.ags-average { color: var(--text-primary); }
.quick-value.ags-low { color: var(--text-muted); }

.quick-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-stat.game-time .quick-value {
  font-size: 1rem;
}

/* Recent Form Section with Trends */
.recent-form-section {
  margin-bottom: 1.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
}

.form-item {
  text-align: center;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 12px;
}

.form-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.form-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-value {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.form-value.goals { color: #ec4899; }
.form-value.assists { color: #22c55e; }
.form-value.sog { color: #3b82f6; }
.form-value.hot { color: #f97316; }
.form-value.cold { color: #06b6d4; }

.trend-up { color: #22c55e; font-weight: 700; }
.trend-down { color: #ef4444; font-weight: 700; }
.trend-flat { color: var(--text-muted); }

.trend-sparkline {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Collapsible Sections */
.collapsible-section .section-header-collapsible {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.collapsible-section .section-header-collapsible h2 {
  margin: 0;
}

.section-collapse-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.3s;
  padding: 0.5rem;
}

.collapsible-section.collapsed .section-collapse-btn {
  transform: rotate(-90deg);
}

.collapsible-section.collapsed .section-content {
  display: none;
}

/* Game Log Table */
.game-log-section {
  margin-bottom: 1.5rem;
}

.game-log-table-wrapper {
  overflow-x: auto;
}

.game-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.game-log-table th,
.game-log-table td {
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.game-log-table th {
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.game-log-table tbody tr:hover {
  background: rgba(var(--team-color-rgb, 102, 126, 234), 0.05);
}

.game-log-table tbody tr.scored {
  background: rgba(236, 72, 153, 0.1);
}

.game-log-table .highlight-goals {
  color: #ec4899;
  font-weight: 700;
}

/* Responsive adjustments for hero */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-left {
    flex-direction: column;
    align-items: center;
  }

  .player-identity {
    align-items: center;
  }

  .player-name-row {
    justify-content: center;
  }

  .player-meta-hero {
    justify-content: center;
  }

  .performance-tags {
    justify-content: center;
  }

  .hero-right {
    align-items: center;
    width: 100%;
  }

  .hero-season-stats {
    width: 100%;
    justify-content: center;
  }

  .hero-projection-bar {
    flex-direction: column;
    text-align: center;
  }

  .projection-quick-stats {
    width: 100%;
    justify-content: center;
  }
}

/* Projection Card */
.projection-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.projection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.matchup-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.opponent-badge {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-purple);
}

.home-away-badge {
  background: var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.875rem;
}

.confidence-badge {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Matchup Insights */
.matchup-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.insight-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--border-color);
  color: var(--text-primary);
}

.insight-badge.positive {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.insight-badge.negative {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

/* Head to Head Section */
.head-to-head {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.h2h-grid {
  display: grid;
  gap: 1rem;
}

.h2h-team {
  padding: 1rem;
  border-radius: 8px;
  background: var(--bg-secondary);
}

.h2h-team-name {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.h2h-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Teammate Shares */
.teammate-shares {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 1rem;
  border-radius: 8px;
  transition: background 0.2s;
}

.collapsible-header:hover {
  background: var(--bg-secondary);
}

.expand-icon {
  font-size: 1.5rem;
  transition: transform 0.3s;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

.shares-filters {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
}

/* Team Roster Sidebar */
.team-roster-sidebar {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  height: fit-content;
  position: sticky;
  top: 80px;
}

.roster-header {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-color);
}

.roster-section {
  margin-bottom: 1.5rem;
}

.roster-section:last-child {
  margin-bottom: 0;
}

.roster-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.roster-player {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 0.25rem;
}

.roster-player:hover {
  background: var(--bg-secondary);
  transform: translateX(4px);
}

.roster-player.active {
  background: var(--gradient-primary);
  color: white;
}

.roster-player-name {
  font-weight: 600;
  font-size: 0.875rem;
}

.roster-player-position {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-left: 0.5rem;
}

.roster-player.active .roster-player-position {
  color: rgba(255, 255, 255, 0.8);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .player-layout {
    grid-template-columns: 1fr;
  }

  .team-roster-sidebar {
    position: static;
    margin-bottom: 2rem;
  }

  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .streak-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .player-layout {
    padding: 1rem;
    gap: 1rem;
  }

  .player-header,
  .season-stats,
  .projection-card,
  .head-to-head,
  .teammate-shares {
    padding: 1rem;
  }

  .player-name {
    font-size: 1.5rem;
  }

  .player-number {
    font-size: 2rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .streak-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .projection-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .player-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
/**
 * Team Lines Page Styles
 * Line combinations, PP units, and team selector
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.lines-page {
  padding-bottom: 100px;
}

.lines-page .page-header {
  text-align: center;
  margin-bottom: 32px;
}

.lines-page .page-header h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.lines-page .page-header p {
  color: #94a3b8;
  font-size: 14px;
}

/* ==========================================================================
   Team Selector
   ========================================================================== */

.team-selector-section {
  margin-bottom: 32px;
}

.team-selector-section h2 {
  font-size: 1.25rem;
  margin-bottom: 20px;
  color: #fff;
}

.team-selector-section h3 {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Teams Playing Today */
.teams-today {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.teams-today h3 {
  color: #4ade80;
  margin-bottom: 16px;
}

.team-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.team-chip {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid var(--team-color, #64748b);
  border-radius: 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.team-chip:hover {
  background: var(--team-color);
  transform: scale(1.05);
}

.team-chip--active {
  background: var(--team-color);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* All Teams Grid */
.all-teams {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 20px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.team-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  position: relative;
}

.team-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--team-color);
  color: #fff;
}

.team-button--active {
  background: var(--team-color);
  border-color: var(--team-color);
  color: #fff;
}

.team-button--playing {
  border-color: rgba(34, 197, 94, 0.4);
}

.team-button--playing::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #4ade80;
  border-radius: 10px 0 0 10px;
}

.team-abbrev {
  font-weight: 700;
  font-size: 14px;
  min-width: 35px;
}

.team-name {
  flex: 1;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playing-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #22c55e;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
}

/* ==========================================================================
   Team Lines Display
   ========================================================================== */

.team-lines-display {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  border-top: 4px solid var(--team-color, #64748b);
}

.team-lines-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.team-lines-header h2 {
  font-size: 1.5rem;
  color: #fff;
  margin: 0;
}

.player-count {
  color: #64748b;
  font-size: 13px;
}

/* ==========================================================================
   Lines Section
   ========================================================================== */

.lines-section {
  margin-bottom: 32px;
}

.lines-section h3 {
  font-size: 14px;
  color: #94a3b8;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lines-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================================================
   Line Row (Forward Lines)
   ========================================================================== */

.line-row {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  overflow: hidden;
}

.line-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.line-players {
  display: flex;
  flex: 1;
  gap: 8px;
  padding: 12px;
}

/* ==========================================================================
   Line Player Card
   ========================================================================== */

.line-player {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s;
}

.line-player:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.line-player--empty {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  color: #475569;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.line-player__name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-player__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.line-stat {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.line-stat--goals {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.line-stat--sog {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.line-stat--pts {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

/* ==========================================================================
   Defense Pairs
   ========================================================================== */

.pairs-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.defense-pair {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  overflow: hidden;
}

.pair-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.pair-players {
  display: flex;
  flex: 1;
  gap: 8px;
  padding: 12px;
}

/* ==========================================================================
   Power Play Units
   ========================================================================== */

.pp-container {
  display: flex;
  gap: 16px;
}

.pp-unit {
  flex: 1;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.pp-label {
  padding: 12px;
  background: rgba(251, 191, 36, 0.1);
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
  text-align: center;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.pp-players {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
}

.pp-players .line-player {
  flex: 0 0 calc(50% - 4px);
  min-width: 120px;
}

/* ==========================================================================
   Goalies Section
   ========================================================================== */

.goalies-container {
  display: flex;
  gap: 12px;
}

.goalie-card {
  padding: 16px 24px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
}

.goalie-name {
  font-size: 14px;
  font-weight: 600;
  color: #4ade80;
}

/* ==========================================================================
   Players Table
   ========================================================================== */

.players-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.players-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.players-table th,
.players-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.players-table th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.players-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.players-table .player-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.players-table .player-link:hover {
  color: #60a5fa;
  text-decoration: underline;
}

.stat-cell {
  font-family: 'SF Mono', Monaco, monospace;
  color: #94a3b8;
}

.stat-cell--goals {
  color: #f87171;
  font-weight: 600;
}

/* ==========================================================================
   No Data / Select Prompt
   ========================================================================== */

.no-data-message {
  text-align: center;
  padding: 60px 20px;
}

.no-data-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
  opacity: 0.5;
}

.no-data-message h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
}

.no-data-message p {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 4px;
}

.no-data-message .hint {
  color: #94a3b8;
  font-size: 13px;
  margin-top: 16px;
}

.select-prompt {
  text-align: center;
  padding: 60px 20px;
}

.prompt-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
}

.select-prompt h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 8px;
}

.select-prompt p {
  color: #64748b;
  font-size: 14px;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .line-row,
  .defense-pair {
    flex-direction: column;
  }

  .line-label,
  .pair-label {
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .line-players,
  .pair-players {
    flex-direction: column;
  }

  .pp-container {
    flex-direction: column;
  }

  .pp-players .line-player {
    flex: 0 0 100%;
  }

  .goalies-container {
    flex-direction: column;
  }

  .players-table {
    font-size: 12px;
  }

  .players-table th,
  .players-table td {
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-chips {
    justify-content: center;
  }

  .team-chip {
    padding: 8px 16px;
    font-size: 13px;
  }

  .line-player__stats {
    flex-direction: column;
  }
}
/**
 * Streaks Page Styles
 * Hot/cold tracking with streak cards and tabs
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

.streaks-page {
  padding-bottom: 100px;
}

.streaks-page .page-header {
  text-align: center;
  margin-bottom: 24px;
}

.streaks-page .page-header h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.streaks-page .page-header p {
  color: #94a3b8;
  font-size: 14px;
}

/* ==========================================================================
   Tab Navigation
   ========================================================================== */

.streaks-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  overflow-x: auto;
}

.streaks-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.streaks-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
}

.streaks-tab--active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.streaks-tab__icon {
  font-size: 18px;
}

.streaks-tab__label {
  font-weight: 600;
}

.streaks-tab__count {
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.streaks-tab--active .streaks-tab__count {
  background: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   Content Grid
   ========================================================================== */

.streaks-content {
  margin-bottom: 32px;
}

.streaks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* ==========================================================================
   Streak Cards
   ========================================================================== */

.streak-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s;
}

.streak-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Hot Card Variant */
.streak-card--hot {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.streak-card--hot:hover {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.2);
}

/* Cold Card Variant */
.streak-card--cold {
  border-color: rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.streak-card--cold:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
}

/* Rising Card Variant */
.streak-card--rising {
  border-color: rgba(34, 197, 94, 0.3);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.streak-card--rising:hover {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 8px 30px rgba(34, 197, 94, 0.2);
}

/* Due Card Variant */
.streak-card--due {
  border-color: rgba(251, 191, 36, 0.3);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.streak-card--due:hover {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 8px 30px rgba(251, 191, 36, 0.2);
}

/* Home Hero Card Variant */
.streak-card--home-hero {
  border-color: rgba(34, 197, 94, 0.3);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.streak-card--home-hero:hover {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 8px 30px rgba(34, 197, 94, 0.2);
}

/* Road Warrior Card Variant */
.streak-card--road-warrior {
  border-color: rgba(168, 85, 247, 0.3);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.streak-card--road-warrior:hover {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 8px 30px rgba(168, 85, 247, 0.2);
}

/* SOG Streak Card Variant */
.streak-card--sog-streak {
  border-color: rgba(59, 130, 246, 0.3);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.streak-card--sog-streak:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
}

/* Point Machine Card Variant */
.streak-card--point-machine {
  border-color: rgba(236, 72, 153, 0.3);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.streak-card--point-machine:hover {
  border-color: rgba(236, 72, 153, 0.5);
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.2);
}

/* Elite Shooter Card Variant */
.streak-card--elite-shooter {
  border-color: rgba(147, 51, 234, 0.3);
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
}

.streak-card--elite-shooter:hover {
  border-color: rgba(147, 51, 234, 0.5);
  box-shadow: 0 8px 30px rgba(147, 51, 234, 0.2);
}

/* ==========================================================================
   Card Header
   ========================================================================== */

.streak-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.streak-card__player {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.streak-card__name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.streak-card__team {
  font-size: 12px;
  color: #64748b;
}

/* Badges */
.streak-card__badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.streak-card__badge--hot {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.streak-card__badge--cold {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.streak-card__badge--rising {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.streak-card__badge--due {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.streak-card__badge--elite-shooter {
  background: rgba(147, 51, 234, 0.2);
  color: #a78bfa;
  border: 1px solid rgba(147, 51, 234, 0.3);
}

.streak-card__badge--elite-shooter.elite {
  background: rgba(147, 51, 234, 0.3);
  color: #c4b5fd;
  border: 1px solid rgba(147, 51, 234, 0.5);
}

.streak-card__badge--elite-shooter.above-avg {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.streak-card__badge--elite-shooter.average {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* ==========================================================================
   Card Stats
   ========================================================================== */

.streak-card__stats {
  display: flex;
  gap: 16px;
}

.streak-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.streak-stat__value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.streak-stat__label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   Card Signals
   ========================================================================== */

.streak-card__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-signal {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}

/* ==========================================================================
   Card Warning (Cold)
   ========================================================================== */

.streak-card__warning {
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 8px;
  font-size: 12px;
  color: #60a5fa;
}

/* ==========================================================================
   Due Indicator
   ========================================================================== */

.streak-card__due-indicator {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.due-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.due-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.due-label {
  font-size: 11px;
  color: #fbbf24;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.streaks-empty {
  text-align: center;
  padding: 60px 20px;
}

.streaks-empty .empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
  opacity: 0.5;
}

.streaks-empty p {
  color: #64748b;
  font-size: 14px;
}

/* ==========================================================================
   Legend
   ========================================================================== */

.streaks-legend {
  padding: 24px;
}

.streaks-legend h3 {
  font-size: 14px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.legend-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.legend-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.legend-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legend-text strong {
  font-size: 14px;
  color: #fff;
}

.legend-text p {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   Demo Banner
   ========================================================================== */

.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 10px;
  margin-bottom: 24px;
  font-size: 13px;
  color: #c084fc;
}

.demo-banner--live {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.demo-banner--static {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.demo-icon {
  font-size: 16px;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .streaks-tabs {
    gap: 4px;
  }

  .streaks-tab {
    padding: 10px 14px;
    font-size: 13px;
  }

  .streaks-tab__label {
    display: none;
  }

  .streaks-tab__icon {
    font-size: 20px;
  }

  .streaks-grid {
    grid-template-columns: 1fr;
  }

  .streak-card {
    padding: 16px;
  }

  .legend-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .streaks-tab {
    padding: 8px 12px;
  }

  .streaks-tab__count {
    display: none;
  }

  .streak-card__stats {
    flex-wrap: wrap;
  }

  .streak-stat {
    flex: 1 0 30%;
  }
}
/* Game Log Table Styles - Exact match to original */

.game-log-section {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

/* Filter Controls */
.table-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border-color);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-select {
  padding: 0.5rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  background: var(--card-bg);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-select:hover {
  border-color: var(--primary-blue);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-purple);
}

/* Table Wrapper */
.table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.game-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Table Header */
.game-log-table thead {
  background: var(--gradient-primary);
  color: white;
}

.game-log-table th {
  padding: 1rem 0.75rem;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.game-log-table th:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sortable-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}

.sort-indicator {
  font-size: 0.75rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.game-log-table th:hover .sort-indicator {
  opacity: 1;
}

.sort-indicator.active {
  opacity: 1;
}

/* Numeric columns - right align */
.game-log-table th.numeric,
.game-log-table td.numeric {
  text-align: right;
}

/* Table Body */
.game-log-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}

.game-log-table tbody tr:hover {
  background: var(--bg-secondary);
}

.game-log-table tbody tr:last-child {
  border-bottom: none;
}

.game-log-table td {
  padding: 0.75rem;
  color: var(--text-primary);
}

/* Date Column */
.date-cell {
  font-weight: 600;
  color: var(--text-secondary);
}

/* Opponent Column */
.opponent-cell {
  font-weight: 700;
  color: var(--primary-purple);
}

/* Home/Away Badge */
.location-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  text-align: center;
  min-width: 30px;
}

.location-badge.home {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.location-badge.away {
  background: var(--border-color);
  color: var(--text-primary);
}

/* Result Badge */
.result-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  min-width: 30px;
}

.result-badge.win {
  background: #4CAF50;
  color: white;
}

.result-badge.loss {
  background: #f44336;
  color: white;
}

.result-badge.otl {
  background: #FF9800;
  color: white;
}

/* Stat Highlights */
.stat-highlight {
  font-weight: 700;
}

.stat-highlight.excellent {
  color: #4CAF50;
}

.stat-highlight.good {
  color: var(--primary-blue);
}

.stat-highlight.poor {
  color: #f44336;
}

/* Goal/Assist cells */
.goals-cell {
  font-weight: 700;
  color: var(--primary-blue);
}

.assists-cell {
  font-weight: 700;
  color: var(--primary-purple);
}

.points-cell {
  font-weight: 700;
  color: #4CAF50;
}

/* Averages Row */
.averages-row {
  background: var(--bg-secondary);
  font-weight: 700;
}

.averages-row td {
  padding: 1rem 0.75rem;
  border-top: 2px solid var(--border-color);
  color: var(--text-primary);
}

.averages-label {
  color: var(--primary-purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Empty State */
.table-empty {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
}

.table-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.table-empty-text {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.table-empty-hint {
  font-size: 0.875rem;
}

/* Loading State */
.table-loading {
  text-align: center;
  padding: 3rem;
}

/* Responsive Table */
@media (max-width: 1024px) {
  .table-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    width: 100%;
  }

  .filter-select {
    flex: 1;
  }

  .table-wrapper {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .game-log-table {
    min-width: 800px;
  }

  .game-log-table th,
  .game-log-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .game-log-section {
    padding: 1rem;
  }

  .game-log-table {
    font-size: 0.75rem;
    min-width: 700px;
  }

  .game-log-table th,
  .game-log-table td {
    padding: 0.5rem 0.35rem;
  }

  /* Stack filter controls */
  .table-controls {
    gap: 0.75rem;
  }
}

/* Scrollbar Styling */
.table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--primary-blue);
}

/* Sticky Header (optional enhancement) */
@media (min-width: 768px) {
  .table-wrapper.sticky-header {
    max-height: 600px;
    overflow-y: auto;
  }

  .table-wrapper.sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

/* Print Styles */
@media print {
  .table-controls {
    display: none;
  }

  .game-log-table {
    font-size: 0.7rem;
  }

  .game-log-table tbody tr:hover {
    background: none;
  }
}
/* ================================
   Teams Betting Page
   ================================ */

.teams-page {
  max-width: 1200px;
  margin: 0 auto;
}

.teams-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.teams-summary .summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.teams-summary .summary-card.highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--bg-card) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

.teams-summary .summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

.teams-summary .summary-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Market Tabs */
.market-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.market-tab {
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.market-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.market-tab.active {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
  border-color: transparent;
  color: white;
}

/* Picks Grid */
.picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.pick-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: all 0.2s ease;
  border-left: 4px solid var(--pick-team-color, var(--accent-blue));
}

.pick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.pick-card.high {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, var(--bg-card) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

.pick-card.medium {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, var(--bg-card) 100%);
  border-color: rgba(251, 191, 36, 0.3);
}

.pick-card.low {
  background: var(--bg-card);
}

.pick-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.matchup-mini {
  display: flex;
  align-items: center;
  gap: 8px;
}

.matchup-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.confidence-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.confidence-badge.high {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.confidence-badge.medium {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.confidence-badge.low {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

.confidence-badge.info {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

/* Info cards (no edge but valuable context) */
.pick-card.info {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.05) 0%, var(--bg-card) 100%);
  border-color: rgba(96, 165, 250, 0.2);
  opacity: 0.9;
}

.pick-card.no-edge {
  border-left-color: var(--text-muted);
}

/* Probability display for info cards */
.pick-probabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
}

.prob-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.prob-label {
  font-size: 12px;
  color: var(--text-muted);
}

.prob-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Rationale text */
.pick-rationale {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  margin-top: 8px;
}

/* Neutral phase tag */
.phase-tag.neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.pick-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.market-icon {
  font-size: 24px;
  width: 40px;
  text-align: center;
}

.pick-details {
  flex: 1;
}

.pick-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  margin-bottom: 2px;
}

.pick-market {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pick-prob {
  text-align: right;
  min-width: 70px;
}

.prob-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

.prob-bar-mini {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}

.prob-fill-mini {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.prob-fill-mini.high {
  background: linear-gradient(90deg, #34d399, #10b981);
}

.prob-fill-mini.medium {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.prob-fill-mini.low {
  background: linear-gradient(90deg, #94a3b8, #64748b);
}

.pick-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.phase-tag {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-secondary);
}

.goalie-tag {
  padding: 4px 10px;
  background: rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: #a5b4fc;
}

/* Teams Legend */
.teams-legend {
  margin-top: 24px;
  padding: 20px;
}

.teams-legend h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.legend-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}

.legend-text strong {
  font-size: 13px;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.legend-text p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.no-picks {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

/* No Data Message */
.no-data-message {
  text-align: center;
  padding: 60px 20px;
}

.no-data-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
  opacity: 0.6;
}

.no-data-message h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.no-data-message p {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.no-data-message code {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
}

/* Reset .card effects on no-data-message */
.no-data-message.card {
  padding: 60px 20px;
}

.no-data-message.card::before {
  display: none;
}

.no-data-message.card:hover {
  transform: none;
}

/* Teams Page Responsive */
@media (max-width: 768px) {
  .teams-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .picks-grid {
    grid-template-columns: 1fr;
  }

  .market-tabs {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .market-tab {
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .teams-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .teams-summary .summary-value {
    font-size: 22px;
  }

  .pick-card {
    padding: 12px;
  }

  .pick-text {
    font-size: 14px;
  }

  .prob-value {
    font-size: 16px;
  }
}

/* ================================
   Best Bets Page
   ================================ */

.bestbets-page {
  max-width: 1200px;
  margin: 0 auto;
}

.bestbets-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.summary-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  flex: 1;
  min-width: 150px;
}

.summary-stat.highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--bg-card) 100%);
  border-color: rgba(16, 185, 129, 0.3);
}

.stat-icon {
  font-size: 28px;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Picks Sections */
.picks-section {
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.section-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.section-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.section-badge.elite {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(251, 191, 36, 0.3));
  color: #fbbf24;
}

.section-badge.value {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

/* Player Picks Grid */
.player-picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.player-pick-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.player-pick-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-blue);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.ultra-elite-section .player-pick-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-card) 100%);
  border-color: rgba(239, 68, 68, 0.3);
}

.elite-section .player-pick-card {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, var(--bg-card) 100%);
  border-color: rgba(251, 191, 36, 0.25);
}

.value-section .player-pick-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, var(--bg-card) 100%);
  border-color: rgba(16, 185, 129, 0.25);
}

.pick-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.player-photo-small {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-tertiary);
}

.player-initials-small {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: white;
}

.pick-player-info {
  flex: 1;
  min-width: 0;
}

.pick-player-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-player-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.pick-card-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.composite-score {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.score-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pick-card-signals {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.signal-pill {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  font-size: 12px;
}

/* Team Picks List */
.team-picks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-pick-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.team-pick-row:hover {
  border-color: var(--accent-blue);
  background: rgba(255, 255, 255, 0.02);
}

.team-pick-market {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}

.team-pick-market .market-icon {
  font-size: 18px;
}

.market-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}

.team-pick-matchup {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 150px;
}

.team-pick-matchup .matchup-text {
  font-size: 13px;
  color: var(--text-secondary);
}

.team-pick-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 100px;
}

.team-pick-details .pick-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.team-pick-details .pick-prob {
  font-size: 12px;
  color: #34d399;
  font-weight: 600;
}

.team-pick-context {
  min-width: 80px;
  text-align: right;
}

.goalie-mini {
  font-size: 11px;
  color: var(--text-muted);
}

/* Best Bets Disclaimer */
.bestbets-disclaimer {
  margin-top: 32px;
  padding: 16px 20px;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
}

.bestbets-disclaimer p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* Best Bets Responsive */
@media (max-width: 768px) {
  .bestbets-summary {
    flex-direction: column;
  }

  .summary-stat {
    min-width: auto;
  }

  .player-picks-grid {
    grid-template-columns: 1fr;
  }

  .team-pick-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .team-pick-market {
    min-width: 80px;
  }

  .team-pick-matchup {
    order: -1;
    width: 100%;
    justify-content: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .team-pick-context {
    min-width: auto;
  }
}

/* ==========================================================================
   Game Scores - Final and Live
   ========================================================================== */

.game-score {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: 'SF Mono', Monaco, monospace;
  font-weight: 700;
}

.game-score.final {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.game-score.live {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.game-score .score-away,
.game-score .score-home {
  font-size: 18px;
  min-width: 24px;
  text-align: center;
}

.game-score .score-separator {
  color: var(--text-muted);
  font-size: 14px;
}

.game-score .score-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.game-score.final .score-label {
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent-green);
}

.game-score.live .score-label {
  background: rgba(239, 68, 68, 0.2);
  color: var(--accent-red);
}

/* Hits/Blocks projection card colors */
.projection-card.hits .projection-value,
.projection-value.hits {
  color: var(--accent-orange);
}

.projection-card.blocks .projection-value,
.projection-value.blocks {
  color: var(--accent-purple);
}

/* ==========================================================================
   All Players Page
   ========================================================================== */

.all-players-page {
  padding: 20px 0;
}

.all-players-page .page-header {
  text-align: center;
  margin-bottom: 24px;
}

.all-players-page .page-header h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.all-players-page .subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

/* Filters Bar */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.filters-bar .search-box {
  flex: 1;
  min-width: 200px;
}

.filters-bar .search-box input {
  width: 100%;
  padding: 10px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
}

.filters-bar .search-box input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.filters-bar .filter-group {
  min-width: 140px;
}

.filters-bar select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
}

.filters-bar select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* Summary Cards */
.all-players-summary {
  margin-bottom: 24px;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.summary-card .summary-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 4px;
}

.summary-card .summary-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Players Table */
.all-players-table-wrapper {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.all-players-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.all-players-table thead {
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.all-players-table th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.all-players-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.all-players-table th.sortable:hover {
  color: var(--accent-blue);
}

.all-players-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

.all-players-table tbody tr:hover {
  background: var(--bg-hover);
}

.all-players-table td {
  padding: 10px;
  vertical-align: middle;
}

.all-players-table .player-row {
  cursor: pointer;
}

.all-players-table .player-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.all-players-table .player-rank {
  font-size: 12px;
  color: var(--text-muted);
  width: 24px;
  text-align: center;
}

.all-players-table .player-name-cell .name {
  font-weight: 500;
}

.all-players-table .team-abbrev {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}

.all-players-table .position-cell {
  font-weight: 500;
  color: var(--text-secondary);
}

.all-players-table .stat-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.all-players-table .stat-cell.goals {
  color: var(--accent-green);
  font-weight: 600;
}

.all-players-table .stat-cell.points {
  color: var(--accent-blue);
  font-weight: 600;
}

.all-players-table .stat-cell.proj {
  color: var(--accent-purple);
}

/* No Players Message */
.no-players-message {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.no-players-message .icon {
  font-size: 3rem;
  margin-bottom: 16px;
  display: block;
}

.no-players-message h3 {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.showing-limited {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: 13px;
  border-top: 1px solid var(--border-color);
}

/* Responsive */
@media (max-width: 768px) {
  .filters-bar {
    flex-direction: column;
  }

  .filters-bar .search-box,
  .filters-bar .filter-group {
    width: 100%;
  }

  .all-players-table {
    font-size: 12px;
  }

  .all-players-table th,
  .all-players-table td {
    padding: 8px 6px;
  }

  .all-players-table .player-name-cell {
    min-width: 150px;
  }
}

/* ==========================================================================
   Projections Page - Sortable Table View
   ========================================================================== */

.projections-page {
  padding: 20px 0;
}

.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header-row h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
}

.player-count {
  color: var(--text-muted);
  font-size: 14px;
}

/* Projections Controls */
.projections-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.filter-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-select {
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  min-width: 120px;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent-blue);
}

.view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.view-btn {
  padding: 8px 16px;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
}

.view-btn:hover {
  color: var(--text-primary);
}

.view-btn.active {
  background: var(--accent-blue);
  color: white;
}

/* Projections Table */
.projections-table-wrapper {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.projections-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.projections-table thead {
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.projections-table th {
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.projections-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.projections-table th.sortable:hover {
  color: var(--accent-blue);
  background: rgba(96, 165, 250, 0.1);
}

.projections-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}

.projections-table tbody tr:hover {
  background: var(--bg-hover);
}

.projection-row {
  transition: var(--transition);
}

.player-name-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

.player-name-link:hover {
  color: var(--accent-blue);
  text-decoration: underline;
}

.projections-table td {
  padding: 12px 10px;
  vertical-align: middle;
}

/* Column styling - let browser auto-size */
.col-rank {
  text-align: center;
  color: var(--text-muted);
}

.col-player {
  text-align: left;
}

.player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-cell .player-name,
.player-name-link {
  font-weight: 500;
}

.col-team {
  font-size: 12px;
  color: var(--text-muted);
}

.col-score {
  text-align: center;
}

.score-value {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-blue);
}

.col-ags,
.col-ghr,
.col-pts,
.col-gpg {
  text-align: center;
}

.col-rest {
  text-align: center;
}

.rest-indicator {
  color: var(--accent-yellow);
}

.col-b2b {
  text-align: center;
}

.b2b-yes {
  color: var(--accent-orange);
  font-size: 12px;
}

.col-streak {
  text-align: center;
}

.streak-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}

.streak-value.positive {
  background: rgba(59, 130, 246, 0.2);
  color: var(--accent-blue);
}

.streak-value.negative {
  background: rgba(239, 68, 68, 0.2);
  color: var(--accent-red);
}

.col-tier {
  text-align: center;
}

.col-heat {
  text-align: center;
}


.tier-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tier-badge.ultra-elite {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white;
}

.tier-badge.elite {
  background: var(--accent-purple);
  color: white;
}

.tier-badge.moderate {
  background: var(--accent-blue);
  color: white;
}

.tier-badge.low {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

/* Heat Badges - Portal Style */
.heat-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.heat-badge.supernova {
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.3) 0%, rgba(255, 100, 0, 0.3) 100%);
  color: #ff4444;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
  animation: heatPulse 1.5s infinite;
}

.heat-badge.nuclear {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 50, 50, 0.3) 100%);
  color: #ff6b6b;
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.3);
}

.heat-badge.hot {
  background: linear-gradient(135deg, rgba(255, 159, 67, 0.25) 0%, rgba(255, 100, 50, 0.25) 100%);
  color: var(--warning-orange);
}

.heat-badge.warming {
  background: rgba(255, 215, 0, 0.2);
  color: var(--primary-gold);
}

.heat-badge.cold {
  background: rgba(96, 165, 250, 0.2);
  color: var(--primary-blue);
}

.heat-badge.frozen {
  background: linear-gradient(135deg, rgba(100, 149, 237, 0.25) 0%, rgba(147, 197, 253, 0.25) 100%);
  color: #93c5fd;
  box-shadow: 0 0 8px rgba(100, 149, 237, 0.2);
}

@keyframes heatPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Cards View */
.projections-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.projection-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: var(--transition);
  display: block;
}

.projection-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-2px);
}

.projection-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.projection-card-info {
  flex: 1;
}

.projection-card-name {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}

.projection-card-team {
  font-size: 12px;
  color: var(--text-muted);
}

.projection-card-score {
  text-align: center;
}

.projection-card-score .score-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-blue);
  line-height: 1;
}

.projection-card-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.projection-card-matchup {
  display: block;
  font-size: 12px;
  color: var(--accent-blue);
  font-weight: 500;
  margin-top: 2px;
}

.projection-card-score .score-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.projection-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 0;
  margin: 12px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.card-stat {
  text-align: center;
}

.card-stat-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.card-stat-value.streak-hot {
  color: var(--accent-orange);
}

.card-stat-value.streak-cold {
  color: var(--accent-blue);
}

.card-stat-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 2px;
}

.projection-card-footer {
  margin-top: 8px;
}

.b2b-badge {
  background: var(--accent-orange);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

/* ============================================
   Detailed Projection Card (Vanilla-JS Format)
   ============================================ */

.projection-card-detailed {
  padding: 12px;
  min-width: 300px;
}

.projection-card-detailed .projection-card-header {
  margin-bottom: 8px;
}

/* Main Stats Row: SCORE, PF RATING, AGS */
.projection-card-main-stats {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  margin: 8px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.main-stat {
  text-align: center;
  flex: 1;
}

.main-stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.main-stat.ags .main-stat-value {
  color: var(--accent-green);
}

.main-stat-label {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Status Badges */
.projection-card-detailed .projection-card-badges {
  justify-content: center;
  margin: 8px 0;
}

.status-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.not-playing {
  background: #ef4444;
  color: #fff;
}

.status-badge.cold {
  background: #3b82f6;
  color: #fff;
}

.status-badge.hot {
  background: #f59e0b;
  color: #000;
}

.status-badge.b2b {
  background: var(--accent-orange);
  color: #000;
}

/* Data Rows */
.projection-card-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.projection-card-row:last-of-type {
  border-bottom: none;
}

.row-label {
  color: var(--text-muted);
  font-weight: 500;
  min-width: 50px;
}

.row-value {
  color: var(--text-primary);
  flex: 1;
}

.row-divider {
  color: var(--text-muted);
  margin: 0 8px;
}

/* Matchup Footer */
.projection-card-detailed .projection-card-matchup {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  font-size: 11px;
}

.matchup-opponent {
  color: var(--accent-blue);
  font-weight: 600;
}

.matchup-divider {
  color: var(--text-muted);
}

.matchup-defense {
  color: var(--text-primary);
}

.matchup-goalie {
  color: var(--text-muted);
}

/* Grid Layout Adjustment for Detailed Cards */
.projections-cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Row Icons */
.row-icon {
  font-size: 14px;
  margin-right: 6px;
  opacity: 0.9;
}

.row-icon.green { color: #22c55e; }
.row-icon.red { color: #ef4444; }

/* Row Value Full Width (for L5 summary) */
.row-value-full {
  color: var(--text-primary);
  flex: 1;
  text-align: center;
  background: rgba(51, 65, 85, 0.5);
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
}

.l5-summary {
  justify-content: center;
  padding: 6px 0;
}

/* Heat Badge (inline with team name) */
.heat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 6px;
  text-transform: uppercase;
}

.heat-badge.cold {
  background: #22c55e;
  color: #000;
}

.heat-badge.hot {
  background: #f97316;
  color: #000;
}

/* Status Badge Variations with Icons */
.status-badge.not-playing {
  background: #ef4444;
  color: #fff;
}

.status-badge.b2b-outline {
  background: transparent;
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

.status-badge.cold-icon {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid #3b82f6;
  color: #3b82f6;
}

.status-badge.hot-icon {
  background: rgba(249, 115, 22, 0.2);
  border: 1px solid #f97316;
  color: #f97316;
}

.status-badge.b2b-icon {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
  color: #f59e0b;
}

/* Main Stat Value Colors */
.main-stat-value.green {
  color: #22c55e;
}

.main-stat-value.yellow {
  color: #f59e0b;
}

/* Matchup Icons */
.matchup-icon {
  font-size: 12px;
  margin-right: 2px;
}

/* Inline color classes for values */
span.green { color: #22c55e; }
span.red { color: #ef4444; }
span.yellow { color: #f59e0b; }

/* ============================================
   Player Card Tier Styles - Portal Match
   ============================================ */

.projection-card.ultra-elite,
.player-card.ultra-elite {
  border: 2px solid var(--primary-gold);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.35), 0 0 50px rgba(255, 215, 0, 0.15);
  background: linear-gradient(145deg, rgba(255, 215, 0, 0.08) 0%, var(--card-bg) 100%);
  position: relative;
  animation: ultraElitePulse 3s ease-in-out infinite;
}

.projection-card.ultra-elite::before,
.player-card.ultra-elite::before {
  content: '⭐ TOP PICK';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary-gold) 0%, #ff9800 100%);
  color: #000;
  padding: 4px 16px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
  z-index: 1;
}

@keyframes ultraElitePulse {
  0%, 100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.35), 0 0 50px rgba(255, 215, 0, 0.15); }
  50% { box-shadow: 0 0 35px rgba(255, 215, 0, 0.5), 0 0 70px rgba(255, 215, 0, 0.25); }
}

.projection-card.elite,
.player-card.elite {
  border: 2px solid var(--success-green);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.1);
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.06) 0%, var(--card-bg) 100%);
  position: relative;
}

.projection-card.elite::before,
.player-card.elite::before {
  content: '🔥 ELITE';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%);
  color: #fff;
  padding: 4px 14px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  z-index: 1;
}

.projection-card.strong,
.player-card.strong {
  border-color: var(--primary-purple);
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.2);
}

.projection-card.moderate,
.player-card.moderate {
  border-color: var(--primary-blue);
}

/* Player card styles for grids */
.player-card {
  background: linear-gradient(135deg, var(--card-bg) 0%, var(--dark-bg-secondary) 100%);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: visible;
  margin-top: 15px; /* Space for tier labels */
}

.player-card:hover {
  border-color: var(--primary-purple);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.player-main {
  display: flex;
  gap: 14px;
  align-items: center;
}

.player-photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--success-green);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.player-photo.gold {
  border-color: var(--primary-gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.player-initials {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-blue) 100%);
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
  border: 3px solid var(--border-color);
}

.player-info .player-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.player-info .player-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
  .projections-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-row {
    flex-direction: column;
  }

  .filter-select {
    width: 100%;
  }

  .view-toggle {
    justify-content: center;
  }

  .projections-table {
    font-size: 12px;
  }

  .projections-table th,
  .projections-table td {
    padding: 8px 4px;
  }
}

/* ==========================================================================
   View Mode Toggle (Today's Games vs All Players)
   ========================================================================== */

.view-mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

.view-mode-toggle .mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.view-mode-toggle .mode-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.view-mode-toggle .mode-btn.active {
  background: var(--accent-blue);
  color: white;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
}

.view-mode-toggle .mode-icon {
  font-size: 16px;
}

.view-mode-toggle .mode-label {
  display: inline;
}

/* Context Info Badges */
.context-info {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.context-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
}

.context-badge .context-icon {
  font-size: 14px;
}

.context-badge .context-text {
  font-weight: 500;
}

.today-context .context-badge:first-child {
  border-color: var(--accent-blue);
  background: rgba(96, 165, 250, 0.1);
}

.league-context .context-badge:first-child {
  border-color: var(--accent-gold);
  background: rgba(251, 191, 36, 0.1);
}

/* Page Header with View Toggle */
.page-header-with-toggle {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.page-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.page-header-title {
  flex: 1;
}

.page-header-title h1 {
  margin: 0 0 4px 0;
  font-size: 28px;
}

.page-header-title .subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.page-header-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

/* Responsive for View Mode Toggle */
@media (max-width: 768px) {
  .view-mode-toggle {
    width: 100%;
  }

  .view-mode-toggle .mode-btn {
    flex: 1;
    justify-content: center;
    padding: 12px 8px;
  }

  .view-mode-toggle .mode-label {
    display: none;
  }

  .view-mode-toggle .mode-btn.active .mode-label {
    display: inline;
  }

  .page-header-top {
    flex-direction: column;
  }

  .page-header-controls {
    width: 100%;
    justify-content: space-between;
  }

  .context-info {
    width: 100%;
    justify-content: center;
  }
}

/* ================================
   League Overview (Home page league view)
   ================================ */
.league-overview {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.league-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.league-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.league-section .section-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px 0;
}

.top-players-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.league-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition);
}

.league-player-row:hover {
  background: var(--bg-hover);
  transform: translateX(4px);
}

.league-player-row .rank {
  width: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.league-player-row .player-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.league-player-row .player-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.league-player-row .player-team {
  font-size: 12px;
  color: var(--text-muted);
}

.league-player-row .stat-highlight {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-primary);
  min-width: 80px;
  text-align: right;
}

/* League View Controls (Cards/List toggle) */
.league-view-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
}

.league-view-controls .player-count {
  font-size: 13px;
  color: var(--text-muted);
}

.league-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
}

@media (max-width: 768px) {
  .league-view-controls {
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
  }

  .league-content {
    padding: 12px;
  }
}

.cta-section {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-purple) 100%);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  transition: var(--transition);
}

.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.3);
}

.cta-btn.secondary {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.cta-btn.secondary:hover {
  background: var(--bg-hover);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .league-section {
    padding: 16px;
  }

  .league-player-row {
    padding: 10px 12px;
  }

  .cta-section {
    flex-direction: column;
  }

  .cta-btn {
    width: 100%;
  }
}

/* ==========================================================================
   League Teams View (Games Page - League Mode)
   ========================================================================== */

.league-teams-view {
  margin-top: 20px;
}

.teams-summary-bar {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.teams-summary-bar .summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 24px;
}

.teams-summary-bar .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.teams-summary-bar .stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.teams-summary-bar .summary-stat.highlight .stat-value {
  color: var(--accent-orange);
}

.teams-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.team-card-league {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: var(--transition);
  border-left: 3px solid var(--team-color, var(--accent-blue));
}

.team-card-league:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: var(--team-color, var(--accent-blue));
}

.team-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.team-card-info {
  flex: 1;
}

.team-card-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.team-card-abbrev {
  font-size: 12px;
  color: var(--text-muted);
}

.team-hot-badge {
  font-size: 20px;
}

.team-card-stats {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}

.team-stat {
  text-align: center;
}

.team-stat-value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.team-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.team-card-top-scorer {
  font-size: 13px;
  color: var(--text-secondary);
}

.team-card-top-scorer .top-label {
  color: var(--text-muted);
}

.top-scorer-link {
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 500;
}

.top-scorer-link:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .teams-summary-bar {
    flex-direction: row;
    justify-content: space-around;
  }

  .teams-summary-bar .summary-stat {
    padding: 8px 12px;
  }

  .teams-summary-bar .stat-value {
    font-size: 22px;
  }

  .teams-grid-view {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Authentication & User Section
   ========================================================================== */

/* User Section in Header */
.user-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-login {
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 14px;
  transition: var(--transition);
}

.btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

/* User Menu */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}

.user-menu-trigger:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: white;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tier-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.tier-badge.premium {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
}

.tier-badge.admin {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

/* User Dropdown */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 1001;
}

.user-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
}

.dropdown-email {
  display: block;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-tier {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: left;
  transition: var(--transition);
  background: none;
  border: none;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.logout-btn {
  color: var(--accent-red);
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Nav Lock Icon */
.nav-lock {
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.6;
}

/* ==========================================================================
   Login Page
   ========================================================================== */

.login-page {
  min-height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.login-container {
  width: 100%;
  max-width: 420px;
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.login-header h1 {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.login-subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

/* Auth Forms */
.login-forms {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.auth-form h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
}

.form-description {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 15px;
  transition: var(--transition);
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.form-group input::placeholder {
  color: var(--text-muted);
}

.form-error {
  display: none;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  color: var(--accent-red);
  font-size: 13px;
  margin-bottom: 16px;
}

.form-success {
  display: none;
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  color: var(--accent-green);
  font-size: 13px;
  margin-bottom: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  color: white;
  border: none;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(96, 165, 250, 0.3);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-block {
  width: 100%;
}

.form-links {
  text-align: center;
  margin-top: 16px;
}

.form-links a {
  color: var(--accent-blue);
  font-size: 13px;
  transition: var(--transition);
}

.form-links a:hover {
  text-decoration: underline;
}

/* Auth Divider */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 24px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.auth-divider span {
  padding: 0 16px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Social Login */
.social-login {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 24px;
  background: var(--card-bg);
  color: #333;
  border: 1px solid #ddd;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  transition: var(--transition);
}

.btn-google:hover {
  background: #f5f5f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-google svg {
  flex-shrink: 0;
}

/* Auth Toggle */
.auth-toggle {
  text-align: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.auth-toggle span {
  color: var(--text-muted);
  font-size: 14px;
}

.auth-toggle a {
  color: var(--accent-blue);
  font-weight: 600;
  margin-left: 8px;
}

.auth-toggle a:hover {
  text-decoration: underline;
}

/* Login Features */
.login-features {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.login-features h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.login-features ul {
  list-style: none;
}

.login-features li {
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.login-features li::before {
  content: none;
}

/* ==========================================================================
   Responsive Auth Styles
   ========================================================================== */

@media (max-width: 768px) {
  .user-name {
    display: none;
  }

  .user-menu-trigger {
    padding: 6px;
  }

  .login-container {
    max-width: 100%;
  }

  .login-forms {
    padding: 24px 20px;
  }

  .login-features {
    display: none;
  }
}

@media (max-width: 480px) {
  .login-header h1 {
    font-size: 24px;
  }

  .login-logo {
    font-size: 40px;
  }

  .btn-login {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* ==========================================================================
   Defensive Matchups Page
   ========================================================================== */

.matchups-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 100px;
}

.matchups-page .page-header {
  text-align: center;
  margin-bottom: 32px;
}

.matchups-page .page-header h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.matchups-page .page-header .subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

/* Matchups Summary Cards */
.matchups-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}

.summary-card .summary-value {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.summary-card .summary-label {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.summary-card.favorable {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.summary-card.favorable .summary-value {
  color: #4ade80;
}

.summary-card.tough {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.summary-card.tough .summary-value {
  color: #f87171;
}

/* Game Matchup Cards */
.matchups-games {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.game-matchup-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0; /* Reset .card padding - children have their own */
}

.game-matchup-card::before {
  display: none; /* Remove .card gradient border effect */
}

.game-matchup-card:hover {
  transform: none; /* Remove .card hover lift effect */
}

.game-matchup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-color);
}

.game-matchup-header .team-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-matchup-header .team-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.game-matchup-header .vs-badge {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

.game-matchup-header .team-info {
  flex-direction: column;
  text-align: center;
  gap: 8px;
}

.game-matchup-header .phase-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.game-matchup-header .phase-badge.due {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.game-matchup-header .phase-badge.initial_breakout,
.game-matchup-header .phase-badge.breakout,
.game-matchup-header .phase-badge.post_breakout {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.game-matchup-header .phase-badge.cooldown {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.matchup-center-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.matchup-center-stats .ou-badge {
  font-size: 12px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Matchup Projections Row */
.matchup-projections-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-color);
}

.matchup-projections-row .proj-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.matchup-projections-row .proj-stat.ou {
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 16px;
  border-radius: 8px;
}

.matchup-projections-row .proj-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.matchup-projections-row .proj-value.positive {
  color: #10b981;
}

.matchup-projections-row .proj-value.negative {
  color: #ef4444;
}

.matchup-projections-row .proj-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Matchup Columns */
.matchup-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-color);
}

.matchup-column {
  background: var(--bg-card);
  padding: 20px;
}

.matchup-column h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.matchup-section {
  margin-bottom: 20px;
}

.matchup-section:last-child {
  margin-bottom: 0;
}

.matchup-section h5 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid;
}

.matchup-section.favorable h5 {
  color: #4ade80;
  border-color: #4ade80;
}

.matchup-section.tough h5 {
  color: #f87171;
  border-color: #f87171;
}

.matchup-section.neutral h5 {
  color: #94a3b8;
  border-color: #475569;
}

/* Matchup Players - Card Grid Layout */
.matchup-players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.matchup-player-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.matchup-player-card:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.matchup-player-card.favorable {
  border-left: 3px solid #4ade80;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.02) 100%);
}

.matchup-player-card.tough {
  border-left: 3px solid #f87171;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
}

.matchup-player-card.neutral {
  border-left: 3px solid #475569;
  background: rgba(255, 255, 255, 0.02);
}

.player-card-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.player-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-card-pos {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  flex-shrink: 0;
}

.player-card-stats {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.stat-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
}

.stat-badge.ags {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
}

.stat-badge.ags.high {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.stat-badge.ags.medium {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.stat-badge.ags.low {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.stat-badge.rank {
  background: rgba(148, 163, 184, 0.1);
  color: var(--text-secondary);
}

.stat-badge.rank.favorable {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.stat-badge.rank.tough {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* Clickable player cards */
.matchup-player-card.clickable {
  flex-wrap: wrap;
  gap: 6px;
}

.matchup-player-card .player-card-name {
  text-decoration: none;
  transition: color 0.2s ease;
}

.matchup-player-card .player-card-name:hover {
  color: var(--primary-blue);
}

/* Matchup info row showing opponent details */
.player-card-matchup-info {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: var(--text-muted);
  width: 100%;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 2px;
}

.matchup-vs {
  font-weight: 500;
}

.matchup-gpg {
  color: var(--text-dim);
}

.matchup-player-card.favorable .matchup-gpg {
  color: #4ade80;
}

.matchup-player-card.tough .matchup-gpg {
  color: #f87171;
}

/* ===========================================
   Compact Matchup Card Design (Games-style)
   =========================================== */

/* Compact header with logos */
.game-teams-compact {
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-teams-compact .vs-at {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.game-matchup-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.matchup-names {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.matchup-ou {
  font-size: 12px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* Team row with phases */
.matchup-team-row {
  display: flex;
  justify-content: space-around;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-color);
}

.matchup-team-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.matchup-team-info .team-abbrev {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.phase-badge-mini {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.phase-badge-mini.due {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.phase-badge-mini.initial_breakout,
.phase-badge-mini.breakout,
.phase-badge-mini.post_breakout {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.phase-badge-mini.cooldown {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* Compact stats row */
.matchup-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border-color);
}

.matchup-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.matchup-stat .stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.matchup-stat .stat-val.positive {
  color: #10b981;
}

.matchup-stat .stat-val.negative {
  color: #ef4444;
}

.matchup-stat .stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.matchup-stat.ou-center {
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 16px;
  border-radius: 8px;
}

/* Matchup chips section */
.matchup-chips-section {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
}

.matchup-chips-section:last-child {
  border-bottom: none;
}

.matchup-chips-section .chips-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.matchup-chips-section.favorable .chips-label {
  color: #4ade80;
}

.matchup-chips-section.tough .chips-label {
  color: #f87171;
}

.matchup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Player chips - compact like Top Targets */
.matchup-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.matchup-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.matchup-chip.favorable {
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.1);
}

.matchup-chip.favorable:hover {
  background: rgba(74, 222, 128, 0.2);
}

.matchup-chip.tough {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.1);
}

.matchup-chip.tough:hover {
  background: rgba(248, 113, 113, 0.2);
}

.matchup-chip .chip-name {
  font-weight: 600;
}

.matchup-chip .chip-ags {
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 10px;
}

.matchup-chip.favorable .chip-ags {
  color: #4ade80;
}

.matchup-chip.tough .chip-ags {
  color: #f87171;
}

.no-matchups-msg {
  padding: 16px 20px;
  color: var(--text-muted);
  text-align: center;
  font-size: 13px;
}

/* Matchup Detail Modal */
.matchup-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.matchup-modal.hidden {
  display: none;
}

.matchup-modal-content {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  padding: 24px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

.matchup-modal .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.matchup-modal .modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.matchup-modal .modal-header {
  margin-bottom: 20px;
  padding-right: 40px;
}

.matchup-modal .modal-header h2 {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.matchup-modal .modal-subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

/* Modal matchup summary */
.modal-matchup-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-matchup-summary.favorable {
  border-color: rgba(34, 197, 94, 0.3);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.02) 100%);
}

.modal-matchup-summary.tough {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.02) 100%);
}

.modal-matchup-summary .summary-stat {
  text-align: center;
}

.modal-matchup-summary .stat-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.modal-matchup-summary .stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-matchup-summary.favorable .stat-value {
  color: #4ade80;
}

.modal-matchup-summary.tough .stat-value {
  color: #f87171;
}

/* Modal rankings table */
.modal-rankings-table h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.modal-rankings-table .table-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.rankings-table.modal-table {
  max-height: 300px;
  overflow-y: auto;
}

.rankings-row.highlighted {
  background: rgba(96, 165, 250, 0.15) !important;
  border: 1px solid rgba(96, 165, 250, 0.4);
  font-weight: 600;
}

.rankings-row.highlighted.favorable {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.5);
}

.rankings-row.highlighted.tough {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5);
}

.no-matchups {
  color: var(--text-secondary);
  font-size: 14px;
  font-style: italic;
  padding: 12px;
  text-align: center;
}

/* Defense Rankings Overview */
.defense-rankings-overview {
  margin-bottom: 32px;
  padding: 24px; /* Override .card padding */
}

.defense-rankings-overview::before {
  display: none;
}

.defense-rankings-overview:hover {
  transform: none;
}

.defense-rankings-overview h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.rankings-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.rankings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.rankings-tab {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.rankings-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.rankings-tab.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
}

.rankings-panel {
  display: none;
}

.rankings-panel.active {
  display: block;
}

.rankings-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rankings-header {
  display: grid;
  grid-template-columns: 60px 1fr 100px 60px;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
}

.rankings-row {
  display: grid;
  grid-template-columns: 60px 1fr 100px 60px;
  padding: 12px 16px;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
}

.rankings-row.favorable {
  border-left-color: #4ade80;
  background: rgba(34, 197, 94, 0.05);
}

.rankings-row.tough {
  border-left-color: #f87171;
  background: rgba(239, 68, 68, 0.05);
}

.rankings-row .rank {
  font-weight: 700;
  color: var(--text-primary);
}

.rankings-row .team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.rankings-row .goals {
  color: var(--text-secondary);
}

.rankings-row .rating {
  font-size: 1.25rem;
  text-align: center;
}

/* Matchups Legend */
.matchups-legend {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px; /* Override .card padding */
}

.matchups-legend::before {
  display: none;
}

.matchups-legend:hover {
  transform: none;
}

.matchups-legend h3 {
  font-size: 1.125rem;
  margin-bottom: 20px;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.legend-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.matchup-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  width: fit-content;
}

.matchup-badge.favorable {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.matchup-badge.tough {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.matchup-badge.neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.legend-text strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.legend-text p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

/* Matchups Responsive */
@media (max-width: 1024px) {
  .matchups-summary {
    grid-template-columns: repeat(3, 1fr);
  }

  .legend-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .matchup-columns {
    grid-template-columns: 1fr;
  }

  .matchups-summary {
    grid-template-columns: 1fr;
  }

  .game-matchup-header {
    flex-direction: column;
    gap: 12px;
  }

  .rankings-header,
  .rankings-row {
    grid-template-columns: 50px 1fr 80px 50px;
    font-size: 13px;
    padding: 10px 12px;
  }
}

/* ===========================================
   Matchup Game Card (Full Card Style)
   =========================================== */
.matchup-game-card {
  margin-bottom: 24px;
}

.matchup-game-card .game-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  background: linear-gradient(135deg, rgba(var(--away-color-rgb, 102, 126, 234), 0.1) 0%, rgba(var(--home-color-rgb, 118, 75, 162), 0.1) 100%);
  border-bottom: 1px solid var(--border-color);
}

.matchup-game-card .team-matchup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.matchup-game-card .team-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.matchup-game-card .team-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.matchup-game-card .team-record {
  font-size: 12px;
  color: var(--text-muted);
}

.matchup-game-card .vs-badge {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 8px;
}

.matchup-game-card .game-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.matchup-game-card .game-time-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Matchup Analysis Section */
.matchup-analysis {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.02);
}

.matchup-section {
  margin-bottom: 16px;
}

.matchup-section:last-child {
  margin-bottom: 0;
}

.matchup-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.matchup-section-icon {
  font-size: 16px;
}

.matchup-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.matchup-section.favorable .matchup-section-title {
  color: #4ade80;
}

.matchup-section.tough .matchup-section-title {
  color: #f87171;
}

.matchup-section-count {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.matchup-section.favorable .matchup-section-count {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.matchup-section.tough .matchup-section-count {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.matchup-player-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Matchup Pills (extends target-pill) */
.matchup-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 13px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s ease;
}

.matchup-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.matchup-pill.favorable {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.1);
}

.matchup-pill.favorable:hover {
  background: rgba(74, 222, 128, 0.2);
  border-color: rgba(74, 222, 128, 0.6);
}

.matchup-pill.tough {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
}

.matchup-pill.tough:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.6);
}

.matchup-pill .target-name {
  font-weight: 600;
}

.matchup-pill .target-team {
  font-size: 10px;
  color: var(--text-muted);
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.matchup-pill .target-ags {
  font-size: 11px;
  font-weight: 600;
}

.matchup-pill.favorable .target-ags {
  color: #4ade80;
}

.matchup-pill.tough .target-ags {
  color: #f87171;
}

.no-matchups-msg {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Responsive for matchup game cards */
@media (max-width: 768px) {
  .matchup-game-card .game-header {
    flex-direction: column;
    gap: 16px;
  }

  .matchup-game-card .team-matchup {
    justify-content: center;
  }

  .matchup-game-card .game-time {
    align-items: center;
  }

  .matchup-player-chips {
    justify-content: center;
  }
}

/* ============================================
   Defense Allowed Modal
   ============================================ */

.defense-allowed-modal {
  width: 100%;
  max-width: 900px;
}

.defense-allowed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.defense-allowed-team {
  display: flex;
  align-items: center;
  gap: 12px;
}

.defense-allowed-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.defense-allowed-year {
  font-size: 1.2rem;
  color: var(--primary-blue);
  font-weight: 600;
}

.defense-allowed-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.defense-allowed-controls .control-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.defense-allowed-controls .control-group label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.defense-select {
  padding: 8px 32px 8px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.defense-select:hover {
  border-color: var(--primary-blue);
}

.defense-select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

/* Toggle Switch */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.toggle-switch span.active {
  color: var(--text-primary);
  font-weight: 600;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: 0.3s;
  border-radius: 24px;
}

.switch .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-muted);
  transition: 0.3s;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
  background-color: white;
}

/* Defense Sections */
.defense-allowed-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.defense-section {
  background: var(--dark-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.defense-section-header {
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border-color);
}

.defense-section-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1px;
  background: var(--border-color);
}

/* Individual Stat Cell */
.defense-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  background: var(--card-bg);
  text-align: center;
  min-height: 90px;
}

.defense-stat-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.defense-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.defense-stat-rank {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

/* Rank Color Coding */
.defense-stat.rank-vulnerable {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.15) 0%, var(--card-bg) 100%);
}

.defense-stat.rank-vulnerable .defense-stat-rank {
  background: var(--success-green);
  color: white;
}

.defense-stat.rank-neutral {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, var(--card-bg) 100%);
}

.defense-stat.rank-neutral .defense-stat-rank {
  background: var(--accent-yellow);
  color: #1a1a2e;
}

.defense-stat.rank-tough {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.15) 0%, var(--card-bg) 100%);
}

.defense-stat.rank-tough .defense-stat-rank {
  background: var(--danger-red);
  color: white;
}

/* Defense Allowed Legend */
.defense-allowed-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 16px;
  margin-top: 20px;
  background: var(--dark-bg-secondary);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.defense-allowed-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.defense-allowed-legend .legend-item.rank-vulnerable {
  color: var(--success-green);
}

.defense-allowed-legend .legend-item.rank-neutral {
  color: var(--accent-yellow);
}

.defense-allowed-legend .legend-item.rank-tough {
  color: var(--danger-red);
}

/* ============================================
   Modal Tabs Navigation
   ============================================ */

.defense-modal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--dark-bg-secondary);
  padding: 4px;
  border-radius: var(--radius-md);
}

.defense-modal-tab {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.defense-modal-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.defense-modal-tab.active {
  background: var(--primary-blue);
  color: white;
}

.defense-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

/* ============================================
   Game History Tab Styles
   ============================================ */

.history-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.history-summary-stat {
  background: var(--dark-bg-secondary);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border-color);
}

.history-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.history-stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* L5/L10/L20 Over/Under Cards */
.history-ou-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.history-ou-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
}

.ou-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-align: center;
}

.ou-bars {
  display: flex;
  height: 28px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--dark-bg-secondary);
}

.ou-over {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success-green);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 10%;
  transition: width 0.3s ease;
}

.ou-under {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--danger-red);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 10%;
  transition: width 0.3s ease;
}

/* Game History Table */
.history-table-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.history-table thead {
  position: sticky;
  top: 0;
  background: var(--dark-bg-secondary);
  z-index: 10;
}

.history-table th {
  padding: 12px 10px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
}

.history-table th:nth-child(n+4) {
  text-align: center;
}

.history-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.history-table td:nth-child(n+4) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.history-table tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.history-table tr.scored {
  background: rgba(34, 197, 94, 0.08);
}

.history-table tr.scored:hover {
  background: rgba(34, 197, 94, 0.12);
}

.history-table .date {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.history-table .player {
  font-weight: 500;
  color: var(--text-primary);
}

.history-table .team {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.history-table .goals.highlight {
  color: var(--success-green);
  font-weight: 700;
}

.history-table .no-games {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 20px;
  font-style: italic;
}

.show-more-note {
  text-align: center;
  padding: 12px;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0;
}

/* Responsive Game History */
@media (max-width: 768px) {
  .history-summary-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .history-ou-summary {
    grid-template-columns: 1fr;
  }

  .history-table {
    font-size: 0.75rem;
  }

  .history-table th,
  .history-table td {
    padding: 8px 6px;
  }

  .defense-modal-tabs {
    flex-direction: column;
  }
}

/* Team Logo Click Indicator */
.matchup-game-card .team-info {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.matchup-game-card .team-info:hover {
  transform: scale(1.05);
}

.matchup-game-card .team-info:hover .team-name {
  color: var(--primary-blue);
}

/* View Defense Button */
.view-defense-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin-top: 4px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary-blue);
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-defense-btn:hover {
  background: rgba(96, 165, 250, 0.2);
  border-color: var(--primary-blue);
}

/* Responsive */
@media (max-width: 768px) {
  .defense-allowed-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .defense-allowed-controls {
    width: 100%;
    justify-content: space-between;
  }

  .defense-section-stats {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }

  .defense-stat {
    padding: 12px 6px;
    min-height: 80px;
  }

  .defense-stat-value {
    font-size: 1.2rem;
  }

  .defense-stat-label {
    font-size: 0.6rem;
  }

  .defense-allowed-legend {
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .defense-section-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .defense-allowed-title {
    font-size: 1.2rem;
  }
}

/* Defense Allowed Loading State */
.defense-allowed-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

.defense-allowed-loading p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--card-border);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   Clean Game Card Design (Matchups Page)
   ============================================ */

.game-card-clean {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
}

.game-card-clean:hover {
  border-color: var(--primary-purple);
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
}

/* Header: Teams + Time */
.gc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-bottom: 1px solid var(--card-border);
}

.gc-teams {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gc-team {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gc-team:hover {
  transform: scale(1.1);
}

.gc-team .team-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.gc-at {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 20px;
}

.gc-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.gc-time {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.gc-pace {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
}

.gc-pace.high {
  background: rgba(255, 107, 107, 0.2);
  color: var(--danger-red);
}

.gc-pace.low {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-green);
}

/* Team Stats Row */
.gc-team-stats {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--card-border);
}

.gc-team-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gc-team-stat:last-child {
  flex-direction: row-reverse;
}

.gc-xg {
  font-size: 1.1rem;
  font-weight: 700;
}

.gc-xg.negative {
  color: var(--danger-red);
}

.gc-xg.positive {
  color: var(--success-green);
}

.gc-phase {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 10px;
  text-transform: uppercase;
}

.gc-phase.due {
  background: rgba(251, 191, 36, 0.2);
  color: var(--warning-orange);
}

.gc-phase.breakout,
.gc-phase.hot {
  background: rgba(255, 107, 107, 0.2);
  color: var(--danger-red);
}

.gc-phase.cooldown {
  background: rgba(96, 165, 250, 0.2);
  color: var(--primary-blue);
}

/* Goalie Row */
.gc-goalies {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(30, 41, 59, 0.3);
  border-bottom: 1px solid var(--card-border);
}

.gc-goalie {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gc-goalie-status {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 50%;
  background: rgba(255, 159, 67, 0.2);
  color: var(--warning-orange);
}

.gc-goalie-status.confirmed {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-green);
}

.gc-goalie-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.gc-goalie-vs {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 2px 8px;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
}

/* Betting Edge Section */
.gc-betting {
  padding: 12px 20px;
  border-bottom: 1px solid var(--card-border);
}

.gc-betting.has-edge {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(102, 126, 234, 0.08) 100%);
}

.gc-bet-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gc-ou {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.gc-edge-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 3px 10px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 8px;
}

.gc-betting.has-edge .gc-edge-label {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-green);
}

.gc-confidence {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-blue));
  color: white;
}

.gc-insight {
  margin-top: 8px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-secondary);
}

.gc-insight.due {
  color: var(--warning-orange);
}

.gc-insight.cooldown {
  color: var(--primary-blue);
}

.gc-edge-pills {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.gc-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 15px;
  background: rgba(102, 126, 234, 0.15);
  color: var(--primary-blue);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.gc-pill.positive {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success-green);
  border-color: rgba(16, 185, 129, 0.3);
}

.gc-pill.negative {
  background: rgba(255, 107, 107, 0.15);
  color: var(--danger-red);
  border-color: rgba(255, 107, 107, 0.3);
}

/* Projections Row */
.gc-projections {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-border);
}

.gc-proj {
  text-align: center;
  flex: 1;
}

.gc-proj.center {
  border-left: 1px solid var(--card-border);
  border-right: 1px solid var(--card-border);
}

.gc-proj-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.gc-proj-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Top Targets */
.gc-targets {
  padding: 14px 20px;
}

.gc-targets-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.gc-target-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gc-target-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.gc-target-chip:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.25) 100%);
  border-color: var(--primary-purple);
  transform: translateY(-2px);
}

.gc-chip-team {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
}

.gc-chip-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-blue) 100%);
  color: white;
  border-radius: 10px;
  margin-left: 4px;
}

.gc-no-targets {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* Responsive */
@media (max-width: 480px) {
  .gc-header {
    padding: 12px 16px;
  }

  .gc-team .team-logo {
    width: 40px;
    height: 40px;
  }

  .gc-time {
    font-size: 0.9rem;
  }

  .gc-team-stats {
    padding: 10px 16px;
  }

  .gc-xg {
    font-size: 0.95rem;
  }

  .gc-projections {
    padding: 12px 16px;
  }

  .gc-proj-value {
    font-size: 1.2rem;
  }

  .gc-targets {
    padding: 12px 16px;
  }

  .gc-target-chip {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}

/* ============================================
   Export Buttons
   ============================================ */

.export-buttons {
  display: flex;
  gap: 8px;
  margin-right: 12px;
}

.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--success-green) 0%, var(--primary-purple) 100%);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.export-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.export-btn:active {
  transform: translateY(0);
}

.export-icon {
  font-size: 1rem;
}

/* ============================================
   Goalie Matchup Row
   ============================================ */

.goalie-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
  border-bottom: 1px solid var(--border-color);
}

.goalie-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.goalie-info.away {
  justify-content: flex-end;
  text-align: right;
}

.goalie-info.home {
  justify-content: flex-start;
  text-align: left;
}

.goalie-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.gsax-value {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.gsax-value.positive {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-green);
}

.gsax-value.negative {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger-red);
}

.goalie-status {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.goalie-status.confirmed {
  background: rgba(16, 185, 129, 0.3);
  color: var(--success-green);
}

.goalie-status.likely {
  background: rgba(59, 130, 246, 0.3);
  color: var(--info-blue);
}

.goalie-status.expected {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

.goalie-status.unconfirmed {
  background: rgba(249, 115, 22, 0.3);
  color: var(--warning-orange);
}

.goalie-vs {
  color: var(--text-muted);
  font-size: 1.2rem;
}

/* ============================================
   Betting Edges Pills
   ============================================ */

.betting-edges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.edge-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--card-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.edge-pill.ml {
  border-color: var(--primary-blue);
}

.edge-pill.ml.favorite {
  color: var(--primary-blue);
}

.edge-pill.ml.underdog {
  color: var(--success-green);
  border-color: var(--success-green);
}

.edge-pill.spread {
  border-color: var(--primary-purple);
  color: var(--primary-purple);
}

.edge-pill.best-bet {
  background: linear-gradient(135deg, var(--success-green) 0%, var(--primary-blue) 100%);
  color: white;
  border: none;
  font-weight: 700;
}

.edge-pill.best-bet.high {
  background: linear-gradient(135deg, var(--success-green) 0%, #059669 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.edge-pill.best-bet.medium {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
}

.edge-pill.best-bet.low {
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.edge-pill.total {
  border-color: var(--primary-gold);
  color: var(--primary-gold);
}

.edge-pill.positive {
  border: 1px solid var(--success-green);
}

.edge-pill.negative {
  border: 1px solid var(--danger-red);
}

/* ============================================
   Game Phase Row (Portal Match)
   ============================================ */

.game-phase-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-color);
}

.team-phase-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.phase-badge {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.phase-badge.due,
.phase-badge.breakout {
  background: linear-gradient(135deg, #ff6b35 0%, #ff4444 100%);
  color: white;
  animation: phasePulse 2s infinite;
}

.phase-badge.hot {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #000;
}

.phase-badge.cooldown {
  background: rgba(96, 165, 250, 0.2);
  color: var(--primary-blue);
}

.phase-badge.neutral {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

@keyframes phasePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.xg-diff {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.xg-diff.due {
  color: var(--danger-red);
}

.xg-diff.hot {
  color: var(--primary-gold);
}

/* ============================================
   Best Bet Row (Portal Match)
   ============================================ */

.best-bet-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.15) 100%);
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);
}

.best-bet-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--success-green);
}

.bet-confidence {
  background: var(--success-green);
  color: var(--dark-bg);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

.bet-rationale {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 6px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-color);
}

/* ============================================
   Portal-Style Game Card (NEW)
   ============================================ */

/* Game Header - Portal Style */
.game-card .game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-bottom: 1px solid var(--border-color);
}

.game-card .team-matchup {
  display: flex;
  align-items: center;
  gap: 20px;
}

.game-card .team-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-card .team-info .team-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.game-card .team-name {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.team-record {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 2px;
}

.game-card .vs-badge {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 15px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 25px;
}

.game-card .game-time {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.game-time-main {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text-primary);
}

.game-venue {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-bottom: 4px;
}

/* Goalie Section - Portal Style */
.game-goalies {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(30, 41, 59, 0.4);
  border-bottom: 1px solid var(--border-color);
}

.game-goalies .goalie-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.game-goalies .goalie-info:first-child {
  align-items: flex-start;
}

.game-goalies .goalie-info:last-child {
  align-items: flex-end;
}

.game-goalies .goalie-info .goalie-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-goalies .goalie-status {
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.game-goalies .goalie-status.confirmed {
  background: rgba(16, 185, 129, 0.2);
  color: var(--primary-green);
}

.game-goalies .goalie-status.expected {
  background: rgba(255, 159, 67, 0.2);
  color: var(--warning-orange);
}

.game-goalies .goalie-status.likely {
  background: rgba(102, 126, 234, 0.2);
  color: var(--primary-purple);
}

.game-goalies .goalie-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.game-goalies .goalie-stat {
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: rgba(30, 41, 59, 0.6);
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.game-goalies .goalie-stat.saves {
  color: var(--primary-blue);
}

.game-goalies .goalie-vs {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 2px 8px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 10px;
  flex-shrink: 0;
}

/* Target team styling */
.target-team {
  font-size: 0.7rem;
  opacity: 0.6;
}

.pace-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.pace-badge.high {
  background: rgba(255, 107, 107, 0.2);
  color: var(--danger-red);
}

.pace-badge.medium {
  background: rgba(255, 159, 67, 0.2);
  color: var(--warning-orange);
}

.pace-badge.low {
  background: rgba(74, 158, 255, 0.2);
  color: var(--primary-blue);
}

/* Game Projections Row */
.game-projections {
  padding: 15px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 15px;
  align-items: center;
  background: rgba(30, 41, 59, 0.6);
  border-bottom: 1px solid var(--border-color);
}

.proj-team {
  text-align: center;
}

.proj-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--primary-green);
}

.proj-label {
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.proj-total {
  text-align: center;
  padding: 10px 20px;
  background: var(--card-bg);
  border-radius: 10px;
}

.proj-total .proj-value {
  font-size: 1.5rem;
  color: var(--primary-gold);
}

/* Target Player Pills */
.game-targets {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
}

.targets-title {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.target-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.target-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  color: var(--text-primary);
}

.target-pill:hover {
  background: rgba(102, 126, 234, 0.2);
  border-color: var(--primary-purple);
  transform: translateY(-1px);
}

.target-pill .hot {
  color: var(--danger-red);
}

.target-pill .cold {
  color: var(--primary-blue);
}

.target-pill .team-abbrev {
  font-size: 0.7rem;
  opacity: 0.6;
}

/* ============================================
   Matchup Context Panel (Portal Match)
   ============================================ */

.matchup-context {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.4) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.matchup-phases {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.phase-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.phase-team-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.phase-vs {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

/* Phase badges in matchup context */
.matchup-context .phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.matchup-context .phase-badge.due {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3) 0%, rgba(16, 185, 129, 0.15) 100%);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.matchup-context .phase-badge.breakout,
.matchup-context .phase-badge.hot {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(239, 68, 68, 0.15) 100%);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.matchup-context .phase-badge.cooldown {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(99, 102, 241, 0.15) 100%);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.matchup-context .phase-badge.neutral {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Matchup insight message */
.matchup-insight {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-left: 3px solid;
}

.matchup-insight.insight-hot {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border-left-color: var(--accent-red);
}

.matchup-insight.insight-due {
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
  border-left-color: var(--accent-green);
}

.matchup-insight.insight-cold {
  background: rgba(99, 102, 241, 0.1);
  color: #c4b5fd;
  border-left-color: #6366f1;
}

/* Responsive adjustments for matchup context */
@media (max-width: 600px) {
  .matchup-phases {
    gap: 12px;
  }

  .phase-vs {
    width: 100%;
    text-align: center;
    order: 1;
    margin: 8px 0;
  }

  .phase-team.away {
    order: 0;
  }

  .phase-team.home {
    order: 2;
  }
}

/* ============================================
   Game Section (Expandable Cards)
   ============================================ */
.games-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.game-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.game-section-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  color: var(--text-primary);
}

.game-section-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.game-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.game-header-left .team-matchup {
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-header-left .vs {
  color: var(--text-muted);
  margin: 0 4px;
}

.game-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.expand-icon {
  transition: transform 0.2s;
  color: var(--text-muted);
}

.game-section.expanded .expand-icon {
  transform: rotate(180deg);
}

.game-section-content {
  display: none;
  padding: 20px;
  border-top: 1px solid var(--border-color);
}

.game-section.expanded .game-section-content {
  display: block;
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .teams-grid {
    grid-template-columns: 1fr;
  }
}

.team-column-header {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--team-color, var(--border-color));
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============================================
   Team Phase Indicators (9D System)
   ============================================ */

/* Summary card phase variants */
.summary-card.phase-due {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--bg-card) 100%);
}

.summary-card.phase-due .summary-value {
  color: #34d399;
}

.summary-card.phase-breakout {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, var(--bg-card) 100%);
}

.summary-card.phase-breakout .summary-value {
  color: #f87171;
}

/* Mini phase icon in game header */
.team-phase-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 2px;
}

.team-phase-mini.due {
  background: rgba(16, 185, 129, 0.3);
}

.team-phase-mini.breakout,
.team-phase-mini.hot {
  background: rgba(239, 68, 68, 0.3);
  animation: pulse-mini 2s ease-in-out infinite;
}

.team-phase-mini.cooldown {
  background: rgba(99, 102, 241, 0.3);
}

@keyframes pulse-mini {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Game section with signal highlight */
.game-section.has-signal {
  border-left: 3px solid var(--accent-green);
}

.game-section.has-signal .game-section-header {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, transparent 30%);
}

/* Team phase badge in column header */
.team-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.team-phase-badge.due {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.team-phase-badge.breakout,
.team-phase-badge.hot {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.team-phase-badge.cooldown {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.team-phase-badge.neutral {
  background: rgba(156, 163, 175, 0.2);
  color: var(--text-muted);
}

/* Game pill (pace indicator) */
.game-pill {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
}

.game-pill.fire,
.game-pill.high {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.game-pill.navy,
.game-pill.average {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

.game-pill.green,
.game-pill.low {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

/* O/U badge */
.ou-badge {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

/* Game time */
.game-time {
  font-size: 13px;
  color: var(--text-muted);
}

/* Game score */
.game-score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}

.game-score.live {
  color: #f87171;
}

.game-score.final {
  color: var(--text-secondary);
}

.score-label {
  font-size: 10px;
  text-transform: uppercase;
  margin-left: 8px;
  opacity: 0.7;
}

/* No games message */
.no-games-message {
  text-align: center;
  padding: 60px 20px;
}

.no-games-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

/* Print styles */
@media print {
  .site-header,
  .top-nav,
  .export-buttons,
  .view-mode-toggle,
  .page-header-controls,
  .filter-row,
  .view-toggle,
  .date-toggle {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .main-content {
    padding: 0;
  }

  .projections-page,
  .home-page,
  .games-page {
    padding: 20px;
  }
}

/* ============================================
   Legend Panel (Footer)
   ============================================ */

.legend-panel {
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
  padding: 24px;
  margin-top: 40px;
}

.legend-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.legend-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.legend-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-section-title {
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.legend-symbol {
  min-width: 60px;
  font-weight: 600;
}

.legend-desc {
  color: var(--text-muted);
}

/* ============================================
   Notification Toast
   ============================================ */

.notification-toast {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: translateX(120%);
  transition: transform 0.3s ease;
  max-width: 400px;
}

.notification-toast.visible {
  transform: translateX(0);
}

.notification-toast.notification-success {
  border-color: var(--success-green);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--card-bg) 100%);
}

.notification-toast.notification-error {
  border-color: var(--danger-red);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, var(--card-bg) 100%);
}

.notification-toast.notification-warning {
  border-color: var(--warning-orange);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, var(--card-bg) 100%);
}

.notification-toast.notification-info {
  border-color: var(--info-blue);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, var(--card-bg) 100%);
}

.notification-icon {
  font-size: 1.25rem;
}

.notification-success .notification-icon {
  color: var(--success-green);
}

.notification-error .notification-icon {
  color: var(--danger-red);
}

.notification-warning .notification-icon {
  color: var(--warning-orange);
}

.notification-info .notification-icon {
  color: var(--info-blue);
}

.notification-message {
  flex: 1;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.notification-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.notification-close:hover {
  color: var(--text-primary);
}

/* ============================================
   Exclusions Admin Page
   ============================================ */

.exclusions-page {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.exclusions-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.exclusions-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.exclusions-header .subtitle {
  color: var(--text-muted);
  margin-top: 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.date-label {
  background: var(--card-bg);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 500;
}

.exclusion-count {
  background: var(--danger-red);
  color: white;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.875rem;
}

.last-updated-info {
  background: var(--dark-bg-secondary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 20px;
}

.exclusions-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.search-filter {
  flex: 1;
  min-width: 250px;
}

.filter-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 1rem;
}

.filter-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.bulk-actions {
  display: flex;
  gap: 8px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
}

.btn-secondary {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  background: var(--card-bg-hover);
  border-color: var(--border-hover);
}

.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.team-section {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.team-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--dark-bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.team-name {
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.team-abbrev {
  background: var(--primary-blue);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
}

.team-count {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.player-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
}

.player-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.player-checkbox:hover {
  background: var(--card-bg-hover);
}

.player-checkbox.excluded {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.player-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--danger-red);
}

.player-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.player-checkbox .player-name {
  font-weight: 500;
  color: var(--text-primary);
}

.player-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.exclusion-indicator {
  display: none;
  color: var(--danger-red);
  font-size: 0.75rem;
  font-weight: 700;
}

.player-checkbox.excluded .exclusion-indicator {
  display: block;
}

.exclusions-footer {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  position: sticky;
  bottom: 80px;
}

.unsaved-warning {
  color: var(--warning-orange);
  font-weight: 500;
}

.save-btn {
  padding: 12px 24px;
  background: var(--primary-blue);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.save-btn:hover:not(:disabled) {
  background: #4a90e8;
  transform: translateY(-1px);
}

.save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Auth required and access denied messages */
.auth-required,
.access-denied {
  text-align: center;
  padding: 60px 20px;
  max-width: 400px;
  margin: 0 auto;
}

.auth-required h2,
.access-denied h2 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.auth-required p,
.access-denied p {
  color: var(--text-muted);
  margin-bottom: 24px;
}

.auth-required a {
  color: var(--primary-blue);
  text-decoration: none;
}

.auth-required a:hover {
  text-decoration: underline;
}

/* Tier badges in exclusions */
.tier-badge {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.tier-ultra_elite,
.tier-ultra-elite {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #000;
}

.tier-elite {
  background: var(--primary-purple);
  color: white;
}

.tier-star {
  background: var(--primary-blue);
  color: white;
}

.tier-above_avg,
.tier-above-avg {
  background: var(--success-green);
  color: white;
}

.tier-role {
  background: var(--text-dim);
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .exclusions-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .teams-grid {
    grid-template-columns: 1fr;
  }

  .exclusions-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .save-btn {
    width: 100%;
  }
}

/* ==========================================================================
   Date Picker in Header (Portal Style)
   ========================================================================== */

.date-picker-container {
  display: flex;
  align-items: center;
}

.date-picker-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.date-picker-input:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.date-picker-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.date-picker-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* ==========================================================================
   Hot Players Page
   ========================================================================== */

.hotplayers-page {
  padding: 24px;
}

/* Hot Filter Tabs */
.hot-filter-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hot-filter-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.hot-filter-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.hot-filter-tab.active {
  background: linear-gradient(135deg, #ef4444, #f97316);
  border-color: transparent;
  color: #fff;
}

.tab-icon {
  font-size: 18px;
}

.tab-count {
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.hot-filter-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.2);
}

/* Hot Players Grid */
.hot-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.hot-player-card {
  display: block;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}

.hot-player-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.hot-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.hot-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hot-player-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.hot-player-team {
  font-size: 12px;
  color: #94a3b8;
}

/* Heat Badge */
.heat-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.heat-badge.supernova {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  animation: pulse-glow 1.5s infinite;
}

.heat-badge.nuclear {
  background: linear-gradient(135deg, #ff4500, #dc2626);
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.4);
}

.heat-badge.hot {
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.heat-badge.warming {
  background: linear-gradient(135deg, #f97316, #eab308);
}

.heat-badge.cold {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.heat-badge.frozen {
  background: linear-gradient(135deg, #06b6d4, #a5f3fc);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
  50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); }
}

/* Hot Card Stats */
.hot-card-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.hot-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.hot-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.hot-stat-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Hot Tags */
.hot-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.hot-tag.hot {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
}

.hot-tag.home-hero {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

.hot-tag.road-warrior {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
}

.hot-tag.sog-streak {
  background: linear-gradient(135deg, #3b82f6, #0ea5e9);
  color: #fff;
}

.hot-tag.point-machine {
  background: linear-gradient(135deg, #f59e0b, #eab308);
  color: #000;
}

.hot-tag.elite-shooter {
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: #fff;
}

.hot-tag.burst {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
}

.hot-tag.triple-signal {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
}

.hot-card-rationale {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  line-height: 1.4;
}

/* Hot Empty State */
.hot-empty {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
}

.hot-empty .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
  opacity: 0.5;
}

/* Hot Legend */
.hot-legend {
  margin-top: 32px;
}

.hot-legend h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.legend-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
}

/* ==========================================================================
   Heat Level Toggles (Portal Style)
   ========================================================================== */

.heat-toggles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.heat-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  transition: all 0.2s;
}

.heat-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.heat-toggle.active {
  border-color: transparent;
}

.heat-toggle.supernova.active {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #000;
}

.heat-toggle.nuclear.active {
  background: linear-gradient(135deg, #ff4500, #dc2626);
  color: #fff;
}

.heat-toggle.hot.active {
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
}

.heat-toggle.warming.active {
  background: linear-gradient(135deg, #f97316, #eab308);
  color: #000;
}

.heat-toggle.cold.active {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  color: #fff;
}

.heat-toggle.frozen.active {
  background: linear-gradient(135deg, #06b6d4, #a5f3fc);
  color: #000;
}

.heat-toggle-icon {
  font-size: 14px;
}

.heat-toggle-count {
  background: rgba(0, 0, 0, 0.2);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
}

/* ==========================================================================
   Filter Pills (Portal Style)
   ========================================================================== */

.filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  transition: all 0.2s;
}

.filter-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.filter-pill.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
}

.filter-pill-icon {
  font-size: 12px;
}

/* ==========================================================================
   Category Tabs (Portal Style)
   ========================================================================== */

.category-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.category-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.category-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

.category-tab.active {
  background: var(--primary-blue);
  color: #fff;
}

.category-tab-count {
  margin-left: 6px;
  opacity: 0.7;
}

/* ==========================================================================
   Drought Slider (Portal Style)
   ========================================================================== */

.drought-slider-container {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.drought-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.drought-slider-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.drought-slider-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-blue);
}

.drought-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  appearance: none;
  cursor: pointer;
}

.drought-slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-blue);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
  transition: all 0.2s;
}

.drought-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 12px rgba(96, 165, 250, 0.6);
}

.drought-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-blue);
  cursor: pointer;
  border: none;
}

.drought-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.drought-label {
  font-size: 11px;
  color: #64748b;
}

/* ==========================================================================
   View Mode Toggle (Portal Style)
   ========================================================================== */

.view-mode-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 3px;
}

.view-mode-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.view-mode-btn:hover {
  color: #fff;
}

.view-mode-btn.active {
  background: var(--primary-blue);
  color: #fff;
}

/* ==========================================================================
   Page Header with Toggle (Portal Style)
   ========================================================================== */

.page-header-with-toggle {
  margin-bottom: 24px;
}

.page-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 12px;
}

.page-header-title h1 {
  margin: 0 0 4px 0;
}

.page-header-title .subtitle {
  color: #94a3b8;
  font-size: 14px;
  margin: 0;
}

.page-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Context Info Bar */
.context-info {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.context-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #94a3b8;
}

.context-stat-value {
  font-weight: 600;
  color: #fff;
}

@media (max-width: 768px) {
  .page-header-top {
    flex-direction: column;
  }

  .hot-filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .hot-filter-tab {
    flex-shrink: 0;
  }

  .hot-players-grid {
    grid-template-columns: 1fr;
  }

  .heat-toggles {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .category-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Streak Card Left Border Gradient
   ========================================================================== */

/* Streak card left border indicator (from portal) */
.streak-card {
  position: relative;
  overflow: hidden;
}

.streak-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--border-color);
}

.streak-card--hot::before,
.streak-card.supernova::before {
  background: linear-gradient(180deg, #ffd700, #ff8c00);
}

.streak-card.nuclear::before {
  background: linear-gradient(180deg, #ff8c00, #ff4500);
}

.streak-card.hot::before {
  background: linear-gradient(180deg, #ff4500, #ff6347);
}

.streak-card--cold::before,
.streak-card.cold::before {
  background: linear-gradient(180deg, #6495ed, #00bfff);
}

.streak-card.frozen::before {
  background: linear-gradient(180deg, #00bfff, #87ceeb);
}

.streak-card--rising::before {
  background: linear-gradient(180deg, #22c55e, #10b981);
}

.streak-card--due::before {
  background: linear-gradient(180deg, #f59e0b, #fbbf24);
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Player Indicators
   ========================================================================== */

.player-indicators {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.player-indicators .indicator {
  font-size: 1rem;
  cursor: help;
  transition: transform 0.2s;
}

.player-indicators .indicator:hover {
  transform: scale(1.2);
}

.player-indicators .indicator.b2b { color: #ef4444; }
.player-indicators .indicator.streak { color: #f97316; }
.player-indicators .indicator.drought { color: #3b82f6; }
.player-indicators .indicator.rested { color: #10b981; }
.player-indicators .indicator.fresh { color: #fbbf24; }
.player-indicators .indicator.hot-hr { color: #22c55e; }
.player-indicators .indicator.due { color: #8b5cf6; }
.player-indicators .indicator.burst { color: #ec4899; }
.player-indicators .indicator.triple-signal {
  color: #f59e0b;
  animation: pulse 1s infinite;
}
.player-indicators .indicator.cycle-scorer { color: #22c55e; }
.player-indicators .indicator.cycle-ramping { color: #f59e0b; }
.player-indicators .indicator.sog-rising { color: #3b82f6; }
.player-indicators .indicator.burst-hot-hand {
  color: #ef4444;
  animation: pulse 1s infinite;
}
.player-indicators .indicator.burst-coiled-spring {
  color: #f97316;
  animation: pulse 1s infinite;
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Value & Risk Badges
   ========================================================================== */

.value-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.15));
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #22c55e;
  animation: valueGlow 2s ease-in-out infinite;
}

@keyframes valueGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.5); }
}

.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.risk-badge.injury {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.risk-badge.b2b {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.risk-badge.cold {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Multigoal Badge
   ========================================================================== */

.multigoal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #a855f7;
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Phase Badges (Team Phases)
   ========================================================================== */

.phase-badge {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.phase-badge.due,
.phase-badge.initial_breakout {
  background: linear-gradient(135deg, #ff6b35 0%, #ff4444 100%);
  color: white;
  animation: pulse 2s infinite;
}

.phase-badge.breakout_bursting {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #000;
}

.phase-badge.cooldown,
.phase-badge.post_breakout {
  background: rgba(96, 165, 250, 0.2);
  color: var(--primary-blue);
}

.phase-badge.neutral {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-muted);
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Betting Edge Pills
   ========================================================================== */

.betting-edges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
}

.edge-pill {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}

.edge-pill.ml {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.edge-pill.spread {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.edge-pill.total {
  background: rgba(234, 179, 8, 0.2);
  color: #fbbf24;
}

.edge-pill.positive {
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.edge-pill.negative {
  border: 1px solid rgba(239, 68, 68, 0.5);
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Triple Signal & Special Tags
   ========================================================================== */

.tag.triple-signal {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(234, 88, 12, 0.3) 100%);
  color: #f59e0b;
  font-weight: 700;
  animation: pulse 1s infinite;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.tag.cycle-scorer {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  font-weight: 600;
}

.tag.cycle-ramping {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  font-weight: 600;
}

.tag.pp1 {
  background: rgba(255, 215, 0, 0.15);
  color: var(--primary-gold);
}

.tag.l1 {
  background: rgba(74, 158, 255, 0.15);
  color: var(--primary-blue);
}

.tag.due {
  background: rgba(255, 107, 107, 0.15);
  color: var(--danger-red);
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Injury Pills
   ========================================================================== */

.injury-pill {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 8px;
}

.injury-pill.out {
  background: rgba(255, 0, 0, 0.2);
  color: #ff4444;
}

.injury-pill.doubtful {
  background: rgba(255, 107, 107, 0.2);
  color: var(--danger-red);
}

.injury-pill.questionable {
  background: rgba(255, 159, 67, 0.2);
  color: var(--warning-orange);
}

.injury-pill.probable {
  background: rgba(0, 212, 170, 0.2);
  color: var(--success-green);
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Game Card Phase Row
   ========================================================================== */

.game-phase-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border-color);
}

.team-phase-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.xg-diff {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.xg-diff.due {
  color: var(--danger-red);
}

.xg-diff.hot {
  color: var(--primary-gold);
}

/* Best bet row in game cards */
.best-bet-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.15) 100%);
  border-top: 1px solid rgba(16, 185, 129, 0.3);
}

.best-bet-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--success-green);
}

.bet-confidence {
  background: var(--success-green);
  color: var(--dark-bg);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Stat Color Coding
   ========================================================================== */

.stat-goals { color: #ec4899; }
.stat-sog { color: #60a5fa; }
.stat-saves { color: #10b981; }
.stat-points { color: #fbbf24; }
.stat-assists { color: #818cf8; }

/* ==========================================================================
   PORTAL STYLE ENHANCEMENTS - Sortable Table Headers
   ========================================================================== */

th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.2s;
}

th.sortable:hover {
  background: rgba(102, 126, 234, 0.2);
}

th.sortable::after {
  content: '';
  position: absolute;
  right: 8px;
  opacity: 0.3;
}

th.sortable.sort-asc::after {
  content: '▲';
  opacity: 1;
  color: var(--success-green);
}

th.sortable.sort-desc::after {
  content: '▼';
  opacity: 1;
  color: var(--success-green);
}

/* ==========================================================================
   GAMES PAGE - SLATE HEADER & TABS
   ========================================================================== */

.slate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.slate-title-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slate-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.slate-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.slate-tabs {
  display: flex;
  gap: 8px;
  background: rgba(30, 41, 59, 0.5);
  padding: 4px;
  border-radius: 8px;
}

.slate-tab {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
}

.slate-tab:hover {
  color: var(--text-primary);
  background: rgba(102, 126, 234, 0.1);
}

.slate-tab.active {
  background: var(--accent-primary);
  color: white;
}

/* Date Toggle Pills */
.date-toggle-pills {
  display: flex;
  gap: 6px;
}

.date-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  background: rgba(30, 41, 59, 0.6);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.date-pill:hover {
  background: rgba(102, 126, 234, 0.2);
  color: var(--text-primary);
}

.date-pill.active {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

/* ==========================================================================
   DATE NAVIGATION - Full Calendar Navigation
   ========================================================================== */

.date-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px 20px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.date-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-secondary);
}

.date-nav-btn:hover {
  background: rgba(102, 126, 234, 0.3);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  transform: scale(1.05);
}

.date-nav-btn:active {
  transform: scale(0.95);
}

.nav-arrow {
  font-size: 0.9rem;
}

.date-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.date-quick-pills {
  display: flex;
  gap: 6px;
}

.current-date {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.4);
  transition: all 0.2s ease;
  position: relative;
}

.current-date:hover {
  background: rgba(102, 126, 234, 0.2);
}

.current-date .date-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-primary);
}

.date-picker-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  top: 0;
  left: 0;
}

/* Responsive date navigation */
@media (max-width: 600px) {
  .date-navigation {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }

  .date-display {
    order: -1;
    width: 100%;
  }

  .date-nav-btn {
    width: 32px;
    height: 32px;
  }

  .current-date .date-label {
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   GAMES PAGE - SUMMARY STATS BAR
   ========================================================================== */

.slate-summary-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.summary-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 10px;
  min-width: 80px;
  border-left: 3px solid var(--accent-primary);
}

.summary-stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.summary-stat-card .stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Summary Card Color Variants */
.summary-stat-card.due {
  border-left-color: #f59e0b;
}
.summary-stat-card.due .stat-value {
  color: #f59e0b;
}

.summary-stat-card.breakout {
  border-left-color: #10b981;
}
.summary-stat-card.breakout .stat-value {
  color: #10b981;
}

.summary-stat-card.high-pace {
  border-left-color: #ec4899;
}
.summary-stat-card.high-pace .stat-value {
  color: #ec4899;
}

.summary-stat-card.low-pace {
  border-left-color: #3b82f6;
}
.summary-stat-card.low-pace .stat-value {
  color: #3b82f6;
}

/* ==========================================================================
   GAMES PAGE - GAME PREVIEW STRIP
   ========================================================================== */

.game-preview-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0;
  margin-bottom: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) rgba(30, 41, 59, 0.3);
}

.game-preview-strip::-webkit-scrollbar {
  height: 6px;
}

.game-preview-strip::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.3);
  border-radius: 3px;
}

.game-preview-strip::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.game-preview-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.game-preview-pill:hover,
.game-preview-pill.active {
  background: rgba(102, 126, 234, 0.2);
  border-color: var(--accent-primary);
}

.game-preview-pill .preview-teams {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

.game-preview-pill .preview-at {
  color: var(--text-muted);
  font-size: 0.65rem;
}

.game-preview-pill .preview-time {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.game-preview-pill .preview-ou {
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   GAMES PAGE - GAME CARDS GRID
   ========================================================================== */

/* .games-grid is defined above - this section for game card specific styles */

.game-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(30, 41, 59, 0.6));
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.game-card:hover {
  transform: translateY(-4px);
  border-color: rgba(102, 126, 234, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* Game Card Header */
.game-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(30, 41, 59, 0.5);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.game-teams {
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-at {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.game-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.game-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pace-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.pace-badge.high-pace {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
}

.pace-badge.low-pace {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* Game Phase Row */
.game-phase-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(30, 41, 59, 0.3);
  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}

.team-phase-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.team-phase-block.away {
  align-items: flex-start;
}

.team-phase-block.home {
  align-items: flex-end;
}

.team-phase-block .team-code {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
}

.phase-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}

.phase-badge.due {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.phase-badge.breakout {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.phase-badge.cooldown {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.phase-badge.neutral {
  background: rgba(107, 114, 128, 0.2);
  color: #6b7280;
}

.xg-value {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.xg-value.positive {
  color: #10b981;
}

.xg-value.negative {
  color: #ef4444;
}

/* Game Goalie Row */
.game-goalie-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}

.goalie-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.goalie-block.away {
  flex-direction: row;
}

.goalie-block.home {
  flex-direction: row-reverse;
}

.goalie-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.goalie-headshot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(148, 163, 184, 0.3);
  background: rgba(30, 41, 59, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.goalie-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.5);
  border: 2px solid rgba(148, 163, 184, 0.3);
  color: var(--text-secondary);
  font-size: 1.2rem;
}

.goalie-gsax {
  font-size: 0.65rem;
  font-weight: 500;
}

.goalie-gsax.positive {
  color: #10b981;
}

.goalie-gsax.negative {
  color: #ef4444;
}

/* Game Goalie Stats Row */
.game-goalie-stats {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 16px;
  gap: 12px;
  background: rgba(30, 41, 59, 0.2);
  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}

.game-goalie-stats .goalie-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
  max-width: 48%;
}

.game-goalie-stats .goalie-stat:first-child {
  align-items: flex-start;
}

.game-goalie-stats .goalie-stat:last-child {
  align-items: flex-end;
  text-align: right;
}

.game-goalie-stats .gsax {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.game-goalie-stats .gsax.positive {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.game-goalie-stats .gsax.negative {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.game-goalie-stats .goalie-status {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

/* Game Betting Bar */
.game-betting-bar {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}

.betting-bar-track {
  height: 8px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.betting-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.betting-bar-fill.high {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.betting-bar-fill.medium {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.betting-bar-fill.low {
  background: linear-gradient(90deg, #6b7280, #9ca3af);
}

.betting-bar-label {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.65rem;
}

.betting-bar-label .edge-label {
  color: var(--text-muted);
}

.betting-bar-label .edge-value {
  font-weight: 600;
}

.betting-bar-label .edge-value.high {
  color: #10b981;
}

.betting-bar-label .edge-value.medium {
  color: #f59e0b;
}

/* Game Spread Pick (inline) */
.game-spread-pick {
  margin: 12px 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.game-spread-pick.strong {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08));
  border-color: rgba(239, 68, 68, 0.4);
}

.game-spread-pick.good {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08));
  border-color: rgba(16, 185, 129, 0.4);
}

.game-spread-pick.base {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(102, 126, 234, 0.05));
  border-color: rgba(102, 126, 234, 0.3);
}

.spread-pick-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.spread-pick-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spread-pick-confidence {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}

.spread-pick-confidence.strong {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.spread-pick-confidence.good {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.spread-pick-confidence.base {
  background: rgba(102, 126, 234, 0.2);
  color: #667eea;
}

.spread-pick-bet {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.spread-pick-rationale {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Game Insight */
.game-insight {
  padding: 10px 16px;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
  background: rgba(102, 126, 234, 0.05);
  border-left: 2px solid var(--accent-primary);
}

/* Game Edge Pills */
.game-edge-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 16px;
}

.edge-pill {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 600;
}

.edge-pill.over {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.edge-pill.under {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.edge-pill.away {
  background: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.edge-pill.home {
  background: rgba(236, 72, 153, 0.2);
  color: #ec4899;
}

/* Game Stats Row */
.game-stats-row {
  display: flex;
  justify-content: space-around;
  padding: 12px 16px;
  background: rgba(30, 41, 59, 0.3);
  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}

.proj-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.proj-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.proj-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.proj-value.over {
  color: #10b981;
}

.proj-value.under {
  color: #3b82f6;
}

/* Game Targets */
.game-targets {
  padding: 12px 16px;
}

.targets-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.targets-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.target-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(148, 163, 184, 0.1);
  text-decoration: none;
}

.target-chip:hover {
  background: rgba(102, 126, 234, 0.2);
  border-color: var(--accent-primary);
}

.target-chip .target-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-primary);
}

.target-chip .target-prob {
  font-size: 0.65rem;
  font-weight: 700;
  color: #10b981;
}

/* ==========================================================================
   GAMES PAGE - NO GAMES MESSAGE
   ========================================================================== */

.no-games-message {
  text-align: center;
  padding: 60px 20px;
  background: rgba(30, 41, 59, 0.4);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.no-games-message .icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.no-games-message h3 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.no-games-message p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ==========================================================================
   GAMES PAGE - RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
  .slate-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .slate-summary-bar {
    justify-content: center;
  }

  .summary-stat-card {
    flex: 1 1 calc(33% - 8px);
    min-width: 70px;
    padding: 10px 12px;
  }

  .summary-stat-card .stat-value {
    font-size: 1.2rem;
  }

  .games-grid {
    grid-template-columns: 1fr;
  }

  .game-card-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .game-meta {
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
  }
}

/* ==========================================================================
   PLAYER DETAIL - NEW SECTIONS (Portal-Matched)
   ========================================================================== */

/* Ice Time & Usage Section */
.ice-time-section {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
}

.ice-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.ice-time-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.ice-time-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.ice-time-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.ice-time-value.pp-highlight {
  color: var(--primary-gold);
}

.ice-time-value.pp-badge {
  font-size: 0.9rem;
  padding: 6px 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.ice-time-value.pp-badge.pp1 {
  color: var(--primary-gold);
  border-color: var(--primary-gold);
}

.ice-time-value.pp-badge.pp2 {
  color: var(--primary-purple);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.2) 100%);
  border-color: rgba(139, 92, 246, 0.4);
}

/* Shot Quality Section */
.shot-quality-section {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.shot-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
}

.shot-quality-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.shot-quality-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.shot-quality-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.shot-quality-value.positive {
  color: var(--success-green);
}

.shot-quality-value.tier-badge {
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 16px;
}

.shot-quality-value.tier-badge.elite {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #000;
}

.shot-quality-value.tier-badge.above-avg {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-green);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.shot-quality-value.tier-badge.average {
  background: rgba(148, 163, 184, 0.2);
  color: var(--text-secondary);
}

.shot-quality-value.tier-badge.low,
.shot-quality-value.tier-badge.below-avg {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger-red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* xG Regression Section */
.xg-regression-section {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.05) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.xg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
}

.xg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.xg-item.xg-diff-display {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
}

.xg-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-align: center;
}

.xg-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
}

.xg-value.overperforming {
  color: var(--warning-orange);
}

.xg-value.underperforming {
  color: var(--success-green);
}

.xg-value.positive {
  color: var(--success-green);
}

.xg-value.negative {
  color: var(--danger-red);
}

.xg-insight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary-purple);
}

.xg-insight .insight-icon {
  font-size: 1.2rem;
}

.xg-insight .insight-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* H2H Section */
.h2h-section {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.h2h-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
}

.h2h-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.h2h-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-align: center;
}

.h2h-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.h2h-value.goals {
  color: var(--stat-goals);
}

.h2h-value.points {
  color: var(--stat-points);
}

.h2h-value.positive {
  color: var(--success-green);
}

.h2h-insight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--success-green);
}

.h2h-insight .insight-icon {
  font-size: 1.2rem;
}

.h2h-insight .insight-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Scoring Cycle Section */
.scoring-cycle-section {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.cycle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.cycle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.cycle-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-align: center;
}

.cycle-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cycle-value.burst-active {
  color: var(--success-green);
  background: rgba(16, 185, 129, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
}

.cycle-value.burst-moderate {
  color: var(--warning-orange);
  background: rgba(245, 158, 11, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
}

.cycle-value.burst-low {
  color: var(--text-muted);
}

.cycle-value.hot {
  color: var(--danger-red);
}

.cycle-value.overdue {
  color: var(--primary-gold);
  animation: overdueGlow 2s infinite;
}

@keyframes overdueGlow {
  0%, 100% { opacity: 1; text-shadow: none; }
  50% { opacity: 0.8; text-shadow: 0 0 10px var(--primary-gold); }
}

.cycle-insight {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary-gold);
}

.cycle-insight.overdue {
  background: rgba(234, 179, 8, 0.1);
}

.cycle-insight .insight-icon {
  font-size: 1.2rem;
}

.cycle-insight .insight-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* AGS Calculation Chain Section */
.ags-chain-section {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, rgba(30, 41, 59, 0.8) 100%);
}

.ags-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
}

.chain-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.15);
  min-width: 80px;
}

.chain-step.base {
  background: rgba(102, 126, 234, 0.15);
  border-color: rgba(102, 126, 234, 0.4);
}

.chain-step.adjustment.positive {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

.chain-step.adjustment.negative {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.chain-step.final {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
  border-color: rgba(236, 72, 153, 0.5);
  padding: 14px 20px;
}

.step-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-align: center;
}

.step-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.chain-step.adjustment.positive .step-value {
  color: var(--success-green);
}

.chain-step.adjustment.negative .step-value {
  color: var(--danger-red);
}

.chain-step.final .step-value {
  font-size: 1.2rem;
}

.chain-step.final .step-value.ags-elite {
  color: #ffd700;
}

.chain-step.final .step-value.ags-good {
  color: var(--success-green);
}

.chain-step.final .step-value.ags-average {
  color: var(--primary-blue);
}

.chain-step.final .step-value.ags-low {
  color: var(--text-muted);
}

.chain-arrow {
  font-size: 1.2rem;
  color: var(--text-muted);
  padding: 0 4px;
}

.chain-arrow.final {
  color: var(--primary-purple);
  font-weight: bold;
}

/* Responsive for new sections */
@media (max-width: 768px) {
  .ice-time-grid,
  .shot-quality-grid,
  .xg-grid,
  .h2h-grid,
  .cycle-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ags-chain {
    flex-direction: column;
  }

  .chain-arrow {
    transform: rotate(90deg);
  }

  .chain-step {
    width: 100%;
  }
}

/* ============================================
   NEW PLAYER DETAIL SECTIONS - Added Dec 2025
   ============================================ */

/* Stats Table Styles (Per-60, Opponent Defense, etc.) */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.stats-table thead {
  background: var(--bg-secondary);
}

.stats-table th {
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
}

.stats-table th:first-child {
  text-align: left;
  padding-left: 1rem;
}

.stats-table td {
  padding: 0.625rem 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.stats-table td.stat-label {
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  padding-left: 1rem;
}

.stats-table td.stat-value {
  text-align: center;
  color: var(--text-secondary);
}

.stats-table td.stat-value.gold { color: #fbbf24; font-weight: 600; }
.stats-table td.stat-value.green { color: #22c55e; font-weight: 600; }
.stats-table td.stat-value.red { color: #ef4444; font-weight: 600; }
.stats-table td.stat-value.yellow { color: #eab308; }

.stats-table td.center,
.stats-table th.center {
  text-align: center;
}

.stats-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.table-legend {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.table-title {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* Tier Badge (small version for tables) */
.tier-badge-small {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tier-badge-small.green {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.tier-badge-small.yellow {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.tier-badge-small.red {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Defense Legend */
.defense-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-color.green { background: #22c55e; }
.legend-color.yellow { background: #eab308; }
.legend-color.red { background: #ef4444; }

/* Injury Status Badges */
.injury-status {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.injury-status.injury-ir {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.injury-status.injury-out {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
}

.injury-status.injury-dtd {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

/* Injury Legend */
.injury-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.ir { background: #ef4444; }
.legend-dot.out { background: #f97316; }
.legend-dot.dtd { background: #eab308; }

.injury-table-wrapper {
  max-height: 250px;
  overflow-y: auto;
}

/* Team Ranks Grid */
.team-ranks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.team-rank-item {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.team-rank-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary-blue);
  margin-bottom: 0.25rem;
}

.team-rank-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team-rank-sub {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.teammates-table-wrapper {
  margin-top: 1rem;
}

/* Betting Lines Grid */
.betting-lines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.betting-line-item {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--border-color);
}

.betting-line-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-purple);
  margin-bottom: 0.25rem;
}

.betting-line-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* PropFinder Projections Grid */
.pf-projections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.pf-projection-item {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--border-color);
}

.pf-projection-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-primary, #8b5cf6);
  margin-bottom: 0.25rem;
}

.pf-projection-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.pf-projection-compare {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Line Probabilities Section */
.line-probs-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.line-probs-column h3 {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.line-probs-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.line-prob-item {
  display: grid;
  grid-template-columns: 60px auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.line-prob-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.line-prob-value.green {
  color: #22c55e;
}

.line-prob-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.line-prob-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.line-prob-fill {
  height: 100%;
  background: var(--primary-blue);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.line-prob-fill.green {
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

/* Responsive for new player detail sections */
@media (max-width: 768px) {
  .team-ranks-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .betting-lines-grid,
  .pf-projections-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .line-probs-two-col {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .line-prob-item {
    grid-template-columns: 55px auto 1fr;
  }

  .defense-legend,
  .injury-legend {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .team-ranks-grid {
    grid-template-columns: 1fr;
  }

  .betting-lines-grid,
  .pf-projections-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Not Playing Today Styles
   ========================================================================== */

.not-playing-label {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
}

.projection-opponent.not-playing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.not-playing-section {
  text-align: center;
  padding: 2rem !important;
}

.not-playing-section h2 {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.not-playing-message {
  color: var(--text-secondary);
}

.not-playing-message p {
  margin: 0.5rem 0;
}

.not-playing-message .season-stats-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================
   PLAYER MODAL - Compact Format (Dec 2025)
   Matches vanilla JS data portal layout
   ============================================ */

/* Player Modal Page Container */
.player-modal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  background: var(--bg-primary);
  min-height: 100vh;
}

/* Player Modal Header */
.player-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
}

.player-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.player-photo-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.5), 0 0 40px rgba(59, 130, 246, 0.3);
  flex-shrink: 0;
}

.player-photo-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: #1e293b;
  border: 1px solid #0f172a;
  box-sizing: border-box;
}

/* Universal headshot ring - used by renderPlayerHeadshot() */
.headshot-ring {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 40%, #a855f7 100%);
  box-shadow:
    0 0 25px rgba(34, 211, 238, 0.6),
    0 0 50px rgba(59, 130, 246, 0.4),
    0 0 75px rgba(168, 85, 247, 0.3);
  flex-shrink: 0;
  padding: 3px;
}

.headshot-ring .headshot-img {
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: #0f172a;
  border: 2px solid #0f172a;
}

.headshot-ring .headshot-initials {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #94a3b8;
  background: #0f172a;
  border: 2px solid #0f172a;
  font-size: 1.5rem;
}

/* Simple headshot without glowing ring - for tables and lists */
.headshot-simple {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: #1e293b;
  border: 2px solid #334155;
}

.headshot-simple .headshot-img {
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
}

.headshot-simple .headshot-initials {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #94a3b8;
  background: #1e293b;
  font-size: 0.875rem;
  width: 100%;
  height: 100%;
}

/* Enhanced Modal Header with Team Logos */
.modal-header-enhanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modal-player-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.modal-player-info h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0;
}

.modal-player-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #94a3b8;
  font-size: 0.875rem;
}

.meta-team-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.meta-team {
  font-weight: 600;
  color: #cbd5e1;
}

/* Matchup Badge */
.modal-matchup-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.matchup-vs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.matchup-team-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.matchup-vs-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.matchup-opponent {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
}

/* Stats Dropdown */
.stats-dropdown-container {
  margin-top: 1rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.stats-dropdown-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #f1f5f9;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stats-dropdown-toggle:hover {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
}

.dropdown-arrow {
  transition: transform 0.3s ease;
  color: #64748b;
}

.stats-dropdown-container.open .dropdown-arrow {
  transform: rotate(180deg);
}

.stats-dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(15, 23, 42, 0.8);
}

.stats-dropdown-container.open .stats-dropdown-content {
  max-height: 600px;
}

/* Stats Bar Charts */
.stats-bar-section {
  padding: 1.25rem;
}

.stats-bar-section h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.stat-bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.stat-bar-label {
  width: 80px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
}

.stat-bar-track {
  flex: 1;
  height: 12px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  position: relative;
}

.stat-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent);
  border-radius: 6px 6px 0 0;
}

/* Bar fill colors */
.stat-bar-fill.ags {
  background: linear-gradient(90deg, #22d3ee 0%, #3b82f6 50%, #a855f7 100%);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.stat-bar-fill.sog {
  background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
}

.stat-bar-fill.pts {
  background: linear-gradient(90deg, #10b981 0%, #22d3ee 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.stat-bar-fill.goals {
  background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.stat-bar-fill.assists {
  background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 100%);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.stat-bar-fill.points {
  background: linear-gradient(90deg, #eab308 0%, #f97316 100%);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}

.stat-bar-value {
  width: 50px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #f1f5f9;
  text-align: right;
}

/* ========================================
   PropFinder-Style Game Chart
   ======================================== */
.pf-game-chart-container {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1rem 0;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.pf-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pf-chart-tabs {
  display: flex;
  gap: 0.25rem;
}

.pf-tab {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pf-tab:hover {
  border-color: rgba(168, 85, 247, 0.4);
  color: #cbd5e1;
}

.pf-tab.active {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  border-color: transparent;
  color: white;
}

.pf-chart-line-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pf-over-badge {
  background: #10b981;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

.pf-line-value {
  color: #f1f5f9;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Bar Chart Area */
.pf-bar-chart {
  position: relative;
  height: 260px;
  margin-bottom: 1rem;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 8px;
  padding: 1rem;
}

.pf-chart-area {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 200px;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.pf-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 60px;
  min-width: 40px;
}

.pf-bar-value-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 0.35rem;
}

.pf-bar {
  width: 100%;
  min-height: 8px;
  border-radius: 6px 6px 0 0;
  transition: height 0.3s ease;
}

.pf-bar.hit {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.pf-bar.miss {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.pf-bar.empty {
  background: rgba(148, 163, 184, 0.2);
}

.pf-bar-label {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.5rem;
  font-weight: 500;
}

/* Average Line */
.pf-avg-line {
  position: absolute;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    #f59e0b 0px,
    #f59e0b 8px,
    transparent 8px,
    transparent 16px
  );
  z-index: 1;
}

.pf-avg-label {
  position: absolute;
  right: 0;
  top: -20px;
  background: #f59e0b;
  color: #1a1a2e;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Threshold Line (0.5 line) */
.pf-threshold-line {
  position: absolute;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 1;
}

/* Hit Rate Summary Boxes */
.pf-hit-rates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.pf-hit-box {
  background: rgba(30, 41, 59, 0.8);
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
  border: 1px solid rgba(148, 163, 184, 0.1);
  transition: all 0.2s ease;
}

.pf-hit-box.season {
  border-color: rgba(249, 115, 22, 0.4);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(234, 88, 12, 0.1) 100%);
}

.pf-hit-box.l5.hot {
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
}

.pf-hit-box.l5.cold {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
}

.pf-hit-box.composite {
  border-color: rgba(168, 85, 247, 0.4);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.pf-hit-box.predicted {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
}

.pf-hit-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.pf-hit-value {
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
}

.pf-hit-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: #cbd5e1;
}

.pf-hit-box.l5.hot .pf-hit-pct {
  color: #22c55e;
}

.pf-hit-box.l5.cold .pf-hit-pct {
  color: #ef4444;
}

@media (max-width: 480px) {
  .pf-hit-rates {
    grid-template-columns: repeat(2, 1fr);
  }

  .pf-chart-tabs {
    flex-wrap: wrap;
  }

  .pf-tab {
    padding: 0.375rem 0.75rem;
    font-size: 0.7rem;
  }
}

.player-header-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.player-modal-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.player-header-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.meta-dot {
  color: var(--text-muted);
}

.position-badge-small {
  color: var(--primary-purple);
  font-weight: 600;
}

.vs-text {
  color: var(--text-muted);
}

/* Heat Badges */
.heat-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.heat-supernova { background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%); color: white; }
.heat-nuclear { background: #dc2626; color: white; }
.heat-hot { background: #f97316; color: white; }
.heat-warming { background: #eab308; color: #1a1a2e; }
.heat-neutral { background: var(--bg-tertiary); color: var(--text-secondary); }
.heat-cold { background: #0ea5e9; color: white; }
.heat-frozen { background: #06b6d4; color: white; }

.not-playing-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--primary-green);
  color: white;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.modal-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Player Modal Content */
.player-modal-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Modal Sections */
.modal-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-color);
}

.modal-section.half-section {
  flex: 1;
  min-width: 0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-green);
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-green);
}

.section-icon {
  font-size: 1rem;
}

/* Two Column Section Layout */
.two-col-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Stats Grids */
.stats-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.stats-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.stats-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

/* Stat Boxes */
.stat-box {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--border-color);
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}

.stat-sublabel {
  display: block;
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

/* AGS Colors */
.ags-elite { color: var(--primary-green) !important; }
.ags-good { color: var(--primary-blue) !important; }
.ags-average { color: var(--primary-gold) !important; }
.ags-low { color: var(--text-muted) !important; }

/* Text Colors */
.text-green { color: #22c55e !important; }
.text-red { color: #ef4444 !important; }
.text-blue { color: #3b82f6 !important; }
.text-muted { color: var(--text-muted) !important; }

/* Rating Bar */
.rating-bar {
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  margin-top: 0.5rem;
  overflow: hidden;
}

.rating-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.rating-green { background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%); }
.rating-yellow { background: linear-gradient(90deg, #eab308 0%, #ca8a04 100%); }
.rating-red { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); }

/* Hit Rate Footer */
.hit-rate-footer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

/* PP Unit Colors */
.pp-unit-pp1 { color: #eab308 !important; }
.pp-unit-pp2 { color: #94a3b8 !important; }
.pp-unit-none { color: var(--text-muted) !important; }

/* Tier Colors */
.tier-elite, .tier-weak { color: #22c55e !important; }
.tier-avg, .tier-average { color: #eab308 !important; }
.tier-n\/a { color: var(--text-muted) !important; }

/* Velocity Colors */
.velocity-stable { color: var(--text-secondary); }
.velocity-rising { color: #22c55e; }
.velocity-falling { color: #ef4444; }

/* ============================================
   DATA PORTAL MODAL CLASSES (Dec 2025)
   Exact match to vanilla JS data portal
   ============================================ */

/* Modal Header - from data portal */
.modal-header {
  padding: 30px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  gap: 24px;
  align-items: center;
}

.modal-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--primary-green);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.modal-photo.gold {
  border-color: var(--primary-gold);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.modal-initials {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-blue) 100%);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}

.modal-player-info h2 {
  font-size: 1.8rem;
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.modal-player-meta {
  font-size: 1rem;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.modal-player-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Modal Body */
.modal-body {
  padding: 30px;
}

/* Modal Section */
.modal-section {
  margin-bottom: 30px;
}

.modal-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-green);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-green);
  display: inline-block;
}

/* Modal Stats Grid */
.modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

/* Modal Stat Card */
.modal-stat-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.modal-stat-card:hover {
  border-color: var(--primary-green);
  transform: translateY(-2px);
}

/* Modal Stat Values */
.modal-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.modal-stat-value.gold { color: var(--primary-gold); }
.modal-stat-value.green { color: #22c55e; }
.modal-stat-value.red { color: #ef4444; }
.modal-stat-value.blue { color: #3b82f6; }
.modal-stat-value.purple { color: #a855f7; }

.modal-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-stat-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Modal Two Column Layout */
.modal-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media (max-width: 768px) {
  .modal-two-col { grid-template-columns: 1fr; }
  .modal-header { flex-direction: column; text-align: center; }
  .modal-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Modal Progress Bars */
.modal-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.modal-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.modal-bar-fill.green { background: linear-gradient(90deg, #22c55e, #16a34a); }
.modal-bar-fill.gold { background: linear-gradient(90deg, var(--primary-gold), #ff9800); }
.modal-bar-fill.blue { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.modal-bar-fill.purple { background: linear-gradient(90deg, #a855f7, #7c3aed); }
.modal-bar-fill.red { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* Modal Matchup Cards */
.modal-matchup-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--border-color);
}

.modal-matchup-vs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-matchup-team {
  text-align: center;
}

.modal-matchup-team-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-matchup-team-phase {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Modal Table */
.modal-table-wrapper {
  overflow-x: auto;
}

.modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.modal-table th,
.modal-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.modal-table th {
  background: var(--bg-tertiary);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}

.modal-table td {
  color: var(--text-primary);
}

.modal-table tr:hover td {
  background: var(--bg-tertiary);
}

/* Modal Stat Footer */
.modal-stat-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* Modal Legend */
.modal-legend {
  margin-top: 20px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.modal-legend-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* Tier Badges */
.tier-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.tier-badge.ultra-elite { background: rgba(255, 215, 0, 0.2); color: var(--primary-gold); }
.tier-badge.elite { background: rgba(0, 212, 170, 0.2); color: var(--primary-green); }
.tier-badge.high { background: rgba(74, 158, 255, 0.2); color: var(--primary-blue); }
.tier-badge.moderate { background: rgba(150, 150, 150, 0.2); color: var(--text-secondary); }
.tier-badge.weak { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Injury Badge */
.injury-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.injury-badge.healthy { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.injury-badge.day-to-day { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.injury-badge.out { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.injury-badge.ir { background: rgba(239, 68, 68, 0.3); color: #ef4444; }

/* Risk Badge */
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
}

.risk-badge.injury { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.risk-badge.b2b { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.risk-badge.cold { background: rgba(96, 165, 250, 0.2); color: #60a5fa; }
.risk-badge.slump { background: rgba(239, 68, 68, 0.15); color: #f87171; }

/* Value Badge */
.value-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(16, 185, 129, 0.15) 100%);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #22c55e;
}

/* Matchup Teams Row */
.matchup-teams-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.matchup-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.team-abbrev-large {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.team-phase {
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.phase-neutral { background: var(--bg-tertiary); color: var(--text-secondary); }
.phase-due { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.phase-breakout, .phase-initial_breakout { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.phase-cooldown { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }

.team-defense-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.matchup-vs {
  font-size: 1.25rem;
  color: var(--text-muted);
}

/* Tables */
.defense-table,
.injury-table,
.teammates-table,
.game-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.defense-table th,
.injury-table th,
.teammates-table th,
.game-log-table th {
  padding: 0.75rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.defense-table td,
.injury-table td,
.teammates-table td,
.game-log-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.defense-table tbody tr:nth-child(even),
.injury-table tbody tr:nth-child(even),
.teammates-table tbody tr:nth-child(even),
.game-log-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* Tier Badge Small */
.tier-badge-small {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.tier-badge-small.tier-weak { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.tier-badge-small.tier-avg { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.tier-badge-small.tier-elite { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Injury Status */
.injury-status {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-ir { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.status-out { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.status-dtd { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }

/* Legends */
.defense-legend,
.injury-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.weak { background: #22c55e; }
.legend-dot.avg { background: #eab308; }
.legend-dot.elite { background: #ef4444; }
.legend-dot.ir { background: #ef4444; }
.legend-dot.out { background: #eab308; }
.legend-dot.dtd { background: #ca8a04; }

/* Teammates Table Wrapper */
.teammates-table-wrapper {
  margin-top: 1rem;
}

.table-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* Game Log Specific */
.scored-row {
  background: rgba(34, 197, 94, 0.05) !important;
}

.highlight-goals {
  color: var(--stat-goals) !important;
  font-weight: 700;
}

/* Collapsible Sections */
.collapsible-section .section-content {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.collapsible-section.collapsed .section-content {
  max-height: 0;
  padding: 0;
}

.section-header-collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.section-collapse-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: transform 0.3s ease;
}

.collapsible-section.collapsed .section-collapse-btn {
  transform: rotate(-90deg);
}

/* Back Section */
.back-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .player-modal-page {
    padding: 0.5rem;
  }

  .player-modal-header {
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
  }

  .player-header-left {
    width: 100%;
  }

  .modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  .player-photo-ring {
    width: 60px;
    height: 60px;
  }

  .player-modal-name {
    font-size: 1.25rem;
  }

  .two-col-section {
    grid-template-columns: 1fr;
  }

  .stats-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .matchup-teams-row {
    flex-direction: column;
    gap: 1rem;
  }

  .matchup-vs {
    transform: rotate(90deg);
  }

  .defense-legend,
  .injury-legend {
    flex-direction: column;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .stats-grid-3 {
    grid-template-columns: 1fr;
  }

  .stat-value {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Portal-Matching Hover Behaviors
   ========================================================================== */

/* Clickable Row - Enhanced table row hover (from vanilla portal) */
.clickable-row {
  cursor: pointer;
  transition: all 0.2s ease;
}

.clickable-row:hover {
  background: var(--bg-hover) !important;
  transform: scale(1.005);
  box-shadow: inset 0 0 0 2px var(--success-green);
}

.clickable-row:active {
  transform: scale(0.995);
}

/* Clickable Card - Enhanced card hover (from vanilla portal) */
.clickable-card {
  cursor: pointer;
}

.clickable-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(102, 126, 234, 0.2);
}

/* Matchup Player Hover (from vanilla portal) */
.matchup-player {
  transition: all 0.2s ease;
}

.matchup-player:hover {
  background: var(--bg-hover);
}

/* Sortable Table Headers (from vanilla portal) */
th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 24px !important;
  transition: background 0.2s;
}

th.sortable:hover {
  background: rgba(102, 126, 234, 0.2);
}

th.sortable::after {
  content: '⇅';
  position: absolute;
  right: 8px;
  opacity: 0.3;
  font-size: 0.8em;
}

th.sortable.sort-asc::after {
  content: '↑';
  opacity: 1;
  color: var(--success-green);
}

th.sortable.sort-desc::after {
  content: '↓';
  opacity: 1;
  color: var(--success-green);
}

/* Table Row Hover (enhanced from vanilla portal) */
tbody tr:hover {
  background: rgba(102, 126, 234, 0.1);
}

/* PropFinder-style game table hover */
.pf-game-table tr:hover {
  background: rgba(102, 126, 234, 0.1);
}

/* PropFinder Tab Hover (from vanilla portal) */
.pf-tab {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.pf-tab:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: var(--primary-blue);
  color: var(--text-secondary);
}

.pf-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  color: #fff;
}

/* Modal Close Button Hover (from vanilla portal) */
.modal-close:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  transform: rotate(90deg);
}

/* Enhanced Game Card Hover */
.game-card:hover {
  border-color: var(--primary-purple);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Enhanced Player Card Hover */
.player-card:hover {
  border-color: var(--primary-purple);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Ultra-Elite Pulse Animation */
@keyframes ultraElitePulse {
  0%, 100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.35), 0 0 50px rgba(255, 215, 0, 0.15); }
  50% { box-shadow: 0 0 35px rgba(255, 215, 0, 0.5), 0 0 70px rgba(255, 215, 0, 0.25); }
}

.player-card.ultra-elite,
.projection-card.ultra-elite {
  animation: ultraElitePulse 3s ease-in-out infinite;
}

/* Value Badge Glow Animation */
@keyframes valueGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); }
}

.value-badge {
  animation: valueGlow 2s ease-in-out infinite;
}

/* Enhanced Streak Card Hover with Portal-style border glow */
.streak-card:hover {
  transform: translateY(-2px);
  border-color: var(--success-green);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Nav Link Hover Enhancement */
.top-nav .nav-item:hover {
  border-color: var(--primary-purple);
  color: var(--primary-purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.2);
}

/* Button hover enhancements */
button:not(:disabled):hover,
.btn:not(:disabled):hover {
  transform: translateY(-1px);
}

/* Link underline animation on hover */
a.animated-underline {
  position: relative;
}

a.animated-underline::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: var(--primary-blue);
  transition: width 0.3s ease;
}

a.animated-underline:hover::after {
  width: 100%;
}

/* Input Focus States */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

/* Search Input Hover */
.search-input:hover {
  border-color: var(--border-hover);
}

/* Filter Button Hover */
.filter-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-purple);
}

/* Matchup Card Hover (from vanilla portal) */
.matchup-card:hover {
  border-color: var(--primary-purple);
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
}

/* Projection Card Hover */
.projection-card:hover {
  border-color: var(--primary-purple);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Hot Player Card Enhanced Hover */
.hot-player-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Badge Hover Effects */
.badge:hover,
.pill:hover {
  transform: scale(1.05);
}

/* Team Logo Hover */
.team-logo:hover {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  transform: scale(1.05);
  transition: all 0.2s ease;
}

/* Team Logo Contrast Outline
   Many NHL logos have dark edges; on our dark UI they can visually disappear.
   This adds a subtle white stroke using multiple tiny drop-shadows.
*/
.team-logo {
  filter:
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.85))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.85));
}

.team-logo-mini {
  filter:
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.85))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.85));
}

.team-logo:hover {
  /* Keep the outline on hover and add our existing depth shadow */
  filter:
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.85))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

/* Player Photo Hover */
.player-photo:hover,
.player-initials:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Heat Toggle Button Hover */
.heat-toggle-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--primary-purple);
}

/* Stat Card Hover Effect */
.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--success-green);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* Team Card Hover */
.team-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-purple);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Best Bet Card Hover */
.best-bet-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-gold);
  box-shadow: 0 8px 24px rgba(255, 215, 0, 0.2);
}

/* Goalie Card Hover */
.goalie-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-blue);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}

/* Dropdown Item Hover */
.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* User Menu Trigger Hover */
.user-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Tab/Pill Navigation Hover */
.tab-nav button:hover:not(.active),
.pill-nav button:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-hover);
}

/* Calendar Day Hover */
.calendar-day:hover:not(.active):not(.disabled) {
  background: var(--bg-hover);
  border-color: var(--primary-blue);
}

/* Tooltip Arrow Animation */
[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Card Action Button Hover */
.card-action:hover {
  background: rgba(102, 126, 234, 0.15);
  color: var(--primary-blue);
}

/* Responsive: Reduce hover effects on touch devices */
@media (hover: none) {
  .clickable-row:hover,
  .clickable-card:hover,
  .player-card:hover,
  .game-card:hover,
  .streak-card:hover,
  .hot-player-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ================================================
   TOP PICKS / LEADERBOARD PAGE
   ================================================ */

.top-picks-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.top-picks-page .page-header {
  text-align: center;
  margin-bottom: 24px;
}

.top-picks-page .page-header h1 {
  font-size: 2rem;
  font-weight: 700;
  background: var(--gradient-header);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

.top-picks-page .subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

/* Category Tabs */
.top-picks-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.top-picks-tabs .tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.top-picks-tabs .tab-btn:hover {
  background: var(--card-bg-hover);
  border-color: var(--border-hover);
}

.top-picks-tabs .tab-btn.active {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
  border-color: transparent;
  color: white;
}

.top-picks-tabs .tab-icon {
  font-size: 18px;
}

/* Leaderboard Container */
.leaderboard {
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  margin-bottom: 24px;
}

.leaderboard-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(167, 139, 250, 0.1) 100%);
  border-bottom: 1px solid var(--border-color);
}

.leaderboard-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.leaderboard-subtitle {
  color: var(--text-muted);
  font-size: 13px;
}

.leaderboard-table-wrapper {
  overflow-x: auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-table thead {
  background: rgba(30, 41, 59, 0.8);
}

.leaderboard-table th {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
}

.leaderboard-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  vertical-align: middle;
}

.leaderboard-row:hover {
  background: rgba(96, 165, 250, 0.05);
}

/* Rank Badge */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-elevated);
  color: var(--text-muted);
}

.rank-badge.top-1 {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #000;
}

.rank-badge.top-2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%);
  color: #000;
}

.rank-badge.top-3 {
  background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
  color: #000;
}

/* Player Link in Table */
.leaderboard-table .player-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  transition: color 0.2s ease;
}

.leaderboard-table .player-link:hover {
  color: var(--primary-blue);
}

.leaderboard-table .player-name {
  font-weight: 500;
}

/* Team Cell */
.team-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* AGS Badge */
.ags-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(51, 65, 85, 0.5);
  color: var(--text-secondary);
}

.ags-badge.elite {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #000;
}

.ags-badge.high {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
}

.ags-badge.medium {
  background: rgba(59, 130, 246, 0.3);
  color: var(--primary-blue);
}

/* SOG Badge */
.sog-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(51, 65, 85, 0.5);
  color: var(--text-secondary);
}

.sog-badge.elite {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #fff;
}

.sog-badge.high {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
}

.sog-badge.medium {
  background: rgba(59, 130, 246, 0.3);
  color: var(--primary-blue);
}

/* PTS Badge */
.pts-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(51, 65, 85, 0.5);
  color: var(--text-secondary);
}

.pts-badge.elite {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  color: #fff;
}

.pts-badge.high {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
}

.pts-badge.medium {
  background: rgba(59, 130, 246, 0.3);
  color: var(--primary-blue);
}

/* Drought Badge */
.drought-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.drought-badge.severe {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.drought-badge.moderate {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}

/* PP Badge */
.pp-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.pp-badge.pp1 {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #000;
}

.pp-badge.pp2 {
  background: rgba(59, 130, 246, 0.3);
  color: var(--primary-blue);
}

/* Text Colors */
.text-green {
  color: #22c55e;
  font-weight: 600;
}

/* Empty State */
.leaderboard-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

.leaderboard-empty .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* Summary Cards */
.top-picks-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.top-picks-summary .summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  text-align: center;
}

.top-picks-summary .summary-icon {
  font-size: 28px;
}

.top-picks-summary .summary-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-blue);
}

.top-picks-summary .summary-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .top-picks-tabs {
    flex-direction: column;
    align-items: stretch;
  }

  .top-picks-tabs .tab-btn {
    justify-content: center;
  }

  .leaderboard-table th,
  .leaderboard-table td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .leaderboard-table .player-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ==========================================================================
   RESPONSIVE DEVICE DETECTION & LAYOUT ADJUSTMENTS
   Comprehensive responsive design for all device types
   ========================================================================== */

/* CSS Custom Properties for Responsive Breakpoints */
:root {
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Touch-friendly sizing */
  --touch-target-min: 44px;
  --touch-spacing: 12px;
}

/* ==========================================================================
   MOBILE HAMBURGER MENU
   ========================================================================== */

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-right: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.mobile-menu-toggle:hover {
  background: var(--card-bg-hover);
}

.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle span:nth-child(1) {
  margin-bottom: 5px;
}

.mobile-menu-toggle span:nth-child(3) {
  margin-top: 5px;
}

/* Hamburger animation when menu is open */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  z-index: 999;
  overflow-y: auto;
  padding: 16px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

.mobile-nav-drawer .nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 1rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.mobile-nav-drawer .nav-item:hover,
.mobile-nav-drawer .nav-item.active {
  background: var(--card-bg);
  color: var(--text-primary);
}

.mobile-nav-drawer .nav-icon {
  font-size: 1.2rem;
}

/* ==========================================================================
   LOGO RESPONSIVE BEHAVIOR
   Show abbreviated name on mobile, full name on desktop
   ========================================================================== */

.logo-text-short {
  display: none;
}

.logo-text-full {
  display: inline;
}

/* ==========================================================================
   LARGE DESKTOP (1536px+)
   ========================================================================== */
@media (min-width: 1536px) {
  .main-content {
    max-width: 1600px;
    padding: 24px 40px;
  }

  .games-grid,
  .matchups-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   DESKTOP (1280px - 1536px)
   ========================================================================== */
@media (max-width: 1536px) and (min-width: 1280px) {
  .main-content {
    padding: 20px 32px;
  }
}

/* ==========================================================================
   SMALL DESKTOP / LARGE TABLET (1024px - 1280px)
   ========================================================================== */
@media (max-width: 1280px) {
  .vanilla-header .header-left {
    gap: 4px;
  }

  .vanilla-header .nav-item {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .vanilla-header .nav-label {
    display: none;
  }

  .vanilla-header .nav-icon {
    font-size: 1.1rem;
  }

  .header-right .nav-search-input {
    width: 150px;
  }
}

/* ==========================================================================
   TABLET (768px - 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Header adjustments */
  .vanilla-header {
    padding: 8px 16px;
  }

  .vanilla-header .logo-text {
    font-size: 0.95rem;
  }

  .vanilla-header .header-right {
    gap: 6px;
  }

  .nav-export-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
  }

  .nav-search-input {
    width: 120px !important;
  }

  /* Grid layouts */
  .games-grid,
  .matchups-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .players-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Cards */
  .game-card,
  .game-card-clean {
    padding: 16px;
  }
}

/* ==========================================================================
   MOBILE LANDSCAPE / SMALL TABLET (640px - 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Show hamburger menu */
  .mobile-menu-toggle {
    display: flex;
  }

  .mobile-nav-drawer {
    display: block;
  }

  /* Hide desktop nav items */
  .vanilla-header .header-left .nav-item {
    display: none;
  }

  /* Logo stays visible */
  .vanilla-header .logo {
    display: flex;
  }

  /* Show short logo text on mobile */
  .logo-text-short {
    display: inline;
  }

  .logo-text-full {
    display: none;
  }

  /* Header layout */
  .vanilla-header {
    padding: 8px 12px;
    min-height: 56px;
  }

  .vanilla-header .header-left {
    flex: 1;
  }

  .vanilla-header .header-right {
    gap: 4px;
  }

  /* Hide less important header buttons on mobile */
  .nav-export-btn {
    display: none;
  }

  .nav-date-input {
    width: 120px;
    font-size: 0.85rem;
  }

  .nav-search-input {
    width: 100px !important;
    font-size: 0.85rem;
  }

  /* Main content */
  .main-content {
    padding: 12px;
    margin-top: 56px;
  }

  /* Single column grids */
  .games-grid,
  .matchups-grid,
  .players-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Page headers */
  .page-header h1,
  .gradient-text {
    font-size: 1.5rem;
  }

  .page-header .subtitle {
    font-size: 0.9rem;
  }

  /* Cards */
  .game-card,
  .game-card-clean {
    padding: 14px;
    border-radius: 12px;
  }

  /* Target chips */
  .gc-target-chips {
    flex-wrap: wrap;
    gap: 6px;
  }

  .gc-target-chip {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  /* Tables */
  .leaderboard-table {
    font-size: 0.85rem;
  }

  .leaderboard-table th,
  .leaderboard-table td {
    padding: 8px 6px;
  }
}

/* ==========================================================================
   MOBILE PORTRAIT (480px and below)
   ========================================================================== */
@media (max-width: 480px) {
  /* Very compact header */
  .vanilla-header {
    padding: 6px 10px;
    min-height: 52px;
  }

  .vanilla-header .logo-img {
    height: 28px;
  }

  .vanilla-header .logo-text,
  .logo-text-short {
    font-size: 0.9rem;
  }

  /* Hide search on very small screens */
  .nav-search-input {
    display: none;
  }

  .nav-date-input {
    width: 100px;
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  /* Main content */
  .main-content {
    padding: 10px 8px;
    margin-top: 52px;
  }

  /* Page headers */
  .page-header {
    margin-bottom: 12px;
  }

  .page-header h1,
  .gradient-text {
    font-size: 1.25rem;
  }

  /* Cards */
  .game-card,
  .game-card-clean {
    padding: 12px;
  }

  .gc-header {
    flex-direction: column;
    gap: 8px;
  }

  .gc-teams {
    gap: 12px;
  }

  .gc-projections {
    gap: 8px;
  }

  .gc-proj-value {
    font-size: 1.1rem;
  }

  /* Player cards */
  .player-card {
    padding: 12px;
  }

  /* Tabs and filters */
  .filter-tabs,
  .position-filters {
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-tab,
  .position-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  /* Summary bars */
  .slate-summary-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .summary-stat-card {
    flex: 1 1 calc(33% - 8px);
    min-width: 80px;
    padding: 8px;
  }

  .summary-stat-value {
    font-size: 1.2rem;
  }

  .summary-stat-label {
    font-size: 0.65rem;
  }
}

/* ==========================================================================
   TOUCH DEVICE DETECTION
   Adjustments for touch-based devices (phones, tablets)
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .nav-item,
  .filter-tab,
  .position-btn,
  button,
  .btn {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }

  /* More spacing between interactive elements */
  .gc-target-chips {
    gap: var(--touch-spacing);
  }

  .filter-tabs,
  .position-filters {
    gap: var(--touch-spacing);
  }

  /* Remove hover effects that don't work on touch */
  .game-card:hover,
  .player-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  /* Active state for touch feedback */
  .nav-item:active,
  .filter-tab:active,
  .gc-target-chip:active,
  button:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

/* ==========================================================================
   HIGH-DPI / RETINA DISPLAYS
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Thinner borders for crisp appearance on retina */
  .game-card,
  .game-card-clean,
  .player-card {
    border-width: 0.5px;
  }
}

/* ==========================================================================
   LANDSCAPE ORIENTATION ON MOBILE
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .vanilla-header {
    min-height: 48px;
  }

  .main-content {
    margin-top: 48px;
  }

  .mobile-nav-drawer {
    top: 48px;
  }

  /* Compact cards in landscape */
  .gc-projections {
    padding: 8px;
  }

  .gc-targets {
    padding: 8px 10px;
  }
}

/* ==========================================================================
   PRINT STYLES ENHANCEMENT
   ========================================================================== */
@media print {
  .mobile-menu-toggle,
  .mobile-nav-drawer,
  .nav-search-input,
  .nav-date-input,
  .nav-export-btn {
    display: none !important;
  }

  .main-content {
    margin-top: 0;
    padding: 0;
  }

  .games-grid,
  .matchups-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   REDUCED MOTION PREFERENCE
   Respect user preference for reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-drawer {
    transition: none;
  }

  .mobile-menu-toggle span {
    transition: none;
  }

  .nav-item:active,
  .filter-tab:active,
  button:active {
    transform: none;
  }
}

/* ==========================================================================
   DARK MODE DETECTION (if OS is in dark mode)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  /* Already using dark theme by default, but this ensures consistency */
  :root {
    color-scheme: dark;
  }
}

/* ==========================================================================
   ENHANCED PLAYER CARD - StatScore Style
   Premium player card design with photo, badges, season stats, projections
   ========================================================================== */

.player-card-enhanced {
  background: linear-gradient(145deg, #1a1f2e 0%, #0f1320 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.player-card-enhanced:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

/* Team logo watermark */
.player-card-enhanced .team-watermark {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  opacity: 0.06;
  pointer-events: none;
}

/* Card main layout */
.player-card-enhanced .card-main {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  position: relative;
  z-index: 1;
}

/* Player photo with ring */
.player-card-enhanced .player-photo-wrapper {
  flex-shrink: 0;
}

.player-card-enhanced .player-photo-ring {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.4), 0 0 40px rgba(59, 130, 246, 0.2);
}

.player-card-enhanced .player-photo-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #1e293b;
  border: 2px solid #0f172a;
  box-sizing: border-box;
}

.player-card-enhanced .player-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.player-card-enhanced .player-photo-circle .initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #64748b;
  background: #1e293b;
}

/* Player info section */
.player-card-enhanced .player-info {
  flex: 1;
  min-width: 0;
}

.player-card-enhanced .player-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px 0;
  line-height: 1.2;
}

.player-card-enhanced .player-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.player-card-enhanced .player-meta .team-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.player-card-enhanced .player-meta .team-logo-mini {
  width: 16px;
  height: 16px;
}

/* Status pills/badges row */
.player-card-enhanced .status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}

.player-card-enhanced .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Pill color variants */
.player-card-enhanced .status-pill.green {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.player-card-enhanced .status-pill.orange {
  background: rgba(249, 115, 22, 0.2);
  color: #f97316;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.player-card-enhanced .status-pill.yellow {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.player-card-enhanced .status-pill.nuclear {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(236, 72, 153, 0.3));
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.4);
}

.player-card-enhanced .status-pill.cold {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.25);
}

.player-card-enhanced .status-pill.gray {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.player-card-enhanced .status-pill.gold {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.player-card-enhanced .status-pill.purple {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Stats sections container */
.player-card-enhanced .card-stats {
  display: flex;
  gap: 12px;
  padding: 0 20px 20px;
  position: relative;
  z-index: 1;
}

/* Season stats box */
.player-card-enhanced .season-stats {
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 180px;
}

.player-card-enhanced .season-stats-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.player-card-enhanced .season-stats-header .gp {
  color: var(--text-dim);
  font-weight: 400;
}

.player-card-enhanced .season-stats-grid {
  display: flex;
  gap: 16px;
}

.player-card-enhanced .season-stat {
  text-align: center;
}

.player-card-enhanced .season-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.player-card-enhanced .season-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Projection box */
.player-card-enhanced .projection-box {
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid #ec4899;
  border-radius: 12px;
  padding: 12px 16px;
  position: relative;
}

.player-card-enhanced .projection-box::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.player-card-enhanced .projection-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  text-align: center;
}

.player-card-enhanced .projection-header .opponent {
  color: #fff;
}

.player-card-enhanced .projection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.player-card-enhanced .projection-stat {
  text-align: center;
}

.player-card-enhanced .projection-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.player-card-enhanced .projection-stat-value.highlight {
  color: #ec4899;
}

.player-card-enhanced .projection-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 3px;
}

/* Compact variant for lists/grids */
.player-card-enhanced.compact {
  padding: 0;
}

.player-card-enhanced.compact .card-main {
  padding: 16px;
}

.player-card-enhanced.compact .player-photo-circle {
  width: 60px;
  height: 60px;
}

.player-card-enhanced.compact .player-name {
  font-size: 1.1rem;
}

.player-card-enhanced.compact .card-stats {
  padding: 0 16px 16px;
}

.player-card-enhanced.compact .season-stats {
  min-width: 140px;
  padding: 12px;
}

.player-card-enhanced.compact .season-stat-value {
  font-size: 1rem;
}

/* Full-width variant for player detail page */
.player-card-enhanced.full-width {
  max-width: none;
}

.player-card-enhanced.full-width .card-main {
  padding: 24px;
}

.player-card-enhanced.full-width .player-photo-circle {
  width: 100px;
  height: 100px;
}

.player-card-enhanced.full-width .player-name {
  font-size: 1.75rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .player-card-enhanced .card-main {
    padding: 16px;
    gap: 12px;
  }

  .player-card-enhanced .player-photo-circle {
    width: 64px;
    height: 64px;
  }

  .player-card-enhanced .player-name {
    font-size: 1.2rem;
  }

  .player-card-enhanced .status-pills {
    gap: 4px;
  }

  .player-card-enhanced .status-pill {
    padding: 3px 8px;
    font-size: 10px;
  }

  .player-card-enhanced .card-stats {
    flex-direction: column;
    padding: 0 16px 16px;
  }

  .player-card-enhanced .season-stats {
    min-width: auto;
    width: 100%;
  }

  .player-card-enhanced .projection-box {
    width: 100%;
  }

  .player-card-enhanced .team-watermark {
    width: 120px;
    height: 120px;
    right: -10px;
  }
}

/* ==========================================================================
   Enhanced Player Card - Heat Level Borders
   ========================================================================== */

.player-card-enhanced.heat-supernova {
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.player-card-enhanced.heat-nuclear {
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.15);
}

.player-card-enhanced.heat-hot {
  border-color: rgba(249, 115, 22, 0.3);
}

.player-card-enhanced.heat-cold {
  border-color: rgba(96, 165, 250, 0.3);
}

.player-card-enhanced.heat-frozen {
  border-color: rgba(147, 197, 253, 0.3);
}

/* ==========================================================================
   Performance Trends Section (PropFinder-style)
   ========================================================================== */

.performance-trends {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1rem 0;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.performance-trends-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.performance-trends-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #60a5fa;
}

.performance-trends-title .icon {
  font-size: 1.2rem;
}

/* Matchup Badge */
.matchup-badge-compact {
  background: rgba(249, 115, 22, 0.2);
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: 20px;
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fb923c;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.matchup-badge-compact .dot {
  font-size: 0.5rem;
}

/* Filter Toggles Container */
.performance-filters {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Filter Group */
.filter-group {
  display: flex;
  gap: 0.25rem;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 8px;
  padding: 0.2rem;
  border: 1px solid rgba(148, 163, 184, 0.1);
}

/* Filter Toggle Button */
.filter-toggle {
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-toggle:hover {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.1);
}

.filter-toggle.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Averages Panel */
.performance-averages {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.08);
}

.averages-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.averages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .averages-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.avg-stat {
  text-align: center;
}

.avg-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
}

.avg-stat-value.highlight-purple {
  color: #a78bfa;
}

.avg-stat-value.highlight-pink {
  color: #ec4899;
}

.avg-stat-value.highlight-green {
  color: #34d399;
}

.avg-stat-value.highlight-blue {
  color: #60a5fa;
}

.avg-stat-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.15rem;
}

/* Charts Grid */
.performance-charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .performance-charts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .performance-charts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Individual Chart Panel */
.performance-chart-panel {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
  padding: 0.875rem;
  border: 1px solid rgba(148, 163, 184, 0.08);
}

.chart-panel-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chart-panel-title .subtitle {
  font-size: 0.65rem;
  font-weight: 500;
  color: #64748b;
}

/* Mini Bar Chart */
.mini-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 80px;
  gap: 0.35rem;
  padding: 0.5rem 0;
}

.mini-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 50px;
}

.mini-bar-value {
  font-size: 0.7rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 0.25rem;
}

.mini-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease;
}

.mini-bar.hit {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}

.mini-bar.miss {
  background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
}

.mini-bar.empty {
  background: rgba(148, 163, 184, 0.15);
}

/* Points bars - purple */
.mini-bar.hit.type-pts {
  background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%);
}

/* Goals bars - pink/magenta */
.mini-bar.hit.type-goals {
  background: linear-gradient(180deg, #ec4899 0%, #db2777 100%);
}

/* Assists bars - green */
.mini-bar.hit.type-assists {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}

/* SOG bars - blue */
.mini-bar.hit.type-sog {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
}

.mini-bar-label {
  font-size: 0.6rem;
  color: #64748b;
  margin-top: 0.3rem;
  font-weight: 500;
}

/* No Data Message */
.no-data-message {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  color: #64748b;
  font-size: 0.75rem;
  font-style: italic;
}

/* ==========================================================================
   Performance Trends - Performance Grid & Cards
   ========================================================================== */

/* Filter Toggles Container */
.filter-toggles {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Performance Grid */
.performance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .performance-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Performance Card */
.perf-card {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 10px;
  padding: 0.875rem;
  border: 1px solid rgba(148, 163, 184, 0.08);
}

.perf-card-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.perf-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.perf-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
}

.perf-stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  font-size: 0.7rem;
  color: #64748b;
}

.stat-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f1f5f9;
}

/* Averages Card */
.averages-card {
  grid-column: 1 / -1;
}

/* Season Totals Card */
.season-totals-card {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.05));
  border-color: rgba(34, 197, 94, 0.3);
}

.season-totals-card .perf-card-header {
  color: #22c55e;
}

@media (min-width: 768px) {
  .averages-card {
    grid-column: 1 / 2;
  }

  .season-totals-card {
    grid-column: 2 / 3;
  }
}

/* Performance Summary */
.perf-summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f1f5f9;
}

.summary-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: #64748b;
  text-transform: uppercase;
}

/* Mini Bars for L5 Data */
.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  padding: 0.25rem 0;
}

.mini-bars.empty {
  color: #64748b;
  font-size: 0.7rem;
  font-style: italic;
  align-items: center;
  justify-content: center;
}

.mini-bars .mini-bar {
  flex: 1;
  min-height: 4px;
  max-width: 25px;
  border-radius: 2px 2px 0 0;
  transition: height 0.2s ease;
}

.mini-bars .mini-bar.hit {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}

.mini-bars .mini-bar.miss {
  background: rgba(148, 163, 184, 0.3);
}

/* Splits Card */
.splits-card {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .splits-card {
    grid-column: auto;
  }
}

.splits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.split-col {
  text-align: center;
}

.split-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.split-stat {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 0.2rem;
}

.split-games {
  font-size: 0.65rem;
  color: #64748b;
}

/* Section Header for Performance Trends */
.performance-trends .section-header {
  margin-bottom: 1rem;
}

.performance-trends .section-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #60a5fa;
  margin: 0;
}

/* Defense Rankings Section - Games Page */
.defense-rankings-section {
  margin-top: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.defense-rankings-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  user-select: none;
}

.defense-rankings-section .section-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.defense-rankings-section .section-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.defense-rankings-section .toggle-icon {
  font-size: 0.75rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.defense-rankings-section .section-content {
  padding: 20px;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.defense-rankings-section .section-content.collapsed {
  max-height: 0;
  padding: 0 20px;
  overflow: hidden;
}

.defense-rankings-section .rankings-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.defense-rankings-section .rankings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.defense-rankings-section .rankings-tab {
  padding: 8px 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.defense-rankings-section .rankings-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.defense-rankings-section .rankings-tab.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
}

.defense-rankings-section .rankings-content {
  max-height: 400px;
  overflow-y: auto;
}

.defense-rankings-section .rankings-row.highlighted {
  background: rgba(59, 130, 246, 0.2);
  border-left-color: #3b82f6;
}

/* ===================================
   SPREAD RECOMMENDATIONS SECTION
   xG Regression - 70-79% Backtest
   =================================== */

.spread-recommendations-section {
  margin: 20px 0;
  padding: 20px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}

.spread-recommendations-section .section-header.spread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.spread-recommendations-section .section-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.spread-recommendations-section .section-subtitle {
  font-size: 0.875rem;
  color: var(--success-green);
  font-weight: 600;
}

.spread-picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.spread-tier {
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid var(--border-color);
}

.spread-tier.strong {
  border-color: #f97316;
  background: rgba(249, 115, 22, 0.1);
}

.spread-tier.good {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.spread-tier.base {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.tier-header {
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.spread-pick-card {
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 8px;
}

.spread-pick-card:last-child {
  margin-bottom: 0;
}

.spread-matchup {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.spread-bet {
  font-weight: 700;
  color: var(--success-green);
  font-size: 1rem;
}

.spread-vs {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.spread-home {
  color: var(--text-secondary);
  font-weight: 600;
}

.spread-rationale {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.4;
}

.spread-xg-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.xg-badge {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.xg-badge.due {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.xg-badge.cooldown {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.spread-legend {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.spread-legend .legend-item {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .spread-picks-grid {
    grid-template-columns: 1fr;
  }

  .spread-legend {
    flex-direction: column;
    gap: 8px;
  }
}

/* ==========================================
   GAME DETAIL PAGE STYLES (Dec 29, 2025)
   ========================================== */

/* View All Players Link on Home Page */
.game-view-details-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  margin: 12px 16px 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(102, 126, 234, 0.08));
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 12px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.game-view-details-link:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(102, 126, 234, 0.15));
  border-color: rgba(102, 126, 234, 0.5);
  transform: translateY(-1px);
}

.view-details-icon {
  font-size: 1.2em;
}

/* Game Detail Page */
.game-detail-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.game-nav {
  margin-bottom: 20px;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.back-btn:hover {
  color: var(--primary);
}

.back-icon {
  font-size: 1.2em;
}

/* Game Header */
.game-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  background: var(--card-bg);
  border-radius: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}

.game-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.team-details {
  text-align: center;
}

.team-details .team-name {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
}

.team-details .team-record {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.game-vs-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
}

.vs-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-muted);
}

.game-time-info {
  text-align: center;
}

.game-time-big {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
}

.game-venue {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Game Sections */
.game-section {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
}

.section-subtitle {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

/* Goalie Matchup */
.goalie-matchup {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
}

.goalie-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.goalie-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.goalie-details .goalie-name {
  display: block;
  font-weight: 600;
  font-size: 1rem;
}

.goalie-details .goalie-stat {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.vs-badge.small {
  font-size: 0.9rem;
  padding: 4px 12px;
  background: var(--surface);
  border-radius: 8px;
  color: var(--text-muted);
}

/* Phase Section */
.phase-comparison {
  display: flex;
  gap: 16px;
}

.phase-card {
  flex: 1;
  padding: 16px;
  background: var(--surface);
  border-radius: 10px;
  text-align: center;
  border: 2px solid transparent;
}

.phase-card.due {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent);
}

.phase-card.hot {
  border-color: rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent);
}

.phase-card.cooldown {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
}

.phase-team {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.phase-name {
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.phase-xg {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.phase-xg.due { color: var(--success); }
.phase-xg.hot { color: var(--danger); }

/* Spread Section */
.spread-section {
  border-left: 4px solid var(--primary);
}

.spread-section.strong {
  border-color: var(--danger);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), transparent);
}

.spread-section.good {
  border-color: var(--success);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), transparent);
}

.spread-pick-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spread-bet-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spread-pick-bet {
  font-size: 1.2rem;
  font-weight: 700;
}

/* Stats Section */
.game-stats-grid {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.stat-block {
  text-align: center;
  padding: 16px 24px;
  background: var(--surface);
  border-radius: 10px;
}

.stat-block.highlight {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(102, 126, 234, 0.05));
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.stat-block .stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
}

.stat-block .stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Players Section */
.game-players-section {
  margin-top: 24px;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.teams-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.team-players-card {
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.team-players-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-color);
}

.team-players-title {
  font-weight: 600;
  font-size: 1.1rem;
}

.players-table {
  padding: 8px;
}

.players-table-header {
  display: grid;
  grid-template-columns: 1fr 80px 60px 60px 50px;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
}

.player-table-row {
  display: grid;
  grid-template-columns: 1fr 80px 60px 60px 50px;
  gap: 8px;
  padding: 10px 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  transition: background 0.2s;
}

.player-table-row:hover {
  background: var(--surface);
}

.player-table-row.hot {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), transparent);
}

.player-table-row.cold {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), transparent);
}

.col-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.player-name-text {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-pos {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.heat-icon {
  font-size: 0.85rem;
}

.col-context {
  display: flex;
  gap: 4px;
}

.line-badge.small, .pp-badge.small {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface);
}

.pp-badge.small {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}

.col-ags, .col-sog, .col-odds {
  text-align: center;
  font-weight: 500;
}

.col-ags.elite { color: var(--gold); }
.col-ags.good { color: var(--success); }

/* Odds column styling */
.col-odds {
  color: var(--accent-primary);
  font-size: 0.85rem;
  white-space: nowrap;
}
.col-odds .book-abbrev {
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Game not found */
.game-not-found {
  text-align: center;
  padding: 60px 20px;
}

.game-not-found .not-found-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .game-detail-header {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  .game-vs-section {
    flex-direction: row;
    padding: 10px 0;
  }

  .teams-grid {
    grid-template-columns: 1fr;
  }

  .goalie-matchup {
    flex-direction: column;
  }

  .phase-comparison {
    flex-direction: column;
  }

  .game-stats-grid {
    flex-direction: column;
  }

  .players-table-header,
  .player-table-row {
    grid-template-columns: 1fr 50px 45px 50px 35px;
  }
}

/* =========================================
   GAME DETAIL PAGE - ENHANCED STYLING (v2)
   ========================================= */

/* Override game detail header for larger logos */
.game-detail-header {
  background: linear-gradient(180deg, var(--card-bg) 0%, rgba(30, 30, 45, 0.95) 100%);
  padding: 40px 50px;
  position: relative;
  overflow: hidden;
}

.game-detail-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(var(--away-color-rgb, 102, 126, 234), 0.08) 0%, 
    transparent 50%, 
    rgba(var(--home-color-rgb, 234, 102, 126), 0.08) 100%);
  pointer-events: none;
}

/* Make team logos much larger */
.game-detail-header .team-logo {
  width: 100px !important;
  height: 100px !important;
  filter: 
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4))
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.85))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.85))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.85));
  transition: transform 0.3s ease;
}

.game-detail-header .team-logo:hover {
  transform: scale(1.08);
}

/* Team name styling */
.game-team {
  z-index: 1;
}

.team-details .team-name {
  font-size: 1.75rem !important;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.team-details .team-record {
  font-size: 1rem;
  opacity: 0.8;
  margin-top: 4px;
}

/* VS section styling */
.game-vs-section {
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
  padding: 15px 30px;
  border-radius: 12px;
}

.vs-text {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.game-time-big {
  font-size: 1.4rem !important;
  font-weight: 700;
  color: var(--text-primary);
}

.game-venue {
  font-size: 0.9rem;
  margin-top: 4px;
}

/* Goalie section improvements */
.goalie-matchup-section {
  background: linear-gradient(135deg, var(--card-bg), rgba(30, 30, 45, 0.9));
}

.goalie-card {
  padding: 16px 24px;
  background: var(--surface);
  border-radius: 12px;
  min-width: 180px;
}

.goalie-placeholder {
  width: 70px;
  height: 70px;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--surface), rgba(255, 255, 255, 0.05));
  border: 2px solid var(--border-color);
}

.goalie-details .goalie-name {
  font-size: 1.1rem;
  font-weight: 700;
}

/* Goalie status badges */
.goalie-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.goalie-status.confirmed {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.goalie-status.expected {
  background: rgba(102, 126, 234, 0.2);
  color: var(--primary);
  border: 1px solid rgba(102, 126, 234, 0.3);
}

.goalie-status.likely {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.goalie-status.unknown {
  background: rgba(100, 100, 100, 0.2);
  color: var(--text-muted);
  border: 1px solid rgba(100, 100, 100, 0.3);
}

.goalie-stat {
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-top: 2px;
}

.vs-badge.small {
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--surface), rgba(102, 126, 234, 0.1));
  border: 1px solid var(--border-color);
}

/* Phase section improvements */
.phase-section {
  background: linear-gradient(135deg, var(--card-bg), rgba(30, 30, 45, 0.9));
}

.phase-card {
  padding: 20px;
  border-radius: 12px;
}

.phase-team {
  font-size: 1.25rem;
}

.phase-name {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}

/* Stats section improvements */
.stats-section {
  background: linear-gradient(135deg, var(--card-bg), rgba(30, 30, 45, 0.9));
}

.stat-block {
  padding: 20px 30px;
  min-width: 120px;
}

.stat-block .stat-value {
  font-size: 1.75rem;
}

/* Player table improvements */
.team-players-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.team-players-header {
  padding: 18px 20px;
}

.team-players-header .team-logo {
  width: 36px !important;
  height: 36px !important;
}

.team-players-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.players-table-header {
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 10px 14px;
}

.player-table-row {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.player-table-row:last-child {
  border-bottom: none;
}

.player-name-text {
  font-size: 0.95rem;
}

.col-ags, .col-sog {
  font-size: 0.95rem;
}

/* Back button improvements */
.back-btn {
  padding: 8px 16px;
  background: var(--surface);
  border-radius: 8px;
  font-weight: 500;
}

.back-btn:hover {
  background: rgba(102, 126, 234, 0.15);
}

/* Section titles */
.section-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mobile responsive updates */
@media (max-width: 768px) {
  .game-detail-header {
    padding: 25px 20px;
  }
  
  .game-detail-header .team-logo {
    width: 70px !important;
    height: 70px !important;
  }
  
  .team-details .team-name {
    font-size: 1.3rem !important;
  }
  
  .game-vs-section {
    padding: 10px 20px;
  }
  
  .vs-text {
    font-size: 1.5rem;
  }
  
  .goalie-card {
    min-width: 140px;
    padding: 12px 16px;
  }
}

/* ===========================
   Totals & Spreads Section
   (Dec 30, 2025)
   =========================== */

.game-totals-spreads {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--dark-bg-secondary, #0f172a);
  border-radius: 12px;
  border: 1px solid var(--border-color, #334155);
}

.totals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #334155);
}

.totals-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-secondary, #e2e8f0);
  letter-spacing: 0.5px;
}

.totals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.total-card {
  text-align: center;
  padding: 10px 8px;
  background: var(--card-bg, #1e293b);
  border-radius: 8px;
  border: 1px solid var(--border-color, #334155);
}

.total-card.green {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
}

.total-card.green-light {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
}

.total-card.blue {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

.total-card.blue-light {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.25);
}

.total-label {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.total-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.total-value.green {
  color: var(--success-green, #10b981);
}

.total-value.blue {
  color: var(--info-blue, #3b82f6);
}

.total-prob {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
}

.spread-recommendation {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 8px;
}

.spread-label {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
}

.spread-pick {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--success-green, #10b981);
}

.spread-prob {
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
}

/* Responsive: Stack on mobile */
@media (max-width: 600px) {
  .totals-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .total-value {
    font-size: 1rem;
  }
}

/* ========================================
   LIVE SOG TRACKER STYLES
   ======================================== */

.live-tracker-page {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.live-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.live-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: rgba(239, 68, 68, 0.2);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ef4444;
}

.live-indicator .pulse {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.live-updated {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Hit Rate Legend */
.hit-rate-legend {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--card-bg);
  border-radius: 8px;
  font-size: 0.9rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-dot.elite { background: #10b981; }
.legend-dot.strong { background: #fbbf24; }
.legend-dot.good { background: #60a5fa; }

/* Leaders Grid */
.leaders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.leader-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.leader-card:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 4px 20px rgba(96, 165, 250, 0.15);
}

.leader-card.elite {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.leader-card.strong {
  border-color: rgba(251, 191, 36, 0.3);
}

/* Card Header */
.leader-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.leader-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.leader-headshot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--dark-bg-secondary);
  object-fit: cover;
}

.leader-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.leader-team {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.leader-sog {
  text-align: right;
}

.sog-count {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.sog-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Stats Row */
.leader-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--dark-bg-secondary);
  border-radius: 8px;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-value.hit-rate {
  color: var(--success-green);
}

.stat-value.hit-rate.strong {
  color: #fbbf24;
}

.stat-value.hit-rate.good {
  color: var(--primary-blue);
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Quick Bet Buttons */
.quick-bets {
  display: flex;
  gap: 0.5rem;
}

.quick-bet-btn {
  flex: 1;
  padding: 0.6rem 0.75rem;
  background: var(--dark-bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
}

.quick-bet-btn:hover {
  background: var(--card-bg-hover);
  border-color: var(--primary-blue);
}

.quick-bet-btn.dk { border-color: rgba(0, 150, 57, 0.3); }
.quick-bet-btn.fd { border-color: rgba(0, 116, 206, 0.3); }

/* Empty/Loading States */
.live-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px dashed var(--border-color);
}

.live-empty-state h2 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.live-empty-state p {
  color: var(--text-muted);
  font-size: 1rem;
}

.live-empty-state .games-today {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--dark-bg-secondary);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .live-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .hit-rate-legend {
    gap: 0.5rem;
  }

  .legend-item {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }

  .leaders-grid {
    grid-template-columns: 1fr;
  }

  .leader-card {
    padding: 1rem;
  }

  .sog-count {
    font-size: 1.5rem;
  }
}

/* ===========================================
   Box Scores Page Styles
   =========================================== */

.boxscores-page {
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.boxscores-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.boxscores-header h1 {
  font-size: 1.75rem;
  color: var(--text-primary);
  margin: 0;
}

/* Date Navigation */
.date-navigation {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 0.25rem;
}

.date-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-nav-btn:hover {
  background: var(--hover-bg);
  color: var(--primary-blue);
}

.date-nav-btn .nav-arrow {
  font-size: 0.9rem;
}

.date-display {
  position: relative;
  padding: 0.5rem 1rem;
}

.date-input-hidden {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}

.date-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
}

.date-text:hover {
  color: var(--primary-blue);
}

/* Quick Dates */
.quick-dates {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--card-bg);
  border-radius: 10px;
  overflow-x: auto;
}

.quick-dates-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.quick-dates-list {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.quick-dates-list::-webkit-scrollbar {
  display: none;
}

.quick-date-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--hover-bg);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.2s ease;
  min-width: 55px;
  border: 2px solid transparent;
}

.quick-date-btn:hover {
  background: var(--primary-blue);
  color: white;
}

.quick-date-btn.active {
  background: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}

.quick-date-btn .qd-day {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.quick-date-btn .qd-num {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Legacy date picker (fallback) */
.boxscores-date-picker .date-input {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
}

.boxscores-date-picker .date-input:hover {
  border-color: var(--primary-blue);
}

.boxscores-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 1rem;
}

.summary-stat {
  text-align: center;
  padding: 0.5rem;
}

.summary-stat .stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}

.summary-stat .stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.summary-stat.positive .stat-value {
  color: var(--success-green);
}

.summary-stat.negative .stat-value {
  color: var(--danger-red);
}

.boxscores-games {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.game-box {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.game-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  background: var(--gradient-primary);
  cursor: pointer;
}

.game-box-header .matchup {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.1rem;
}

.game-box-header .team {
  color: var(--text-secondary);
  font-weight: 500;
}

.game-box-header .team.winner {
  color: var(--primary-gold);
  font-weight: 700;
}

.game-box-header .score {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  padding: 0.25rem 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.game-box-header .game-stats {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.game-box-header .hit-rate {
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.game-box-header .hit-rate.positive {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-green);
}

.game-box-header .hit-rate.negative {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger-red);
}

.game-box-header .scorers-count {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.game-box-header .expand-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.85rem;
  transition: transform 0.2s;
}

.game-box-header .expand-btn:hover {
  color: var(--text-primary);
}

/* Live Game Styles */
.game-box.live-game {
  border: 2px solid var(--primary-green);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: pulse 2s infinite;
  margin-right: auto;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.game-box-details {
  padding: 1.25rem;
  background: var(--dark-bg-secondary);
  border-top: 1px solid var(--border-color);
}

.players-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.players-section h4 {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.player-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--card-bg);
  border-radius: 6px;
  border-left: 3px solid transparent;
}

.player-row.predicted {
  border-left-color: var(--primary-blue);
  background: rgba(96, 165, 250, 0.1);
}

.player-row.scored {
  border-left-color: var(--primary-gold);
}

.player-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.player-info .player-name {
  font-weight: 500;
  color: var(--text-primary);
}

.player-info .player-team {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.player-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.player-stats .goals {
  font-weight: 700;
  color: var(--primary-gold);
}

.player-stats .sog {
  color: var(--text-secondary);
  font-weight: 500;
}

.player-stats .xg {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.player-stats .prediction {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  background: rgba(100, 116, 139, 0.3);
  color: var(--text-muted);
}

.player-stats .prediction.hit {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-green);
}

.player-stats .goal-indicator {
  font-size: 0.9rem;
}

.player-stats .no-pred {
  color: var(--text-dim);
}

.no-data {
  color: var(--text-muted);
  font-style: italic;
  padding: 0.5rem 0;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px dashed var(--border-color);
}

.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty-state h2 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.empty-state p {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* Mobile Responsive - Box Scores */
@media (max-width: 768px) {
  .boxscores-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .players-grid {
    grid-template-columns: 1fr;
  }

  .game-box-header {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .game-box-header .game-stats {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .boxscores-page {
    padding: 1rem;
  }

  .boxscores-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .summary-stat .stat-value {
    font-size: 1.35rem;
  }
}

/* ============================================
   Live Game Display Styles
   ============================================ */

/* Live page indicator */
.game-detail-page.is-live {
  border-top: 3px solid var(--danger-red);
}

/* Live refresh button */
.live-refresh-btn {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  transition: var(--transition);
}

.live-refresh-btn:hover {
  background: var(--card-bg-hover);
  border-color: var(--primary-blue);
}

.live-refresh-btn .refresh-icon {
  font-size: 1rem;
}

/* Live score section in header */
.live-score-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--danger-red);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.live-pulse {
  width: 10px;
  height: 10px;
  background: var(--danger-red);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.live-scores {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.live-scores .score {
  font-size: 2.5rem;
  font-weight: 700;
}

.live-scores .score.away-score {
  color: var(--primary-blue);
}

.live-scores .score.home-score {
  color: var(--primary-pink);
}

.live-scores .score-divider {
  font-size: 1.5rem;
  color: var(--text-muted);
}

.period-info {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Live header styling */
.game-detail-header.live-header {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--card-bg) 100%);
}

/* Live stats banner */
.live-stats-banner {
  background: var(--card-bg);
  border: 1px solid var(--danger-red);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
}

.live-stats-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.live-stats-header .live-pulse {
  width: 8px;
  height: 8px;
}

.live-stats-header .live-updated {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
}

.no-live-data {
  color: var(--text-muted);
  text-align: center;
  padding: 1rem;
}

.live-summary-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.live-summary-stats .summary-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.live-summary-stats .stat-icon {
  font-size: 1.5rem;
}

.live-summary-stats .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-blue);
}

.live-summary-stats .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Top performers list */
.live-top-performers h4 {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.top-performers-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.top-performer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--dark-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

.top-performer.scored {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.2) 0%, var(--dark-bg-secondary) 100%);
  border-left: 3px solid var(--success-green);
}

.top-performer.sog-hit {
  border-left: 3px solid var(--primary-blue);
}

.top-performer .performer-name {
  font-weight: 600;
  flex: 1;
}

.top-performer .performer-stats {
  color: var(--text-secondary);
}

.top-performer .performer-xg {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Live player row styles */
.player-table-row.live-row {
  background: rgba(239, 68, 68, 0.05);
}

.player-table-row.scored-row {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, var(--card-bg) 100%);
}

.player-table-row.scored-row .col-ags {
  color: var(--success-green);
  font-weight: 700;
}

.player-table-row.sog-hit-row .col-sog {
  color: var(--success-green);
  font-weight: 700;
}

.player-table-row .goal-icon {
  font-size: 1rem;
  margin-left: 0.25rem;
}

.col-sog.sog-hit {
  color: var(--success-green);
  font-weight: 700;
}

.col-ags.scored {
  color: var(--success-green);
  font-weight: 700;
}

.live-progress {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--dark-bg);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
}

/* Team card with live data */
.team-players-card.has-live-data {
  border-color: var(--danger-red);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.1);
}

.team-players-card.has-live-data .players-table-header {
  background: rgba(239, 68, 68, 0.1);
}

/* Game nav with refresh button */
.game-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .live-summary-stats {
    flex-direction: column;
    gap: 1rem;
  }

  .live-scores .score {
    font-size: 2rem;
  }

  .top-performer {
    flex-wrap: wrap;
  }

  .top-performer .performer-xg {
    width: 100%;
    margin-top: 0.25rem;
  }
}

/* ======================================
   LIVE TABLE COLUMNS
   ====================================== */

/* Live table has 6 columns instead of 5 */
.players-table.live-table .players-table-header,
.players-table.live-table .player-table-row {
  grid-template-columns: 2fr 0.8fr 0.6fr 0.6fr 0.6fr 0.6fr;
}

/* Live column styling */
.col-live-g,
.col-live-sog,
.col-xg {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.col-live-g.scored {
  color: var(--success-green);
  font-weight: 700;
  background: rgba(34, 197, 94, 0.1);
  border-radius: var(--radius-sm);
}

.col-live-sog.sog-hit {
  color: var(--warning-yellow);
  font-weight: 600;
  background: rgba(234, 179, 8, 0.1);
  border-radius: var(--radius-sm);
}

.col-xg {
  color: var(--text-secondary);
}

/* Live badge in header */
.live-badge {
  font-size: 0.7rem;
  padding: 0.125rem 0.5rem;
  background: var(--danger-red);
  color: white;
  border-radius: var(--radius-full);
  margin-left: auto;
  animation: live-pulse 1.5s ease-in-out infinite;
}

/* Player rows in live table */
.live-table .player-table-row {
  border-left: 3px solid transparent;
}

.live-table .player-table-row.scored-row {
  border-left-color: var(--success-green);
  background: rgba(34, 197, 94, 0.05);
}

.live-table .player-table-row.sog-hit-row:not(.scored-row) {
  border-left-color: var(--warning-yellow);
  background: rgba(234, 179, 8, 0.03);
}

/* Mobile responsive for live table */
@media (max-width: 768px) {
  .players-table.live-table .players-table-header,
  .players-table.live-table .player-table-row {
    grid-template-columns: 1.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
    gap: 0.25rem;
  }

  .col-live-g,
  .col-live-sog,
  .col-xg {
    font-size: 0.75rem;
  }
}

/* ============================================
   STATSOVERSCORE BOXSCORES DESIGN
   Dark navy theme inspired by statsoverscore.com
   ============================================ */

/* Container and Layout */
.sos-boxscores {
  padding: 1.5rem;
  background: linear-gradient(180deg, #0a0a0f 0%, #0f172a 100%);
  min-height: 100vh;
}

.sos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.sos-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sos-title-icon {
  font-size: 1.5rem;
}

/* Summary Bar */
.sos-summary-bar {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sos-summary-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(30, 41, 59, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.sos-summary-icon {
  font-size: 1rem;
}

.sos-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #3b82f6;
}

.sos-value-blue {
  color: #3b82f6 !important;
}

.sos-value-green {
  color: #22c55e !important;
}

.sos-value-red {
  color: #ef4444 !important;
}

.sos-value-gold {
  color: #fbbf24 !important;
}

.sos-summary-label {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Games Grid */
.sos-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

/* Game Card */
.sos-game-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.15);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.sos-game-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
}

.sos-game-card.live {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15);
}

.sos-game-card.live:hover {
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.25);
}

/* Card Header */
.sos-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(15, 23, 42, 0.5);
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.sos-period-info {
  font-size: 0.875rem;
  color: #94a3b8;
  font-weight: 500;
}

.sos-live-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sos-live-dot {
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
  animation: sos-pulse 1.5s infinite;
}

@keyframes sos-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.sos-final-badge {
  padding: 0.25rem 0.625rem;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #22c55e;
  text-transform: uppercase;
}

/* Teams Section */
.sos-teams-section {
  padding: 1rem;
}

.sos-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.sos-team:first-child {
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.sos-team-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sos-team-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.sos-team-name {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.sos-team-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sos-score {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  min-width: 2rem;
  text-align: center;
}

.sos-team.away .sos-score {
  color: #3b82f6;
}

.sos-team.home .sos-score {
  color: #ec4899;
}

.sos-sog-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sos-sog-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #3b82f6;
}

.sos-sog-label {
  font-size: 0.625rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Pills Section */
.sos-pills-section {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}

.sos-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.sos-pill.hot {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(234, 88, 12, 0.15) 100%);
  border: 1px solid rgba(249, 115, 22, 0.4);
  color: #f97316;
}

.sos-pill.scored {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.15) 100%);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.sos-pill.bettable {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #3b82f6;
}

.sos-pill.away {
  border-left: 3px solid #3b82f6;
}

.sos-pill.home {
  border-left: 3px solid #ec4899;
}

.sos-pill-icon {
  font-size: 0.875rem;
}

.sos-pill-sog {
  font-weight: 700;
  margin-left: 0.25rem;
}

/* Expandable Section */
.sos-expand-btn {
  width: 100%;
  padding: 0.75rem;
  background: rgba(15, 23, 42, 0.5);
  border: none;
  border-top: 1px solid rgba(59, 130, 246, 0.1);
  color: #64748b;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.sos-expand-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.sos-expand-icon {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.sos-expand-btn.expanded .sos-expand-icon {
  transform: rotate(180deg);
}

/* Details Section */
.sos-details {
  display: none;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.3);
  border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.sos-details.show {
  display: block;
}

.sos-details-section {
  margin-bottom: 1rem;
}

.sos-details-section:last-child {
  margin-bottom: 0;
}

.sos-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sos-section-icon {
  font-size: 0.875rem;
}

/* Player Table */
.sos-player-table {
  width: 100%;
  border-collapse: collapse;
}

.sos-player-table th,
.sos-player-table td {
  padding: 0.5rem;
  text-align: left;
  font-size: 0.8125rem;
}

.sos-player-table th {
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.sos-player-table td {
  color: #e2e8f0;
  border-bottom: 1px solid rgba(59, 130, 246, 0.05);
}

.sos-player-table tr:last-child td {
  border-bottom: none;
}

.sos-player-table .player-name {
  font-weight: 600;
  color: #ffffff;
}

.sos-player-table .stat-goals {
  color: #22c55e;
  font-weight: 700;
}

.sos-player-table .stat-sog {
  color: #3b82f6;
  font-weight: 600;
}

.sos-player-table .stat-xg {
  color: #a78bfa;
  font-weight: 500;
}

.sos-player-table .stat-hd {
  color: #f97316;
  font-weight: 500;
}

.sos-player-table .rank {
  color: #64748b;
  font-weight: 500;
  font-size: 0.75rem;
}

.sos-player-table tr.scored-row {
  background: rgba(34, 197, 94, 0.08);
}

.sos-player-table tr.hot-row {
  background: rgba(249, 115, 22, 0.08);
}

/* Empty State */
.sos-empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: #64748b;
}

.sos-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.sos-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 0.5rem;
}

.sos-empty-text {
  font-size: 0.875rem;
  color: #64748b;
}

/* Loading State */
.sos-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: #64748b;
}

.sos-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(59, 130, 246, 0.2);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: sos-spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes sos-spin {
  to { transform: rotate(360deg); }
}

.sos-loading-text {
  font-size: 0.875rem;
  color: #94a3b8;
}

/* Responsive Design */
@media (max-width: 768px) {
  .sos-boxscores {
    padding: 1rem;
  }

  .sos-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sos-title {
    font-size: 1.5rem;
  }

  .sos-summary-bar {
    width: 100%;
    justify-content: space-between;
  }

  .sos-summary-item {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem;
    justify-content: center;
  }

  .sos-games-grid {
    grid-template-columns: 1fr;
  }

  .sos-team-name {
    font-size: 0.875rem;
  }

  .sos-team-logo {
    width: 28px;
    height: 28px;
  }

  .sos-score {
    font-size: 1.25rem;
  }

  .sos-pills-section {
    gap: 0.375rem;
  }

  .sos-pill {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
  }

  .sos-player-table th,
  .sos-player-table td {
    padding: 0.375rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .sos-summary-bar {
    gap: 0.5rem;
  }

  .sos-summary-item {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
  }

  .sos-summary-value {
    font-size: 1rem;
  }

  .sos-summary-label {
    font-size: 0.625rem;
  }

  .sos-team-stats {
    gap: 0.5rem;
  }

  .sos-sog-value {
    font-size: 1rem;
  }
}

/* ============================================
   SETTINGS PAGE - Editorial/Geometric Design
   ============================================ */

.settings-page {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #0a0a0f 0%, #0f172a 100%);
  padding-bottom: 4rem;
}

.settings-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
    linear-gradient(45deg, transparent 0%, rgba(139, 92, 246, 0.02) 100%);
  pointer-events: none;
}

/* Settings Header */
.settings-header {
  position: relative;
  padding: 2.5rem 2rem 2rem;
  margin-bottom: 2rem;
}

.settings-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 900px;
  margin: 0 auto;
}

.settings-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #3b82f6;
  text-transform: uppercase;
}

.settings-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.settings-header-accent {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  transform: skewX(-20deg);
  margin-left: 2rem;
}

/* Save Indicator */
.settings-save-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.settings-save-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

.save-icon {
  color: #22c55e;
  font-weight: 700;
}

.save-text {
  color: #22c55e;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Settings Container */
.settings-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Settings Section */
.settings-section {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  animation: settingsFadeIn 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes settingsFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.section-icon {
  font-size: 1.25rem;
  color: #3b82f6;
}

.settings-section-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}

.settings-description {
  font-size: 0.875rem;
  color: #94a3b8;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* Profile Section */
.settings-profile-section {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(30, 41, 59, 0.4) 100%);
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-initials {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.profile-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}

.profile-email {
  font-size: 0.875rem;
  color: #94a3b8;
}

.profile-tier {
  display: inline-block;
  width: fit-content;
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 20px;
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.profile-tier.premium {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}

.profile-tier.admin {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.3);
}

.btn-logout {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-logout:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Settings Grid */
.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Settings Row */
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(59, 130, 246, 0.08);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  padding-right: 2rem;
}

.settings-label-text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #e2e8f0;
  cursor: pointer;
}

.settings-row .settings-description {
  margin-bottom: 0;
  font-size: 0.8125rem;
  color: #64748b;
}

.settings-row-control {
  flex-shrink: 0;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(71, 85, 105, 0.5);
  border: 1px solid rgba(71, 85, 105, 0.8);
  border-radius: 28px;
  transition: all 0.3s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 2px;
  bottom: 2px;
  background: #94a3b8;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: rgba(59, 130, 246, 0.3);
  border-color: #3b82f6;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(24px);
  background: #3b82f6;
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Select Dropdown */
.settings-select {
  padding: 0.625rem 2rem 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  min-width: 140px;
}

.settings-select:hover {
  border-color: rgba(59, 130, 246, 0.4);
}

.settings-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.settings-select option {
  background: #1e293b;
  color: #e2e8f0;
}

/* Range Slider */
.range-control {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.settings-range {
  width: 120px;
  height: 6px;
  background: rgba(71, 85, 105, 0.5);
  border-radius: 3px;
  appearance: none;
  cursor: pointer;
}

.settings-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: #3b82f6;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

.settings-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.range-value {
  min-width: 40px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #3b82f6;
  text-align: right;
}

/* Teams Grid */
.teams-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.team-chip {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(71, 85, 105, 0.5);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.team-chip:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #e2e8f0;
}

.team-chip.selected {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #3b82f6;
}

/* Action Buttons */
.settings-actions {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary {
  color: #94a3b8;
  background: rgba(71, 85, 105, 0.2);
  border: 1px solid rgba(71, 85, 105, 0.4);
}

.btn-secondary:hover {
  background: rgba(71, 85, 105, 0.3);
  color: #e2e8f0;
}

.btn-icon {
  font-size: 1rem;
}

/* Danger Zone */
.settings-danger-zone {
  border-color: rgba(239, 68, 68, 0.2);
}

.settings-danger-zone .section-icon {
  color: #ef4444;
}

.btn-danger {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Settings Footer */
.settings-footer {
  margin-top: 3rem;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: #64748b;
}

.footer-content a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-content a:hover {
  color: #3b82f6;
}

.separator {
  color: #475569;
}

.version {
  font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .settings-header {
    padding: 1.5rem 1rem;
  }

  .settings-header-content {
    flex-direction: column;
    gap: 1rem;
  }

  .settings-title {
    font-size: 2rem;
  }

  .settings-container {
    padding: 0 1rem;
  }

  .settings-section {
    padding: 1.25rem;
  }

  .profile-card {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .profile-info {
    align-items: center;
  }

  .settings-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .settings-row-info {
    padding-right: 0;
  }

  .settings-row-control {
    align-self: flex-end;
  }

  .range-control {
    width: 100%;
  }

  .settings-range {
    flex: 1;
  }

  .teams-grid {
    justify-content: center;
  }

  .footer-content {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .settings-title {
    font-size: 1.75rem;
  }

  .settings-section-header h2 {
    font-size: 1.1rem;
  }

  .team-chip {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
  }
}

/* =============================================================================
   UNIFIED BETTING CARD STYLES
   ============================================================================= */

.betting-card-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.betting-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.betting-card-header .header-main {
  flex: 1;
}

.betting-card-header .header-stats {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.betting-card-header .stat-badge {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  background: var(--bg-secondary);
}

.betting-card-header .stat-badge.clv.positive {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.betting-card-header .stat-badge.clv.negative {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.betting-card-header .date-selector {
  margin-left: auto;
}

.betting-card-header .date-input {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* Freshness Badge */
.freshness-badge {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  border-left: 3px solid transparent;
}

.freshness-badge.fresh {
  border-left-color: #22c55e;
}

.freshness-badge.warning {
  border-left-color: #f59e0b;
}

.freshness-badge.stale {
  border-left-color: #ef4444;
}

.freshness-badge .badge-item {
  color: var(--text-muted);
}

.freshness-badge .badge-warning {
  color: #f59e0b;
  font-weight: 500;
}

/* Model Health Section */
.model-health-section {
  margin-bottom: 1.5rem;
}

.model-health-section h3 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.health-metric {
  text-align: center;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.health-metric .metric-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.health-metric .metric-value {
  display: block;
  font-size: 1.375rem;
  font-weight: 600;
}

.health-metric .metric-value.positive {
  color: #22c55e;
}

.health-metric .metric-value.negative {
  color: #ef4444;
}

.status-ok {
  color: #22c55e;
}

.status-warning {
  color: #f59e0b;
}

.status-error {
  color: #ef4444;
}

.status-critical {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

.model-versions {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Bets Section */
.bets-section {
  margin-bottom: 1.5rem;
}

.bets-section h3 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.filter-controls {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.filter-controls select,
.filter-controls input {
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.875rem;
  min-width: 120px;
}

.bets-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.bets-table th,
.bets-table td {
  padding: 0.75rem 0.625rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.bets-table th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-secondary);
}

.bets-table tr.high-edge {
  background: rgba(34, 197, 94, 0.08);
}

.bets-table .team-badge {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.125rem 0.375rem;
  background: var(--bg-secondary);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.bets-table .bet-type {
  font-weight: 500;
}

.bets-table .prob {
  color: var(--text-muted);
}

.bets-table .edge {
  color: #22c55e;
  font-weight: 500;
}

.bets-table .odds {
  font-family: var(--font-mono);
}

.bets-table .units {
  font-weight: 600;
}

.no-bets {
  color: var(--text-muted);
  text-align: center;
  padding: 2rem;
}

/* Parlays Section */
.parlay-tier {
  margin-bottom: 1.5rem;
}

.parlay-tier:last-child {
  margin-bottom: 0;
}

.tier-header {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  display: inline-block;
}

.tier-header.tier-green {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.tier-header.tier-yellow {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.tier-header.tier-red {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.parlays-list {
  display: grid;
  gap: 1rem;
}

.parlay-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1rem;
}

.parlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.parlay-number {
  font-weight: 600;
  color: var(--text-primary);
}

.parlay-legs {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.parlay-odds {
  font-weight: 600;
  font-family: var(--font-mono);
  color: #22c55e;
}

.parlay-legs-list {
  margin-bottom: 0.75rem;
}

.parlay-legs-list .leg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
}

.parlay-legs-list .leg:last-child {
  border-bottom: none;
}

.leg-player {
  font-weight: 500;
  flex: 1;
}

.leg-bet {
  color: var(--text-muted);
  margin: 0 1rem;
}

.leg-odds {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.parlay-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.parlay-stats .stat.units {
  font-weight: 600;
  color: var(--text-primary);
}

/* Risk Summary Section */
.risk-summary-section {
  margin-bottom: 1.5rem;
}

.risk-summary-section h3 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.risk-item {
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.risk-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.risk-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
}

.risk-subvalue {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.correlation-note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: #22c55e;
}

/* Assumptions Section */
.assumptions-section {
  margin-bottom: 1.5rem;
}

.assumptions-section.collapsible .assumptions-content {
  display: none;
}

.assumptions-section.expanded .assumptions-content {
  display: block;
}

.assumptions-section .collapsible-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding: 1rem;
  margin: -1rem -1rem 0;
  border-radius: 8px 8px 0 0;
}

.assumptions-section.expanded .collapsible-header {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  border-radius: 8px 8px 0 0;
}

.assumptions-section .toggle-icon {
  transition: transform 0.2s ease;
  font-size: 0.75rem;
}

.assumptions-section.expanded .toggle-icon {
  transform: rotate(90deg);
}

.assumptions-content {
  padding-top: 1rem;
}

.assumptions-group {
  margin-bottom: 1rem;
}

.assumptions-group:last-child {
  margin-bottom: 0;
}

.assumptions-group h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.assumptions-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.assumptions-group li {
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.assumptions-group.caveats li {
  color: #f59e0b;
}

/* Partial Data Notice */
.partial-data {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid #f59e0b;
  padding: 1rem;
}

.partial-data p {
  margin: 0;
  color: #f59e0b;
}

/* Disclaimer */
.disclaimer {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.disclaimer p {
  margin: 0;
}

/* Loading States */
.loading-state,
.no-data-state,
.error-state {
  text-align: center;
  padding: 3rem;
}

.loading-state .spinner,
.spinner-small {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-small {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  color: var(--text-muted);
}

.no-data-state .hint {
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.error-state .btn {
  margin-top: 1rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .betting-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .betting-card-header .header-stats {
    flex-wrap: wrap;
  }

  .betting-card-header .date-selector {
    margin-left: 0;
    width: 100%;
  }

  .betting-card-header .date-input {
    width: 100%;
  }

  .freshness-badge {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .health-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .risk-grid {
    grid-template-columns: 1fr;
  }

  .filter-controls {
    flex-direction: column;
  }

  .filter-controls select,
  .filter-controls input {
    width: 100%;
  }

  .bets-table {
    font-size: 0.8125rem;
  }

  .bets-table th,
  .bets-table td {
    padding: 0.5rem 0.375rem;
  }

  .parlay-stats {
    gap: 0.5rem;
  }
}