/* Exercise visuals inside the circular learning canvas */

.cue-zone,
.sound-cue {
  display: none;
}

.soft-badge {
  margin: 0;
  padding: calc(100cqw * 6 / 560) calc(100cqw * 14 / 560);
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: calc(100cqw * 13 / 560);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Status badge under mic on read screens — never participates in word/mic Y */
.action-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(100cqw * 12 / 560);
}

.action-stack .soft-badge {
  margin: 0;
  flex: 0 0 auto;
}

.listen-compare-stack {
  gap: calc(100cqw * 10 / 560);
}

.listen-compare-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqw * 2 / 560);
  text-align: center;
}

.listen-compare-en {
  margin: 0;
  font-size: calc(100cqw * 24 / 560);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

.listen-compare-ru {
  margin: 0;
  font-size: calc(100cqw * 18 / 560);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.25;
}

/*
  Screens 1–3 only: raise MAIN letters for equal RU↔main↔action gaps.
  --target-y stays locked so Action zone does not move.
  Screens 4–8 are unaffected (BLEND / READ overrides are separate).
*/
.learning-canvas[data-exercise="SOUND"] .target-zone,
.learning-canvas[data-exercise="LISTEN_AND_REPEAT"] .target-zone {
  top: calc(var(--target-y) - calc(100cqw * 5.35 / 560));
}

.learning-canvas[data-exercise="ISOLATE"] .target-zone {
  top: calc(var(--target-y) - calc(100cqw * 13.3 / 560));
}

/*
  READ screens 5–8 only (READ_NEW / TRANSFER / REVIEW_MIX / CHECK):
  Raise the word so the visible gap RU→word ≈ word→mic.
  Instruction + Action stay on the locked base coordinates;
  only .target-zone top moves. Badge under mic is ignored.
*/
.learning-canvas[data-exercise="READ_NEW"],
.learning-canvas[data-exercise="TRANSFER"],
.learning-canvas[data-exercise="REVIEW_MIX"],
.learning-canvas[data-exercise="CHECK"],
.learning-canvas[data-exercise="READ"] {
  --read-instr-extent: calc(100cqw * (28 * 1.25 + 6 + 20 * 1.3) / 560);
  --read-action-top: calc(
    var(--target-y) + (var(--letter-size) * 0.46) + var(--target-action-gap)
  );
  --read-word-y: calc(
    (var(--instruction-y) + var(--read-instr-extent) + var(--read-action-top)) / 2
  );
}

.learning-canvas[data-exercise="READ_NEW"] .target-zone,
.learning-canvas[data-exercise="TRANSFER"] .target-zone,
.learning-canvas[data-exercise="REVIEW_MIX"] .target-zone,
.learning-canvas[data-exercise="CHECK"] .target-zone,
.learning-canvas[data-exercise="READ"] .target-zone {
  top: var(--read-word-y);
}

.sound-letter {
  margin: 0;
  font-size: var(--letter-size, calc(100cqw * 104 / 560));
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: lowercase;
}

/*
  Letter stays the in-flow size of target-zone (reference Y unchanged).
  IPA is absolutely placed in the existing letter→action gap.
*/
.letter-with-ipa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.letter-with-ipa .ipa-caption {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: calc(100cqw * 8 / 560);
}

.ipa-caption {
  margin: 0;
  display: inline-block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  font-size: calc(100cqw * 22 / 560);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-align: center;
}

.ipa-feedback {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: calc(100cqw * 6 / 560);
  color: var(--muted);
  font-size: calc(100cqw * 18 / 560);
  font-weight: 500;
  line-height: 1.2;
  pointer-events: none;
}

.ipa-feedback-grapheme {
  color: var(--ink);
  font-weight: 600;
  text-transform: lowercase;
}

.ipa-feedback .ipa-caption {
  font-size: calc(100cqw * 18 / 560);
}

.feedback-zone.has-ipa-feedback {
  min-height: calc(100cqw * 24 / 560);
}

.word-stimulus {
  margin: 0;
  font-size: calc(100cqw * 104 / 560);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: lowercase;
}

/* R1L20 OO reads: word + IPA + RU label centred as one block in the RU→action gap. */
.oo-read-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqw * 6 / 560);
}

.oo-sound-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.oo-sound-caption .ipa-caption {
  color: var(--ink);
  font-weight: 600;
}

.oo-sound-label {
  margin: 0;
  font-size: calc(100cqw * 18 / 560);
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
}

.word-stimulus.is-blend-result {
  margin: 0;
  font-size: var(--blend-word-size, calc(100cqw * 82 / 560));
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: lowercase;
}

/* Shared action controls: same diameter; active/inactive by colour only */
.play-button,
.mic-button {
  width: var(--action-size, calc(100cqw * 56 / 560));
  height: var(--action-size, calc(100cqw * 56 / 560));
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-button);
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.play-button svg,
.mic-button svg {
  width: var(--action-icon-size, calc(100cqw * 23 / 560));
  height: var(--action-icon-size, calc(100cqw * 23 / 560));
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.play-button:hover,
.mic-button:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(18, 185, 129, 0.32);
}

.play-button:focus-visible,
.mic-button:focus-visible {
  outline: 3px solid rgba(18, 185, 129, 0.28);
  outline-offset: 4px;
}

/* Isolated sound without an approved recording: same speaker, inert. */
.play-button.is-audio-pending:disabled,
.play-button.is-audio-pending:disabled:hover {
  background: var(--green);
  color: #fff;
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.mic-button.is-recording {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22);
  animation: mic-pulse 1.1s ease-in-out infinite;
}

.mic-button.is-recording:hover {
  background: #dc2626;
}

.mic-button.is-processing {
  background: #94a3b8;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.mic-button.is-correct {
  background: var(--green-dark);
}

.mic-button.is-retry {
  background: var(--green);
}

.mic-button:disabled {
  cursor: default;
  transform: none;
}

.attempt-feedback.is-listening .attempt-feedback-en,
.attempt-feedback.is-listening .attempt-feedback-ru {
  color: #6b7380;
}

.attempt-feedback.is-continue .attempt-feedback-en,
.attempt-feedback.is-continue .attempt-feedback-ru {
  color: #4a5568;
}

.attempt-feedback-count-en,
.attempt-feedback-count-ru {
  margin: calc(100cqw * 2 / 560) 0 0;
  font-size: calc(100cqw * 13 / 560);
  font-weight: 500;
  color: #6b7380;
  line-height: 1.3;
}

.attempt-feedback-count-en {
  margin-top: calc(100cqw * 8 / 560);
}

/* DEV speech diagnostics: outside the exercise circle */
.speech-dev-panel {
  flex: 0 1 360px;
  width: min(360px, 100%);
  max-width: 380px;
  max-height: min(560px, calc(100vh - 220px));
  overflow: auto;
  box-sizing: border-box;
  padding: 14px 16px 16px;
  background: #f7f8fa;
  border: 1px solid #d8dde6;
  border-radius: 14px;
  color: #3d4654;
  text-align: left;
  box-shadow: 0 6px 18px rgba(30, 41, 59, 0.06);
}

