/* ============================================
   FULLSCREEN CARDS CSS - UNIFIED STYLESHEET
   ============================================

   Single source of truth for ALL fullscreen card styling.
   Used by: NFL, NCAA, LiveGames pages, tv-sports-bar

   STRUCTURE:
   1. CSS Variables (responsive sizing)
   2. Fullscreen Container & Controls
   3. Grid Layouts (grid-1 through grid-8)
   4. Card Base Styles
   5. Card States (upcoming, live, final, winning, tied)
   6. Card Content Layout
   7. Team Elements (logo, name, score, record)
   8. Game Status Elements
   9. Possession Indicator
   10. Down/Distance & Field Visualizer
   11. Timeout Bars
   12. Game Selector
   13. Mobile Overrides

   ============================================ */

/* ============================================
   1. CSS VARIABLES - Responsive Sizing
   ============================================ */

:root {
  /* Fullscreen - Team Logos (min, preferred, max) */
  --fs-logo-min: 48px;
  --fs-logo-preferred: 10vmin;
  --fs-logo-max: 120px;

  /* Fullscreen - Team Names (min, preferred, max) */
  --fs-team-name-min: 1rem;
  --fs-team-name-preferred: 3vmin;
  --fs-team-name-max: 2.5rem;

  /* Fullscreen - Scores (min, preferred, max) */
  --fs-score-min: 2.5rem;
  --fs-score-preferred: 10vmin;
  --fs-score-max: 7rem;

  /* Fullscreen - Records (min, preferred, max) */
  --fs-record-min: 0.7rem;
  --fs-record-preferred: 1.8vmin;
  --fs-record-max: 1.3rem;

  /* Fullscreen - VS Divider (min, preferred, max) */
  --fs-vs-min: 1rem;
  --fs-vs-preferred: 3vmin;
  --fs-vs-max: 2rem;

  /* Fullscreen - Status Text (min, preferred, max) */
  --fs-status-min: 1.8rem;
  --fs-status-preferred: 2.3vmin;
  --fs-status-max: 2.5rem;

  /* Fullscreen - Down/Distance (min, preferred, max) */
  --fs-down-distance-min: 0.8rem;
  --fs-down-distance-preferred: 2vmin;
  --fs-down-distance-max: 1.5rem;

  /* Fullscreen - Possession Icon (min, preferred, max) */
  --fs-possession-min: 18px;
  --fs-possession-preferred: 4vmin;
  --fs-possession-max: 32px;

  /* Fullscreen - Spacing (min, preferred, max) */
  --fs-gap-horizontal-min: 12px;
  --fs-gap-horizontal-preferred: 2.5vw;
  --fs-gap-horizontal-max: 40px;

  --fs-gap-vertical-min: 4px;
  --fs-gap-vertical-preferred: 1vh;
  --fs-gap-vertical-max: 12px;

  /* Fullscreen - Field Visualizer Height (min, preferred, max) */
  --fs-field-height-min: 30px;
  --fs-field-height-preferred: 6vh;
  --fs-field-height-max: 50px;

  /* Field Visualizer Height for Grid-1 (thicker field) */
  --fs-field-height-grid-1-min: 55px;
  --fs-field-height-grid-1-preferred: 12vh;
  --fs-field-height-grid-1-max: 95px;

  /* ============================================
     FIELD VISUALIZER WIDTH VARIABLES
     Customize field width for each grid layout,
     device type, and orientation
     ============================================ */

  /* Desktop - Field Width by Grid Layout */
  --fs-field-width-grid-1: 85%;
  --fs-field-width-grid-2: 95%;
  --fs-field-width-grid-3: 90%;
  --fs-field-width-grid-4: 90%;
  --fs-field-width-grid-5: 88%;
  --fs-field-width-grid-6: 88%;
  --fs-field-width-grid-7: 85%;
  --fs-field-width-grid-8: 85%;
  --fs-field-width-grid-9: 85%;

  /* Tablet Portrait - Field Width by Grid Layout */
  --fs-field-width-tablet-portrait-grid-1: 90%;
  --fs-field-width-tablet-portrait-grid-2: 92%;
  --fs-field-width-tablet-portrait-grid-3: 90%;
  --fs-field-width-tablet-portrait-grid-4: 88%;
  --fs-field-width-tablet-portrait-grid-5: 88%;
  --fs-field-width-tablet-portrait-grid-6: 85%;
  --fs-field-width-tablet-portrait-grid-7: 85%;
  --fs-field-width-tablet-portrait-grid-8: 82%;

  /* Tablet Landscape - Field Width by Grid Layout */
  --fs-field-width-tablet-landscape-grid-1: 85%;
  --fs-field-width-tablet-landscape-grid-2: 95%;
  --fs-field-width-tablet-landscape-grid-3: 92%;
  --fs-field-width-tablet-landscape-grid-4: 90%;
  --fs-field-width-tablet-landscape-grid-5: 90%;
  --fs-field-width-tablet-landscape-grid-6: 88%;
  --fs-field-width-tablet-landscape-grid-7: 88%;

  /* Phone Portrait - Field Width by Grid Layout */
  --fs-field-width-phone-portrait-grid-1: 95%;
  --fs-field-width-phone-portrait-grid-2: 92%;
  --fs-field-width-phone-portrait-grid-3: 90%;
  --fs-field-width-phone-portrait-grid-4: 88%;

  /* Phone Landscape - Field Width by Grid Layout */
  --fs-field-width-phone-landscape-grid-1: 90%;
  --fs-field-width-phone-landscape-grid-2: 95%;
  --fs-field-width-phone-landscape-grid-3: 92%;
  --fs-field-width-phone-landscape-grid-4: 90%;

  /* Grid 8 Card Padding */
  --g8-card-padding: 10px;
  --g8-card2-padding: 30px;
}

/* ============================================
   TV PERFORMANCE OPTIMIZATIONS
   ============================================
   These optimizations improve rendering performance
   on Android TV and other low-powered devices.
   ============================================ */

/* CSS Containment - Isolate layout/paint calculations */
.fullscreen-grid {
  contain: layout style paint;
}

/* Remove static will-change to reduce GPU memory usage on TV devices */
/* will-change should only be applied during active animations */
.fullscreen-game-card,
.fullscreen-game-slot {
  contain: layout style;
  /* REMOVED: will-change: transform, opacity; - causes 50+ GPU layers on 8-game grid */
}

/* Only apply will-change during active animations */
.fullscreen-game-card.animating {
  will-change: transform;
}

/* TV Mode - Optimized transitions for smoother animations */
body.tv-mode .fullscreen-game-card,
body.tv-mode .fullscreen-game-slot {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* TV Mode - Reduce animation complexity on focus */
body.tv-mode .fullscreen-game-card:focus,
body.tv-mode .fullscreen-game-card.focused {
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

/* GPU-accelerated transforms for card elements - use translateZ(0) for promotion */
.fs-card-team-logo,
.fullscreen-team-logo {
  /* REMOVED: will-change: transform; - memory overhead on TV */
  transform: translateZ(0);
}

/* ============================================
   2. FULLSCREEN CONTAINER & CONTROLS
   ============================================ */

.fullscreen-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #0a0e1a;
  z-index: 99999;
  overflow: hidden;
}

.fullscreen-container.active {
  display: flex;
  flex-direction: column;
}

.fullscreen-hover-trigger {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 999;
  pointer-events: auto;
}

.fullscreen-hover-trigger:hover~.fullscreen-controls {
  transform: translateY(0);
}

.fullscreen-controls {
  background: rgba(26, 31, 46, 0.95);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #334155;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.fullscreen-controls.visible,
.fullscreen-controls:hover {
  transform: translateY(0);
}

.fullscreen-controls button {
  background: #334155;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.2s;
}

.fullscreen-controls button:hover {
  background: #475569;
}

#exit-fullscreen {
  background: #ef4444;
}

#exit-fullscreen:hover {
  background: #dc2626;
}

