/* Part of Survival Language — see index.html for load order.
   All colors live in tokens.css; this and the other files below only use
   var(--...) references, never raw hex, so a purchased theme (js/store.js
   applyThemeSkin) or dark mode recolors everything without touching CSS. */

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--bg); color:var(--ink);
    font-family:'Manrope', -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100dvh; overflow-x:hidden;
  }
  body.lesson-open{ overflow:hidden; height:100vh; height:100dvh; }
  h1,h2,h3{ margin:0; text-wrap:balance; font-family:'Unbounded', -apple-system, sans-serif; }
  p{ margin:0; }
  /* Browsers never inherit page text color into form controls by default — an
     unstyled <button> renders literal black text (the UA default) regardless of
     --ink. That was invisible in light mode by pure coincidence (default black on
     a light page looks intentional) and only became visible as a real bug once
     dark mode had proper contrast to compare against: any button whose class never
     set its own `color` (.shop-item-label frame/theme names, the achievements
     "N / total" count, …) was rendering pure black text on a dark background. This
     one rule fixes every such spot at once; buttons that already set their own
     color (.btn-primary, .link-btn, .option, …) are unaffected — a class selector
     still wins over this element selector. */
  button{ font-family:inherit; cursor:pointer; color:inherit; }
  button:disabled{ cursor:default; }
  .ka{ font-family:'Noto Sans Georgian','Manrope',sans-serif; }
  button:focus-visible, a:focus-visible, [tabindex]:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }
  .tnum{ font-variant-numeric: tabular-nums; }
  /* Utility for "the number itself is the visual object" moments — day count, XP,
     crystal balance, accuracy % (see DEPLOY.md's color/typography-pass note).
     Unbounded already carries all headings; this just gives specific standalone
     numbers the same weight so they read as a designed statistic rather than plain
     body text. Not yet applied everywhere a big number appears — each screen picks
     it up as its own layout gets revisited, rather than reflowing every number at
     once here. */
  .num-display{ font-family:'Unbounded',sans-serif; font-variant-numeric:tabular-nums; }
  /* The trailing (Latin) half of a dual transliteration — see bothTranslitHtml() in
     translit.js. A few Cyrillic/Latin letters are near-identical glyphs (Cyrillic "р"
     vs Latin "r", "с"/"c", "а"/"a"...), so at equal weight "р · r" reads as the same
     letter shown twice. Dimming the second one marks it as a secondary note rather
     than a duplicate — used wherever bothTranslitHtml() is rendered (lesson prompts,
     the letter detail card title), so kept here rather than duplicated per file. */
  .translit-secondary{ opacity:.55; }