.speech-dev-panel[hidden] {
  display: none !important;
}

.speech-dev-panel-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1f2937;
}

.speech-dev-panel-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  word-break: break-word;
}

.speech-dev-row {
  margin: 0;
}

.speech-dev-row.is-muted {
  color: #6b7380;
}

.speech-dev-alt-block {
  margin: 4px 0 2px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 10px;
}

.speech-dev-alt-title {
  margin: 0 0 4px;
  font-weight: 600;
  color: #111827;
}

.speech-dev-alt-line {
  margin: 0;
  color: #4b5563;
  padding-left: 2px;
}

.speech-dev-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.speech-dev-badge.is-accept {
  background: #e8f8f0;
  color: #047857;
}

.speech-dev-badge.is-retry {
  background: #fff4e8;
  color: #b45309;
}

.speech-dev-badge.is-pass {
  background: #eef2ff;
  color: #4338ca;
}

.speech-dev-badge.is-exact,
.speech-dev-badge.is-phonetic {
  background: #ecfdf5;
  color: #065f46;
}

.speech-dev-badge.is-close {
  background: #fff7ed;
  color: #c2410c;
}

.speech-dev-badge.is-different,
.speech-dev-badge.is-unknown {
  background: #f3f4f6;
  color: #4b5563;
}

.speech-dev-sep {
  border: 0;
  border-top: 1px solid #e5e9f0;
  margin: 8px 0;
}

@keyframes mic-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(239, 68, 68, 0.08);
  }
}

.play-button.is-secondary,
.play-button.is-tiny {
  width: var(--action-size, calc(100cqw * 56 / 560));
  height: var(--action-size, calc(100cqw * 56 / 560));
  background: #e6f7f1;
  color: #10b981;
  border: 0;
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.14);
}

.play-button.is-secondary:hover,
.play-button.is-tiny:hover {
  background: #daf3eb;
  color: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(16, 185, 129, 0.18);
}

.play-button.is-secondary svg,
.play-button.is-tiny svg {
  width: var(--action-icon-size, calc(100cqw * 23 / 560));
  height: var(--action-icon-size, calc(100cqw * 23 / 560));
}

.action-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--action-pair-gap, calc(100cqw * 20 / 560));
  min-height: var(--action-size, calc(100cqw * 56 / 560));
}

.action-zone[hidden] {
  display: flex;
}

/*
  ISOLATE columns: identical slot width in target + action
  so each speaker sits on the same vertical axis as its letter.
*/
.isolate-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--isolate-gap, calc(100cqw * 32 / 560));
  width: auto;
}

.isolate-slot {
  width: var(--isolate-slot, calc(100cqw * 72 / 560));
  flex: 0 0 var(--isolate-slot, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.isolate-letter {
  font-size: var(--isolate-letter-size, calc(100cqw * 78 / 560));
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/*
  BLEND only (Screen 4):
  Instruction is tall enough for the wrapped numbered title.
  Action sits slightly lower so the blend band keeps its size.
  MAIN CONTENT band between them uses space-evenly so:
  S1 (after instruction) = S2 (sounds → word) = S3 (before actions).
  Letter/word sizes are ~7% smaller than isolate/result reference
  so the circle does not feel top-heavy; weights/colors unchanged.
*/
.learning-canvas[data-exercise="BLEND"] {
  /* Two English lines + gap + one Russian line. The numbered title wraps. */
  --blend-instruction-extent: calc(100cqw * (28 * 1.25 * 2 + 6 + 20 * 1.3) / 560);
  --blend-action-top: calc(
    var(--target-y) + (var(--letter-size) * 0.46) + var(--target-action-gap) +
      100cqw * 16 / 560
  );
  /* 78px * 0.92 ≈ 72px; 88px * 0.93 ≈ 82px */
  --blend-letter-size: calc(100cqw * 72 / 560);
  --blend-word-size: calc(100cqw * 82 / 560);
}

.learning-canvas[data-exercise="BLEND"] .instruction-zone {
  height: var(--blend-instruction-extent);
  min-height: var(--blend-instruction-extent);
  overflow: visible;
}

.learning-canvas[data-exercise="BLEND"] .instruction-en,
.learning-canvas[data-exercise="BLEND"] .instruction-ru {
  flex: 0 0 auto;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.learning-canvas[data-exercise="BLEND"] .action-zone {
  top: var(--blend-action-top);
}

.learning-canvas[data-exercise="BLEND"] .target-zone {
  top: calc(var(--instruction-y) + var(--blend-instruction-extent));
  height: calc(
    var(--blend-action-top) - var(--instruction-y) - var(--blend-instruction-extent)
  );
  transform: translateX(-50%);
  justify-content: stretch;
}

.blend-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 10 / 560);
  width: 100%;
}

.learning-canvas[data-exercise="BLEND"] .blend-stack {
  height: 100%;
  gap: 0;
  justify-content: space-evenly;
}

.blend-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 16 / 560);
}

.blend-letter {
  font-size: var(--blend-letter-size, var(--isolate-letter-size, calc(100cqw * 78 / 560)));
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: lowercase;
}

.learning-canvas[data-exercise="BLEND"] .blend-letter {
  font-size: var(--blend-letter-size);
}

.blend-join {
  color: #c4c9cf;
  font-size: calc(100cqw * 26 / 560);
  font-weight: 300;
  line-height: 1;
  opacity: 0.85;
  transform: translateY(-1px);
  flex: 0 0 auto;
}

/*
  LETTER_LISTEN_CHOOSE preview only (screen 9).
  Speaker in target-zone; letter options in action-zone.
  Does not alter screens 1–8 layout tokens.
*/
.letter-option-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 28 / 560);
  width: auto;
}

.letter-option {
  width: calc(100cqw * 72 / 560);
  height: calc(100cqw * 72 / 560);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  color: var(--ink);
  font-family: inherit;
  font-size: calc(100cqw * 44 / 560);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  cursor: default;
  box-shadow: none;
}

.letter-option:focus-visible {
  outline: 3px solid rgba(18, 185, 129, 0.28);
  outline-offset: 3px;
}

.learning-canvas[data-exercise="LETTER_LISTEN_CHOOSE"] .letter-option,
.learning-canvas[data-exercise="LISTEN_CHOOSE"] .letter-option {
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease;
}

.learning-canvas[data-exercise="LETTER_LISTEN_CHOOSE"] .letter-option.is-attempt-correct,
.learning-canvas[data-exercise="LISTEN_CHOOSE"] .letter-option.is-attempt-correct {
  background: var(--mint);
  color: var(--green-dark);
  box-shadow: 0 0 0 2px rgba(18, 185, 129, 0.32);
}

.learning-canvas[data-exercise="LETTER_LISTEN_CHOOSE"] .letter-option.is-attempt-incorrect,
.learning-canvas[data-exercise="LISTEN_CHOOSE"] .letter-option.is-attempt-incorrect {
  background: #fdecee;
  color: #b42318;
  box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.16);
}

