/* ===== FANTASY FOOTBALL ROUNDUP REPORT STYLES =====
 * 
 * This stylesheet controls the appearance of the weekly fantasy football report page.
 * The page displays weekly scores, standings, player performance highlights, and AI-generated content.
 * 
 * PAGE LAYOUT STRUCTURE:
 * - Top Banner: Week/Season header with navigation
 * - Overview Section: AI-generated weekly summary (spans full width)
 * - Left Sidebar: Player highlights and weekly incentive winner
 * - Center: Weekly scores (stretches full page height)
 * - Right Sidebar: League standings
 * - Mobile: Stacked layout with booms & busts at bottom
 * 
 * COMPONENTS:
 * - Header: Navigation and title
 * - Overview Card: AI-generated weekly summary
 * - Weekly Scores: Matchup results with team logos and scores
 * - Standings: League rankings with playoff indicators
 * - Booms & Busts: Top/worst NFL player performances by position
 * - Weekly Incentive: Winner and next week's incentive
 * - Player Highlights: Top performers and notable stats
 * - Awards: Weekly recognition categories
 */

/* ===== CSS VARIABLES (DESIGN SYSTEM) =====
 * Color palette, shadows, and spacing used throughout the design
 * These variables ensure consistent theming and easy customization
 */
:root {
  --primary: #3b82f6;        /* Main blue color for primary elements */
  --primary-dark: #2563eb;   /* Darker blue for hover states */
  --primary-light: #dbeafe;  /* Light blue for backgrounds */
  --secondary: #8b5cf6;      /* Purple for secondary elements */
  --accent: #06b6d4;         /* Cyan for highlights and accents */
  --success: #10b981;        /* Green for wins and positive stats */
  --warning: #f59e0b;        /* Orange for warnings and incentives */
  --danger: #ef4444;         /* Red for losses and negative stats */
  --gray-50: #f9fafb;        /* Very light gray for backgrounds */
  --gray-100: #f3f4f6;       /* Light gray for subtle backgrounds */
  --gray-200: #e5e7eb;       /* Border gray */
  --gray-300: #d1d5db;       /* Medium gray for hover states */
  --gray-400: #9ca3af;       /* Text gray for secondary content */
  --gray-500: #6b7280;       /* Medium text gray */
  --gray-600: #4b5563;       /* Dark text gray */
  --gray-700: #374151;       /* Very dark text gray */
  --gray-800: #1f2937;       /* Primary text color */
  --gray-900: #111827;       /* Darkest text color */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);                    /* Subtle shadows */
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

* {
  box-sizing: border-box;
}

body { 
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; 
  margin: 0; 
  padding: 20px; 
  color: var(--gray-800); 
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  line-height: 1.6;
}

/* ===== GRID LAYOUT SYSTEM =====
 * 
 * The page uses CSS Grid for responsive layout with 3 main columns:
 * Column 1 (1fr): Left sidebar - Player highlights and weekly incentive
 * Column 2 (2.3fr): Center - Weekly scores (widest column)
 * Column 3 (1.2fr): Right sidebar - League standings
 * 
 * Grid Rows:
 * Row 1: Header with navigation
 * Row 2: Overview section (spans full width)
 * Row 3: Player highlights row (highlights + incentive)
 * Row 4: Main content (standings + right content) */
.grid { 
  display: grid; 
  grid-template-columns: 1.2fr 3fr; /* Standings | Right Content */
  grid-template-rows: auto auto auto auto auto;  /* Header | Overview | Highlights | Main | Booms & Busts */
  gap: 20px; /* Reduced gap for more compact layout */
  min-height: calc(100vh - 40px);
  max-width: 1400px;
  margin: 0 auto;
  align-items: start; /* Align items to start instead of stretching */
}

/* Overview section spans all columns at the top */
.overview-section { 
  grid-column: 1 / -1; /* Span from first to last column */
  grid-row: 2;         /* Second row */
}

/* Weekly scores in right column, row 4 */
.scores-section { 
  grid-column: 2;       /* Right column */
  grid-row: 4;          /* Fourth row (main content) */
  height: fit-content;  /* Size to content instead of stretching */
  display: flex;
  flex-direction: column;
}

/* Left sidebar: Standings section - stretches from below overview to bottom */
.standings-aside { 
  grid-column: 1;       /* First column */
  grid-row: 3 / 5;      /* From row 3 (below overview) to row 5 (spans same rows as scores) */
  height: fit-content;  /* Fit to content height instead of stretching */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to top */
}

/* Booms & Busts section below scores - full width */
.bb-section-below { 
  grid-column: 1 / -1;   /* Span full width (both columns) */
  grid-row: 5;           /* Fifth row (below main content) */
  height: fit-content;   /* Only take height needed for content */
  display: flex;
  flex-direction: column;
  margin-top: 20px;      /* Add some spacing from scores above */
}

/* Row below Overview: Player highlights and weekly incentive side by side */
.overview-row {
  grid-column: 2;        /* Right column only */
  grid-row: 3;           /* Third row */
  display: grid;
  grid-template-columns: auto 1fr; /* Highlights sized by content, Incentive takes remaining */
  gap: 24px;
  align-items: stretch; /* Stretch both cards to equal height */
}

/* ===== HEADER COMPONENT =====
 * 
 * The main header contains the week/season title and navigation buttons.
 * Spans full width at the top of the page with gradient background.
 * Navigation includes week selection and other controls.
 */
header { 
  grid-column: 1 / -1; /* Span full width */
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 16px; 
  flex-wrap: wrap;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  margin-bottom: 8px;
}

/* ===== CARD COMPONENT SYSTEM =====
 * 
 * Base card styling used throughout the page for consistent containers.
 * Cards have subtle shadows, rounded corners, and hover effects.
 * Different card variants use color-coded borders and backgrounds.
 */
.card { 
  background: white; 
  border: 1px solid var(--gray-200); 
  border-radius: 16px; 
  padding: 24px; 
  box-shadow: var(--shadow-lg);
  transition: all 0.2s ease;
  border: none;
}

/* ===== CARD VARIANT STYLES =====
 * 
 * Different card types use color-coded styling to distinguish their purpose:
 * - Scores: Blue tint for weekly matchup results
 * - Booms & Busts: Cyan tint for player performance data
 * - Standings: Green tint for league rankings
 * - Overview: Purple tint for AI-generated summary
 */
.scores-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, #ffffff 100%);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.bb-card {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, #ffffff 100%);
  border: 1px solid rgba(6, 182, 212, 0.25);
}

.standings-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, #ffffff 100%);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Overview card: subtle secondary tint */
.overview-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, #ffffff 100%);
  border: 1px solid rgba(139, 92, 246, 0.25);
}

/* Card hover effects for interactive feel */
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* Banner variant for prominent sections */
.banner { 
  background: linear-gradient(135deg, var(--primary), var(--secondary)); 
  color: white; 
  border: none; 
  box-shadow: var(--shadow-xl);
}

