/*
 * ==========================================================================
 * TABLET.CSS — Premium Tablet & iPad Experience Optimization
 * منصة أبطال الغد — Tablet-First Responsive Layer
 *
 * Load order: after style.css, engagement.css, companion_reactions.css
 *
 * Breakpoint Reference:
 *   iPad Mini portrait:    768px
 *   iPad Air portrait:     820px
 *   iPad Pro 11" portrait: 834px
 *   iPad Pro 12.9" port:   1024px
 *   Android tablets:       800px – 1400px
 *   Laptop secondary:      1366px+
 *
 * Orientation-specific:
 *   @media (orientation: landscape) + max-height guards
 * ==========================================================================
 */

/* ==========================================================================
   SECTION 1 — CSS CUSTOM PROPERTIES & GLOBAL TABLET TOKENS
   ========================================================================== */

:root {
  /* Tablet spacing scale */
  --tablet-space-xs:  8px;
  --tablet-space-sm:  12px;
  --tablet-space-md:  20px;
  --tablet-space-lg:  28px;
  --tablet-space-xl:  40px;

  /* Touch target minimums */
  --touch-target-min:    56px;
  --touch-target-ideal:  64px;

  /* Tablet font scale */
  --tablet-font-body:    1rem;       /* 16px min */
  --tablet-font-label:   1.05rem;
  --tablet-font-btn:     1.05rem;
  --tablet-font-title:   1.5rem;
  --tablet-font-hero:    2rem;

  /* Dynamic viewport height (Safari fix) */
  --vh-fix: 1vh; /* updated by JS if needed, fallback to 1vh */
}

/* ==========================================================================
   SECTION 2 — GLOBAL TOUCH & SAFARI COMPATIBILITY LAYER
   ========================================================================== */

/* Arabic typography fix: prevent letter-spacing from breaking cursive letter connections */
.prompt-text,
#prompt-area,
.instruction-text,
.option-text,
.equation-text,
.equation-box {
  font-family: var(--font-kids), 'Cairo', 'Tajawal', sans-serif !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* Remove 300ms tap delay everywhere */
* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Safari-specific: keep touch-action on draggable elements */
.sort-item,
.sim-draggable,
.grid-cell,
.quest-node {
  touch-action: none; /* allow drag gestures */
}

/* Safe area padding for notched iPads / Dynamic Island & Global Overflow Elimination */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  touch-action: pan-y pinch-zoom;
}

body {
  padding-top:    env(safe-area-inset-top,    0px);
  padding-left:   env(safe-area-inset-left,   0px);
  padding-right:  env(safe-area-inset-right,  0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  touch-action: pan-y pinch-zoom;
}

#app-container {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left:  max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  touch-action: pan-y pinch-zoom;
}

/* Sticky header safe area top offset */
header {
  padding-top: max(13px, env(safe-area-inset-top));
}

/* -webkit- prefixes for Safari backdrop-filter support */
header,
.profile-selection-card,
.pin-overlay,
.companion-choice-overlay,
.app-dialog,
.kids-hero,
.adventure-card,
.subject-header-card,
.unit-header-card,
.lesson-header-card,
.page-header-card,
.single-existing-profiles-bar,
.single-onboarding-box {
  -webkit-backdrop-filter: blur(10px);
}

/* Fix Safari height: 100vh to account for browser chrome */
.landing-experience-section.single-screen-landing {
  height: -webkit-fill-available;
  height: 100dvh;
}

