/* Learn English page — topic tiles, topic page (lesson + practice),
   exercise runner (all exercise types), slide viewer */

body.page-english {
  --eng-right: #1f9d55;
  --eng-right-soft: #c9f5d9;
  --eng-wrong: #d63c3c;
  --eng-wrong-soft: #ffd9d9;
  --eng-soft: #e8faf8;
  --eng-card: #eaf5ff;
  --eng-card-hover: #d6ebff;
  --eng-card-border: 3px solid var(--ink);
  --eng-card-shadow: 4px 5px 0 0 var(--ink);
  --eng-card-shadow-hover: 5px 7px 0 0 var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* No ligatures: the font joins "fi", "fl" and "ff" into one glyph, which
   hides the separate letters from a student learning to read them.
   Form controls get it too, since their UA font shorthand resets it. */
body.page-english,
body.page-english :is(button, input, textarea, select) {
  font-variant-ligatures: none;
}

body.page-english main {
  flex: 1 0 auto;
}

body.page-english .site-footer.section-yellow {
  flex-shrink: 0;
  margin-top: auto;
}

body.page-english section.clean-section.clean-section--hero {
  padding-bottom: 24px;
}

/* This page is standalone — no site navbar, only the sign-in bar above the
   hero — so the hero doesn't need the generic clean-site clearance for it. */
body.page-english .clean-hero-inner {
  padding-top: 8px;
}

/* ── Sign-in bar: login button, or the avatar menu once signed in ── */

/* !important: styles.css pins every direct child of body to z-index 1 with a
   long :not() chain; the avatar menu has to drop over the hero below. */
.eng-auth-bar {
  position: relative;
  z-index: 50 !important;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
}

.eng-auth-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 52px;
}

/* A topic page's back arrow (dockBack): on the start side of the bar, across
   from the sign-in button. */
.eng-bar-back {
  display: flex;
  margin-inline-end: auto;
}

.eng-bar-back:empty {
  display: none;
}

body.page-english #authLoginBtn {
  padding: 10px 22px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  background: var(--memyellow);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-sticker);
  cursor: pointer;
  transition: transform 0.12s;
}

body.page-english #authLoginBtn:hover {
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .eng-auth-inner { padding: 0 16px; }

  body.page-english #authLoginBtn {
    padding: 8px 18px;
    font-size: 16px;
    box-shadow: 4px 5px 0 0 var(--ink);
  }
}

body.page-english .eng-page-title.font-cartoon {
  margin: 0 0 14px;
  font-size: clamp(2rem, 7vw, 4.5rem);
  text-align: center;
}

body.page-english .eng-page-title .line {
  display: block;
}

/* This page has no navbar, so the generic clean-section "clear the fixed
   navbar" top padding would only add an empty gap. */
body.page-english .eng-section {
  padding-top: 32px !important;
  padding-bottom: 72px;
  overflow: visible;
}

/* ── Topic grid ── */

/* Grid (not flex-wrap) so every row shares one height: 1fr auto rows grow
   all tiles to the tallest one, e.g. when a title wraps to two lines. */
.eng-topic-grid {
  --eng-tile-size: clamp(150px, 42vw, 210px);
  display: grid;
  grid-template-columns: repeat(2, var(--eng-tile-size));
  grid-auto-rows: 1fr;
  justify-content: center;
  gap: 22px;
  margin: 0 auto;
}

@media (min-width: 760px) {
  .eng-topic-grid {
    grid-template-columns: repeat(3, var(--eng-tile-size));
  }
}

.eng-topic-card {
  display: grid;
}

.eng-topic-tile {
  position: relative;
  min-height: var(--eng-tile-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 10px 62px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow-sticker);
  background: var(--memteal);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: transform 0.32s cubic-bezier(0.34, 1.25, 0.64, 1);
}

.eng-topic-tile:hover,
.eng-topic-tile:focus-visible {
  transform: scale(1.06);
}

.eng-topic-title {
  max-width: 100%;
  font-size: clamp(1.3rem, 4.8vw, 1.75rem);
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.eng-topic-sub {
  font-size: clamp(0.9rem, 3vw, 1.05rem);
  font-weight: 800;
}

.eng-topic-tile .eng-topic-open {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 84%;
  padding: 7px 12px;
  font-size: clamp(0.85rem, 2.8vw, 0.95rem);
  text-align: center;
  box-shadow: none !important;
}

/* Groups of tiles: topics, reading, vocabulary by topic. */
.eng-topic-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6vw, 48px);
}

.eng-group-title {
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(1.45rem, 4.4vw, 2rem);
  font-weight: 900;
  color: var(--ink);
}

/* The learning path: a heading per stage ("שלב 1" chip + its name) and the
   topic's running number in the tile's corner. */
.eng-path-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Bold with the lesson slides' teal marker (.lp-key). */
.eng-path-stage-num {
  padding: 0 0.18em;
  border-radius: 6px;
  background: var(--memyellow);
  color: #000;
  font-size: 1em;
  font-weight: 900;
  line-height: 1.3;
}

.eng-path-num {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--memyellow);
  color: #000;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

/* "Next topic" at the bottom of a topic page. */
.eng-next-topic {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 34rem;
  margin: 8px auto 0;
  padding: 14px 20px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: #dccbff;
  box-shadow: var(--shadow-sticker);
  color: #000;
  font-size: 1.2rem;
  font-weight: 900;
  text-decoration: none;
}

.eng-next-topic-label {
  flex-shrink: 0;
}

.eng-next-topic-title {
  flex: 1;
  min-width: 0;
}

.eng-next-topic-arrow {
  display: flex;
  flex-shrink: 0;
}

.eng-next-topic-arrow svg {
  width: 26px;
  height: 26px;
}

/* ICONS.back points right (back, in RTL); forward points the other way. */
[dir="rtl"] .eng-next-topic-arrow svg {
  transform: scaleX(-1);
}

/* Vocabulary tiles carry one picture from their topic. */
.eng-topic-tile.has-img {
  gap: 2px;
  padding-top: 12px;
}

/* A numbered tile starts its text below the corner number (8px + 32px),
   so a long title never runs under it. */
.eng-topic-tile.has-num {
  padding-top: 46px;
}

.eng-topic-img {
  width: clamp(52px, 13vw, 74px);
  height: clamp(52px, 13vw, 74px);
  margin-bottom: 4px;
  user-select: none;
  -webkit-user-drag: none;
}

/* Phones: the two columns fill the page width, and the tiles are a little
   shorter, so long titles don't make towering tiles. */
@media (max-width: 480px) {
  .eng-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .eng-topic-tile {
    min-height: 150px;
    padding: 14px 8px 58px;
    border-radius: 18px;
  }

  .eng-topic-tile:hover,
  .eng-topic-tile:focus-visible {
    transform: scale(1.03);
  }

  .eng-topic-title {
    font-size: 1.2rem;
  }

  .eng-topic-sub {
    font-size: 0.86rem;
  }

  .eng-topic-tile .eng-topic-open {
    bottom: 10px;
  }
}

/* ── Shared: back button (round arrow icon; the label lives in aria-label) ── */

.eng-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--memyellow);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 3px 4px 0 0 var(--ink);
  transition: transform 0.12s ease, background 0.12s ease;
}

.eng-back svg {
  width: 24px;
  height: 24px;
}

/* The arrow points right ("back" in RTL); flip it for LTR. */
[dir="ltr"] .eng-back svg {
  transform: scaleX(-1);
}

.eng-back:hover {
  background: var(--memorange);
  transform: translateY(-1px);
}

/* ── Topic page ── */

.eng-topic-view,
.eng-exercise-view {
  max-width: 960px;
  margin: 0 auto;
}

.eng-topic-head,
.eng-runner-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  text-align: center;
}

.eng-topic-head .eng-back {
  align-self: flex-start;
}

/* The top row: the back arrow on the start side, the title in the middle and
   the settings button on the end side. The two side columns are the same
   width, so the title stays centered on the page. */
.eng-runner-top {
  align-self: stretch;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
}

.eng-runner-tools {
  display: flex;
  justify-content: flex-end;
}

/* One settings button; its menu holds the switches (translation, sounds,
   the reading tools) and the question card's colors. */
.eng-settings {
  position: relative;
}

.eng-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--memyellow);
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

/* Black on the yellow button in every theme. */
.eng-settings-btn svg {
  width: 24px;
  height: 24px;
  color: #000;
}

.eng-settings-btn:hover,
.eng-settings-btn[aria-expanded="true"] {
  background: var(--memorange);
}

.eng-settings-btn:hover {
  transform: translateY(-1px);
}

.eng-settings-btn:active {
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

.eng-settings-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  min-width: 250px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 3px 4px 0 0 var(--ink);
  text-align: start;
}

.eng-settings-menu.hidden {
  display: none;
}

.eng-setting {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  text-align: start;
  cursor: pointer;
}

.eng-setting:hover,
.eng-setting:focus-visible {
  background: var(--eng-soft);
}

.eng-setting svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.eng-setting-label {
  flex: 1;
}

/* The on/off knob at the row's end. */
.eng-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #e4e4e4;
  transition: background 0.15s ease;
}

.eng-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  box-sizing: border-box;
  transition: inset-inline-start 0.15s ease;
}

.eng-setting[aria-pressed="true"] .eng-switch {
  background: var(--memteal);
}

.eng-setting[aria-pressed="true"] .eng-switch::after {
  inset-inline-start: 20px;
}

/* The color row looks like the switches: the chosen color and an arrow at
   its end; a click unfolds the swatches under it. */
.eng-color-current {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card-color);
}

.eng-color-chevron {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-inline: 4px 6px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}

#engColorToggle[aria-expanded="true"] .eng-color-chevron {
  transform: translateY(2px) rotate(-135deg);
}

.eng-color-swatches {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  justify-content: center;
  gap: 12px;
  padding: 8px 10px 10px;
}

.eng-color-swatches.hidden {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .eng-switch,
  .eng-switch::after,
  .eng-color-chevron {
    transition: none;
  }
}

.eng-color-swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card-color);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.eng-color-swatch:hover {
  transform: scale(1.08);
}

.eng-color-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--ink);
}

.eng-color-swatch--white { --card-color: #ffffff; }
.eng-color-swatch--mint, .eng-card-color--mint { --card-color: #d9f7ea; }
.eng-color-swatch--sky, .eng-card-color--sky { --card-color: #d9ecff; }
.eng-color-swatch--lavender, .eng-card-color--lavender { --card-color: #e8e0ff; }
.eng-color-swatch--pink, .eng-card-color--pink { --card-color: #ffdcea; }
.eng-color-swatch--peach, .eng-card-color--peach { --card-color: #ffe3cc; }
.eng-color-swatch--lemon, .eng-card-color--lemon { --card-color: #fff6b8; }
.eng-color-swatch--sand, .eng-card-color--sand { --card-color: #f6ecd2; }

/* A colored card; the sentence box inside turns see-through white so it
   sits on the card's color instead of the default soft teal. */
.eng-runner-card[class*="eng-card-color--"] {
  background: var(--card-color);
}

.eng-runner-card[class*="eng-card-color--"] .eng-sentence {
  background: rgb(255 255 255 / 0.6);
}

.eng-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.eng-tool svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.eng-tool[aria-pressed="true"] {
  background: var(--memteal);
}

.eng-tool:hover {
  transform: translateY(-1px);
}

.eng-tool:active {
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

body.clean-site .eng-topic-heading.font-cartoon,
body.clean-site .eng-runner-title.font-cartoon {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.15;
}

body.clean-site .eng-runner-title.font-cartoon {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
}

.eng-topic-heading-en {
  margin: -4px 0 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--body);
}

/* padding: styles.css gives every <section> 80px of vertical padding. */
.eng-step {
  margin-bottom: 32px;
  padding: 0;
}

.eng-step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-step-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--memyellow);
  font-size: 1.05rem;
  font-weight: 900;
}

.eng-lesson-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(16px, 3vw, 24px);
  border: var(--eng-card-border);
  border-radius: 20px;
  background: var(--eng-card);
  box-shadow: var(--eng-card-shadow);
}

/* A topic split into numbered lessons: one card per lesson. */
.eng-lesson-card + .eng-lesson-card {
  margin-top: 14px;
}

.eng-lesson-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--memteal);
}

.eng-lesson-icon svg {
  width: 44px;
  height: 44px;
}

.eng-lesson-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-lesson-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* !important: .btn-candy / .btn-primary force a thicker 4px border and a larger
   offset shadow; slim them down to match the cards. */
.eng-lesson-card .eng-lesson-open {
  flex-shrink: 0;
  padding: 9px 21px;
  border: 3px solid var(--ink) !important;
  box-shadow: 3px 4px 0 0 var(--ink) !important;
  font-size: 1.05rem;
}

.eng-lesson-card .eng-lesson-open:active {
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 0 var(--ink) !important;
}

.eng-item-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.eng-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: var(--eng-card-border);
  border-radius: 16px;
  background: var(--eng-card);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--eng-card-shadow);
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.eng-item:hover,
.eng-item:focus-visible {
  transform: translateY(-2px);
  background: var(--eng-card-hover);
  box-shadow: var(--eng-card-shadow-hover);
}

.eng-item-icon,
.eng-ex-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--memteal);
}