/* ===== TYPOGRAPHY SYSTEM =====
 * 
 * Consistent text styling throughout the page:
 * - h1: Main page title (week/season)
 * - h2: Section headers
 * - Body text uses system fonts with consistent line heights
 */
h1 { 
  margin: 0; 
  font-size: 28px; 
  font-weight: 800; 
  letter-spacing: -0.025em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2 { 
  margin: 0 0 16px; 
  font-size: 20px; 
  font-weight: 700; 
  color: var(--gray-800);
  letter-spacing: -0.025em;
}

ul { 
  margin: 12px 0; 
  padding-left: 20px; 
}

/* ===== MODERN WEEKLY SCORES DESIGN =====
 * 
 * Beautiful card-based layout with circular team icons, inspired by homepage design.
 * Each matchup is displayed as a card with team logos, names, and scores.
 * Hover effects and gradients create an engaging, modern appearance.
 */

/* Weekly scores container - modern card grid */
.scores { 
  display: grid;
  gap: 16px;
  width: 100%;
}

/* Individual matchup card */
.score-matchup-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 120px; /* Ensure cards have proper height */
}

/* Hover effect for matchup cards */
.score-matchup-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gray-300);
}

/* VS separator styling - REMOVED OLD CONFLICTING RULES */

/* ===== TEAM SCORE STYLING =====
 * 
 * Individual team display within each matchup card.
 * Teams are displayed with circular logos, names, and scores.
 * Winning teams get special styling and enhanced hover effects.
 * Close games get special highlighting.
 */

/* Team score container - REMOVED OLD CONFLICTING RULES */

/* Team logo - REMOVED OLD CONFLICTING RULES */

/* Team name */
.team-name {
  font-weight: 700;
  font-size: 18px;
  color: var(--gray-800);
  margin-bottom: 6px;
  line-height: 1.2;
}

/* Team owner name */
.team-owner {
  font-size: 14px;
  color: var(--gray-600);
  margin-bottom: 10px;
  line-height: 1.2;
  font-style: italic;
  font-weight: 500;
}

/* Team W-L record - REMOVED OLD CONFLICTING RULES */

/* Team score - REMOVED OLD CONFLICTING RULES */

/* Close game styling - special highlight for nail-biters */
.score-matchup-card.close {
  border-color: var(--warning);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.score-matchup-card.close:hover {
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.2);
}

.score-matchup-card.close .score-team {
  background: rgba(255, 255, 255, 0.8);
}

/* ===== STANDINGS TABLE STYLES =====
 * 
 * League standings table with fixed column widths for consistent layout.
 * Columns: Team Name (60%) | Record (20%) | Total Points (20%)
 * Records and points are center-aligned and don't wrap.
 */
.standings { 
  table-layout: fixed; /* Fixed column widths for consistency */
}

/* Team name column - takes up most space */
.standings td:nth-child(1) { 
  width: 60%; 
  padding-right: 16px;
}

/* Record and points columns - equal width, center-aligned */
.standings td:nth-child(2), .standings td:nth-child(3) { 
  width: 20%; 
  text-align: center;
  white-space: nowrap; /* Prevent text wrapping */
  font-size: 14px;
  line-height: 1.2;
}

/* Total points column */
.standings td:nth-child(4) { 
  width: 20%; 
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
}

/* ===== NAVIGATION COMPONENTS =====
 * 
 * Header navigation with week selection buttons and other controls.
 * Buttons have glass-morphism effect with hover animations.
 */
.nav { 
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap;
}

/* Navigation button styling */
.btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  padding: 8px 16px; 
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
  color: white; 
  text-decoration: none; 
  border-radius: 8px; 
  font-weight: 500; 
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Button hover effects */
.btn:hover { 
  background: rgba(255, 255, 255, 0.2); 
  transform: translateY(-1px);
}

/* Disabled button state */
.btn.disabled { 
  opacity: 0.5; 
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.05);
}

/* ===== LOADING STATES =====
 * 
 * Visual indicators for when content is being fetched or processed.
 * Includes loading text and animated spinner for AI content.
 */
.loading { 
  color: var(--gray-600); 
  font-style: italic;
}

/* Animated loading spinner */
.spinner { 
  display: inline-block; 
  width: 16px; 
  height: 16px; 
  border: 2px solid var(--gray-300); 
  border-radius: 50%; 
  border-top-color: var(--primary); 
  animation: spin 1s ease-in-out infinite;
  margin-right: 8px;
}

/* Spinner rotation animation */
@keyframes spin { 
  to { transform: rotate(360deg); } 
}

/* ===== SECTION DIVIDERS =====
 * 
 * Visual separators between major page sections for better readability.
 */
.section-divider { 
  height: 1px; 
  background: var(--gray-200); 
  margin: 24px 0; 
}

/* ===== INCENTIVES SECTION =====
 * 
 * Weekly incentive system showing current winner and next week's incentive.
 * Each incentive item has an icon, label, and value.
 */
.incentives { 
  display: grid; 
  gap: 16px; 
}

/* Individual incentive item */
.incentive-item { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  padding: 12px; 
  background: var(--gray-50); 
  border-radius: 8px; 
  border: 1px solid var(--gray-200);
}

/* Incentive icon styling */
.incentive-icon { 
  font-size: 20px; 
  padding: 8px; 
  background: var(--primary-light); 
  border-radius: 6px; 
  color: var(--primary);
}

/* Incentive text content */
.incentive-content { 
  flex: 1;
}

/* Incentive category label */
.incentive-label { 
  font-size: 12px; 
  font-weight: 600; 
  color: var(--gray-600); 
  text-transform: uppercase; 
  letter-spacing: 0.05em;
}

/* Incentive value (winner name, amount, etc.) */
.incentive-value { 
  font-size: 16px; 
  font-weight: 600; 
  color: var(--gray-800);
}

/* ===== TOP PERFORMERS & BUSTS SECTION =====
 * 
 * Shows the best and worst performing NFL players from the week.
 * Split into two columns: Top Performers (green scores) and Top Busts (red scores).
 * Each player shows rank, name, and fantasy points.
 */
.performers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 16px;
}

/* Section header styling */
.performers-section h3 {
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--gray-700);
}

/* List of players */
.performers-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual player item */
.performers-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

/* Remove border from last item */
.performers-list li:last-child {
  border-bottom: none;
}

/* Player ranking number */
.player-rank {
  font-weight: 600;
  color: var(--gray-600);
  min-width: 24px;
}

/* Player name */
.player-name {
  flex: 1;
  font-size: 14px;
}

/* Player fantasy points */
.player-score {
  font-weight: 600;
  font-variant-numeric: tabular-nums; /* Aligns numbers properly */
}

/* Top performers get green scores */
.top-performers .player-score {
  color: var(--success);
}