/* ============================================
   3. GRID LAYOUTS
   Card sizes are calculated dynamically by JS.
   These provide the base grid structure.
   ============================================ */

.fullscreen-grid {
  flex: 1;
  display: grid;
  overflow: hidden;
  height: calc(100vh - 80px);
  box-sizing: border-box;
  padding: 15px;
  gap: 15px;
}

/* 1 Game - Full Screen */
.fullscreen-grid.grid-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  padding: 20px;
}

.fullscreen-grid.grid-1 .fullscreen-game-card {
  max-width: min(1000px, 95vw);
  max-height: 95vh;
}

/* 2 Games - Side by Side */
.fullscreen-grid.grid-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  gap: 15px;
}

/* 3 Games - 2 on top, 1 spanning bottom */
.fullscreen-grid.grid-3 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

.fullscreen-grid.grid-3 .fullscreen-game-card:nth-child(3) {
  grid-column: span 2;
}

/* 4 Games - 2x2 Grid */
.fullscreen-grid.grid-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

/* 5 Games - 3 on top, 2 on bottom (larger) */
.fullscreen-grid.grid-5 {
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

.fullscreen-grid.grid-5 .fullscreen-game-card:nth-child(1),
.fullscreen-grid.grid-5 .fullscreen-game-card:nth-child(2),
.fullscreen-grid.grid-5 .fullscreen-game-card:nth-child(3) {
  grid-column: span 2;
}

.fullscreen-grid.grid-5 .fullscreen-game-card:nth-child(4),
.fullscreen-grid.grid-5 .fullscreen-game-card:nth-child(5) {
  grid-column: span 3;
}

/* 6 Games - 3x2 Grid */
.fullscreen-grid.grid-6 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
}

/* 7 Games - Large left (spans 3 rows), 6 small right (2x3) */
/* Desktop only - tablets use page-based layouts */
.fullscreen-grid.grid-7:not([data-page]) {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:nth-child(1) {
  grid-row: span 3;
}

/* 8 Games - Asymmetric: 2 large left, 6 small right */
/* Desktop only - tablets use page-based layouts */
.fullscreen-grid.grid-8:not([data-page]) {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-game-card:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-game-card:nth-child(2) {
  grid-column: span 2;
}

/* ============================================
   FIELD VISUALIZER WIDTH BY GRID LAYOUT
   Uses CSS variables for easy customization
   ============================================ */
.fullscreen-grid.grid-1 .field-visualizer {
  max-width: var(--fs-field-width-grid-1, 85%);
}

.fullscreen-grid.grid-2 .field-visualizer {
  max-width: var(--fs-field-width-grid-2, 95%);
}

.fullscreen-grid.grid-3 .field-visualizer {
  max-width: var(--fs-field-width-grid-3, 90%);
}

.fullscreen-grid.grid-4 .field-visualizer {
  max-width: var(--fs-field-width-grid-4, 90%);
}

.fullscreen-grid.grid-5 .field-visualizer {
  max-width: var(--fs-field-width-grid-5, 88%);
}

.fullscreen-grid.grid-6 .field-visualizer {
  max-width: var(--fs-field-width-grid-6, 88%);
}

.fullscreen-grid.grid-7:not([data-page]) .field-visualizer {
  max-width: var(--fs-field-width-grid-7, 85%);
}

.fullscreen-grid.grid-8:not([data-page]) .field-visualizer {
  max-width: var(--fs-field-width-grid-8, 85%);
}

.fullscreen-grid.grid-9 .field-visualizer {
  max-width: var(--fs-field-width-grid-9, 85%);
}

/* ============================================
   3. CARD BASE STYLES
   Same layout for ALL grid sizes
   ============================================ */

.fullscreen-game-card {
  background: linear-gradient(135deg, #1a1f2e 0%, #2d3748 100%);
  border-radius: 12px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 3px solid #334155;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* Empty slot card */
.fullscreen-game-card.empty-slot {
  border-style: dashed;
  border-color: #475569;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Sport Logo - Top Left Corner */
.sport-logo-indicator {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 60px;
  height: 60px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  z-index: 1;
}

/* ============================================
   4. CARD STATES
   Border colors indicate game state
   ============================================ */

/* Upcoming Game - Blue/Purple border */
.fullscreen-game-card.upcoming-game {
  border-color: #6366f1;
  background: linear-gradient(135deg, #1a1f2e 0%, #1e2a3a 100%);
}

/* Live Game - Winning team gets green border */
.fullscreen-game-card.winning-home,
.fullscreen-game-card.winning-away {
  border-color: #22c55e;
  background: linear-gradient(135deg, #1a1f2e 0%, #1e3a2e 100%);
}

/* Tied Game - Yellow/amber border */
.fullscreen-game-card.tied {
  border-color: #fbbf24;
  background: linear-gradient(135deg, #1a1f2e 0%, #3a2e1e 100%);
}

/* Final Game - Gray border */
.fullscreen-game-card.final-game {
  border-color: #64748b;
  background: linear-gradient(135deg, #1a1f2e 0%, #2a2e3a 100%);
}

/* ============================================
   5. CARD CONTENT LAYOUT
   ============================================ */

.fullscreen-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 10px;
}

/* Main score header - horizontal layout */
.fullscreen-live-score-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--fs-gap-horizontal-min), var(--fs-gap-horizontal-preferred), var(--fs-gap-horizontal-max));
  width: 100%;
  max-width: 95%;
  margin: 0 auto;
  flex-shrink: 1;
  min-height: 0;
}

/* Team stack - vertical: logo, name, record */
.fullscreen-team-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--fs-gap-vertical-min), var(--fs-gap-vertical-preferred), var(--fs-gap-vertical-max));
  position: relative;
  flex-shrink: 1;
  min-height: 0;
}

/* ============================================
   6. TEAM ELEMENTS
   ============================================ */

/* Team Logo */
.fullscreen-team-logo {
  width: clamp(var(--fs-logo-min), var(--fs-logo-preferred), var(--fs-logo-max));
  height: clamp(var(--fs-logo-min), var(--fs-logo-preferred), var(--fs-logo-max));
  object-fit: contain;
  flex-shrink: 1;
}

/* Team Name */
.fullscreen-live-team-name {
  font-size: clamp(var(--fs-team-name-min), var(--fs-team-name-preferred), var(--fs-team-name-max));
  font-weight: 700;
  color: #e5e7eb;
  line-height: 1.1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 12px);
  background: rgba(240, 235, 235, 0.74);
  padding: clamp(5px, 1.2vmin, 12px) clamp(12px, 2.5vmin, 24px);
  border-radius: clamp(4px, 0.8vmin, 8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 3px rgba(0, 0, 0, 0.5);
}

/* Winning team name - green */
.fullscreen-live-team-name.winning {
  color: #10b981;
}

/* Team Record */
.fullscreen-team-record {
  font-size: clamp(var(--fs-record-min), var(--fs-record-preferred), var(--fs-record-max));
  color: #9ca3af;
  font-weight: 600;
  text-align: center;
}

/* Team Score */
.fullscreen-team-score {
  font-size: clamp(var(--fs-score-min), var(--fs-score-preferred), var(--fs-score-max));
  font-weight: 700;
  color: #e5e7eb;
  min-width: clamp(60px, 12vmin, 120px);
  text-align: center;
  line-height: 1;
}

/* Winning score - green */
.fullscreen-team-score.winning {
  color: #10b981;
}

/* Losing score - dimmed */
.fullscreen-team-score.losing {
  color: #9ca3af;
}

/* VS Divider */
.fullscreen-vs-divider-live {
  font-size: clamp(var(--fs-vs-min), var(--fs-vs-preferred), var(--fs-vs-max));
  color: #64748b;
  margin: 0;
  font-weight: 700;
  text-align: center;
}

/* ============================================
   7. GAME STATUS ELEMENTS
   ============================================ */

/* Status container */
.fullscreen-status-container {
  margin-bottom: 15px;
}

/* Status text (quarter, clock, etc) */
.fullscreen-status-text {
  color: #9ca3af;
  font-size: clamp(var(--fs-status-min), var(--fs-status-preferred), var(--fs-status-max));
  margin-top: clamp(3px, 0.8vh, 8px);
  font-weight: 600;
}

/* Upcoming status */
.fullscreen-upcoming-status-text {
  color: #9ca3af;
  font-size: clamp(var(--fs-status-min), var(--fs-status-preferred), var(--fs-status-max));
  font-weight: 600;
  text-align: center;
  margin-bottom: clamp(8px, 2vh, 16px);
  width: 100%;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* Final status */
.fullscreen-game-card.final-game .fullscreen-status-text {
  color: #94a3b8;
}

/* ============================================
   9. POSSESSION INDICATOR
   Football emoji positioned on team logo
   ============================================ */

.fullscreen-possession {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: clamp(var(--fs-possession-min), var(--fs-possession-preferred), var(--fs-possession-max));
  line-height: 1;
  animation: possessionBlink 1.5s infinite;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.9));
}

@keyframes possessionBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

/* ============================================
   10. DOWN/DISTANCE & FIELD VISUALIZER
   ============================================ */

/* Down and Distance Text */
.fullscreen-situation-info {
  font-size: clamp(var(--fs-down-distance-min), var(--fs-down-distance-preferred), var(--fs-down-distance-max));
  color: #fbbf24;
  font-weight: 700;
  text-align: center;
  margin-top: clamp(8px, 1.5vh, 16px);
  background: rgba(240, 235, 235, 0.74);
  padding: clamp(4px, 0.8vmin, 8px) clamp(12px, 2vmin, 24px);
  border-radius: clamp(4px, 0.8vmin, 8px);
  display: inline-block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    0 0 3px rgba(0, 0, 0, 0.5);
}

/* Field Visualizer Container */
.field-visualizer {
  width: 100%;
  max-width: var(--fs-field-width-grid-1, 90%);
  margin-top: clamp(8px, 1.5vh, 16px);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.8vh, 6px);
  flex-shrink: 1;
  min-height: 0;
  /* 3D perspective */
  perspective: 500px;
}

