/* How to Play (/learn) — the beginner guide.
   Scoped entirely to .learn-* and .lb-* so nothing here can leak into the rest
   of the site. Every colour comes from the theme variables in style.css, so the
   guide follows the light/dark toggle without a second palette. */

/* The `hidden` attribute only sets `display: none` at the UA level, so any rule
   here that gives an element a display value silently un-hides it. Several
   controls in these widgets are hidden until the walkthrough reaches them —
   including ones that would let a learner skip a chapter — so make `hidden`
   authoritative rather than remembering to special-case every such rule. */
.learn-stage [hidden],
.learn-hero-progress[hidden] { display: none !important; }

/* ── Landing ─────────────────────────────────────────────────────────────── */
.learn-hero {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.25rem 1.75rem;
  margin-bottom: 1.75rem;
}
.learn-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.learn-hero-title { margin: 0 0 0.6rem; font-size: clamp(1.9rem, 5vw, 2.75rem); line-height: 1.1; }
.learn-hero-sub { color: var(--text-2); max-width: 62ch; margin: 0 0 1.35rem; line-height: 1.6; }
.learn-hero-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.learn-hero-progress {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.learn-progress-label { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; }
.learn-reset-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-subtle); font-size: 0.8rem; text-decoration: underline;
}
.learn-reset-btn:hover { color: var(--text); }

.learn-progress-track {
  flex: 1 1 160px; min-width: 120px; height: 6px;
  background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden;
}
.learn-progress-track-top { margin: 0 0 1.25rem; flex: none; width: 100%; }
.learn-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-emph), var(--accent-bright));
  border-radius: var(--radius-pill);
  transition: width 0.4s ease;
}

.learn-section-heading { margin: 0 0 0.9rem; }
.learn-chapter-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.6rem; }
.learn-chapter-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.learn-chapter-card:hover {
  border-color: var(--accent); transform: translateX(3px); background: var(--surface-2);
}
.learn-chapter-num {
  flex: 0 0 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--surface-2);
  border: 1px solid var(--border); font-weight: 700; font-size: 0.9rem; color: var(--text-muted);
}
.learn-chapter-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.learn-chapter-title { font-weight: 600; }
.learn-chapter-title i { color: var(--accent); margin-right: 0.35rem; }
.learn-chapter-blurb { font-size: 0.87rem; color: var(--text-muted); line-height: 1.45; }
.learn-chapter-check {
  margin-left: auto; flex: 0 0 auto; color: var(--success); opacity: 0;
  transition: opacity 0.2s ease;
}
.learn-chapter-item.is-done .learn-chapter-check { opacity: 1; }
.learn-chapter-item.is-done .learn-chapter-num {
  background: var(--success-bg); border-color: var(--success-border); color: var(--success-bright);
}
.learn-sources { font-size: 0.9rem; }
.learn-sources h3 { margin-top: 0; font-size: 1rem; }
.learn-sources p { color: var(--text-muted); line-height: 1.6; margin-bottom: 0; }

/* ── Chapter shell ───────────────────────────────────────────────────────── */
.learn-crumb {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.9rem; font-size: 0.87rem;
}
.learn-crumb a { color: var(--text-muted); text-decoration: none; }
.learn-crumb a:hover { color: var(--accent); }
.learn-crumb-count { color: var(--text-subtle); }

.learn-rail { list-style: none; display: flex; gap: 0.4rem; padding: 0; margin: 0 0 1.5rem; flex-wrap: wrap; }
.learn-rail-item a {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--border); color: var(--text-muted);
  font-size: 0.8rem; font-weight: 600; text-decoration: none;
  transition: all 0.15s ease;
}
.learn-rail-item a:hover { border-color: var(--accent); color: var(--text); }
.learn-rail-item.is-done a {
  background: var(--success-bg); border-color: var(--success-border); color: var(--success-bright);
}
.learn-rail-item.is-current a {
  background: var(--accent-emph); border-color: var(--accent-emph); color: var(--on-accent);
}

.learn-head { margin-bottom: 1.4rem; }
.learn-head h1 { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.learn-head h1 i { color: var(--accent); margin-right: 0.4rem; }
.learn-head-blurb { color: var(--text-2); margin: 0; max-width: 68ch; line-height: 1.6; }

/* ── The interactive stage ───────────────────────────────────────────────── */
.learn-stage {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 1.25rem; margin-bottom: 1.4rem;
}
.learn-stage.is-complete { border-color: var(--success-border); }

.learn-prompt {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--info-bg); border: 1px solid var(--info-border);
  border-radius: var(--radius-lg); padding: 0.8rem 1rem; margin-bottom: 1.15rem;
}
.learn-stage.is-complete .learn-prompt {
  background: var(--success-bg); border-color: var(--success-border);
}
.learn-prompt-step {
  flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 0.2rem 0.55rem; margin-top: 0.1rem;
}
.learn-prompt p { margin: 0; line-height: 1.55; }
.learn-prompt i { color: var(--success-bright); }

.learn-note {
  margin: 1.15rem 0 0; padding: 0.85rem 1rem; line-height: 1.6;
  border-radius: var(--radius-lg); font-size: 0.92rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}
.learn-note.is-good { background: var(--success-bg); border-color: var(--success-border); }
.learn-note.is-bad { background: var(--danger-bg); border-color: var(--danger-border); }

