/* TGPU Iqra responsive learning layout — tablet and desktop only.
   Existing phone/PWA behaviour remains unchanged below 700px. */
@media (min-width:700px) {
  html,body { min-width:0; min-height:100%; }
  .app-host {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-height:100vh;
    padding:clamp(16px,3vw,36px);
  }
  .phone {
    width:min(100%,1120px);
    max-width:1120px;
    height:auto;
    min-height:calc(100dvh - 72px);
    border-radius:26px;
    overflow:visible;
    box-shadow:0 18px 60px rgba(6,72,50,.1);
  }
  .status-bar { max-width:none; border-radius:26px 26px 0 0; }
  .screen {
    height:auto;
    min-height:calc(100dvh - 108px);
    overflow:visible;
    padding:clamp(24px,3.5vw,44px);
    gap:18px;
    border-radius:0 0 26px 26px;
  }
  .iqra-language-bar { flex-wrap:wrap; }
  .screen > * { min-width:0; }
  .letter-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
  }
  .letter-card { height:clamp(150px,18vw,198px); }
  .letter-card .arabic-letter { font-size:clamp(58px,7vw,86px); }
  .quick-choices { flex-wrap:wrap; }
  .quiz-letter { height:clamp(190px,24vw,270px); }
  .quiz-letter .arabic-letter { font-size:clamp(88px,10vw,120px); }
  .answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .answer { min-height:74px; padding:12px 18px; }
  .answer .answer-selection-circle { flex-shrink:0; }
  .bottom-nav { margin-top:22px; }
  .screen.centered { justify-content:center; }
  .hero-copy,.page-copy,.lesson-sub,.tip-text span { max-width:65ch; }
}
@media (min-width:1000px) {
  .letter-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .screen { padding-inline:clamp(40px,5vw,72px); }
  .quiz-heading,.lesson-title { font-size:clamp(26px,3vw,34px); }
}
@media (min-width:700px) and (max-height:680px) {
  .phone,.screen { min-height:0; }
  .screen.centered { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .answer,.letter-card,.quick-choice { transition:none; }
}