.field-container {
  width: 100%;
  max-width: 100%;
  position: relative;
  height: clamp(var(--fs-field-height-min), var(--fs-field-height-preferred), var(--fs-field-height-max));
  /* Enhanced 3D grass effect */
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 2px,
      transparent 2px,
      transparent 10px),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.15) 100%),
    linear-gradient(to right, #064e3b 0%, #047857 25%, #059669 50%, #047857 75%, #064e3b 100%);
  border: clamp(1px, 0.3vmin, 3px) solid #10b981;
  border-radius: clamp(4px, 0.8vmin, 8px);
  overflow: visible;
  /* 3D transform */
  transform: rotateX(8deg);
  transform-origin: center bottom;
  /* Enhanced shadows for depth */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 4px rgba(0, 0, 0, 0.2);
}

/* Yard Markers */
.yard-markers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.yard-marker {
  position: relative;
  width: clamp(3px, 0.2vmin, 2px);
  height: 100%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}

/* Team Endzone Styling */
.yard-marker.endzone {
  width: 8%;
  min-width: 20px;
  border-radius: clamp(2px, 0.4vmin, 4px) 0 0 clamp(2px, 0.4vmin, 4px);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
  /* Default endzone color */
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.15) 0%,
      var(--endzone-color, #374151) 20%,
      var(--endzone-color, #374151) 80%,
      rgba(0, 0, 0, 0.2) 100%);
}

.yard-marker.endzone:last-child {
  border-radius: 0 clamp(2px, 0.4vmin, 4px) clamp(2px, 0.4vmin, 4px) 0;
}

