/* ── BREAKPOINTS ──
   Mobile-first base styles live in base/layout/components/game.css.
   This file only contains progressive enhancements for larger viewports,
   kept centralized so every breakpoint decision lives in one place. */

/* Small phones: tighten nav further */
@media (max-width: 380px) {
  .nav-logo { font-size: 0.55rem; }
  .lives { display: none; }
  .game-stats { font-size: 0.36rem; gap: 0.6rem; }
}

/* Tablet and up */
@media (min-width: 640px) {
  .nav-links { gap: 2rem; }
  .nav-links a { font-size: 0.55rem; }

  section { padding: 6rem 2rem; }

  .about-grid {
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
  }
  .about-card { margin: 0; max-width: none; }

  .skills-grid,
  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  .contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }

  .exp-item { grid-template-columns: 80px 1fr; gap: 1.5rem; }
  .exp-level-num { font-size: 1.2rem; }
  .exp-level-text { font-size: 0.3rem; }

  .exp-card::before {
    content: '';
    position: absolute; left: -12px; top: 20px;
    width: 0; height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--green);
  }

  .game-instructions { font-size: 0.4rem; }

  /* Above mobile, revert to a fixed-ratio box (matches the design's
     900x280 world coordinates) instead of viewport-height sizing —
     vh-based height looks erratic on wide/landscape viewports. */
  .game-canvas-wrap {
    height: auto;
    aspect-ratio: 900 / 280;
    max-width: 900px;
    margin: 0 auto;
  }
}

/* Desktop: hero/headline breathing room, hover-only affordances already
   in components.css are fine since touch devices simply won't trigger :hover */
@media (min-width: 960px) {
  .hero-content { padding: 2rem; }
  .game-wrapper { padding: 1.5rem; }
}

/* Landscape phones: hero shouldn't force full 100vh and crush the game later */
@media (max-height: 480px) and (orientation: landscape) {
  #hero { min-height: 100vh; }
}