.nav-lock-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqw * 2 / 560);
  margin-top: calc(100cqw * 8 / 560);
  text-align: center;
}

.nav-lock-hint-en {
  margin: 0;
  font-size: calc(100cqw * 15 / 560);
  font-weight: 600;
  color: #6b7380;
}

.nav-lock-hint-ru {
  margin: 0;
  font-size: calc(100cqw * 14 / 560);
  color: #8b939e;
}

.attempt-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqw * 2 / 560);
  margin: 0;
}

.attempt-feedback-en,
.attempt-feedback-ru {
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

.attempt-feedback-en {
  font-size: calc(100cqw * 21 / 560);
  font-weight: 600;
}

.attempt-feedback-ru {
  font-size: calc(100cqw * 18 / 560);
  font-weight: 500;
}

.attempt-feedback.is-correct,
.attempt-feedback.is-correct .attempt-feedback-en,
.attempt-feedback.is-correct .attempt-feedback-ru {
  color: var(--green-dark);
}

.attempt-feedback.is-incorrect,
.attempt-feedback.is-incorrect .attempt-feedback-en,
.attempt-feedback.is-incorrect .attempt-feedback-ru {
  color: #c45c5c;
}

.feedback-zone.has-attempt-feedback {
  min-height: calc(100cqw * 48 / 560);
}

/* Same option component; wider hit area for 3-letter words (LISTEN_CHOOSE) */
.letter-option.is-word {
  width: calc(100cqw * 120 / 560);
  padding: 0 calc(100cqw * 14 / 560);
}

/*
  LISTEN_BUILD preview only (screen 11).
  Local Y-only tighten: raise speaker + build panel; leave instructions locked.
  Does not alter global --target-y / --target-action-gap for other screens.
*/
.learning-canvas[data-exercise="LISTEN_BUILD"] .target-zone {
  top: calc(var(--target-y) - calc(100cqw * 29.52 / 560));
}

.learning-canvas[data-exercise="LISTEN_BUILD"] .action-zone {
  top: calc(
    var(--target-y) + (var(--letter-size) * 0.46) + var(--target-action-gap) -
      calc(100cqw * 48.35 / 560)
  );
  align-items: center;
}

/*
  LISTEN_WRITE gallery preview.
  Same Y anchors as LISTEN_BUILD (instruction → speaker → response).
  Response is a short text field instead of slots + tiles.
*/
.learning-canvas[data-exercise="LISTEN_WRITE"] .target-zone {
  top: calc(var(--target-y) - calc(100cqw * 29.52 / 560));
}

.learning-canvas[data-exercise="LISTEN_WRITE"] .action-zone {
  top: calc(
    var(--target-y) + (var(--letter-size) * 0.46) + var(--target-action-gap) -
      calc(100cqw * 48.35 / 560)
  );
  align-items: center;
}

.write-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: auto;
}

.write-input {
  width: calc(100cqw * 168 / 560);
  height: calc(100cqw * 56 / 560);
  margin: 0;
  padding: 0 calc(100cqw * 18 / 560);
  border: 1.5px solid rgba(18, 185, 129, 0.28);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(18, 185, 129, 0.08);
  font-family: inherit;
  font-size: calc(100cqw * 28 / 560);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-align: center;
  text-transform: lowercase;
  caret-color: var(--green);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.write-input::placeholder {
  color: transparent;
}

.write-input:hover {
  border-color: rgba(18, 185, 129, 0.42);
}

.write-input:focus {
  border-color: var(--green);
  box-shadow:
    0 0 0 3px rgba(18, 185, 129, 0.16),
    0 10px 24px rgba(18, 185, 129, 0.12);
}

.write-input.is-complete {
  background: #f4fbf8;
  color: var(--green-dark);
  border-color: rgba(18, 185, 129, 0.36);
  cursor: default;
}

.write-check-button {
  margin-top: calc(100cqw * 14 / 560);
  width: min(100%, calc(100cqw * 220 / 560));
  padding: calc(100cqw * 10 / 560) calc(100cqw * 22 / 560);
  flex-direction: column;
  gap: calc(100cqw * 1 / 560);
  line-height: 1.15;
}

.write-check-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.write-check-button:disabled:hover {
  background: var(--green);
}

/* After correct Check: hide the button entirely (do not leave disabled/pressed). */
.write-check-button.is-completed-hidden,
.write-check-button[hidden] {
  display: none !important;
}

.write-check-label-en {
  font-size: calc(100cqw * 16 / 560);
  font-weight: 600;
}

.write-check-label-ru {
  font-size: calc(100cqw * 14 / 560);
  font-weight: 500;
  opacity: 0.92;
}

/* LISTEN_WRITE right help panel — outside circle (visual spec). */
.write-help-dock {
  --write-help-green: #079b72;
  --write-help-btn-bg: #f8fffc;
  --write-help-btn-border: #e5f3ee;
  --write-help-btn-hover-bg: #eefdf7;
  --write-help-btn-hover-border: #bdecd6;
  --write-help-blank: #a7f3d0;
  --write-help-ink: #0f172a;
  --write-help-muted: #667085;
  --write-help-divider: #e6e6e6;
  position: absolute;
  left: calc(100% + 32px);
  top: 52%;
  transform: translateY(-50%);
  z-index: 4;
  box-sizing: border-box;
  width: 260px;
  max-width: 260px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--write-help-divider);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 27, 45, 0.08);
  pointer-events: auto;
}

.write-help-dock[hidden] {
  display: none !important;
}

.write-help-dock .write-help-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.write-help-dock .write-help-button {
  margin: 0;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--write-help-btn-border);
  border-radius: 14px;
  background: var(--write-help-btn-bg);
  color: var(--write-help-green);
  box-shadow: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  line-height: 1.15;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.write-help-dock .write-help-button:hover {
  background: var(--write-help-btn-hover-bg);
  border-color: var(--write-help-btn-hover-border);
  color: var(--write-help-green);
}

.write-help-dock .write-help-button[hidden] {
  display: none !important;
}

.write-help-dock .write-help-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: block;
}

.write-help-dock .write-help-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.write-help-dock .write-help-label-en {
  font-size: 20px;
  font-weight: 600;
  color: var(--write-help-green);
  line-height: 1.2;
}

.write-help-dock .write-help-label-ru {
  font-size: 16px;
  font-weight: 400;
  color: var(--write-help-muted);
  line-height: 1.2;
}

.write-help-dock .write-hint-reveal,
.write-help-dock .write-word-reveal {
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--write-help-divider);
  text-align: center;
}

.write-help-dock .write-hint-reveal {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--write-help-ink);
}

.write-help-dock .write-hint-letter {
  color: var(--write-help-ink);
}

.write-help-dock .write-hint-blank {
  color: var(--write-help-blank);
  font-weight: 700;
}

.write-help-dock .write-hint-gap {
  letter-spacing: 0;
}

.write-help-dock .write-hint-reveal[hidden],
.write-help-dock .write-word-reveal[hidden] {
  display: none !important;
}

