/* ═══════════════════════════════════════════════════════════
   EDUKIDS — TABLET CSS
   Media queries and touch optimizations for tablets
═══════════════════════════════════════════════════════════ */

/* ── Base (tablet portrait: 768px) ── */
@media (min-width: 768px) {
  :root {
    --space-md:  20px;
    --space-lg:  28px;
    --space-xl:  40px;
  }

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

  .badges-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .avatar-grid {
    grid-template-columns: repeat(6, 1fr);
    max-width: 500px;
  }

  .module-card {
    min-height: 220px;
  }

  .module-card-icon {
    font-size: 5rem;
  }

  .module-card-name {
    font-size: 1.8rem;
  }
}

/* ── Tablet Landscape (1024px) ── */
@media (min-width: 1024px) {
  .modules-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }

  .splash-content {
    gap: 48px;
  }

  .app-title {
    font-size: 7rem;
  }

  .home-main {
    padding-top: 88px;
  }
}

/* ── Large Tablet / iPad Pro (1200px) ── */
@media (min-width: 1200px) {
  .modules-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-2xl) var(--space-2xl);
  }

  .module-card {
    min-height: 240px;
  }
}

/* ── Touch Target Sizing ── */
@media (pointer: coarse) {
  /* Ensure all interactive elements meet 44px minimum */
  button, .activity-btn, .avatar-option {
    min-height: 44px;
    min-width: 44px;
  }

  .activity-btn {
    min-height: 72px;
  }

  /* Larger touch areas for module cards */
  .module-card {
    min-height: 200px;
  }

  /* Prevent text selection on touch */
  * {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Allow text selection in inputs */
  input, textarea {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* ── Landscape Phone Fallback ── */
@media (max-width: 767px) {
  .app-title {
    font-size: 3.5rem;
  }

  .modules-grid {
    grid-template-columns: 1fr;
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .module-card {
    min-height: 160px;
  }

  .module-card-icon {
    font-size: 3rem;
  }

  .home-header {
    padding: var(--space-sm) var(--space-md);
  }

  .mascot {
    bottom: var(--space-md);
    right: var(--space-md);
  }

  .mascot-character {
    font-size: 2.2rem;
  }

  .screen-content {
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .btn-huge {
    padding: 16px 36px;
    font-size: 1.2rem;
  }

  .badges-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .avatar-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .avatar-option {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }
}

/* ── Orientation Specific ── */
@media (orientation: landscape) and (max-height: 500px) {
  .splash-content {
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .app-title {
    font-size: 2.5rem;
  }

  .logo-stars-ring {
    display: none;
  }

  .btn-huge {
    padding: 12px 32px;
    font-size: 1.1rem;
  }
}

/* ── High DPI / Retina ── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .bg-star {
    will-change: opacity, transform;
  }
}

/* ── Reduced Motion Support ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bg-orb {
    animation: none;
  }

  .mascot-character {
    animation: none;
  }
}

/* ── Safe Area (Notched Tablets) ── */
@supports (padding: max(0px)) {
  .home-header,
  .module-header {
    padding-left:  max(var(--space-xl), env(safe-area-inset-left));
    padding-right: max(var(--space-xl), env(safe-area-inset-right));
    padding-top:   max(var(--space-md), env(safe-area-inset-top));
  }

  .mascot {
    bottom:  max(var(--space-xl), env(safe-area-inset-bottom));
    right:   max(var(--space-xl), env(safe-area-inset-right));
  }
}