.lb-controls { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.15rem; }
/* The site's .btn has no disabled treatment of its own, and these widgets lean
   on disabled buttons to say "not yet" — so a dimmed state is load-bearing here
   rather than cosmetic. */
.learn-stage .btn:disabled, .learn-stage .btn[disabled] {
  opacity: 0.45; cursor: not-allowed; filter: saturate(0.5);
}

.lb-explain {
  margin-top: 1.15rem; padding: 1rem 1.15rem; min-height: 6.5rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.lb-explain h4 { margin: 0 0 0.45rem; font-size: 0.98rem; }
.lb-explain p { margin: 0; color: var(--text-2); line-height: 1.65; font-size: 0.92rem; }
.lb-explain-empty { color: var(--text-subtle) !important; font-style: italic; }

/* ── Card tiles ──────────────────────────────────────────────────────────── */
/* The art sits inside .lb-card-frame rather than directly in the figure, so that
   turning a card sideways (exhausted, attacking) rotates only the picture and
   leaves its caption the right way up. The frame also reserves the card's
   aspect ratio up front, so lazily-loaded art does not shift the layout. */
.lb-card { margin: 0; width: 100%; max-width: 150px; }
.lb-card-frame {
  display: block; position: relative; width: 100%;
  aspect-ratio: 744 / 1038; overflow: hidden; border-radius: 4.5%;
  background: var(--surface-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease;
}
.lb-card-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-card-name {
  font-size: 0.72rem; color: var(--text-muted); text-align: center;
  margin-top: 0.35rem; line-height: 1.3;
}
.lb-card-rune, .lb-card-unit { max-width: 108px; }

/* Cards that sit sideways on the table: battlefields (printed landscape, but
   scanned portrait with the design on its side) and any card that is exhausted
   or attacking. Both get a landscape FRAME with the art turned a quarter-turn
   inside it, so the layout box is the shape of what is actually drawn — no
   scaling down, and no dead space above and below. 71.676% is the portrait
   art's short edge as a share of the landscape frame's width (744/1038), which
   makes the rotated picture fill the frame exactly. */
.lb-card--bf { max-width: 220px; }
.lb-card--bf .lb-card-frame,
.lb-rune[data-state="exhausted"] .lb-card-frame,
.lb-unit[data-state="exhausted"] .lb-card-frame,
.lb-unit[data-state="attacking"] .lb-card-frame { aspect-ratio: 1038 / 744; }

.lb-card--bf .lb-card-frame img,
.lb-rune[data-state="exhausted"] .lb-card-frame img,
.lb-unit[data-state="exhausted"] .lb-card-frame img,
.lb-unit[data-state="attacking"] .lb-card-frame img {
  inset: auto; top: 50%; left: 50%;
  width: 71.676%; height: auto;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ── Score track ─────────────────────────────────────────────────────────── */
.lb-scoreboard {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  padding: 0.9rem 1rem; margin-bottom: 1.25rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.lb-score-label, .lb-score-goal { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.lb-score-track { display: flex; gap: 0.3rem; flex: 1 1 auto; }
.lb-score-pip {
  flex: 1 1 0; min-width: 1.6rem; height: 1.9rem;
  display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-subtle); font-size: 0.78rem; font-weight: 700;
  transition: all 0.25s ease;
}
.lb-score-pip.is-scored {
  background: var(--accent-emph); border-color: var(--accent-emph);
  color: var(--on-accent); transform: translateY(-2px);
}

/* ── Battlefields ────────────────────────────────────────────────────────── */
.lb-battlefields { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.lb-bf {
  flex: 1 1 190px; max-width: 230px;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.85rem; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lb-bf.is-yours { border-color: var(--success-border); background: var(--success-bg); }
.lb-bf-owner { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-subtle); }
.lb-bf-state { font-size: 0.8rem; color: var(--text-muted); text-align: center; line-height: 1.4; }
.lb-bf.is-yours .lb-bf-state { color: var(--success-bright); font-weight: 600; }
.lb-bf-units { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; min-height: 0.5rem; }

.is-selecting .lb-bf { cursor: pointer; border-color: var(--accent); }
.is-selecting .lb-bf:hover { background: var(--info-bg); }


/* ── Chapter 2 — card anatomy ────────────────────────────────────────────── */
/* The card is the subject of this chapter, so it gets real size rather than the
   thumbnail treatment the other widgets use. */
/* The card is the subject of this chapter, so it gets the room to be read
   properly — reminder text and all — rather than the thumbnail treatment. */
.lb-anatomy { display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: 1.75rem; align-items: start; }
.lb-anatomy-card { display: flex; justify-content: center; position: sticky; top: 100px; }
.lb-card-hero { width: 440px; max-width: 100%; }
.lb-card-hero .lb-card-name { font-size: 0.82rem; margin-top: 0.5rem; }
.lb-anatomy-side { min-width: 0; }
.lb-chip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem; }
.lb-chip {
  display: flex; align-items: center; gap: 0.65rem; text-align: left;
  padding: 0.6rem 0.75rem; cursor: pointer; font: inherit; color: inherit;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: all 0.15s ease;
}
.lb-chip:hover { border-color: var(--accent); background: var(--info-bg); }
.lb-chip.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--info-border); }
.lb-chip.is-seen .lb-chip-key { color: var(--success-bright); }
.lb-chip-icon {
  flex: 0 0 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
}
.lb-chip-icon .rb-icon { font-size: 1.15rem; }
.lb-chip-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lb-chip-key { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.lb-chip-val { font-size: 0.86rem; font-weight: 600; }

/* The energy cost pip — a number in a circle, matching how it is printed. */
.rb-energy-pip {
  display: inline-grid; place-items: center; vertical-align: middle;
  min-width: 1.35em; height: 1.35em; padding: 0 0.2em;
  border-radius: var(--radius-pill); font-size: 0.85em; font-weight: 800;
  background: var(--text-2); color: var(--bg); line-height: 1;
}
.rb-icon-pip { font-size: 1.15em; vertical-align: middle; }
.lb-explain .rb-icon, .lb-explain .rb-energy-pip,
.learn-note .rb-icon, .learn-note .rb-energy-pip { margin: 0 0.1em; }

/* ── Board map (chapter 3) ───────────────────────────────────────────────── */
/* Six rows, read from their side of the table to yours: their runes, their
   identity + base + decks, the shared battlefields, then your mirror of the
   same, your runes, and your hand nearest you. Their half is drawn small
   because it is a mirror, not a second thing to learn. */
.lb-map { display: grid; gap: 0.6rem; }
.lb-row { display: grid; gap: 0.6rem; }
.lb-row-opp, .lb-row-you { grid-template-columns: 1.5fr 1.5fr 1fr; align-items: stretch; }
.lb-map-middle {
  padding: 1rem; border-radius: var(--radius-lg);
  background: var(--bg-deep); border: 1px dashed var(--border-muted);
}
.lb-zone-tag-center { display: block; text-align: center; margin-bottom: 0.75rem; }

.lb-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.45rem; padding: 0.75rem; text-align: center; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); color: inherit; font: inherit;
  transition: all 0.15s ease;
}
.lb-zone:hover { border-color: var(--accent); background: var(--info-bg); }
.lb-zone.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--info-border); }
.lb-zone.is-seen .lb-zone-tag { color: var(--success-bright); }
/* Their half is present for orientation, not study. */
.lb-zone.is-mini { padding: 0.5rem; opacity: 0.8; }
.lb-zone-base.is-yours { background: var(--info-bg); }
.lb-zone-bf { flex: 1 1 170px; padding: 0.6rem; }
.lb-zone-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.lb-zone-hint { font-size: 0.76rem; color: var(--text-subtle); line-height: 1.35; }