.write-help-dock .write-word-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.write-help-dock .write-word-reveal-en,
.write-help-dock .write-word-reveal-ru {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.write-help-dock .write-word-reveal-ru {
  font-size: 16px;
  font-weight: 400;
}

.write-help-dock .write-word-label {
  color: var(--write-help-ink);
  font-weight: 600;
}

.write-help-dock .write-word-reveal-ru .write-word-label {
  color: var(--write-help-muted);
  font-weight: 400;
}

.write-help-dock .write-word-value {
  color: var(--write-help-green);
  font-weight: 600;
}

.build-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(100cqw * 22 / 560);
  width: auto;
}

.build-slot-row,
.build-tile-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 28 / 560);
  width: auto;
}

.build-slot {
  width: calc(100cqw * 56 / 560);
  height: calc(100cqw * 56 / 560);
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(139, 147, 156, 0.32);
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: calc(100cqw * 32 / 560);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--ink);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.build-slot.is-filled {
  background: var(--soft);
  border-color: transparent;
}

.build-slot.is-correct {
  background: var(--mint);
  color: var(--green-dark);
  box-shadow: 0 0 0 2px rgba(18, 185, 129, 0.32);
}

.build-slot.is-incorrect {
  background: #fdecee;
  color: #b42318;
  box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.16);
}

.build-tile {
  /* visual twin of .letter-option; class kept for LISTEN_* language reuse */
  cursor: default;
}

/* LISTEN_BUILD: keep 5-letter rows (crush/blush/shaft) inside the circle
   without redesign — slightly tighter gap than LLC 2–4 options. */
.learning-canvas[data-exercise="LISTEN_BUILD"] .build-slot-row,
.learning-canvas[data-exercise="LISTEN_BUILD"] .build-tile-row {
  gap: calc(100cqw * 18 / 560);
  max-width: 92%;
  flex-wrap: nowrap;
}

.learning-canvas[data-exercise="LISTEN_BUILD"] .letter-option.build-tile {
  width: calc(100cqw * 64 / 560);
  height: calc(100cqw * 64 / 560);
  font-size: calc(100cqw * 40 / 560);
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.learning-canvas[data-exercise="LISTEN_BUILD"] .build-slot {
  width: calc(100cqw * 64 / 560);
  height: calc(100cqw * 64 / 560);
  font-size: calc(100cqw * 36 / 560);
}

.learning-canvas[data-exercise="LISTEN_BUILD"] .build-slot.is-filled:not(:disabled) {
  cursor: pointer;
}

.learning-canvas[data-exercise="LISTEN_BUILD"] .build-slot:focus-visible {
  outline: 3px solid rgba(18, 185, 129, 0.28);
  outline-offset: 3px;
}

.learning-canvas[data-exercise="LISTEN_BUILD"] .build-tile.is-used {
  visibility: hidden;
  pointer-events: none;
  cursor: default;
}

.learning-canvas[data-exercise="LISTEN_BUILD"] .build-tile:disabled:not(.is-used) {
  cursor: default;
  opacity: 0.55;
}

/*
  INTRO / INFO — informational screens in the central circle.
  Scoped to data-exercise="INTRO" | "INFO". No CTA / mic / Check.
*/
.learning-canvas[data-exercise="INTRO"] .instruction-zone,
.learning-canvas[data-exercise="INTRO"] .target-zone,
.learning-canvas[data-exercise="INTRO"] .action-zone,
.learning-canvas[data-exercise="INTRO"] .feedback-zone,
.learning-canvas[data-exercise="INTRO"] .explain-zone,
.learning-canvas[data-exercise="INFO"] .instruction-zone,
.learning-canvas[data-exercise="INFO"] .target-zone,
.learning-canvas[data-exercise="INFO"] .action-zone,
.learning-canvas[data-exercise="INFO"] .feedback-zone,
.learning-canvas[data-exercise="INFO"] .explain-zone {
  display: none;
}

.intro-zone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--canvas-size) * 0.72);
  max-width: calc(100cqw * 360 / 560);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}

.learning-canvas[data-exercise="INTRO"] .intro-zone,
.learning-canvas[data-exercise="INFO"] .intro-zone {
  display: flex;
  width: calc(var(--canvas-size) * 0.82);
  max-width: calc(100cqw * 440 / 560);
}

.intro-zone[hidden] {
  display: none !important;
}

/* INFO / REVIEW INTRO — Soft Premium composition inside the central circle. */
.intro-info-panel {
  gap: 0;
}

.review-intro-panel {
  gap: 0;
}