.eng-item-icon svg,
.eng-ex-icon svg {
  width: 24px;
  height: 24px;
}

.eng-item-text,
.eng-ex-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eng-item-title,
.eng-ex-title {
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.25;
}

.eng-item-meta {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--body);
}

.eng-item-action {
  flex-shrink: 0;
  padding: 5px 15px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--memyellow);
  box-shadow: 2px 3px 0 0 var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
}

/* Every card in a grid is as tall as the tallest one. */
.eng-ex-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}

.eng-ex-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: var(--eng-card-border);
  border-radius: 18px;
  background: var(--eng-card);
  color: var(--ink);
  box-shadow: var(--eng-card-shadow);
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

/* Exercise and reading cards: the title link stretches over the whole card,
   and the "i" help button sits above it. Hovering the help button doesn't
   lift the card, since clicking there won't open the exercise. */
.eng-card-link {
  color: inherit;
  text-decoration: none;
}

.eng-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.eng-card-link:focus-visible {
  outline: none;
}

.eng-ex-card:has(.eng-card-link:focus-visible),
.eng-level-card:has(.eng-card-link:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.eng-ex-card:hover:not(:has(.eng-info-btn:hover)),
.eng-ex-card:has(.eng-card-link:focus-visible) {
  transform: translateY(-2px);
  background: var(--eng-card-hover);
  box-shadow: var(--eng-card-shadow-hover);
}

/* Practice exercise cards all share one icon (a notebook with the level
   number) and the default teal; printable sheets and reading passages (by
   level) keep their own colors. */
.eng-ex-icon--level svg {
  width: 30px;
  height: 30px;
}

.eng-ex-num {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

.eng-ex-card--print .eng-ex-icon { background: #ffd6f0; }
.eng-ex-card--level-1 .eng-ex-icon { background: var(--eng-level-1); }
.eng-ex-card--level-2 .eng-ex-icon { background: var(--eng-level-2); }
.eng-ex-card--level-3 .eng-ex-icon { background: var(--eng-level-3); }
.eng-ex-card--level-4 .eng-ex-icon { background: var(--eng-level-4); }

/* Two-line titles break into even lines, not one long line and one word. */
.eng-ex-title,
.eng-topic-title,
.eng-lesson-title {
  text-wrap: balance;
}

/* Phones: smaller icon, "i" and action pill, so the title gets most of the
   row and usually fits on one line. */
@media (max-width: 600px) {
  .eng-ex-grid {
    gap: 12px;
  }

  .eng-ex-card {
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  .eng-ex-card .eng-ex-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .eng-ex-card .eng-ex-icon--level svg {
    width: 26px;
    height: 26px;
  }

  .eng-ex-card .eng-ex-icon:not(.eng-ex-icon--level) svg {
    width: 22px;
    height: 22px;
  }

  .eng-ex-title {
    font-size: 1.02rem;
  }

  .eng-ex-card .eng-info-btn {
    width: 32px;
    height: 32px;
  }

  .eng-ex-card .eng-info-btn svg {
    width: 16px;
    height: 16px;
  }

  .eng-ex-card .eng-item-action {
    padding: 4px 12px;
    font-size: 0.85rem;
  }
}

/* Narrow phones (360px): tighter still, so titles stay at two lines. */
@media (max-width: 400px) {
  .eng-ex-card {
    gap: 8px;
    padding: 10px;
  }

  .eng-ex-card .eng-ex-icon {
    width: 36px;
    height: 36px;
  }

  .eng-ex-card .eng-ex-icon--level svg {
    width: 24px;
    height: 24px;
  }

  .eng-ex-title {
    font-size: 0.98rem;
  }

  .eng-ex-card .eng-info-btn {
    width: 30px;
    height: 30px;
  }

  .eng-ex-card .eng-item-action {
    padding: 4px 10px;
    font-size: 0.8rem;
  }
}

.eng-ex-best {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--eng-right);
}

/* "Done" / "in progress" on the side of an exercise card (statusHtml).
   A soft tint of its icon's color, never plain white. */
.eng-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  padding-inline-start: 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #ffefd2;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.eng-status svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.eng-status--done { background: var(--eng-right-soft); }
.eng-status--done svg { color: var(--eng-right); }
.eng-status--progress svg { color: #f08c00; }

/* On an exercise card the title keeps the whole row, so the status is a tag
   on the card's top edge (taps go through it to the card), and the cards
   are spaced for it. */
.eng-ex-grid:has(.eng-status) {
  row-gap: 24px;
  padding-top: 10px;
}

.eng-ex-card .eng-status {
  position: absolute;
  top: -13px;
  inset-inline-start: 18px;
  z-index: 2;
  pointer-events: none;
  font-size: 0.82rem;
}

.eng-empty {
  margin: 0;
  padding: 18px 8px;
  text-align: center;
  font-weight: 800;
  color: var(--body);
}

/* ── Reading passages: level cards (topic page and reading library) ── */

body.page-english {
  --eng-level-1: #c9f5d9;
  --eng-level-2: #fff1a6;
  --eng-level-3: #ffd9b0;
  --eng-level-4: #ffc9de;
}

.eng-step-lead {
  margin: -4px 0 16px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--body);
}

.eng-step-lead--page {
  max-width: 40rem;
  margin: -10px auto 28px;
  text-align: center;
}

.eng-step-num--level-1 { background: var(--eng-level-1); }
.eng-step-num--level-2 { background: var(--eng-level-2); }
.eng-step-num--level-3 { background: var(--eng-level-3); }
.eng-step-num--level-4 { background: var(--eng-level-4); }

.eng-level-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.eng-level-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px 16px;
  border: var(--eng-card-border);
  border-radius: 18px;
  background: var(--eng-level-1);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--eng-card-shadow);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.eng-level-card--2 { background: var(--eng-level-2); }
.eng-level-card--3 { background: var(--eng-level-3); }
.eng-level-card--4 { background: var(--eng-level-4); }

.eng-level-card:hover:not(:has(.eng-info-btn:hover)),
.eng-level-card:has(.eng-card-link:focus-visible) {
  transform: translateY(-3px);
  box-shadow: var(--eng-card-shadow-hover);
}

.eng-level-head .eng-info-btn {
  width: 30px;
  height: 30px;
}

.eng-level-head .eng-info-btn svg {
  width: 16px;
  height: 16px;
}

.eng-level-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.eng-level-name {
  font-size: 1.2rem;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .eng-level-head {
    gap: 6px;
  }

  .eng-level-name {
    font-size: 1.05rem;
  }
}

/* Difficulty bars: as many filled bars as the level. */
.eng-level-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
}

.eng-level-bars i {
  width: 7px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--white);
}

.eng-level-bars i:nth-child(1) { height: 9px; }
.eng-level-bars i:nth-child(2) { height: 13px; }
.eng-level-bars i:nth-child(3) { height: 17px; }
.eng-level-bars i:nth-child(4) { height: 21px; }

.eng-level-bars i.is-on {
  background: var(--ink);
}

.eng-level-title {
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}

.eng-level-meta {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--body);
}

/* In the library the passage title leads and the level is already the
   section heading, so the level line is smaller. */
.eng-level-card.is-library .eng-level-name {
  font-size: 0.95rem;
}

.eng-level-card.is-library .eng-level-title {
  order: -1;
  font-size: 1.2rem;
}

/* ── Exercise screen: fixed to the viewport, no navbar / footer / page scroll ──
   html.eng-runner-open is set by showView() while an exercise is shown. */

html.eng-runner-open,
html.eng-runner-open body.page-english {
  height: 100%;
  overflow: hidden;
}

html.eng-runner-open body.page-english {
  height: 100dvh;
  min-height: 0;
}

html.eng-runner-open .navbar,
html.eng-runner-open .eng-auth-bar,
html.eng-runner-open .mobile-nav,
html.eng-runner-open .scroll-progress,
html.eng-runner-open .site-footer {
  display: none !important;
}

html.eng-runner-open body.page-english main,
html.eng-runner-open #engMain,
html.eng-runner-open #engMain > .container,
html.eng-runner-open .eng-exercise-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

html.eng-runner-open body.page-english .eng-section {
  padding-top: clamp(12px, 2.5dvh, 28px) !important;
  padding-bottom: clamp(12px, 2.5dvh, 28px);
}

html.eng-runner-open .eng-runner-head {
  flex-shrink: 0;
  gap: clamp(8px, 1.5dvh, 14px);
  margin-bottom: clamp(10px, 2dvh, 22px);
}

/* Last-resort guard for very short screens: the card never pushes past the
   viewport, so its buttons always stay reachable. */
html.eng-runner-open .eng-runner-card {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

html.eng-runner-open .eng-runner-card::-webkit-scrollbar {
  display: none;
}

/* ── Exercise runner (shared) ── */

.eng-exercise-view {
  max-width: 780px;
}

.eng-runner-card {
  padding: clamp(20px, 4vw, 40px);
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--shadow-candy);
}

/* Progress (under the title): a bar with one segment per question, filling
   from the start side — the bar alone says where the student is, so there
   is no text label ("Question 1 of 10" lives only in the aria-label). The
   bar is white so the teal segments read against the teal page. */
.eng-progress {
  align-self: center;
  width: min(100%, 420px);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.eng-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 3px;
  height: 14px;
  padding: 2px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  box-shadow: 1px 2px 0 0 var(--ink);
}

.eng-bar-seg {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e4e4;
}

.eng-bar-seg::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  background: var(--memteal);
}

.eng-bar-seg.is-done::after,
.eng-bar-seg.is-current::after {
  width: 100%;
}

.eng-bar-seg.is-current::after {
  opacity: 0.35;
}

.eng-bar-seg.is-new::after {
  animation: eng-bar-fill 0.5s ease-out both;
}

@keyframes eng-bar-fill {
  from { width: 0; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .eng-bar-seg.is-new::after {
    animation: none;
  }
}

/* On the page, above the question card: the instructions in a plain box on
   a soft fill. */
.eng-instructions {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink);
}

.eng-instr {
  position: relative;
  z-index: 6;
  width: min(100%, 640px);
  text-align: start;
}

.eng-exercise-view.is-reading .eng-instr {
  width: min(100%, 820px);
}

.eng-instr-main {
  padding: 8px 16px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: #fff6d1;
  box-shadow: 4px 5px 0 0 var(--ink);
}

.eng-instr-line {
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 420px) {
  .eng-instr-main {
    padding: 6px 12px;
  }
}

