/*
 * Phrase Builder — standalone game styles.
 *
 * Lifted from the Translator client, which is why the overlay is still fixed/inset:
 * the game fills its iframe exactly as it filled the in-app overlay. Uses no host CSS
 * variables (only its own --phrase-progress), so it is self-contained.
 */

/*
 * Palette. Mirrors the sand ("paper") theme of the Translator client so a lesson reads as
 * part of the app instead of a separate product. The values are copied, not imported: this
 * file still uses no host CSS variables, because the game runs in its own iframe and cannot
 * see them. When the host palette moves, these move with it.
 *
 * --pb-accent is the one shared decision (#301). It carries the lesson's interactive colour
 * and every tint derived from it; changing this pair repaints the game.
 */
:root {
  --pb-sand: #efe7d7;
  --pb-panel: #fffcf3;
  --pb-panel-soft: #f7f2e8;
  --pb-line: rgba(123, 87, 48, 0.22);
  --pb-line-strong: rgba(123, 87, 48, 0.34);
  --pb-ink: #17130f;
  --pb-ink-soft: #2e261c;
  --pb-muted: #5e5a50;
  --pb-gold: #d8c69e;
  --pb-leather: #7b5730;

  --pb-accent: #4d6b3d;
  --pb-accent-rgb: 77, 107, 61;

  /* Decorative medallions only (the ✦ on the loading and completion screens). */
  --pb-mark: linear-gradient(180deg, #d28b2e, #b86c13);

  /* Controls. Derived from the accent but set explicitly: a green at the same HSL
     lightness as the old violet reads far brighter, so a mechanical conversion
     leaves a button that cannot carry white text. */
  --pb-action: linear-gradient(180deg, #5c7f49, #46612f);
  --pb-action-line: #3d5730;
  --pb-action-shadow: #365026;
  --pb-disabled-ink: #a39c92;
  --pb-disabled-line: #e2ddd4;
  --pb-disabled-face: #eae6de;
  --pb-disabled-shadow: #ddd7cd;

  --pb-success: #4d6b3d;
  --pb-success-line: #a8bf93;
  --pb-success-soft: #eef3e7;

  --pb-scrim: rgba(23, 19, 15, 0.42);
  --pb-shadow: rgba(23, 19, 15, 0.28);
}


*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--pb-ink-soft);
  background: var(--pb-sand);
}

.phrase-lesson-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  padding: clamp(0px, 2vw, 24px);
  background: var(--pb-scrim);
  backdrop-filter: blur(14px);
}

.phrase-lesson-overlay[hidden] { display: none; }

.phrase-lesson-shell {
  width: min(980px, 100%);
  height: min(760px, 100%);
  min-height: 560px;
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--pb-ink-soft);
  border: 1px solid var(--pb-line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 0%, rgba(216, 198, 158, 0.32), transparent 28%),
    var(--pb-panel);
  box-shadow: 0 28px 80px var(--pb-shadow);
}

.phrase-lesson-header {
  position: relative;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--pb-line);
  background: rgba(255, 252, 243, 0.8);
}