/* Top busts get red scores */
.top-busts .player-score {
  color: var(--danger);
}

/* ===== POSITION LEADERS SECTION =====
 * 
 * Displays the best and worst players for each fantasy position (QB, RB, WR, TE, K, DEF).
 * Each position shows both a "boom" (best) and "bust" (worst) player.
 * Players are displayed in a grid with position icons and performance data.
 */
.position-leaders {
  display: grid;
  gap: 16px;
}

/* Position section header */
.position-section h3 {
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--gray-700);
}

/* Grid layout for boom/bust pairs */
.position-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Boom | Bust */
  gap: 12px;
}

/* Individual position item (boom or bust player) */
.position-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--gray-50);
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}

/* Position abbreviation icon (QB, RB, WR, etc.) */
.position-icon {
  font-size: 16px;
  padding: 4px 6px;
  background: var(--primary-light);
  border-radius: 4px;
  color: var(--primary);
}

/* Player information container */
.position-content {
  flex: 1;
}

/* Position label (e.g., "Quarterback") */
.position-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
}

/* Player name and stats */
.position-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

/* ===== AWARDS SECTION =====
 * 
 * Weekly recognition categories highlighting notable achievements.
 * Each award has an icon, title, and description.
 * Awards are displayed in a vertical list with separators.
 */
.awards {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Individual award item */
.award {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
}

/* Remove border from last award */
.award:last-child {
  border-bottom: none;
}

/* Award icon (trophy, medal, etc.) */
.award-icon {
  font-size: 20px;
  padding: 6px 8px;
  background: var(--warning); /* Orange background for awards */
  border-radius: 6px;
  color: white;
  flex-shrink: 0;
}

/* Award text content */
.award-body {
  flex: 1;
}

/* Award category title */
.award-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--gray-800);
}

/* Award description text */
.award-text {
  font-size: 13px;
  color: var(--gray-600);
  line-height: 1.4;
}

/* ===== AWARDS GRID LAYOUT =====
 * 
 * Alternative awards display using a grid layout instead of list.
 * Each award item is displayed as a card with icon and content.
 * Used for different award presentation styles.
 */
.awards-grid { 
  display: grid; 
  grid-template-columns: 1fr; /* Single column layout */
  gap: 10px; 
}

/* Individual award item in grid format */
.award-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 10px;
}

/* Award icon in pill format */
.award-icon-pill {
  font-size: 20px;
  line-height: 1;
  padding: 6px 8px;
  background: #e0e0e0;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Award text content container */
.award-content {
  flex: 1;
}

/* Award title in grid format */
.award-title { 
  font-weight: bold; 
  font-size: 15px; 
  margin-bottom: 2px; 
}

/* Award description in grid format */
.award-text { 
  font-size: 13px; 
  line-height: 1.4; 
}

/* ===== WEEKLY INCENTIVE CARD =====
 * 
 * Prominent card displaying the current week's incentive winner and next week's incentive.
 * Uses warm orange/yellow gradient to draw attention.
 * Shows winner name in green with shadow effect, or "pending" if not yet determined.
 */
.incentive-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); /* Warm gradient */
  border: 2px solid var(--warning);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.15);
  height: 100%; /* Ensure card stretches to match highlights card height */
}

/* Enhanced hover effect for incentive card */
.incentive-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(245, 158, 11, 0.25);
}

/* Content layout within incentive card */
.incentive-content {
  display: grid;
  gap: 20px;
}

/* Individual incentive section (winner, next week, etc.) */
.incentive-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Incentive category label */
.incentive-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--warning);
}

/* Incentive text content */
.incentive-title, .incentive-next {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.4;
}

/* Winner display section */
.incentive-winner {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Winner name styling with green color and shadow */
.winner-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--success);
  text-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

/* Pending state when winner not yet determined */
.pending-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-600);
  font-style: italic;
}

/* ===== PLAYER HIGHLIGHTS CARD =====
 * 
 * Card displaying top NFL performers and notable player statistics.
 * Uses cool blue gradient to complement the incentive card's warm colors.
 * Contains the "Top NFL Performers" and "Top NFL Busts" sections.
 */
.highlights-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); /* Cool blue gradient */
  border: 2px solid var(--accent);
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.15);
  height: 100%; /* Ensure card stretches to match incentive card height */
}

/* Hover effect for highlights card */
.highlights-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(6, 182, 212, 0.25);
}

/* ===== WEEKLY SCORES SECTION =====
 * 
 * Displays all fantasy football matchups from the current week.
 * Each matchup shows two teams with their logos, names, records, and final scores.
 * Winning teams are highlighted with green backgrounds and special styling.
 * Uses card-based layout for better visual separation.
 */
.scores-section h2 {
  text-align: center;
}

/* ===== DESKTOP SCORES - STANDINGS-STYLE LAYOUT =====
 * 
 * Clean card layout matching the standings design.
 * Each card shows: Team Logo + Info | VS | Team Logo + Info | Scores
 */
.desktop-scores {
  display: grid;
  gap: 12px;
}

/* Individual matchup card - horizontal flow */
.score-matchup-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  gap: 12px;
  overflow: hidden;
  min-width: 0;
}

/* Hover effect for matchup cards */
.score-matchup-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Team info section (logo + details) - REMOVED, now direct layout */

/* Team logo in scores */
.score-team-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), #e0f2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.score-team-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Team containers (logo + details) */
.score-team-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0; /* Allow shrinking on smaller screens */
  max-width: 280px; /* Maximum width for larger screens */
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.score-team-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0; /* Allow shrinking on smaller screens */
  max-width: 280px; /* Maximum width for larger screens */
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  justify-content: flex-end; /* Push content to the right edge */
}

/* Team details (name + owner) */
.score-team-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 240px; /* Maximum width for longer team names */
  flex-shrink: 1; /* Allow shrinking on smaller screens */
  overflow: hidden; /* Prevent text overflow */
}

/* Scores and VS container - centered in card */
.score-scores-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* VS separator */
.score-vs {
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-500);
  padding: 6px 12px;
  background: var(--gray-100);
  border-radius: 6px;
  text-align: center;
  width: 60px; /* Fixed width for perfect alignment */
  flex-shrink: 0; /* Prevent shrinking */
}

/* Score results section - REMOVED, now direct layout */

/* Individual scores */
.score-home, .score-away {
  font-size: 24px;
  font-weight: 800;
  color: var(--gray-700);
  line-height: 1;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--gray-50);
  width: 80px; /* Fixed width for perfect alignment */
  text-align: center;
  flex-shrink: 0; /* Prevent shrinking */
}

/* Winner score styling */
.score-home.winner, .score-away.winner {
  background: var(--success);
  color: white;
  box-shadow: var(--shadow-sm);
}

