/* ══════════════════════════════════════════════════════════════════════════
   OriginStory UI theme — shared by the game (index.php) and the wiki
   (database/index.php, #416). Pixel 9-slice frames, the stone fill, the
   gold-on-parchment palette and the fonts. Load before the page's own sheet.
   Fonts: Press Start 2P + Pixelify Sans come from Google Fonts (each page
   links them); OS Digits is ours.
   ══════════════════════════════════════════════════════════════════════════ */
/* OS Digits: Pixelify Sans' digits with a readable 5 (its own 5 reads as an S) and
   a dotted 0 — art/fonts/build_digits.py. Digits only (unicode-range), so every
   letter is still Pixelify Sans; listed first in --ui-font-body. OFL (fonts/OFL-PixelifySans.txt). */
@font-face { font-family: 'OS Digits'; src: url('fonts/os-digits-400.woff2') format('woff2'); font-weight: 100 450; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: 'OS Digits'; src: url('fonts/os-digits-600.woff2') format('woff2'); font-weight: 451 650; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: 'OS Digits'; src: url('fonts/os-digits-700.woff2') format('woff2'); font-weight: 651 900; font-display: swap; unicode-range: U+0030-0039; }

:root {
    /* Pixel 9-slice frames (16×16 SVG, 6px corners) + 4×4 stone dither fill */
    /* 9-slice frames (border-image slice 6). Use `stretch`, never `round`/`repeat`: the
       edge slices are uniform along their length, and tiled SVG edges seam (hairline
       gaps) under GPU raster at fractional scales like --ui-zoom 1.25. */
    --os-frame-gilded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%2307050a' d='M0 0h16v1h-16zM0 1h1v1h-1zM5 1h1v1h-1zM10 1h1v1h-1zM15 1h1v1h-1zM0 2h1v1h-1zM5 2h1v1h-1zM10 2h1v1h-1zM15 2h1v1h-1zM0 3h1v1h-1zM5 3h1v1h-1zM10 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM10 4h1v1h-1zM15 4h1v1h-1zM0 5h16v1h-16zM0 6h1v1h-1zM5 6h1v1h-1zM10 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM5 7h1v1h-1zM10 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM5 8h1v1h-1zM10 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM5 9h1v1h-1zM10 9h1v1h-1zM15 9h1v1h-1zM0 10h16v1h-16zM0 11h1v1h-1zM5 11h1v1h-1zM10 11h1v1h-1zM15 11h1v1h-1zM0 12h1v1h-1zM5 12h1v1h-1zM10 12h1v1h-1zM15 12h1v1h-1zM0 13h1v1h-1zM5 13h1v1h-1zM10 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM5 14h1v1h-1zM10 14h1v1h-1zM15 14h1v1h-1zM0 15h16v1h-16z'/%3E%3Cpath fill='%23ffe08a' d='M1 1h4v1h-4zM6 1h4v1h-4zM11 1h4v1h-4zM1 2h1v1h-1zM11 2h1v1h-1zM1 3h1v1h-1zM11 3h1v1h-1zM1 4h1v1h-1zM11 4h1v1h-1zM1 6h1v1h-1zM11 6h1v1h-1zM1 7h1v1h-1zM11 7h1v1h-1zM1 8h1v1h-1zM11 8h1v1h-1zM1 9h1v1h-1zM11 9h1v1h-1zM1 11h4v1h-4zM6 11h4v1h-4zM11 11h4v1h-4zM1 12h1v1h-1zM11 12h1v1h-1zM1 13h1v1h-1zM11 13h1v1h-1zM1 14h1v1h-1zM11 14h1v1h-1z'/%3E%3Cpath fill='%23ff6655' d='M2 2h1v1h-1zM12 2h1v1h-1zM2 12h1v1h-1zM12 12h1v1h-1z'/%3E%3Cpath fill='%23a3121c' d='M3 2h1v1h-1zM13 2h1v1h-1zM2 3h2v1h-2zM12 3h2v1h-2zM3 12h1v1h-1zM13 12h1v1h-1zM2 13h2v1h-2zM12 13h2v1h-2z'/%3E%3Cpath fill='%237a4e16' d='M4 2h1v1h-1zM14 2h1v1h-1zM4 3h1v1h-1zM14 3h1v1h-1zM2 4h3v1h-3zM6 4h4v1h-4zM12 4h3v1h-3zM4 6h1v1h-1zM14 6h1v1h-1zM4 7h1v1h-1zM14 7h1v1h-1zM4 8h1v1h-1zM14 8h1v1h-1zM4 9h1v1h-1zM14 9h1v1h-1zM4 12h1v1h-1zM14 12h1v1h-1zM4 13h1v1h-1zM14 13h1v1h-1zM2 14h3v1h-3zM6 14h4v1h-4zM12 14h3v1h-3z'/%3E%3Cpath fill='%23d29a34' d='M6 2h4v1h-4zM6 3h4v1h-4zM2 6h2v1h-2zM12 6h2v1h-2zM2 7h2v1h-2zM12 7h2v1h-2zM2 8h2v1h-2zM12 8h2v1h-2zM2 9h2v1h-2zM12 9h2v1h-2zM6 12h4v1h-4zM6 13h4v1h-4z'/%3E%3C/svg%3E");
    --os-frame-iron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23050407' d='M0 0h16v1h-16zM0 1h1v1h-1zM5 1h1v1h-1zM10 1h1v1h-1zM15 1h1v1h-1zM0 2h1v1h-1zM5 2h1v1h-1zM10 2h1v1h-1zM15 2h1v1h-1zM0 3h1v1h-1zM5 3h1v1h-1zM10 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM10 4h1v1h-1zM15 4h1v1h-1zM0 5h16v1h-16zM0 6h1v1h-1zM5 6h1v1h-1zM10 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM5 7h1v1h-1zM10 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM5 8h1v1h-1zM10 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM5 9h1v1h-1zM10 9h1v1h-1zM15 9h1v1h-1zM0 10h16v1h-16zM0 11h1v1h-1zM5 11h1v1h-1zM10 11h1v1h-1zM15 11h1v1h-1zM0 12h1v1h-1zM5 12h1v1h-1zM10 12h1v1h-1zM15 12h1v1h-1zM0 13h1v1h-1zM5 13h1v1h-1zM10 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM5 14h1v1h-1zM10 14h1v1h-1zM15 14h1v1h-1zM0 15h16v1h-16z'/%3E%3Cpath fill='%236e6676' d='M1 1h4v1h-4zM6 1h4v1h-4zM11 1h4v1h-4zM1 2h1v1h-1zM3 2h1v1h-1zM11 2h1v1h-1zM13 2h1v1h-1zM1 3h3v1h-3zM11 3h3v1h-3zM1 4h1v1h-1zM11 4h1v1h-1zM1 6h1v1h-1zM11 6h1v1h-1zM1 7h1v1h-1zM11 7h1v1h-1zM1 8h1v1h-1zM11 8h1v1h-1zM1 9h1v1h-1zM11 9h1v1h-1zM1 11h4v1h-4zM6 11h4v1h-4zM11 11h4v1h-4zM1 12h1v1h-1zM3 12h1v1h-1zM11 12h1v1h-1zM13 12h1v1h-1zM1 13h3v1h-3zM11 13h3v1h-3zM1 14h1v1h-1zM11 14h1v1h-1z'/%3E%3Cpath fill='%239a8f9e' d='M2 2h1v1h-1zM12 2h1v1h-1zM2 12h1v1h-1zM12 12h1v1h-1z'/%3E%3Cpath fill='%231e1a22' d='M4 2h1v1h-1zM14 2h1v1h-1zM4 3h1v1h-1zM14 3h1v1h-1zM2 4h3v1h-3zM6 4h4v1h-4zM12 4h3v1h-3zM4 6h1v1h-1zM14 6h1v1h-1zM4 7h1v1h-1zM14 7h1v1h-1zM4 8h1v1h-1zM14 8h1v1h-1zM4 9h1v1h-1zM14 9h1v1h-1zM4 12h1v1h-1zM14 12h1v1h-1zM4 13h1v1h-1zM14 13h1v1h-1zM2 14h3v1h-3zM6 14h4v1h-4zM12 14h3v1h-3z'/%3E%3Cpath fill='%233e3844' d='M6 2h4v1h-4zM6 3h4v1h-4zM2 6h2v1h-2zM12 6h2v1h-2zM2 7h2v1h-2zM12 7h2v1h-2zM2 8h2v1h-2zM12 8h2v1h-2zM2 9h2v1h-2zM12 9h2v1h-2zM6 12h4v1h-4zM6 13h4v1h-4z'/%3E%3C/svg%3E");
    --os-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Crect width='4' height='4' fill='%23120c16'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%231a121f'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%231a121f'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%230d0810'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%230d0810'/%3E%3C/svg%3E");
    --ui-px: 2px;                       /* one art pixel on screen */
    --ui-frame-w: calc(var(--ui-px) * 6);
    --ui-bg: #120c16;
    --ui-bg-deep: #08050b;
    --ui-iron: #3e3844;
    --ui-iron-dark: #1e1a22;
    --ui-gold: #d29a34;
    --ui-gold-lite: #ffe08a;
    --ui-gold-dark: #7a4e16;
    --ui-blood: #a3121c;
    --ui-text: #e6dcc8;                 /* parchment */
    --ui-muted: #8a7d6a;
    --ui-font-pixel: 'Press Start 2P', monospace;
    --ui-font-body: 'OS Digits', 'Pixelify Sans', 'Segoe UI', system-ui, sans-serif;
    --ui-side-w: clamp(268px, 22vw, 352px);
    --class-accent: var(--ui-gold);
    /* Vital orb sprites, 48×48 art px (generated: socket ring, liquid mask, glass glint) */
}