.eng-sentence {
  margin: 0 0 26px;
  padding: 22px 16px;
  border-radius: 18px;
  background: var(--eng-soft);
  text-align: center;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.45rem, 4.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.eng-sentence p {
  margin: 0;
}

.eng-sentence p.is-struck {
  text-decoration: line-through;
  text-decoration-color: var(--eng-wrong);
  text-decoration-thickness: 3px;
  opacity: 0.7;
}

/* Hebrew translation under the sentence — shown by the translation toggle. */
.eng-sentence .eng-translation {
  display: none;
  margin: 12px auto 0;
  padding-top: 10px;
  max-width: 34em;
  border-top: 2px dashed rgba(0, 0, 0, 0.2);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: max(1.05rem, 0.62em);
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.eng-runner-card.is-translated .eng-translation {
  display: block;
}

.eng-tr-blank {
  display: inline-block;
  width: 2.6em;
  margin: 0 0.2em;
  border-bottom: 3px solid currentColor;
}

.eng-context {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 14px;
  border: 2px dashed rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  background: var(--white);
  font-size: 0.7em;
  color: rgba(0, 0, 0, 0.75);
}

/* The Hebrew word next to how the English word sounds. */
.eng-context-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 10px;
}

.eng-say {
  border-style: solid;
  border-color: var(--mempurple);
  color: var(--ink);
  font-family: var(--font-sans), system-ui, sans-serif;
}

.eng-say-label {
  margin-inline-end: 6px;
  font-size: 0.75em;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

/* A vocabulary word in Hebrew letters ("פִישׁ"), shown by the "אב" switch
   in the settings menu. */
.eng-say-row,
.eng-say-opt {
  display: none;
}

.eng-runner-card.is-say .eng-say-row {
  display: flex;
  justify-content: center;
}

.eng-runner-card.is-say .eng-word-prompt {
  flex-wrap: wrap;
  row-gap: 8px;
}

.eng-word-prompt .eng-say-row {
  flex-basis: 100%;
}

.eng-say-line {
  display: inline-block;
  padding: 2px 16px;
  border-width: 2px;
  border-radius: 12px;
  background: var(--white);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.5;
}

.eng-runner-card.is-say .eng-say-opt {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.75);
}

.eng-picture-he-row {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
}

.eng-picture-he-row .eng-say-row {
  flex-basis: 100%;
}

.eng-picture-box--small .eng-picture-he-row .eng-say-row {
  flex-basis: auto;
}

.eng-fix {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 4px 14px;
  border-radius: 12px;
  background: var(--eng-right-soft);
  color: #11643a;
  font-size: 0.8em;
  animation: eng-pop 0.28s ease;
}

.eng-fix svg {
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
}

.eng-blank {
  display: inline-block;
  min-width: 3.4em;
  padding: 0 0.25em;
  border-bottom: 4px solid var(--ink);
  line-height: 1.25;
  text-align: center;
}

.eng-blank.is-letter {
  min-width: 1.2em;
  padding: 0 0.1em;
}

.eng-blank.is-right,
.eng-blank.is-wrong {
  border-radius: 10px 10px 0 0;
  animation: eng-pop 0.28s ease;
}

.eng-blank.is-right {
  background: var(--eng-right-soft);
  border-bottom-color: var(--eng-right);
}

.eng-blank.is-wrong {
  background: var(--eng-wrong-soft);
  border-bottom-color: var(--eng-wrong);
}

.eng-hint {
  font-size: 0.72em;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
}

@keyframes eng-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes eng-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.eng-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.eng-option {
  position: relative;
  min-width: 110px;
  padding: 14px 22px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 4px 5px 0 0 var(--ink);
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.eng-option:hover:not(:disabled),
.eng-tf-btn:hover:not(:disabled),
.eng-pic-option:hover:not(:disabled) {
  background: var(--memyellow);
  transform: translate(-1px, -2px);
}

.eng-option:active:not(:disabled),
.eng-tf-btn:active:not(:disabled),
.eng-pic-option:active:not(:disabled) {
  transform: translate(3px, 4px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

.eng-option:disabled,
.eng-tf-btn:disabled,
.eng-pic-option:disabled {
  cursor: default;
  opacity: 0.5;
}

.eng-option.is-right,
.eng-option.is-wrong,
.eng-tf-btn.is-right,
.eng-tf-btn.is-wrong,
.eng-pic-option.is-right,
.eng-pic-option.is-wrong {
  opacity: 1;
}

.eng-option.is-right,
.eng-tf-btn.is-right,
.eng-pic-option.is-right {
  background: var(--eng-right-soft);
  border-color: var(--eng-right);
  box-shadow: 4px 5px 0 0 var(--eng-right);
}

.eng-option.is-wrong,
.eng-tf-btn.is-wrong,
.eng-pic-option.is-wrong {
  background: var(--eng-wrong-soft);
  border-color: var(--eng-wrong);
  box-shadow: 4px 5px 0 0 var(--eng-wrong);
}

.eng-option-key {
  position: absolute;
  top: 4px;
  left: 7px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 900;
  opacity: 0.45;
}

.eng-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 64px;
  margin-top: 20px;
}

.eng-feedback-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
  font-weight: 900;
}

.eng-feedback-msg > svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.eng-feedback-msg.is-right { color: var(--eng-right); }
.eng-feedback-msg.is-wrong { color: var(--eng-wrong); }

.eng-next {
  padding: 10px 28px;
  font-size: 1.05rem;
}

.eng-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.eng-check {
  padding: 11px 34px;
  font-size: 1.1rem;
}

.eng-check:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none !important;
}

.eng-speak {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--memyellow);
  color: var(--ink);
  vertical-align: middle;
  cursor: pointer;
}

.eng-speak svg {
  width: 20px;
  height: 20px;
}

.eng-speak--inline {
  width: 30px;
  height: 30px;
  border-width: 2px;
}

.eng-speak--inline svg {
  width: 15px;
  height: 15px;
}

/* ── True / false ── */

.eng-options--tf {
  gap: 16px;
}

.eng-tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 170px;
  padding: 14px 26px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 4px 5px 0 0 var(--ink);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.eng-tf-btn svg {
  width: 24px;
  height: 24px;
}

.eng-tf-btn--true svg { color: var(--eng-right); }
.eng-tf-btn--false svg { color: var(--eng-wrong); }

/* ── Typing ── */

/* The correction sits on the same line as the crossed-out input, so the
   sentence doesn't break into extra lines. */
.eng-input-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  vertical-align: baseline;
}

.eng-input {
  width: 4.4em;
  padding: 0 0.2em;
  border: none;
  border-bottom: 4px solid var(--ink);
  border-radius: 10px 10px 0 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  /* 16px+ keeps iOS from zooming into the field */
  font-size: max(16px, 1em);
  line-height: 1.3;
  text-align: center;
  outline: none;
}

.eng-input:focus {
  background: #fffbe0;
  border-bottom-color: #e0a800;
}

.eng-input.is-right {
  background: var(--eng-right-soft);
  border-bottom-color: var(--eng-right);
}

.eng-input.is-wrong {
  background: var(--eng-wrong-soft);
  border-bottom-color: var(--eng-wrong);
  text-decoration: line-through;
}

.eng-input.is-shake {
  animation: eng-shake 0.4s ease;
}

.eng-input::placeholder {
  font-size: 0.55em;
  color: rgba(0, 0, 0, 0.4);
}

.eng-correction {
  display: inline-block;
  padding: 0 0.25em;
  border-bottom: 4px solid var(--eng-right);
  border-radius: 10px 10px 0 0;
  background: var(--eng-right-soft);
  color: var(--ink);
  line-height: 1.3;
  animation: eng-pop 0.28s ease;
}

.eng-input-wrap #engCorrection:empty {
  display: none;
}

.eng-write-solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 auto 22px;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
}

.eng-write-solo .eng-input {
  width: min(320px, 100%);
}

/* ── Sentence order ── */

.eng-order-he {
  margin: 0 0 14px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
}

.eng-order-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 74px;
  margin-bottom: 18px;
  padding: 12px;
  border: 3px dashed rgba(0, 0, 0, 0.35);
  border-radius: 18px;
  background: var(--eng-soft);
}

.eng-order-line.is-right {
  border-style: solid;
  border-color: var(--eng-right);
  background: var(--eng-right-soft);
}

.eng-order-line.is-wrong {
  border-style: solid;
  border-color: var(--eng-wrong);
  background: var(--eng-wrong-soft);
}

.eng-order-placeholder {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.45);
}

.eng-order-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin-bottom: 18px;
}

.eng-chip {
  padding: 10px 16px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.eng-chip:hover:not(:disabled) {
  background: var(--memyellow);
  transform: translateY(-2px);
}

.eng-chip.is-placed {
  background: var(--memteal);
}

/* A used chip keeps its slot in the bank so the other chips don't jump. */
.eng-chip.is-used {
  visibility: hidden;
}

.eng-chip:disabled {
  cursor: default;
}

/* ── Pictures & listening ── */

.eng-picture-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto 22px;
  padding: 16px;
  width: fit-content;
  border-radius: 22px;
  background: var(--eng-soft);
}

.eng-picture-img {
  width: clamp(130px, 30vw, 190px);
  height: clamp(130px, 30vw, 190px);
  object-fit: contain;
  user-select: none;
}

.eng-picture-he {
  font-size: 1.2rem;
  font-weight: 900;
}

.eng-word-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 22px;
}

.eng-word-big {
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 700;
  color: var(--ink);
}

/* The word itself is the speaker: tapping it says the word. */
.eng-word-tap {
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.12s ease;
}

.eng-word-tap:hover {
  background: rgba(0, 0, 0, 0.06);
}

.eng-word-tap:active {
  transform: scale(0.97);
}

.eng-pic-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.eng-pic-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 8px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 4px 5px 0 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.eng-pic-option img {
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  user-select: none;
}

/* The word under each picture would give the answer away — it appears only
   once the question is answered. */
.eng-pic-label {
  min-height: 1.4em;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  visibility: hidden;
}

.eng-pic-option.is-revealed .eng-pic-label {
  visibility: visible;
}

.eng-listen-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
}

.eng-listen-btn {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  padding: 0;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--memyellow);
  color: var(--ink);
  box-shadow: var(--shadow-sticker);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.eng-listen-btn:hover {
  transform: scale(1.06);
}

.eng-listen-btn:active {
  transform: scale(0.95);
}

.eng-listen-btn svg {
  width: 46px;
  height: 46px;
}

.eng-listen-label {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-listen-fallback {
  margin: 0;
  font-weight: 800;
  color: var(--body);
}

/* ── Matching ── */

.eng-match {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 4vw, 40px);
}

.eng-match-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eng-match-item {
  min-height: 56px;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, opacity 0.2s ease;
}

.eng-match-item:hover:not(:disabled) {
  background: #fffbe0;
}

.eng-match-item.is-selected {
  background: var(--memyellow);
  transform: scale(1.03);
}

.eng-match-item.is-matched {
  background: var(--eng-right-soft);
  border-color: var(--eng-right);
  box-shadow: 3px 4px 0 0 var(--eng-right);
  cursor: default;
  opacity: 0.75;
}

.eng-match-item.is-wrong {
  background: var(--eng-wrong-soft);
  border-color: var(--eng-wrong);
  animation: eng-shake 0.4s ease;
}

.eng-match-item--img {
  display: grid;
  place-items: center;
  padding: 6px;
}

.eng-match-item--img img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

/* ── Results ── */

.eng-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.eng-stars {
  display: flex;
  gap: 10px;
}

.eng-star svg {
  width: clamp(44px, 10vw, 60px);
  height: clamp(44px, 10vw, 60px);
  fill: #ececec;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.eng-star.is-on svg {
  fill: var(--memyellow);
  animation: eng-pop 0.4s ease both;
}

.eng-star.is-on:nth-child(2) svg { animation-delay: 0.12s; }
.eng-star.is-on:nth-child(3) svg { animation-delay: 0.24s; }

.eng-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 150px;
  margin-top: 4px;
  padding: 10px 30px 12px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--memyellow);
  box-shadow: var(--shadow-sticker);
  color: var(--ink);
}

.eng-grade-label {
  font-size: 1.05rem;
  font-weight: 900;
}

.eng-score.font-cartoon {
  margin: 0;
  font-size: clamp(3rem, 10vw, 4.4rem);
  line-height: 1.05;
  color: var(--ink);
}

.eng-results-count {
  margin: 4px 0 0;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-results-msg {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--body);
}

.eng-results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}

.eng-results-actions .btn {
  padding: 12px 26px;
  font-size: 1.05rem;
}

.eng-btn-secondary {
  background: var(--white);
  color: var(--ink);
}

.eng-results-actions a.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* "Create new exercises": new items written by the server. */
.eng-btn-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--memyellow);
  color: var(--ink);
}

.eng-btn-new svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

.eng-results-actions .eng-btn-new:disabled {
  opacity: 1;
  cursor: progress;
}

.eng-spin {
  animation: eng-spin 0.9s linear infinite;
}

@keyframes eng-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .eng-spin { animation-duration: 2.5s; }
}

/* A picture word inside a new sentence: a smaller picture over the
   sentence, and the word itself highlighted where it is shown. */
.eng-picture-box--small .eng-picture-img {
  width: clamp(90px, 22vw, 140px);
  height: clamp(90px, 22vw, 140px);
}

.eng-sentence--word {
  font-size: clamp(1.3rem, 4vw, 1.9rem);
}

.eng-blank.is-word {
  border-radius: 10px 10px 0 0;
  background: var(--memyellow);
}

.eng-speak--sentence {
  margin-inline-start: 10px;
}

.eng-word-big--sentence {
  font-size: clamp(1.4rem, 4.4vw, 2rem);
}

#engListenLabel[dir="auto"] {
  max-width: 100%;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  text-align: center;
}

/* A device that opened a student's personal link: whose file the practice
   is saved to. On the full-screen exercise screen it is a slim strip on top
   with just the name, the points and the link to the student's progress. */