/* ===== TEAM SCORE STYLING =====
 * 
 * Individual team display within each matchup card.
 * Shows team logo, name, record, and final score.
 * Winning teams get special green background and white text.
 */
.score-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* Winner team styling with green background */
.score-team.winner {
  background: var(--success);
  color: white;
  box-shadow: var(--shadow-md);
}

/* Winner team record text color adjustment */
.score-team.winner .team-record {
  color: rgba(255, 255, 255, 0.8);
}

/* ===== TEAM INFORMATION DISPLAY =====
 * 
 * Team details within each matchup card including logo, name, record, and score.
 * Information is stacked vertically for clear hierarchy.
 */

/* Container for team details */
.team-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Team name row with logo and name */
.team-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 16px;
}

/* Team logo styling */
.team-logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
}

/* Team win-loss record */
.team-record {
  font-size: 12px;
  color: var(--gray-600);
  font-weight: 500;
}

/* Team final score display */
.team-score {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* Aligns numbers properly */
  min-width: 48px;
  text-align: center;
}

/* ===== MATCHUP VS SECTION =====
 * 
 * Center section between teams showing "VS" text and winner indicator.
 * Provides visual separation and highlights the winning team.
 */

/* Container for VS text and winner indicator */
.score-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* VS text styling */
.vs-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Winner indicator (trophy or checkmark) with bounce animation */
.winner-indicator {
  font-size: 24px;
  animation: bounce 0.6s ease-in-out;
}

/* Bounce animation for winner indicator */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

/* ===== UTILITY CLASSES =====
 * 
 * Helper classes for common styling needs throughout the page.
 * These classes provide consistent styling for repeated elements.
 */

/* Muted text for secondary information */
.muted {
  color: var(--gray-500);
  font-style: italic;
}

/* Hidden elements (used for mobile/desktop switching) */
.hidden {
  display: none !important;
}

/* Muted text with top margin for spacing */
.muted-with-margin {
  color: var(--gray-500);
  font-style: italic;
  margin-top: 6px;
}

/* ===== RESPONSIVE DESIGN =====
 * 
 * Media queries to adapt the layout for different screen sizes.
 * On smaller screens, the 3-column grid collapses to a single column.
 * Mobile-specific layouts are shown for scores, standings, and booms & busts.
 */

/* Large tablets and small desktops */
@media (max-width: 1200px) {
  /* Collapse to single column layout */
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }
  
  /* Stack highlights and incentive vertically */
  .overview-row {
    grid-template-columns: 1fr;
  }
  
  /* Stack performers and position grids vertically */
  .performers-grid {
    grid-template-columns: 1fr;
  }
  
  .position-grid {
    grid-template-columns: 1fr;
  }
}

