/* RUNIVERSE-PIXEL-FONT-1 (Steve 2026-10-22: "make the text blocks closer to the pixel style font in the database, go for max").
   The team's pixel fonts, copied verbatim from forgotten-runiverse static/fonts (see ../fonts/SOURCES.txt), plus the tokens every text block uses.
   ADDITIVE layer: loaded first; every other file takes its family/size from these tokens (gate: test/test-pixel-font.mjs).
   The team's hierarchy (packages/client/react/scss/_fonts.scss + the 70 fontFamily sites):
     smallest_pixel-7 = ALL in-game UI (HUD, buttons, tooltips, names, chat, journal, counters)  -> --rf-ui / --rf-num / --rf-dialog
     Alagard          = headings / titles (storage panel headings 20px, showcase header 32px)     -> --rf-title
     PixelNES         = login / title screens                                                     -> --rf-brand
     Arcade           = battle damage numbers (digits only: it has no : . - / ( ) )                -> --rf-arcade (declared, unused in a no-combat game)
     Runes            = declared only                                                              -> --rf-rune
     NewRocker        = declared + preloaded, no text site                                         -> --rf-display (declared, unused)
   Native pixel grids (measured from the glyph outlines): smallest_pixel-7 10px, Alagard 16px, PixelNES 10.24px (200/2048 em per pixel), Arcade 14.08px.
   Every size token below is an INTEGER MULTIPLE of the native grid so each font pixel lands on whole device pixels. */
@font-face { font-family: "smallest_pixel-7"; font-weight: 400; font-style: normal; font-display: block;
  src: url("../fonts/smallest_pixel-7.woff") format("woff"), url("../fonts/smallest_pixel-7.ttf") format("truetype"); }
@font-face { font-family: "Alagard"; font-weight: 400; font-style: normal; font-display: block;
  src: url("../fonts/Alagard.woff2") format("woff2"), url("../fonts/Alagard.woff") format("woff"), url("../fonts/Alagard.ttf") format("truetype"); }
@font-face { font-family: "PixelNES"; font-weight: 400; font-style: normal; font-display: block;
  src: url("../fonts/Pixel-NES.woff") format("woff"), url("../fonts/Pixel-NES.ttf") format("truetype"); }
@font-face { font-family: "Arcade"; font-weight: 400; font-style: normal; font-display: block;
  src: url("../fonts/Arcade.woff") format("woff"), url("../fonts/Arcade.ttf") format("truetype"); }
@font-face { font-family: "Runes"; font-weight: 400; font-style: normal; font-display: block;
  src: url("../fonts/runes.woff") format("woff"), url("../fonts/runes.ttf") format("truetype"); }
@font-face { font-family: "NewRocker"; font-weight: 400; font-style: normal; font-display: block;
  src: url("../fonts/NewRocker-Regular.woff2") format("woff2"), url("../fonts/NewRocker-Regular.woff") format("woff"), url("../fonts/NewRocker-Regular.ttf") format("truetype"); }
/* Size-adjusted twins of smallest_pixel-7 (same file, no extra request): a character missing from Alagard or PixelNES (em dash, middle dot, curly quotes ...)
   falls to a face whose EFFECTIVE size lands on the 2x/4x native grid instead of a blurred 1.6x. */
@font-face { font-family: "RF Pixel T16"; font-weight: 400; font-style: normal; font-display: block; size-adjust: 125%;
  src: url("../fonts/smallest_pixel-7.woff") format("woff"), url("../fonts/smallest_pixel-7.ttf") format("truetype"); }
@font-face { font-family: "RF Pixel T32"; font-weight: 400; font-style: normal; font-display: block; size-adjust: 125%;
  src: url("../fonts/smallest_pixel-7.woff") format("woff"), url("../fonts/smallest_pixel-7.ttf") format("truetype"); }
@font-face { font-family: "RF Pixel N20"; font-weight: 400; font-style: normal; font-display: block; size-adjust: 97.65625%;
  src: url("../fonts/smallest_pixel-7.woff") format("woff"), url("../fonts/smallest_pixel-7.ttf") format("truetype"); }

