/* ── MOBILE & RESPONSIVE ── */

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  button, a, .entry-btn, .fiverr-btn, .roblox-btn, .yt-link, .srv-link {
    min-height: 44px;
    min-width: 44px;
  }
  
  a, button { transition: none; }
}

/* Tablet */
@media (max-width: 900px) {
  .about-cols {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .proj-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .youtube-channels { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* Large mobile / small tablet */
@media (max-width: 680px) {
  html { font-size: 15px; }
  
  /* Nav */
  #nav { padding: 16px 20px; }
  #nav.stuck { padding: 12px 20px; }
  .nav-links { display: none; }
  .ham { display: flex; min-height: 44px; min-width: 44px; }

  /* Mobile Menu */
  .mobile-nav a { font-size: 2.5rem; gap: 20px; }
  .mobile-close { min-height: 44px; min-width: 44px; font-size: 1.2rem; }

  /* Hero */
  #hero { min-height: 100svh; }
  .hero-skull-top { font-size: 2.2rem; }
  .hero-eyebrow { font-size: .65rem; letter-spacing: .25em; }
  .hero-name { font-size: clamp(3rem, 18vw, 5rem); }
  .hero-tagline { font-size: clamp(.9rem, 4vw, 1.1rem); line-height: 1.4; }
  .hero-skull-bottom { font-size: 1rem; letter-spacing: .5rem; }
  .hero-scroll { bottom: 20px; }

  /* Entry Modal */
  .entry-title { font-size: clamp(2rem, 12vw, 3.5rem); }
  .entry-btn { min-height: 48px; padding: 16px 28px; font-size: .95rem; }

  /* Sections */
  .wrap { padding: 0 16px; }
  section { padding: 60px 0; }
  .rule { margin-bottom: 32px; }

  <!-- About -->
  .stat-block { grid-template-columns: 1fr 1fr; gap: 1px; }
  .stat-num { font-size: 2.4rem; }

  <!-- Projects -->
  .proj-grid { grid-template-columns: 1fr; }

  <!-- Servers -->
  .servers-grid { grid-template-columns: 1fr; }

  <!-- Fiverr -->
  .youtube-channels { grid-template-columns: 1fr; gap: 16px; }
  .discord-profile { margin-bottom: 32px; }

  <!-- Footer -->
  footer { padding: 48px 24px 36px; }

  <!-- Skills -->
  .skills-flow { gap: 6px; }
  .skill { font-size: .66rem; padding: 8px 12px; }

  <!-- Hide custom cursor on touch -->
  #cursor, #cursor-trail { display: none; }
}

<!-- Small mobile -->
@media (max-width: 480px) {
  html { font-size: 14px; }
  
  .wrap { padding: 0 14px; }
  .hero-name { font-size: clamp(2.5rem, 16vw, 4rem); }
  .hero-skull-bottom { letter-spacing: .3rem; }
  .sec-title { font-size: clamp(1.8rem, 8vw, 2.8rem); }
  .stat-block { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  
  .profile-pfp { width: 50px; height: 50px; }
  .yt-banner { height: 50px; }
  .yt-pfp { width: 36px; height: 36px; }
  
  .stat-num { font-size: 1.6rem; }
  button, .entry-btn { min-height: 44px; }
}

/* Safe areas for notch phones */
@supports (padding: max(0px)) {
  #nav {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  footer {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  .wrap {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .mobile-menu {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  @media (max-width: 680px) {
    #nav {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
  }
}

<!-- Landscape orientation - compact view -->
@media (max-height: 600px) and (orientation: landscape) {
  #hero { min-height: 100vh; }
  .hero-name { font-size: clamp(3rem, 12vw, 5rem); }
  .hero-skull-top { font-size: 1.4rem; margin-bottom: 6px; }
  .hero-skull-bottom { margin-top: 8px; letter-spacing: .3rem; }
  .hero-scroll { display: none; }
  section { padding: 36px 0; }
}

<!-- High DPI devices optimization -->
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

<!-- Reduce motion preference -->
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}