/* iPad and tablet-specific layout */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Single column layout for iPad - stack everything vertically */
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 20px;
    max-width: 100%;
    margin: 0 20px;
  }
  
  /* Make overview section more compact */
  .overview-section {
    margin-bottom: 16px;
  }
  
  /* Adjust card padding for iPad */
  .card {
    padding: 20px;
  }
  
  /* Make weekly scores more compact on iPad */
  .scores-section {
    margin-bottom: 16px;
  }
  
  /* Adjust standings for iPad */
  .standings-aside {
    margin-bottom: 16px;
  }
  
  /* Make booms & busts single column on iPad */
  .bb-positions-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Use mobile-style weekly scores layout for iPad */
  .desktop-scores {
    display: none !important;
  }
  
  .mobile-scores {
    display: grid !important;
    gap: 16px;
  }
  
  /* Make team logos appropriate size for iPad */
  .mobile-score-team .team-logo {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Adjust text sizes for iPad */
  .mobile-score-team .team-name {
    font-size: 1rem;
  }
  
  .mobile-score-team .team-owner {
    font-size: 0.85rem;
  }
  
  .mobile-score-team .team-record {
    font-size: 0.8rem;
  }
  
  /* Make standings more compact on iPad */
  .standing-team {
    padding: 16px;
  }
  
  .standing-team-info .team-name {
    font-size: 1rem;
  }
  
  .standing-team-info .team-owner {
    font-size: 0.85rem;
  }
  
  /* Fix booms & busts for iPad */
  .bb-position-card {
    overflow: visible;
    min-width: 0;
    padding: 12px;
  }
  
  .bb-player-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .bb-player-name,
  .bb-player-team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* iPad Portrait Mode Specific Adjustments */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  /* Single column layout for iPad portrait */
  .grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  /* Make booms & busts single column on portrait */
  .bb-positions-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Adjust weekly scores for portrait */
  .score-matchup-card {
    padding: 16px;
    gap: 12px;
    position: relative; /* Ensure proper positioning context */
  }
  
  /* Fix text overflow issues on iPad portrait */
  .score-team-left,
  .score-team-right {
    max-width: 180px; /* Even smaller on portrait */
    min-width: 0;
  }
  
  .score-team-details {
    max-width: 140px; /* Smaller on portrait */
    overflow: hidden;
  }
  
  .score-team-name,
  .score-team-owner {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Make team logos larger on portrait for better touch targets */
  .score-matchup-card .team-logo {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Increase text sizes for better readability on portrait */
  .score-team-name {
    font-size: 1rem;
  }
  
  .score-team-owner {
    font-size: 0.8rem;
  }
  
  .score-team-record {
    font-size: 0.8rem;
  }
  
  /* Adjust standings for portrait */
  .standing-team {
    padding: 16px;
  }
  
  .standing-team-info .team-name {
    font-size: 1rem;
  }
  
  .standing-team-info .team-owner {
    font-size: 0.8rem;
  }
  
  /* Fix booms & busts text overflow on iPad */
  .bb-position-card {
    overflow: visible; /* Allow content to be visible */
    min-width: 0;
  }
  
  .bb-player-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .bb-player-name,
  .bb-player-team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* iPad Pro and larger tablets */
@media (min-width: 1025px) and (max-width: 1366px) {
  /* Optimize for iPad Pro landscape */
  .grid {
    grid-template-columns: 1.2fr 2.5fr; /* Slightly wider right column */
    gap: 24px;
    max-width: 1200px;
  }
  
  /* Make weekly scores more prominent on iPad Pro */
  .scores-section {
    margin-bottom: 20px;
  }
  
  /* Optimize booms & busts for iPad Pro */
  .bb-positions-grid {
    grid-template-columns: repeat(3, 1fr); /* Back to 3 columns on larger screens */
    gap: 16px;
  }
  
  /* Adjust card padding for iPad Pro */
  .card {
    padding: 24px;
  }
  
  /* Make team logos optimal size for iPad Pro */
  .score-matchup-card .team-logo {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Fix text overflow issues on iPad Pro */
  .score-team-left,
  .score-team-right {
    max-width: 220px; /* Slightly larger on iPad Pro */
    min-width: 0;
  }
  
  .score-team-details {
    max-width: 180px; /* Larger on iPad Pro */
    overflow: hidden;
  }
  
  .score-team-name,
  .score-team-owner {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Fix booms & busts text overflow on iPad Pro */
  .bb-position-card {
    overflow: visible;
    min-width: 0;
  }
  
  .bb-player-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .bb-player-name,
  .bb-player-team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Touch-friendly improvements for all iPads */
@media (min-width: 769px) and (max-width: 1366px) {
  /* Increase touch targets for better iPad usability */
  .score-matchup-card {
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .score-matchup-card:hover {
    transform: translateY(-2px);
  }
  
  .standing-team {
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .standing-team:hover {
    transform: translateY(-1px);
  }
  
  /* Make buttons more touch-friendly */
  .btn {
    min-height: 44px; /* Apple's recommended minimum touch target */
    padding: 12px 20px;
  }
  
  /* Improve scrolling on iPad */
  .draft-list-content,
  .bb-positions-grid {
    -webkit-overflow-scrolling: touch;
  }
}

/* Medium tablets and large phones */
@media (max-width: 768px) {
  /* Reduce body padding for smaller screens */
  body {
    padding: 16px;
  }
  
  /* Reduce card padding for compact layout */
  .card {
    padding: 16px;
  }
  
  /* Stack matchup teams vertically on medium screens - REMOVED CONFLICTING RULES */
}

/* ===== BOOMS & BUSTS SECTION =====
 * 
 * Simple, compact table-like list of top performers and worst performers by position.
 * Clean layout that's easy to scan and doesn't waste space.
 */
.bb-grid {
  display: grid;
  grid-auto-rows: min-content; /* Size rows to fit content exactly */
  gap: 8px; /* Reduced gap for more compact layout */
  height: fit-content; /* Only take height needed for content */
}

/* Horizontal 3x3 grid layout for booms & busts positions */
.bb-positions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns for 6 positions (2 rows) */
  grid-template-rows: auto auto; /* 2 rows */
  gap: 8px; /* Further reduced gap for tighter layout */
  margin-top: 16px;
  width: 100%; /* Ensure grid fits within parent */
  max-width: 100%; /* Prevent overflow */
  box-sizing: border-box; /* Include padding/borders in width calculation */
}

/* Individual position card (e.g., "Quarterbacks") */
.bb-position-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px; /* Slightly smaller border radius */
  padding: 6px; /* Reduced padding for more compact layout */
  box-shadow: var(--shadow-sm);
  min-width: 0; /* Allow cards to shrink */
  overflow: hidden; /* Prevent content overflow */
}

/* ===== BOOMS & BUSTS SECTION HEADERS =====
 * 
 * Section headers for booms and busts within each position card.
 * Each section has a colored header and contains a list of top 3 players.
 */

/* Position header (e.g., "Quarterbacks") */
.bb-position-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 8px; /* Reduced margin for more compact layout */
  padding: 4px 8px; /* Reduced padding for more compact layout */
  background: var(--gray-50);
  border-radius: 6px;
  border: 1px solid var(--gray-200);
}

/* Section container for booms or busts */
.bb-section {
  margin-bottom: 0; /* Remove bottom margin since they're side by side */
}

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

/* Container for both booms and busts sections side by side */
.bb-sections-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Booms | Busts */
  gap: 8px; /* Reduced gap between booms and busts */
}

/* Section header styling - removed for ultra-compact design */
.bb-section-header {
  display: none; /* Hide section headers to save space */
}

.bb-section-header.boom {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid var(--success);
}

.bb-section-header.bust {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid var(--danger);
}

/* Section title */
.bb-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bb-section-header.boom .bb-section-title {
  color: var(--success);
}

.bb-section-header.bust .bb-section-title {
  color: var(--danger);
}

/* ===== PLAYER LIST STYLING =====
 * 
 * Simple table-like list of players that's compact and easy to read.
 * Each row shows: Logo | Name | Team | Points in a clean format.
 */

/* Players list container */
.bb-players-list {
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap between rows for table-like appearance */
}

/* Individual player item - simple table row style */
.bb-player-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: white;
  border-bottom: 1px solid var(--gray-100);
  transition: background-color 0.2s ease;
}

.bb-player-item:last-child {
  border-bottom: none;
}

.bb-player-item:hover {
  background: var(--gray-50);
}

/* Boom player styling - subtle left border */
.bb-player-item.boom {
  border-left: 3px solid var(--success);
}

/* Bust player styling - subtle left border */
.bb-player-item.bust {
  border-left: 3px solid var(--danger);
}

/* No data state */
.bb-player-item.no-data {
  opacity: 0.6;
  background: var(--gray-50);
}

/* ===== PLAYER ITEM CONTENT STYLING =====
 * 
 * Individual player information within each booms/busts list item.
 * Shows NFL logo, player name, fantasy team, and fantasy points.
 */

/* NFL team logo - properly sized for readability */
.bb-player-nfl-logo {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--gray-200);
  background: white;
  flex-shrink: 0;
}

/* Player information container */
.bb-player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1; /* Take up available space */
  min-width: 120px; /* Ensure enough space for names and teams */
}

/* Player name - readable font size */
.bb-player-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--gray-800);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Player's fantasy team name - readable font size */
.bb-player-team {
  font-size: 10px;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Player's fantasy points - readable font size */
.bb-player-points {
  font-weight: 700;
  font-size: 12px;
  color: var(--success);
  text-align: right;
  min-width: 40px; /* Ensure points don't get cut off */
  flex-shrink: 0; /* Prevent points from shrinking */
}

/* Bust player points in red */
.bb-player-item.bust .bb-player-points {
  color: var(--danger);
}

/* Message when no player data is available */
.bb-no-data {
  text-align: center;
  padding: 24px;
  color: var(--gray-500);
  font-style: italic;
}

/* ===== DESKTOP STANDINGS SECTION =====
 * 
 * League standings displayed as individual team cards instead of a table.
 * Each team shows rank, name, record, and total points.
 * Playoff teams and cutoff teams get special visual treatment.
 */

/* Grid layout for standings cards */
.desktop-standings {
  display: grid;
  gap: 8px; /* Reduced gap for more compact layout */
}

/* Individual team standing card */
.standing-team-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 12px; /* Reduced padding for more compact layout */
  display: grid;
  grid-template-columns: auto 1fr auto; /* Rank | Team Info | Stats */
  gap: 12px; /* Reduced gap for more compact layout */
  align-items: center;
  transition: all 0.2s ease;
}

/* Hover effect for team cards */
.standing-team-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--gray-300);
}

/* Playoff team styling with green gradient */
.standing-team-card.playoff {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: var(--success);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}

/* Enhanced hover effect for playoff teams */
.standing-team-card.playoff:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* Cutoff team styling (last playoff spot) with warning colors */
.standing-team-card.cutoff {
  border-bottom: 3px dotted var(--success);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: var(--warning);
}