/* Smooth scrolling on all scrollable areas */
.rewards-shop,
.parent-dashboard-card,
.single-profiles-grid,
.table-responsive {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent text size inflation on orientation change (Safari/Chrome) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* GPU-accelerate animations for smooth 60fps on tablets */
.world-card,
.unit-card,
.lesson-node-card,
.option-card,
.practice-mode-card,
.adventure-activity-card,
.profile-avatar-option,
.companion-choice,
.hero-choice-compact,
.bottom-subject-card {
  will-change: transform;
  transform: translateZ(0);
}

/* Reduce repaints during quiz interactions */
.adventure-card {
  contain: layout style;
}

/* ==========================================================================
   SECTION 3 — iPAD MINI & SMALL TABLETS: PORTRAIT (≤ 768px → 820px)
   The base for all tablet-specific overrides.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  /* ── App Container ──────────────────────────────────────────────── */
  #app-container {
    max-width: 100%;
    width: 100%;
    padding: 14px 20px 32px;
  }

  /* ── STICKY HEADER ──────────────────────────────────────────────── */
  header {
    position: relative;
    top: auto;
    padding: 10px 18px;
    border-radius: 20px 20px 20px 20px;
    margin-bottom: 16px;
    gap: 10px;
  }

  .logo {
    font-size: 1.25rem;
    gap: 8px;
    flex-shrink: 0;
  }

  .logo span {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }

  /* Header controls: wrap and compact on tablets to prevent overflow */
  .header-controls {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
  }

  /* Compact button styling on tablets to avoid clipping */
  .header-controls .btn {
    min-height: 42px;
    min-width: 42px;
    padding: 6px 10px;
    font-size: 0.86rem;
    border-radius: 12px;
    white-space: nowrap;
  }

  /* Stars badge */
  .badge-stars {
    padding: 8px 12px;
    font-size: 1rem;
    flex-shrink: 0;
  }

  /* ── NAVIGATION BAR ─────────────────────────────────────────────── */
  .app-navigation {
    padding: 10px 14px;
    margin-bottom: 14px;
    border-radius: 16px;
    gap: 12px;
  }

  .app-back-button {
    min-height: var(--touch-target-min);
    min-width: 100px;
    padding: 12px 18px;
    font-size: 1rem;
  }

  .breadcrumbs {
    font-size: 0.9rem;
  }

  .breadcrumbs button {
    min-height: var(--touch-target-min);
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  /* ── PROFILE SELECTION VIEW ─────────────────────────────────────── */
  .profile-selection-card {
    max-width: 90%;
    padding: 36px 28px;
    margin: 30px auto;
  }

  .profile-grid {
    gap: 24px;
    margin: 24px 0;
  }

  .profile-avatar-option {
    width: 130px;
    height: 130px;
  }

  .profile-avatar-option.large-profile-card {
    width: 160px;
    height: 160px;
  }

  .profile-avatar-option span {
    font-size: 3.5rem;
  }

  .profile-avatar-option.large-profile-card span {
    font-size: 4.5rem;
  }

  .profile-avatar-option p {
    font-size: 0.95rem;
  }

  .input-kids-name {
    max-width: 380px;
    padding: 14px 22px;
    font-size: 1.15rem;
  }

  /* ── KIDS HOME HERO ─────────────────────────────────────────────── */
  .kids-hero {
    padding: 24px 22px;
    gap: 18px;
    border-radius: 24px;
    margin-bottom: 22px;
  }

  .kids-hero-info {
    gap: 18px;
  }

  .kids-hero-avatar {
    width: 110px;
    height: 110px;
  }

  .kids-hero-greeting h2 {
    font-size: 1.7rem;
  }

  .kids-hero-greeting p {
    font-size: 1rem;
  }

  .progress-track {
    height: 26px;
  }

  /* ── SUBJECT / WORLD CARDS ──────────────────────────────────────── */
  .worlds-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 22px;
  }

  .world-card {
    padding: 22px 18px 20px;
    border-radius: 22px;
  }

  .world-icon {
    font-size: 3.2rem;
    width: 82px;
    height: 82px;
    border-radius: 22px;
  }

  .world-title {
    font-size: 1.3rem;
  }

  /* ── QUIZ / ADVENTURE SCREEN ────────────────────────────────────── */
  #adventure-view {
    padding-bottom: 50px !important;
  }

  .adventure-card {
    padding: 16px 20px 24px;
    border-radius: 22px;
    min-height: 0;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 24px;
  }

  /* Compact companion header on tablets */
  .quiz-companion-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
    gap: 12px;
  }

  .quiz-companion-avatar-card {
    width: 95px !important;
    height: 110px !important;
    border-radius: 22px !important;
  }

  .quiz-companion-speech {
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
    border-radius: 18px !important;
  }

  .quiz-circle-progress-wrap {
    width: 82px !important;
    height: 82px !important;
  }

  .circle-progress-svg {
    width: 82px !important;
    height: 82px !important;
  }

  .circle-progress-content .circle-pct-num {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
  }

  .circle-bottom-info .circle-q-fraction {
    font-size: 1.05rem !important;
    font-weight: 900 !important;
  }

  .circle-bottom-info .circle-q-label {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
  }

  .equation-box {
    padding: 16px 20px !important;
    margin-bottom: 14px !important;
    border-radius: 18px !important;
  }

  .adventure-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }

  .steps-indicator {
    gap: 10px;
  }

  .step-dot {
    width: 18px;
    height: 18px;
  }

  .instruction-text {
    font-size: 1.15rem;
    margin-bottom: 6px;
  }

  .prompt-text {
    font-size: 1.25rem;
    margin-bottom: 12px;
    line-height: 1.45;
  }

  /* Multiple Choice: bigger touch targets */
  .options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
  }

  .option-card {
    min-height: var(--touch-target-ideal);
    padding: 14px 18px;
    border-radius: 16px;
    border-width: 3px;
  }

  .option-visual {
    font-size: 2.5rem;
    margin-bottom: 6px;
  }

  .option-text {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  /* Ordering / Sort */
  .sort-list {
    gap: 14px;
    padding: 18px;
    min-height: 80px;
  }

  .sort-item {
    padding: 18px 28px;
    font-size: 1.3rem;
    border-radius: 16px;
    min-height: var(--touch-target-ideal);
    cursor: pointer; /* more tap-friendly label than 'grab' on touch */
  }

  /* Matching */
  .matching-canvas {
    gap: 30px;
    margin-bottom: 18px;
  }

  .match-node {
    padding: 18px 16px;
    font-size: 1.2rem;
    min-height: var(--touch-target-ideal);
    border-radius: 16px;
  }

  .match-dot {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  /* Story View */
  .story-view {
    padding: 22px;
    font-size: 1.3rem;
    line-height: 1.9;
    border-radius: 18px;
  }

  .story-graphic {
    font-size: 5.5rem;
    padding: 20px;
  }

  /* Simulation */
  .sim-viewport {
    height: 320px;
  }

  .sim-draggable {
    padding: 16px 26px;
    font-size: 1.4rem;
    min-height: var(--touch-target-min);
  }

  .circuit-switch {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
  }

  /* Feedback panel */
  .feedback-panel {
    padding: 12px 16px;
    margin-top: 10px;
    border-radius: 16px;
  }

  .feedback-header {
    font-size: 1.1rem;
    gap: 10px;
  }

  #incorrect-help, #correct-explanation {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Action bar */
  .action-bar {
    margin-top: 14px;
    gap: 12px;
  }

  /* All action buttons in quiz */
  .action-bar .btn,
  .btn-primary,
  .btn-accent,
  .btn-secondary {
    min-height: var(--touch-target-min);
    padding: 14px 26px;
    font-size: var(--tablet-font-btn);
    border-radius: 16px;
  }

  /* ── PARENT DASHBOARD ───────────────────────────────────────────── */
  .parent-dashboard-card {
    padding: 24px 22px;
    border-radius: 22px;
  }

  .parent-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 12px;
    gap: 6px;
    scrollbar-width: none;
  }

  .parent-tabs::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    min-height: var(--touch-target-min);
    padding: 10px 18px;
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .progress-table th,
  .progress-table td {
    padding: 14px 16px;
    font-size: 1rem;
  }

  .setting-row {
    padding: 18px;
    border-radius: 18px;
  }

  .switch-toggle {
    width: 56px;
    height: 30px;
  }

  .slider-round:before {
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
  }

  input:checked + .slider-round:before {
    transform: translateX(26px);
  }

  /* PIN Lock */
  .pin-box {
    max-width: 440px;
    padding: 36px;
    border-radius: 28px;
  }

  .pin-digit {
    width: 56px;
    height: 56px;
    font-size: 1.8rem;
    border-radius: 12px;
  }

  .pin-keyboard {
    max-width: 280px;
    gap: 12px;
  }

  .pin-key {
    min-height: 72px;
    font-size: 1.4rem;
    font-weight: 900;
    border-radius: 14px;
  }

  /* ── SUBJECT / UNIT / LESSON HEADERS ────────────────────────────── */
  .subject-header-card,
  .unit-header-card,
  .lesson-header-card {
    padding: 22px 20px;
    border-radius: 22px;
    margin-bottom: 20px;
  }

  /* Fix back button positioning — use flow instead of absolute */
  .back-btn {
    position: relative;
    top: auto;
    left: auto;
    min-height: var(--touch-target-min);
    margin-bottom: 14px;
    display: inline-flex;
    align-self: flex-start;
  }

  .subject-hero-info {
    margin-left: 0 !important;
    margin-top: 0;
    gap: 16px;
  }

  .subject-icon {
    font-size: 3.2rem;
    width: 82px;
    height: 82px;
  }

  .subject-title {
    font-size: 1.6rem;
  }

  /* Unit grid */
  .units-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .unit-card {
    padding: 22px 18px;
    border-radius: 18px;
    min-height: 140px;
  }

  .unit-card-title {
    font-size: 1.3rem;
  }

  .unit-card-desc {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Lesson list */
  .lesson-node-card {
    padding: 18px 20px;
    border-radius: 18px;
    min-height: var(--touch-target-ideal);
    margin-bottom: 10px;
  }

  .lesson-step-num {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }

  .lesson-title-text {
    font-size: 1.15rem;
  }

  .lesson-info-left {
    gap: 18px;
  }

  /* Practice mode cards */
  .practice-mode-card {
    padding: 22px 20px;
    border-radius: 18px;
    min-height: 76px;
  }

  .mode-icon {
    width: 68px;
    height: 68px;
    font-size: 2.5rem;
    border-radius: 18px;
    margin-left: 22px;
  }

  .mode-title {
    font-size: 1.15rem;
    font-weight: 900;
  }

  .mode-desc {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .mode-action-btn {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 1rem;
  }

  /* Journey map */
  .journey-node-item {
    width: 88px;
    height: 88px;
    font-size: 2.6rem;
  }

  .journey-node-label {
    font-size: 1.05rem;
    max-width: 180px;
  }

  .journey-avatar-indicator {
    width: 50px;
    height: 62px;
  }

  /* ── PAGE HEADER CARD ───────────────────────────────────────────── */
  .page-header-card {
    padding: 22px 20px;
    margin-bottom: 20px;
    border-radius: 22px;
  }

  /* ── HUB / HOME VIEW ────────────────────────────────────────────── */
  .hub-container {
    gap: 22px;
    padding: 0;
  }

  .kids-hero-hub {
    padding: 22px 20px;
    border-radius: 22px;
  }

  .todays-adventure-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .adventure-activity-card {
    padding: 18px;
    border-radius: 18px;
    min-height: 160px;
  }

  .activity-title {
    font-size: 1.15rem;
  }

  .activity-desc {
    font-size: 0.92rem;
  }

  .btn-activity-start {
    min-height: 48px;
    padding: 10px 20px;
    font-size: 1rem;
  }

  /* Weekly journey map */
  .weekly-adventure-card {
    padding: 20px 22px;
    border-radius: 20px;
  }

  .weekly-journey-map-wrapper {
    height: 240px;
  }

  /* Next reward banner */
  .next-reward-banner {
    padding: 18px 22px;
    border-radius: 18px;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* Progress ring */
  .today-progress-card {
    padding: 20px 22px;
    border-radius: 20px;
  }

  .progress-ring-container {
    width: 160px;
    height: 160px;
  }

  .ring-number {
    font-size: 2rem;
  }

  /* ── SUBJECT PROGRESS BOTTOM SECTION ───────────────────────────── */
  .bottom-subjects-progress-section {
    padding: 20px 22px;
    border-radius: 22px;
  }

  @media (min-width: 961px) and (max-width: 1199px) {
    .bottom-subjects-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
  }
  @media (min-width: 768px) and (max-width: 960px) {
    .bottom-subjects-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px;
    }
  }

  .bottom-subject-card {
    height: 190px;
    padding: 12px 14px;
    border-radius: 20px;
  }

  .bottom-card-char-wrap {
    width: 42%;
    max-width: 130px;
    height: 96%;
  }

  .bottom-card-info-col {
    width: 58%;
  }

  .bottom-card-title {
    font-size: 1.15rem;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    line-height: 1.35;
  }

  /* Portrait iPad (768px-880px): switch to 2 generous columns so cards are ~370px wide and Arabic titles never break single letters */
  @media (min-width: 768px) and (max-width: 880px) {
    .bottom-subjects-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px;
    }
    .bottom-subject-card {
      height: 180px;
    }
    .bottom-card-char-wrap {
      width: 38%;
      max-width: 140px;
    }
    .bottom-card-info-col {
      width: 62%;
    }
    .bottom-card-title {
      font-size: 1.25rem !important;
    }
  }

  .bottom-overall-progress-card {
    border-radius: 22px;
    padding: 18px 22px;
  }

  /* ── LANDING PAGE ───────────────────────────────────────────────── */
  .single-screen-container {
    padding: 18px 22px 24px;
  }

  .single-hero-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 16px;
    max-height: none;
  }

  /* Stack visual below text on tablet portrait */
  .single-visual-stage {
    order: -1; /* Show character above the form */
    max-height: 280px;
    overflow: hidden;
  }

  .single-character-wrapper {
    max-width: 480px;
    height: 260px;
    margin: 0 auto;
  }

  .single-hero-headline {
    font-size: 2.2rem;
  }

  .single-onboarding-box {
    padding: 22px;
    border-radius: 22px;
  }

  .hero-choice-compact {
    min-height: 140px;
    padding: 16px;
    border-radius: 20px;
  }

  .btn-hero-launch-compact {
    min-height: 60px;
    font-size: 1.2rem;
    border-radius: 18px;
  }

  .input-kids-hero-compact {
    padding: 16px 20px;
    font-size: 1.15rem;
    border-radius: 18px;
    min-height: 56px;
  }

  /* ── GAMES SECTION ──────────────────────────────────────────────── */
  .game-container {
    padding: 12px 18px;
  }

  .game-hero-panel {
    padding: 20px 22px;
    border-radius: 20px;
  }

  .game-hero-title {
    font-size: 1.6rem;
  }

  .tables-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }

  .table-card-btn {
    padding: 16px 8px;
    border-radius: 16px;
    min-height: 70px;
  }

  .table-title {
    font-size: 1.1rem;
  }

  .settings-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .quest-node {
    width: 68px;
    height: 68px;
    font-size: 1.6rem;
  }

  /* ── ENGAGEMENT OVERLAY ─────────────────────────────────────────── */
  .companion-choice-overlay {
    padding: 24px;
  }

  .choice-card {
    max-width: 620px;
    padding: 36px 28px;
    border-radius: 28px;
  }

  .companion-grid {
    gap: 18px;
    margin: 24px 0;
  }

  .companion-select-btn {
    padding: 18px;
    border-radius: 18px;
    min-height: 110px;
  }

  .comp-icon {
    font-size: 3.2rem;
    margin-bottom: 10px;
  }

  .comp-name {
    font-size: 1rem;
  }

  /* ── DIALOG ─────────────────────────────────────────────────────── */
  .app-dialog {
    max-width: 540px;
    padding: 36px;
    border-radius: 28px;
  }

  .app-dialog h2 {
    font-size: 1.6rem;
  }

  .app-dialog p {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .dialog-actions {
    gap: 14px;
  }

  .dialog-actions .btn {
    min-height: var(--touch-target-min);
    padding: 14px 28px;
    font-size: 1rem;
  }

  /* ── SUMMARY SCREEN ─────────────────────────────────────────────── */
  .summary-container {
    padding: 36px;
  }

  .summary-cup {
    font-size: 7rem;
  }

  .summary-stars-row {
    font-size: 2.6rem;
    gap: 10px;
  }

  /* ── COMPARISON & NUMBER LINE ───────────────────────────────────── */
  .comparison-card {
    padding: 24px;
    font-size: 2.5rem;
    min-width: 140px;
    border-radius: 18px;
  }

  .number-line-slider {
    width: 36px;
    height: 36px;
  }

  /* ── MASCOT SYSTEM ──────────────────────────────────────────────── */
  .mascot-welcome-intro {
    min-height: 200px;
    padding: 24px 28px;
    border-radius: 22px;
    gap: 22px;
  }

  .mascot-welcome-art {
    flex-basis: 160px;
    width: 160px;
    height: 160px;
  }

  .mascot-welcome-copy h1 {
    font-size: 2rem;
  }

  .mascot-reaction-strip {
    gap: 14px;
  }

  .mascot-reaction-card {
    min-height: 88px;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.9rem;
  }

  .mascot-reaction-card .mascot-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .companion-picker {
    gap: 14px;
  }

  .companion-choice {
    min-height: 116px;
    padding: 14px;
    border-radius: 20px;
  }

  .companion-choice > .mascot-avatar {
    width: 80px;
    height: 80px;
    flex-basis: 80px;
  }

  /* ── AUTH FORMS ─────────────────────────────────────────────────── */
  .auth-input {
    padding: 14px 18px !important;
    font-size: 1.1rem !important;
    border-radius: 14px;
  }

  /* ── MISC UTILITIES ─────────────────────────────────────────────── */
  .section-title {
    font-size: 1.5rem;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  .today-mission-box {
    padding: 22px 24px;
    border-radius: 20px;
  }

  .mission-title {
    font-size: 1.5rem;
  }

  .btn-hero-cta {
    min-height: var(--touch-target-min);
    font-size: 1.2rem;
    padding: 14px 32px;
  }
}

/* ==========================================================================
   SECTION 4 — iPAD AIR / PRO 11" PORTRAIT REFINEMENTS (820px – 1023px)
   ========================================================================== */

@media (min-width: 820px) and (max-width: 1023px) {

  /* 3-column subject grid fits nicely at this size */
  .worlds-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  /* 2-column adventure cards */
  .todays-adventure-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Header can show more buttons with some text */
  .header-controls .btn {
    padding: 9px 14px;
    font-size: 0.88rem;
  }

  /* Bottom subject cards: 3 columns fit only above 880px */
  @media (min-width: 881px) {
    .bottom-subjects-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media (max-width: 880px) {
    .bottom-subjects-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }

  /* Units can go 3-column */
  .units-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* Wider character & grade picker on landing */
  .single-character-picker {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Quiz options: can do 2x2 or auto */
  .options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* Wider matching canvas gap */
  .matching-canvas {
    gap: 40px;
  }

  /* Tables grid on games: full 5 columns */
  .tables-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* App dialog wider */
  .app-dialog {
    max-width: 580px;
  }

  /* Landing: show 2-column on larger portrait */
  .single-hero-stage {
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    margin-top: 12px;
  }

  .single-visual-stage {
    order: 0;
    max-height: none;
    overflow: visible;
  }

  .single-character-wrapper {
    height: 380px;
    max-width: 600px;
  }

  .single-hero-headline {
    font-size: 2.4rem;
  }
}

/* ==========================================================================
   SECTION 5 — iPAD PRO 12.9" & LARGE TABLETS (1024px – 1199px)
   ========================================================================== */

@media (min-width: 1024px) and (max-width: 1199px) {

  #app-container {
    max-width: 98%;
    padding: 16px 28px 40px;
  }

  /* Full 4-column world grid at large tablet */
  .worlds-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* 3-column adventure cards */
  .todays-adventure-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Full header controls */
  .header-controls .btn {
    padding: 10px 16px;
    font-size: 0.92rem;
  }

  /* Bottom subjects: 4 per row */
  .bottom-subjects-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .bottom-subject-card {
    height: 200px;
  }

  /* Units: 3-column */
  .units-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Landing: comfortable 2-column */
  .single-hero-stage {
    grid-template-columns: 1fr 1.15fr;
  }

  .single-character-wrapper {
    height: 460px;
  }

  .single-hero-headline {
    font-size: 2.6rem;
  }

  /* Matching canvas restored */
  .matching-canvas {
    gap: 50px;
  }

  /* Tables grid */
  .tables-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Options grid: 2x2 still works great */
  .options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   SECTION 6 — LANDSCAPE ORIENTATION: ALL TABLETS
   Targets the landscape-mode experience specifically.
   Priority fix: quiz/exercise screen in landscape iPad.
   ========================================================================== */

/* ── LANDSCAPE: ALL TABLETS (any width, height ≤ 900px) ──────────────────── */
@media (orientation: landscape) and (max-height: 900px) and (min-width: 768px) {

  /* Header: ultra-compact in landscape to reclaim vertical space */
  header {
    padding: 6px 16px;
    border-radius: 0 0 14px 14px;
    margin-bottom: 8px;
  }

  .logo {
    font-size: 1.05rem;
  }

  .logo span {
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
  }

  .header-controls .btn {
    padding: 6px 10px;
    font-size: 0.82rem;
    min-height: 36px;
    border-radius: 10px;
  }

  .badge-stars {
    padding: 5px 9px;
    font-size: 0.85rem;
  }

  /* Navigation bar: compact */
  .app-navigation {
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    gap: 8px;
  }

  .app-back-button {
    min-height: 38px;
    padding: 6px 14px;
    font-size: 0.9rem;
  }

  /* ── QUIZ / ADVENTURE SCREEN IN LANDSCAPE ──────────────────────── */
  /* Outer view: natural scrolling with plenty of bottom clearance */
  #adventure-view {
    padding: 0 0 40px 0 !important;
    overflow: visible !important;
  }

  /* The adventure card: natural flex-column, NEVER trapped in fixed max-height */
  .adventure-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px 24px;
    border-radius: 18px;
    min-height: 0;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 30px;
  }

  /* Compact companion header in landscape */
  .quiz-companion-header {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    gap: 10px !important;
  }

  .quiz-companion-info {
    gap: 10px !important;
  }

  .quiz-companion-avatar-card {
    width: 90px !important;
    height: 105px !important;
    border-radius: 20px !important;
  }

  .quiz-companion-speech {
    padding: 10px 16px !important;
    font-size: 1.05rem !important;
    border-radius: 16px !important;
  }

  .quiz-circle-progress-wrap {
    width: 78px !important;
    height: 78px !important;
  }

  .circle-progress-svg {
    width: 78px !important;
    height: 78px !important;
  }

  .circle-progress-content .circle-pct-num {
    font-size: 1.28rem !important;
    font-weight: 900 !important;
  }

  .circle-bottom-info .circle-q-fraction {
    font-size: 1.02rem !important;
    font-weight: 900 !important;
  }

  .circle-bottom-info .circle-q-label {
    font-size: 0.85rem !important;
    font-weight: 800 !important;
  }

  .quiz-progress-track {
    margin-bottom: 8px;
  }

  .equation-box {
    padding: 12px 18px !important;
    margin-bottom: 10px !important;
    border-radius: 14px !important;
  }

  /* Adventure header: compact horizontal strip */
  .adventure-header {
    margin-bottom: 4px;
    padding-bottom: 6px;
  }

  .steps-indicator {
    gap: 6px;
  }

  .step-dot {
    width: 14px;
    height: 14px;
  }

  /* Session stats: keep compact */
  .session-stats-row,
  .adventure-stats-row {
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 10px;
    border-radius: 12px;
  }

  .stat-item {
    font-size: 0.82rem;
    gap: 4px;
  }

  /* Companion bubble: hide in landscape to save space */
  .mission-companion-bubble {
    display: none;
  }

  /* Instruction text */
  .instruction-text {
    font-size: 1rem;
    margin-bottom: 3px;
    line-height: 1.3;
  }

  /* Prompt text */
  .prompt-text {
    font-size: 1.1rem;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  /* ── MULTIPLE CHOICE OPTIONS ───────────────────────────────────── */
  .options-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
  }

  .option-card {
    min-height: 52px;
    padding: 10px 12px;
    border-radius: 12px;
    border-width: 2px;
  }

  .option-visual {
    font-size: 1.8rem;
    margin-bottom: 3px;
  }

  .option-text {
    font-size: 1rem;
    line-height: 1.25;
  }

  /* ── MATCHING QUIZ ─────────────────────────────────────────────── */
  .matching-canvas {
    gap: 16px;
    margin-bottom: 8px;
    min-height: 0;
  }

  .match-column {
    gap: 8px;
  }

  .match-node {
    padding: 10px 12px;
    min-height: 46px;
    font-size: 1rem;
    border-radius: 12px;
  }

  .match-dot {
    width: 12px;
    height: 12px;
  }

  /* ── ORDERING / SORT QUIZ ──────────────────────────────────────── */
  .sort-list {
    min-height: 40px;
    padding: 8px 10px;
    gap: 6px;
    border-radius: 12px;
  }

  .sort-item {
    min-height: 46px;
    padding: 10px 14px;
    font-size: 1rem;
    border-radius: 12px;
  }

  /* ── STORY COMPREHENSION ───────────────────────────────────────── */
  .story-view {
    padding: 10px 14px;
    font-size: 1.05rem;
    line-height: 1.6;
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    margin-bottom: 8px;
  }

  .story-graphic {
    font-size: 3.5rem;
    padding: 12px;
  }

  /* ── SIMULATION ────────────────────────────────────────────────── */
  .sim-viewport {
    height: 200px;
    border-radius: 12px;
    margin-bottom: 8px;
  }

  .sim-draggable {
    padding: 10px 18px;
    font-size: 1.1rem;
    min-height: 44px;
  }

  .circuit-switch {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }

  /* ── FEEDBACK PANEL ────────────────────────────────────────────── */
  .feedback-panel {
    padding: 8px 12px;
    margin-top: 4px;
    border-radius: 12px;
  }

  .feedback-header {
    font-size: 1rem;
    gap: 8px;
  }

  #incorrect-help,
  #correct-explanation {
    font-size: 0.92rem;
    line-height: 1.4;
    margin-top: 4px;
  }

  /* ── ACTION BAR (Next / Submit buttons) ───────────────────────── */
  .action-bar {
    margin-top: 14px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    gap: 10px;
    flex-shrink: 0;
  }

  .action-bar .btn,
  .btn-primary,
  .btn-accent,
  .btn-secondary {
    min-height: 46px;
    padding: 10px 22px;
    font-size: 0.98rem;
    border-radius: 12px;
  }

  /* ── COMPACT HERO / HOME ───────────────────────────────────────── */
  .kids-hero {
    padding: 12px 16px;
    margin-bottom: 10px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .kids-hero-avatar {
    width: 72px;
    height: 72px;
  }

  .kids-hero-greeting h2 {
    font-size: 1.25rem;
  }

  /* ── LANDING PAGE IN LANDSCAPE ─────────────────────────────────── */
  .landing-experience-section.single-screen-landing {
    min-height: 100dvh;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .single-screen-container {
    padding: 10px 18px 14px;
    min-height: 100dvh;
    height: auto;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .single-hero-stage {
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    margin-top: 6px;
  }

  .single-visual-stage {
    order: 0;
    max-height: calc(100dvh - 90px);
  }

  .single-character-wrapper {
    height: calc(100dvh - 100px);
    max-width: 100%;
  }

  .single-character-img {
    object-fit: contain;
    height: 100%;
  }

  .single-onboarding-box {
    padding: 14px;
    gap: 8px;
    overflow-y: auto;
    max-height: calc(100dvh - 90px);
  }

  .single-hero-headline {
    font-size: 1.7rem;
    margin-bottom: 3px;
  }

  .single-hero-sub {
    font-size: 0.9rem;
  }

  .single-character-picker {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .hero-choice-compact {
    min-height: 90px;
    padding: 8px 6px;
  }

  .hero-choice-avatar-wrap {
    width: 56px;
    height: 62px;
  }

  .choice-label {
    font-size: 1.1rem;
  }

  .input-kids-hero-compact {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 1rem;
  }

  .btn-hero-launch-compact {
    min-height: 48px;
    font-size: 1.05rem;
    padding: 10px;
  }

  /* ── HUB IN LANDSCAPE ──────────────────────────────────────────── */
  .hub-container {
    gap: 12px;
  }

  .kids-hero-hub {
    padding: 14px 16px;
  }

  .hero-main-column {
    gap: 10px;
  }

  .todays-adventure-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .adventure-activity-card {
    min-height: 110px;
    padding: 12px;
  }

  /* ── PROGRESS MAP ──────────────────────────────────────────────── */
  .progress-ring-container {
    width: 110px;
    height: 110px;
  }

  .ring-number {
    font-size: 1.6rem;
  }

  /* ── BOTTOM SUBJECTS ───────────────────────────────────────────── */
  .bottom-subjects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .bottom-subject-card {
    height: 185px;
  }

  .bottom-card-char-wrap {
    width: 42%;
    max-width: 125px;
    height: 96%;
  }

  .bottom-card-info-col {
    width: 58%;
  }

  .bottom-card-title {
    font-size: 1rem;
  }
}

/* ── SMALL LANDSCAPE TABLETS iPad Mini landscape ~1024×768 ──────────────── */
@media (orientation: landscape) and (max-height: 780px) and (min-width: 768px) {

  /* Even more aggressive compacting on smaller landscape */
  .adventure-card {
    padding: 8px 12px 10px;
    gap: 5px;
    max-height: calc(100svh - 90px);
  }

  .instruction-text {
    font-size: 0.95rem;
  }

  .prompt-text {
    font-size: 1rem;
    margin-bottom: 6px;
  }

  .option-card {
    min-height: 46px;
    padding: 8px 10px;
  }

  .option-text {
    font-size: 0.95rem;
  }

  .sim-viewport {
    height: 170px;
  }

  .story-view {
    max-height: 150px;
    font-size: 1rem;
    padding: 8px 12px;
  }

  .matching-canvas {
    gap: 12px;
  }

  .match-node {
    padding: 8px 10px;
    min-height: 40px;
    font-size: 0.95rem;
  }

  .sort-item {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.95rem;
  }

  .sort-list {
    padding: 6px 8px;
    gap: 5px;
  }

  .action-bar .btn,
  .btn-primary,
  .btn-accent {
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}


/* ==========================================================================
   SECTION 7 — LARGE LANDSCAPE TABLETS & LAPTOPS AS SECONDARY (≥ 1200px)
   ========================================================================== */

@media (min-width: 1200px) {

  /* App Container stretches seamlessly without artificial empty borders */
  #app-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 14px 28px 40px 28px !important;
  }

  .hub-container {
    max-width: 1720px !important;
    width: 100% !important;
  }

  /* World grid: fluid responsive columns */
  .worlds-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
  }

  /* Adventure cards: fluid columns */
  .todays-adventure-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  /* Subjects: fluid non-empty grid */
  .bottom-subjects-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 20px !important;
  }

  .bottom-subject-card {
    height: 200px;
  }

  .single-screen-container {
    max-width: 1560px !important;
    width: 100% !important;
    justify-content: center !important;
    gap: clamp(16px, 2.5vh, 32px) !important;
  }
}

/* ==========================================================================
   SECTION 8 — TYPOGRAPHY SCALING (RESPONSIVE FLUID TEXT)
   ========================================================================== */

@media (min-width: 768px) {

  /* Headings */
  .kids-hero-greeting h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
  }

  .world-title {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  }

  .subject-title {
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  }

  .unit-card-title {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  }

  .section-title {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
  }

  /* Quiz text */
  .instruction-text {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  }

  .prompt-text {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.55;
  }

  .option-text {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.4;
  }

  /* Buttons always readable */
  .btn-primary,
  .btn-accent,
  .btn-secondary,
  button {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
  }

  /* Parent dashboard table */
  .progress-table th {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  }

  .progress-table td {
    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  }

  /* Story text */
  .story-text {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.85;
  }

  /* Landing headline */
  .single-hero-headline {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
  }

  .brand-main-name {
    font-size: clamp(1.5rem, 2.5vw, 2.4rem);
  }
}

/* ==========================================================================
   SECTION 9 — SAFARI iPAD SPECIFIC FIXES
   Detects iOS/iPadOS Safari via touch capability
   ========================================================================== */

/* Fix position: sticky in Safari inside overflow containers */
@supports (-webkit-touch-callout: none) {

  header {
    position: -webkit-sticky;
    position: sticky;
  }

  /* Fix Safari flex gap with fallback */
  .header-controls {
    margin-right: -8px;
  }

  .header-controls > * {
    margin-right: 8px;
  }

  /* Fix 100vh Safari problem */
  .landing-experience-section.single-screen-landing,
  .single-screen-container {
    height: -webkit-fill-available;
  }

  /* Fix: Safari doesn't always respect border-radius on overflow hidden */
  .world-card,
  .adventure-card,
  .option-card,
  .unit-card,
  .bottom-subject-card {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }

  /* Fix scrolling momentum */
  .rewards-shop,
  .parent-tabs,
  .single-profiles-grid {
    -webkit-overflow-scrolling: touch;
  }

  /* Fix input zoom on Safari (font-size must be >= 16px to prevent auto-zoom) */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Fix input border-radius in Safari */
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    -webkit-appearance: none;
    border-radius: 16px;
  }

  /* Prevent Safari from making buttons look native */
  button,
  .btn {
    -webkit-appearance: none;
  }
}

