/* A course page.
   Top half is the stage — the two teachers under a teal sky, with a caption
   cloud over whoever is talking. Bottom half is the written lesson. */

.course-shell { padding-bottom: 60px; }

/* Room for the bar at the bottom of the screen, so the last paragraph and the
   Next button can still be scrolled clear of it. */
.course-shell.has-dock { padding-bottom: 128px; }

/* Several controls here set a display, and a display beats the browser's own
   rule for [hidden]. Without this the play button stays on screen on a
   practice page after the script has hidden it. */
.course-shell [hidden] { display: none !important; }

/* ── Stage ───────────────────────────────────────────────────────────────── */

.stage {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0B7C95 0%, #0FA0BC 46%, #7FD3C9 78%, #A9E3B4 100%);
}

.stage-sky { position: absolute; inset: 0; }

.stage-sun {
  position: absolute;
  top: 12%;
  inset-inline-end: 12%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,190,.95), rgba(255,214,140,0) 68%);
}

/* A pill on its own reads as a pill. The two puffs on top are what make the
   eye call it a cloud.

   Kept small and faint on purpose. These are weather, not scenery: at any size
   where you notice one it has started competing with the two people underneath
   it, who are the point of the picture. */
.stage-cloud {
  position: absolute;
  height: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .38);
  filter: blur(.5px);
  animation: drift 42s linear infinite;
}
.stage-cloud::before,
.stage-cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.stage-cloud::before { width: 23px; height: 23px; left: 17%; top: -13px; }
.stage-cloud::after  { width: 16px; height: 16px; left: 50%; top: -8px; }

/* All of them up in the top third, well clear of the faces. */
.stage-cloud.c1 { top: 11%; width: 84px;  animation-duration: 58s; }
.stage-cloud.c2 { top: 22%; width: 58px;  animation-duration: 44s; animation-delay: -12s; opacity: .62; }
.stage-cloud.c3 { top: 6%;  width: 104px; animation-duration: 72s; animation-delay: -30s; opacity: .45; }

@keyframes drift {
  from { transform: translateX(-260px); }
  to   { transform: translateX(calc(100vw + 260px)); }
}

/* The green the characters stand on. */
.stage-hill {
  position: absolute;
  inset-inline: -10%;
  bottom: -46%;
  height: 84%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #66C98A, #3FA96D);
}

.stage-inner {
  position: relative;
  padding-top: clamp(18px, 3vw, 34px);
}

.cast {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(30px, 9vw, 150px);
  /* Room kept for a cloud over whoever is speaking, so the scene does not jump
     up the screen when one appears. */
  padding-top: clamp(120px, 17vh, 168px);
}

.cast-one {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .3s ease, filter .3s ease;
  /* Whoever is not talking steps back a little, so the eye knows where to go. */
  filter: saturate(.82) brightness(.94);
  transform: translateY(6px) scale(.96);
}
.cast-one.is-speaking {
  filter: none;
  transform: translateY(0) scale(1);
}

/* Height, not width — a wide drawing and a narrow one matched on width are
   two different sizes of person. --figure is each character's own correction,
   worked out in course_figure_scale(); see the note there.

   Anything that wants them smaller must change --figure-base and nothing else.
   Setting a height on .cast-svg directly throws --figure away, and the two of
   them come out at the same height — which sounds right and looks wrong,
   because Maya is drawn as a chibi and her head is half the drawing. */
.cast {
  --figure-base: clamp(260px, 40vh, 400px);
  /* Room for a cloud over the taller of them. */
  padding-top: clamp(104px, 15vh, 156px);
}

.cast-svg {
  width: auto;
  height: calc(var(--figure-base) * var(--figure, 1));
  filter: drop-shadow(0 14px 26px rgba(0, 40, 50, .28));
}

