/* iPad edition: readable type, roomy touch targets, portrait and landscape layouts. */
:root { font-size: 16px; }
.student button { min-width: 48px; min-height: 48px; }
.student #topbar { padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)); }
.student .tools button { min-width: 64px; height: 48px; font-size: 14px; padding: 0 15px; }
.student .brand > span { font-size: 14px; }
.student .spot { min-height: 52px; }
.student .spot b, .student .spot .ring { width: 52px; height: 52px; }
.student .spot span { font-size: 19px; padding: 8px 12px; }
.student #exploreNav { width: min(1120px, calc(100vw - 32px)); bottom: max(12px, env(safe-area-inset-bottom)); padding: 8px; gap: 6px; }
.student #exploreNav button { min-width: 0; min-height: 52px; font-size: 16px; gap: 7px; padding: 8px 6px; line-height: 1.3; }
.student #exploreNav em { width: 24px; height: 24px; font-size: 13px; }
.student #lookHint { bottom: 96px; font-size: 14px; }
.student #panel { top: calc(84px + env(safe-area-inset-top)); bottom: calc(104px + env(safe-area-inset-bottom)); width: min(1160px, calc(100vw - 44px)); padding: 24px 26px 14px; }
.student #panelBody { padding: 0 8px 32px 0; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scroll-padding: 20px; }
.student #panelClose { top: 12px; right: 14px; width: 48px; height: 48px; font-size: 28px; background: #fff8e8; }
.student-panel-head { padding-right: 58px; margin-bottom: 20px; }
.student-panel-head h2 { font-size: clamp(26px, 2.6vw, 36px); }
.student .small-note { font-size: 14px; }
.student .knowledge-layout { gap: 26px; align-items: flex-start; }
.student .knowledge-layout figure { margin-top: 4px; }
.student .knowledge-layout .knowledge-portrait { flex-basis: 190px; }
.student .knowledge-text > p { font-size: clamp(19px, 1.8vw, 24px); }
.student .knowledge-reveal summary { min-height: 48px; padding: 12px 0; }
.student .sound-card { padding: 16px; }
.student .sound-card p { font-size: 15px; min-height: 52px; }
.student .sound-card h3 { font-size: 18px; }
.student .effect-play, .student .plain-button, .student .quick-question { padding: 10px 16px; font-size: 15px; border-radius: 24px; }
.student .sound-pick { min-height: 48px; padding: 8px 4px; font-size: 14px; gap: 8px; }
.student .sound-pick input { width: 22px; height: 22px; margin: 0; }
.student .mix-row label { font-size: 15px; }
.student .mix-row select { min-height: 48px; padding: 10px; }
.student .sound-state { font-size: 15px; }
.student #askInput { min-height: 52px; font-size: 17px; }
.student #askForm button { min-height: 52px; font-size: 16px; }
.student #guideReply { font-size: 17px; }
.student .guide-quick { gap: 10px; }
.student .teacher-video { max-height: 54vh; }
.student.panel-open #spots { visibility: hidden; }
/* A home-screen launch already uses the standalone app display. */
.student.standalone-app #btnFull { display: none; }
.student.keyboard-open #topbar, .student.keyboard-open #exploreNav, .student.keyboard-open #lookHint { display: none; }
.student.keyboard-open #panel { top: calc(var(--visual-top, 0px) + 8px); bottom: auto; height: calc(var(--visual-height, 100vh) - 16px); padding-top: 20px; }
.student.keyboard-open #panelBody { scroll-padding-top: 18px; scroll-padding-bottom: 20px; }
.student.keyboard-open #toast { bottom: 14px; }
@media (max-width: 1024px) and (orientation: landscape) {
  .student #topbar { gap: 12px; }
  .student .brand { gap: 10px; }
  .student .brand b { font-size: 27px; }
  .student .brand > span { font-size: 13px; padding-left: 10px; }
  .student .tools { gap: 6px; }
  .student .tools button { padding: 0 11px; min-width: 60px; }
  .student #exploreNav { grid-template-columns: repeat(6, 1fr); }
  .student #exploreNav button { flex-direction: column; gap: 4px; min-height: 64px; font-size: 14px; padding: 5px 2px; }
  .student #panel { bottom: calc(114px + env(safe-area-inset-bottom)); padding: 22px 22px 12px; }
  .student #lookHint { bottom: 106px; font-size: 12px; }
  .student .sound-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student .sound-card p { min-height: 48px; }
  .student .knowledge-layout figure { flex-basis: 40%; }
  .student .knowledge-layout .knowledge-portrait { flex-basis: 160px; }
}
@media (max-height: 650px) and (orientation: landscape) {
  .student #topbar { padding-top: 8px; }
  .student #panel { top: calc(72px + env(safe-area-inset-top)); }
  .student #exploreNav { bottom: max(8px, env(safe-area-inset-bottom)); }
  .student #lookHint { display: none; }
  .student-panel-head { margin-bottom: 16px; }
  .student .knowledge-text > p { margin-bottom: 14px; line-height: 1.7; }
  .student.keyboard-open #panel { top: calc(var(--visual-top, 0px) + 8px); }
}
@media (orientation: portrait), (max-width: 700px) {
  .student #topbar { padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left)); gap: 10px; flex-wrap: wrap; }
  .student .brand { width: 100%; justify-content: space-between; }
  .student .tools { width: 100%; justify-content: flex-end; }
  .student .tools button { min-width: 58px; height: 48px; }
  .student #exploreNav { grid-template-columns: repeat(3, 1fr); width: calc(100vw - 20px); }
  .student #exploreNav button { min-height: 52px; font-size: 14px; }
  .student #panel { top: calc(122px + env(safe-area-inset-top)); bottom: calc(148px + env(safe-area-inset-bottom)); padding: 22px 18px 12px; }
  .student .knowledge-layout { flex-direction: column; }
  .student .knowledge-layout figure { width: 100%; }
  .student .knowledge-layout .knowledge-portrait { max-width: 170px; flex-basis: auto; }
  .student #lookHint { bottom: 142px; font-size: 12px; }
  .student .sound-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .student .sound-card { padding: 12px; }
  .student .sound-pick { margin-left: 0; }
  .student.keyboard-open #panel { top: calc(var(--visual-top, 0px) + 8px); bottom: auto; }
}

/* iPad portrait has room for side-by-side reading without phone-sized wrapping. */
@media (min-width: 701px) and (orientation: portrait) {
  .student .brand { width: auto; justify-content: flex-start; }
  .student .tools { width: auto; }
  .student #topbar { flex-wrap: nowrap; gap: 12px; }
  .student .brand b { font-size: 28px; }
  .student .brand > span { font-size: 13px; padding-left: 12px; }
  .student #panel { top: calc(88px + env(safe-area-inset-top)); padding: 26px 24px 14px; }
  .student .knowledge-layout { flex-direction: row; gap: 24px; }
  .student .knowledge-layout figure { width: auto; flex: 0 0 40%; }
  .student .knowledge-layout .knowledge-portrait { flex-basis: 160px; }
  .student .knowledge-text > p { font-size: 20px; }
  .student .teacher-video { width: 100%; max-height: 52vh; }
  .student.keyboard-open #panel { top: calc(var(--visual-top, 0px) + 8px); }
}