.lb-pair-cards, .lb-base-slots, .lb-hand-fan, .lb-rune-row, .lb-deck-pair {
  display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; width: 100%;
}
.lb-card-mini { width: 42px; flex: 0 0 42px; max-width: 42px; }
.lb-card-small { width: 68px; flex: 0 0 68px; max-width: 68px; }
.lb-card-mini .lb-card-name, .lb-card-small .lb-card-name { display: none; }

.lb-deck-face {
  width: 2.4rem; min-height: 3.2rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.15rem;
  border-radius: var(--radius-md); background: var(--surface);
  border: 1px solid var(--border-muted); color: var(--text-muted); font-size: 0.9rem;
}
.lb-deck-face em { font-style: normal; font-size: 0.6rem; color: var(--text-subtle); }
.is-mini .lb-deck-face { min-height: 2.2rem; width: 1.9rem; }

.lb-mini-rune {
  width: 1.8rem; height: 2.5rem; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--border-muted);
}
.lb-mini-rune.is-exhausted { transform: rotate(90deg); opacity: 0.6; }
.lb-rune-deck-face { color: var(--text-muted); }
.is-mini .lb-mini-rune { width: 1.4rem; height: 2rem; }

/* ── Rune payment (chapter 4) ────────────────────────────────────────────── */
.lb-scenario-dots { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0 0 1.1rem; flex-wrap: wrap; }
.lb-scenario-dot {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border); opacity: 0.6;
}
.lb-scenario-dot span {
  width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--border-muted); font-size: 0.72rem; font-weight: 700;
}
.lb-scenario-dot em { font-style: normal; font-size: 0.78rem; color: var(--text-muted); }
.lb-scenario-dot.is-current { opacity: 1; border-color: var(--accent); }
.lb-scenario-dot.is-current span { background: var(--accent-emph); border-color: var(--accent-emph); color: var(--on-accent); }
.lb-scenario-dot.is-done { opacity: 1; border-color: var(--success-border); }
.lb-scenario-dot.is-done span { background: var(--success-bg); border-color: var(--success-border); color: var(--success-bright); }