.cast-name {
  margin-top: -6px;
  padding: 3px 14px;
  border-radius: 999px;
  background: rgba(10, 40, 48, .42);
  color: #fff;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ── A cloud of their own ────────────────────────────────────────────────── */

/* Sits above its own character and is centred on them, so it reads as coming
   out of that person's mouth rather than hovering over the pair. */
.bubble {
  position: absolute;
  /* --crown is the empty canvas above the head, as a fraction of the figure.
     Without it the cloud sits on the SVG box, which for a full-figure drawing
     is a head of empty sky. */
  bottom: calc(100% - 10px - (var(--figure-base) * var(--figure, 1) * var(--crown, 0)));
  left: 50%;
  width: min(300px, 30vw);
  transform: translateX(-50%);
  z-index: 3;
}

/* The white box is its own element so it can be moved about freely: the parent
   is holding a transform to centre it, and an animation on the same element
   would fight that and slide the cloud off its owner. */
.bubble-in {
  position: relative;
  padding: 11px 15px 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(4, 40, 50, .26);
  text-align: start;
  animation:
    bubble-pop .34s cubic-bezier(.2, .9, .3, 1.5) both,
    bubble-float 3.8s ease-in-out .34s infinite;
}

/* Pointing down at whoever it belongs to. */
.bubble-in::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-inline-start: -10px;
  border: 11px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

@keyframes bubble-pop {
  from { opacity: 0; transform: translateY(16px) scale(.84) rotate(-2deg); }
  to   { opacity: 1; transform: none; }
}

/* A cloud is a cloud: it should not sit there like a box. */
@keyframes bubble-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(.6deg); }
}

.bubble-who {
  display: block;
  margin-bottom: 2px;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7C5CE0;
}

.bubble-text {
  margin: 0;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: clamp(14px, 1.15vw, 16.5px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

/* ── Words, as they are said ─────────────────────────────────────────────── */

/* Every word is its own span so the one being spoken can be marked. The clips
   were measured word by word when they were recorded, so this follows the
   voice rather than guessing from the length of the line. */
.bubble-text .w,
.dock-said .w {
  border-radius: 5px;
  transition: background-color .12s linear, color .12s linear;
}

.bubble-text .w.is-now { background: #FFE3BC; }
.dock-said  .w.is-now  { background: rgba(255, 226, 176, .28); }

/* The words the line is actually about. The dock styles its own further down,
   where the background is dark and needs a lighter ink. */
.bubble-text .lift {
  color: #B4741C;
  box-shadow: inset 0 -3px 0 rgba(240, 168, 60, .5);
}

/* ── Play control ────────────────────────────────────────────────────────── */

.stage-bar {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 6px 0 22px;
  z-index: 2;
}

.play-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 40, 50, .3);
}

.play-ico {
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-inline-start-color: #fff;
  border-inline-end: 0;
  margin-inline-start: 2px;
}
.play-btn.is-playing .play-ico {
  width: 12px;
  height: 13px;
  border: 0;
  margin: 0;
  background: #fff;
  border-radius: 2px;
}

/* ── The teachers, docked ────────────────────────────────────────────────── */

.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(11, 124, 149, .96), rgba(9, 105, 128, .98));
  border-top: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 -12px 34px rgba(4, 40, 50, .26);
  backdrop-filter: blur(8px);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.dock.is-up { transform: none; }

.dock-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 0 13px;
}

.dock-cast { display: flex; flex-shrink: 0; }

/* Overlapped, so two faces take the room of about one and a half. */
.dock-face {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #DFF3F6;
  border: 2.5px solid rgba(255, 255, 255, .5);
  overflow: hidden;
  opacity: .5;
  transform: scale(.9);
  transition: opacity .22s ease, transform .22s ease, border-color .22s ease;
}
.dock-face + .dock-face { margin-inline-start: -14px; }

/* Whoever is speaking comes forward and in front. */
.dock-face.is-speaking {
  opacity: 1;
  transform: scale(1);
  border-color: #FFD9A8;
  position: relative;
  z-index: 2;
}

.dock-svg { display: block; width: 100%; height: 100%; }

.dock-line {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  line-height: 1.35;
}

.dock-who {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9FE7DC;
}
.dock-who:empty { display: none; }

/* Two lines at most. A caption that grows taller than that pushes the bar over
   the text it is meant to be helping with. */
.dock-said {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(14.5px, 1.5vw, 17px);
  font-weight: 700;
}
.dock-said .lift {
  color: #FFD489;
  box-shadow: inset 0 -3px 0 rgba(255, 212, 137, .38);
}
.dock-line.is-idle .dock-said { font-weight: 600; opacity: .82; }

.dock-acts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.dock-jump {
  padding: 9px 15px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.dock-jump:hover { background: rgba(255, 255, 255, .16); }

.dock-play {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 20, 26, .3);
}
.dock-play .play-ico { margin-inline-start: 3px; }
.dock-play.is-playing .play-ico {
  width: 12px;
  height: 13px;
  border: 0;
  margin: 0;
  background: #fff;
  border-radius: 2px;
}

