/* HORO-BEAT sim theme: BASE (reset, page, typography). Tokens in tokens.css; spec in reports/polish/DESIGN.md. */

@layer hb-reset {
  *, *::before, *::after { box-sizing: border-box; }
  button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
  input, select, textarea { font-family: var(--hb-font-text); }   /* typed text is plain text (no card numerals) */
  * { scrollbar-width: thin; scrollbar-color: var(--hb-scroll-thumb) var(--hb-scroll-track); }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: var(--hb-scroll-track); }
  ::-webkit-scrollbar-thumb { background: var(--hb-scroll-thumb); border: 2px solid transparent; border-radius: 4px; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--hb-scroll-thumb-hover); }
  img { max-width: 100%; }
  [hidden] { display: none !important; }
}

@layer hb-base {
  /* mobile font boosting inflates small text on real phones (an emulator does not show it): never let it */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; background: var(--hb-ink-1); }
  body { margin: 0; height: 100%; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
    background-color: var(--hb-ink-1); color: var(--hb-text);
    font: 500 var(--hb-fs-14)/var(--hb-lh) var(--hb-font-ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
  /* titles speak in the ink mincho (Kaisei Tokumin): the folklore voice */
  h1, h2, h3, h4 { margin: 0; font-family: var(--hb-font-display); font-weight: 800; line-height: 1.2; letter-spacing: .02em; }
  p { margin: 0 0 .6em; }
  a { color: var(--hb-kin-text); text-underline-offset: 2px; }
  a:hover { color: var(--hb-kin-hi); }
  :focus-visible { outline: 2px solid var(--hb-focus); outline-offset: 2px; }
  ::selection { background: var(--hb-kin-deep-2); color: var(--hb-text); }
  ruby rt { font-size: .5em; font-weight: 700; letter-spacing: .02em; color: var(--hb-text-3); }
  :lang(ja) { line-break: strict; }
  input::placeholder, textarea::placeholder { color: var(--hb-text-3); opacity: 1; }
  /* the language rule (DESIGN.md §8): text tagged for the other language is never shown */
  html[lang="en"] .hb-ja-only, html[lang="ja"] .hb-en-only { display: none !important; }
  /* decorative DOM (lanterns, the night city, mist bands ...) carries .deco; Performance mode hides it (perf.css) */
  .deco { pointer-events: none; }
  .hb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
}