.review-intro-badge {
  margin: 0 0 calc(100cqw * 14 / 560);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(100cqw * 6 / 560) calc(100cqw * 12 / 560);
  border-radius: 999px;
  background: #eefdf7;
  color: #079b72;
  font-size: calc(100cqw * 14 / 560);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.review-intro-title {
  margin: 0 0 calc(100cqw * 6 / 560);
  font-size: calc(100cqw * 28 / 560);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.review-intro-sparkle {
  display: inline-block;
  font-size: 0.72em;
  line-height: 1;
  vertical-align: 0.05em;
  opacity: 0.9;
}

.review-intro-title-ru {
  margin: 0 0 calc(100cqw * 16 / 560);
  font-size: calc(100cqw * 18 / 560);
  font-weight: 500;
  line-height: 1.35;
  color: #8491a3;
}

.review-intro-body-en {
  margin: 0 0 calc(100cqw * 6 / 560);
  max-width: calc(100cqw * 430 / 560);
  font-size: calc(100cqw * 22 / 560);
  font-weight: 600;
  line-height: 1.35;
  color: #0f172a;
  text-align: center;
}

.review-intro-body-ru {
  margin: 0 0 calc(100cqw * 18 / 560);
  max-width: calc(100cqw * 430 / 560);
  font-size: calc(100cqw * 17 / 560);
  font-weight: 500;
  line-height: 1.4;
  color: #8491a3;
  text-align: center;
}

.review-intro-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(100cqw * 8 / 560) calc(100cqw * 10 / 560);
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}

.review-intro-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(100cqw * 7 / 560) calc(100cqw * 14 / 560);
  border-radius: 999px;
  border: 1px solid #ddf5eb;
  background: #f8fffc;
  color: #079b72;
  font-size: calc(100cqw * 17 / 560);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.intro-concept-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.intro-concept-label {
  margin: 0 0 calc(100cqw * 8 / 560);
  font-size: calc(100cqw * 19 / 560);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.intro-concept-title {
  margin: 0 0 calc(100cqw * 12 / 560);
  font-size: calc(100cqw * 32 / 560);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.intro-concept-em {
  font-weight: 700;
  color: var(--green-dark);
}

.intro-concept-letter {
  margin: 0 0 calc(100cqw * 10 / 560);
  font-size: calc(100cqw * 76 / 560);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.intro-concept-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqw * 6 / 560);
  width: 100%;
  margin: 0 0 calc(100cqw * 12 / 560);
}

.intro-concept-row {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 8 / 560);
  font-size: calc(100cqw * 21 / 560);
  line-height: 1.3;
  white-space: nowrap;
}

.intro-concept-row.is-name {
  color: var(--muted);
  font-weight: 500;
}

.intro-concept-row.is-name .intro-concept-row-ipa {
  color: var(--muted);
  font-weight: 600;
}

.intro-concept-row.is-sound {
  color: var(--green-dark);
  font-weight: 700;
  font-size: calc(100cqw * 22 / 560);
}

.intro-concept-row.is-sound .intro-concept-row-label,
.intro-concept-row.is-sound .intro-concept-row-arrow,
.intro-concept-row.is-sound .intro-concept-row-ipa {
  color: var(--green-dark);
}

.intro-concept-row-ipa {
  font-weight: 700;
  white-space: nowrap;
}

.intro-concept-footer {
  margin: 0;
  font-size: calc(100cqw * 20 / 560);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

/* R1L16 pattern map only. Other intro screens do not use these classes. */
.learning-canvas[data-exercise="INTRO"] .intro-zone:has(.magic-e-map) {
  width: 90cqw;
  max-width: calc(100cqw * 490 / 560);
}

.magic-e-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: calc(100cqw * 16 / 560);
}

.magic-e-map-title {
  margin: 0;
  max-width: 16em;
  font-size: clamp(22px, calc(100cqw * 30 / 560), 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.magic-e-map-instruction {
  margin: 0;
  max-width: 18em;
  font-size: clamp(18px, calc(100cqw * 24 / 560), 24px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.magic-e-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(100cqw * 14 / 560);
  width: 100%;
  margin-top: calc(100cqw * 8 / 560);
}

.magic-e-map-card {
  margin: 0;
  padding: calc(100cqw * 18 / 560) calc(100cqw * 10 / 560);
  border-radius: calc(100cqw * 18 / 560);
  border: 1px solid #c8eadc;
  background: #f3fbf7;
  color: #0f172a;
  font-size: clamp(18px, calc(100cqw * 30 / 560), 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.magic-e-map-vowel {
  color: var(--green-dark);
}

@media (max-width: 390px) {
  .magic-e-map-grid {
    gap: 8px;
  }
}

.intro-concept-accent {
  color: var(--green-dark);
  font-weight: 700;
}

/*
  START — lesson goal / welcome (before INTRO).
  Scoped ONLY to data-exercise="START". Calmer sibling of RESULT.
*/
.learning-canvas[data-exercise="START"] .instruction-zone,
.learning-canvas[data-exercise="START"] .target-zone,
.learning-canvas[data-exercise="START"] .action-zone,
.learning-canvas[data-exercise="START"] .feedback-zone,
.learning-canvas[data-exercise="START"] .explain-zone {
  display: none;
}

.learning-canvas[data-exercise="START"] .intro-zone {
  display: flex;
  width: calc(var(--canvas-size) * 0.82);
  max-width: calc(100cqw * 440 / 560);
}

.learning-canvas[data-exercise="START"] .intro-zone[hidden] {
  display: none !important;
}

.start-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.start-badge {
  margin: 0 0 calc(100cqw * 8 / 560);
  padding: calc(100cqw * 6 / 560) calc(100cqw * 16 / 560);
  border-radius: 999px;
  background: var(--mint);
  color: var(--green-dark);
  font-size: calc(100cqw * 17 / 560);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.start-title {
  margin: 0;
  font-size: calc(100cqw * 38 / 560);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.start-title-accent {
  color: var(--green-dark);
  font-weight: 700;
}

.start-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 10 / 560);
  width: 100%;
  margin: calc(100cqw * 10 / 560) 0;
}

.start-divider-line {
  display: block;
  width: calc(100cqw * 42 / 560);
  height: calc(100cqw * 1.5 / 560);
  border-radius: 999px;
  background: #b7eed6;
  flex: 0 0 auto;
}

.start-divider-dot {
  width: calc(100cqw * 6 / 560);
  height: calc(100cqw * 6 / 560);
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
}

.start-divider-book {
  display: inline-flex;
  width: calc(100cqw * 18 / 560);
  height: calc(100cqw * 18 / 560);
  color: var(--green);
}

.start-divider-book svg {
  width: 100%;
  height: 100%;
  display: block;
}

.start-lead {
  margin: 0 0 calc(100cqw * 8 / 560);
  font-size: calc(100cqw * 22 / 560);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.start-lead-accent {
  color: var(--green-dark);
  font-weight: 700;
}

.start-letters {
  margin: 0 0 calc(100cqw * 8 / 560);
  font-size: calc(100cqw * 30 / 560);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--green-dark);
  white-space: nowrap;
}

.start-letter {
  color: var(--green-dark);
}

.start-letter-sep {
  margin: 0 calc(100cqw * 6 / 560);
  color: var(--green);
  font-weight: 600;
}

.start-follow {
  margin: 0;
  font-size: calc(100cqw * 21 / 560);
  font-weight: 500;
  line-height: 1.32;
  color: var(--ink);
}

.start-cta-button {
  margin: calc(100cqw * 12 / 560) 0 0;
  width: min(100%, calc(100cqw * 300 / 560));
  padding: calc(100cqw * 14 / 560) calc(100cqw * 28 / 560);
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: calc(100cqw * 21 / 560);
  font-weight: 600;
  line-height: 1.2;
  box-shadow: var(--shadow-button);
  cursor: pointer;
}

.start-cta-button:focus-visible {
  outline: 3px solid rgba(18, 185, 129, 0.28);
  outline-offset: 3px;
}

.start-cta-button:hover {
  background: var(--green-dark);
}

/*
  SOUND_EXPLAIN preview only — short sound tip before SOUND.
  Not an exercise layout; does not alter exercise zone tokens.
*/
.learning-canvas[data-exercise="SOUND_EXPLAIN"] {
  border: 2px solid #b7eed6;
  box-shadow:
    var(--shadow-soft),
    0 0 24px rgba(183, 238, 214, 0.35);
}

.learning-canvas[data-exercise="SOUND_EXPLAIN"] .instruction-zone,
.learning-canvas[data-exercise="SOUND_EXPLAIN"] .target-zone,
.learning-canvas[data-exercise="SOUND_EXPLAIN"] .action-zone,
.learning-canvas[data-exercise="SOUND_EXPLAIN"] .feedback-zone,
.learning-canvas[data-exercise="SOUND_EXPLAIN"] .intro-zone {
  display: none;
}

.explain-zone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--canvas-size) * 0.82);
  max-width: calc(100cqw * 420 / 560);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  padding: calc(100cqw * 8 / 560) calc(100cqw * 4 / 560);
}

.learning-canvas[data-exercise="SOUND_EXPLAIN"] .explain-zone {
  display: flex;
}

.explain-zone[hidden] {
  display: none !important;
}

.ck-compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: calc(100cqw * 4 / 560);
  min-width: 0;
}

.ck-compare-cards {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: calc(100cqw * 16 / 560);
  width: 100%;
}

.ck-compare-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 2 / 560);
  padding: calc(100cqw * 8 / 560) calc(100cqw * 6 / 560);
  border: 2px solid #d7e3dc;
  border-radius: calc(100cqw * 16 / 560);
  background: #f7fbf9;
}