/* ── The lesson underneath ───────────────────────────────────────────────── */

.lesson-wrap { padding-top: clamp(26px, 4vw, 44px); }

.lesson-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.lesson-back {
  padding-top: 8px;
  font-weight: 800;
  color: var(--ink-soft);
  white-space: nowrap;
}
.lesson-back:hover { color: var(--orange); }

.lesson-course {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-2);
}

.lesson-head h1 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 34px);
  color: var(--teal);
}

.lesson-sum {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.lesson-count {
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-soft);
  white-space: nowrap;
}

.lesson-body {
  max-width: 760px;
  margin: 28px auto 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}

.lesson-body h2 {
  margin: 32px 0 10px;
  font-size: 22px;
  color: var(--teal);
}
.lesson-body h3 { margin: 24px 0 8px; font-size: 18px; }
.lesson-body p  { margin: 0 0 16px; }
.lesson-body ul, .lesson-body ol { margin: 0 0 18px; padding-inline-start: 22px; }
.lesson-body li { margin-bottom: 7px; }
.lesson-body strong { color: #B4741C; }

/* A table of verb forms has three columns of real words in it and there is no
   honest way to fit that across a phone. Squeezing it breaks every cell onto
   four lines and pushes the whole page sideways, so it is given its own
   sideways scroll and keeps its shape. The wrapper is put there by the script;
   a table that somehow escapes one still behaves, just without the scroll. */
.table-wrap {
  position: relative;
  margin: 18px 0 24px;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}
.table-scroll table { margin: 0; }

/* A soft edge over whichever side still has table behind it, so a column cut
   off mid-word reads as more to come rather than as a broken page. It is put
   over the top rather than behind, because the table paints its own white
   across the full scrolling width and would bury anything underneath.

   Which edges get one is decided by the script, from where the box actually
   is — so it goes as you reach the end and comes back when you scroll off it. */
.table-wrap::before,
.table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s linear;
}