.eng-student-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  max-width: 960px;
  margin: 0 auto 24px;
  padding: 10px 16px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.eng-student-bar-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 900;
}

.eng-student-bar-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--electric);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.eng-student-bar-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.eng-student-bar-text {
  font-weight: 700;
  color: var(--muted);
}

html.eng-runner-open .eng-student-bar {
  flex-shrink: 0;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto clamp(6px, 1.4dvh, 12px);
  padding: 4px 6px 4px 10px;
  border-width: 2px;
  border-radius: 999px;
  font-size: 0.92rem;
}

html.eng-runner-open .eng-student-bar-text,
html.eng-runner-open .eng-student-bar-out {
  display: none;
}

html.eng-runner-open .eng-student-bar-me {
  flex: 1 1 auto;
  font-size: 1rem;
}

html.eng-runner-open .eng-student-bar-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.92rem;
}

html.eng-runner-open .eng-student-bar-points,
html.eng-runner-open .eng-student-bar-link {
  flex-shrink: 0;
  padding: 3px 12px;
  white-space: nowrap;
}

html.eng-runner-open .eng-student-bar-points svg {
  width: 17px;
  height: 17px;
}

/* Narrow phones: the name keeps its room; the points show on the results screen. */
@media (max-width: 420px) {
  html.eng-runner-open .eng-student-bar-points {
    display: none;
  }
}

.eng-student-bar-link {
  padding: 6px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--memyellow);
  color: var(--ink);
  text-decoration: none;
}

.eng-student-bar-link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 3px 0 0 var(--ink);
}

.eng-student-bar-out {
  padding: 4px 6px;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
}

.eng-mistakes {
  width: 100%;
  margin-top: 18px;
  padding: 18px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--eng-soft);
}

.eng-mistakes h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-mistakes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.12rem;
  line-height: 1.7;
}

.eng-mistakes .eng-blank {
  min-width: 0;
  border-bottom-width: 3px;
  animation: none;
}

.eng-context-inline,
.eng-review-he {
  font-size: 0.85em;
  color: rgba(0, 0, 0, 0.6);
}

.eng-review-tag {
  padding: 0 8px;
  border-radius: 8px;
  background: var(--eng-right-soft);
  color: #11643a;
  font-size: 0.85em;
}

.eng-review-wrong {
  text-decoration-color: var(--eng-wrong);
  color: rgba(0, 0, 0, 0.55);
}

.eng-review-line {
  display: block;
}

.eng-review-answer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 800;
  color: #11643a;
}

.eng-review-answer svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.eng-review-word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eng-review-word img {
  width: 36px;
  height: 36px;
}

.eng-copy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 10px;
  border: none;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.eng-copy-link svg {
  width: 18px;
  height: 18px;
}

/* ── Exercise help: the "i" button and its dialog ── */

.eng-info-btn {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: 2px 3px 0 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.eng-info-btn svg {
  width: 18px;
  height: 18px;
}

.eng-info-btn:hover,
.eng-info-btn:focus-visible {
  background: var(--memyellow);
  transform: translateY(-1px);
}

.eng-info-btn:active {
  transform: translate(1px, 2px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

/* Exercise screen: the title, and a review question's source pill beside it
   (under it when there is no room). */
.eng-runner-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  max-width: 100%;
}

.eng-runner-title-row .eng-runner-title {
  min-width: 0;
}

/* A reading's or exam's level, on its own line under the title. */
.eng-runner-sub {
  flex-basis: 100%;
  margin: -2px 0 0;
  font-size: clamp(0.85rem, 2.2dvh, 1rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
}

/* position/z-index need !important: styles.css forces position:relative on
   every direct child of <body> for the ambient background layering. */
.eng-help {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2100 !important;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px max(12px, env(safe-area-inset-bottom, 0px));
}

.eng-help.hidden {
  display: none !important;
}

body.eng-help-open {
  overflow: hidden;
}

.eng-help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* Sized to fit the screen; the inner scroll is only a guard for very short
   screens. */
.eng-help-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(540px, 100%);
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 18px 20px 20px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--eng-card);
  color: var(--ink);
  box-shadow: var(--shadow-candy);
  animation: eng-pop 0.22s ease;
}

.eng-help-card::-webkit-scrollbar {
  display: none;
}

.eng-help-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eng-help-heading {
  flex: 1;
  min-width: 0;
}

/* Level, size and best score — what the topic page cards leave out. Each
   fact is a small tag (factsHtml), so a narrow screen wraps between them. */
.eng-help-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--body);
}

.eng-help-fact {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--eng-card-hover);
  color: var(--ink);
  white-space: nowrap;
}

.eng-help-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 8px 0 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--body);
}

/* Inline so the teal marker (.lp-key) hugs the words on every line. */
.eng-help .eng-help-title {
  display: inline;
  margin: 0;
  padding: 0 0.18em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--memteal) 45%, #fff);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.35;
  color: #000;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.eng-help-close {
  flex-shrink: 0;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.eng-help-close:hover,
.eng-help-close:focus-visible {
  background: var(--memyellow);
}

.eng-help-close svg {
  width: 18px;
  height: 18px;
}

.eng-help-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Bold with the lesson slides' teal marker (.lp-key). */
.eng-help .eng-help-label {
  align-self: flex-start;
  margin: 0;
  padding: 0 0.18em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--memteal) 45%, #fff);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: #000;
}

.eng-help-what {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.eng-help-tip {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--body);
}

/* An English run inside Hebrew text wraps as one piece. */
.eng-help-ltr {
  display: inline-block;
}

/* The worked example: the question with its answer already in place. */
.eng-help-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 18px;
  background: var(--eng-soft);
  text-align: center;
}

.eng-help-example p {
  margin: 0;
}

.eng-help-sentence,
.eng-help-q,
.eng-help-word,
.eng-help-passage,
.eng-help-opt,
.eng-help-chip,
.eng-help-heard,
.eng-help-fix b {
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
}

.eng-help-sentence {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
}

.eng-help-fill {
  display: inline-block;
  min-width: 2em;
  padding: 0 0.3em;
  border-bottom: 4px solid var(--eng-right);
  border-radius: 6px 6px 0 0;
  background: var(--eng-right-soft);
  line-height: 1.3;
}

.eng-help-fill.is-letter,
.eng-help-typed.is-letter {
  min-width: 0;
  margin: 0;
  padding: 0 0.12em;
}

.eng-help-typed {
  display: inline-block;
  min-width: 3em;
  margin: 0 0.15em;
  padding: 0 0.4em;
  border: 3px solid var(--eng-right);
  border-radius: 10px;
  background: var(--white);
  line-height: 1.35;
}

.eng-help-hint {
  font-size: 0.75em;
  color: var(--body);
}

.eng-help-context {
  padding: 2px 14px;
  border: 2px dashed rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  background: var(--white);
  font-size: 1.05rem;
  font-weight: 800;
}

.eng-help-say {
  border-style: solid;
  border-color: var(--mempurple);
}

.eng-help-tr {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--body);
}

.eng-help-tr--prompt {
  color: var(--ink);
}

.eng-help-options,
.eng-help-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.eng-help-opt,
.eng-help-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
}

.eng-help-opt.is-right,
.eng-help-chip.is-right {
  border-color: var(--eng-right);
  background: var(--eng-right-soft);
}

.eng-help-opt svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--eng-right);
}

.eng-help-arrow {
  display: grid;
  color: var(--ink);
}

.eng-help-arrow svg {
  width: 26px;
  height: 26px;
}

.eng-help-tf {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Sentence and verdict side by side; the corrected sentence under them. */
.eng-help-tf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--white);
}

.eng-help-tf-row .eng-help-sentence {
  font-size: 1.25rem;
}

.eng-help-tf-row .eng-help-fix {
  flex-basis: 100%;
}

.eng-help-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 14px;
  border: 3px solid var(--eng-right);
  border-radius: 999px;
  background: var(--eng-right-soft);
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-help-badge.is-false {
  border-color: var(--eng-wrong);
  background: var(--eng-wrong-soft);
}

.eng-help-badge svg {
  width: 16px;
  height: 16px;
}

/* Label and English sentence as separate pieces, so a wrapped line never
   mixes their reading directions. */
.eng-help-fix {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.eng-help-fix b {
  font-weight: 700;
}

.eng-help-picture {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 14px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--white);
  font-size: 1.05rem;
  font-weight: 900;
}

.eng-help-picture img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.eng-help-pics {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.eng-help-pic {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  padding: 6px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
}

.eng-help-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eng-help-pic.is-right {
  border-color: var(--eng-right);
  background: var(--eng-right-soft);
}

.eng-help-pic--small {
  width: 54px;
  height: 54px;
  padding: 4px;
}

.eng-help-pic-check {
  position: absolute;
  top: -10px;
  inset-inline-end: -10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--eng-right);
  color: var(--white);
}

.eng-help-pic-check svg {
  width: 14px;
  height: 14px;
}

.eng-help-word {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
}

.eng-help-listen {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eng-help-speak {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--memyellow);
  color: var(--ink);
  box-shadow: 2px 3px 0 0 var(--ink);
  cursor: pointer;
}

.eng-help-speak:active {
  transform: translate(1px, 2px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

.eng-help-speak svg {
  width: 28px;
  height: 28px;
}

.eng-help-heard {
  font-size: 1.3rem;
  font-weight: 700;
}

.eng-help-pairs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eng-help-pair {
  display: flex;
  align-items: center;
  justify-content: center;
}

.eng-help-pair .eng-help-chip {
  justify-content: center;
  min-width: 3.2em;
}

.eng-help-pair-line {
  width: 40px;
  border-top: 3px dashed var(--eng-right);
}

.eng-help-step {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: start;
  color: var(--ink);
}

.eng-help-step-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--memyellow);
  font-size: 0.9rem;
  font-weight: 900;
}

.eng-help-passage {
  align-self: stretch;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--white);
  font-size: 1.1rem;
  line-height: 1.75;
  text-align: left;
  color: var(--ink);
}

.eng-help-mark {
  padding: 0 3px;
  border-radius: 4px;
  background: #ffe14d;
  box-shadow: inset 0 -3px 0 #e0b400;
  color: inherit;
}

.eng-help-q {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.eng-help-actions {
  display: flex;
  justify-content: center;
}

.eng-help-actions .eng-help-go {
  min-width: 12rem;
  text-decoration: none;
}

@media (max-width: 520px) {
  .eng-help {
    padding-inline: 12px;
  }

  .eng-help-card {
    gap: 10px;
    padding: 14px 14px 16px;
  }

  .eng-help .eng-help-title {
    font-size: 1.18rem;
  }

  .eng-help-block {
    gap: 6px;
  }

  .eng-help-what {
    font-size: 1.06rem;
    line-height: 1.45;
  }

  .eng-help-tip {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .eng-help-example {
    gap: 10px;
    padding: 12px 10px;
  }

  .eng-help-sentence {
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .eng-help-tf-row .eng-help-sentence {
    font-size: 1.12rem;
  }

  .eng-help-opt,
  .eng-help-chip {
    padding: 3px 12px;
    font-size: 1.05rem;
  }

  .eng-help-pic {
    width: 68px;
    height: 68px;
  }

  .eng-help-picture img {
    width: 76px;
    height: 76px;
  }

  .eng-help-passage {
    font-size: 1rem;
    line-height: 1.6;
  }

  .eng-help-step,
  .eng-help-q {
    font-size: 0.98rem;
  }
}

/* Short screens: tighter still, so the dialog fits without scrolling. */
@media (max-height: 700px) {
  .eng-help-card {
    gap: 8px;
    padding-block: 12px 14px;
  }

  .eng-help .eng-help-label {
    padding: 0 12px;
    font-size: 0.9rem;
  }

  .eng-help-block {
    gap: 4px;
  }

  .eng-help-example {
    gap: 8px;
    padding: 10px;
  }

  .eng-help-arrow svg {
    width: 20px;
    height: 20px;
  }

  .eng-help-pairs {
    gap: 6px;
  }

  .eng-help-passage {
    padding: 6px 10px;
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eng-help-card {
    animation: none;
  }
}

/* ── Slide viewer ──
   position/z-index need !important: styles.css forces position:relative on
   every direct child of <body> for the ambient background layering. */

.eng-slide-viewer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 28px);
}

.eng-slide-viewer.hidden {
  display: none !important;
}

body.eng-viewer-open {
  overflow: hidden;
}

.eng-slide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.eng-slide-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(1180px, 100%);
  max-height: 100%;
  padding: 12px;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--shadow-candy);
}