.ck-compare-letter {
  margin: 0;
  font-size: calc(100cqw * 52 / 560);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.ck-compare-ipa {
  margin: 0;
  font-size: calc(100cqw * 22 / 560);
  font-weight: 600;
  line-height: 1.2;
  color: var(--muted);
}

.ck-compare .play-button {
  width: calc(100cqw * 44 / 560);
  height: calc(100cqw * 44 / 560);
  margin: 0;
}

.ck-compare-en,
.ck-compare-ru {
  margin: 0;
  max-width: 100%;
  font-size: calc(100cqw * 20 / 560);
  line-height: 1.2;
  text-align: center;
}

.ck-compare-en {
  font-weight: 600;
  color: var(--ink);
}

.ck-compare-ru {
  font-weight: 400;
  color: var(--muted);
}

.sound-explain-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: calc(100cqw * 14 / 560);
}

.sound-explain-heading {
  margin: 0;
  font-size: calc(100cqw * 45 / 560);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sound-explain-lead {
  margin: 0;
  max-width: 100%;
  font-size: calc(100cqw * 31 / 560);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.sound-explain-note,
.sound-explain-cue {
  margin: 0;
  max-width: 100%;
  font-size: calc(100cqw * 27 / 560);
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}

.sound-explain-divider {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: min(calc(100cqw * 200 / 560), 62%);
  height: calc(100cqw * 12 / 560);
  margin: calc(100cqw * 2 / 560) 0;
  flex: 0 0 auto;
}

.sound-explain-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(100cqw * 1.5 / 560);
  background: #b7eed6;
  transform: translateY(-50%);
}

.sound-explain-divider > span {
  position: relative;
  z-index: 1;
  width: calc(100cqw * 7 / 560);
  height: calc(100cqw * 7 / 560);
  border-radius: 50%;
  background: #0fae7a;
  flex: 0 0 auto;
}

.sound-explain-ipa {
  display: inline-block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  font-weight: 700;
  color: #0fae7a;
}

.sound-explain-em {
  font-weight: 700;
  color: #0fae7a;
}

/*
  RESULT — Lesson completion screen (R1L01).
  Scoped ONLY to data-exercise="RESULT". Does not alter INTRO or exercise templates.
*/
.learning-canvas[data-exercise="RESULT"] .instruction-zone,
.learning-canvas[data-exercise="RESULT"] .target-zone,
.learning-canvas[data-exercise="RESULT"] .action-zone,
.learning-canvas[data-exercise="RESULT"] .feedback-zone,
.learning-canvas[data-exercise="RESULT"] .explain-zone {
  display: none;
}

.learning-canvas[data-exercise="RESULT"] .intro-zone {
  display: flex;
  width: calc(var(--canvas-size) * 0.78);
  max-width: calc(100cqw * 400 / 560);
}

.learning-canvas[data-exercise="RESULT"] .intro-zone[hidden] {
  display: none !important;
}

.result-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.result-badge {
  margin: 0 0 calc(100cqw * 14 / 560);
  padding: calc(100cqw * 5 / 560) calc(100cqw * 14 / 560);
  border-radius: 999px;
  background: var(--mint);
  color: var(--green-dark);
  font-size: calc(100cqw * 13 / 560);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.result-title {
  margin: 0;
  font-size: calc(100cqw * 28 / 560);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.result-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 10 / 560);
  width: 100%;
  margin: calc(100cqw * 16 / 560) 0;
}

.result-divider-line {
  display: block;
  width: calc(100cqw * 42 / 560);
  height: calc(100cqw * 1.5 / 560);
  border-radius: 999px;
  background: #b7eed6;
  flex: 0 0 auto;
}

.result-divider-star {
  color: var(--green);
  font-size: calc(100cqw * 12 / 560);
  line-height: 1;
}

.result-divider-book {
  display: inline-flex;
  width: calc(100cqw * 18 / 560);
  height: calc(100cqw * 18 / 560);
  color: var(--green);
}

.result-divider-book svg {
  width: 100%;
  height: 100%;
  display: block;
}

.result-mastery {
  margin: 0 0 calc(100cqw * 14 / 560);
  font-size: calc(100cqw * 18 / 560);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}

.result-mastery-lead {
  color: var(--ink);
  font-weight: 500;
}

.result-mastery-accent {
  color: var(--green-dark);
  font-weight: 700;
}

.result-ipa-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 6 / 560);
  width: 100%;
  margin: 0;
  min-width: 0;
}

.result-ipa-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: calc(100cqw * 38 / 560);
  height: calc(100cqw * 30 / 560);
  padding: 0 calc(100cqw * 9 / 560);
  border-radius: 999px;
  background: var(--mint);
}

.result-ipa-text {
  display: inline-block;
  white-space: nowrap;
  font-size: calc(100cqw * 15 / 560);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.result-ipa-dot {
  width: calc(100cqw * 4 / 560);
  height: calc(100cqw * 4 / 560);
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
}

.result-finish-button {
  margin: calc(100cqw * 18 / 560) 0 0;
  width: min(100%, calc(100cqw * 280 / 560));
  padding: calc(100cqw * 16 / 560) calc(100cqw * 28 / 560);
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 8 / 560);
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: calc(100cqw * 17 / 560);
  font-weight: 600;
  line-height: 1.2;
  box-shadow:
    var(--shadow-button),
    0 0 22px rgba(18, 185, 129, 0.22);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.result-finish-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 1 / 560);
  min-width: 0;
}

.result-finish-en,
.result-finish-ru {
  display: block;
  white-space: nowrap;
  line-height: 1.15;
}

.result-finish-ru {
  font-size: calc(100cqw * 14 / 560);
  font-weight: 500;
}

.result-finish-star {
  font-size: calc(100cqw * 14 / 560);
  line-height: 1;
  color: #fff;
}

.result-finish-button:focus-visible {
  outline: 3px solid rgba(18, 185, 129, 0.28);
  outline-offset: 3px;
}

.result-finish-button:hover {
  background: var(--green-dark);
}

/* ========== R1L11 TH concept + compact SOUND (UI only) ========== */

.th-concept-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: calc(100cqw * 18 / 560);
}

.th-concept-formula {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(100cqw * 10 / 560);
  font-size: calc(100cqw * 52 / 560);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.th-concept-part,
.th-concept-result {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(100cqw * 52 / 560);
  padding: calc(100cqw * 6 / 560) calc(100cqw * 12 / 560);
  border-radius: calc(100cqw * 14 / 560);
  background: #fff;
  border: 1.5px solid #d7e8df;
  box-shadow: 0 6px 16px rgba(15, 27, 45, 0.05);
}

.th-concept-result {
  border-color: #b7eed6;
  background: linear-gradient(180deg, #ffffff 0%, #f3fbf7 100%);
  color: var(--green-dark, #0f8f66);
}

.th-concept-plus,
.th-concept-arrow {
  font-weight: 600;
  color: var(--muted);
}

.th-concept-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqw * 8 / 560);
  width: 100%;
  max-width: calc(100cqw * 400 / 560);
}

.th-concept-en {
  margin: 0;
  text-align: center;
  font-size: calc(100cqw * 30 / 560);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.th-concept-ru {
  margin: 0;
  text-align: center;
  font-size: calc(100cqw * 28 / 560);
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}

.th-pair-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: calc(100cqw * 8 / 560);
}

.th-pair-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(100cqw * 10 / 560);
  width: 100%;
  max-width: calc(100cqw * 460 / 560);
}