/* ==========================================================================
   SECTION 10 — TOUCH INTERACTION POLISH
   ========================================================================== */

/* Active states for touch (replaces hover on touch screens) */
@media (hover: none) and (pointer: coarse) {

  /* Touch feedback: quick scale on tap */
  .option-card:active,
  .sort-item:active,
  .match-node:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
  }

  .world-card:active,
  .unit-card:active,
  .lesson-node-card:active,
  .practice-mode-card:active,
  .adventure-activity-card:active,
  .bottom-subject-card:active {
    transform: translateY(2px) scale(0.98);
    transition: transform 0.1s ease;
  }

  .btn-primary:active,
  .btn-accent:active,
  .btn-secondary:active,
  button:active {
    transform: translateY(2px) scale(0.97);
  }

  /* Remove sticky hover effects that trap touch on tablets */
  .option-card:hover,
  .match-node:hover,
  .sort-item:hover,
  .practice-mode-card:hover,
  .world-card:hover,
  .unit-card:hover,
  .lesson-node-card:hover {
    transform: none;
    border-color: var(--color-card-border, #cbd5e1);
    background: #ffffff;
  }

  /* Ensure selected state is the only valid highlight on touch */
  .option-card.selected {
    border-color: #4338ca !important;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  }

  /* Show sort handle hint for drag interactions */
  .sort-item::before {
    content: '⠿';
    font-size: 1.2rem;
    opacity: 0.5;
    margin-inline-end: 8px;
    cursor: grab;
  }

  /* Tap highlight for interactive elements */
  .option-card,
  .match-node,
  .sort-item,
  .grid-cell,
  .journey-node-item,
  .quest-node,
  .shop-item-card,
  .world-card,
  .unit-card,
  .lesson-node-card,
  .practice-mode-card,
  .companion-choice,
  .hero-choice-compact,
  .profile-avatar-option {
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.12);
  }
}

