/* Final mobile overrides: loaded as a separate file to defeat stale Safari CSS caches. */
@media (max-width: 760px) {
  .hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(2.15rem, 10.4vw, 3.15rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .memory-section { padding-inline: 6px !important; }
  .memory-shell {
    padding: 14px 7px 20px !important;
    border-radius: 20px !important;
  }
  .memory-shell .section-heading { margin-bottom: 10px !important; }
  .memory-shell .section-heading h2 {
    font-size: clamp(1.65rem, 7.6vw, 2.35rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 6px !important;
  }
  .memory-shell .section-heading p {
    font-size: .86rem !important;
    line-height: 1.3 !important;
  }
  .difficulty-picker { gap: 5px !important; margin-bottom: 8px !important; }
  .difficulty-label { font-size: .84rem !important; }
  .difficulty-button { padding: 5px 10px !important; font-size: .82rem !important; }
  .memory-controls {
    gap: 6px 10px !important;
    margin-bottom: 10px !important;
    font-size: .82rem !important;
  }
  .memory-reset { padding: 7px 12px !important; }

  #memoryGame.memory-game,
  #memoryGame.memory-game.level-easy,
  #memoryGame.memory-game.level-medium {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
  }

  #memoryGame.memory-game.level-hard {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #memoryGame .memory-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 7px !important;
    box-shadow: 0 2px 6px rgba(47,42,38,.15) !important;
  }
  #memoryGame .memory-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .memory-message {
    margin-top: 10px !important;
    font-size: .86rem !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 390px) {
  #memoryGame.memory-game,
  #memoryGame.memory-game.level-easy,
  #memoryGame.memory-game.level-medium { gap: 4px !important; }
  #memoryGame.memory-game.level-hard { gap: 3px !important; }
}