/* ==========================================================================
   Help & Tips View — css/help.css
   Full-page help screen with strategy tips.
   ========================================================================== */

/* ---------- Layout ---------- */

.help-view {
  display: none;
  flex-direction: column;
  /* Fill #app's content box as a flex child rather than claiming full viewport.
     A height:100dvh child overflows #app's padding-top and clips its own bottom
     (PR #410 / css-guardian §8); flex:1 + min-height:0 mirrors .settings-view. */
  flex: 1;
  min-height: 0;
  /* Outer container no longer scrolls — .help-topic-list is the scroll region
     so .help-view-header + .help-toolbar stay pinned at the top. */
  overflow: hidden;
  /* Transparent — body's --page-gradient flows through for env continuity. */
  color: var(--text-primary);
  /* Top padding intentionally 0 — #app already supplies `0.5rem + safe-area-inset-top`;
     adding another safe-area-inset-top here double-counted the notch (sibling .sounds-view convention). */
  padding:
    0
    calc(20px + env(safe-area-inset-right))
    env(safe-area-inset-bottom)
    calc(20px + env(safe-area-inset-left));
}

/* ---------- Header ---------- */

.help-view-header {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 0;
  position: relative;
  flex-shrink: 0;
}

.help-view-header .settings-pill {
  margin-left: auto;
}

.help-view-header .back-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  padding: 8px 0;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.help-view-header h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   Accordion (How to Play redesign)
   Three regions inside .help-view: header + toolbar never scroll; only
   .help-topic-list scrolls. Hero accent + [data-family] flip inherit the
   live env/palette (Help is a read-only consumer — no appearance control).
   ========================================================================== */

/* ---------- Toolbar (never scrolls) ---------- */

.help-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.18));
}

.help-expand-all {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;          /* 44px touch target (glyph stays ~22px, centered) */
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--accent-primary, var(--text-secondary));
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.help-expand-all:active { opacity: 0.6; }

/* Dark family: palette-base accent hue-rhymes with the env wash, so accent
   strokes switch to --mist-tint (palette-decoupled tinted white) for legibility
   — same remedy applied throughout this surface. */
[data-family="dark"] .help-expand-all { color: var(--mist-tint); }

/* ---------- Topic list (the ONLY scroller) ---------- */

.help-topic-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0 24px;
}

/* ---------- Accordion item + collapsed row ---------- */

.help-topic + .help-topic {
  border-top: 1px solid var(--border-color, rgba(128, 128, 128, 0.14));
}