/* ===== STANDING RANK DISPLAY =====
 * 
 * Team ranking information including position number and playoff status.
 * Rank numbers are prominently displayed in primary blue color.
 * Playoff teams get an animated badge indicator.
 */

/* Container for rank information */
.standing-rank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Team position number (1st, 2nd, etc.) */
.rank-number {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

/* Playoff qualification badge with pulse animation */
.playoff-badge {
  font-size: 14px;
  animation: pulse 2s infinite;
}

/* Pulse animation for playoff badge */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== STANDING TEAM INFORMATION =====
 * 
 * Team details within standings cards including name and movement indicators.
 * Shows how teams have moved up or down in rankings from previous week.
 */

/* Container for team information */
.standing-team-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Team name in standings */
.standing-team-info .team-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.3;
  margin-bottom: 2px;
}

/* Team owner in standings */
.standing-team-info .team-owner {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.2;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 4px;
}

/* Movement indicator showing rank change */
.movement-indicator {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
}

/* Upward movement indicator (green) */
.movement-indicator.up {
  background: #ecfdf5;
  color: var(--success);
}

/* Downward movement indicator (red) */
.movement-indicator.down {
  background: #fef2f2;
  color: var(--danger);
}

/* ===== STANDING STATISTICS =====
 * 
 * Team performance statistics displayed on the right side of standings cards.
 * Shows win-loss record and total fantasy points for the season.
 */

/* Container for team statistics */
.standing-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Win-loss record badge */
.record-badge {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  min-width: 60px;
}

/* Total fantasy points display */
.points-display {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-800);
  line-height: 1;
}

/* ===== DESKTOP WEEKLY SCORES - ALTERNATIVE LAYOUT =====
 * 
 * Alternative weekly scores layout with different styling than the main scores section.
 * Uses gray background and larger border radius for distinct appearance.
 * Each matchup shows teams in a 3-column grid layout.
 */

/* Grid layout for alternative score cards - REMOVED CONFLICTING RULES */

/* ===== ALTERNATIVE TEAM SCORE STYLING =====
 * 
 * Team display styling for the alternative weekly scores layout.
 * Teams are displayed vertically with centered content.
 * Winning teams get special green styling and enhanced hover effects.
 */

/* Alternative team score container */
.score-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
  background: white;
  border-radius: 12px;
  border: 2px solid var(--gray-200);
  transition: all 0.2s ease;
}

/* Winner team styling with green border and gradient background */
.score-team.winner {
  border-color: var(--success);
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* Enhanced hover effect for winning teams */
.score-team.winner:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.2);
}

/* ===== ALTERNATIVE TEAM INFORMATION =====
 * 
 * Team details styling for the alternative scores layout.
 * Teams are displayed with smaller logos and centered information.
 * Information includes logo, name, and win-loss record.
 */

/* Team information container */
.team-info {
  margin-bottom: 12px;
}

/* Team name row with logo and name */
.team-name-row { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  justify-content: center; 
}

/* Smaller team logo for alternative layout */
.team-logo { 
  width: 22px; 
  height: 22px; 
  border-radius: 6px; 
  object-fit: cover; 
  display: block; 
}

/* Team name display */
.team-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--gray-800);
  margin-bottom: 4px;
  line-height: 1.3;
}

/* Team win-loss record */
.team-record {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
}

/* ===== ALTERNATIVE TEAM SCORE DISPLAY =====
 * 
 * Team final score styling for the alternative scores layout.
 * Regular scores are displayed in gray, winning scores in green with shadow.
 */

/* Team final score display */
.team-score {
  font-size: 28px;
  font-weight: 800;
  color: var(--gray-600);
  line-height: 1;
}

/* Winner score with green color and shadow effect */
.winner-score {
  color: var(--success);
  text-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

/* ===== MOBILE LAYOUT COMPONENTS =====
 * 
 * Mobile-specific layouts for scores, standings, and booms & busts.
 * These components are hidden on desktop and shown on mobile devices.
 * Mobile booms & busts appear at the bottom of the page below standings.
 */

/* Mobile layout components - hidden by default on desktop */
.mobile-scores, .mobile-standings, .mobile-bb {
  display: none;
}

/* Mobile booms & busts positioned at bottom - hidden on desktop */
.mobile-bb-bottom {
  display: none;
}

/* ===== MOBILE BOOMS & BUSTS STYLING =====
 * 
 * Mobile-specific styling for the new booms and busts layout.
 * Each position shows separate sections for top 3 booms and busts.
 */

/* Mobile booms/busts section */
.mobile-bb-section {
  margin-bottom: 0; /* Remove bottom margin since they're side by side */
}

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

/* Mobile container for both sections side by side */
.mobile-bb-sections-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Booms | Busts */
  gap: 8px;
}

/* Mobile section title - removed for ultra-compact design */
.mobile-bb-section-title {
  display: none; /* Hide mobile section headers to save space */
}

/* Mobile players list */
.mobile-bb-players-list {
  display: flex;
  flex-direction: column;
  gap: 0; /* No gap between rows for table-like appearance */
}

/* Mobile player item - simple flexbox style */
.mobile-bb-player-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: white;
  border-bottom: 1px solid var(--gray-100);
  transition: background-color 0.2s ease;
}

.mobile-bb-player-item:last-child {
  border-bottom: none;
}

.mobile-bb-player-item:hover {
  background: var(--gray-50);
}

/* Mobile NFL logo - properly sized for mobile */
.mobile-bb-player-nfl-logo {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid var(--gray-200);
  background: white;
  flex-shrink: 0;
}

/* Mobile player info */
.mobile-bb-player-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  flex: 1 !important; /* Take up available space */
  min-width: 100px !important; /* Ensure enough space for names and teams on mobile */
}

/* Mobile player name - readable font size */
.mobile-bb-player-name {
  font-weight: 600 !important;
  font-size: 11px !important;
  color: var(--gray-800) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Mobile player team - readable font size */
.mobile-bb-player-team {
  font-size: 9px !important;
  color: var(--gray-600) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Mobile player points - readable font size */
.mobile-bb-player-points {
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--success) !important;
  text-align: right !important;
  min-width: 35px !important; /* Ensure points don't get cut off */
  flex-shrink: 0 !important; /* Prevent points from shrinking */
  display: block !important;
}

/* Mobile bust player points */
.mobile-bb-player-item.bust .mobile-bb-player-points {
  color: var(--danger) !important;
}

/* Mobile no data state */
.mobile-bb-player-item.no-data {
  opacity: 0.6;
  background: var(--gray-50);
}

/* ===== LEGACY TABLE STYLES =====
 * 
 * Original table-based layouts for scores, standings, and booms & busts.
 * These are kept for backward compatibility but are typically hidden.
 * Hidden elements use !important to ensure they don't display.
 */

/* Legacy table display styles */
.scores, .standings, .bb-table {
  display: table;
}

/* Ensure hidden legacy elements are properly hidden with !important */
.standings.hidden, .scores.hidden, .bb-table.hidden {
  display: none !important;
}

/* ===== AWARDS SECTION - ALTERNATIVE STYLING =====
 * 
 * Alternative awards display with card-based layout and hover effects.
 * Each award has a circular icon with gradient background and interactive hover states.
 * Awards are displayed in a grid layout with consistent spacing.
 */

/* Awards grid container */
.awards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr; /* Single column layout */
  gap: 12px;
}