.lb-pay { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 1.5rem; align-items: start; }
.lb-pay-target { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.lb-card-target { width: 190px; max-width: 100%; }
.lb-cost { width: 100%; }
.lb-cost-line {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.5rem 0.65rem;
}
.lb-cost-pips { display: inline-flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.lb-cost-inline { display: inline-flex; align-items: center; gap: 0.15rem; vertical-align: middle; }
.lb-cost-met { margin-left: auto; color: var(--text-subtle); opacity: 0.35; }
.lb-cost-met.is-met { color: var(--success-bright); opacity: 1; }

.lb-pool-readout { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.lb-pool-stat {
  font-size: 0.85rem; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.35rem 0.65rem;
}
.lb-pool-stat b { color: var(--text); font-size: 1rem; margin-right: 0.2rem; }
.lb-dom-fury b { color: #e8705f; }
.lb-dom-chaos b { color: #c084fc; }
.lb-pool-used { margin-left: auto; }

.lb-runes { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.lb-rune {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.55rem; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: opacity 0.25s ease;
}
/* A rune's frame changes shape when it is exhausted (portrait becomes
   landscape), so the art gets a fixed slot to sit in — otherwise the captions
   and the Exhaust/Recycle buttons sit at a different height on every tile. */
.lb-rune .lb-card {
  width: 108px; min-height: 172px;
  display: flex; flex-direction: column; justify-content: center;
}
/* Exhausted runes are turned sideways but still in the pool — they can still be
   recycled, which is the whole point of this chapter. Recycled ones are gone. */
.lb-rune[data-state="exhausted"] { opacity: 0.85; border-color: var(--border-muted); }
.lb-rune[data-state="recycled"] { opacity: 0.32; }
.lb-rune[data-state="recycled"] .lb-card-frame { filter: grayscale(1); }
.lb-rune-actions { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; }
.lb-rune-btn {
  font: inherit; font-size: 0.72rem; cursor: pointer;
  padding: 0.28rem 0.4rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-muted); color: var(--text-2);
}
.lb-rune-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.lb-rune-btn:disabled { opacity: 0.3; cursor: default; }
.lb-rune-state { font-size: 0.68rem; color: var(--text-subtle); text-align: center; min-height: 2.6em; line-height: 1.3; }
.is-played .lb-card-target .lb-card-frame { box-shadow: 0 0 0 2px var(--success); }
.is-stuck .lb-card-target .lb-card-frame { box-shadow: 0 0 0 2px var(--danger); }
.is-stuck [data-reset] { border-color: var(--danger); color: var(--danger); }

/* ── Turn stepper (chapter 5) ────────────────────────────────────────────── */
.lb-turn { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.25rem; align-items: start; }
.lb-turn-board { display: grid; gap: 0.85rem; }
/* Sized to content — a stretched rune tray is mostly empty box. */
.lb-turn-row { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0.85rem; align-items: stretch; }
.lb-turn-legend, .lb-turn-runes {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.7rem; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
}
.lb-turn-runes { justify-content: center; }
.lb-rune-strip { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.lb-strip-rune {
  width: 2.1rem; height: 2.9rem; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--border-muted); font: inherit;
  transition: transform 0.25s ease, opacity 0.25s ease, border-color 0.15s ease;
}
.lb-strip-rune[data-state="exhausted"] { transform: rotate(90deg); opacity: 0.55; }
.lb-strip-rune .rb-icon { font-size: 1.3rem; }
/* During Awaken the exhausted cards are the thing to click, so say so. */
.is-awakening [data-state="exhausted"] { cursor: pointer; }
.is-awakening .lb-strip-rune[data-state="exhausted"] { border-color: var(--accent); }
.is-awakening .lb-unit[data-state="exhausted"] .lb-card-frame { box-shadow: 0 0 0 2px var(--accent); }

.lb-turn-aside { display: grid; gap: 0.9rem; }
.lb-phases { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.lb-phase {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  opacity: 0.55; transition: all 0.2s ease;
}
.lb-phase.is-current { opacity: 1; border-color: var(--accent); background: var(--info-bg); }
.lb-phase.is-past { opacity: 1; border-color: var(--success-border); }
.lb-phase-letter {
  flex: 0 0 1.7rem; height: 1.7rem; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--surface);
  border: 1px solid var(--border-muted); font-weight: 800; font-size: 0.85rem;
}
.lb-phase.is-past .lb-phase-letter { background: var(--success-bg); color: var(--success-bright); }
.lb-phase-body { display: flex; flex-direction: column; gap: 0.1rem; }
.lb-phase-body b { font-size: 0.88rem; }
.lb-phase-body span { font-size: 0.79rem; color: var(--text-muted); line-height: 1.4; }
.lb-turn-state {
  padding: 0.85rem 1rem; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
}
.lb-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 0.3rem 0; }
.lb-stat + .lb-stat { border-top: 1px solid var(--border); }
.lb-stat-key { font-size: 0.82rem; color: var(--text-muted); }
.lb-stat b { font-size: 1.05rem; }

/* The Beginning phase's triggers — resolved in whatever order you pick. */
.lb-triggers {
  padding: 0.85rem; border-radius: var(--radius-lg);
  background: var(--warning-bg); border: 1px solid var(--warning-border);
}
.lb-triggers-tag {
  display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--warning-bright); margin-bottom: 0.55rem;
}
.lb-trigger-list { display: grid; gap: 0.4rem; }
.lb-trigger {
  display: flex; flex-direction: column; gap: 0.15rem; text-align: left;
  padding: 0.55rem 0.7rem; cursor: pointer; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border-muted);
  border-radius: var(--radius-md); transition: all 0.15s ease;
}
.lb-trigger:hover { border-color: var(--accent); background: var(--info-bg); }
.lb-trigger b { font-size: 0.85rem; }
.lb-trigger span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
/* An optional trigger ("you may…") is not a single click — it is a decision, so
   it carries its own take-it / leave-it buttons instead of being one target. */
.lb-trigger.is-optional { cursor: default; }
.lb-trigger.is-optional:hover { border-color: var(--border-muted); background: var(--surface); }
.lb-trigger-actions { display: flex; gap: 0.4rem; margin-top: 0.45rem; flex-wrap: wrap; }
.lb-trigger-btn {
  flex: 1 1 auto; font: inherit; font-size: 0.76rem; cursor: pointer;
  padding: 0.35rem 0.6rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-muted); color: var(--text-2);
}
.lb-trigger-btn:hover { border-color: var(--accent); color: var(--text); }
.lb-trigger-btn.is-yes { background: var(--info-bg); border-color: var(--info-border); color: var(--text); }
.lb-trigger-btn.is-yes:hover { border-color: var(--accent); }

/* Flags that a chapter is using a different deck from the rest of the guide. */
.lb-deck-note {
  display: flex; align-items: flex-start; gap: 0.55rem;
  margin: 0 0 1.1rem; padding: 0.6rem 0.8rem;
  font-size: 0.85rem; line-height: 1.55; color: var(--text-muted);
  background: var(--surface-2); border: 1px dashed var(--border-muted);
  border-radius: var(--radius-md);
}
.lb-deck-note > i { flex: 0 0 auto; color: var(--accent); margin-top: 0.2rem; }
.lb-deck-note b { color: var(--text-2); }

/* ── Chapter 6 — your hand ───────────────────────────────────────────────── */
.lb-hand {
  padding: 0.85rem; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.lb-hand-cards { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.lb-hand-item { width: 108px; transition: transform 0.2s ease; }
.lb-hand-item.is-drawn { animation: lb-drawn 0.5s ease; }
@keyframes lb-drawn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* While the Merchant's trigger is waiting, the hand is the only live thing. */
.is-discarding .lb-hand { border-color: var(--warning); box-shadow: 0 0 0 2px var(--warning-border); }
.is-discarding .lb-hand-item { cursor: pointer; }
.is-discarding .lb-hand-item:hover { transform: translateY(-6px); }
.is-discarding .lb-hand-item:hover .lb-card-frame { box-shadow: 0 0 0 2px var(--danger); }

/* ── Units, movement and combat (chapters 6 & 7) ─────────────────────────── */
.lb-field { display: flex; flex-direction: column; gap: 1.25rem; }
.lb-base {
  padding: 0.9rem; border-radius: var(--radius-lg);
  background: var(--info-bg); border: 1px solid var(--info-border);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.lb-unit { position: relative; width: 108px; cursor: pointer; transition: transform 0.25s ease, opacity 0.25s ease; }

.lb-unit[data-state="exhausted"] { cursor: default; }
.lb-unit.is-selected { transform: translateY(-6px); }
.lb-unit.is-selected .lb-card-frame { box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(0, 0, 0, 0.45); }
.lb-unit.is-dead { opacity: 0.28; }
.lb-unit.is-dead .lb-card-frame { filter: grayscale(1); }
.lb-unit-might {
  position: absolute; top: -0.4rem; left: -0.4rem; z-index: 2;
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 800;
  background: var(--surface); border: 2px solid var(--border-muted); color: var(--text);
}
.lb-unit.is-buffed .lb-unit-might { border-color: var(--success); color: var(--success-bright); }
.lb-unit-damage {
  position: absolute; bottom: 1.3rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 0.7rem; font-weight: 700;
  background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger);
  border-radius: var(--radius-pill); padding: 0.15rem 0.5rem;
}

.lb-combat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: center; }
.lb-combat-side {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  padding: 0.9rem; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
}
.lb-combat-def { border-color: var(--danger-border); }
.lb-combat-atk { border-color: var(--info-border); flex-direction: column; }
.lb-side-units { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
/* A stunned unit is present and can still be damaged — it just contributes
   nothing — so it is dimmed rather than greyed out like a dead one. */
.lb-unit.is-stunned .lb-card-frame { filter: saturate(0.35); }
.lb-unit.is-stunned { opacity: 0.8; }
.lb-unit-mods {
  display: block; margin-top: 0.25rem; font-size: 0.66rem; line-height: 1.3;
  color: var(--warning-bright); text-align: center;
}
.lb-side-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); text-align: center; }
.lb-side-total { font-size: 0.82rem; color: var(--text-muted); margin-top: auto; }
.lb-side-total b { color: var(--text); font-size: 1.05rem; }
.lb-combat-bf { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.lb-combat-bf.is-yours .lb-bf-state { color: var(--success-bright); font-weight: 600; }
.is-engaged .lb-combat { gap: 0.75rem; }

.lb-choices { display: grid; gap: 0.6rem; margin-top: 1.15rem; }
.lb-choice, .lb-try {
  display: flex; flex-direction: column; gap: 0.25rem; text-align: left;
  padding: 0.85rem 1rem; cursor: pointer; font: inherit; color: inherit;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: all 0.15s ease;
}
.lb-choice:hover, .lb-try:hover { border-color: var(--accent); background: var(--info-bg); }
.lb-choice span, .lb-try-sub { font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }

/* ── Chapter 7 — timing speeds ───────────────────────────────────────────── */
.lb-moment {
  padding: 0.85rem 1rem; margin-bottom: 0.9rem;
  border-radius: var(--radius-lg);
  background: var(--bg-deep); border: 1px solid var(--border-muted);
}
.lb-moment-tag {
  display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-bright); margin-bottom: 0.35rem;
}
.lb-moment-text { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-2); }
.lb-speeds-help { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--text-muted); }