.phrase-lesson-header > div {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.phrase-lesson-brand {
  color: #557b42;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.phrase-lesson-progress-text {
  color: #7a746c;
  font-size: 0.78rem;
  font-weight: 650;
}

.phrase-lesson-close {
  position: absolute;
  top: 10px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #736e68;
  font-size: 1.65rem;
  line-height: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.phrase-lesson-close:hover { color: #3b3731; background: #f2f0ee; }

.phrase-lesson-progress-track {
  height: 6px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eeedeb;
}

.phrase-lesson-progress-fill {
  width: var(--phrase-progress);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #5c7f49, var(--pb-accent));
  transition: width 280ms ease;
}

/* A lesson is one screen. It used to scroll on a phone, and the reason was that
   every size in here was keyed to *width* — `clamp(…, 5vw, …)` on vertical margins,
   fixed px on the images, medallions and speakers — while the axis that actually
   runs out is height. A 375x812 device has ~553px of it once the browser's own
   chrome is out, and one screen's worth of content does not shrink to meet that on
   its own. So the quantities that cost height now scale with `vh`, and the two grids
   that cost a whole extra row reflow below `max-height: 640px` (#286).

   `overflow-y` stays as a floor, not a plan: at the sizes people hold there is
   nothing to scroll, but a 400px window or a large accessibility font should push
   content out of reach rather than clip it away. */
.phrase-lesson-stage {
  min-height: 0;
  flex: 1;
  padding: clamp(18px, 3vw, 32px);
  overflow-y: auto;
}

.phrase-lesson-kicker {
  margin: 0 0 clamp(6px, 1.6vh, 0.8rem);
  color: #567c42;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.phrase-lesson-intro,
.phrase-lesson-exercise,
.phrase-lesson-complete {
  width: min(820px, 100%);
  margin: 0 auto;
}

.phrase-lesson-loading {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
}

.phrase-lesson-loading__mark {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 24px;
  background: var(--pb-mark);
  box-shadow: 0 14px 36px rgba(77, 107, 61, 0.26);
  font-size: 2rem;
}

.phrase-lesson-loading h2 { margin: 6px 0 0; }
.phrase-lesson-loading p { margin: 0; color: #78736b; }

.phrase-lesson-loading__spinner {
  width: 32px;
  height: 32px;
  margin-top: 8px;
  border: 3px solid #e3eede;
  border-top-color: #6f9f56;
  border-radius: 50%;
  animation: app-loading-spin 0.8s linear infinite;
}

.phrase-lesson-intro h2,
.phrase-lesson-exercise h2,
.phrase-lesson-complete h2 {
  margin: 0;
  color: #393631;
  font-size: clamp(1.7rem, 3.5vw, 2.55rem);
  line-height: 1.12;
}

.phrase-lesson-source-phrase {
  margin: clamp(8px, 2vh, 1rem) 0 0.4rem;
  color: var(--pb-muted);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.phrase-lesson-intro-phrase {
  margin: 0 0 clamp(12px, 2vh, 20px);
  color: #575047;
  font-weight: 750;
}

.phrase-lesson-target-phrase {
  margin: 0.25rem 0 0;
  color: #587f44;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 750;
}

.phrase-lesson-phrase-row {
  margin: 0.25rem 0 clamp(10px, 2.4vh, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.phrase-lesson-phrase-row > div { min-width: 0; }

.phrase-lesson-transliteration,
.phrase-lesson-phrase-transliteration {
  color: var(--pb-accent);
  font-size: 0.82rem;
  font-style: italic;
}

.phrase-lesson-phrase-transliteration {
  margin: 0.25rem 0 0;
  letter-spacing: 0.01em;
}

.phrase-lesson-carousel {
  min-height: clamp(300px, 52vh, 400px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: clamp(18px, 4vw, 34px);
  align-items: center;
}

.phrase-lesson-carousel-main {
  display: grid;
  grid-template-columns: minmax(230px, 0.92fr) minmax(240px, 1.08fr);
  gap: clamp(18px, 4vw, 34px);
  align-items: center;
}

.phrase-lesson-carousel-image {
  width: 100%;
  max-height: clamp(88px, 17vh, 200px);
  aspect-ratio: 1.04;
  object-fit: cover;
  border-radius: 18px;
  background: var(--pb-panel-soft);
  box-shadow: 0 18px 48px rgba(23, 19, 15, 0.16);
}

.phrase-lesson-carousel-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 10px;
}

.phrase-lesson-carousel-copy h2 {
  margin: 0;
  color: var(--pb-ink);
  font-size: clamp(2rem, min(8vw, 7vh), 5.7rem);
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.phrase-lesson-carousel-source {
  margin: 0;
  color: var(--pb-muted);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
}

.phrase-lesson-carousel-transliteration {
  margin: 0;
  color: var(--pb-accent);
  font-size: 0.92rem;
  font-style: italic;
}

.phrase-lesson-carousel-speaker {
  width: clamp(44px, 8vh, 60px);
  height: clamp(44px, 8vh, 60px);
  display: grid;
  place-items: center;
  color: #fff;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(145deg, #5c7f49, var(--pb-accent));
  box-shadow: 0 5px 0 var(--pb-action-shadow);
  cursor: pointer;
}

.phrase-lesson-carousel-speaker::before {
  width: 0;
  height: 0;
  content: "";
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid currentColor;
  transform: translateX(2px);
}

.phrase-lesson-carousel-side {
  display: grid;
  gap: clamp(5px, 1.2vh, 8px);
}

.phrase-lesson-carousel-step {
  min-width: 0;
  min-height: clamp(46px, 8vh, 58px);
  display: grid;
  grid-template-columns: clamp(32px, 6vh, 44px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  padding: 7px;
  color: #777169;
  text-align: left;
  border: 1px solid var(--pb-line);
  border-radius: 14px;
  background: rgba(255, 252, 243, 0.72);
  cursor: pointer;
}

.phrase-lesson-carousel-step img {
  grid-row: 1 / span 2;
  width: clamp(32px, 6vh, 44px);
  height: clamp(32px, 6vh, 44px);
  object-fit: cover;
  border-radius: 10px;
  background: var(--pb-panel-soft);
  opacity: 0.74;
}

.phrase-lesson-carousel-step span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 850;
}

.phrase-lesson-carousel-step small {
  min-width: 0;
  overflow: hidden;
  color: #787168;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phrase-lesson-carousel-step.is-current {
  color: var(--pb-ink);
  border-color: #6f9e56;
  background: #f6f9f5;
  box-shadow: inset 0 0 0 2px rgba(var(--pb-accent-rgb), 0.12);
}

.phrase-lesson-carousel-step.is-current img,
.phrase-lesson-carousel-step.is-met img {
  opacity: 1;
}

.phrase-lesson-carousel-step.is-met {
  border-color: var(--pb-success-line);
}

.phrase-lesson-carousel-step.is-met::after {
  content: "✓";
  grid-column: 2;
  justify-self: end;
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 999px;
  background: var(--pb-success);
  font-size: 0.76rem;
  font-weight: 900;
}

.phrase-lesson-carousel-footer {
  margin-top: clamp(8px, 1.8vh, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: clamp(8px, 1.8vh, 14px);
  border-top: 1px solid var(--pb-line);
}

.phrase-lesson-carousel-footer .phrase-lesson-source-phrase,
.phrase-lesson-carousel-footer .phrase-lesson-intro__hint {
  margin: 0;
}

.phrase-lesson-carousel-footer .phrase-lesson-intro__hint {
  margin-top: 4px;
}

.phrase-lesson-word-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.phrase-lesson-word-card,
.phrase-lesson-picture-choice {
  position: relative;
  min-width: 0;
  padding: 10px;
  display: grid;
  text-align: left;
  border: 2px solid var(--pb-line);
  border-radius: 18px;
  background: var(--pb-panel);
  box-shadow: 0 4px 0 var(--pb-line);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.phrase-lesson-word-card:hover,
.phrase-lesson-picture-choice:hover {
  transform: translateY(-2px);
  border-color: #c3d9b8;
  box-shadow: 0 6px 0 #d8e6d1;
}

.phrase-lesson-word-card.is-met {
  border-color: #6c9d54;
  background: #f6f9f4;
  box-shadow: 0 4px 0 #bed5b2;
}

.phrase-lesson-word-card.is-met::before {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  content: "✓";
  color: #fff;
  border-radius: 50%;
  background: var(--pb-success);
  font-size: 0.8rem;
  font-weight: 900;
}

.phrase-lesson-word-card img,
.phrase-lesson-picture-choice img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  background: var(--pb-panel-soft);
}

.phrase-lesson-word-card__target {
  margin-top: 9px;
  color: var(--pb-ink);
  font-size: 1rem;
  font-weight: 800;
}

.phrase-lesson-word-card .phrase-lesson-transliteration {
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phrase-lesson-word-card__source {
  margin-top: 2px;
  overflow: hidden;
  color: #767169;
  font-size: 0.77rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phrase-lesson-word-card__audio,
.phrase-lesson-picture-choice__audio {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: #557c43;
  font-weight: 800;
}

.phrase-lesson-intro__hint {
  margin: 1rem 0;
  color: #78736d;
  font-size: 0.88rem;
}

.phrase-lesson-primary,
.phrase-lesson-secondary {
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
}

.phrase-lesson-primary {
  color: #fff;
  border: 1px solid var(--pb-action-line);
  background: var(--pb-action);
  box-shadow: 0 4px 0 var(--pb-action-shadow);
}

.phrase-lesson-primary:hover:not(:disabled) { transform: translateY(-1px); }

.phrase-lesson-primary:disabled {
  color: var(--pb-disabled-ink);
  border-color: var(--pb-disabled-line);
  background: var(--pb-disabled-face);
  box-shadow: 0 3px 0 var(--pb-disabled-shadow);
  cursor: default;
}

.phrase-lesson-secondary {
  color: #665f56;
  border: 1px solid #dddad5;
  background: var(--pb-panel);
}

.phrase-lesson-prompt-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.phrase-lesson-speaker {
  width: clamp(44px, 8vh, 60px);
  height: clamp(44px, 8vh, 60px);
  flex: 0 0 auto;
  color: #fff;
  font-size: 1.6rem;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(145deg, #5c7f49, var(--pb-accent));
  box-shadow: 0 5px 0 var(--pb-action-shadow);
  cursor: pointer;
}

.phrase-lesson-choices {
  margin-top: clamp(10px, 2.6vh, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.phrase-lesson-choices.is-text { grid-template-columns: 1fr; gap: clamp(8px, 1.6vh, 12px); }
.phrase-lesson-picture-choice { padding: clamp(8px, 1.6vh, 14px); }

.phrase-lesson-picture-choice > span:not(.phrase-lesson-picture-choice__audio) {
  margin-top: 10px;
  color: #4c463e;
  font-size: 1.05rem;
  font-weight: 800;
}

.phrase-lesson-picture-choice small { margin-top: 2px; color: #77736d; }
.phrase-lesson-picture-choice em {
  margin-top: 1px;
  color: var(--pb-accent);
  font-size: 0.8rem;
}

.phrase-lesson-text-choice {
  min-height: clamp(50px, 9vh, 66px);
  padding: 0.9rem 1.2rem;
  color: #4f4a44;
  text-align: center;
  border: 2px solid var(--pb-line);
  border-radius: 16px;
  background: var(--pb-panel);
  box-shadow: 0 4px 0 #e2dfdb;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}

.phrase-lesson-text-choice span,
.phrase-lesson-text-choice small {
  display: block;
}

.phrase-lesson-text-choice small {
  margin-top: 3px;
  color: var(--pb-accent);
  font-size: 0.78rem;
  font-weight: 600;
}

.phrase-lesson-text-choice:hover:not(:disabled) { border-color: #b8d2ab; }

.phrase-lesson-picture-choice.is-wrong,
.phrase-lesson-text-choice.is-wrong {
  border-color: #d4796b;
  background: #fcf6f5;
  box-shadow: 0 4px 0 #e8b7b0;
}

.phrase-lesson-picture-choice.is-correct,
.phrase-lesson-text-choice.is-correct {
  border-color: #6c9c54;
  background: var(--pb-success-soft);
  box-shadow: 0 4px 0 #bdd5b1;
}

.phrase-lesson-picture-choice.is-revealed,
.phrase-lesson-text-choice.is-revealed {
  outline: 3px solid rgba(77, 107, 61, 0.24);
  outline-offset: 3px;
}

.phrase-lesson-gap-phrase {
  margin: clamp(28px, 5vw, 52px) 0 0;
  padding: 1.1rem 1.25rem;
  color: #544e45;
  border: 1px solid #e2dfdb;
  border-radius: 16px;
  background: var(--pb-panel);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
}

.phrase-lesson-build-audio {
  margin-top: clamp(8px, 2vh, 1.25rem);
  padding: clamp(7px, 1.6vh, 0.8rem) 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.8rem;
  text-align: left;
  border: 1px solid #e5efe0;
  border-radius: 16px;
  background: #f9fbf8;
}

.phrase-lesson-build-audio .phrase-lesson-speaker {
  grid-row: 1 / span 2;
  width: clamp(40px, 7vh, 50px);
  height: clamp(40px, 7vh, 50px);
  border-radius: 15px;
  font-size: 1.3rem;
}

.phrase-lesson-build-audio span { color: #565047; font-weight: 800; }
.phrase-lesson-build-audio small { color: #7c7366; font-style: italic; }

.phrase-lesson-answer-row {
  min-height: clamp(58px, 10vh, 78px);
  margin-top: clamp(10px, 2.6vh, 2rem);
  padding: clamp(8px, 1.6vh, 12px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 2px dashed #dbd7d2;
  border-radius: 16px;
  background: rgba(255, 252, 243, 0.65);
}

.phrase-lesson-answer-row.is-correct { border-color: var(--pb-success-line); background: var(--pb-success-soft); }
.phrase-lesson-answer-placeholder { color: #777168; }

.phrase-lesson-selected-tile,
.phrase-lesson-pool-tile {
  min-height: clamp(38px, 7vh, 46px);
  padding: clamp(5px, 1.2vh, 0.65rem) 0.9rem;
  color: #544e45;
  border: 1px solid #e0ddd9;
  border-radius: 12px;
  background: var(--pb-panel);
  box-shadow: 0 3px 0 #dfdcd9;
  font-size: 1rem;
  font-weight: 750;
  cursor: pointer;
}

.phrase-lesson-selected-tile span,
.phrase-lesson-selected-tile small,
.phrase-lesson-pool-tile span,
.phrase-lesson-pool-tile small {
  display: block;
}

.phrase-lesson-selected-tile small,
.phrase-lesson-pool-tile small {
  margin-top: 2px;
  color: var(--pb-accent);
  font-size: 0.67rem;
  font-weight: 600;
}

.phrase-lesson-selected-tile.is-fixed {
  color: #567c43;
  background: #f4f8f2;
  cursor: default;
}

.phrase-lesson-tile-pool {
  min-height: clamp(56px, 9vh, 72px);
  margin: clamp(8px, 1.8vh, 1rem) 0 clamp(10px, 2.4vh, 1.4rem);
  padding: clamp(8px, 1.6vh, 12px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--pb-line);
  border-bottom: 1px solid var(--pb-line);
}

.phrase-lesson-feedback-bar {
  min-height: clamp(60px, 12vh, 78px);
  padding: clamp(8px, 1.8vh, 14px) 24px;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--pb-line);
  background: var(--pb-panel);
}

.phrase-lesson-feedback-bar[hidden] { display: none; }
.phrase-lesson-feedback { margin: 0; color: #a65043; font-weight: 750; }
.phrase-lesson-feedback.is-success { color: var(--pb-success); }
.phrase-lesson-feedback-bar .phrase-lesson-primary { margin-left: auto; }

.phrase-lesson-feedback[hidden],
.phrase-lesson-feedback-bar .phrase-lesson-primary[hidden] { display: none; }

.phrase-lesson-complete { text-align: center; }

.phrase-lesson-celebration {
  width: clamp(48px, 9vh, 76px);
  height: clamp(48px, 9vh, 76px);
  margin: 0 auto clamp(8px, 1.8vh, 1rem);
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 24px;
  background: var(--pb-mark);
  box-shadow: 0 12px 30px rgba(150, 87, 15, 0.28);
  font-size: 2rem;
}

.phrase-lesson-complete__result { color: #69645c; }
.phrase-lesson-save-warning { color: #b65749; font-weight: 700; }

.phrase-lesson-saved-badge {
  width: fit-content;
  margin: 1rem auto;
  padding: 0.55rem 0.85rem;
  color: var(--pb-success);
  border: 1px solid var(--pb-success-line);
  border-radius: 999px;
  background: var(--pb-success-soft);
  font-weight: 850;
}

.phrase-lesson-result-words {
  margin: clamp(10px, 2.4vh, 1.5rem) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
}

.phrase-lesson-result-words li {
  padding: 8px;
  display: grid;
  gap: 3px;
  text-align: left;
  border: 1px solid var(--pb-line);
  border-radius: 14px;
  background: var(--pb-panel);
}

.phrase-lesson-result-words img {
  width: 100%;
  max-height: clamp(38px, 7vh, 90px);
  aspect-ratio: 1.35;
  object-fit: cover;
  border-radius: 9px;
}

.phrase-lesson-result-words span { margin-top: 4px; color: #4e703d; font-weight: 800; }
.phrase-lesson-result-words em { color: var(--pb-accent); font-size: 0.72rem; }
.phrase-lesson-result-words small { color: #77736b; }

.phrase-lesson-games-discovery {
  margin: 1.5rem 0;
  padding: 1rem;
  display: grid;
  gap: 0.55rem;
  color: #5e564c;
  text-align: left;
  border: 1px solid #d7e5d0;
  border-radius: 18px;
  background: linear-gradient(145deg, #fafcf9, #f5f9f3);
}

.phrase-lesson-games-discovery strong { color: #557b42; font-size: 1.05rem; }
.phrase-lesson-games-discovery .phrase-lesson-primary { margin-top: 0.35rem; }

.phrase-lesson-complete__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 720px) {
  .phrase-lesson-overlay { padding: 0; }

  .phrase-lesson-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .phrase-lesson-header { padding: 12px 16px 10px; }
  .phrase-lesson-progress-track { margin-top: 8px; }
  .phrase-lesson-stage { padding: clamp(8px, 1.6vh, 12px) 16px; }

  .phrase-lesson-intro {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .phrase-lesson-intro-phrase { margin-bottom: 8px; }

  .phrase-lesson-word-grid,
  .phrase-lesson-result-words { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .phrase-lesson-carousel {
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    gap: clamp(6px, 1.4vh, 10px);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }

  .phrase-lesson-carousel-main {
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
    gap: 14px;
  }

  .phrase-lesson-carousel-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phrase-lesson-carousel-footer {
    flex: 0 0 auto;
    align-items: stretch;
    flex-direction: column;
    margin-top: 8px;
    padding-top: 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--pb-panel);
  }

  .phrase-lesson-choices { grid-template-columns: 1fr; }

  .phrase-lesson-picture-choice {
    grid-template-columns: clamp(58px, 11vh, 92px) 1fr;
    align-items: center;
    column-gap: 12px;
  }

  .phrase-lesson-picture-choice img { grid-row: 1 / span 2; }
  .phrase-lesson-picture-choice > span:not(.phrase-lesson-picture-choice__audio) { margin: 0; }

  .phrase-lesson-picture-choice__audio {
    top: 14px;
    right: 14px;
    bottom: auto;
  }

  .phrase-lesson-feedback-bar { min-height: clamp(56px, 11vh, 72px); padding: clamp(8px, 1.6vh, 12px) 16px; }
  .phrase-lesson-complete__actions { flex-direction: column-reverse; }
}

@media (max-width: 720px) and (orientation: portrait) {
  .phrase-lesson-header {
    padding-right: calc(58px + env(safe-area-inset-right, 0px));
  }

  .phrase-lesson-close {
    top: 8px;
    right: calc(12px + env(safe-area-inset-right, 0px));
    width: 34px;
    height: 34px;
    font-size: 1.4rem;
  }
}

/* A clamp can shrink a box but it cannot reflow a grid, and on a short screen the
   word strip is the last thing still costing a whole row: five chips at two across
   is three rows. Three across is two, which is the ~50px the intro needs to fit a
   phone with browser chrome. Keyed to height, not width — the strip has the room
   sideways, it is the vertical budget that ran out (#286). */
@media (max-height: 640px) {
  .phrase-lesson-carousel-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .phrase-lesson-carousel-step small {
    display: none;
  }

  /* Same trade on the recap: five words in three columns is two rows of picture
     cards, and the completion screen is the one place with no way to defer. Five
     across keeps every word and its picture, one row deep. */
  .phrase-lesson-result-words {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .phrase-lesson-result-words li {
    padding: 6px;
  }

  /* The build row wraps five tiles onto three lines, so every pixel taken off a
     tile is taken off three times. The transliteration under each one stays —
     a learner who cannot read the script needs it more here than anywhere. */
  .phrase-lesson-selected-tile,
  .phrase-lesson-pool-tile {
    min-height: clamp(32px, 6vh, 46px);
  }

  .phrase-lesson-answer-row,
  .phrase-lesson-tile-pool {
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phrase-lesson-word-card,
  .phrase-lesson-picture-choice,
  .phrase-lesson-progress-fill { transition: none; }
}

/* Standalone toast (the host's toast lives in the parent frame). */
.pb-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2200;
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(23, 19, 15, 0.94);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: 0 12px 30px rgba(23, 19, 15, 0.28);
}

.pb-toast[hidden] { display: none; }
.pb-toast[data-type="info"] { background: rgba(47, 62, 38, 0.94); }