/* Individual award card */
.award {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}

/* Award hover effect with background change and shadow */
.award:hover {
  background: white;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Circular award icon with gradient background */
.award-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

/* Award content container */
.award-body {
  display: grid;
  gap: 4px;
}

/* Award category title */
.award-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-800);
}

/* Award description text */
.award-text {
  font-size: 13px;
  color: var(--gray-600);
}

/* ===== NAVIGATION COMPONENTS - ALTERNATIVE STYLING =====
 * 
 * Alternative navigation styling with glass-morphism effects.
 * Buttons have semi-transparent backgrounds with backdrop blur.
 * Includes hover effects and disabled states for better UX.
 */

/* Navigation container */
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Navigation button with glass-morphism effect */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px); /* Glass-morphism effect */
}

/* Button hover effect with enhanced transparency */
.btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-1px);
}

/* Disabled button state */
.btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* ===== TYPOGRAPHY - ALTERNATIVE STYLING =====
 * 
 * Alternative typography styles for headers and text elements.
 * Includes text shadows and letter spacing for enhanced readability.
 * These styles complement the main typography system.
 */

/* Alternative h1 styling with enhanced shadows */
h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Alternative h2 styling */
h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-800);
  letter-spacing: -0.025em;
}

/* ===== MISSING STYLES FOR TABLES ===== */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}

th {
  text-align: left;
  color: var(--gray-600);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--gray-50);
  border-bottom: 2px solid var(--gray-200);
}

tbody tr:nth-child(odd) {
  background: var(--gray-50);
}

tbody tr:nth-child(even) {
  background: white;
}

tbody tr:hover {
  background: var(--primary-light);
  transform: scale(1.01);
  transition: all 0.2s ease;
}

.standings {
  table-layout: fixed;
}

.standings td:nth-child(1) {
  width: 60%;
  padding-right: 16px;
}

.standings td:nth-child(2), .standings td:nth-child(3) {
  width: 20%;
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
}

.standings td:nth-child(4) {
  width: 20%;
  text-align: center;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.2;
}

.standings tr.playoff {
  background: #ecfdf5;
}

.standings tr.cutoff > td {
  border-bottom: 3px solid var(--success);
  font-weight: 600;
}

.standings th, .standings td {
  white-space: nowrap;
}

.standings th:nth-child(2), .standings td:nth-child(2) {
  width: 88px;
  text-align: center;
}

.standings th:nth-child(3), .standings td:nth-child(3) {
  width: 84px;
  text-align: right;
}

.standings td:first-child {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  font-size: 14px;
  line-height: 1.25;
}

/* ===== MISSING STYLES FOR MOVEMENT INDICATORS ===== */
.move {
  font-size: 12px;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 600;
}

.move.up {
  color: var(--success);
  background: #ecfdf5;
}

.move.down {
  color: var(--danger);
  background: #fef2f2;
}

/* ===== MISSING STYLES FOR LEGACY SCORES TABLE ===== */
.scores {
  width: 100%;
  table-layout: auto;
  font-variant-numeric: tabular-nums;
}

.name-col {
  width: 200px;
  font-weight: 600;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.score-col {
  width: 120px;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
}

.score-col strong {
  color: var(--success);
  text-shadow: 0 2px 4px rgba(16,185,129,0.2);
}

.vs-col {
  width: 40px;
  text-align: center;
  color: var(--gray-500);
  font-weight: 600;
  font-size: 14px;
}

.team-cell-home {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.team-cell-away {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.team-cell img {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  object-fit: cover;
  background: white;
  border: 2px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

/* ===== MOBILE SCORE CARD STYLES ===== */

/* Mobile scores - simplified vertical layout */
.mobile-score-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

/* Mobile team layout - simplified vertical stack */
.mobile-score-team {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

.mobile-score-team:last-child {
  border-bottom: none;
}

/* Home team score - positioned on the right */
.mobile-score-team:first-child .mobile-score-home {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Away team score - positioned on the right, same horizontal position */
.mobile-score-team:last-child .mobile-score-away {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}



/* Mobile team name styling */
.mobile-team-name {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 2px;
  line-height: 1.2;
}

.mobile-team-owner {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 2px;
  line-height: 1.2;
  font-style: italic;
  font-weight: 500;
}

.mobile-team-record {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 600;
  line-height: 1.2;
}

.mobile-score-team-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), #e0f2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.mobile-score-team-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-score-team-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.mobile-score-vs {
  text-align: center;
  padding: 8px 0;
  font-weight: 600;
  color: var(--gray-500);
  font-size: 12px;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  margin: 8px 0;
}

/* Mobile score results - REMOVED, now direct layout */

.mobile-score-home, .mobile-score-away {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-700);
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--gray-50);
  min-width: 60px;
  text-align: center;
}

.mobile-score-home.winner, .mobile-score-away.winner {
  background: var(--success);
  color: white;
  box-shadow: var(--shadow-sm);
}

.mobile-standing-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--gray-200);
  background: white;
}

.mobile-standing-item:last-child {
  border-bottom: none;
}

.mobile-standing-item.playoff {
  background: #ecfdf5;
}

.mobile-standing-item.cutoff {
  border-bottom: 3px solid var(--success);
  font-weight: 600;
}

.mobile-standing-rank {
  font-weight: 700;
  color: var(--primary);
  margin-right: 12px;
  min-width: 24px;
}

.mobile-standing-team {
  flex: 1;
  font-weight: 600;
}

.mobile-standing-team .mobile-team-owner {
  font-size: 11px;
  color: var(--gray-600);
  line-height: 1.2;
  font-style: italic;
  font-weight: 500;
  margin-top: 2px;
}

.mobile-standing-stats {
  text-align: right;
  font-size: 12px;
}

.mobile-standing-record {
  font-weight: 600;
  margin-bottom: 2px;
}

.mobile-standing-pf {
  color: var(--gray-600);
}

.mobile-bb-position {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.mobile-bb-position-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--primary);
  margin-bottom: 12px;
  text-align: center;
  text-transform: uppercase;
}

/* Legacy mobile styles - replaced by new mobile-bb-section structure above */
.mobile-bb-players {
  display: none; /* Hidden - replaced by new mobile layout */
}

.mobile-bb-player {
  display: none; /* Hidden - replaced by new mobile layout */
}