.lb-speed-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.75rem; }
.lb-speed-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.85rem 0.75rem; cursor: pointer; text-align: center;
  border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: all 0.15s ease;
}
.lb-speed-card:hover { border-color: var(--accent); }
/* Picked = "I could play this now". The choice has to read at a glance, since
   the whole exercise is comparing three cards against one moment. */
.lb-speed-card[data-picked="1"] { border-color: var(--accent); background: var(--info-bg); }
.lb-speed-card[data-picked="1"] .lb-card-frame { box-shadow: 0 0 0 2px var(--accent); }
.lb-speed-card.is-right { border-color: var(--success-border); background: var(--success-bg); }
.lb-speed-card.is-wrong { border-color: var(--danger-border); background: var(--danger-bg); }
.lb-speed-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border-muted); color: var(--text-muted);
}
.lb-speed-action { color: var(--warning-bright); border-color: var(--warning-border); }
.lb-speed-reaction { color: var(--accent-bright); border-color: var(--info-border); }
.lb-speed-text { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.lb-speed-mark { font-size: 0.74rem; font-weight: 700; min-height: 1.2em; color: var(--text-subtle); }
.lb-speed-card.is-right .lb-speed-mark { color: var(--success-bright); }
.lb-speed-card.is-wrong .lb-speed-mark { color: var(--danger); }

/* ── Chapter 8 — the chain ───────────────────────────────────────────────── */
.lb-chain-scene { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 1.5rem; align-items: start; }
.lb-chain-target {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.9rem; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--danger-border);
}
.lb-chain-status { font-size: 0.8rem; color: var(--text-muted); text-align: center; }
.lb-chain-status.is-dead { color: var(--danger); font-weight: 600; }
.lb-chain-sub { font-size: 0.7rem; color: var(--warning-bright); text-align: center; }
.lb-chain-target .lb-card.is-dead .lb-card-frame { filter: grayscale(1); opacity: 0.45; }
/* A triggered ability is not a card anyone chose to play; mark it apart from
   the spells so the chain reads as a mix of both. */