/* ==========================================================================
   SECTION 11 — DARK MODE TABLET ADJUSTMENTS
   ========================================================================== */

@media (min-width: 768px) {

  body.dark-mode .option-card {
    background: rgba(30, 30, 47, 0.9);
    color: #f7fafc;
  }

  body.dark-mode .match-node {
    background: rgba(30, 30, 47, 0.9);
    color: #f7fafc;
  }

  body.dark-mode .sort-item {
    background: rgba(30, 30, 47, 0.9);
    color: #f7fafc;
  }

  body.dark-mode .pin-key {
    background: rgba(30, 30, 47, 0.9);
    color: #f7fafc;
  }

  body.dark-mode .pin-digit {
    background: rgba(30, 30, 47, 0.9);
    color: #f7fafc;
  }

  body.dark-mode .app-dialog {
    background: #1e1e2f;
    color: #f7fafc;
  }

  body.dark-mode header {
    background: rgba(30, 30, 47, 0.88);
  }

  body.dark-mode .input-kids-hero-compact {
    background: rgba(30, 30, 47, 0.9);
    color: #f7fafc;
    border-color: rgba(255, 255, 255, 0.15);
  }

  body.dark-mode .input-kids-hero-compact::placeholder {
    color: #a0aec0;
  }

  body.dark-mode .companion-tap-bubble {
    background: #1e1b4b !important;
    color: #f8fafc !important;
    border-color: #a855f7 !important;
  }

  body.dark-mode .companion-tap-bubble::after {
    border-top-color: #a855f7 !important;
  }
}