.eng-slide-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
}

.eng-slide-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-slide-counter {
  flex-shrink: 0;
  padding: 3px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--memyellow);
  font-size: 0.9rem;
  font-weight: 900;
}

.eng-slide-actions {
  display: flex;
  gap: 8px;
}

.eng-slide-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.eng-slide-icon-btn:hover {
  background: var(--memyellow);
}

.eng-slide-icon-btn svg {
  width: 18px;
  height: 18px;
}

.eng-slide-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 0;
}

.eng-slide-frame {
  display: grid;
  place-items: center;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f4f4;
}

.eng-slide-img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 150px);
  object-fit: contain;
}

.eng-slide-nav {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--memyellow);
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
  cursor: pointer;
}

.eng-slide-nav svg {
  width: 24px;
  height: 24px;
}

[dir="rtl"] .eng-slide-nav svg {
  transform: scaleX(-1);
}

.eng-slide-nav:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.eng-slide-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.eng-slide-shell:fullscreen .eng-slide-stage {
  flex: 1;
}

.eng-slide-shell:fullscreen .eng-slide-frame {
  height: 100%;
}

.eng-slide-shell:fullscreen .eng-slide-img {
  max-height: calc(100vh - 80px);
}

/* ── Reading runner: while marking, the passage on one side and the task on
   the other; otherwise the passage, then the questions, one at a time (see
   .eng-read--paged). Each box scrolls on its own if it has to, the page
   never does. ── */

.eng-exercise-view.is-reading {
  max-width: 1180px;
}

.eng-read {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  min-height: 0;
}

.eng-read-side {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.eng-read-passage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(14px, 2.4dvh, 26px) clamp(16px, 2.2vw, 30px);
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: #fffdf3;
  scrollbar-width: thin;
}

.eng-read-title {
  margin: 0 0 clamp(8px, 1.4dvh, 14px);
  text-align: center;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.25rem, 3dvh, 1.65rem);
  font-weight: 900;
  color: var(--ink);
}

.eng-read-text {
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.08rem, 2.5dvh, 1.3rem);
  font-weight: 600;
  line-height: 1.85;
  color: var(--ink);
}

.eng-read-text p {
  margin: 0 0 0.7em;
}

.eng-read-text p:last-child {
  margin-bottom: 0;
}

/* Every word is clickable while marking (role="button" spans); it still
   reads as plain text. */
.eng-tok {
  padding: 0.05em 0.1em;
  border-radius: 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.eng-tok[tabindex] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.eng-read-text.is-marking .eng-tok[tabindex]:hover:not(.is-found, .is-miss, .is-revealed) {
  background: #e3f1ff;
}

.eng-tok[tabindex]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 1px;
}

.eng-tok.is-found {
  background: #ffe14d;
  box-shadow: inset 0 -3px 0 #e0b400;
  animation: eng-pop 0.24s ease;
}

.eng-tok.is-revealed {
  background: #ffc48a;
  box-shadow: inset 0 -3px 0 #e07b00;
}

.eng-tok.is-miss {
  background: var(--eng-wrong-soft);
  text-decoration: line-through;
  text-decoration-color: var(--eng-wrong);
  text-decoration-thickness: 2px;
  animation: eng-shake 0.3s ease;
}

/* While answering questions the marked words stay, a little softer. */
.eng-read.is-questions .eng-tok.is-found,
.eng-read.is-questions .eng-tok.is-revealed {
  background: #fff3a8;
  box-shadow: none;
  animation: none;
}

/* "Translate words": a click on a word opens its meaning in a bubble. */
.eng-read-text.is-dict .eng-tok[tabindex]:hover:not(.is-looked) {
  background: #e3f1ff;
}

.eng-read .eng-tok.is-looked {
  background: #bfe3ff;
  box-shadow: inset 0 -3px 0 #3b8fd6;
}

.eng-dict-pop {
  position: absolute;
  z-index: 3;
  width: max-content;
  min-width: 140px;
  max-width: min(300px, calc(100% - 12px));
  padding: 8px 12px 10px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 3px 4px 0 0 var(--ink);
  color: var(--ink);
  animation: eng-pop 0.2s ease;
}

.eng-dict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
}

.eng-dict-speak {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-width: 2px;
}

.eng-dict-speak svg {
  width: 16px;
  height: 16px;
}

.eng-dict-he {
  margin: 6px 0 0;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: right;
}

.eng-dict-he b {
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  color: var(--body);
}

.eng-dict-base,
.eng-dict-none {
  display: block;
  margin: 2px 0 0;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--body);
}

.eng-dict-none {
  margin-top: 6px;
  font-size: 0.98rem;
}

/* Marking with "Translate words" on: a click translates instead of marking. */
.eng-read-dict-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 6px 12px;
  border: 2px dashed var(--ink);
  border-radius: 12px;
  background: #e3f1ff;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
}

.eng-read-dict-note svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* Phones: the passage box is short, so the bubble is smaller. */
@media (max-width: 820px) {
  .eng-dict-pop {
    min-width: 120px;
    max-width: min(250px, calc(100% - 12px));
    padding: 6px 10px 8px;
    border-width: 2px;
    box-shadow: 2px 3px 0 0 var(--ink);
  }

  .eng-dict-head {
    font-size: 1rem;
  }

  .eng-dict-speak {
    width: 28px;
    height: 28px;
  }

  .eng-dict-he {
    margin-top: 3px;
    font-size: 1rem;
  }

  .eng-read-dict-note {
    margin-bottom: 6px;
    padding: 4px 10px;
    font-size: 0.85rem;
  }
}

/* Reading first, then the questions (.eng-read--paged): the passage and the
   question take turns filling the card. "To the questions" / "Back to the
   question" sit under the passage, "Back to the text" over the question. */
.eng-exercise-view.is-reading:has(.eng-read--paged) {
  max-width: 920px;
}

.eng-read--paged {
  grid-template-columns: minmax(0, 1fr);
}

.eng-read--paged.is-read .eng-read-task,
.eng-read--paged.is-mark .eng-read-task,
.eng-read--paged.is-questions:not(.is-text-open) .eng-read-side,
.eng-read--paged.is-text-open .eng-read-task {
  display: none;
}

.eng-read-go {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding-top: clamp(10px, 1.8dvh, 16px);
}

.eng-read-q-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: clamp(8px, 1.4dvh, 12px);
}

.eng-read-q-head .eng-read-step {
  margin: 0;
}

.eng-read-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  padding: 7px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fffdf3;
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 900;
  cursor: pointer;
}

.eng-read-back svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.eng-read-back:hover {
  background: var(--memyellow);
}

.eng-read-back:active {
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

.eng-read-glossary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: clamp(10px, 2dvh, 16px) 0 0;
  padding-top: 10px;
  border-top: 2px dashed rgba(0, 0, 0, 0.25);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}

.eng-read-glossary-title {
  font-weight: 900;
}

.eng-read-task {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 2px 4px 4px;
  scrollbar-width: thin;
}

.eng-read-step {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--body);
}

/* Marking: the instruction above the card, with what to look for under it
   as chips (one per phrase, each kept on one line). */
.eng-read-instructions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.eng-read-instructions .eng-read-chips {
  justify-content: flex-start;
}

.eng-read-instr {
  margin: 0;
  line-height: 1.45;
}

.eng-read-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eng-read-chips li {
  padding: 2px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ink);
}

.eng-read-instructions .eng-read-dict-note {
  margin: 0;
  text-align: start;
}

/* Reading and marking: the passage box is the only box on the screen; the
   card around it steps back (it comes back for the questions). */
html.eng-runner-open .eng-runner-card:has(> .eng-read--paged:is(.is-read, .is-mark, .is-text-open)) {
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.eng-read--paged:is(.is-read, .is-mark, .is-text-open) .eng-read-passage {
  border-radius: 24px;
  box-shadow: var(--shadow-candy);
}

/* Under the passage, small and to the side: the count (or, at the end, the
   closing message) and the one button. */
.eng-read-mark-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: clamp(14px, 2.2dvh, 20px);
}

.eng-read-count {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
}

.eng-read-count-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.eng-read-found b {
  font-size: 1.05rem;
  font-weight: 900;
}

.eng-read-misses {
  font-size: 0.85rem;
  color: var(--eng-wrong);
}

.eng-read-meter {
  display: block;
  flex: 0 0 72px;
  height: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  overflow: hidden;
}

.eng-read-meter i {
  display: block;
  width: 0;
  height: 100%;
  background: #ffe14d;
  transition: width 0.25s ease;
}

.eng-read-count .eng-feedback-msg {
  gap: 6px;
  font-size: 0.95rem;
  line-height: 1.3;
}

.eng-read-count .eng-feedback-msg > svg {
  width: 18px;
  height: 18px;
}

.eng-read-mark-foot .eng-read-reveal {
  flex-shrink: 0;
  padding: 4px 12px;
  border-width: 2px;
  box-shadow: 2px 2px 0 0 var(--ink);
  font-size: 0.85rem;
}

.eng-read-mark-foot .eng-check {
  flex-shrink: 0;
  padding: 6px 20px;
  font-size: 0.95rem;
}

.eng-read-reveal {
  padding: 9px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 900;
  cursor: pointer;
}

.eng-read-reveal:hover {
  background: var(--memyellow);
}

.eng-read-reveal:active {
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

.eng-feedback-msg.is-shown {
  color: #a05400;
}

.eng-read-feedback {
  justify-content: flex-start;
  min-height: 0;
  margin-top: 14px;
  gap: 12px;
}

.eng-read-q {
  margin: 0 0 8px;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.12rem, 2.6dvh, 1.4rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}

/* "Hebrew questions": a question with a Hebrew version holds both languages
   (.has-he), and the card shows one of them. */
.eng-q-he {
  display: none;
}

.eng-runner-card.is-he-q .has-he .eng-q-en {
  display: none;
}

.eng-runner-card.is-he-q .has-he .eng-q-he {
  display: inline;
}

.eng-read-q.has-he,
.eng-read-option.has-he {
  direction: ltr;
  text-align: left;
}

.eng-runner-card.is-he-q .eng-read-q.has-he,
.eng-runner-card.is-he-q .eng-read-option.has-he {
  direction: rtl;
  text-align: right;
}

.eng-read-options {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.2dvh, 10px);
  margin-top: 4px;
}

.eng-read-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: clamp(7px, 1.3dvh, 11px) 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
  text-align: left;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1rem, 2.3dvh, 1.15rem);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.eng-read-option:hover:not(:disabled) {
  background: var(--memyellow);
  transform: translate(-1px, -2px);
}

.eng-read-option:active:not(:disabled) {
  transform: translate(2px, 3px);
  box-shadow: 1px 1px 0 0 var(--ink);
}

.eng-read-option:disabled {
  cursor: default;
  opacity: 0.5;
}

.eng-read-option.is-right,
.eng-read-option.is-wrong {
  opacity: 1;
}

.eng-read-option.is-right {
  background: var(--eng-right-soft);
  border-color: var(--eng-right);
  box-shadow: 3px 4px 0 0 var(--eng-right);
}

.eng-read-option.is-wrong {
  background: var(--eng-wrong-soft);
  border-color: var(--eng-wrong);
  box-shadow: 3px 4px 0 0 var(--eng-wrong);
}

.eng-read-option-key {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--eng-soft);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 900;
}

.eng-read-task .eng-options--tf {
  justify-content: flex-start;
  margin-top: 4px;
}

.eng-read-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--body);
}

.eng-read-lang svg {
  width: 18px;
  height: 18px;
}

.eng-read-input {
  width: 100%;
  min-height: 3.2em;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.45;
  resize: none;
}

.eng-read-input:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 201, 183, 0.35);
}

.eng-read-input.is-right {
  border-color: var(--eng-right);
  background: var(--eng-right-soft);
}

.eng-read-input.is-wrong {
  border-color: var(--eng-wrong);
  background: var(--eng-wrong-soft);
}

.eng-read-input.is-shake {
  animation: eng-shake 0.35s ease;
}

.eng-read-task .eng-actions {
  justify-content: flex-start;
  margin-top: 10px;
}

.eng-read-model {
  margin: 10px 0 0;
  padding: 8px 12px;
  border: 2px dashed var(--ink);
  border-radius: 12px;
  background: #eef6ff;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.eng-read-model-label {
  font-weight: 900;
}

/* ── Phones ── */