.help-topic-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 2px;
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.help-topic-tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--accent-primary, var(--text-secondary));
  background: color-mix(in srgb, var(--accent-primary, #888) 12%, transparent);
  transition: background 180ms ease, color 180ms ease;
}

[data-family="dark"] .help-topic-tile { color: var(--mist-tint); }

/* Open: tile fills with the hero gradient and the icon turns white. */
.help-topic.is-open .help-topic-tile {
  color: #fff;
  background: linear-gradient(148deg,
    var(--piece-hero-highlight, var(--accent-primary, #888)) 0%,
    var(--piece-hero-base, var(--accent-primary, #888)) 42%,
    var(--piece-hero-shadow, var(--accent-primary, #555)) 100%);
}

.help-topic-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.help-topic-title {
  font-size: 0.97rem;                 /* ~15.5px */
  font-weight: 650;
  line-height: 1.25;
  color: var(--text-primary);
}

.help-topic-preview {
  font-size: 0.78rem;                 /* ~12.5px */
  line-height: 1.3;
  color: var(--text-secondary);
  overflow: hidden;
  max-height: 1.5em;
  transition: max-height 180ms ease, opacity 160ms ease;
}

/* Preview collapses to nothing when open (only useful while scanning). */
.help-topic.is-open .help-topic-preview {
  max-height: 0;
  opacity: 0;
}

.help-topic-caret {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: color-mix(in srgb, var(--text-secondary) 62%, transparent);
  transition: transform 180ms ease, color 180ms ease;
}

.help-topic.is-open .help-topic-caret {
  transform: rotate(180deg);
  color: var(--accent-primary, var(--text-secondary));
}

[data-family="dark"] .help-topic.is-open .help-topic-caret { color: var(--mist-tint); }

/* ---------- Accordion body (grid-rows 0fr→1fr expand; no magic heights) ---------- */

.help-topic-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.help-topic.is-open .help-topic-body {
  grid-template-rows: 1fr;
}

/* The animated grid child must be padding/border-free so it collapses to exactly
   0fr → 0px (padding on it leaks an ~18px sliver of the first line). */
.help-topic-body-inner {
  overflow: hidden;
  min-height: 0;
}

/* Gutter padding lives on the nested wrapper; overflow:hidden above clips it
   while collapsed. Body uses the full content gutter (NOT hang-indented). */
.help-topic-body-content {
  padding: 0 2px 18px;
}

.help-body-para {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

@media (prefers-reduced-motion: reduce) {
  .help-topic-body,
  .help-topic-preview,
  .help-topic-caret,
  .help-topic-tile { transition: none; }
}

/* ---------- Topic body content ---------- */

/* Hero-accented inline words. Dark family flips to --mist-tint for legibility. */
.help-accent {
  color: var(--accent-primary, var(--text-primary));
  font-weight: 600;
}
[data-family="dark"] .help-accent { color: var(--mist-tint); }

/* Centered italic hero caption under the place→clear diagram ("You complete me"). */
.help-diagram-caption {
  text-align: center;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--accent-primary, var(--text-secondary));
  margin: -4px 0 14px;
}
[data-family="dark"] .help-diagram-caption { color: var(--mist-tint); }

/* "Tip" callout — a soft card. Translucent so the env gradient shows through. */
.help-callout {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-secondary, rgba(128, 128, 128, 0.08));
  border: 1px solid var(--border-color, rgba(128, 128, 128, 0.14));
}

.help-callout-tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-primary, var(--text-secondary));
  margin-bottom: 4px;
}
[data-family="dark"] .help-callout-tag { color: var(--mist-tint); }

.help-callout-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
}

/* Beat-the-bot mini-cards (Shared / Scored). */
.help-mini-cards {
  display: flex;
  gap: 10px;
  margin: 12px 0 4px;
}

.help-mini-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-secondary, rgba(128, 128, 128, 0.08));
  border: 1px solid var(--border-color, rgba(128, 128, 128, 0.14));
}

.help-mini-label {
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: color-mix(in srgb, var(--text-secondary) 62%, transparent);
  margin-bottom: 4px;
}

.help-mini-value {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Sound mode cards (Musical / Freeform). */
.help-mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-secondary, rgba(128, 128, 128, 0.08));
  border: 1px solid var(--border-color, rgba(128, 128, 128, 0.14));
}

.help-mode-tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--accent-primary, var(--text-secondary));
  background: color-mix(in srgb, var(--accent-primary, #888) 12%, transparent);
}
[data-family="dark"] .help-mode-tile { color: var(--mist-tint); }

.help-mode-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.help-mode-name { font-size: 0.9rem; font-weight: 650; color: var(--text-primary); }
.help-mode-desc { font-size: 0.8rem; line-height: 1.35; color: var(--text-secondary); }

/* Insights demo — three pieces, each with a dot beneath; legend line. */
.help-insights-demo {
  margin: 12px 0;
  padding: 14px 12px 12px;
  border-radius: 12px;
  background: var(--bg-secondary, rgba(128, 128, 128, 0.08));
  border: 1px solid var(--border-color, rgba(128, 128, 128, 0.14));
}

.help-insights-pieces {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 8px;
}

.help-insights-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;            /* dot sits BELOW the piece, matching the live game */
}