.mobile-bb-player-name {
  display: none; /* Hidden - replaced by new mobile layout */
}

.mobile-bb-player-team {
  display: none; /* Hidden - replaced by new mobile layout */
}

.mobile-bb-player-points {
  display: none; /* Hidden - replaced by new mobile layout */
}

/* ===== ADDITIONAL RESPONSIVE STYLES ===== */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 20px;
  }
  
  .overview-row {
    display: block;
  }
  
  header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px 24px;
  }
  
  .nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .btn {
    padding: 8px 14px;
    font-size: 13px;
  }
  
  .card {
    padding: 20px;
  }
  
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .score-col {
    font-size: 28px;
    width: 100px;
  }
  
  .vs-col {
    width: 32px;
    font-size: 12px;
  }
  
  .name-col {
    font-size: 14px;
  }
  
  .standings th, .standings td {
    font-size: 13px;
    padding: 12px 8px;
  }
  
  .award {
    padding: 12px;
  }
  
  .award-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  body {
    padding: 12px;
    overflow-x: hidden;
  }
  
  .grid {
    display: block;
    gap: 0;
    min-height: auto;
    max-width: 100%;
  }
  
  .overview-row {
    display: block;
  }
  
  header {
    padding: 16px 20px;
    margin-bottom: 16px;
    border-radius: 12px;
  }
  
  h1 {
    font-size: 20px;
    line-height: 1.2;
  }
  
  .nav {
    gap: 8px;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  
  .btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 8px;
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
    max-width: 200px;
    box-sizing: border-box;
  }
  
  .card {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
  }
  
    /* Mobile: Hide desktop tables and layouts, show mobile-specific layouts */
  .scores, .standings, .bb-table, .bb-grid, .desktop-scores, .desktop-standings {
    display: none !important;
  }
  
  /* Hide the original left sidebar booms & busts on mobile to prevent duplication */
  .bb-aside {
    display: none !important;
  }
  
  /* Mobile: Show booms & busts section below scores */
  .bb-section-below {
    margin-top: 16px;
  }
  
  /* Mobile: Booms & busts positions stack vertically */
  .bb-positions-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Mobile scores - simplified card layout for small screens */
  .mobile-scores {
    display: block;
    margin-top: 16px;
  }
  
  /* Mobile score card improvements */
  .mobile-score-card {
    margin-bottom: 16px;
  }
  
  .mobile-score-team-logo {
    width: 48px;
    height: 48px;
  }
  
  .mobile-score-team-details {
    max-width: 140px;
  }
  
  .mobile-score-home, .mobile-score-away {
    min-width: 70px;
    max-width: 90px;
    font-size: 22px;
    font-weight: 800;
  }
  
  /* Mobile standings - ensure visibility */
  .mobile-standings {
    display: block !important;
    margin-top: 20px;
  }
  
  /* Force mobile standings to show and hide desktop standings */
  .standings-aside {
    display: none !important;
  }
  
  /* Override the default hidden state for mobile components */
  .mobile-scores {
    display: block !important;
  }
  
  .mobile-standings {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .mobile-bb {
    display: none !important; /* Keep old mobile bb hidden */
  }
  
  .mobile-bb-bottom {
    display: block !important;
  }
  
  /* Force override of the default hidden state */
  .mobile-scores, .mobile-standings, .mobile-bb-bottom {
    display: block !important;
  }
  
  /* Mobile standings - compact list layout */
  .mobile-standings {
    display: block !important;
    margin-top: 16px;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Mobile standings items */
  .mobile-standing-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid var(--gray-200);
    background: white;
    margin-bottom: 8px;
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
  }
  
  .mobile-standing-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }
  
  .mobile-standing-item.playoff {
    background: #ecfdf5;
  }
  
  .mobile-standing-item.cutoff {
    border-bottom: 3px solid var(--success);
    font-weight: 600;
  }
  
  .mobile-standing-rank {
    font-weight: 700;
    color: var(--primary);
    margin-right: 12px;
    min-width: 24px;
  }
  
  .mobile-standing-team {
    flex: 1;
    font-weight: 600;
  }
  
  .mobile-standing-team .mobile-team-owner {
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.2;
    font-style: italic;
    font-weight: 500;
    margin-top: 2px;
  }
  
  .mobile-standing-stats {
    text-align: right;
    font-size: 12px;
  }
  
  .mobile-standing-record {
    font-weight: 600;
    margin-bottom: 2px;
  }
  
  .mobile-standing-pf {
    color: var(--gray-600);
  }
  
  /* Mobile booms/busts - simplified card layout */
  .mobile-bb {
    display: none; /* Hide old mobile bb */
  }
  
  /* Show mobile booms & busts at bottom of page (below standings) */
  .mobile-bb-bottom {
    display: block;
  }
  
  /* Hide desktop booms & busts on mobile */
  .bb-section-below {
    display: none !important;
  }
  
  /* Hide desktop scores on mobile */
  .desktop-scores {
    display: none !important;
  }
  
  /* Hide desktop standings on mobile */
  .standings-aside {
    display: none !important;
  }
  
  /* Mobile awards */
  .award {
    padding: 12px;
    gap: 8px;
  }
  
  .award-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  .award-title {
    font-size: 13px;
  }
  
  .award-text {
    font-size: 12px;
  }
  
  .move {
    font-size: 11px;
    margin-left: 6px;
    padding: 1px 4px;
  }
  
  /* Mobile spacing */
  .section-divider {
    margin: 12px 0 16px;
  }
  
  /* Mobile highlights and incentive cards */
  .highlights-card, .incentive-card {
    margin-top: 16px;
    padding: 16px;
  }
  
  .incentive-content {
    gap: 16px;
  }
  
  .incentive-title, .incentive-next {
    font-size: 14px;
  }
  
  .winner-text {
    font-size: 16px;
  }
  
  .pending-text {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 8px;
  }
  
  .grid {
    gap: 0;
  }
  
  header {
    padding: 12px 16px;
    margin-bottom: 12px;
  }
  
  h1 {
    font-size: 18px;
  }
  
  .card {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
  }
  
  .score-col {
    font-size: 18px;
    width: 50px;
    min-width: 50px;
  }
  
  .vs-col {
    width: 20px;
    font-size: 9px;
    min-width: 20px;
  }
  
  .name-col {
    font-size: 11px;
  }
  
  .scores, .standings, .bb-table {
    font-size: 10px;
  }
  
  .scores td, .standings td, .bb-table td {
    padding: 6px 3px;
  }
  
  .bb-table .pts-col {
    width: 40px;
    font-size: 14px;
    min-width: 40px;
  }
  
  .award {
    padding: 8px;
  }
  
  .award-icon {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  
  .btn {
    padding: 6px 12px;
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  /* Mobile spacing */
  .section-divider {
    margin: 12px 0 16px;
  }
}