@media (max-width: 768px) {
  .eng-topic-grid {
    gap: 14px;
  }

  .eng-level-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .eng-ex-grid {
    grid-template-columns: 1fr;
  }

  .eng-lesson-card {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    text-align: center;
  }

  .eng-lesson-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }

  .eng-lesson-icon svg {
    width: 30px;
    height: 30px;
  }

  .eng-lesson-title {
    font-size: 1.2rem;
  }

  .eng-lesson-actions {
    align-self: stretch;
  }

  .eng-step {
    margin-bottom: 24px;
  }

  .eng-topic-head {
    gap: 8px;
    margin-bottom: 22px;
  }

  body.page-english .eng-section {
    padding-top: 20px !important;
    padding-bottom: 40px;
  }

  .eng-lesson-card .eng-lesson-open {
    flex: 1;
  }

  .eng-option {
    min-width: calc(33.333% - 8px);
    padding: 12px 10px;
    font-size: 1.15rem;
  }

  .eng-option-key {
    display: none;
  }

  .eng-options {
    gap: 8px;
  }

  .eng-tf-btn {
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
    font-size: 1.1rem;
  }

  .eng-tool {
    padding: 6px 11px;
    font-size: 0.88rem;
  }

  .eng-pic-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .eng-pic-option img {
    max-width: 90px;
  }

  .eng-chip {
    padding: 8px 12px;
    font-size: 1.1rem;
  }

  .eng-match-item {
    min-height: 48px;
    padding: 8px 10px;
    font-size: 1rem;
  }

  .eng-match-item--img img {
    width: 46px;
    height: 46px;
  }

  .eng-slide-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .eng-slide-nav {
    position: absolute;
    bottom: 22px;
    width: 42px;
    height: 42px;
    z-index: 1;
  }

  .eng-slide-nav--prev { inset-inline-start: 22px; }
  .eng-slide-nav--next { inset-inline-end: 22px; }

  .eng-slide-img {
    max-height: calc(100dvh - 120px);
  }
}

/* ── Picture true / false: the word is the picture's caption ── */

.eng-picture-word {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.eng-picture-word.is-struck {
  text-decoration: line-through;
  text-decoration-color: var(--eng-wrong);
  text-decoration-thickness: 3px;
  opacity: 0.7;
}

.eng-picture-box--tf .eng-fix {
  margin: 0;
  font-size: 1.3rem;
}

/* ── Find the mistake: every word is a button ── */

.eng-sentence--tokens p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em 0.2em;
}

/* Each word looks like a light key, so it reads as something to tap. */
.eng-token {
  padding: 0.02em 0.24em;
  border: 2px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  background: var(--white);
  color: inherit;
  font: inherit;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.eng-token:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--memyellow);
}

.eng-token:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 1px;
}

.eng-token:disabled {
  cursor: default;
}

.eng-token.is-error {
  border-color: var(--eng-wrong);
  background: var(--eng-wrong-soft);
  text-decoration: line-through;
  text-decoration-color: var(--eng-wrong);
  text-decoration-thickness: 3px;
}

.eng-token.is-error.is-found {
  box-shadow: 0 0 0 3px var(--eng-right);
}

.eng-token.is-miss {
  border-color: rgba(0, 0, 0, 0.45);
  border-style: dashed;
}

/* ── Which sentence is right: one sentence per row ── */

.eng-options--sentences {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(560px, 100%);
  margin: 0 auto;
}

.eng-option--sentence {
  min-width: 0;
  padding: 12px 18px 12px 30px;
  font-size: 1.2rem;
  line-height: 1.35;
  text-align: left;
}

.eng-sc-context {
  margin: -4px 0 14px;
  text-align: center;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.4rem;
}

/* ── Build the word: a line of letter slots over a bank of tiles ── */

.eng-letter-slots {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  min-height: 62px;
  margin: 0 auto 16px;
  padding: 10px 12px;
  width: fit-content;
  max-width: 100%;
  border: 3px dashed rgba(0, 0, 0, 0.35);
  border-radius: 18px;
  background: var(--eng-soft);
}

.eng-letter-slots.is-right {
  border-style: solid;
  border-color: var(--eng-right);
  background: var(--eng-right-soft);
}

.eng-letter-slots.is-wrong {
  border-style: solid;
  border-color: var(--eng-wrong);
  background: var(--eng-wrong-soft);
}

.eng-letter-slot {
  display: grid;
  place-items: center;
  width: 42px;
  height: 46px;
  padding: 0;
  border: none;
  border-bottom: 4px solid var(--ink);
  border-radius: 6px 6px 2px 2px;
  background: var(--white);
  color: var(--ink);
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.eng-letter-slot.is-filled {
  background: var(--memteal);
  cursor: pointer;
}

.eng-letter-slot.is-filled:disabled {
  cursor: default;
}

.eng-letter-gap {
  width: 16px;
}

.eng-letter-fixed {
  align-self: center;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
}

.eng-letter-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.eng-letter-tile {
  min-width: 48px;
  padding: 8px 12px;
  font-size: 1.5rem;
  line-height: 1.1;
}

/* ── Dictation ── */

.eng-dict-prompt {
  flex-direction: row;
  justify-content: center;
  gap: 14px;
}

/* Shown by the translation toggle, like the translation under a sentence. */
.eng-dict-tr .eng-translation {
  display: none;
  margin: -6px auto 14px;
  max-width: 34em;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
}

.eng-runner-card.is-translated .eng-dict-tr .eng-translation {
  display: block;
}

.eng-write-solo--sentence .eng-input {
  width: min(560px, 100%);
  font-size: 0.85em;
}

.eng-write-solo .eng-correction {
  font-size: 0.8em;
}

/* ── Translate ── */

.eng-word-big--he {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-weight: 900;
}

.eng-option--he {
  font-family: var(--font-sans), system-ui, sans-serif;
  font-weight: 800;
}

/* ── Points earned: a pill in the header bar of the results screen ── */

.eng-earned {
  grid-column: 2;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.eng-earned-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 11px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--memyellow);
  color: var(--ink);
  box-shadow: 2px 3px 0 0 var(--ink);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  animation: eng-pop 0.35s ease;
}

.eng-earned-pill svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .eng-earned-pill {
    animation: none;
  }
}

/* ── Leaderboard: the student bar's points button and the card on top of
   the topics page (the board itself is in leaderboard.css) ── */

.eng-student-bar-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--memyellow);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.eng-student-bar-points svg {
  width: 20px;
  height: 20px;
}

.eng-student-bar-points:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 3px 0 0 var(--ink);
}

.eng-board-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 620px;
  margin: 0 auto 30px;
  padding: clamp(16px, 3vw, 22px);
  border: var(--eng-card-border);
  border-radius: 22px;
  background: var(--clean-bg-how, #b8fff5);
  color: var(--ink);
  box-shadow: var(--eng-card-shadow);
}

.eng-board-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.eng-board-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--memyellow);
}

.eng-board-icon svg {
  width: 26px;
  height: 26px;
}

.eng-board-card .eng-board-title {
  margin: 0;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.25;
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.eng-board-more {
  align-self: center;
  padding: 8px 22px;
  font-size: 1rem;
}

/* Visitors without a personal link: one line on how to join. */
.eng-board-card.is-join {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  background: var(--white);
}

.eng-board-join .eng-board-title {
  font-size: 1.15rem;
}

.eng-board-join p {
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--body);
}

/* ── Help examples of the new types ── */

.eng-help-error {
  padding: 0 0.15em;
  border-radius: 6px;
  background: var(--eng-wrong-soft);
  text-decoration: line-through;
  text-decoration-color: var(--eng-wrong);
  text-decoration-thickness: 3px;
}

