/* Shared, safe-area-aware header controls for all six lesson games. */
:root {
  --lesson-header-control-size: clamp(52px, 5.7vw, 72px);
  --lesson-header-control-gap: clamp(8px, 1vw, 14px);
  --lesson-content-inset-left: max(clamp(16px, 3vw, 36px), calc(env(safe-area-inset-left, 0px) + 14px));
  --lesson-content-inset-right: max(clamp(16px, 3vw, 36px), calc(env(safe-area-inset-right, 0px) + 14px));
  /* Anchor chrome to the safe edges instead of reserving wide empty bands. */
  --lesson-top-edge: calc(env(safe-area-inset-top, 0px) + 6px);
  --lesson-bottom-edge: max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px));
  --lesson-header-height: calc(var(--lesson-header-control-size) + var(--lesson-top-edge) + 12px);
}

html, body {
  min-height: 100%;
  min-height: 100dvh;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

img, svg { -webkit-user-drag: none; }

.lesson-shell {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
}

.lesson-header {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  z-index: 10000 !important;
  box-sizing: border-box;
  height: var(--lesson-header-height) !important;
  min-height: var(--lesson-header-height) !important;
  padding: var(--lesson-top-edge)
    var(--lesson-content-inset-right)
    12px
    var(--lesson-content-inset-left) !important;
  display: flex;
  column-gap: 0 !important;
  align-items: center !important;
  pointer-events: none;
  isolation: isolate;
}

.lesson-header .header-back-button,
.lesson-header .round-button:not(.header-mic-button) {
  position: relative;
  z-index: 10001;
  box-sizing: border-box;
  flex: 0 0 var(--lesson-header-control-size) !important;
  width: var(--lesson-header-control-size) !important;
  min-width: var(--lesson-header-control-size) !important;
  height: var(--lesson-header-control-size) !important;
  min-height: var(--lesson-header-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.lesson-header .header-back-button span {
  width: 44%;
  height: 38%;
  margin: 0;
}

.lesson-header .round-button:not(.header-mic-button) svg {
  width: 52%;
  height: 52%;
  margin: 0;
}

.lesson-header .round-button:not(.header-mic-button) {
  font-size: calc(var(--lesson-header-control-size) * .36);
  line-height: 1;
}

.lesson-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: var(--lesson-header-control-gap) !important;
}

/* Identical breathing room between the back button and the two-line course title. */
.lesson-header .lesson-title {
  position: static !important;
  flex: 0 1 auto;
  margin-left: clamp(16px, 2vw, 28px) !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  min-width: 0;
}

.lesson-header .header-back-button span {
  display: block;
}

/* A single blue scrim sits above every header, below the open menu. */
.menu-backdrop,
.menu-scrim,
#lesson-menu-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10010 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(100, 190, 245, .26) !important;
  box-shadow: none !important;
  cursor: default;
}

.course-menu {
  z-index: 10020 !important;
  box-shadow: -12px 0 34px rgba(2, 98, 163, .22) !important;
  /* Seven control-height rows fit the actual landscape height: chapter title,
     two chapter rows, two settings and two actions. The remaining 32px are
     panel borders/padding and gaps, not an oversized decorative heading. */
  --lesson-menu-height: min(100dvh, 100dvw);
  --lesson-menu-usable-height: calc(var(--lesson-menu-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  --lesson-menu-control: clamp(32px, calc((var(--lesson-menu-usable-height) - 32px) / 7), 52px);
  --lesson-menu-width: clamp(220px, 30vw, 280px);
  box-sizing: border-box;
  width: var(--lesson-menu-width) !important;
  max-width: 100%;
  height: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 8px)
    calc(env(safe-area-inset-right, 0px) + 12px)
    calc(env(safe-area-inset-bottom, 0px) + 8px)
    12px !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--lesson-menu-control) auto auto auto;
  row-gap: 3px !important;
  align-content: start;
  overflow: visible !important;
  scrollbar-gutter: auto;
  contain: layout style;
}

.course-menu:not([hidden]) { display: grid !important; }
.course-menu[hidden] { display: none !important; }

/* Retain the independently operable close button, without a second title row. */
.course-menu .menu-head {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  width: var(--lesson-menu-control);
  height: var(--lesson-menu-control);
  margin: 0 !important;
  padding: 0;
}

.course-menu .menu-head > strong { display: none !important; }

.course-menu .menu-head > button {
  display: grid;
  place-items: center;
  width: var(--lesson-menu-control) !important;
  height: var(--lesson-menu-control) !important;
  min-width: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  font-size: calc(var(--lesson-menu-control) * .62) !important;
  line-height: 1;
}

.course-menu .menu-section-title {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--lesson-menu-control);
  margin: 0 !important;
  padding-right: calc(var(--lesson-menu-control) + 8px);
  font-size: clamp(15px, calc(var(--lesson-menu-control) * .36), 19px) !important;
  line-height: 1.1;
}

.course-menu .chapter-panel {
  min-width: 0;
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 16px;
}