.lb-link .lb-link-meta { white-space: nowrap; }
.lb-chain { display: flex; flex-direction: column; gap: 0.5rem; }
.lb-chain-heading { text-align: center; }
/* column-reverse is deliberate: links are appended newest-last in the DOM, and
   the stack has to grow upward so "resolves from the top" is literally true. */
.lb-chain-stack {
  display: flex; flex-direction: column; gap: 0.5rem;
  min-height: 8rem; padding: 0.75rem; border-radius: var(--radius-lg);
  background: var(--bg-deep); border: 1px dashed var(--border-muted);
}
.lb-chain-empty { margin: auto; font-size: 0.85rem; color: var(--text-subtle); font-style: italic; }
.lb-chain-arrow { font-size: 0.76rem; color: var(--text-subtle); text-align: center; }

.lb-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--border-muted);
  animation: lb-link-in 0.3s ease;
}
@keyframes lb-link-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lb-link.is-you { border-left: 3px solid var(--accent); }
.lb-link.is-them { border-left: 3px solid var(--danger); }
.lb-link.is-resolved { opacity: 0.4; }
.lb-link-no {
  flex: 0 0 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--surface-2);
  border: 1px solid var(--border-muted); font-size: 0.72rem; font-weight: 700;
}
.lb-card-link { width: 44px; flex: 0 0 44px; }
.lb-card-link .lb-card-name { display: none; }
.lb-link-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lb-link-body b { font-size: 0.86rem; }
.lb-link-meta { font-size: 0.72rem; color: var(--text-subtle); }
.lb-link-text { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.lb-link-done {
  margin-left: auto; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--success-bright);
}

/* ── Damage vs might ─────────────────────────────────────────────────────── */
.lb-dmg { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 1.5rem; align-items: start; }
.lb-dmg-target { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.lb-dmg-target .lb-card-target { width: 180px; }
.lb-dmg-target .lb-card.is-dead .lb-card-frame { filter: grayscale(1); opacity: 0.45; }
.lb-dmg-stats { display: flex; gap: 0.5rem; width: 100%; }
.lb-dmg-stat {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  padding: 0.5rem 0.4rem; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.lb-dmg-stat em {
  font-style: normal; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.lb-dmg-stat b { font-size: 1.3rem; line-height: 1; }
/* Shows the working when a keyword is changing the number you have to beat. */
.lb-dmg-stat small {
  font-size: 0.66rem; color: var(--warning-bright); line-height: 1.2; text-align: center;
}
/* Damage gets its own colour throughout, because keeping it visually distinct
   from might is the entire lesson. */
.lb-dmg-stat.is-damage { border-color: var(--danger-border); background: var(--danger-bg); }
.lb-dmg-stat.is-damage b { color: var(--danger); }
.lb-dmg-verdict {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--success-bright);
}
.lb-dmg-verdict.is-dead { color: var(--danger); }

.lb-dmg-side { display: grid; gap: 0.9rem; }
.lb-rule {
  display: grid; gap: 0.5rem;
  padding: 0.85rem 1rem; border-radius: var(--radius-lg);
  background: var(--bg-deep); border: 1px solid var(--border-muted);
}
.lb-rule-tag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
}
.lb-rule-parts { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lb-rule-part {
  padding: 0.35rem 0.7rem; border-radius: var(--radius-md); font-size: 0.86rem;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
  transition: all 0.2s ease;
}
/* Both halves light independently — a unit can satisfy one and live. */
.lb-rule-part.is-met {
  background: var(--success-bg); border-color: var(--success-border); color: var(--success-bright);
}
.lb-rule-and { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); }
.lb-rule-verdict { font-size: 0.84rem; color: var(--text-muted); }
.lb-rule-verdict.is-dead { color: var(--danger); font-weight: 600; }

.lb-dmg-actions { display: grid; gap: 0.55rem; }
.lb-dmg-action {
  display: flex; align-items: center; gap: 0.8rem; text-align: left;
  padding: 0.6rem 0.75rem; cursor: pointer; font: inherit; color: inherit;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: all 0.15s ease;
}
.lb-dmg-action:hover:not(:disabled) { border-color: var(--accent); background: var(--info-bg); }
.lb-dmg-action:disabled { opacity: 0.4; cursor: not-allowed; }
.lb-card-act { width: 52px; flex: 0 0 52px; }
.lb-card-act .lb-card-name { display: none; }
.lb-dmg-action-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lb-dmg-action-body b { font-size: 0.88rem; }
.lb-dmg-action-body span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }

