/* Font size, never CSS zoom/transform: media and touch targets keep their size. */
:root {
  --app-text-scale: 1;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
:root[data-text-size="small"] { --app-text-scale: .9; }
:root[data-text-size="large"] { --app-text-scale: 1.2; }
body { font-size: calc(16px * var(--app-text-scale)); }
.learning-history-modal .keep-title { font-size: calc(16px * var(--app-text-scale)); }
.learning-history-modal .modal-header h2 { font-size: calc(24px * var(--app-text-scale)); }

/* Translation and English keep their original ratio. The existing card/lesson
   fitters may shrink an exceptionally long sentence to keep controls usable. */
#text-size-row { align-items: stretch; flex-direction: column; }
#text-size-select { width: 100%; }

/* Optional CC comparison is display-only. Keep line positions stable while
   changing languages; its separate button remains visible even at step 3. */
#vr-text-overlay[data-caption-tap] #vr-english,
#vr-text-overlay[data-caption-tap] #vr-translation { display: block !important; }
#vr-text-overlay[data-caption-tap="english"] #vr-translation,
#vr-text-overlay[data-caption-tap="translation"] #vr-english,
#vr-text-overlay[data-caption-tap="none"] #vr-english,
#vr-text-overlay[data-caption-tap="none"] #vr-translation { visibility: hidden; }
#vr-text-overlay[data-caption-tap="english"] #vr-translation *,
#vr-text-overlay[data-caption-tap="translation"] #vr-english *,
#vr-text-overlay[data-caption-tap="none"] #vr-english *,
#vr-text-overlay[data-caption-tap="none"] #vr-translation * { visibility: hidden !important; }
#vr-text-overlay[data-caption-tap="none"] { background: transparent; }
#lesson-caption-toggle[hidden] { display: none !important; }
#lesson-caption-toggle {
  position: fixed;
  top: 72px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .28);
  font: 700 13px/1 sans-serif;
  text-shadow: 0 1px 4px #000;
  opacity: .38;
  z-index: 1003;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 120ms ease;
}
#lesson-caption-toggle:hover,
#lesson-caption-toggle:active,
#lesson-caption-toggle:focus-visible { opacity: 1; }
#lesson-caption-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#vr-english.lesson-speech-hint { cursor: pointer; }
#vr-english.lesson-speech-hint[aria-disabled="true"] { cursor: default; }

/* Android Chrome enters fullscreen during the Start click, before admission
   awaits. Show the prepared, paused player rather than enlarging the intro.
   No playback, microphone, or authorization is started by this visual mask. */
html[data-video-environment="android-chrome"][data-lesson-preparing="true"] .lesson-container {
  visibility: hidden;
  pointer-events: none;
}
html[data-video-environment="android-chrome"][data-lesson-preparing="true"] #player-container {
  display: block !important;
}
html[data-video-environment="android-chrome"][data-lesson-preparing="true"] #player-container::after {
  content: 'Preparing video…';
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  padding: 8px 14px;
  border-radius: 12px;
  color: white;
  background: rgba(0, 0, 0, .5);
  font: 600 14px/1.4 sans-serif;
  pointer-events: none;
  z-index: 2;
}

/* A phone rotated to landscape must not switch to desktop-sized controls just
   because its long edge crosses 768px. Identical rules apply to WebView/PWA/web. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 600px) {
  :root:where(:not([data-d-stable-viewport="true"])) {
    --lesson-english-size: clamp(18px, 6dvh, 24px);
    --lesson-translation-size: clamp(16px, 5dvh, 20px);
  }
  html:where(:not([data-d-stable-viewport="true"])) #vr-mic { width: 40px; height: 40px; }
  html:where(:not([data-d-stable-viewport="true"])) #vr-mic svg { width: 100%; height: 100%; }
  html:where(:not([data-d-stable-viewport="true"])) #vr-mic-overlay { bottom: 5%; padding: 6px; }
  html:where(:not([data-d-stable-viewport="true"])) #lesson-sentence-navigation { bottom: 5%; height: 72px; }
  html:where(:not([data-d-stable-viewport="true"])) #vr-english { margin-bottom: 6px; }
  :where(html:not([data-d-stable-viewport="true"])) .lesson-intro-body .subtitle-option { font-size: calc(14px * var(--app-text-scale)); }
}