.course-menu .chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row;
  column-gap: 8px !important;
  row-gap: 3px !important;
}

.course-menu .chapter-grid > button {
  width: var(--lesson-menu-control) !important;
  height: var(--lesson-menu-control) !important;
  min-width: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  aspect-ratio: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
    0 3px 0 rgba(14,137,202,.18), 0 5px 10px rgba(3,111,183,.18);
}

.course-menu .chapter-grid b {
  font-size: clamp(17px, calc(var(--lesson-menu-control) * .46), 24px) !important;
  line-height: 1;
}

.course-menu .settings-panel {
  min-width: 0;
  margin: 0;
  padding: 2px 8px !important;
  border-radius: 16px;
}

.course-menu .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: var(--lesson-menu-control);
  min-height: 32px;
  margin: 0;
  padding: 0 !important;
  gap: 6px !important;
}

.course-menu .setting-row > span:first-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.course-menu .setting-row b {
  font-size: clamp(12px, calc(var(--lesson-menu-control) * .3), 16px) !important;
  line-height: 1.1;
}

.course-menu .setting-row small {
  display: block;
  font-size: clamp(10px, calc(var(--lesson-menu-control) * .23), 12px) !important;
  line-height: 1.1 !important;
}

.course-menu .switch {
  display: flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: var(--lesson-menu-control);
}

.course-menu .switch i { width: 46px; height: 26px; padding: 3px; }
.course-menu .switch i::after { width: 18px; height: 18px; }
.course-menu .switch input:checked + i::after { transform: translateX(20px); }

.course-menu .menu-actions {
  display: grid;
  gap: 4px !important;
  margin: 0 !important;
}

.course-menu .menu-actions > .restart-button {
  width: 100%;
  height: var(--lesson-menu-control) !important;
  min-height: 32px;
  margin: 0;
  padding: 0 8px;
  border-radius: calc(var(--lesson-menu-control) / 2);
  font-size: clamp(14px, calc(var(--lesson-menu-control) * .36), 19px) !important;
  line-height: 1.1;
  box-shadow: inset 0 1px 0 white, 0 3px 0 rgba(14,137,202,.22),
    0 5px 10px rgba(3,111,183,.18);
}

@media (orientation: portrait) {
  .course-menu { --lesson-menu-width: clamp(220px, 30dvh, 280px); }
}

body.lesson-menu-open .lesson-header { pointer-events: none; }

/* Native loading/play widgets must never cover an authored lesson scene. */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button { display: none !important; }

/* Keep the shared lesson navigation row and its shadows inside the viewport. */
.caption-wrap,
.retell-caption-wrap {
  bottom: var(--lesson-bottom-edge) !important;
}

/* Practice/consolidation have a caption only: never synthesize arrow buttons. */
.practice-stage > .caption-pill,
.game-shell > .caption-pill {
  bottom: var(--lesson-bottom-edge) !important;
}

/* Standalone captions also reserve their safe bottom inset in the game area. */
.practice-stage {
  padding-bottom: calc(var(--caption-height) + var(--caption-gap) + var(--lesson-bottom-edge) + 8px) !important;
}

.game-shell {
  --bound-top: calc(var(--lesson-header-control-size) + var(--lesson-top-edge) + 6px) !important;
  --caption-bottom: var(--lesson-bottom-edge) !important;
}

/* Keep the raised blue button bases visible without needing a large footer gap. */
.caption-wrap .nav-button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -3px 0 rgba(20,148,220,.22),
    0 4px 0 rgba(14,137,202,.23), 0 5px 10px rgba(3,111,183,.18);
}

.caption-wrap .nav-button:active {
  transform: translateY(2px) scale(.98);
  box-shadow: inset 0 1px 0 white, 0 2px 0 rgba(14,137,202,.2),
    0 3px 8px rgba(3,111,183,.16);
}

/* Remove old wide tablet/desktop bands instead of only moving the controls. */
@media (min-width: 721px) and (min-height: 601px) {
  .lesson-shell[data-lesson-id="1"],
  .lesson-shell[data-lesson-id="2"] {
    --lesson-scene-footer-reserve: calc(108px + var(--lesson-bottom-edge));
  }

  .lesson-shell[data-lesson-id="1"] .game-stage,
  .lesson-shell[data-lesson-id="2"] .game-stage {
    top: var(--lesson-header-height);
    bottom: var(--lesson-scene-footer-reserve);
  }

  .lesson-shell[data-lesson-id="1"] .visual-stage,
  .lesson-shell[data-lesson-id="2"] .scene-canvas {
    width: min(100%, calc((100dvh - var(--lesson-header-height) - var(--lesson-scene-footer-reserve)) * 1.7928));
  }

  .practice-stage { padding-top: var(--lesson-header-height) !important; }
}

@media (max-width: 720px), (max-height: 600px) {
  :root {
    --lesson-header-control-size: 52px;
    --lesson-header-control-gap: 8px;
  }
}