/* ── Endgame (chapter 8) ─────────────────────────────────────────────────── */
.lb-tries { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; margin-top: 1.25rem; }
.lb-try { flex-direction: row; align-items: center; gap: 0.85rem; }
.lb-try-card { flex: 0 0 auto; }
.lb-try-card { display: flex; gap: 0.3rem; }
.lb-try-card .lb-card { width: 64px; flex: 0 0 64px; max-width: 64px; }
.lb-try-card .lb-card-name { display: none; }
.lb-try-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.lb-try-head { font-weight: 600; font-size: 0.9rem; }
.lb-try.is-win { border-color: var(--success-border); background: var(--success-bg); }
.lb-try.is-blocked { border-color: var(--danger-border); background: var(--danger-bg); }

/* ── Takeaway + pager ────────────────────────────────────────────────────── */
.learn-takeaway {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1rem 1.15rem; margin-bottom: 1.5rem;
  border-left: 3px solid var(--warning);
  background: var(--warning-bg); border-radius: var(--radius-lg);
}
.learn-takeaway.is-revealed { border-left-color: var(--success); }
.learn-takeaway-tag {
  flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--warning-bright); white-space: nowrap; margin-top: 0.15rem;
}
.learn-takeaway p { margin: 0; line-height: 1.6; color: var(--text-2); }