:root {
  /* the ONE declared fallback for any character no pixel font has (arrows, stars, check marks): the team's own stacks end in monospace too */
  --rf-fb: monospace;
  --rf-ui: "smallest_pixel-7", var(--rf-fb);
  --rf-num: "smallest_pixel-7", var(--rf-fb);
  --rf-dialog: "smallest_pixel-7", var(--rf-fb);
  --rf-title: "Alagard", "RF Pixel T16", var(--rf-fb);
  --rf-title2: "Alagard", "RF Pixel T32", var(--rf-fb);
  --rf-brand: "PixelNES", "RF Pixel N20", var(--rf-fb);
  --rf-arcade: "Arcade", "smallest_pixel-7", var(--rf-fb);
  --rf-rune: "Runes", var(--rf-fb);
  --rf-display: "NewRocker", var(--rf-fb);
  /* sizes: whole multiples of each family's native grid. ui = 2x/3x/4x of 10; title = 1x/2x of 16; brand = 2x of 10.24 */
  --rf-fs-ui: 20px;      /* cap height 10px = the phone legibility floor; also the body/button/label size */
  --rf-fs-ui2: 30px;     /* 3x: large icon glyphs and callouts */
  --rf-fs-ui3: 40px;     /* 4x */
  --rf-fs-title: 16px;   /* Alagard 1x: cap height 11px */
  --rf-fs-title2: 32px;  /* Alagard 2x */
  --rf-fs-brand: 20.48px;/* PixelNES 2x: 200 font units = 2.0 device px, advance 16px */
  --rf-lh: 24px;         /* even px: 20px glyph box (asc 15 + desc 5) keeps a whole-pixel half-leading */
  --rf-lh-tight: 20px;
  --rf-lh-title: 21px;   /* Alagard 16px: asc 12 + desc 3 = 15, odd => odd line height keeps whole-pixel half-leading */
  /* STEER (Steve 2026-10-23, misalignment): sentences / stats / hints / card text keep lowercase in the team lowercase family (smallest_pixel-7 is caps-only) */
  --rf-body: "Alagard", "RF Pixel T16", var(--rf-fb);
  --rf-fs-body: 16px;    /* Alagard 1x native: x-height 8px, cap 11px (>= the 10px phone floor) */
  --rf-lh-body: 21px;    /* odd px: Alagard glyph box 15px (asc 12 + desc 3) => whole-pixel half-leading */
  --rf-lh-title2: 36px;  /* Alagard 2x glyph box 30px => even px */
}
html {
  font-family: var(--rf-ui);
  font-synthesis: none;              /* no faux bold / faux italic: they smear pixel glyphs by fractions of a pixel */
  letter-spacing: 0;
  font-kerning: none;
  font-variant-ligatures: none;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: none;      /* honoured by WebKit/Chromium on macOS; elsewhere integer-aligned pixel glyphs are not antialiased anyway */
  font-smooth: never;
}
button, input, select, textarea { font-family: inherit; letter-spacing: 0; }
/* HUD fit-ups for the wider pixel text (measured box diff 2026-10-23; spellbook.css pins '#ui { max-width: calc(100vw - 120px)' so these are higher-specificity ADDITIONS, not edits) */
html body #ui { max-width: calc(100vw - 144px); }                       /* caption stays clear of the (now ~106px) PLAYERS pill */
html body #players-count { line-height: 20px; padding: 1px 7px; }        /* 22px tall: bottom 32px < Map button top 34px (was a 2px overlap) */
@media (min-height: 501px) { html body #colo-card { max-height: calc(100dvh - 340px); } }   /* Programme card keeps clear of the ticker (top >= 170px) and the bottom buttons */
@media (max-height: 500px) { html body #colo-hud { left: calc(50% + 20px); } }              /* landscape: ticker clears the caption */
@media (min-width: 900px) { html body #colo-hud:not(.min) { max-width: min(94vw, 560px); } } /* desktop: the programme line is no longer ellipsised */@media (min-width: 900px) and (min-height: 766px) { html body #colo-hud:not(.min) { width: min(94vw, 560px); } }   /* tall desktop: the ticker is a FIXED 470px card here (the max-content bar only exists at max-height 765px), so widen it: the programme line is no longer ellipsised (probe 2026-10-23) */