/* Away team endzone (left) */
.yard-marker.endzone.away-endzone {
  background: var(--away-primary-color, #1f2937) !important;
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}

/* Home team endzone (right) */
.yard-marker.endzone.home-endzone {
  background: var(--home-primary-color, #1f2937) !important;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
}

/* Endzone text styling - hidden */
.endzone-text {
  display: none;
}

.yard-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(6px, 1.2vmin, 10px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  /* pointer-events: none; - Removed to allow Chrome DevTools inspection */
  /* Default vertical offset - adjust per grid */
  margin-top: 0;
}

/* Ball Indicator (Scrimmage Line) */
.ball-indicator {
  position: absolute;
  top: clamp(-8px, -2vmin, -12px);
  bottom: clamp(-8px, -2vmin, -12px);
  left: 50%;
  width: clamp(4px, 0.8vmin, 6px);
  background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
  box-shadow:
    0 0 clamp(6px, 2vmin, 12px) rgba(59, 130, 246, 0.9),
    0 0 clamp(3px, 1vmin, 8px) rgba(59, 130, 246, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.3);
  transition: left 0.6s ease-out;
  z-index: 10;
  border-radius: clamp(2px, 0.4vmin, 4px);
}

.ball-indicator::before {
  content: '🏈';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(14px, 3vmin, 22px);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
}

/* First Down Line */
.first-down-line {
  position: absolute;
  top: clamp(-8px, -2vmin, -12px);
  bottom: clamp(-8px, -2vmin, -12px);
  left: 60%;
  width: clamp(4px, 0.8vmin, 6px);
  background: linear-gradient(to bottom, #fcd34d, #f59e0b);
  box-shadow:
    0 0 clamp(6px, 2vmin, 12px) rgba(251, 191, 36, 0.9),
    0 0 clamp(3px, 1vmin, 8px) rgba(251, 191, 36, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.3);
  transition: left 0.6s ease-out;
  z-index: 9;
  border-radius: clamp(2px, 0.4vmin, 4px);
}

/* First down marker flag */
.first-down-line::after {
  content: '1ST';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(5px, 0.9vmin, 8px);
  font-weight: 800;
  color: #000;
  background: #fcd34d;
  padding: 1px 3px;
  border-radius: 2px;
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Field Position Text */
.fullscreen-field-position {
  font-size: 0.9rem;
  color: #94a3b8;
  margin-top: 5px;
  text-align: center;
}

/* ============================================
   NEW FULL FIELD VISUALIZER
   ============================================ */

/* Field color variables */
.field-visualizer {
  --field-green: #147d3b;
  --field-green-light: #1a8e46;
  --line-white: rgba(255, 255, 255, 0.85);
}

/* Field Wrapper - provides 3D perspective */
.field-wrapper {
  perspective: 600px;
  width: 100%;
}

/* Main Field Container */
.football-field-container {
  width: 100%;
  aspect-ratio: 120 / 53.3;
  background-color: var(--field-green);
  border: 2px solid var(--line-white);
  position: relative;
  display: flex;
  box-sizing: border-box;
  background-image: radial-gradient(circle at center, var(--field-green-light) 0%, var(--field-green) 80%);
  border-radius: clamp(4px, 0.8vmin, 8px);
  overflow: visible;
  /* 3D Transform */
  transform: rotateX(30deg) scale(0.9);
  transform-origin: center 100%;
  transform-style: preserve-3d;
}

/* Endzones - 8.333% each (10 yards of 120 total) */
.end-zone {
  flex: 0 0 8.333%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.end-zone.left {
  border-right: 2px solid var(--line-white);
}

.end-zone.right {
  border-left: 2px solid var(--line-white);
}

.end-zone.away-endzone {
  background: var(--away-primary-color, #1f2937);
}

.end-zone.home-endzone {
  background: var(--home-primary-color, #1f2937);
}

.end-zone .endzone-text {
  display: none;
}

/* Goal post marks in endzones */
.goal-post-base {
  position: absolute;
  width: 2px;
  height: 8%;
  background: var(--line-white);
  left: 50%;
  transform: translateX(-50%);
}

.goal-post-base.top {
  top: 35%;
}

.goal-post-base.bottom {
  bottom: 35%;
}

.end-zone::before,
.end-zone::after {
  content: '';
  position: absolute;
  width: 25%;
  height: 2px;
  background: var(--line-white);
  left: 37.5%;
}

.end-zone::before {
  top: 35%;
}

.end-zone::after {
  bottom: 35%;
}

/* Goal Post Images - 3D positioned */
.goal-post {
  position: absolute;
  height: 120px;
  width: auto;
  z-index: 15;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transform-style: preserve-3d;
  transform-origin: center bottom;
  pointer-events: none;
}

/* Left Goal Post */
.end-zone.left .goal-post {
  left: 50%;
  top: 34.87%;
  transform: translate(-50%, -50%) rotateX(-26deg) rotateY(-23deg) rotateZ(0deg) scale(1.15);
}

/* Right Goal Post */
.end-zone.right .goal-post {
  left: 50%;
  top: 35.2%;
  transform: translate(-50%, -50%) rotateX(-28deg) rotateY(19deg) rotateZ(0deg) scale(1.05);
}

/* Playing Field - takes remaining 83.333% */
.playing-field {
  flex: 1;
  display: flex;
  position: relative;
}

/* 10 Yard Sections */
.ten-yard-section {
  flex: 1;
  box-sizing: border-box;
  border-right: 2px solid var(--line-white);
  position: relative;
}

.ten-yard-section:last-child {
  border-right: none;
}

/* Hash marks container */
.hash-marks-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Hash mark rows */
.hash-row {
  position: absolute;
  width: 100%;
  background-image: repeating-linear-gradient(to right,
      var(--line-white),
      var(--line-white) 2px,
      transparent 2px,
      transparent 10%);
  background-position: calc(10% - 1px) 0;
}

.hash-row.sideline-top {
  top: 2%;
  height: 4%;
}

.hash-row.sideline-bottom {
  bottom: 2%;
  height: 4%;
}

.hash-row.middle-hashes {
  top: 40%;
  height: 20%;
  background-image:
    repeating-linear-gradient(to right, var(--line-white) 0, var(--line-white) 2px, transparent 2px, transparent 10%),
    repeating-linear-gradient(to right, var(--line-white) 0, var(--line-white) 2px, transparent 2px, transparent 10%);
  background-size: 100% 15%, 100% 15%;
  background-position: calc(10% - 1px) 0, calc(10% - 1px) 100%;
  background-repeat: repeat-x;
}

/* Single center hash row for compressed field */
.hash-row.middle-single {
  top: 45%;
  height: 10%;
}

/* Numbers overlay */
.numbers-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8% 0;
  box-sizing: border-box;
}

.numbers-row {
  display: flex;
  justify-content: space-evenly;
  color: var(--line-white);
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: clamp(6px, 2.2vmin, 16px);
  /* Default vertical offset - adjust per grid */
  margin-top: 0;
}

.numbers-row.top {
  transform: rotate(180deg);
}

/* ============================================
   NUMBERS ROW - GRID-SPECIFIC SIZING CONTROLS
   Adjust font-size and margin-top per grid quantity
   ============================================ */

/* Grid 1 (single card - largest) */
.fullscreen-grid.grid-1 .numbers-row {
  font-size: clamp(10px, 3vmin, 20px);
  margin-top: 0;
}

/* Grid 2 */
.fullscreen-grid.grid-2 .numbers-row {
  font-size: clamp(8px, 2.5vmin, 18px);
  margin-top: 0;
}

/* Grid 3 */
.fullscreen-grid.grid-3 .numbers-row {
  font-size: clamp(7px, 2.2vmin, 16px);
  margin-top: 47px;
}

/* Grid 4 */
.fullscreen-grid.grid-4 .numbers-row {
  font-size: clamp(6px, 2vmin, 14px);
  margin-top: 47px;
}

/* Grid 5 */
.fullscreen-grid.grid-5 .numbers-row {
  font-size: clamp(5px, 1.8vmin, 12px);
  margin-top: 47px;
}

/* Grid 6 */
.fullscreen-grid.grid-6 .numbers-row {
  font-size: clamp(5px, 1.6vmin, 11px);
  margin-top: 40px;
}

/* Grid 7 */
.fullscreen-grid.grid-7:not([data-page]) .numbers-row {
  font-size: clamp(4px, 1.4vmin, 10px);
  margin-top: 40px;
}

/* Grid 8 (smallest cards) */
.fullscreen-grid.grid-8:not([data-page]) .numbers-row {
  font-size: clamp(4px, 1.2vmin, 9px);
  margin-top: 40px;
}

.number-group {
  width: 0;
  display: flex;
  justify-content: center;
  white-space: nowrap;
}

/* Ball Indicator - inside playing-field */
.playing-field .ball-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: clamp(4px, 0.6vmin, 6px);
  background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.9), 0 0 4px rgba(59, 130, 246, 0.7);
  transition: left 0.6s ease-out, background 0.3s ease;
  z-index: 10;
  border-radius: 2px;
  transform: translateX(-50%);
}

.playing-field .ball-indicator::before {
  content: '🏈';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(12px, 2.5vmin, 20px);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
}

/* First Down Line - inside playing-field */
.playing-field .first-down-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60%;
  width: clamp(3px, 0.5vmin, 5px);
  background: linear-gradient(to bottom, #fcd34d, #f59e0b);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.9), 0 0 4px rgba(251, 191, 36, 0.7);
  transition: left 0.6s ease-out;
  z-index: 9;
  border-radius: 2px;
  transform: translateX(-50%);
}

.playing-field .first-down-line::after {
  content: '1ST';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(5px, 0.8vmin, 8px);
  font-weight: 800;
  color: #000;
  background: #fcd34d;
  padding: 1px 3px;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ============================================
   COMPRESSED FIELD (Grid 3-8)
   ============================================ */

.field-compressed .football-field-container {
  aspect-ratio: 120 / 26;
}

.field-compressed .numbers-overlay {
  padding: 0;
  justify-content: center;
}

.field-compressed .numbers-row.top {
  display: none;
}

.field-compressed .hash-row.sideline-top,
.field-compressed .hash-row.sideline-bottom,
.field-compressed .hash-row.middle-hashes {
  display: none;
}

.field-compressed .endzone-text {
  font-size: clamp(6px, 1vmin, 10px);
}

.field-compressed .goal-post-base,
.field-compressed .end-zone::before,
.field-compressed .end-zone::after {
  display: none;
}

/* Hide goal post images in compressed view */
.field-compressed .goal-post {
  display: none;
}

/* ============================================
   GRID-SPECIFIC FIELD HEIGHTS
   ============================================ */

.fullscreen-grid.grid-1 .football-field-container {
  max-height: 25vh;
}

.fullscreen-grid.grid-2 .football-field-container {
  max-height: 25vh;
}

.fullscreen-grid.grid-3 .football-field-container,
.fullscreen-grid.grid-4 .football-field-container {
  max-height: 10vh;
}

.fullscreen-grid.grid-5 .football-field-container,
.fullscreen-grid.grid-6 .football-field-container {
  max-height: 10vh;
}

.fullscreen-grid.grid-7:not([data-page]) .football-field-container,
.fullscreen-grid.grid-8:not([data-page]) .football-field-container {
  max-height: 8vh;
}

/* Grid-specific goal post scaling */
.fullscreen-grid.grid-1 .goal-post,
.fullscreen-grid.grid-2 .goal-post {
  height: 120px;
}

.fullscreen-grid.grid-3 .goal-post,
.fullscreen-grid.grid-4 .goal-post {
  height: 60px;
}

.fullscreen-grid.grid-5 .goal-post,
.fullscreen-grid.grid-6 .goal-post {
  height: 50px;
}

.fullscreen-grid.grid-7:not([data-page]) .goal-post,
.fullscreen-grid.grid-8:not([data-page]) .goal-post {
  height: 40px;
}

/* ============================================
   11. TIMEOUT BARS
   ============================================ */

.fullscreen-timeouts {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 8px);
  margin-top: clamp(4px, 0.8vh, 8px);
}

.timeout-bar {
  width: clamp(16px, 3vw, 28px);
  height: clamp(5px, 1vh, 8px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  transition: background 0.3s ease;
}

.timeout-bar.used {
  background: transparent;
}

/* ============================================
   11. GAME SELECTOR (On hover)
   ============================================ */

.fs-game-selector-container {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 10;
}

.fs-game-selector {
  width: 100%;
  padding: 8px 12px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid #475569;
  border-radius: 6px;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

.fs-game-selector:focus {
  outline: none;
  border-color: #6366f1;
}

/* ============================================
   12. RESPONSIVE SCALING
   Adjust element sizes based on grid layout
   ============================================ */

/* Grid 1 - Large single card */
.fullscreen-grid.grid-1 .sport-logo-indicator {
  width: 100px;
  height: 100px;
}

.fullscreen-grid.grid-1 .fullscreen-team-logo {
  width: 120px;
  height: 120px;
}

.fullscreen-grid.grid-1 .fullscreen-live-team-name {
  font-size: 3rem;
}

.fullscreen-grid.grid-1 .fullscreen-team-score {
  font-size: 6rem;
  min-width: 120px;
}

.fullscreen-grid.grid-1 .fullscreen-team-record {
  font-size: 1.3rem;
}

.fullscreen-grid.grid-1 .fullscreen-status-text {
  font-size: 2rem;
}

.fullscreen-grid.grid-1 .fullscreen-situation-info {
  font-size: 1.5rem;
}

.fullscreen-grid.grid-1 .field-container {
  height: clamp(var(--fs-field-height-grid-1-min), var(--fs-field-height-grid-1-preferred), var(--fs-field-height-grid-1-max));
}

.fullscreen-grid.grid-1 .yard-label {
  font-size: 14px !important;
  margin-top: 0px;
  /* Adjust: negative = up, positive = down */
}

.fullscreen-grid.grid-1 .playing-field .ball-indicator::before {
  font-size: 24px !important;
}

/* Grid 2 - Two cards side by side */
.fullscreen-grid.grid-2 .sport-logo-indicator {
  width: 70px;
  height: 70px;
}

.fullscreen-grid.grid-2 .fullscreen-team-logo {
  width: 90px;
  height: 90px;
}

.fullscreen-grid.grid-2 .fullscreen-live-team-name {
  font-size: 2.2rem;
}

.fullscreen-grid.grid-2 .fullscreen-team-score {
  font-size: 5rem;
}

.fullscreen-grid.grid-2 .fullscreen-team-record {
  font-size: 1.1rem;
}

.fullscreen-grid.grid-2 .yard-label {
  font-size: 13px !important;
  margin-top: 0px;
  /* Adjust: negative = up, positive = down */
}

.fullscreen-grid.grid-2 .playing-field .ball-indicator::before {
  font-size: 22px !important;
}

/* Grid 3 - Similar to grid-2 sizing */
.fullscreen-grid.grid-3 .sport-logo-indicator {
  width: 60px;
  height: 60px;
}

.fullscreen-grid.grid-3 .fullscreen-team-logo {
  width: 70px;
  height: 70px;
}

.fullscreen-grid.grid-3 .fullscreen-live-team-name {
  font-size: 1.8rem;
}

.fullscreen-grid.grid-3 .fullscreen-team-score {
  font-size: 4rem;
}

.fullscreen-grid.grid-3 .fullscreen-team-record {
  font-size: 1rem;
}

.fullscreen-grid.grid-3 .fullscreen-status-text {
  font-size: 1.2rem;
}

.fullscreen-grid.grid-3 .yard-label {
  font-size: 12px !important;
  margin-top: 0px;
  /* Adjust: negative = up, positive = down */
}

.fullscreen-grid.grid-3 .playing-field .ball-indicator::before {
  font-size: 20px !important;
}

/* Grid 4 - 2x2 layout */
.fullscreen-grid.grid-4 .sport-logo-indicator {
  width: 80px;
  height: 80px;
}

.fullscreen-grid.grid-4 .fullscreen-team-logo {
  width: 60px;
  height: 60px;
}

.fullscreen-grid.grid-4 .fullscreen-live-team-name {
  font-size: 1.5rem;
}

.fullscreen-grid.grid-4 .fullscreen-team-score {
  font-size: 3rem;
  min-width: 60px;
}

.fullscreen-grid.grid-4 .fullscreen-team-record {
  font-size: 0.85rem;
}

.fullscreen-grid.grid-4 .fullscreen-status-text {
  font-size: 1.9srem;
}

.fullscreen-grid.grid-4 .fullscreen-situation-info {
  font-size: 0.95rem;
}

.fullscreen-grid.grid-4 .field-container {
  height: 30px;
}

.fullscreen-grid.grid-4 .fullscreen-possession {
  font-size: 1rem;
  right: -20px;
}

.fullscreen-grid.grid-4 .yard-label {
  font-size: 11px !important;
  margin-top: 0px;
  /* Adjust: negative = up, positive = down */
}

.fullscreen-grid.grid-4 .playing-field .ball-indicator::before {
  font-size: 18px !important;
}

/* Grid 5 - Mixed sizing */
.fullscreen-grid.grid-5 .sport-logo-indicator {
  width: 65px;
  height: 65px;
}

.fullscreen-grid.grid-5 .fullscreen-team-logo {
  width: 55px;
  height: 55px;
}

.fullscreen-grid.grid-5 .fullscreen-live-team-name {
  font-size: 1.4rem;
}

.fullscreen-grid.grid-5 .fullscreen-team-score {
  font-size: 2.8rem;
  min-width: 55px;
}

.fullscreen-grid.grid-5 .fullscreen-team-record {
  font-size: 0.8rem;
}

.fullscreen-grid.grid-5 .fullscreen-status-text {
  font-size: 1.8rem;
}

.fullscreen-grid.grid-5 .fullscreen-situation-info {
  font-size: 0.9rem;
}

.fullscreen-grid.grid-5 .field-container {
  height: 28px;
}

.fullscreen-grid.grid-5 .yard-label {
  font-size: 9px !important;
  margin-top: 0px;
  /* Adjust: negative = up, positive = down */
}

.fullscreen-grid.grid-5 .playing-field .ball-indicator::before {
  font-size: 16px !important;
}

/* Grid 6 - 3x2 layout */
.fullscreen-grid.grid-6 .sport-logo-indicator {
  width: 40px;
  height: 40px;
  top: 10px;
  left: 10px;
}

.fullscreen-grid.grid-6 .fullscreen-team-logo {
  width: 45px;
  height: 45px;
}

.fullscreen-grid.grid-6 .fullscreen-live-team-name {
  font-size: 1.2rem;
}

.fullscreen-grid.grid-6 .fullscreen-team-score {
  font-size: 2.2rem;
  min-width: 45px;
}

.fullscreen-grid.grid-6 .fullscreen-team-record {
  font-size: 0.75rem;
}

.fullscreen-grid.grid-6 .fullscreen-status-text {
  font-size: 0.9rem;
}

.fullscreen-grid.grid-6 .fullscreen-situation-info {
  font-size: 0.8rem;
}

.fullscreen-grid.grid-6 .field-container {
  height: 25px;
}

.fullscreen-grid.grid-6 .yard-label {
  font-size: 8px !important;
  margin-top: 0px;
  /* Adjust: negative = up, positive = down */
}

.fullscreen-grid.grid-6 .playing-field .ball-indicator::before {
  font-size: 14px !important;
}

.fullscreen-grid.grid-6 .fullscreen-vs-divider-live {
  font-size: 0.9rem;
}

.fullscreen-grid.grid-6 .fullscreen-possession {
  font-size: 0.85rem;
  right: -15px;
}

.fullscreen-grid.grid-6 .fullscreen-live-score-header {
  gap: 12px;
}

/* Grid 7 - Featured left + 6 small right */
.fullscreen-grid.grid-7:not([data-page]) .sport-logo-indicator {
  width: 35px;
  height: 35px;
  top: 10px;
  left: 10px;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-team-logo {
  width: 40px;
  height: 40px;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-live-team-name {
  font-size: 1.1rem;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-team-score {
  font-size: 2rem;
  min-width: 40px;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-team-record {
  font-size: 0.7rem;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-status-text {
  font-size: 0.85rem;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-situation-info {
  font-size: 0.75rem;
}

.fullscreen-grid.grid-7:not([data-page]) .field-container {
  height: 22px;
}

.fullscreen-grid.grid-7:not([data-page]) .yard-label {
  font-size: 7px !important;
  margin-top: 0px;
  /* Adjust: negative = up, positive = down */
}

.fullscreen-grid.grid-7:not([data-page]) .playing-field .ball-indicator::before {
  font-size: 13px !important;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-vs-divider-live {
  font-size: 0.8rem;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-live-score-header {
  gap: 10px;
}

/* Grid 7 - Featured (first) card gets larger styling */
.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:first-child .sport-logo-indicator {
  width: 55px;
  height: 55px;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:first-child .fullscreen-team-logo {
  width: 65px;
  height: 65px;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:first-child .fullscreen-live-team-name {
  font-size: 1.6rem;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:first-child .fullscreen-team-score {
  font-size: 3.5rem;
  min-width: 65px;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:first-child .fullscreen-team-record {
  font-size: 0.9rem;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:first-child .fullscreen-status-text {
  font-size: 1.1rem;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:first-child .field-container {
  height: 35px;
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:first-child .yard-label {
  font-size: 10px !important;
  margin-top: 0px;
  /* Adjust: negative = up, positive = down */
}

.fullscreen-grid.grid-7:not([data-page]) .fullscreen-game-card:first-child .playing-field .ball-indicator::before {
  font-size: 18px !important;
}

/* Grid 8 - Asymmetric layout (featured + stacked) */
.fullscreen-grid.grid-8:not([data-page]) .sport-logo-indicator {
  width: 30px;
  height: 30px;
  top: 8px;
  left: 8px;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-game-card {
  padding: var(--g8-card-padding);
  border-radius: 8px;
  border-width: 2px;
}

/* Grid 8 Card 2 - Individual padding override */
.fullscreen-grid.grid-8:not([data-page]) .fullscreen-game-card:nth-child(2) {
  padding: var(--g8-card2-padding);
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-team-logo {
  width: 35px;
  height: 35px;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-live-team-name {
  font-size: 0.95rem;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-team-score {
  font-size: 1.8rem;
  min-width: 35px;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-team-record {
  font-size: 0.65rem;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-status-text {
  font-size: 0.75rem;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-situation-info {
  font-size: 0.7rem;
}

.fullscreen-grid.grid-8:not([data-page]) .field-container {
  height: 20px;
}

.fullscreen-grid.grid-8:not([data-page]) .yard-label {
  font-size: 7px !important;
  margin-top: 0px;
  /* Adjust: negative = up, positive = down */
}

.fullscreen-grid.grid-8:not([data-page]) .playing-field .ball-indicator::before {
  font-size: 12px !important;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-vs-divider-live {
  font-size: 0.7rem;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-possession {
  font-size: 0.7rem;
  right: -12px;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-live-score-header {
  gap: 8px;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-card-content {
  gap: 5px;
}

.fullscreen-grid.grid-8:not([data-page]) .timeout-bar {
  width: 12px;
  height: 4px;
}

.fullscreen-grid.grid-8:not([data-page]) .fullscreen-timeouts {
  gap: 2px;
}

/* ============================================
   13. MOBILE PORTRAIT MODE
   Vertical stacked layout for phones
   ============================================ */

@media screen and (max-width: 768px) and (orientation: portrait) {

  .fullscreen-container {
    background: #0a0e1a;
  }

  .fullscreen-grid {
    width: 100vw;
    height: 100dvh;
    padding: 8px;
    gap: 8px;
    overflow: hidden;
  }

  /* 1 Game - Full phone screen */
  .fullscreen-grid.grid-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 10px;
  }

  /* 2 Games - Vertical stack */
  .fullscreen-grid.grid-2 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }

  /* 4 Games - 2x2 */
  .fullscreen-grid.grid-4 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  /* 6 Games - 2x3 */
  .fullscreen-grid.grid-6 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }

  /* 8 Games - 2x4 */
  .fullscreen-grid.grid-8:not([data-page]) {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  /* Mobile Card Base */
  .fullscreen-game-card {
    padding: 10px;
    border-radius: 10px;
    border-width: 2px;
    overflow: hidden;
  }

  /* Hide game selector on mobile */
  .fs-game-selector-container {
    display: none !important;
  }

  /* --- 1 GAME MOBILE: TRUE VERTICAL LAYOUT --- */
  .fullscreen-grid.grid-1 .fullscreen-game-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    gap: 1vh;
  }

  .fullscreen-grid.grid-1 .fullscreen-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    gap: 1vh;
  }

  .fullscreen-grid.grid-1 .fullscreen-live-score-header {
    flex-direction: column;
    gap: 1vh;
    width: 100%;
    align-items: center;
  }

  .fullscreen-grid.grid-1 .fullscreen-team-stack {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 3vw;
  }

  .fullscreen-grid.grid-1 .fullscreen-vs-divider-live {
    display: block;
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    color: rgba(255, 255, 255, 0.7);
    margin: 0.5vh 0;
  }

  /* Mobile 1 Game - Dynamic sizing */
  .fullscreen-grid.grid-1 .sport-logo-indicator {
    width: 22vw;
    height: 22vw;
    max-width: 110px;
    max-height: 110px;
    top: 15px;
    left: 15px;
  }

  .fullscreen-grid.grid-1 .fullscreen-team-logo {
    width: 20vw;
    height: 20vw;
    max-width: 100px;
    max-height: 100px;
  }

  .fullscreen-grid.grid-1 .fullscreen-live-team-name {
    font-size: clamp(2rem, 10vw, 4rem);
    text-align: center;
    white-space: nowrap;
  }

  .fullscreen-grid.grid-1 .fullscreen-team-record {
    font-size: clamp(1rem, 4vw, 1.6rem);
    text-align: center;
    position: absolute;
    top: -2vh;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .fullscreen-grid.grid-1 .fullscreen-team-stack {
    position: relative;
    padding-top: 2.5vh;
  }

  .fullscreen-grid.grid-1 .fullscreen-team-score {
    font-size: clamp(4rem, 18vw, 7rem);
    text-align: center;
    min-width: auto;
  }

  .fullscreen-grid.grid-1 .fullscreen-status-text {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }

  .fullscreen-grid.grid-1 .fullscreen-upcoming-status-text {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }

  .fullscreen-grid.grid-1 .fullscreen-situation-info {
    font-size: clamp(1.3rem, 5vw, 2rem);
  }

  .fullscreen-grid.grid-1 .field-container {
    height: clamp(var(--fs-field-height-grid-1-min, 45px), var(--fs-field-height-grid-1-preferred, 9vh), var(--fs-field-height-grid-1-max, 75px));
  }

  .fullscreen-grid.grid-1 .fullscreen-possession {
    font-size: clamp(1.3rem, 4vw, 2rem);
  }

  .fullscreen-grid.grid-1 .fullscreen-timeouts {
    display: none;
  }

  .fullscreen-grid.grid-1 .fullscreen-field-position {
    font-size: clamp(1rem, 3.5vw, 1.4rem);
  }

  /* --- 2 GAMES MOBILE: HORIZONTAL LAYOUT WITH COMPACT SIZING --- */
  .fullscreen-grid.grid-2 .fullscreen-game-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 0.5vh;
  }

  .fullscreen-grid.grid-2 .fullscreen-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    gap: 0.5vh;
  }

  .fullscreen-grid.grid-2 .fullscreen-live-score-header {
    flex-direction: row;
    gap: 2vw;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .fullscreen-grid.grid-2 .fullscreen-team-stack {
    flex-direction: column;
    align-items: center;
    gap: 0.3vh;
    flex: 0 0 auto;
    min-width: 0;
  }

  .fullscreen-grid.grid-2 .fullscreen-vs-divider-live {
    font-size: clamp(1rem, 4vw, 1.8rem);
    flex-shrink: 0;
  }

  .fullscreen-grid.grid-2 .fullscreen-team-logo {
    width: 16vw;
    height: 16vw;
    max-width: 80px;
    max-height: 80px;
  }

  .fullscreen-grid.grid-2 .fullscreen-live-team-name {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
    white-space: nowrap;
  }

  .fullscreen-grid.grid-2 .fullscreen-team-score {
    font-size: clamp(3rem, 14vw, 5.5rem);
    min-width: auto;
  }

  .fullscreen-grid.grid-2 .fullscreen-team-record {
    font-size: clamp(0.85rem, 3vw, 1.2rem);
  }

  .fullscreen-grid.grid-2 .fullscreen-status-text {
    font-size: clamp(1.2rem, 5vw, 1.9rem);
  }

  .fullscreen-grid.grid-2 .fullscreen-status-container {
    margin-bottom: 0.5vh;
  }

  .fullscreen-grid.grid-2 .field-container {
    height: 32px;
  }

  .fullscreen-grid.grid-2 .field-visualizer {
    margin-top: 0.5vh;
    max-width: 95%;
    width: 95%;
  }

  .fullscreen-grid.grid-2 .fullscreen-situation-info {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    margin-top: 0.8vh;
  }

  .fullscreen-grid.grid-2 .fullscreen-down-distance-container {
    margin-top: 0.5vh;
  }

  .fullscreen-grid.grid-2 .fullscreen-down-distance {
    font-size: clamp(1.1rem, 4.5vw, 1.6rem);
  }

  .fullscreen-grid.grid-2 .sport-logo-indicator {
    width: 14vw;
    height: 14vw;
    max-width: 70px;
    max-height: 70px;
    top: 8px;
    left: 8px;
  }

  .fullscreen-grid.grid-2 .field-visualizer .ball-marker {
    width: 12px;
    height: 12px;
  }

  .fullscreen-grid.grid-2 .field-visualizer .yard-line {
    font-size: 0.7rem;
  }

  .fullscreen-grid.grid-2 .fullscreen-timeouts {
    display: none;
  }

  .fullscreen-grid.grid-2 .fullscreen-possession {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    right: -15px;
  }

  .fullscreen-grid.grid-2 .fullscreen-upcoming-status-text {
    font-size: clamp(1.2rem, 5vw, 1.9rem);
  }

  .fullscreen-grid.grid-2 .fullscreen-field-position {
    font-size: clamp(0.85rem, 3vw, 1.2rem);
  }

  /* Mobile 4 Games - Each ~50vh, 50vw */
  .fullscreen-grid.grid-4 .fullscreen-team-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3vh;
  }

  .fullscreen-grid.grid-4 .fullscreen-team-logo {
    width: 11vw;
    height: 11vw;
    max-width: 55px;
    max-height: 55px;
  }

  .fullscreen-grid.grid-4 .fullscreen-live-team-name {
    font-size: clamp(1rem, 5vw, 1.6rem);
    text-align: center;
  }

  .fullscreen-grid.grid-4 .fullscreen-team-record {
    font-size: clamp(0.65rem, 2.5vw, 1rem);
    text-align: center;
  }

  .fullscreen-grid.grid-4 .fullscreen-live-score-header {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fullscreen-grid.grid-4 .fullscreen-team-score {
    font-size: clamp(2rem, 10vw, 3.5rem);
    min-width: auto;
  }

  .fullscreen-grid.grid-4 .fullscreen-status-text {
    font-size: clamp(0.9rem, 4vw, 1.3rem);
  }

  .fullscreen-grid.grid-4 .fullscreen-situation-info {
    font-size: clamp(0.85rem, 3.5vw, 1.2rem);
  }

  .fullscreen-grid.grid-4 .field-container {
    height: 24px;
  }

  .fullscreen-grid.grid-4 .sport-logo-indicator {
    width: 10vw;
    height: 10vw;
    max-width: 45px;
    max-height: 45px;
  }

  .fullscreen-grid.grid-4 .fullscreen-timeouts {
    display: none;
  }

  .fullscreen-grid.grid-4 .fullscreen-upcoming-status-text {
    font-size: clamp(0.9rem, 4vw, 1.3rem);
  }

  .fullscreen-grid.grid-4 .fullscreen-vs-divider-live {
    font-size: clamp(0.8rem, 3vw, 1.1rem);
  }

  .fullscreen-grid.grid-4 .fullscreen-field-position {
    font-size: clamp(0.7rem, 2.5vw, 1rem);
  }

  /* Mobile 6 Games - Each ~33vh, 50vw */
  .fullscreen-grid.grid-6 .fullscreen-team-logo {
    width: 9vw;
    height: 9vw;
    max-width: 42px;
    max-height: 42px;
  }

  .fullscreen-grid.grid-6 .fullscreen-live-team-name {
    font-size: clamp(0.85rem, 4vw, 1.3rem);
  }

  .fullscreen-grid.grid-6 .fullscreen-team-score {
    font-size: clamp(1.6rem, 8vw, 2.8rem);
    min-width: auto;
  }

  .fullscreen-grid.grid-6 .fullscreen-team-record {
    font-size: clamp(0.55rem, 2vw, 0.9rem);
  }

  .fullscreen-grid.grid-6 .fullscreen-status-text {
    font-size: clamp(0.8rem, 3.5vw, 1.1rem);
  }

  .fullscreen-grid.grid-6 .fullscreen-situation-info {
    font-size: clamp(0.7rem, 3vw, 1rem);
  }

  .fullscreen-grid.grid-6 .field-container {
    height: 20px;
  }

  .fullscreen-grid.grid-6 .sport-logo-indicator {
    width: 8vw;
    height: 8vw;
    max-width: 36px;
    max-height: 36px;
  }

  .fullscreen-grid.grid-6 .fullscreen-timeouts {
    display: none;
  }

  .fullscreen-grid.grid-6 .fullscreen-upcoming-status-text {
    font-size: clamp(0.8rem, 3.5vw, 1.1rem);
  }

  .fullscreen-grid.grid-6 .fullscreen-vs-divider-live {
    font-size: clamp(0.7rem, 2.5vw, 0.95rem);
  }

  .fullscreen-grid.grid-6 .fullscreen-field-position {
    font-size: clamp(0.6rem, 2vw, 0.85rem);
  }

  /* Mobile 8 Games - Each ~25vh, 50vw */
  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-team-logo {
    width: 7vw;
    height: 7vw;
    max-width: 32px;
    max-height: 32px;
  }

  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-live-team-name {
    font-size: clamp(0.7rem, 3.5vw, 1.1rem);
  }

  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-team-score {
    font-size: clamp(1.3rem, 6.5vw, 2.2rem);
    min-width: auto;
  }

  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-team-record {
    font-size: clamp(0.5rem, 1.8vw, 0.75rem);
  }

  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-status-text {
    font-size: clamp(0.65rem, 2.8vw, 0.95rem);
  }

  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-situation-info {
    font-size: clamp(0.6rem, 2.5vw, 0.85rem);
  }

  .fullscreen-grid.grid-8:not([data-page]) .field-container {
    height: 16px;
  }

  .fullscreen-grid.grid-8:not([data-page]) .sport-logo-indicator {
    width: 7vw;
    height: 7vw;
    max-width: 30px;
    max-height: 30px;
  }

  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-timeouts {
    display: none;
  }

  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-upcoming-status-text {
    font-size: clamp(0.65rem, 2.8vw, 0.95rem);
  }

  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-vs-divider-live {
    font-size: clamp(0.55rem, 2vw, 0.8rem);
  }

  .fullscreen-grid.grid-8:not([data-page]) .fullscreen-field-position {
    font-size: clamp(0.5rem, 1.8vw, 0.7rem);
  }

  /* ============================================
     MOBILE PORTRAIT - YARD LABEL CONTROLS
     Adjust font-size and margin-top per grid
     margin-top: negative = up, positive = down
     ============================================ */
  .fullscreen-grid.grid-1 .yard-label {
    font-size: 11px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-1 .playing-field .ball-indicator::before {
    font-size: 20px !important;
  }

  .fullscreen-grid.grid-2 .yard-label {
    font-size: 10px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-2 .playing-field .ball-indicator::before {
    font-size: 18px !important;
  }

  .fullscreen-grid.grid-4 .yard-label {
    font-size: 8px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-4 .playing-field .ball-indicator::before {
    font-size: 14px !important;
  }

  .fullscreen-grid.grid-6 .yard-label {
    font-size: 6px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-6 .playing-field .ball-indicator::before {
    font-size: 12px !important;
  }

  .fullscreen-grid.grid-8:not([data-page]) .yard-label {
    font-size: 5px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-8:not([data-page]) .playing-field .ball-indicator::before {
    font-size: 10px !important;
  }

  /* ============================================
     MOBILE PORTRAIT - NUMBERS ROW CONTROLS
     Adjust font-size and margin-top per grid
     margin-top: negative = up, positive = down
     ============================================ */
  .fullscreen-grid.grid-1 .numbers-row {
    font-size: 11px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-2 .numbers-row {
    font-size: 10px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-4 .numbers-row {
    font-size: 8px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-6 .numbers-row {
    font-size: 6px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-8:not([data-page]) .numbers-row {
    font-size: 5px !important;
    margin-top: 0px;
  }
}

/* ============================================
   14. MOBILE LANDSCAPE
   ============================================ */

@media screen and (max-width: 1024px) and (orientation: landscape) {
  .fullscreen-grid {
    height: 100dvh;
  }

  /* Keep horizontal layout in landscape */
  .fullscreen-grid.grid-1 .fullscreen-live-score-header {
    flex-direction: row;
  }

  .fullscreen-grid.grid-1 .fullscreen-team-stack {
    flex-direction: column;
  }

  .fullscreen-grid.grid-1 .fullscreen-vs-divider-live {
    display: block;
  }

  /* ============================================
     MOBILE LANDSCAPE - YARD LABEL CONTROLS
     Adjust font-size and margin-top per grid
     margin-top: negative = up, positive = down
     ============================================ */
  .fullscreen-grid.grid-1 .yard-label {
    font-size: 12px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-1 .playing-field .ball-indicator::before {
    font-size: 22px !important;
  }

  .fullscreen-grid.grid-2 .yard-label {
    font-size: 11px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-2 .playing-field .ball-indicator::before {
    font-size: 20px !important;
  }

  .fullscreen-grid.grid-4 .yard-label {
    font-size: 9px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-4 .playing-field .ball-indicator::before {
    font-size: 16px !important;
  }

  .fullscreen-grid.grid-6 .yard-label {
    font-size: 7px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-6 .playing-field .ball-indicator::before {
    font-size: 13px !important;
  }

  .fullscreen-grid.grid-8:not([data-page]) .yard-label {
    font-size: 6px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-8:not([data-page]) .playing-field .ball-indicator::before {
    font-size: 11px !important;
  }

  /* ============================================
     MOBILE LANDSCAPE - NUMBERS ROW CONTROLS
     Adjust font-size and margin-top per grid
     margin-top: negative = up, positive = down
     ============================================ */
  .fullscreen-grid.grid-1 .numbers-row {
    font-size: 12px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-2 .numbers-row {
    font-size: 11px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-4 .numbers-row {
    font-size: 9px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-6 .numbers-row {
    font-size: 7px !important;
    margin-top: 0px;
  }

  .fullscreen-grid.grid-8:not([data-page]) .numbers-row {
    font-size: 6px !important;
    margin-top: 0px;
  }
}

/* ============================================
   15. REFRESH INDICATOR
   ============================================ */

.fullscreen-refresh-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.3s;
}

.fullscreen-refresh-indicator.active {
  background: #22c55e;
  animation: refreshPulse 0.5s ease-out;
}

@keyframes refreshPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ============================================
   NFL STATS MODAL - DISABLED
   ============================================ */
.nfl-stats-modal {
  display: none !important;
}