.learn-pager { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.learn-pager .btn { flex: 0 1 auto; }
#learn-next.is-ready { box-shadow: 0 0 0 3px var(--success-border); }
.learn-outro h3 { margin-top: 0; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */
/* Phones get real layout changes, not just smaller type: the widgets that read
   as side-by-side boards on a desktop become vertical lists, and every control
   is sized for a thumb rather than a cursor. */
@media (max-width: 760px) {
  .learn-hero { padding: 1.5rem 1.1rem; }
  .learn-stage { padding: 0.9rem 0.75rem; }
  .learn-prompt { padding: 0.75rem 0.85rem; }
  .learn-prompt-step { align-self: flex-start; }

  /* Controls sized for touch: 44px is the smallest comfortable tap target. */
  .lb-controls .btn, .lb-rune-btn, .lb-chip, .lb-try, .lb-choice, .lb-zone,
  .lb-bf .btn { min-height: 44px; }
  .lb-controls { gap: 0.5rem; }
  .lb-controls .btn { flex: 1 1 auto; justify-content: center; }

  /* Chapter 4 — the rune pool reads as a list on a phone: art, then the two
     actions side by side, then the rune's current state underneath. */
  .lb-anatomy { grid-template-columns: 1fr; gap: 1rem; }
  .lb-card-hero { width: 100%; max-width: 320px; }
  .lb-anatomy-card { position: static; }
  .lb-chip-grid { grid-template-columns: 1fr; }
  .lb-pay { grid-template-columns: 1fr; gap: 1rem; }
  .lb-pay-target { flex-direction: row; align-items: center; gap: 0.9rem; }
  .lb-pay-target .lb-card-target { flex: 0 0 108px; width: 108px; max-width: 108px; }
  .lb-scenario-dot em { display: none; }
  .lb-pool-used { margin-left: 0; }
  .lb-cost { flex: 1 1 auto; }
  .lb-runes { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
  .lb-rune { flex-direction: row; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 0.65rem; }
  .lb-rune .lb-card { flex: 0 0 70px; width: 70px; max-width: 70px; min-height: 0; }
  .lb-rune .lb-card-name { display: none; }
  .lb-rune-actions { flex: 1 1 auto; flex-direction: row; width: auto; gap: 0.4rem; }
  .lb-rune-btn { flex: 1 1 0; font-size: 0.8rem; }
  .lb-rune-state { flex: 1 0 100%; text-align: left; min-height: 0; }
  .lb-pool-readout { gap: 0.4rem; }
  .lb-pool-stat { flex: 1 1 auto; text-align: center; font-size: 0.78rem; }

  /* Chapter 5 — phases above the running state, not beside it. */
  .lb-turn { grid-template-columns: 1fr; gap: 0.9rem; }
  .lb-turn-state { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.9rem; }
  .lb-stat + .lb-stat { border-top: none; }
  .lb-turn-row { grid-template-columns: 1fr; }


  /* Chapters 6 & 7 — the board reads top to bottom: them, the ground, you. */
  .lb-combat { grid-template-columns: 1fr; gap: 0.75rem; }
  .lb-combat-side { padding: 0.75rem; }
  .lb-combat-atk { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
  .lb-combat-atk .lb-side-tag, .lb-combat-atk .lb-side-total { flex: 1 0 100%; text-align: center; }
  .lb-side-units { gap: 0.4rem; }
  .lb-battlefields { gap: 0.6rem; }
  .lb-bf { flex: 1 1 calc(50% - 0.3rem); padding: 0.6rem 0.5rem; }
  .lb-bf-owner, .lb-bf-state { font-size: 0.72rem; }
  .lb-bf-owner { min-height: 2.4em; display: flex; align-items: center; text-align: center; }
  .lb-bf .btn { width: 100%; }

  /* Chapter 3 — legends shrink so the map is not mostly portrait art, and the
     two battlefields stay side by side the way they sit on a table. */
  .lb-map { gap: 0.45rem; }
  .lb-map-middle { padding: 0.7rem 0.6rem; }
  .lb-zone { padding: 0.6rem 0.5rem; }
  .lb-row-opp, .lb-row-you { grid-template-columns: 1fr 1fr; }
  .lb-row-you .lb-zone-base, .lb-row-opp .lb-zone-base { grid-column: 1 / -1; order: -1; }
  .lb-card-small { width: 56px; flex: 0 0 56px; max-width: 56px; }
  .lb-card-mini { width: 34px; flex: 0 0 34px; max-width: 34px; }
  .lb-zone-bf { flex: 1 1 calc(50% - 0.3rem); padding: 0.4rem; }
  .lb-deck-face { width: 2rem; height: 2rem; }

  /* Cards and the score track scale down together. */
  .lb-card, .lb-card-rune, .lb-card-unit { max-width: 104px; }
  .lb-unit, .lb-hand-item { width: 96px; }
  .lb-bf .lb-card--bf, .lb-zone-bf .lb-card--bf { max-width: 100%; }
  .lb-combat-bf .lb-card--bf { max-width: 200px; }
  .lb-score-pip { min-width: 1.15rem; height: 1.7rem; font-size: 0.68rem; }
  .lb-scoreboard { gap: 0.5rem 0.75rem; padding: 0.7rem 0.75rem; }
  .lb-score-label, .lb-score-goal { font-size: 0.74rem; }
  .lb-score-track { flex: 1 0 100%; order: 3; }

  .lb-explain { padding: 0.85rem 0.9rem; min-height: 0; }
  .lb-tries { grid-template-columns: 1fr; }
  .lb-speed-cards { grid-template-columns: 1fr; }
  /* Card on the left with its label, text and verdict stacked beside it. Grid
     areas rather than flex order, so the source order can stay as it reads. */
  .lb-speed-card {
    display: grid; grid-template-columns: 84px 1fr; gap: 0.3rem 0.85rem;
    grid-template-areas: "card label" "card text" "card mark";
    align-items: start; text-align: left;
  }
  .lb-speed-card .lb-card { grid-area: card; width: 84px; max-width: 84px; align-self: center; }
  .lb-speed-label { grid-area: label; justify-self: start; }
  .lb-speed-text { grid-area: text; }
  .lb-speed-mark { grid-area: mark; }
  .lb-chain-scene { grid-template-columns: 1fr; gap: 1rem; }
  .lb-dmg { grid-template-columns: 1fr; gap: 1rem; }
  .lb-dmg-target { flex-direction: row; align-items: center; gap: 0.85rem; }
  .lb-dmg-target .lb-card-target { width: 104px; flex: 0 0 104px; }
  .lb-dmg-stats { flex-direction: column; }
  .lb-rule-parts { flex-direction: column; align-items: stretch; gap: 0.35rem; }
  .lb-rule-and { text-align: center; }
  .lb-chain-target { flex-direction: row; justify-content: center; }
  .lb-link { padding: 0.5rem 0.6rem; gap: 0.55rem; }
  .lb-link-done { display: none; }

  /* Stacked so neither the label nor the sentence gets squeezed to a column. */
  .learn-takeaway { flex-direction: column; gap: 0.4rem; padding: 0.85rem 0.9rem; }
  .learn-pager { flex-direction: column; }
  .learn-pager .btn { width: 100%; justify-content: center; }
  .learn-chapter-card { padding: 0.75rem 0.85rem; gap: 0.75rem; }
  .learn-rail { gap: 0.3rem; }
  .learn-rail-item a { width: 1.7rem; height: 1.7rem; font-size: 0.75rem; }
}

/* Very narrow phones: one battlefield per row rather than two cramped ones. */
@media (max-width: 380px) {
  .lb-bf, .lb-zone-bf { flex: 1 1 100%; }
  .lb-pay-target { flex-direction: column; align-items: stretch; }
  .lb-pay-target .lb-card { align-self: center; }
}


/* Keyboard focus has to be visible on the card-shaped controls too — they are
   divs with role="button", so they get no focus ring of their own. */
.lb-unit:focus-visible .lb-card-frame,
.lb-bf:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lb-zone:focus-visible, .lb-chip:focus-visible,
.lb-choice:focus-visible, .lb-try:focus-visible,
.lb-rune-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lb-card-frame, .lb-unit, .lb-score-pip, .learn-progress-fill,
  .lb-phase, .lb-zone, .lb-choice, .lb-try { transition: none !important; }
}