/* ==========================================================================
   SECTION 12 — REDUCED MOTION (TABLET OVERRIDE)
   Ensure tablet-specific animations also respect reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce), (min-width: 768px) {
  body.reduced-motion .world-card:hover {
    transform: none !important;
  }

  body.reduced-motion .option-card:active {
    transform: scale(0.98) !important;
    transition: none !important;
  }
}

/* ==========================================================================
   SECTION 13 — ACCESSIBILITY IMPROVEMENTS ON TABLETS
   ========================================================================== */

@media (min-width: 768px) {

  /* Focus rings for keyboard navigation only (not touch) */
  button:focus-visible,
  .btn:focus-visible,
  input:focus-visible,
  .option-card:focus-visible,
  .match-node:focus-visible,
  .sort-item:focus-visible,
  .grid-cell:focus-visible,
  [tabindex="0"]:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 12px;
  }

  .option-card:focus:not(:focus-visible),
  .match-node:focus:not(:focus-visible),
  .sort-item:focus:not(:focus-visible),
  .grid-cell:focus:not(:focus-visible) {
    outline: none !important;
  }

  /* High-contrast readable placeholders */
  input::placeholder {
    opacity: 0.65;
    font-weight: 600;
  }

  /* Skip link visible for tablet keyboard users */
  .skip-link:focus {
    left: 12px;
    top: 12px;
    font-size: 1rem;
    padding: 12px 20px;
  }
}

/* ==========================================================================
   SECTION 14 — TABLET-SPECIFIC HEADER OVERFLOW GUARD
   Prevents the 5-button header from overflowing on narrow tablets
   ========================================================================== */

/* iPad Mini portrait (~768px): ultra-compact header controls */
@media (min-width: 768px) and (max-width: 860px) {

  .header-controls {
    gap: 6px;
  }

  /* Show only icon emoji, hide text label */
  #header-btn-studio .btn-label,
  #header-btn-games .btn-label,
  #header-btn-build .btn-label,
  #header-btn-switch .btn-label,
  #header-btn-parent .btn-label {
    display: none;
  }

  /* Compact icon-only buttons */
  .header-controls .btn {
    padding: 8px 10px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.25rem; /* emoji visible */
    border-radius: 12px;
    letter-spacing: 0;
  }

  /* Stars badge: compact */
  .badge-stars {
    padding: 7px 10px;
    font-size: 0.95rem;
    gap: 4px;
  }
}

/* Medium tablets: show short labels */
@media (min-width: 861px) and (max-width: 1023px) {

  .header-controls .btn {
    padding: 9px 13px;
    font-size: 0.88rem;
    min-height: 44px;
    border-radius: 13px;
  }
}

/* ==========================================================================
   SECTION 15 — SCROLLBAR STYLING (WebKit tablets)
   ========================================================================== */

@media (min-width: 768px) {

  /* Thin scrollbars on tablets */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.3);
    border-radius: 6px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.5);
  }

  /* Hide scrollbars on tab rows (they scroll horizontally) */
  .parent-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   SECTION 16 — GLOBAL HEADER SCROLL BEHAVIOUR (ALL SCREEN SIZES, ALL PAGES)
   Header scrolls naturally with the page so users get full viewport
   for content when they scroll down. No sticky/fixed positioning.
   ========================================================================== */

/* Apply to ALL screen sizes — no media query wrapper */
header {
  position: relative;
  top: auto;
  z-index: 10;
}

/* Ensure the header and footer stay hidden on the landing page (profile selection)
   where it is intentionally removed */
body:has(#profile-selection-view.active) header,
body:has(#profile-selection-view.active) .app-global-footer {
  display: none !important;
}

/* ==========================================================================
   END OF TABLET.CSS
   منصة أبطال الغد — Tablet Experience Layer
   ========================================================================== */

/* ==========================================================================
   SECTION 17 — TABLET TOUCH TARGET ENHANCEMENTS
   Ensures all interactive elements meet minimum 56-64px touch targets
   on iPad Mini (768px) and larger tablets. Supplements existing rules.
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  /* ── Answer option cards: bigger, finger-friendly ─────────────────────── */
  .option-card {
    min-height: 72px;
    padding: 16px 20px;
    font-size: 1.15rem;
  }

  .option-text {
    font-size: 1.2rem;
  }

  /* ── Subject cards in home screen: taller touch area ─────────────────── */
  .bottom-subject-card {
    min-height: 96px;
  }

  /* ── Continue Learning CTA: full-width on portrait tablets ───────────── */
  #home-hero-cta-zone .hero-cta-banner {
    padding: 22px 24px;
  }

  #home-hero-cta-zone .btn-hero-continue {
    min-width: 160px;
    font-size: 1.1rem;
    padding: 16px 24px;
  }

  /* ── Ensure check/hint/next buttons are large enough ─────────────────── */
  #btn-check,
  #btn-next-question,
  #btn-hint {
    min-height: 56px;
    font-size: 1.05rem;
  }

  /* ── Profile avatar options: full touch-card size ─────────────────────── */
  .profile-avatar-option {
    width: 130px;
    height: 130px;
  }

  /* ── Today mission box CTA: very prominent on tablets ────────────────── */
  .btn-hero-cta {
    min-height: 56px;
    font-size: 1.1rem;
  }

  /* ── Sort items bigger for finger drag on tablets ─────────────────────── */
  .sort-item {
    padding: 18px 32px;
    font-size: 1.4rem;
    min-height: 60px;
  }

  /* ── Match nodes: larger for finger tap accuracy ─────────────────────── */
  .match-node {
    min-height: 60px;
    padding: 18px 20px;
    font-size: 1.25rem;
  }
}

