/* Reset, page frame, and the two typography facts this game depends on. */

@import url('../vendor/fonts/nunito.css');

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--bone);
  background:
    radial-gradient(120% 90% at 50% 0%, #1E1B45 0%, transparent 60%),
    radial-gradient(100% 70% at 50% 100%, #241246 0%, transparent 55%),
    var(--night-900);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The fight has a fixed action bar at the bottom; on iOS that lands under the
     home indicator without this. */
  padding-bottom: env(safe-area-inset-bottom);
}

img { max-width: 100%; height: auto; display: block; }

/* ⚠️ Load-bearing. `hidden` is a UA rule, and ANY author rule that sets
   `display` beats it regardless of specificity — so `.feedback { display: grid }`
   silently un-hides a hidden feedback card, and the same goes for the charge
   bar, the guard button and every badge in the game. Half the interface was
   painting empty boxes before this line. */
[hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p { margin: 0; }

#app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4) var(--s4) var(--s6);
}

/* Numerals sit in tabular figures everywhere: a health bar whose "100" is wider
   than its "99" shifts the whole row every time it ticks. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ⚠️ KaTeX ships no Cyrillic. A unit written as \text{см} renders as tofu boxes
   unless the text class is pointed at a font that has the glyphs. This one line
   is the difference between "40 см²" and "40 ▯▯²" on every question in the
   game — do not remove it, and do not assume a webfont swap made it obsolete. */
.katex .text,
.katex .mathrm {
  font-family: var(--font) !important;
}

.katex { color: inherit; }

.tex-display {
  display: block;
  font-size: 1.35em;
  margin: var(--s2) 0;
  text-align: center;
}

/* Everything in the game respects this. Nothing in the game *requires* motion
   to be understood — the fight's outcome is always in the bars and the text. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus is visible, always. The game is playable from a keyboard because the
   answer tiles are real buttons, and a child on a school laptop is a real user. */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}