.th-pair-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(100cqw * 2 / 560);
  padding: calc(100cqw * 10 / 560) calc(100cqw * 8 / 560) calc(100cqw * 8 / 560);
  border-radius: calc(100cqw * 16 / 560);
  background: #f3fbf7;
  border: 1px solid #c8eadc;
  text-align: center;
  min-width: 0;
}

.th-pair-label {
  margin: 0;
  font-size: clamp(18px, calc(100cqw * 20 / 560), 20px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-dark, #079b70);
}

.th-pair-ipa {
  margin: 0;
  font-size: clamp(36px, calc(100cqw * 44 / 560), 44px);
  font-weight: 700;
  line-height: 0.95;
  color: var(--ink);
}

.th-pair-word {
  margin: 0;
  font-size: clamp(22px, calc(100cqw * 26 / 560), 26px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--green-dark, #079b70);
}

.th-pair-contrast {
  margin: 2px 0 0;
  max-width: 100%;
  font-size: clamp(16px, calc(100cqw * 18 / 560), 18px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.th-pair-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

/* Labeled TH pills. Do not use .play-button: that class is a circle and strokes the speaker as a hairline. */
.th-audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: auto;
  min-height: 48px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--green, #12b981);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-button);
}

.th-audio-btn svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.th-audio-btn svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.th-audio-btn:hover {
  background: var(--green-dark, #079b70);
}

.th-pair-ru {
  margin: 0;
  max-width: calc(100cqw * 440 / 560);
  text-align: center;
  font-size: clamp(16px, calc(100cqw * 18 / 560), 18px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.th-pair-listen {
  margin: 0;
  max-width: calc(100cqw * 420 / 560);
  text-align: center;
  font-size: clamp(16px, calc(100cqw * 17 / 560), 17px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

/* Dedicated TH SOUND — matched /θ/ and /ð/ geometry */
.learning-canvas.is-th-sound .target-zone {
  top: 50%;
  width: min(88cqw, 440px);
  z-index: 4;
}

.learning-canvas.is-th-sound .instruction-zone {
  display: none;
}

/* Empty action zone sits above the target (z-index 3) and was swallowing button clicks. */
.learning-canvas.is-th-sound .action-zone {
  display: none;
  pointer-events: none;
  min-height: 0;
}

.th-sound-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 420px;
  gap: 0;
  text-align: center;
}

.th-sound-label {
  margin: 0 0 2px;
  font-size: clamp(22px, calc(100cqw * 24 / 560), 24px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-dark, #079b70);
}

.th-sound-title {
  margin: 0;
  text-align: center;
  font-size: calc(100cqw * 20 / 560);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.th-sound-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(100cqw * 2 / 560);
  width: 100%;
  max-width: calc(100cqw * 250 / 560);
  min-height: calc(100cqw * 108 / 560);
  padding: calc(100cqw * 8 / 560) calc(100cqw * 12 / 560);
  border-radius: calc(100cqw * 18 / 560);
  background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%);
  border: 1.5px solid #cfe9dc;
  box-shadow: 0 10px 22px rgba(15, 27, 45, 0.06);
  box-sizing: border-box;
}

.th-sound-ipa {
  margin: 0;
  font-size: clamp(48px, calc(100cqw * 72 / 560), 72px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.th-sound-word {
  margin: 6px 0 0;
  font-size: clamp(26px, calc(100cqw * 34 / 560), 34px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--green-dark, #079b70);
}

.th-sound-hint {
  margin: 14px 0 0;
  max-width: 380px;
  font-size: clamp(18px, calc(100cqw * 22 / 560), 22px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.th-sound-hint + .th-sound-hint {
  margin-top: 4px;
}

.th-sound-stack .th-pair-actions {
  margin-top: 16px;
  gap: 12px;
}

.th-sound-stack .th-audio-btn {
  min-height: 48px;
  padding: 10px 18px;
  font-size: 20px;
}

.th-sound-model {
  margin: 0;
  font-size: calc(100cqw * 22 / 560);
  font-weight: 600;
  line-height: 1.1;
  color: var(--green-dark, #0f8f66);
  text-transform: lowercase;
}

.th-sound-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqw * 1 / 560);
  max-width: calc(100cqw * 320 / 560);
  text-align: center;
  margin-top: calc(100cqw * 1 / 560);
}

.th-sound-cue-en {
  margin: 0;
  font-size: calc(100cqw * 16 / 560);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

.th-sound-cue-ru {
  margin: 0;
  font-size: calc(100cqw * 16 / 560);
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted);
}

.learning-canvas.is-th-explain .explain-zone {
  width: 86cqw;
  max-width: calc(100cqw * 440 / 560);
}

.learning-canvas.is-th-pair .explain-zone {
  width: 90cqw;
  max-width: calc(100cqw * 460 / 560);
  z-index: 4;
}

/* Shared row tracks: the taller explanation sets the row, so both audio groups start together. */
.learning-canvas.is-th-pair .th-pair-cards {
  grid-template-rows: auto auto auto auto auto;
}

.learning-canvas.is-th-pair .th-pair-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 5;
  align-items: center;
  justify-items: center;
}

.learning-canvas.is-th-pair .th-pair-card:nth-child(1) {
  grid-column: 1;
}

.learning-canvas.is-th-pair .th-pair-card:nth-child(2) {
  grid-column: 2;
}

.learning-canvas.is-th-pair .th-pair-contrast {
  align-self: start;
  justify-self: stretch;
  width: 100%;
}

.learning-canvas.is-th-pair .th-pair-actions {
  align-self: start;
  justify-self: center;
}

@media (max-width: 430px) {
  .learning-canvas.is-th-sound .target-zone {
    width: min(86cqw, 260px);
  }

  .th-sound-stack {
    max-width: 250px;
  }

  .th-sound-label {
    font-size: 18px;
  }

  .th-sound-ipa {
    font-size: 48px;
  }

  .th-sound-word {
    margin-top: 4px;
    font-size: 26px;
  }

  .th-sound-hint {
    margin-top: 10px;
    font-size: 18px;
  }

  .th-sound-hint + .th-sound-hint {
    margin-top: 2px;
  }

  .th-sound-stack .th-pair-actions {
    margin-top: 10px;
    gap: 8px;
  }

  .th-sound-stack .th-audio-btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
    gap: 6px;
  }

  .th-sound-stack .th-audio-btn svg {
    width: 18px;
    height: 18px;
  }

  body.ls-trainer--reading .learning-canvas.is-th-pair .explain-zone {
    width: 64cqw;
    max-width: 200px;
    padding: 0;
  }

  .th-pair-panel {
    gap: 2px;
    width: 100%;
    max-width: 188px;
  }

  .th-pair-cards {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 4px;
    max-width: 188px;
  }

  .th-pair-card,
  .learning-canvas.is-th-pair .th-pair-card,
  .learning-canvas.is-th-pair .th-pair-card:nth-child(1),
  .learning-canvas.is-th-pair .th-pair-card:nth-child(2) {
    display: flex;
    grid-column: auto;
    grid-row: auto;
    grid-template-rows: none;
    padding: 2px 4px;
    gap: 0;
  }

  .th-pair-label {
    font-size: 16px;
    line-height: 1.1;
  }

  .th-pair-ipa {
    font-size: 26px;
    line-height: 1;
  }

  .th-pair-word {
    font-size: 16px;
    line-height: 1.1;
  }

  .th-pair-contrast {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.15;
  }

  .th-pair-actions {
    margin-top: 2px;
    gap: 4px;
  }

  .th-pair-card .th-audio-btn {
    min-height: 36px;
    padding: 4px 8px;
    font-size: 16px;
    gap: 4px;
  }

  .th-pair-card .th-audio-btn svg {
    width: 16px;
    height: 16px;
  }

  .th-pair-ru,
  .th-pair-listen {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.15;
  }

  .th-concept-formula {
    font-size: calc(100cqw * 42 / 560);
  }

  .th-concept-en {
    font-size: calc(100cqw * 26 / 560);
  }

  .th-concept-ru {
    font-size: calc(100cqw * 23 / 560);
  }
}

/* R1L11 RESULT only: short stack kept inside the circle. */
body.ls-trainer--reading .learning-canvas.is-r1l11-result[data-exercise="RESULT"] .intro-zone {
  width: min(64cqw, 300px);
  max-width: 300px;
}

.learning-canvas.is-r1l11-result .result-panel.is-r1l11-result {
  gap: 10px;
}

.learning-canvas.is-r1l11-result .result-badge,
.learning-canvas.is-r1l11-result .result-success,
.learning-canvas.is-r1l11-result .result-title,
.learning-canvas.is-r1l11-result .result-summary,
.learning-canvas.is-r1l11-result .result-ipa-row,
.learning-canvas.is-r1l11-result .result-finish-button {
  margin: 0;
}

.learning-canvas.is-r1l11-result .result-badge {
  padding: 4px 12px;
  font-size: 16px;
}

.learning-canvas.is-r1l11-result .result-success {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mint);
  color: var(--green-dark, #079b70);
  font-size: 18px;
  line-height: 1;
}

.learning-canvas.is-r1l11-result .result-title {
  font-size: 28px;
  line-height: 1.15;
}

.learning-canvas.is-r1l11-result .result-summary {
  max-width: 260px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.learning-canvas.is-r1l11-result .result-ipa-chip {
  min-width: 64px;
  height: 36px;
  padding: 0 12px;
}

.learning-canvas.is-r1l11-result .result-ipa-text {
  font-size: 18px;
}

.learning-canvas.is-r1l11-result .result-finish-button {
  width: min(100%, 240px);
  min-height: 48px;
  padding: 12px 20px;
  font-size: 18px;
}

/* R1L12 NG sound introduction only. IPA stays in flow so the cue sits under /ŋ/. */
body.ls-trainer--reading .learning-canvas.is-ng-sound[data-exercise="SOUND"] .target-zone {
  top: calc(var(--instruction-y) + 100cqw * 74 / 560);
  transform: translateX(-50%);
  width: min(72cqw, 340px);
  z-index: 4;
  justify-content: flex-start;
}

.learning-canvas.is-ng-sound .action-zone {
  display: none;
  pointer-events: none;
  min-height: 0;
}

.learning-canvas.is-ng-sound .ng-sound-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100cqw * 6 / 560);
  width: 100%;
  text-align: center;
}

.learning-canvas.is-ng-sound .letter-with-ipa .ipa-caption {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  margin-top: calc(100cqw * 2 / 560);
}

.learning-canvas.is-ng-sound .ng-sound-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.learning-canvas.is-ng-sound .ng-sound-line {
  margin: 0;
  max-width: 340px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
}

@media (max-width: 430px) {
  body.ls-trainer--reading .learning-canvas.is-ng-sound[data-exercise="SOUND"] .target-zone {
    top: calc(var(--instruction-y) + 100cqw * 68 / 560);
    width: 74cqw;
  }

  .learning-canvas.is-ng-sound .ng-sound-stack {
    gap: 4px;
  }

  .learning-canvas.is-ng-sound .ng-sound-line {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.2;
  }
}

/* R1L13 cap → cape introduction only. Four bands share the circle's safe height. */
body.ls-trainer--reading .learning-canvas.is-ae-intro[data-exercise="SOUND_EXPLAIN"] .explain-zone {
  top: 12%;
  height: 76%;
  width: min(86cqw, 440px);
  max-width: 440px;
  transform: translateX(-50%);
  justify-content: stretch;
  z-index: 4;
  padding: 0;
}

.ae-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-height: 0;
  text-align: center;
}

.ae-intro-title {
  margin: 0;
  font-size: clamp(18px, calc(100cqw * 28 / 560), 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.ae-intro-transform {
  display: grid;
  grid-template-columns: max-content auto max-content;
  grid-template-rows: auto auto;
  column-gap: calc(100cqw * 22 / 560);
  row-gap: calc(100cqw * 8 / 560);
  justify-items: center;
  align-items: center;
}

.ae-intro-word {
  margin: 0;
  font-size: clamp(40px, calc(100cqw * 76 / 560), 76px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.ae-intro-word-cap { grid-area: 1 / 1; }
.ae-intro-arrow { grid-area: 1 / 2; }
.ae-intro-word-cape { grid-area: 1 / 3; }
.ae-intro-ipa-cap { grid-area: 2 / 1; }
.ae-intro-ipa-cape { grid-area: 2 / 3; }

.ae-intro-arrow {
  font-size: clamp(28px, calc(100cqw * 48 / 560), 48px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.ae-intro-magic {
  color: var(--green, #12b981);
}

.ae-intro-ipa {
  margin: 0;
  font-size: clamp(16px, calc(100cqw * 24 / 560), 24px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.ae-intro-ru {
  margin: 0;
  max-width: min(34ch, 100%);
  font-size: clamp(16px, calc(100cqw * 20 / 560), 20px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.ae-intro-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: calc(100cqw * 16 / 560);
  width: 100%;
}

.ae-intro .th-audio-btn {
  min-height: 48px;
}

@media (max-width: 430px) {
  body.ls-trainer--reading .learning-canvas.is-ae-intro[data-exercise="SOUND_EXPLAIN"] .explain-zone {
    top: 10%;
    height: 72%;
  }
}