/* Portrait-specific: CTA goes full width so the button is easy to hit */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #home-hero-cta-zone .hero-cta-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  #home-hero-cta-zone .btn-hero-continue {
    width: 100%;
    min-height: 64px;
    font-size: 1.2rem;
  }
}



/* ==========================================================================
   SCIENCE CELL LAB TABLET & IPAD OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 1024px) {
  .science-lab-container {
    padding: 8px;
  }

  .station-tab-btn {
    min-height: 52px;
    font-size: 0.95rem;
  }

  .microscope-interactive-arena {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .slides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
  }

  .lens-circular-viewport {
    width: 260px;
    height: 260px;
  }

  .hierarchy-slots-flow {
    gap: 8px;
  }

  .hierarchy-slot-box {
    min-width: 130px;
  }

  .sorting-baskets-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .traits-pool-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .science-stations-tabs {
    flex-direction: column;
  }

  .station-tab-btn {
    width: 100%;
    min-height: 56px;
  }

  .traits-pool-container {
    grid-template-columns: 1fr;
  }

  .hierarchy-slots-flow {
    flex-direction: column;
  }

  .flow-arrow {
    transform: rotate(90deg);
  }
}

/* ── Login View responsive improvements for iPads & tablets ───────────── */
body.on-login-screen,
html.instant-login-view,
html.on-login-screen,
body:has(#login-view.active) {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

body.on-login-screen #app-container,
html.instant-login-view #app-container,
html.on-login-screen #app-container,
body:has(#login-view.active) #app-container {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#login-view {
  display: none;
}

#login-view.active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* iPad Landscape Specific Scaling (prevents vertical and horizontal scroll traps) */
@media (orientation: landscape) and (max-width: 1366px) {
  body.on-login-screen #app-container,
  html.instant-login-view #app-container,
  body:has(#login-view.active) #app-container {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 14px 16px !important;
  }

  body.on-login-screen #login-view,
  html.instant-login-view #login-view,
  body:has(#login-view.active) #login-view {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    align-items: center !important;
  }

  .auth-card-vibrant {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 520px !important;
    max-height: calc(100vh - 40px) !important;
    margin: 4px auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .auth-hero-split-img {
    max-height: clamp(150px, 28vh, 220px) !important;
  }

  .auth-form-side {
    padding: 10px 18px !important;
  }
}

/* iPad Portrait Specific Scaling (<= 1024px) */
@media (max-width: 1024px) and (orientation: portrait) {
  body.on-login-screen #app-container,
  html.instant-login-view #app-container,
  body:has(#login-view.active) #app-container {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 12px 20px !important;
  }

  .auth-card-vibrant {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
    width: 100% !important;
    margin: 6px auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .auth-hero-side {
    padding: 8px 14px !important;
    flex-direction: row !important;
    gap: 12px !important;
    text-align: right !important;
  }

  .auth-hero-art-container {
    max-width: 70px !important;
    max-height: 70px !important;
    flex: 0 0 70px !important;
  }

  .auth-hero-split-img {
    max-height: 65px !important;
  }

  .auth-side-title {
    font-size: 1.2rem !important;
    margin: 0 !important;
  }

  .auth-side-sub {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }

  .auth-form-side {
    padding: 12px 16px !important;
    height: auto !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }
}

/* ── QA Fix 4.3: Match-node minimum touch target in landscape ──────────────
   In landscape small-screen mode, match nodes can drop below 44px.
   This override ensures they meet the WCAG 2.5.5 minimum touch target. */
@media (orientation: landscape) and (max-height: 600px) {
  .match-node {
    min-height: 48px !important;
    padding: 10px 14px;
  }
}

/* ── QA Fix 4.4: Password toggle hit target ────────────────────────────────
   The password visibility toggle was ~25px, below the 44px WCAG minimum. */
.auth-input-wrap .password-toggle,
#login-password-toggle,
#signup-password-toggle,
[id$="-password-toggle"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* ── TABLET PORTRAIT / IPAD AIR (768px - 880px) SPECIFIC OVERRIDES ── */
@media (max-width: 880px) {
  header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }
  .header-controls {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  .header-controls .btn {
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    min-height: 38px !important;
  }
  .badge-stars {
    padding: 6px 10px !important;
    font-size: 0.9rem !important;
  }
  .bottom-subjects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .bottom-subject-card {
    height: 180px !important;
  }
  .bottom-card-char-wrap {
    width: 38% !important;
    max-width: 140px !important;
  }
  .bottom-card-info-col {
    width: 62% !important;
  }
  .bottom-card-title {
    font-size: 1.2rem !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }
}


/* ── BULLETPROOF TABLET PORTRAIT / IPAD AIR & MINI (<= 920px) ── */
@media (max-width: 920px) {
  #app-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  header {
    padding: 8px 12px !important;
    gap: 6px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .logo {
    font-size: 1.15rem !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .logo span {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.25rem !important;
  }
  .header-controls {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    flex-shrink: 1 !important;
    overflow: visible !important;
  }
  .header-controls .btn {
    padding: 6px 8px !important;
    font-size: 0.78rem !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }
  .badge-stars {
    padding: 5px 8px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
  }
  .bottom-subjects-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .bottom-subject-card {
    height: 180px !important;
  }
  .bottom-card-char-wrap {
    width: 38% !important;
    max-width: 135px !important;
  }
  .bottom-card-info-col {
    width: 62% !important;
  }
  .bottom-card-title {
    font-size: 1.2rem !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
}

/* ==========================================================================
   SECTION 18 — DEEP iPAD UX ENHANCEMENTS (Visual Audit Fixes)
   منصة أبطال الغد — Premium tablet experience layer
   Applied after full visual audit at iPad Mini 768×1024, iPad Air 820×1180,
   iPad Air Landscape 1180×820 — fixes 9 specific UX issues found.
   ========================================================================== */

/* ── Fix 1: Companion Avatar Card — proper sizing & image containment ──────
   The companion avatar card was clipping the character image at ~95px.
   Now uses proper overflow:hidden with object-fit:contain.                  */
@media (min-width: 768px) and (max-width: 1199px) {

  .quiz-companion-avatar-card {
    overflow: hidden !important;
    flex-shrink: 0;
  }

  .quiz-companion-img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Portrait: Taller companion card so character isn't clipped */
  .quiz-companion-avatar-card {
    width: 100px !important;
    height: 120px !important;
    border-radius: 20px !important;
  }

  /* Speech bubble: prevent text overflow and ensure proper wrapping */
  .quiz-companion-speech {
    max-width: min(340px, 55vw) !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Step dots & phase progress: hide on mobile-portrait tablets to save space */
  .steps-indicator {
    flex-wrap: nowrap;
    overflow: hidden;
  }
}

/* ── Fix 2: Quiz option cards in game screens — reduce excess height ────────
   Multiplication & Place Value game option cards were >88px, wasting space.
   Optimise for 68–72px so all 4 fit comfortably with the question.         */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Game-specific option rows (quiz-stage-card) */
  .quiz-stage-card .option-card,
  .pv-quiz-stage-card .option-card {
    min-height: 68px !important;
    padding: 12px 16px !important;
  }

  /* Reduce wasteful bottom empty space in game quiz container */
  .quiz-stage-card {
    padding-bottom: 12px !important;
  }

  /* Better distribute vertical space inside game quiz card */
  #quiz-stage-card,
  #pv-quiz-stage-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* ── Fix 3: Landscape — prevent companion header from wrapping ──────────────
   In landscape mode, the dual progress rings + companion info were
   wrapping to two rows, wasting ~150px of precious vertical space.          */
@media (orientation: landscape) and (max-height: 900px) and (min-width: 768px) {

  /* Force the companion header into a single non-wrapping row */
  .quiz-companion-header {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  /* Companion info takes all available space */
  .quiz-companion-info {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap !important;
  }

  /* Circles never wrap in landscape */
  .quiz-dual-circles-row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  /* Tighter circles in landscape */
  .quiz-circle-progress-wrap {
    width: 72px !important;
    height: 72px !important;
  }

  .circle-progress-svg {
    width: 72px !important;
    height: 72px !important;
  }

  .circle-pct-num {
    font-size: 1.15rem !important;
  }

  /* Small circle labels: nowrap so they don't push down */
  .circle-q-label {
    white-space: nowrap !important;
    font-size: 0.78rem !important;
  }

  .circle-q-fraction {
    font-size: 0.9rem !important;
  }

  /* Landscape: quiz option cards back to optimised size */
  .option-card {
    min-height: 54px !important;
    padding: 8px 12px !important;
  }

  /* Companion speech bubble: shorter max-width in landscape to prevent overflow */
  .quiz-companion-speech {
    max-width: min(260px, 35vw) !important;
  }

  /* Landscape companion avatar: slightly taller so character is fully visible */
  .quiz-companion-avatar-card {
    width: 78px !important;
    height: 95px !important;
    border-radius: 16px !important;
  }
}

/* ── Fix 4: Progress ring labels — improve readability on tablets ───────────
   Labels beneath the circles (e.g. "الإجابات الصحيحة 🎯") were too small.  */
@media (min-width: 768px) and (max-width: 1199px) {

  .circle-q-label {
    font-size: 0.88rem !important;
    white-space: nowrap;
    font-weight: 800 !important;
  }

  .circle-q-fraction {
    font-size: 1rem !important;
    font-weight: 900 !important;
  }
}

/* ── Fix 5: Action bar — exit button & button sizing on small tablets ───────
   The "انسحاب" button was ~33px, far below the 44px WCAG 2.5.5 minimum.    */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Ensure ALL action bar buttons are at least 48px tall */
  .action-bar button,
  .action-bar .btn {
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  /* The exit/withdrawal button specifically */
  #adventure-view .action-bar button:last-child {
    min-height: 48px !important;
    padding: 10px 16px !important;
  }

  /* Full-width check button on narrow portrait tablets */
  @media (max-width: 860px) {
    .action-bar {
      flex-wrap: wrap;
      gap: 8px;
    }

    #btn-check,
    #btn-next-question {
      flex: 1;
      min-width: 140px;
    }
  }
}

/* ── Fix 6: Mission companion corner — prevent overlap on 768px portrait ────
   The peeking companion image overlapped the mission title text at 768px.   */
@media (min-width: 768px) and (max-width: 820px) {

  .mission-companion-corner {
    width: 70px !important;
    height: 80px !important;
    bottom: 0 !important;
  }

  .mission-companion-corner img {
    width: 70px !important;
    height: 80px !important;
  }

  /* Ensure mission title text has right clearance */
  .today-mission-box {
    padding-right: 80px !important;
    position: relative;
  }
}

/* ── Fix 7: Home landscape — better vertical layout for hero section ─────────
   In landscape, the home hero section showed awkward white space and
   cramped stacking of the CTA and resume banner.                            */
@media (orientation: landscape) and (max-height: 900px) and (min-width: 768px) {

  /* Compact the home hero section */
  .kids-hero {
    padding: 10px 16px !important;
    margin-bottom: 8px !important;
    gap: 10px !important;
  }

  .kids-hero-avatar {
    width: 64px !important;
    height: 64px !important;
  }

  /* CTA banner: compact */
  .hero-cta-banner {
    padding: 12px 16px !important;
    border-radius: 16px !important;
    flex-direction: row !important;
    gap: 12px !important;
  }

  /* Resume adventure toast: more compact */
  #resume-adventure-toast,
  [id*="resume-banner"] {
    padding: 10px 14px !important;
    border-radius: 14px !important;
  }

  /* Stack items more tightly in landscape home */
  .hub-container {
    gap: 10px !important;
  }

  .kids-hero-hub {
    padding: 10px 14px !important;
    border-radius: 18px !important;
  }

  /* Today's mission box: ultra compact in landscape */
  .today-mission-box {
    padding: 12px 16px !important;
    border-radius: 16px !important;
  }

  .mission-title {
    font-size: 1.2rem !important;
  }
}

/* ── Fix 8: iPad Pro 12.9" quiz — premium spacing ────────────────────────────
   On the largest iPads, the quiz can look too sparse. Give it better
   visual balance.                                                            */
@media (min-width: 1024px) and (max-width: 1199px) {

  /* Bigger companion card on iPad Pro */
  .quiz-companion-avatar-card {
    width: 115px !important;
    height: 140px !important;
  }

  /* More readable instruction text */
  .instruction-text {
    font-size: 1.3rem !important;
  }

  .prompt-text {
    font-size: 1.45rem !important;
    line-height: 1.6 !important;
  }

  /* Option cards: generous touch targets */
  .option-card {
    min-height: 76px !important;
    padding: 16px 22px !important;
  }

  .option-text {
    font-size: 1.25rem !important;
  }

  /* Circle labels visible at Pro size */
  .circle-q-label {
    font-size: 0.9rem !important;
  }

  /* Action buttons: generously sized */
  #btn-check,
  #btn-next-question {
    min-height: 60px !important;
    font-size: 1.1rem !important;
    padding: 14px 32px !important;
  }
}

/* ── Fix 9: Dual progress circles — vertical spacing tightening ─────────────
   The gap below the circles and the dashed border used too much space on
   portrait tablets. Reduce to save vertical room for the question.          */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Reduce circle container padding */
  .quiz-circle-progress-container {
    gap: 6px !important;
  }

  /* Dashed separator: thinner gap */
  .quiz-companion-header {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Progress track: slimmer on tablets */
  .quiz-progress-track {
    height: 6px !important;
    margin-bottom: 8px !important;
    border-radius: 3px !important;
  }

  /* Horizontal progress fill: same height */
  .quiz-progress-fill {
    height: 6px !important;
  }
}

/* ── Fix 10: Match-node on portrait tablets — better visibility ────────────
   Matching items font was set to Arial (not Arabic-optimised).             */
@media (min-width: 768px) and (max-width: 1199px) {

  .match-node {
    font-family: var(--font-kids, 'Cairo', 'Tajawal', sans-serif) !important;
    letter-spacing: normal !important;
  }

  /* Matching canvas: prevent tiny gap that clips connecting lines */
  .matching-canvas {
    overflow: visible !important;
  }
}

/* ── Fix 11: Subject home page — mission box companion at 820px portrait ──
   Ensure the companion in the mission box is properly positioned and
   doesn't clip or overflow on iPad Air portrait.                           */
@media (min-width: 821px) and (max-width: 1023px) {

  .mission-companion-corner {
    width: 85px;
    height: 100px;
  }

  .mission-companion-corner img {
    width: 85px;
    height: 100px;
  }
}

/* ── Fix 12: Story comprehension scrollable on all tablets ────────────────
   Story text can be long; ensure it's properly scrollable without
   creating horizontal overflow.                                            */
@media (min-width: 768px) and (max-width: 1199px) {

  .story-view {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 280px;
    /* Thin scroll indicator */
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 92, 231, 0.3) transparent;
  }

  .story-view::-webkit-scrollbar {
    width: 4px;
  }

  .story-view::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.3);
    border-radius: 4px;
  }
}

/* ── Fix 13: Simulation viewport — better sizing on portrait iPad ──────────
   Float/sink and circuit simulations get more breathing room on tablets.   */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {

  .sim-viewport {
    height: 300px !important;
    border-radius: 18px !important;
  }

  .sim-pool,
  .sim-water {
    border-radius: 16px;
  }
}

/* ── Fix 14: Feedback panel on tablets — generous, readable ────────────────
   When answer is evaluated, the explanation panel should be easy to read.  */
@media (min-width: 768px) and (max-width: 1199px) {

  .feedback-panel {
    padding: 14px 18px !important;
    border-radius: 18px !important;
    margin-top: 8px !important;
  }

  .feedback-header {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    margin-bottom: 6px !important;
  }

  #correct-explanation,
  #incorrect-help {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
  }
}

/* ── Fix 15: Handwriting question text area on tablets ──────────────────────
   Text input area for free-writing questions needs to be finger-friendly.  */
@media (min-width: 768px) and (max-width: 1199px) {

  textarea.handwriting-input,
  .handwriting-answer-area textarea,
  #handwriting-input {
    font-size: 16px !important;       /* Prevents Safari auto-zoom */
    min-height: 120px !important;
    padding: 14px 18px !important;
    border-radius: 16px !important;
    line-height: 1.8 !important;
    font-family: var(--font-kids, 'Cairo', 'Tajawal', sans-serif) !important;
  }
}

