/* Base fluid media */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  .header { padding: 1rem 1.25rem; }
  .slide-content { padding: 1.25rem; max-width: 820px; }
  .repos-container { max-width: 700px; }
  .timeline-container { height: 120px; }
  .timeline-bar { max-width: 40px; min-width: 24px; }
}

/* Mobile layout and overflow fixes */
@media (max-width: 768px) {
  .header { padding: 0.75rem 1rem; }
  .progress-nav { display: none; }

  /* Allow slides to scroll on small screens while centering when content fits */
  .slides-container { overflow: visible; }
  .slide {
    justify-content: center;
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100dvh;
  }
  
  /* Summary slide specific: no extra padding/scroll */
  #slide-9 {
    padding: 0;
    overflow: hidden;
  }
  
  .slide-content { padding: 1rem; max-width: 640px; text-align: center; width: 100%; }

  .nav-arrow { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .nav-arrow.left { left: 1rem; }
  .nav-arrow.right { right: 1rem; }

  .footer {
    position: static;
    transform: none;
    text-align: center;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
  }

  .logo { font-size: 1rem; }
  .control-btn { width: 36px; height: 36px; }

  .title-main { font-size: clamp(2.25rem, 12vw, 3.5rem); }
  .big-number { font-size: clamp(3.5rem, 16vw, 6rem); }
  .title-subtitle { font-size: 1rem; max-width: 90%; }

  .github-3d-frame { width: 200px; height: 200px; }
  .github-3d-face svg { width: 96px; height: 96px; }

  .username-input { width: 100%; max-width: 280px; }
  .token-input { font-size: 0.9rem; }

  .repos-container { padding: 0 0.5rem; }
  .repo-card { flex-direction: column; align-items: flex-start; }
  .repo-stats { gap: 0.75rem; flex-wrap: wrap; }

  /* Languages */
  .languages-grid { max-width: 100%; padding: 0 0.25rem; }
  .language-info { gap: 0.5rem; }
  .language-bar-container { width: 48px; }

  /* Contribution graph already scrolls; tighten paddings */
  .contribution-graph { padding: 0.5rem; margin: 1rem auto; }

  /* Timeline */
  .timeline-container { height: 110px; }
  .timeline-bar { max-width: 36px; min-width: 20px; }
  .timeline-bar-label { bottom: -20px; font-size: 0.6rem; }

  /* Squad */
  .squad-container { gap: 1rem; }
  .squad-avatar { width: 64px; height: 64px; }

  /* Quote */
  .quote-container { padding: 1.25rem; }
  .quote-text { font-size: clamp(1.25rem, 5.5vw, 1.75rem); }

  /* Summary page responsive */
  .summary-layout { 
    flex-direction: column; 
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .summary-cards { padding: 2rem 1.25rem; min-height: auto; flex-shrink: 0; }
  .summary-stats { padding: 1.5rem 1.25rem 2rem; background: rgba(128, 0, 80, 0.4); flex-shrink: 0; }
  .summary-title { font-size: clamp(1.6rem, 6vw, 2.25rem); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .stat-item-value { font-size: 1.4rem; }
  .stat-item-value.small { font-size: 0.95rem; }
  .share-btn,
  .restart-btn {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    margin-top: 1rem;
    width: 100%;
  }
  .share-card-container { transform: scale(0.9); margin: 1rem 0; }
  .share-actions { flex-direction: column; }
  
  /* Card zoom fullscreen - smaller on mobile */
  .card-zoom-overlay .zoomed-card {
    transform: scale(1.2) !important;
  }
  
  .card-zoom-overlay.active .zoomed-card {
    transform: scale(1.2) !important;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .control-btn { width: 34px; height: 34px; }
  .nav-arrow { width: 42px; height: 42px; }
  .nav-arrow svg { width: 20px; height: 20px; }
  .deco-icons { display: none; }
  .github-3d-frame { width: 170px; height: 170px; }
  .language-percent { font-size: 1rem; }
}

/* Short viewports (e.g., landscape phones) */
@media (max-height: 700px) and (max-width: 1024px) {
  .slide { justify-content: flex-start; padding-top: calc(56px + env(safe-area-inset-top, 0px)); padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .github-3d-frame { width: 160px; height: 160px; }
  .title-subtitle { margin-top: 0.75rem; }
}