/* =========================================
   TV Display
   ========================================= */

:root {
  /* -----------------------------------------
     TV Safe Area
     ----------------------------------------- */

  --safe-x: 5vw;
  --safe-y: 5vh;

  /* -----------------------------------------
     Colors
     ----------------------------------------- */

  --background: #101216;

  --bg-primary: #ffffff;
  --bg-secondary: #0033a1;
  --bg-tertiary: #e80000;

  --border-primary: #ffffff;

  --bg-pill-default: #c2c2c2;

  --surface: #191c22;
  --surface-hover: #20242c;

  --text-primary: #ffffff;
  --text-secondary: #0033a1;
  --text-tertiary: #e80000;
  --text-grey: #7c7d7e;
  --text-muted: #7f8794;
  --text-black: #000000;

  --border: rgba(255, 255, 255, 0.1);

  --success: #42d392;

  /* -----------------------------------------
     Responsive Spacing
     ----------------------------------------- */

  --space-xs: clamp(8px, 0.5vw, 16px);
  --space-sm: clamp(12px, 0.8vw, 24px);
  --space-md: clamp(20px, 1.5vw, 48px);
  --space-lg: clamp(28px, 2.5vw, 72px);
  --space-xl: clamp(40px, 4vw, 120px);

  --space-1: clamp(4px, 0.25vw, 8px);
  --space-2: clamp(8px, 0.5vw, 16px);
  --space-3: clamp(12px, 0.75vw, 24px);
  --space-4: clamp(16px, 1vw, 32px);
  --space-5: clamp(24px, 1.5vw, 48px);
  --space-6: clamp(32px, 2vw, 64px);
  --space-7: clamp(48px, 3vw, 96px);
  --space-8: clamp(64px, 4vw, 128px);

  --space-9: clamp(80px, 5vw, 160px);
  --space-10: clamp(100px, 6.25vw, 200px);
  --space-11: clamp(120px, 7.5vw, 240px);
  --space-12: clamp(140px, 8.75vw, 280px);
  --space-13: clamp(160px, 10vw, 320px);
  --space-14: clamp(180px, 11.25vw, 360px);
  --space-15: clamp(200px, 12.5vw, 400px);
  --space-16: clamp(220px, 13.75vw, 440px);
  --space-17: clamp(240px, 15vw, 480px);
  --space-18: clamp(260px, 16.25vw, 520px);
  --space-19: clamp(280px, 17.5vw, 560px);
  --space-20: clamp(300px, 18.75vw, 600px);

  /* -----------------------------------------
     Responsive Radius
     ----------------------------------------- */

  --radius-sm: clamp(8px, 0.5vw, 16px);
  --radius-md: clamp(12px, 0.8vw, 24px);
  --radius-lg: clamp(16px, 1vw, 32px);
  --radius-xl: clamp(32px, 2vw, 64px);

  --radius-1: clamp(4px, 0.25vw, 8px);
  --radius-2: clamp(8px, 0.5vw, 16px);
  --radius-3: clamp(12px, 0.75vw, 24px);
  --radius-4: clamp(16px, 1vw, 32px);
  --radius-5: clamp(20px, 1.25vw, 40px);
  --radius-6: clamp(24px, 1.5vw, 48px);
  --radius-7: clamp(28px, 1.75vw, 56px);
  --radius-8: clamp(32px, 2vw, 64px);
  --radius-9: clamp(36px, 2.25vw, 72px);
  --radius-10: clamp(40px, 2.5vw, 80px);
  --radius-11: clamp(44px, 2.75vw, 88px);
  --radius-12: clamp(48px, 3vw, 96px);
  --radius-13: clamp(52px, 3.25vw, 104px);
  --radius-14: clamp(56px, 3.5vw, 112px);
  --radius-15: clamp(60px, 3.75vw, 120px);
  /* -----------------------------------------
   Fully rounded
    ----------------------------------------- */
  --radius-pill: 9999px;
}

/* =========================================
   Base
   ========================================= */

html,
body {
  width: 100%;
  min-height: 100%;
  /* height: 100%; */
  background: var(--background);
  color: var(--text-primary);

  font-family:
    "NewHeroAccess-Regular",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body {
  overflow: hidden;
}

/* =========================================
   TV Screen
   ========================================= */

.tv-screen {
  width: 100%;
  min-height: 100dvh;
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 255, 255, 0.06),
      transparent 35%
    ),
    var(--background);
}

/* =========================================
   SAFE AREA
   ========================================= */

.tv-safe-area {
  width: 100%;
  min-height: 100dvh;
  padding: var(--safe-y) var(--safe-x);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-lg);
}

/* =========================================
   Header
   ========================================= */

.tv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.tv-header h1 {
  font-size: clamp(32px, 3vw, 80px);
  line-height: 1.05;
  font-weight: 700;
}

/* =========================================
   Main Content
   ========================================= */

.tv-content {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}

/* =========================================
   Footer
   ========================================= */

.tv-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--text-muted);
  font-size: clamp(14px, 0.9vw, 26px);
}

/* =========================================
   Smaller Displays
   ========================================= */

@media (max-width: 1000px) {
  .tv-content {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Reduced Motion
   ========================================= */

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