/* ── Fix 16: Parent dashboard PIN pad — larger keys on tablets ───────────── */
@media (min-width: 768px) and (max-width: 1199px) {

  .pin-key {
    min-height: 76px !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    border-radius: 16px !important;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.15);
  }

  .pin-keyboard {
    max-width: 320px !important;
    gap: 14px !important;
  }

  .pin-digit {
    width: 64px !important;
    height: 64px !important;
    font-size: 2rem !important;
  }
}

/* ── Smooth entrance animation for adventure card on tablets ─────────────── */
@media (min-width: 768px) {

  .adventure-card {
    animation: tabletCardEntrance 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  @keyframes tabletCardEntrance {
    from {
      opacity: 0.85;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Prevent animation on reduced motion devices */
  body.reduced-motion .adventure-card {
    animation: none !important;
  }
}

/* ==========================================================================
   SECTION 19 — EDUCATIONAL GAMES & INTERACTIVE LABS TABLET-FIRST SUITE
   منصة أبطال الغد — كامل ألعاب المنصة والمختبرات التفاعلية للأجهزة اللوحية
   Optimizations for: Games Hub, Multiplication Tables Game, Place Value Game,
   English Word Sprint, Science Cell Lab, Classification Lab, and Animals Lab.
   Tested across iPad Mini (768px), iPad Air (820px), iPad Pro (1024px+).
   ========================================================================== */

/* ── 19.1 Games Hub Selection View (#games-hub-view) ──────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .games-hub-container {
    max-width: 100% !important;
    padding: 16px 20px !important;
  }

  .games-hub-hero {
    padding: 22px 26px !important;
    border-radius: 24px !important;
    gap: 16px !important;
  }

  .hub-hero-title {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }

  .hub-hero-sub {
    font-size: 1rem !important;
    max-width: 480px;
  }

  .games-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 420px)) !important;
    justify-content: center !important;
    gap: 16px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
  }

  .game-hub-card {
    min-height: 350px !important;
    padding: 16px 14px !important;
    border-radius: 24px !important;
  }

  .btn-play-game {
    min-height: 48px !important;
    font-size: 1.12rem !important;
    font-weight: 800 !important;
    border-radius: 16px !important;
  }
}

/* ── 19.2 Multiplication Tables Game (#multiplication-game-view) ─────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  #multiplication-game-view .game-container {
    max-width: 100% !important;
    padding: 16px 20px !important;
  }

  /* Tables Grid 1-10 */
  #multiplication-game-view .tables-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
  }

  #multiplication-game-view .table-card-btn {
    min-height: 72px !important;
    padding: 14px 10px !important;
    border-radius: 18px !important;
    touch-action: manipulation;
  }

  #multiplication-game-view .table-number-logo {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.6rem !important;
    border-radius: 14px !important;
  }

  /* Mode selection cards */
  #multiplication-game-view .mode-options-row,
  #place-value-game-view .mode-options-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  #multiplication-game-view .mode-card,
  #place-value-game-view .mode-card {
    flex: 1 1 140px !important;
    min-height: 64px !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    touch-action: manipulation;
  }

  /* Question Count options row: prevent horizontal overflow */
  #multiplication-game-view .count-options-row,
  #place-value-game-view .count-options-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  #multiplication-game-view .count-card,
  #place-value-game-view .count-card {
    flex: 1 1 85px !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    touch-action: manipulation;
  }

  /* Start game button */
  .btn-start-game {
    min-height: 56px !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    border-radius: 18px !important;
  }

  /* Multiplication Quiz Options Grid */
  #quiz-options-grid,
  #pv-quiz-answers-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin-top: 18px !important;
  }

  #quiz-options-grid .option-btn,
  #pv-quiz-answers-grid .option-btn {
    min-height: 68px !important;
    font-size: 1.7rem !important;
    font-weight: 900 !important;
    border-radius: 18px !important;
    touch-action: manipulation;
  }

  /* Equation text container */
  .equation-box {
    padding: 18px 24px !important;
    border-radius: 20px !important;
    margin: 14px 0 !important;
  }

  .equation-text {
    font-size: 2.4rem !important;
    font-weight: 900 !important;
    letter-spacing: normal !important;
  }

  /* Summary stats cards: 2x2 grid on portrait tablet */
  .summary-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .summary-stat-card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }

  .summary-actions-row {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  .summary-actions-row .btn {
    flex: 1 1 180px !important;
    min-height: 52px !important;
    font-size: 1.05rem !important;
  }
}

