/* Inline tutorial lessons (content pages that embed a lesson widget). */
    .lesson { margin-top: 1.5rem; }
    /* Chapters read as a sequence, so each one after the first gets a rule. */
    .lesson + .lesson {
      margin-top: 2.2rem; padding-top: 1.6rem;
      border-top: 1px solid var(--panel-bd);
    }
    .lesson-intro {
      font-size: 0.86rem; line-height: 1.5; font-style: italic;
      color: var(--crumb-fg); margin-bottom: 0.7rem;
    }
    .lesson-head {
      display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.15rem;
    }
    .lesson-no {
      font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
      color: var(--crumb-fg); background: var(--box-bg);
      border: 1px solid var(--panel-bd); border-radius: 20px;
      padding: 0.1rem 0.5rem; flex-shrink: 0;
    }
    .lesson-head h2 { font-size: 1.02rem; font-weight: 800; color: #f0c030; }
    .lesson-goal { font-size: 0.84rem; line-height: 1.5; color: var(--pg-fg); margin-bottom: 0.8rem; }

    .tut {
      background: var(--panel-bg); border: 1px solid var(--panel-bd);
      border-radius: 14px; padding: 0.9rem;
    }
    /* Speech bubble sits above the board with a tail pointing down at it. */
    .tut-bubble {
      position: relative; margin: 0 auto 0.85rem; max-width: 300px;
      background: var(--card-bg); color: var(--card-fg);
      border: 2px solid var(--card-bd); border-radius: 12px;
      padding: 0.6rem 0.8rem; text-align: center;
      font-size: 0.85rem; font-weight: 600; line-height: 1.4;
      min-height: 2.9rem; display: flex; align-items: center; justify-content: center;
    }
    .tut-bubble::after, .tut-bubble::before {
      content: ''; position: absolute; top: 100%; left: 50%;
      border: 10px solid transparent; border-top-color: var(--card-bd);
      transform: translateX(-50%);
    }
    .tut-bubble::after { border-width: 8px; border-top-color: var(--card-bg); }
    .tut-bubble.is-empty { visibility: hidden; }
    .tut-bubble > span { opacity: 1; transition: opacity 0.3s ease; }
    @media (prefers-reduced-motion: reduce) {
      .tut-bubble > span { transition: none; }
    }

    /* Score + ghost readout — only on lessons that teach scoring. Mirrors the
       game's .topbar-scores: a stacked, right-aligned pair of
       "icon + multiplier pill + number" rows sitting above the board's
       top-right corner, deliberately small because on the real screen these are
       a quiet readout rather than a headline. ⭐ is the live score, 👻 the goal.
       Width matches .tut-unit so the rows end flush with the board edge, and
       tabular-nums keeps digits from shifting as the score ticks up. */
    .tut-hud {
      display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
      max-width: 288px;
      margin: 0 auto 0.45rem; font-variant-numeric: tabular-nums;
    }
    .tut-sc {
      display: flex; align-items: center; line-height: 1.35;
      font-size: 0.82rem; font-weight: 800; white-space: nowrap;
    }
    .tut-sc-cur { color: #f0c030; }
    html[data-theme="light"] .tut-sc-cur { color: #895a03; }
    .tut-sc-gh  { color: var(--crumb-fg); }
    .tut-ic { flex-shrink: 0; width: 1.4em; text-align: center; }
    /* Same treatment as the game's .mx pill: rung colour behind, white on top. */
    .tut-mx {
      display: inline-block; flex-shrink: 0; min-width: 2.1em; text-align: center;
      padding: 0 0.3em; margin-right: 0.3em; border-radius: 999px;
      color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    }
    /* Fixed-width number column: keeps every row the same width so the ⭐ and 👻
       icons (and their pills) stay in line while the score grows 0 -> 16,100. */
    .tut-num { min-width: 4em; text-align: right; }
    .tut-score { font-weight: 900; }

    /* The multiplier strip and the maze are one game board, exactly as the
       game nests #mult-strip inside #maze-ring: one --arena-bg mat, one border,
       one rounded box. */
    .tut-unit { max-width: 288px; margin: 0 auto 0.2rem; }
    .tut-unit:has(.tut-mults) {
      background: var(--arena-bg);
      border: 2px solid #94a3b8; border-radius: 12px;
      box-shadow: 0 0 18px #94a3b833;
    }
    /* Mirrors the game's #mult-strip: rungs light up as the multiplier climbs. */
    .tut-mults {
      display: flex; align-items: flex-end; gap: 3px;
      margin: 0; padding: 6px 7px 0; height: 32px;
    }
    .tut-mbox {
      flex: 1; height: 18px; border-radius: 4px 4px 0 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.6rem; font-weight: 900; color: #fff; opacity: 0.75;
      text-shadow: 0 1px 4px rgba(0,0,0,0.7);
      transition: opacity 0.2s, height 0.2s, box-shadow 0.2s;
    }
    .tut-mbox.is-on { opacity: 1; height: 26px; }
    /* 👀 Scout — appears top-right of the board when one tap would end it. */
    .tut-board { display: flex; justify-content: center; position: relative; }
    .tut-unit:has(.tut-mults) .tut-board { padding: 2px 7px 7px; }
    .tut-scout {
      position: absolute; top: -0.4rem; right: 0;
      font-size: 0.9rem; font-weight: 900; letter-spacing: 0.02em;
      padding: 0.15em 0.5em; border-radius: 20px;
      background: var(--card-bg); border: 2px solid var(--panel-bd);
      opacity: 0; transform: scale(0.8); pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .tut-scout.is-on { opacity: 1; transform: scale(1); }
    .tut-scout.is-plus  { color: var(--scout-ok);  border-color: var(--scout-ok); }
    .tut-scout.is-minus { color: var(--scout-bad); border-color: var(--scout-bad); }

    /* Combo badge — the game's, scoped to the board instead of the page. */
    .tut-combo {
      position: absolute; top: 38%; left: 50%;
      transform: translate(-50%,-50%) scale(0.7);
      background: linear-gradient(135deg,#6a0dad 0%,#1a1aff 40%,#ffd700 100%);
      border: 2px solid #ffd700; border-radius: 12px;
      box-shadow: 0 0 22px #ffd70088, 0 4px 16px #0008;
      padding: 0.3em 0.8em; white-space: nowrap;
      font-size: 0.95rem; font-weight: 900; color: #fff;
      text-shadow: 0 2px 5px #0008;
      opacity: 0; pointer-events: none; z-index: 3;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .tut-combo.is-on { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    @media (prefers-reduced-motion: reduce) {
      .tut-scout, .tut-combo { transition: none; }
    }
    .tut-board svg {
      width: 100%; max-width: 260px; height: auto; display: block;
      touch-action: manipulation;
    }
    .tut-unit:has(.tut-mults) .tut-board svg { max-width: 100%; }
    .tut.is-running .tut-board svg { cursor: pointer; }

    .tut-btns { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.9rem; }
    .tut-btn {
      flex: 1; max-width: 130px; padding: 0.55em 0.9em;
      font-size: 0.86rem; font-weight: 800; font-family: inherit;
      color: #f0c030; background: rgba(240,192,48,0.12);
      border: 2px solid rgba(240,192,48,0.4); border-radius: 10px;
      cursor: pointer;
    }
    html[data-theme="light"] .tut-btn { color: #6a3f00; background: rgba(160,96,16,0.12); border-color: rgba(160,96,16,0.45); }
    .tut-btn:hover { background: rgba(240,192,48,0.22); }
    .tut-btn-try { color: #8fe0a0; background: rgba(80,200,120,0.12); border-color: rgba(80,200,120,0.4); }
    html[data-theme="light"] .tut-btn-try { color: #14532d; background: rgba(20,100,50,0.1); border-color: rgba(20,100,50,0.4); }
    .tut-btn-try:hover { background: rgba(80,200,120,0.22); }
    /* ↺ do-over, mirroring the game's restart control. */
    .tut-btn-redo {
      flex: 0 0 auto; max-width: none; min-width: 3rem;
      color: #8fb0e0; background: rgba(74,144,217,0.14); border-color: rgba(74,144,217,0.45);
      font-size: 1.1rem; line-height: 1;
    }
    html[data-theme="light"] .tut-btn-redo { color: #14406a; background: rgba(20,64,106,0.1); border-color: rgba(20,64,106,0.4); }
    .tut-btn-redo:hover { background: rgba(74,144,217,0.26); }
    .tut-btn-redo.is-pressed {
      background: #4a90d9; color: #fff; border-color: #4a90d9;
      transform: scale(0.94);
    }

    .lesson-soon {
      background: var(--panel-bg); border: 1px dashed var(--panel-bd);
      border-radius: 14px; padding: 1rem; text-align: center;
      font-size: 0.84rem; color: var(--muted);
    }