.eng-help-sentences {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.eng-help-sentences .eng-help-opt {
  font-size: 1.02rem;
}

/* ── Fixed exercise screen: sizes follow the viewport height so a whole
   question fits without scrolling. Kept last so it wins over the mobile rules. ── */

html.eng-runner-open body.clean-site .eng-runner-title.font-cartoon {
  font-size: clamp(1.2rem, min(5vw, 4.4dvh), 2.4rem);
}

/* Phones: smaller back and settings buttons leave the title room for one line. */
@media (max-width: 560px) {
  .eng-runner-top {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .eng-runner-top .eng-back,
  .eng-settings-btn {
    width: 42px;
    height: 42px;
  }

  .eng-runner-top .eng-back svg,
  .eng-settings-btn svg {
    width: 22px;
    height: 22px;
  }
}

/* The card shrinks to the space left under the header; the matching board
   and the mistakes list give up height first, everything else keeps its size. */
html.eng-runner-open .eng-runner-card {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 3dvh, 34px) clamp(14px, 4vw, 36px);
}

html.eng-runner-open .eng-runner-card > *,
html.eng-runner-open .eng-results > * {
  flex-shrink: 0;
}

html.eng-runner-open .eng-instructions {
  flex-shrink: 0;
  margin-bottom: clamp(8px, 1.6dvh, 14px);
  font-size: clamp(0.95rem, 2.4dvh, 1.1rem);
}

/* Over the progress bar, the header's gap does the spacing. */
.eng-runner-head > .eng-instructions,
html.eng-runner-open .eng-runner-head > .eng-instructions {
  margin: 0;
}

html.eng-runner-open .eng-sentence {
  margin-bottom: clamp(12px, 2.6dvh, 26px);
  padding: clamp(10px, 2.2dvh, 22px) 16px;
  font-size: clamp(1.25rem, min(4.4vw, 4dvh), 2.2rem);
  line-height: 1.5;
}

html.eng-runner-open .eng-option,
html.eng-runner-open .eng-tf-btn {
  padding-block: clamp(8px, 1.6dvh, 14px);
}

html.eng-runner-open .eng-feedback {
  min-height: clamp(48px, 7dvh, 64px);
  margin-top: clamp(8px, 2dvh, 20px);
}

/* After a wrong answer the message and the next button share one row, so the
   card doesn't grow and push the button off the screen. A long message wraps
   on its own side. */
html.eng-runner-open .eng-feedback:not(.eng-read-feedback):has(> .eng-next) {
  flex-wrap: nowrap;
  gap: 12px;
}

html.eng-runner-open .eng-feedback:not(.eng-read-feedback):has(> .eng-next) .eng-feedback-msg {
  min-width: 0;
  font-size: clamp(1rem, 2.6dvh, 1.2rem);
}

html.eng-runner-open .eng-feedback .eng-next {
  flex-shrink: 0;
}

/* Set by fitCard() when a question is taller than the room on the screen. */
html.eng-runner-open .eng-runner-card > * {
  zoom: var(--card-fit, 1);
}

html.eng-runner-open .eng-picture-box {
  margin-bottom: clamp(10px, 2.4dvh, 22px);
  padding: clamp(8px, 1.6dvh, 16px);
}

html.eng-runner-open .eng-picture-img {
  width: clamp(96px, min(30vw, 19dvh), 190px);
  height: clamp(96px, min(30vw, 19dvh), 190px);
}

html.eng-runner-open .eng-picture-box--small .eng-picture-img {
  width: clamp(64px, min(22vw, 12dvh), 140px);
  height: clamp(64px, min(22vw, 12dvh), 140px);
}

html.eng-runner-open .eng-sentence--word {
  font-size: clamp(1.1rem, min(4vw, 3.4dvh), 1.9rem);
}

html.eng-runner-open .eng-word-prompt {
  margin-bottom: clamp(10px, 2.4dvh, 22px);
}

html.eng-runner-open .eng-pic-option img {
  width: min(100%, 12dvh);
}

html.eng-runner-open .eng-listen-prompt {
  gap: clamp(4px, 1dvh, 10px);
  margin-bottom: clamp(10px, 2.4dvh, 24px);
}

html.eng-runner-open .eng-listen-btn {
  width: clamp(60px, 11dvh, 96px);
  height: clamp(60px, 11dvh, 96px);
}

html.eng-runner-open .eng-listen-btn svg {
  width: 48%;
  height: 48%;
}

html.eng-runner-open .eng-match {
  flex-shrink: 1;
  min-height: 0;
  display: flex;
}

html.eng-runner-open .eng-match-col {
  flex: 1 1 0;
  min-width: 0;
  gap: clamp(6px, 1.2dvh, 10px);
}

/* A match button is never shorter than its text or picture, so nothing in it
   is ever cut. When the board is taller than the room left, fitMatchBoard()
   lowers --fit and the text and pictures shrink together instead. */
html.eng-runner-open .eng-match-item {
  flex: 0 1 56px;
  min-height: auto;
  padding-block: 4px;
  font-size: calc(1.15rem * var(--fit, 1));
}

@media (max-width: 768px) {
  html.eng-runner-open .eng-match-item {
    font-size: calc(1rem * var(--fit, 1));
  }
}

html.eng-runner-open .eng-match-item--img img {
  width: auto;
  height: calc(clamp(40px, 6dvh, 58px) * var(--fit, 1));
}

/* The Hebrew-letter sound adds a line: tighter match cards, and a smaller
   picture over the Hebrew word, so the screen still fits. */
html.eng-runner-open .eng-runner-card.is-say .eng-match-item {
  padding-block: 2px;
  line-height: 1.15;
}

html.eng-runner-open .eng-match-item .eng-say-opt {
  font-size: 0.75em;
  line-height: 1.1;
}

html.eng-runner-open .eng-runner-card.is-say .eng-picture-box:not(.eng-picture-box--small):has(.eng-say-row) {
  gap: 4px;
}

html.eng-runner-open .eng-runner-card.is-say .eng-picture-box:not(.eng-picture-box--small):has(.eng-say-row) .eng-picture-img {
  width: clamp(72px, min(26vw, 13dvh), 170px);
  height: clamp(72px, min(26vw, 13dvh), 170px);
}

html.eng-runner-open .eng-picture-box .eng-say-line {
  padding: 0 12px;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* A whole sentence on a matching board (new exercises): smaller text, and
   the button grows to fit it. */
.eng-match-item--long {
  font-size: 1rem;
  line-height: 1.25;
}

html.eng-runner-open .eng-match-item--long {
  flex: 0 1 auto;
  padding-inline: 8px;
  font-size: calc(clamp(0.85rem, min(3.6vw, 2.4dvh), 1.05rem) * var(--fit, 1));
}

html.eng-runner-open .eng-results {
  flex-shrink: 1;
  min-height: 0;
  gap: clamp(6px, 1.4dvh, 12px);
}

html.eng-runner-open .eng-star svg {
  width: clamp(30px, 5.5dvh, 60px);
  height: clamp(30px, 5.5dvh, 60px);
}

html.eng-runner-open .eng-grade {
  margin-top: 0;
  padding: clamp(4px, 1dvh, 10px) 26px clamp(4px, 1.2dvh, 12px);
  box-shadow: 3px 4px 0 0 var(--ink);
}

html.eng-runner-open .eng-grade-label {
  font-size: 0.95rem;
}

html.eng-runner-open .eng-score.font-cartoon {
  font-size: clamp(2rem, 6.5dvh, 4.4rem);
}

html.eng-runner-open .eng-results-count {
  margin: 0;
  font-size: clamp(1rem, 2.4dvh, 1.2rem);
}

html.eng-runner-open .eng-results-msg {
  font-size: clamp(0.95rem, 2.3dvh, 1.15rem);
}

html.eng-runner-open .eng-results-actions {
  gap: 10px;
  margin-top: 2px;
}

html.eng-runner-open .eng-results-actions .btn {
  padding: clamp(7px, 1.4dvh, 12px) 18px;
  font-size: clamp(0.92rem, 2.2dvh, 1.05rem);
}

/* A long list of mistakes scrolls inside its own box; the page never does. */
html.eng-runner-open .eng-mistakes {
  flex-shrink: 1;
  min-height: 6.5rem;
  margin-top: 0;
  padding: clamp(10px, 2dvh, 18px);
  overflow-y: auto;
  scrollbar-width: thin;
}

html.eng-runner-open .eng-mistakes h3 {
  margin-bottom: 8px;
}

html.eng-runner-open .eng-mistakes ul {
  font-size: 1.02rem;
  line-height: 1.55;
}

/* Short phones: tighter picture tiles so the 2×2 picture grid still fits. */
@media (max-height: 720px) {
  html.eng-runner-open .eng-pic-options {
    gap: 8px;
  }

  html.eng-runner-open .eng-pic-option {
    gap: 0;
    padding: 6px 6px 2px;
  }

  html.eng-runner-open .eng-pic-option img {
    width: min(100%, 9.5dvh);
  }

  html.eng-runner-open .eng-pic-label {
    font-size: 0.92rem;
  }

  html.eng-runner-open .eng-listen-btn {
    width: clamp(52px, 9dvh, 96px);
    height: clamp(52px, 9dvh, 96px);
  }

  html.eng-runner-open .eng-results {
    gap: 6px;
  }

  html.eng-runner-open .eng-star svg {
    width: 28px;
    height: 28px;
  }

  html.eng-runner-open .eng-mistakes {
    min-height: 4.6rem;
  }
}

/* ── Fixed screen: reading. The card takes all the height under the header
   and the passage / task boxes scroll inside it. ── */

html.eng-runner-open .eng-runner-card:has(> .eng-read) {
  flex: 1 1 auto;
  overflow: hidden;
  padding: clamp(10px, 2dvh, 22px);
}

html.eng-runner-open .eng-runner-card > .eng-read {
  flex: 1 1 auto;
  min-height: 0;
}

/* Narrow screens: the passage on top, the task under it. The passage keeps
   at least a third of the card; the task takes what it needs, up to 60%. */
@media (max-width: 820px) {
  .eng-read {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .eng-read-side {
    flex: 1 1 0;
    min-height: 30%;
  }

  .eng-read-passage {
    padding: 0 14px 12px;
  }

  .eng-read-task {
    flex: 0 1 auto;
    max-height: 68%;
    padding: 2px;
  }

  .eng-read.is-text-open .eng-read-task {
    display: none;
  }

  .eng-read.is-text-open .eng-read-side {
    flex: 1 1 auto;
  }

  .eng-read--paged .eng-read-task {
    flex: 1 1 auto;
    max-height: none;
  }

  /* No expand button in the corner to keep clear of. */
  .eng-read--paged .eng-read-title {
    padding-inline: 14px;
  }

  .eng-read-go {
    padding-top: 10px;
  }

  .eng-read-go .eng-check {
    padding: 8px 24px;
    font-size: 1rem;
  }

  .eng-read-q-head {
    margin-bottom: 8px;
  }

  .eng-read-back {
    gap: 6px;
    padding: 5px 12px;
    border-width: 2px;
    box-shadow: 2px 3px 0 0 var(--ink);
    font-size: 0.9rem;
  }

  .eng-read-back svg {
    width: 18px;
    height: 18px;
  }

  /* The title stays at the top of the box while the text scrolls under it,
     so no line hides behind the expand button. */
  .eng-read-title {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -14px 4px;
    padding: 10px 48px 8px;
    background: #fffdf3;
    font-size: 1.1rem;
  }

  /* The ring already shows the step / question number. */
  .eng-read-step {
    display: none;
  }

  /* Marking: a short instruction and small chips above the card, so the
     passage keeps most of the screen. */
  .eng-read-instructions {
    gap: 6px;
  }

  .eng-read-chips {
    gap: 5px 6px;
  }

  .eng-read-chips li {
    padding: 0 9px;
    font-size: 0.9rem;
  }

  /* A long list (a lesson's whole vocabulary) packs tighter. */
  .eng-read-chips.is-many {
    gap: 4px;
  }

  .eng-read-chips.is-many li {
    padding: 0 8px;
    border-width: 1.5px;
    font-size: 0.84rem;
  }

  .eng-read-mark-foot {
    gap: 8px;
    padding-top: 14px;
  }

  .eng-read-count {
    gap: 3px 8px;
    font-size: 0.88rem;
  }

  .eng-read-meter {
    flex-basis: 52px;
  }

  .eng-read-count .eng-feedback-msg {
    font-size: 0.88rem;
  }

  .eng-read-mark-foot .eng-read-reveal {
    padding: 4px 10px;
    font-size: 0.8rem;
  }

  .eng-read-mark-foot .eng-check {
    padding: 5px 16px;
    font-size: 0.9rem;
  }

  .eng-read--paged:is(.is-read, .is-mark, .is-text-open) .eng-read-passage {
    border-radius: 20px;
    box-shadow: 5px 6px 0 0 var(--ink);
  }

  .eng-read-text {
    font-size: 1.05rem;
    line-height: 1.75;
  }

  .eng-read-step {
    margin-bottom: 2px;
    font-size: 0.85rem;
  }

  .eng-read-instr {
    line-height: 1.4;
  }

  .eng-read-found b {
    font-size: 1rem;
  }

  .eng-read-q {
    font-size: 1.05rem;
  }

  .eng-read-option {
    gap: 8px;
    padding: 7px 10px;
    font-size: 0.98rem;
  }

  .eng-read-option-key {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .eng-read-feedback {
    margin-top: 8px;
  }

  .eng-read-feedback .eng-feedback-msg {
    font-size: 1.05rem;
  }

  .eng-read-input {
    font-size: 1.02rem;
  }
}

/* ── Fixed screen: the exercise types from english-more.js ── */

html.eng-runner-open .eng-sentence--tokens {
  font-size: clamp(1.2rem, min(4.6vw, 4dvh), 2rem);
}

html.eng-runner-open .eng-options--sentences {
  gap: clamp(6px, 1.2dvh, 10px);
}

html.eng-runner-open .eng-option--sentence {
  padding-block: clamp(7px, 1.4dvh, 12px);
  font-size: clamp(1rem, min(4vw, 2.8dvh), 1.2rem);
}

html.eng-runner-open .eng-sc-context {
  margin-bottom: clamp(8px, 1.6dvh, 14px);
  font-size: clamp(1.1rem, 3dvh, 1.4rem);
}

html.eng-runner-open .eng-letter-slots {
  min-height: 0;
  margin-bottom: clamp(8px, 1.8dvh, 16px);
  padding: clamp(6px, 1.2dvh, 10px) 10px;
  gap: clamp(4px, 1vw, 6px);
}

html.eng-runner-open .eng-letter-slot {
  width: clamp(26px, min(8vw, 6dvh), 42px);
  height: clamp(32px, min(9.5vw, 6.6dvh), 46px);
  font-size: clamp(1.1rem, min(5vw, 3.4dvh), 1.6rem);
}

html.eng-runner-open .eng-letter-fixed {
  font-size: clamp(1.1rem, min(5vw, 3.4dvh), 1.6rem);
}

html.eng-runner-open .eng-letter-bank {
  gap: clamp(5px, 1dvh, 8px);
  margin-bottom: clamp(8px, 1.8dvh, 16px);
}

html.eng-runner-open .eng-letter-tile {
  min-width: clamp(36px, 6dvh, 48px);
  padding: clamp(3px, 0.9dvh, 8px) 10px;
  font-size: clamp(1.1rem, 3.2dvh, 1.5rem);
}

html.eng-runner-open .eng-dict-tr .eng-translation {
  margin-bottom: clamp(8px, 1.6dvh, 14px);
}

html.eng-runner-open .eng-earned-pill {
  padding: 4px 12px 4px 9px;
  font-size: clamp(0.9rem, 2.2dvh, 1.05rem);
}

html.eng-runner-open .eng-picture-word {
  font-size: clamp(1.25rem, min(4.6vw, 3.6dvh), 2rem);
}

/* The check button in the feedback area (letters, dictation). */
.eng-feedback > .eng-check {
  margin: 0;
}

/* The slow-replay button keeps its word even where the header tools show
   icons only. */
html.eng-runner-open .eng-slow-btn span {
  display: inline;
}

/* ── "My mistakes" (mistake-bank.js): the line on a topic's page and the
   review round's header ── */

.eng-review-strip-icon,
.eng-review-empty-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--memyellow);
  color: var(--ink);
}

.eng-review-strip-icon svg,
.eng-review-empty-icon svg {
  width: 28px;
  height: 28px;
}

.eng-review-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
}

.eng-review-strip-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.eng-review-strip-icon svg {
  width: 22px;
  height: 22px;
}

.eng-review-strip-text {
  flex: 1;
  min-width: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.4;
}

.eng-review-strip-go {
  flex-shrink: 0;
  padding: 7px 18px;
  background: var(--memyellow);
  color: var(--ink);
  font-size: 0.98rem;
  text-decoration: none;
}

/* Where a review question is from, and its right answers in a row. */
.eng-review-from {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  white-space: normal;
}

.eng-review-dots {
  display: inline-flex;
  gap: 3px;
}

.eng-review-dots i {
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.eng-review-dots i.is-on {
  background: var(--eng-right);
}

.eng-review-out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--memyellow);
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 900;
  animation: eng-pop 0.3s ease both;
}

.eng-review-out svg {
  width: 18px;
  height: 18px;
  fill: var(--ink);
}

.eng-mistakes-saved {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 10px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--body);
}

.eng-mistakes-saved svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* The review screen with nothing to practice, or while it loads. */
.eng-review-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.eng-review-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.eng-review-empty-icon svg {
  width: 36px;
  height: 36px;
}

