/* =========================================================
   MIDNIGHT ARCADE
   ACCESSIBILITY + MOBILE HERO PATCH

   Load AFTER arcade.css.
   This does not redesign the page.
========================================================= */

/* Screen-reader-only utility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Keep keyboard focus visible without changing mouse styling. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--terminal);
  outline-offset: 4px;
}

/* Prevent background scrolling while the dialog is open. */
body.modal-open {
  overflow: hidden;
}

/* Give interactive controls a minimum comfortable touch target. */
.sound-toggle,
.modal-close,
.arcade-button,
.cabinet-link {
  min-height: 44px;
}

/* Make disabled controls clearly non-interactive. */
button:disabled,
.cabinet-link--disabled {
  cursor: not-allowed;
}

/* Ensure text can enlarge without being clipped. */
.hero-copy,
.featured-game__info,
.cabinet,
.modal-window {
  min-width: 0;
}

/* =========================================================
   MOBILE HERO
========================================================= */

@media (max-width: 920px) {
  .arcade-hero {
    width: 100%;
    min-height: auto;

    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: start;

    gap: clamp(32px, 8vw, 58px);

    padding:
      clamp(54px, 10vw, 82px)
      clamp(18px, 5vw, 36px)
      56px;

    overflow: clip;
  }

  .hero-copy {
    width: min(100%, 720px);
    text-align: left;
  }

  .hero-machine {
    width: 100%;
    margin-top: 0;

    display: flex;
    justify-content: center;
  }

  .machine-shell {
    width: min(360px, 82vw);
    max-width: 100%;

    /* JS parallax must never leave the cabinet tilted on mobile. */
    transform: none !important;
  }

  .scroll-indicator {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;

    margin-top: -10px;
    padding: 10px 12px;
  }
}

@media (max-width: 650px) {
  .arcade-hero {
    gap: 34px;

    padding:
      46px
      18px
      44px;
  }

  .arcade-hero h1 {
    /*
      Keeps the existing large display treatment,
      but prevents MIDNIGHT from forcing horizontal overflow.
    */
    font-size:
      clamp(48px, 17vw, 82px);

    line-height: .82;
    letter-spacing: -.055em;

    overflow-wrap: normal;
    word-break: normal;
  }

  .hero-tagline {
    margin-top: 24px;
    font-size: clamp(12px, 3.7vw, 15px);
  }

  .hero-description {
    font-size: 13px;
    line-height: 1.7;
  }

  .hero-copy .arcade-button {
    width: 100%;
  }

  .machine-shell {
    width: min(320px, 84vw);
    padding: 16px;
  }

  .machine-marquee {
    padding: 12px 8px;
    font-size: 14px;
  }

  .machine-controls {
    padding:
      22px
      10px
      4px;
  }

  .scroll-indicator {
    width: auto;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .arcade-hero h1 {
    font-size:
      clamp(44px, 16.5vw, 66px);
  }

  .machine-shell {
    width: min(290px, 84vw);
  }
}

/* =========================================================
   USER MOTION PREFERENCE
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .machine-shell {
    transform: none !important;
  }
}

/* =========================================================
   HIGH-CONTRAST / FORCED-COLORS SUPPORT
========================================================= */

@media (forced-colors: active) {
  .arcade-button,
  .cabinet-link,
  .sound-toggle,
  .modal-close,
  .machine-shell,
  .modal-window {
    border: 1px solid ButtonText;
  }

  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid Highlight;
  }
}