.table-wrap::after {
  right: 0;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(to left, #fff 12%, rgba(255, 255, 255, 0));
  box-shadow: inset -14px 0 13px -12px rgba(20, 50, 60, .45);
}

.table-wrap::before {
  left: 0;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(to right, #fff 12%, rgba(255, 255, 255, 0));
  box-shadow: inset 14px 0 13px -12px rgba(20, 50, 60, .45);
}

.table-wrap.more-right::after { opacity: 1; }
.table-wrap.more-left::before  { opacity: 1; }

/* ── Tables that will not fit on a phone ─────────────────────────────────── */

/* Sideways scrolling is the fallback, not the plan. A table only stays a table
   while every cell can be read without wrapping; past that the script stacks
   it, and each row becomes a small card: the first cell as its heading, the
   rest as the column name and what was under it. Nothing is hidden and nothing
   has to be dragged into view.
 *
 * This is why the column names are worth keeping — read down a card and you
 * get "just / MEANS a moment ago / POSITION after have or has", which is the
 * same information the header row was carrying across the top. */
.table-wrap.stacked::before,
.table-wrap.stacked::after { display: none; }

.table-wrap.stacked .table-scroll { overflow-x: visible; }

.table-wrap.stacked table {
  display: block;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.table-wrap.stacked thead,
.table-wrap.stacked tbody,
.table-wrap.stacked tr { display: block; }

/* The header row has moved onto the cells themselves. */
.table-wrap.stacked tr.is-head { display: none; }

.table-wrap.stacked tr:not(.is-head) {
  margin-bottom: 10px;
  padding: 12px 15px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(42, 33, 64, .07);
}
.table-wrap.stacked tr:last-child { margin-bottom: 0; }

.table-wrap.stacked td {
  display: block;
  padding: 0;
  border: 0;
  font-size: 15.5px;
  line-height: 1.45;
}
.table-wrap.stacked td + td { margin-top: 10px; }

/* The row's subject, doing the job the leftmost column did. */
.table-wrap.stacked td:first-child {
  font-weight: 800;
  color: var(--teal);
}

.table-wrap.stacked td[data-label]::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 1px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lesson-body table {
  width: 100%;
  margin: 18px 0 24px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(42, 33, 64, .07);
}
.lesson-body th, .lesson-body td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.lesson-body th { background: #F6F2FB; font-weight: 800; color: var(--teal); }
.lesson-body tr:last-child td { border-bottom: 0; }

/* ── The part they are on ────────────────────────────────────────────────── */

/* The script groups the lesson under its own headings, so the part being talked
   about can be pointed at. Marked out only while a line is playing — a page
   covered in boxes is just a page with more lines on it. */
/* The section carries its own spacing and the headings inside it give theirs
   up. A heading's 32px top margin would otherwise sit inside the highlight and
   the lit passage would open with a band of empty colour. */
.lesson-sec {
  position: relative;
  margin: 16px -16px;
  padding: 12px 16px 14px;
  border-radius: 12px;
  transition: background .34s ease;
}
.lesson-sec > :first-child { margin-top: 0; }
.lesson-sec > :last-child  { margin-bottom: 0; }

/* The bar in the margin. Kept as a pseudo-element so nothing is inserted into
   the lesson's own markup, which came out of the admin panel. */
.lesson-sec::before {
  content: '';
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 999px;
  background: var(--orange);
  opacity: 0;
  transform: scaleY(.4);
  transform-origin: top;
  transition: opacity .3s ease, transform .34s cubic-bezier(.2, .8, .3, 1);
}

.lesson-sec.is-live {
  background: #FFF4E4;
  box-shadow: 0 6px 22px rgba(240, 125, 32, .1);
}
.lesson-sec.is-live::before { opacity: 1; transform: none; }

/* A sentence being held up as an example. */
.lesson-body .eg {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-inline-start: 4px solid var(--orange-2);
  border-radius: 0 12px 12px 0;
  background: #FFF6EC;
  font-size: 16.5px;
}

/* ── Practice ────────────────────────────────────────────────────────────── */

.practice { max-width: 760px; margin: 28px auto 0; }

.practice-intro {
  margin: 0 0 22px;
  color: var(--ink-soft);
  text-align: center;
}

.q-card {
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(42, 33, 64, .06);
}

.q-head { display: flex; align-items: flex-start; gap: 12px; }

.q-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #F1EEF8;
  font-size: 13px;
  font-weight: 800;
  color: var(--teal);
}

.q-prompt {
  flex: 1;
  margin: 2px 0 0;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.4;
}

.q-hear {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #FFF6EC;
  font-size: 16px;
  cursor: pointer;
}
.q-hear:hover { background: #FFE9D2; }

.q-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.q-choice {
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #FFFDFB;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.q-choice:hover:not(:disabled) { border-color: var(--orange-2); background: #FFF6EC; }
.q-choice:disabled { cursor: default; }
.q-choice.is-right { border-color: var(--green); background: #E9F9F1; color: #14684B; }
.q-choice.is-wrong { border-color: #E4788F; background: #FFF0F3; color: #A3243B; }

.q-note {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.q-note.is-right { background: #E9F9F1; color: #14684B; }
.q-note.is-wrong { background: #FFF0F3; color: #A3243B; }

.practice-score {
  margin-top: 22px;
  padding: 16px;
  border-radius: 16px;
  background: #F1EEF8;
  text-align: center;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--teal);
}
.practice-score.is-good { background: #E9F9F1; color: #14684B; }

/* ── Pager ───────────────────────────────────────────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.pager-btn {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}
.pager-btn:hover { border-color: var(--orange-2); color: var(--orange); }
.pager-btn.is-off { opacity: .38; }
.pager-btn.is-next {
  border-color: transparent;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #fff;
  box-shadow: 0 8px 20px rgba(240, 125, 32, .26);
}
.pager-btn.is-next:hover { color: #fff; }

.pager-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dot {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #E2D9EC;
}
.dot:hover { background: var(--orange-2); }
.dot.is-practice { border-radius: 3px; }
.dot.is-write {
  border-radius: 2px;
  transform: rotate(45deg);
  background: #D4B06A;
}
.dot.is-write.is-here {
  background: var(--orange);
  transform: rotate(45deg) scale(1.18);
}
.dot.is-here { background: var(--orange); transform: scale(1.28); }

/* ── Classroom stage (Maya + Emma) ───────────────────────────────────────── */

.stage-board,
.stage-window,
.stage-floor { display: none; }

.stage.is-classroom {
  background: linear-gradient(180deg, #F6E6C4 0%, #E8D2A4 38%, #D9B888 72%, #C9A56E 100%);
}
.stage.is-classroom .stage-hill { display: none; }
.stage.is-classroom .stage-cloud { opacity: .22; filter: blur(1px); }
.stage.is-classroom .stage-sun {
  top: 16%;
  inset-inline-end: 11%;
  width: 88px;
  height: 88px;
  background: radial-gradient(circle, rgba(255, 214, 120, .95), rgba(255, 186, 80, 0) 70%);
}

.stage.is-classroom .stage-window {
  display: block;
  position: absolute;
  top: 8%;
  inset-inline-end: 7%;
  width: min(220px, 28vw);
  height: min(150px, 22vh);
  border: 10px solid #C4A06A;
  border-radius: 4px;
  background:
    linear-gradient(#8EC4E8, #C9E4F6 55%, #E8F4C8 100%);
  box-shadow:
    inset 0 0 0 3px #E8D2A8,
    0 12px 28px rgba(90, 60, 20, .12);
}
.stage.is-classroom .stage-window::before,
.stage.is-classroom .stage-window::after {
  content: '';
  position: absolute;
  background: #C4A06A;
}
.stage.is-classroom .stage-window::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 6px;
  transform: translateX(-50%);
}
.stage.is-classroom .stage-window::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  transform: translateY(-50%);
}

.stage.is-classroom .stage-board {
  display: block;
  position: absolute;
  top: 10%;
  inset-inline-start: 5%;
  width: min(180px, 24vw);
  height: min(110px, 16vh);
  border-radius: 3px;
  background: #3A5A48;
  box-shadow:
    inset 0 0 0 6px #2A4436,
    0 10px 22px rgba(40, 30, 10, .16);
}
.stage.is-classroom .stage-board::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 18%;
  top: 28%;
  height: 3px;
  background: rgba(230, 220, 170, .45);
  box-shadow:
    0 14px 0 rgba(230, 220, 170, .32),
    0 28px 0 rgba(230, 220, 170, .22);
}

.stage.is-classroom .stage-floor {
  display: block;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 30%;
  background:
    repeating-linear-gradient(
      90deg,
      #C4965C 0 46px,
      #B4844C 46px 48px
    );
  box-shadow: inset 0 18px 28px rgba(80, 50, 10, .12);
}

.stage.is-classroom .cast-name {
  background: #F3E4C0;
  border: 1px solid #D4B888;
  border-radius: 4px;
  padding: 2px 10px;
}

/* ── Per-page place stages (Everyday English) ───────────────────────────── */

.stage.is-set .stage-hill,
.stage.is-set .stage-sun,
.stage.is-set .stage-cloud,
.stage.is-set .stage-window,
.stage.is-set .stage-board,
.stage.is-set .stage-floor { display: none; }
.stage.is-set .stage-set { display: block; }
.stage.is-set .cast-svg {
  filter: drop-shadow(0 16px 22px rgba(40, 24, 12, .28));
}
.stage.is-set .cast-name {
  border-radius: 4px;
  padding: 2px 10px;
}
.stage.is-set.is-cafe { background: #E8D2B4; }
.stage.is-set.is-cafe .cast-name { background: #FFF6E8; border: 1px solid #D4B888; color: #3A2A18; }
.stage.is-set.is-chat { background: #D8E4DC; }
.stage.is-set.is-chat .cast-name { background: #F4F8F4; border: 1px solid #B8C8B8; color: #2A3A2A; }
.stage.is-set.is-meeting { background: #DCE4EC; }
.stage.is-set.is-meeting .cast-name { background: #F4F7FA; border: 1px solid #C4D0DC; color: #243040; }
.stage.is-set.is-city { background: #7A9BB8; }
.stage.is-set.is-city .cast-name { background: #1A2834; border: 1px solid #C9A15B; color: #F4E8D0; }
.stage.is-set.is-office { background: #E4E0D8; }
.stage.is-set.is-office .cast-name { background: #F7F3EA; border: 1px solid #D0C4B0; color: #3A3228; }
.stage.is-set.is-shop { background: #F0D8C4; }
.stage.is-set.is-shop .cast-name { background: #FFF8F0; border: 1px solid #E0C4A8; color: #4A2E22; }
.stage.is-set.is-desk { background: #E8E0D4; }
.stage.is-set.is-desk .cast-name { background: #F8F2E6; border: 1px solid #D4C4A8; color: #3A2E22; }
.stage.is-set.is-finale { background: #3A4A6A; }
.stage.is-set.is-finale .cast-name { background: #1A2234; border: 1px solid #F0C060; color: #FFE8B0; }

/* ── Office stage (Maya + Theo, job interview) ──────────────────────────── */

.stage-set {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stage.is-office {
  background: #E8E0D2;
}
.stage.is-office .stage-hill,
.stage.is-office .stage-sun,
.stage.is-office .stage-cloud,
.stage.is-office .stage-window,
.stage.is-office .stage-board,
.stage.is-office .stage-floor { display: none; }
.stage.is-office .stage-set { display: block; }

.stage.is-office .cast-name {
  background: #F4EEE2;
  border: 1px solid #D4C4A4;
  color: #3A2E22;
  border-radius: 4px;
  padding: 2px 10px;
}

.stage.is-office .cast-svg {
  filter: drop-shadow(0 16px 22px rgba(70, 46, 18, .22));
}

/* ── Gym stage (Maya + Rex, future perfect) ──────────────────────────────── */

.stage.is-gym {
  background: #2A1E42;
}
.stage.is-gym .stage-hill,
.stage.is-gym .stage-sun,
.stage.is-gym .stage-cloud,
.stage.is-gym .stage-window,
.stage.is-gym .stage-board,
.stage.is-gym .stage-floor { display: none; }
.stage.is-gym .stage-set { display: block; }

.stage.is-gym .cast-name {
  background: #F4E8D0;
  border: 1px solid #D4B888;
  color: #2A2140;
  border-radius: 4px;
  padding: 2px 10px;
}

.stage.is-gym .cast-svg {
  filter: drop-shadow(0 16px 22px rgba(12, 8, 24, .45));
}

/* Neon gym (Common Mistakes): the same room, a live sign on the left wall. */
.stage.is-gym.is-neon {
  background: #14081C;
}
.stage.is-gym.is-neon .cast-name {
  background: #102418;
  border: 1px solid #39FF14;
  color: #C8FFD4;
}
.stage.is-gym.is-neon .cm-neon {
  animation: cm-neon-pulse 2.4s ease-in-out infinite;
}
@keyframes cm-neon-pulse {
  0%, 100% { opacity: 1; }
  46%      { opacity: .78; }
  50%      { opacity: 1; }
  54%      { opacity: .86; }
}

/* Live interview: solid colour, Theo on top, a scrollable chat */
body.is-interview .site-footer,
body.is-interview .footer-shore { display: none; }
body.is-interview .lesson-wrap > :not(.talk-done) { display: none; }
.course-shell.is-interview .dock { display: none !important; }

.course-shell.is-interview .stage.is-office {
  background: #D8F3DE;
}
.course-shell.is-interview .stage-set { display: none !important; }

.course-shell.is-interview .stage {
  min-height: calc(100vh - 72px);
}
.course-shell.is-interview .stage-inner {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 72px);
  max-height: calc(100vh - 72px);
  padding-top: 8px;
  padding-bottom: 8px;
}
.course-shell.is-interview .cast {
  flex: 0 0 auto;
  padding-top: 4px;
  --figure-base: clamp(140px, 22vh, 210px);
  gap: 0;
}
.course-shell.is-interview .side-a { display: none; }
.course-shell.is-interview .side-b {
  position: relative;
  z-index: 3;
  filter: none;
  transform: none;
}
.course-shell.is-interview .side-b::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  width: min(260px, 56vw);
  height: min(260px, 56vw);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, .28), rgba(34, 197, 94, 0) 70%);
  pointer-events: none;
  z-index: -1;
}
.course-shell.is-interview .side-b .bubble,
.course-shell.is-interview .side-b .cast-name { display: none; }

.talk-head {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 4;
  padding: 4px 0 4px;
}
.talk-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  color: #333A45;
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  font-weight: 400;
}
.talk-titles {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.talk-titles h1 {
  margin: 0;
  font-size: 1.15rem;
  color: #2A2420;
}
.talk-titles p {
  margin: 2px 0 0;
  font-size: .85rem;
  color: #4A6A52;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.talk-timer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #16A34A;
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}

.talk-log {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 4px 12px;
  min-height: 120px;
}

.talk-row {
  display: flex;
  max-width: 82%;
}
.talk-row.is-theo { align-self: flex-start; }
.talk-row.is-you  { align-self: flex-end; }

.talk-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(20, 40, 24, .08);
}
.talk-row.is-theo .talk-bubble {
  background: #fff;
  border-bottom-left-radius: 4px;
}
.talk-row.is-you .talk-bubble {
  background: #16A34A;
  border-bottom-right-radius: 4px;
}
.talk-bubble-text {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
}
.talk-row.is-theo .talk-bubble-text { color: #333A45; }
.talk-row.is-you  .talk-bubble-text { color: #fff; }

.talk-tip {
  align-self: flex-end;
  max-width: 82%;
  margin-top: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #FFF3D6;
  border: 1px solid #F0B400;
  color: #8A6D00;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.talk-tip strong {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.course-shell.is-interview .stage-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 10px;
  flex: 0 0 auto;
}

.talk-hint {
  margin: 0;
  font-size: .92rem;
  font-weight: 650;
  color: #4A6A52;
}
.talk-mic {
  width: 86px;
  height: 86px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #4ADE80, #16A34A);
  box-shadow: 0 12px 28px rgba(22, 163, 74, .38);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.talk-mic:hover { transform: scale(1.04); }
.talk-mic.is-listening {
  background: linear-gradient(180deg, #FB9A2D, #E06A12);
  animation: pulse-mic 1s ease-in-out infinite;
}
.talk-mic.is-busy { opacity: .55; pointer-events: none; }
.talk-end {
  border: 0;
  background: none;
  color: #4A6A52;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@keyframes pulse-mic {
  50% { transform: scale(1.06); }
}

.talk-done {
  max-width: 32em;
  margin: 20px auto 48px;
  padding: 28px 24px;
  text-align: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(40, 30, 10, .12);
}
.talk-done h2 {
  margin: 0 0 10px;
  font-size: 1.6rem;
}
.talk-done p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.talk-done-btn {
  display: inline-flex;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

/* ── Writing desk ────────────────────────────────────────────────────────── */

.write {
  margin: 28px 0 8px;
  padding: 22px 22px 20px;
  border-radius: 16px;
  background:
    linear-gradient(#fffdf6, #f7efd8);
  border: 1px solid #E4D2A4;
  box-shadow: 0 10px 28px rgba(120, 80, 20, .08);
}
.write h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}
.write-prompt {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 8px;
}
.write-hint,
.write-limit {
  margin: 0 0 10px;
  color: #6B5A3A;
}
.write-limit { font-size: .92rem; }

#writeText {
  width: 100%;
  display: block;
  resize: vertical;
  min-height: 160px;
  padding: 14px 16px;
  border: 1.5px solid #D4C09A;
  border-radius: 10px;
  background:
    repeating-linear-gradient(
      #fff 0 27px,
      #F0E6C8 27px 28px
    );
  font: inherit;
  line-height: 28px;
  color: var(--ink);
}
#writeText:focus {
  outline: 2px solid #C9A15B;
  outline-offset: 1px;
}

.write-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 14px;
  font-size: .92rem;
  color: #6B5A3A;
}
#writeCount.is-short { color: #B45309; }

.write-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #D4A84A, #B8862A);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.write-send:disabled { opacity: .6; cursor: wait; }

.write-err {
  margin: 12px 0 0;
  color: #9A3412;
  font-weight: 600;
}
.write-again {
  margin: 14px 0 0;
  font-size: .95rem;
  color: #6B5A3A;
}
.write-again a { font-weight: 800; }

.write-mark {
  margin: 0 0 16px;
  padding: 14px 16px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #E8D8B0;
}
.write-mark-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.write-score { font-weight: 800; color: #8A6A20; }
.write-band {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: #1B3A5F;
}
.write-said {
  margin: 0 0 10px;
  white-space: pre-wrap;
  color: #4A4030;
}
.write-rubric { display: grid; gap: 6px; margin: 0 0 10px; }
.write-rubric-row {
  display: grid;
  grid-template-columns: 88px 1fr 36px;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
}
.write-bar {
  height: 7px;
  border-radius: 99px;
  background: #EFE4C8;
  overflow: hidden;
}
.write-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #C9A15B, #8A6A20);
}
.write-feedback { margin: 0 0 8px; }
.write-fix {
  margin: 0 0 6px;
  font-size: .94rem;
}
.write-fix s { color: #9A3412; }
.write-fix b { color: #166534; font-weight: 700; }
.write-fix i { display: block; font-style: normal; color: #6B5A3A; font-size: .88rem; }
.write-better {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dashed #E4D2A4;
}
.write-better span {
  display: block;
  font-weight: 800;
  font-size: .88rem;
  margin-bottom: 4px;
  color: #7A5420;
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* The size is set on --figure-base and NOT on .cast-svg's height. Each
     character multiplies that base by its own --figure, which is what keeps
     their heads the same size on screen — Maya is drawn as a big-headed mascot
     and comes out looking twice the size of anyone standing next to her
     without it. Overriding the height here instead threw that correction away,
     which is exactly what made her tower over Rex on a phone. */
  .cast {
    gap: 6px;
    --figure-base: clamp(150px, 26vh, 210px);
    padding-top: clamp(122px, 17vh, 168px);
  }

  /* Narrow enough that a cloud centred on either of them still fits on screen,
     and the type comes down to match. */
  .bubble { width: min(196px, 47vw); }
  .bubble-in { padding: 9px 12px 10px; border-radius: 16px; }
  .bubble-in::after { margin-inline-start: -8px; border-width: 9px; border-bottom: 0; }
  .bubble-text { font-size: 12.8px; line-height: 1.36; }
  .bubble-who { font-size: 9.5px; }

  /* The wrap leaves about 15px either side on a phone, so the section's own
     bleed has to stay inside that or the page itself scrolls sideways. */
  .lesson-sec { margin-inline: -10px; padding-inline: 10px; }

  .lesson-head { grid-template-columns: 1fr; }
  .lesson-count { justify-self: start; }
  .pager { flex-wrap: wrap; }
  .pager-dots { order: 3; width: 100%; }

  /* The bar has to give up something on a phone. The caption is what it is for,
     so the faces shrink, the jump button goes, and the text keeps its room. */
  .course-shell.has-dock { padding-bottom: 116px; }
  .dock-inner { gap: 11px; }
  .dock-face { width: 40px; height: 40px; border-width: 2px; }
  .dock-face + .dock-face { margin-inline-start: -11px; }
  .dock-jump { display: none; }
  .dock-play { width: 42px; height: 42px; }
  .dock-said { -webkit-line-clamp: 3; }
}

.paywall { padding-bottom: 56px; }
.paywall-kicker {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
}
.paywall-price {
  margin: 18px 0 8px !important;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: var(--ink) !important;
}
.paywall .btn { margin: 18px 8px 0 0; }

/* The strip on a page somebody is reading without having paid for it. Warm
   rather than alarming: this is an invitation, not a warning, and it sits above
   a lesson they are in the middle of. */
.preview-note {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid #F0D0A8;
  border-inline-start: 4px solid var(--orange);
  border-radius: 10px;
  background: #FFF6EC;
  color: #8A4A12;
  font-size: 14px;
  font-weight: 600;
}
.preview-note strong { color: #6E3A0C; }

/* Live mock interview */
.tutor { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line, #e8ecf3); }
.tutor-intro { color: var(--ink-soft); font-weight: 600; margin: 0 0 16px; }
.tutor-timer {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff3e8;
  color: var(--orange);
  margin-bottom: 14px;
}
.tutor-log {
  max-height: 280px;
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f9fc;
  margin-bottom: 14px;
}
.tutor-line { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.tutor-line.is-fix { font-size: 13px; color: var(--ink-soft); font-style: italic; }
.tutor-line.is-note { font-weight: 700; color: var(--orange); }
.tutor-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tutor-start, .tutor-mic, .tutor-stop {
  font: inherit;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
}
.tutor-start, .tutor-mic { background: var(--orange); color: #fff; }
.tutor-mic:active { opacity: 0.85; }
.tutor-stop { background: #eef0f7; color: var(--ink); }
.tutor-done { font-weight: 700; color: var(--ink-soft); margin: 0; }
.tutor-err { color: #c0392b; font-weight: 700; margin-top: 10px; }
.dot.is-tutor { background: #7c3aed; }
.dot.is-tutor.is-here { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .stage-cloud { animation: none; }
  /* The word being spoken still marks itself — that is information, not
     decoration. What goes is the drifting and the bouncing. */
  .bubble-in { animation: none; }
  .cast-one { transition: none; }
  .dock { transition: none; }
  .lesson-sec, .lesson-sec::before { transition: none; }
}