/* ============================================================
   FINNACLE — READABILITY LAYER  (default ON; class html.readable)
   ------------------------------------------------------------
   The game's dense paragraph copy was set in Press Start 2P at
   5–7px — an arcade DISPLAY font, never meant for reading runs
   of text. This layer swaps that body copy to VT323 (already
   loaded, still an 8-bit CRT/terminal font, but legible in
   paragraphs) at comfortable sizes, while Press Start 2P is kept
   on headings, HUD labels, the logo and buttons — the bits that
   read as "branding", not "sentences".

   Toggle off  -> remove the .readable class (pixel-purist mode);
   everything falls back to the existing main.css styling.

   Vietnamese keeps Be Vietnam Pro (VT323 lacks the glyphs), so
   the font swap is scoped with body:not(.lang-vn); size bumps
   apply to both languages.
   ============================================================ */

/* ── Body-copy font swap → VT323 (English / default) ───────── */
html.readable body:not(.lang-vn) .ec-scenario,
html.readable body:not(.lang-vn) .choice-text,
html.readable body:not(.lang-vn) .choice-impact,
html.readable body:not(.lang-vn) .oc-label,
html.readable body:not(.lang-vn) .oc-sub,
html.readable body:not(.lang-vn) .oc-impact,
html.readable body:not(.lang-vn) .lesson-text,
html.readable body:not(.lang-vn) .notif-text,
html.readable body:not(.lang-vn) .guide-text,
html.readable body:not(.lang-vn) .codex-detail-def,
html.readable body:not(.lang-vn) .codex-detail-tip,
html.readable body:not(.lang-vn) .dc-hint,
html.readable body:not(.lang-vn) .ltip,
html.readable body:not(.lang-vn) .laction .la-desc,
html.readable body:not(.lang-vn) .cdinfo,
html.readable body:not(.lang-vn) .einfo,
html.readable body:not(.lang-vn) .primer-text {
  font-family: var(--body) !important; /* VT323 */
  letter-spacing: .3px !important;
}

/* ── Size + leading bumps (apply in BOTH languages) ────────── */
html.readable .ec-scenario      { font-size: 20px !important; line-height: 1.5 !important; }
html.readable .choice-text      { font-size: 18px !important; line-height: 1.45 !important; }
html.readable .choice-impact    { font-size: 16px !important; line-height: 1.4 !important; }
html.readable .oc-label         { font-size: 17px !important; }
html.readable .oc-sub           { font-size: 16px !important; line-height: 1.45 !important; }
html.readable .oc-impact        { font-size: 16px !important; }
html.readable .lesson-text      { font-size: 19px !important; line-height: 1.55 !important; }
html.readable .notif-text       { font-size: 17px !important; line-height: 1.45 !important; }
html.readable .guide-text       { font-size: 18px !important; line-height: 1.55 !important; }
html.readable .codex-detail-def { font-size: 18px !important; line-height: 1.55 !important; }
html.readable .codex-detail-tip { font-size: 18px !important; line-height: 1.55 !important; }
html.readable .dc-hint          { font-size: 16px !important; line-height: 1.5 !important; }
html.readable .ltip             { font-size: 18px !important; line-height: 1.5 !important; }
html.readable .laction .la-desc { font-size: 18px !important; line-height: 1.5 !important; }
html.readable .cdinfo,
html.readable .einfo            { font-size: 18px !important; line-height: 1.5 !important; }

/* The scenario emphasis stays gold but inherits the readable font */
html.readable body:not(.lang-vn) .ec-scenario strong { font-family: var(--body) !important; }

/* Choice buttons: a touch more vertical room so larger text never clips */
html.readable .choice-btn { padding: 11px 12px !important; }

/* ── Entry mode-cards: back-face copy is sentences, not branding ──
   The dealt mode cards flip to reveal descriptions set at 6px pixel
   font — unreadable prose. Swap those runs to VT323 at legible sizes
   (mode NAMES stay Press Start 2P as headings). VN keeps its own font. */
html.readable body:not(.lang-vn) .mode-desc,
html.readable body:not(.lang-vn) .ec-htp .htp-row div {
  font-family: var(--body) !important; /* VT323 */
  letter-spacing: .3px !important;
}
html.readable .mode-desc          { font-size: 13px !important; line-height: 1.5 !important; }
html.readable .ec-htp .htp-row div{ font-size: 12px !important; line-height: 1.4 !important; }

/* Settings toggle button active state (mirrors .a11y-on) */
#a11y-readable-btn.a11y-on { background: var(--accent) !important; color: #000 !important; }