/* Responsive optimizations */

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(1140px, calc(100vw - 32px));
}

/* Tablet */
@media (max-width: 900px) {
  :root {
    --nav-height: 60px;
    --section-pad: clamp(56px, 10vw, 96px);
  }

  .nav__links {
    gap: 20px;
  }

  .timeline {
    padding-left: 32px;
  }

  .timeline__dot {
    left: -32px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .container {
    width: min(1140px, calc(100vw - 24px));
  }

  .hero__content {
    padding: calc(var(--nav-height) + 24px) 16px 32px;
  }

  .hero__title-accent {
    font-size: clamp(2.25rem, 12vw, 3.5rem);
  }

  .hero__subtitle {
    font-size: 0.95rem;
    letter-spacing: 0;
  }

  .section__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .about__lead {
    font-size: 1.1rem;
  }

  .about__body {
    font-size: 0.95rem;
  }

  .gameplay__showcase {
    gap: 12px;
  }

  .showcase__item {
    aspect-ratio: 16 / 11;
  }

  .studio__inner {
    padding: 32px 20px;
    gap: 28px;
  }

  .studio__logo {
    width: clamp(100px, 28vw, 160px);
  }

  .boss-card {
    padding: 28px 22px;
  }

  .timeline__content {
    padding: 18px 20px;
  }

  .footer__inner {
    gap: 20px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .container {
    width: calc(100vw - 20px);
  }

  .nav__logo-text {
    display: none;
  }

  .nav__logo-img {
    width: 30px;
    height: 30px;
  }

  .nav__cta--download .chroma-btn__label {
    font-size: 0.65rem;
  }

  .btn--download {
    padding: 14px 24px;
    min-width: 100%;
  }

  .btn--download .chroma-btn__label {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  .about__tags {
    gap: 8px;
  }

  .about__tags span {
    font-size: 0.75rem;
    padding: 6px 10px;
  }

  .game-card {
    padding: 22px 18px;
  }

  .gallery__item {
    min-height: 160px;
  }

  .footer-ascii {
    height: clamp(160px, 45vw, 240px);
  }
}

/* Safe areas (notched phones) */
@supports (padding: max(0px)) {
  .nav__inner {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .footer__bar {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  .hero {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Touch: no hover-dependent layout breaks */
@media (hover: none) {
  .game-card:hover {
    transform: none;
  }

  .boss-card:hover {
    transform: none;
  }
}