/* ==========================================================================
   Responsive Architecture & Mobile-First Excellence
   ========================================================================== */

/* Tablets & Smaller Laptops */
@media (max-width: 1024px) {
  .top-bar, .bottom-footer {
    padding: 1rem 2rem;
  }
  .sanctuary-stage-spacer {
    display: none !important;
  }
}

/* Portrait Viewports & Mobile Devices */
@media (max-width: 768px), (max-aspect-ratio: 1/1) {
  
  /* Scale the car so the entire silhouette sits elegantly in the lower half */
  .background-layer {
    background-size: 140% auto !important;
    background-position: center 94% !important;
  }

  .ambient-glow {
    width: 45vw;
    opacity: 0.85;
  }

  .vertical-light {
    display: none !important;
  }

  .top-bar {
    padding: 0.8rem 1rem !important;
    padding-top: max(0.8rem, env(safe-area-inset-top)) !important;
    justify-content: center !important;
  }

  .brand-tag {
    display: block !important;
    font-size: 0.52rem !important;
    letter-spacing: 0.18em !important;
    text-align: center !important;
  }

  .actions {
    gap: 0.6rem !important;
  }

  .btn-vip {
    padding: 0.42rem 0.85rem !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
  }

  .main-content {
    margin-top: clamp(1rem, 3vh, 2rem) !important;
    margin-bottom: auto !important;
    padding: 0 0.8rem !important;
    width: 100% !important;
  }

  .brand-logo {
    width: clamp(160px, 44vw, 210px) !important;
    margin-bottom: clamp(1rem, 2.2vh, 1.6rem) !important;
  }

  .headline {
    font-size: clamp(1.05rem, 3.8vw, 1.55rem) !important;
    letter-spacing: 0.12em !important;
    margin-left: 0.12em !important;
    margin-bottom: 0.4rem !important;
    white-space: nowrap !important;
  }

  .subtitle {
    font-size: clamp(0.44rem, 1.6vw, 0.6rem) !important;
    letter-spacing: 0.14em !important;
    margin-left: 0.14em !important;
    margin-bottom: clamp(1.2rem, 2.8vh, 2rem) !important;
    white-space: nowrap !important;
  }

  /* Glassmorphic Cockpit Telemetry HUD Pod */
  .countdown-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.25rem !important;
    padding: 0.5rem 0.65rem !important;
    width: 100% !important;
    max-width: min(325px, 92vw) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: rgba(12, 11, 10, 0.55) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(229, 180, 99, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8) !important;
  }

  .time-col {
    min-width: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .digits-wrapper {
    height: 1.8rem !important;
  }

  .digits {
    font-size: clamp(1.2rem, 4.6vw, 1.65rem) !important;
  }

  .unit-label {
    font-size: 0.42rem !important;
    letter-spacing: 0.1em !important;
    margin-top: 0.2rem !important;
    margin-left: 0 !important;
  }

  .divider {
    font-size: 1rem !important;
    padding-top: 0 !important;
    opacity: 0.25 !important;
  }

  .sanctuary-stage-spacer {
    height: clamp(60px, 12vh, 120px) !important;
  }

  .bottom-footer {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.6rem 1rem !important;
    padding-bottom: max(1.2rem, env(safe-area-inset-bottom)) !important;
    font-size: 0.55rem !important;
    text-align: center !important;
  }

  .footer-racing-stripe-wrapper {
    width: 100% !important;
    max-width: min(280px, 85vw) !important;
    margin: 0.35rem 0 !important;
  }

  .footer-racing-stripe {
    width: 100% !important;
    height: 6px !important;
  }
}

/* Extra Small Mobile (e.g. iPhone SE, 360px) */
@media (max-width: 400px) {
  .background-layer {
    background-size: 155% auto !important;
    background-position: center 94% !important;
  }

  .brand-logo {
    width: 150px !important;
  }

  .headline {
    font-size: 1rem !important;
    letter-spacing: 0.08em !important;
    margin-left: 0.08em !important;
  }

  .subtitle {
    font-size: 0.42rem !important;
    letter-spacing: 0.08em !important;
    margin-left: 0.08em !important;
  }

  .countdown-container {
    padding: 0.45rem 0.5rem !important;
    gap: 0.15rem !important;
    max-width: 290px !important;
  }

  .digits {
    font-size: 1.12rem !important;
  }

  .unit-label {
    font-size: 0.38rem !important;
    letter-spacing: 0.06em !important;
  }

  .divider {
    font-size: 0.95rem !important;
  }
}