.eng-review-empty-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-review-empty-lead {
  max-width: 30em;
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--body);
}

.eng-review-empty .btn {
  padding: 10px 26px;
  text-decoration: none;
}

/* ── Reading exams (english-exams.js) ── */

/* The Bagrut topic's way to the timed exams. */
.eng-exam-link {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 12px 16px;
  border: var(--eng-card-border);
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--eng-card-shadow);
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.eng-exam-link:hover,
.eng-exam-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--eng-card-shadow-hover);
}

.eng-exam-link-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--memyellow);
}

.eng-exam-link-icon svg {
  width: 28px;
  height: 28px;
}

.eng-exam-link-text {
  flex: 1;
  min-width: 0;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.4;
}

.eng-exam-link-go {
  flex-shrink: 0;
  padding: 8px 18px;
  font-size: 0.98rem;
}

@media (max-width: 560px) {
  .eng-exam-link {
    flex-wrap: wrap;
  }

  .eng-exam-link-text {
    flex-basis: calc(100% - 64px);
  }

  .eng-exam-link-go {
    width: 100%;
    text-align: center;
  }
}

/* The exams page: how an exam works, then a card per exam. */
.eng-exam-how {
  display: grid;
  gap: 6px;
  max-width: 760px;
  margin: 0 auto 26px;
  padding: 14px 18px;
  border: 3px dashed var(--ink);
  border-radius: 18px;
  background: var(--white);
  list-style: none;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
}

.eng-exam-how li,
.eng-exam-rules li {
  position: relative;
  padding-inline-start: 22px;
}

.eng-exam-how li::before,
.eng-exam-rules li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--memteal);
  box-shadow: 0 0 0 2px var(--ink);
}

/* The first screen of an exam. */
.eng-exam-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6dvh, 14px);
  text-align: center;
}

.eng-exam-intro-icon {
  display: grid;
  place-items: center;
  width: clamp(54px, 9dvh, 76px);
  height: clamp(54px, 9dvh, 76px);
  border: 3px solid var(--ink);
  border-radius: 20px;
  background: var(--memyellow);
}

.eng-exam-intro-icon svg {
  width: 58%;
  height: 58%;
}

.eng-exam-intro-title {
  margin: 0;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1.3rem, 3.4dvh, 1.8rem);
  font-weight: 900;
  color: var(--ink);
}

.eng-exam-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eng-exam-facts li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 11px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--eng-soft);
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-exam-facts svg {
  width: 19px;
  height: 19px;
}

.eng-exam-resume-note {
  margin: 0;
  padding: 6px 14px;
  border-radius: 12px;
  background: var(--memyellow);
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-exam-rules {
  display: grid;
  gap: 6px;
  max-width: 34em;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
  font-size: clamp(0.95rem, 2.3dvh, 1.05rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}

.eng-exam-start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eng-exam-start svg {
  width: 1.2em;
  height: 1.2em;
}

/* The header: a button per question and the timer next to it. */
.eng-exam-progress {
  width: auto;
  max-width: 100%;
  gap: 8px;
}

.eng-exam-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.eng-exam-timer svg {
  width: 19px;
  height: 19px;
}

.eng-exam-timer.is-untimed {
  background: var(--eng-soft);
}

.eng-exam-timer.is-low {
  background: #ffd08a;
}

.eng-exam-timer.is-urgent {
  background: var(--eng-wrong-soft);
  border-color: var(--eng-wrong);
  animation: eng-exam-pulse 1s ease-in-out infinite;
}

@keyframes eng-exam-pulse {
  50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .eng-exam-timer.is-urgent {
    animation: none;
  }
}

/* The passage: numbered paragraphs, and sentences to click for a quote. */
.eng-exam-para {
  position: relative;
  padding-left: 34px;
}

.eng-para-num {
  position: absolute;
  left: 0;
  top: 0.2em;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
}

.eng-exam-para.is-pointed .eng-para-num {
  background: var(--memyellow);
  box-shadow: 0 0 0 3px var(--memyellow);
}

.eng-sent {
  border-radius: 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.eng-exam-text.is-quoting .eng-sent {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.eng-exam-text.is-quoting .eng-sent:hover:not(.is-quoted) {
  background: #e3f1ff;
}

.eng-exam-text.is-quoting .eng-sent:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 1px;
}

.eng-sent.is-quoted {
  background: #ffe14d;
  box-shadow: inset 0 -3px 0 #e0b400;
}

.eng-sent.is-quote-right {
  background: var(--eng-right-soft);
  box-shadow: inset 0 -3px 0 var(--eng-right);
}

.eng-sent.is-quote-wrong {
  background: var(--eng-wrong-soft);
  text-decoration: line-through;
  text-decoration-color: var(--eng-wrong);
}

/* The question buttons sit in a white strip, like the progress bar of the
   other exercises; too many for a narrow screen scroll sideways (the page
   never does). */
.eng-exam-dots {
  flex: 0 1 auto;
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 3px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 1px 2px 0 0 var(--ink);
  overflow-x: auto;
  scrollbar-width: none;
  direction: ltr;
}

.eng-exam-dots::-webkit-scrollbar {
  display: none;
}

.eng-exam-dot {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}

.eng-exam-dot.is-answered {
  background: var(--memteal);
}

.eng-exam-dot.is-current {
  background: var(--memyellow);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.eng-exam-timer {
  flex-shrink: 0;
}

/* The question card: the step line and "Back to the text" on one row. */
.eng-read-q-head .eng-exam-step {
  margin: 0;
}

.eng-exam-step {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--body);
}

.eng-exam-blank {
  display: inline-block;
  width: 5em;
  margin: 0 0.15em;
  border-bottom: 3px solid var(--ink);
  vertical-align: -0.1em;
}

.eng-exam-note {
  display: flex;
}

/* A chosen answer stays marked until the exam is handed in. */
.eng-read-option.eng-exam-choice.is-selected,
.eng-tf-btn.eng-exam-choice.is-selected {
  background: var(--memteal);
  box-shadow: 0 0 0 3px var(--ink);
}

.eng-tf-btn.eng-exam-choice.is-selected svg {
  color: var(--ink);
}

.eng-exam-box {
  border-radius: 7px;
  background: var(--white);
}

.eng-exam-box svg {
  width: 18px;
  height: 18px;
}

.eng-exam-hint {
  min-height: 1.2em;
  margin: 6px 0 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #a05400;
}

.eng-exam-word {
  width: min(100%, 320px);
}

.eng-exam-quote {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #fff7c2;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.eng-exam-quote.is-empty {
  border-style: dashed;
  background: var(--white);
  color: var(--body);
}

.eng-exam-quote-label {
  font-size: 0.9rem;
  font-weight: 900;
}

.eng-exam-quote-text {
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  text-align: left;
}

/* A quote question: the button that opens the passage to pick from, and
   the undo next to it. */
.eng-exam-quote-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
}

.eng-read-back.eng-exam-pick {
  margin-inline-start: 0;
}

.eng-exam-clear {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.eng-exam-answer {
  display: flex;
  flex-direction: column;
}

.eng-exam-seq {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2dvh, 9px);
}

.eng-exam-seq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: clamp(7px, 1.3dvh, 10px) 12px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 3px 4px 0 0 var(--ink);
  text-align: left;
  font-family: "Varela Round", var(--font-sans), system-ui, sans-serif;
  font-size: clamp(1rem, 2.3dvh, 1.12rem);
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.eng-exam-seq-item.is-placed {
  background: var(--eng-soft);
}

.eng-exam-seq-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px dashed var(--ink);
  border-radius: 50%;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
}

.eng-exam-seq-item.is-placed .eng-exam-seq-num {
  border-style: solid;
  background: var(--memteal);
}

.eng-exam-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: clamp(10px, 2dvh, 18px);
}

.eng-exam-foot .eng-check {
  margin: 0;
}

.eng-exam-prev:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Hand in? */
.eng-exam-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(10px, 2dvh, 18px) 6px;
  text-align: center;
}

.eng-exam-confirm-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--memyellow);
}

.eng-exam-confirm-icon svg {
  width: 30px;
  height: 30px;
}

.eng-exam-confirm-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-exam-confirm-text {
  max-width: 26em;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

.eng-exam-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.eng-exam-confirm-actions .btn {
  padding: 10px 22px;
}

/* Results: the grade, how each kind of question went, and every answer. */
.eng-exam-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.eng-exam-score .eng-grade {
  margin: 0;
}

.eng-exam-score-text p {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
}

.eng-exam-score-text .eng-exam-timeup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 3px 10px;
  border-radius: 10px;
  background: #ffd08a;
}

.eng-exam-timeup svg {
  width: 18px;
  height: 18px;
}

.eng-exam-breakdown h4,
.eng-exam-review h4 {
  margin: clamp(10px, 2dvh, 16px) 0 8px;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink);
}

.eng-exam-review .eng-read-q-head {
  margin-top: clamp(10px, 2dvh, 16px);
}

.eng-exam-review .eng-read-q-head h4 {
  margin: 0;
}

.eng-exam-breakdown ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eng-exam-brow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff7c2;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
}

.eng-exam-brow.is-right {
  background: var(--eng-right-soft);
}

.eng-exam-brow.is-wrong {
  background: var(--eng-wrong-soft);
}

.eng-exam-actions {
  justify-content: flex-start;
  margin-top: clamp(10px, 2dvh, 16px);
}

.eng-exam-actions .btn {
  padding: 9px 20px;
  font-size: 1rem;
}

.eng-exam-review ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eng-exam-ritem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
}

.eng-exam-ritem.is-wrong {
  border-color: var(--eng-wrong);
}

.eng-exam-ritem.is-half {
  border-color: #e0a100;
}

.eng-exam-rmark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--white);
}

.eng-exam-rmark svg {
  width: 17px;
  height: 17px;
}

.eng-exam-ritem.is-right .eng-exam-rmark { background: var(--eng-right); }
.eng-exam-ritem.is-wrong .eng-exam-rmark { background: var(--eng-wrong); }
.eng-exam-ritem.is-half .eng-exam-rmark { background: #e0a100; }
.eng-exam-ritem.is-half .eng-exam-rmark svg { fill: var(--white); }

.eng-exam-rbody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.eng-exam-rtype {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--body);
}

.eng-exam-rq {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}

.eng-exam-rq .has-he {
  display: block;
}

.eng-runner-card:not(.is-he-q) .eng-exam-rq .has-he {
  direction: ltr;
  text-align: left;
}

.eng-exam-rline {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
}

.eng-exam-rlabel {
  font-weight: 900;
}

.eng-exam-rline bdi.is-none {
  color: var(--body);
  font-style: italic;
}

.eng-exam-rright {
  color: #146b3a;
}

/* Phones: smaller question buttons and paragraph numbers. */
@media (max-width: 820px) {
  .eng-exam-para {
    padding-left: 30px;
  }

  .eng-para-num {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
  }

  .eng-exam-dots {
    gap: 3px;
  }

  .eng-exam-dot {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 0.85rem;
  }

  .eng-exam-step {
    font-size: 0.85rem;
  }

  /* The header already marks which question this is, so the step line
     keeps only the question type, on one row with "Back to the text". */
  .eng-exam-step-num {
    display: none;
  }

  .eng-exam-timer {
    padding: 4px 10px 4px 7px;
    font-size: 0.98rem;
  }

  .eng-exam-score .eng-grade {
    min-width: 0;
    padding: 4px 18px 6px;
  }
}


/* ── School subject pages (services/subject.html): Hebrew questions with a
   drawing from lesson-figures.js and a big math line. ── */

.eng-fig {
  display: flex;
  justify-content: center;
  margin: 0 auto clamp(8px, 1.8dvh, 16px);
}

.eng-fig svg {
  width: auto;
  max-width: 100%;
  height: clamp(110px, 22dvh, 210px);
}

.eng-fig--tall svg {
  height: clamp(150px, 30dvh, 280px);
}

.eng-q-text {
  display: block;
}

.eng-math-line {
  display: block;
  margin-top: 0.2em;
  font-size: 1.15em;
  direction: ltr;
}

.eng-q-text + .eng-math-line {
  margin-top: 0.35em;
}

/* A blank or an answer box inside a fraction is as narrow as a digit or two. */
.lp-frac .eng-input {
  width: 2.2em;
}

.lp-frac .eng-blank {
  min-width: 1.4em;
}

.eng-option .lp-frac,
.eng-match-item .lp-frac {
  font-size: 0.92em;
}