.help-insights-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary, var(--text-secondary));
  flex: 0 0 auto;
}
[data-family="dark"] .help-insights-dot { background: var(--mist-tint); }
.help-insights-dot.is-empty { background: transparent; }

.help-insights-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* Bonus column in the scoring table reads in hero color. */
.help-scoring-reward { color: var(--accent-primary, var(--text-secondary)); }
[data-family="dark"] .help-scoring-reward { color: var(--mist-tint); }

/* Difficulty-selector mount (filled by js/help/difficulty-selector.js). */
.help-difficulty-mount { margin: 12px 0; }

/* ---------- Interactive difficulty selector ---------- */

.help-difficulty { margin: 4px 0; }

/* Segmented pill control (radiogroup); selected segment = hero gradient. */
.help-diff-segments {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-secondary, rgba(128, 128, 128, 0.1));
  border: 1px solid var(--border-color, rgba(128, 128, 128, 0.14));
}

.help-diff-segment {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 8px 4px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease;
}

.help-diff-segment.is-selected {
  color: #fff;
  background: linear-gradient(148deg,
    var(--piece-hero-highlight, var(--accent-primary, #888)) 0%,
    var(--piece-hero-base, var(--accent-primary, #888)) 42%,
    var(--piece-hero-shadow, var(--accent-primary, #555)) 100%);
}

/* Count meter + progress bar. */
.help-diff-meter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 6px;
}

.help-diff-count-num {
  font-size: 1.6rem;            /* ~26px */
  font-weight: 700;
  line-height: 1;
  color: var(--accent-primary, var(--text-primary));
}
[data-family="dark"] .help-diff-count-num { color: var(--mist-tint); }

.help-diff-count-unit { font-size: 0.85rem; color: var(--text-secondary); }

.help-diff-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-secondary, rgba(128, 128, 128, 0.15));
  overflow: hidden;
}

.help-diff-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--piece-hero-base, var(--accent-primary, #888)),
    var(--piece-hero-highlight, var(--accent-primary, #888)));
  transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.help-diff-caption {
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 10px 0 12px;
}

/* Piece pool — ONE flat flowing container; every piece sits in a uniform slot
   and the pool wraps naturally. Pieces are ghosted (low opacity) until the
   level reaches them; the just-added pieces get a soft hero highlight + a slight
   pop. No group boxes (those crammed the pieces). */
.help-diff-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-start;
}

.help-diff-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 5px;
  border-radius: 8px;
  transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background 280ms ease;
}

.help-diff-piece.is-out { opacity: 0.18; }

.help-diff-piece.is-added {
  background: color-mix(in srgb, var(--accent-primary, #888) 10%, transparent);
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .help-diff-segment,
  .help-diff-bar-fill,
  .help-diff-piece { transition: none; }
}

/* ---------- Game Over Tip ---------- */

.game-over-tip {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 12px 0 4px;
  padding: 8px 12px;
  background: var(--bg-secondary, rgba(128, 128, 128, 0.08));
  border-radius: 8px;
  font-style: italic;
}

.game-over-tip:empty {
  display: none;
}

/* ---------- Help Diagram Color Overrides ---------- */
/* Diagrams follow the player's live palette + environment so the sample pieces,
 * board, and arrow read clearly in every theme (esp. Dark / Deep Blue, where the
 * old fixed purple-on-light-board washed out against the dark page).
 *   - Sample pieces + arrow: --piece-hero-* — the env-adapted hero piece color
 *     setActivePalette() stamps on :root (js/ui/palette.js). Legibility is
 *     pre-baked by adaptColor(), and the fallback hex preserves the old look if
 *     the token is ever unset (cold paint).
 *   - Board cells: family-aware neutral tones (one light, one dark treatment),
 *     keyed off [data-family] on <html>. Family-aware (not exact env mirror)
 *     because --empty-cell lives on the board element, not :root. */

.help-view {
  /* Board grid + cells — light-family defaults (Mist Blue, Soft White) */
  --help-board-grid: #d0d4da;
  --help-board-border: #b0b6c0;
  --help-cell-empty: #f4f5f7;
  --help-cell-empty-alt: #eaecf0;
  /* Sample pieces follow the live env-adapted hero color */
  --help-cell-filled: var(--piece-hero-base, #5a4eb8);
  --help-cell-landed: var(--piece-hero-highlight, #9b8ff5);
  --help-cell-landed-glow: var(--piece-hero-glow, rgba(155, 143, 245, 0.4));
  /* NOTE: --help-highlight-clear/place feed only .mini-cell.highlight-clear /
   * .highlight-place, which no help topic currently renders (no code applies
   * those modifier classes). Left as fixed purple — not retinted to the palette
   * — because the selectors are unreachable; retinting dead tokens adds
   * complexity with no visible effect. Revisit if a topic starts using them. */
  --help-highlight-clear: rgba(124, 110, 224, 0.55);
  --help-highlight-place: rgba(124, 110, 224, 0.35);
}

/* Dark-family envs (Dark, Deep Blue): swap board neutrals to dark tones that keep
 * the empty cells legible without rhyming with any chromatic piece. data-family
 * lives on <html> (js/ui/palette.js setActivePalette). */
[data-family="dark"] .help-view {
  --help-board-grid: #2a3550;
  --help-board-border: #3a4a6c;
  --help-cell-empty: #22304e;
  --help-cell-empty-alt: #16223c;
}

/* ---------- Static Piece Display (help page) ---------- */

.piece-static {
  cursor: default;
  touch-action: auto;
  filter: none;
  transition: none;
  pointer-events: none;
}

.piece-static .piece-cell:not(.empty) {
  background: var(--help-cell-filled);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}


/* ---------- Mini Board Diagrams ---------- */

.mini-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 0.5px;
  aspect-ratio: 1;
  border: 1px solid var(--help-board-border);
  border-radius: 3px;
  background-color: var(--help-board-grid);
  overflow: hidden;
}

.mini-cell {
  background-color: var(--help-cell-empty);
  border-radius: 1px;
}

.mini-cell[data-box="1"],
.mini-cell[data-box="3"],
.mini-cell[data-box="5"],
.mini-cell[data-box="7"] {
  background-color: var(--help-cell-empty-alt);
}

.mini-cell.filled {
  background-color: var(--help-cell-filled);
}

.mini-cell.highlight-clear {
  background-color: var(--help-highlight-clear);
  box-shadow: inset 0 0 0 1px rgba(124, 110, 224, 0.3);
}

.mini-cell.highlight-place {
  background-color: var(--help-highlight-place);
}

/* ---------- Teaching-Scale Board Diagrams ---------- */

/* Scene container — board + arrow + tray */
.help-scene {
  position: relative;
  margin: 10px auto 14px;
  width: 171px;
  padding: 0 8px;
}

/* 9×9 board */
.help-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 1px;
  aspect-ratio: 1;
  width: 100%;
  border: 1.5px solid var(--help-board-border);
  border-radius: 3px;
  background-color: var(--help-board-grid);
  overflow: visible;
  position: relative;
}

.help-board-cell {
  background-color: var(--help-cell-empty);
  border-radius: 0.5px;
}

.help-board-cell.help-cell-alt {
  background-color: var(--help-cell-empty-alt);
}

.help-board-cell.help-cell-filled {
  background-color: var(--help-cell-filled);
}

/* Placed piece — bright, striped, clearly "just arrived". Follows the live
 * palette: the lighter hero tone as the base so it still reads brighter than the
 * solid hero-base cells; white stripes + inset read on both light and dark boards. */
.help-board-cell.help-cell-landed {
  background-color: var(--help-cell-landed);
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.5) 2px,
    rgba(255, 255, 255, 0.5) 4px
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 1),
    0 0 4px 1.3px var(--help-cell-landed-glow);
  position: relative;
  z-index: 2;
}

/* Gold clear-region border */
.help-clear-overlay {
  position: absolute;
  border: 1.5px solid #C8A828;
  border-radius: 5px;
  pointer-events: none;
  z-index: 3;
}

/* Arrow SVG overlay — follows the live hero piece color. */
.help-arrow-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  overflow: visible;
  color: var(--piece-hero-base, #a099cc);
}

/* Stroke + arrowhead fill come from the hero color. The line uses currentColor
 * (resolved from `color` above); the marker polygon is targeted with the var
 * DIRECTLY because WebKit <marker> children don't reliably inherit currentColor.
 * Opacity lives here (lifted on the dark family so the hint doesn't get lost on
 * the dark board). KEEP color/opacity here, not in js/help/diagrams.js —
 * drawArrow() sets currentColor only. */
.help-arrow-svg path {
  stroke: currentColor;
  opacity: 0.4;
}
.help-arrow-svg polygon {
  fill: var(--piece-hero-base, #a099cc);
}
[data-family="dark"] .help-arrow-svg path {
  opacity: 0.6;
}

/* ---------- Help Tray (board diagrams) ---------- */

.help-tray {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 8px 8px 2px;
}

.help-tray-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ghost slot — dashed outline where the piece was dragged from. Follows the live
 * hero color so it stays in the palette family with the recolored tray pieces.
 * Two-declaration fallback: iOS<16.2 (no color-mix) keeps the soft purple. */
.help-tray-ghost {
  border: 1.5px dashed rgba(124, 110, 224, 0.5);
  border: 1.5px dashed color-mix(in srgb, var(--piece-hero-base, #7c6ee0) 50%, transparent);
  border-radius: 3px;
  padding: 3px 2px;
  min-width: 26px;
  min-height: 14px;
}

.help-tray-ghost .help-tray-mini-cell {
  opacity: 0.3;
}

.help-tray-dimmed {
  opacity: 0.25;
}

/* Mini piece shapes in tray */
.help-tray-mini {
  display: grid;
  gap: 1px;
}

.help-tray-mini-cell {
  width: 6px;
  height: 6px;
  background: var(--help-cell-filled);
  border-radius: 1px;
}

.help-tray-mini-empty {
  background: transparent;
}

/* On the dark board the standard 0.25 / 0.3 tray dimming sinks the muted hero
 * into the near-black page, making the secondary tray pieces nearly invisible.
 * Usability beats palette fidelity here: on the dark family the tray pieces use
 * the brighter hero HIGHLIGHT tone at near-full opacity so they read clearly.
 * The placed board piece stays distinct via its gold overlay + hatching + white
 * border, so brightening the tray doesn't bury the lesson. Light family keeps
 * the original dimming (already legible on a light board). */
[data-family="dark"] .help-tray-mini-cell {
  background: var(--piece-hero-highlight, #9b8ff5);
}
/* Re-assert transparent holes: the dark mini-cell rule above outranks the base
 * .help-tray-mini-empty (attribute+class vs. lone class), so without this the
 * empty cells of a tray piece would paint solid and lose the piece's shape. */
[data-family="dark"] .help-tray-mini-empty {
  background: transparent;
}
[data-family="dark"] .help-tray-dimmed {
  opacity: 0.9;
}
[data-family="dark"] .help-tray-ghost .help-tray-mini-cell {
  opacity: 0.95;
}

/* ---------- Scoring Reference Table ---------- */

.help-scoring-table {
  width: 100%;
  max-width: 360px;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 12px auto;
  background: var(--bg-secondary, rgba(128, 128, 128, 0.08));
  border-radius: 8px;
  overflow: hidden;
}

.help-scoring-caption {
  caption-side: top;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
}

.help-scoring-table td {
  padding: 6px 10px;
  color: var(--text-secondary);
}

.help-scoring-table td:nth-child(n+2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.help-scoring-table td:first-child {
  font-weight: 500;
  color: var(--text-primary);
}

.help-scoring-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.1));
}

.help-scoring-note {
  max-width: 360px;
  margin: 4px auto 0;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 0.78rem;
  font-style: italic;
  text-align: left;
  color: var(--text-secondary);
}

/* Hide empty diagram mounts until JS populates them */
.help-diagram-mount:empty {
  display: none;
}

/* ────────────────────────────────────────────────────────────────────────────
 * WS5 — Portrait-tablet scale-up (Help / How to Play). Companion to the other WS5
 * blocks (css/main.css §G, home/scores/sounds). Owner D-approved (2026-06-20).
 *
 * NOTE — this screen is NARROWED, not widened. Help has no width cap today (it
 * runs the full #app width, ~980px on a 13" iPad), so long text lines exceed the
 * comfortable reading measure. This block caps + centers the column at 600px
 * (max-width:600 + margin-inline:auto). At the 600px trigger the cap equals the
 * available width (no jump); above ~616px it binds and centers. Phones <600px are
 * byte-identical (the @media gate never matches them).
 *
 * Help is SCROLLABLE (.help-topic-list is the sole scroller, header+toolbar
 * pinned) → type/control scaling only, no slack tuning. Every override is
 * body[data-page="help"]-scoped (≥0,2,1) so it wins on SPECIFICITY (the base rules
 * are unscoped .help-*), order-independent. clamp floors = phone values; caps ≈
 * phone×1.3 reached ~860px (vw = capPx/8.6). The teaching-board diagram (.help-scene
 * width) scales too; its 9×9 grid is %-based so it grows with the container, and the
 * fixed-px tray mini-cells / ghost slot are scaled alongside so the diagram stays
 * internally proportional.
 * ──────────────────────────────────────────────────────────────────────────── */
@media (orientation: portrait) and (min-width: 600px) {
  /* Cap + center the whole column (header, toolbar, scroller all narrow together). */
  body[data-page="help"] .help-view {
    max-width: 600px;
    margin-inline: auto;
  }

  /* Header */
  body[data-page="help"] .help-view-header {
    min-height: clamp(48px, 7.26vw, 62.4px);
  }
  body[data-page="help"] .help-view-header h2 {
    font-size: clamp(1.1rem, 2.66vw, 1.43rem);
  }
  body[data-page="help"] .help-view-header .back-btn {
    font-size: clamp(1.5rem, 3.63vw, 1.95rem);
    min-width: clamp(44px, 6.65vw, 57.2px);
    min-height: clamp(44px, 6.65vw, 57.2px);
    padding-block: clamp(8px, 1.21vw, 10.4px);
  }

  /* Toolbar */
  body[data-page="help"] .help-expand-all {
    min-width: clamp(44px, 6.65vw, 57.2px);
    min-height: clamp(44px, 6.65vw, 57.2px);
  }

  /* Accordion rows + tiles + titles */
  body[data-page="help"] .help-topic-row {
    min-height: clamp(64px, 9.67vw, 83.2px);
    gap: clamp(12px, 1.81vw, 15.6px);
    padding-block: clamp(12px, 1.81vw, 15.6px);
  }
  body[data-page="help"] .help-topic-tile,
  body[data-page="help"] .help-mode-tile {
    width: clamp(36px, 5.44vw, 46.8px);
    height: clamp(36px, 5.44vw, 46.8px);
    border-radius: clamp(11px, 1.66vw, 14.3px);
  }
  body[data-page="help"] .help-topic-title {
    font-size: clamp(0.97rem, 2.35vw, 1.261rem);
  }
  body[data-page="help"] .help-topic-preview {
    font-size: clamp(0.78rem, 1.89vw, 1.014rem);
  }

  /* Body copy, callouts, mini-cards, mode cards, insights demo */
  body[data-page="help"] .help-body-para {
    font-size: clamp(0.88rem, 2.13vw, 1.144rem);
  }
  body[data-page="help"] .help-diagram-caption {
    font-size: clamp(0.85rem, 2.06vw, 1.105rem);
  }
  body[data-page="help"] .help-callout,
  body[data-page="help"] .help-mini-card {
    padding: clamp(10px, 1.51vw, 13px) clamp(12px, 1.81vw, 15.6px);
    border-radius: clamp(12px, 1.81vw, 15.6px);
  }
  body[data-page="help"] .help-callout-tag,
  body[data-page="help"] .help-mini-label {
    font-size: clamp(0.64rem, 1.55vw, 0.832rem);
  }
  body[data-page="help"] .help-callout-text {
    font-size: clamp(0.84rem, 2.03vw, 1.092rem);
  }
  body[data-page="help"] .help-mini-value {
    font-size: clamp(0.82rem, 1.98vw, 1.066rem);
  }
  body[data-page="help"] .help-mode-name {
    font-size: clamp(0.9rem, 2.18vw, 1.17rem);
  }
  body[data-page="help"] .help-mode-desc {
    font-size: clamp(0.8rem, 1.94vw, 1.04rem);
  }
  body[data-page="help"] .help-insights-dot {
    width: clamp(8px, 1.21vw, 10.4px);
    height: clamp(8px, 1.21vw, 10.4px);
  }
  body[data-page="help"] .help-insights-legend {
    font-size: clamp(0.78rem, 1.89vw, 1.014rem);
  }

  /* Interactive difficulty selector */
  body[data-page="help"] .help-diff-segment {
    min-height: clamp(36px, 5.44vw, 46.8px);
    font-size: clamp(0.84rem, 2.03vw, 1.092rem);
  }
  body[data-page="help"] .help-diff-count-num {
    font-size: clamp(1.6rem, 3.87vw, 2.08rem);
  }
  body[data-page="help"] .help-diff-count-unit {
    font-size: clamp(0.85rem, 2.06vw, 1.105rem);
  }
  body[data-page="help"] .help-diff-caption {
    font-size: clamp(0.84rem, 2.03vw, 1.092rem);
  }
  body[data-page="help"] .help-diff-piece {
    min-width: clamp(34px, 5.14vw, 44.2px);
    min-height: clamp(34px, 5.14vw, 44.2px);
  }

  /* Teaching-board diagram (container scales; %-grid board follows; fixed-px
     tray internals scaled alongside to stay proportional) */
  body[data-page="help"] .help-scene {
    width: clamp(171px, 25.85vw, 222.3px);
  }
  body[data-page="help"] .help-tray-mini-cell {
    width: clamp(6px, 0.91vw, 7.8px);
    height: clamp(6px, 0.91vw, 7.8px);
  }
  body[data-page="help"] .help-tray-ghost {
    min-width: clamp(26px, 3.93vw, 33.8px);
    min-height: clamp(14px, 2.12vw, 18.2px);
  }

  /* Scoring reference table */
  body[data-page="help"] .help-scoring-table {
    max-width: clamp(360px, 54.4vw, 468px);
    font-size: clamp(0.82rem, 1.98vw, 1.066rem);
  }
  body[data-page="help"] .help-scoring-table th {
    font-size: clamp(0.72rem, 1.74vw, 0.936rem);
    padding: clamp(8px, 1.21vw, 10.4px) clamp(10px, 1.51vw, 13px);
  }
  body[data-page="help"] .help-scoring-table td {
    padding: clamp(6px, 0.91vw, 7.8px) clamp(10px, 1.51vw, 13px);
  }
  body[data-page="help"] .help-scoring-note {
    max-width: clamp(360px, 54.4vw, 468px);
    padding-inline: clamp(10px, 1.51vw, 13px);
  }
}