/* ── 19.3 Place Value & Coins Game (#place-value-game-view) ───────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .quest-map-stage-wrapper {
    max-width: 100% !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .reward-badges-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }

  .reward-badge-item {
    padding: 14px 10px !important;
    border-radius: 16px !important;
    min-height: 90px !important;
  }
}

/* ── 19.4 English Word Sprint Game (#english-word-race-view) ──────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .english-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .english-category-card {
    min-height: 70px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    touch-action: manipulation;
  }

  .word-sprint-letter-tile {
    min-width: 54px !important;
    min-height: 60px !important;
    font-size: 1.8rem !important;
    border-radius: 14px !important;
    touch-action: manipulation;
  }
}

/* ── 19.5 Science Interactive Labs (#science-cell-lab-view, #science-classification-lab-view, #science-animals-lab-view) ── */
@media (min-width: 768px) and (max-width: 1199px) {
  #science-cell-lab-view,
  #science-classification-lab-view,
  #science-animals-lab-view {
    padding: 16px 20px !important;
    max-width: 100% !important;
  }

  .lab-station-tabs,
  .science-lab-tabs-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .station-tab-btn,
  .science-tab-btn {
    flex: 1 1 140px !important;
    min-height: 48px !important;
    padding: 10px 16px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
    touch-action: manipulation;
  }

  /* Taxonomic ladder slots */
  .hierarchy-slot-row {
    min-height: 54px !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 8px !important;
  }

  /* Specimen cards and sorting items */
  .specimen-card,
  .classification-card,
  .animal-specimen-tile {
    min-height: 56px !important;
    touch-action: manipulation;
  }
}

/* ── 19.6 Landscape Tablet Optimization for All Games ─────────────────────── */
@media (orientation: landscape) and (max-height: 900px) and (min-width: 960px) {
  .games-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 480px)) !important;
    justify-content: center !important;
    gap: 20px !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
  }

  .game-hub-card {
    min-height: 400px !important;
    padding: 20px 18px !important;
  }
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 959px) {
  .games-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 420px)) !important;
    justify-content: center !important;
    gap: 16px !important;
    max-width: 900px !important;
    margin: 0 auto !important;
  }

  .game-hub-card {
    min-height: 380px !important;
    padding: 18px 16px !important;
  }
}

  #quiz-options-grid,
  #pv-quiz-answers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  #quiz-options-grid .option-btn,
  #pv-quiz-answers-grid .option-btn {
    min-height: 56px !important;
    font-size: 1.5rem !important;
  }

  .equation-box {
    padding: 12px 18px !important;
    margin: 8px 0 !important;
  }

  .equation-text {
    font-size: 2rem !important;
  }

  .summary-stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
}

/* ── 19.7 Hero Studio, Achievement Vault & Contact Us (#hero-studio-view, #achievement-vault-view, #contact-us-view) ── */
@media (min-width: 768px) and (max-width: 1199px) {
  #hero-studio-view,
  #achievement-vault-view,
  #contact-us-view {
    padding: 16px 20px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-page-container {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding: 16px 8px 32px !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
    max-width: 720px !important;
    margin: 0 auto 28px !important;
    gap: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 19.8 WhatsApp Question Sharing & Single-Session Security Layer on Tablets ── */
@media (min-width: 768px) and (max-width: 1280px) {
  /* Top Question Header Quick WhatsApp Challenge Button */
  .question-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  .question-quick-wa-btn {
    min-height: 44px !important;
    padding: 8px 18px !important;
    font-size: 0.96rem !important;
    border-radius: 24px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Bottom Question Action Bar WhatsApp Button */
  .btn-whatsapp-question {
    min-height: 52px !important;
    padding: 10px 20px !important;
    font-size: 1.02rem !important;
    border-radius: 16px !important;
    touch-action: manipulation !important;
  }

  /* Correct Feedback Panel Celebratory WhatsApp Strip */
  .correct-share-strip {
    margin: 14px 0 10px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;
    gap: 14px !important;
  }

  .btn-whatsapp-correct-share {
    min-height: 48px !important;
    padding: 10px 22px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
  }

  /* WhatsApp Share Dialog & Screenshot Card on Tablets */
  .whatsapp-share-dialog {
    max-width: 580px !important;
    width: 90% !important;
    padding: 26px 28px !important;
    border-radius: 28px !important;
  }

  .wa-question-card-img {
    max-height: 340px !important;
    border-radius: 18px !important;
  }

  .wa-modal-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .btn-whatsapp-primary {
    min-height: 52px !important;
    font-size: 1.05rem !important;
  }

  .btn-whatsapp-copy {
    min-height: 48px !important;
    font-size: 0.98rem !important;
  }

  /* Single-Session Active Guard Modal on Tablets */
  .single-session-dialog {
    max-width: 520px !important;
    padding: 36px 30px !important;
    border-radius: 30px !important;
  }

  .btn-single-session-primary {
    min-height: 54px !important;
    font-size: 1.1rem !important;
  }

  /* Contact Us Form on Tablets */
  .contact-form-grid {
    gap: 16px !important;
  }

  .contact-input,
  .contact-select,
  .contact-textarea {
    min-height: 50px !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
  }

  /* =========================================================================
     HERO EXPERIENCE ENHANCEMENTS ON TABLETS & iPADS
     ========================================================================= */
  .badge-streak {
    min-height: 48px !important;
    padding: 8px 16px !important;
    font-size: 1.05rem !important;
    gap: 8px !important;
  }

  /* Daily Wheel Modal on Tablets */
  .daily-wheel-card {
    max-width: 450px !important;
    width: 90% !important;
    padding: 14px 18px 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    gap: 6px !important;
  }

  .wheel-subtitle {
    display: none !important;
  }

  .wheel-spinner-container {
    width: 275px !important;
    height: 275px !important;
    max-width: min(72vw, 34vh) !important;
    max-height: min(72vw, 34vh) !important;
    margin: 16px auto 8px auto !important;
  }

  .btn-spin-wheel {
    min-height: 48px !important;
    font-size: 1.08rem !important;
  }

  /* Hero Certificate on Tablets */
  .certificate-modal-wrapper {
    max-width: 780px !important;
    width: 92% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 10px !important;
  }

  .hero-certificate-paper {
    padding: 14px !important;
  }

  .cert-inner-frame {
    padding: 20px 16px !important;
  }

  .cert-heading {
    font-size: 1.75rem !important;
  }

  .cert-hero-name {
    font-size: 1.6rem !important;
  }

  .certificate-modal-actions .btn {
    min-height: 52px !important;
    font-size: 1.05rem !important;
  }

  /* Offline Resilience Badge on Tablets */
  .offline-resilience-badge {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    left: calc(20px + env(safe-area-inset-left, 0px)) !important;
    max-width: 420px !important;
    padding: 12px 20px !important;
  }

  .offline-badge-icon {
    font-size: 1.8rem !important;
  }

  .offline-badge-title {
    font-size: 1rem !important;
  }

  .offline-badge-sub {
    font-size: 0.85rem !important;
  }
}

/* Landscape Modal Safety Guard: prevent clipping on iPad landscape */
@media (orientation: landscape) {
  .modal-dialog,
  .modal-content,
  .modal-box,
  .course-picker-card,
  .daily-wheel-container,
  #hero-certificate-modal .cert-card-wrap,
  .first-time-picker-modal-box {
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}