/* Хуяул + Хуяка pixel style: tokens and shared components. Link this first, then the page's own CSS.
   The guide with every component and the icon set: webapp/style/guide.html.
   The game's whole style guide (3D map + UI, rules every visual PR cites): docs/huyaul/style-guide.md.

   PIXEL GRAMMAR (one for both pages, checked by webapp/tools/screens.mjs):
   - Colours: only palette.js ramps (mirrored below). Shades of a colour = its ramp, never color-mix or
     filters; transparency only as ink/bone with alpha over a palette surface. (The globe's terrain is lit by
     the sun and tinted by moisture and slope: its shades are derived — the one exception.)
   - Art sizes: materials and UI icons 10×10 (8×8 drawn + 1-px ink outline), huyaks 12×12, items 16×16,
     buildings 16×16 per plot cell (32/48 for big ones), chests 24×22, the paper doll 72×150.
   - Scale per context, whole numbers only (image-rendering: pixelated):
       sheets, lists, bars, buttons, toasts ......... ×2  (1 art px = 2 CSS px): icon 20, huyak 24, item 32
       showcase (item head, chest, gacha, the doll) . ×4, the doll ×2 — multiples of the base
       plot ......................................... camera zoom, whole numbers (16-px tiles ×1…×8)
       globe markers ................................ 1 art px = 1 CSS px from mid zoom, 2 up close
                                                      (a walker ≤ 24 CSS px ≈ ⅓ of a res-7 hex), a 4-px pip far out
       globe terrain ................................ texels drawn as «fat pixels» (sharp, no shimmer)
     A sprite bigger than its box is cropped to its middle, never shrunk.
   - Outline: 1 art px of ink.0 around every sprite and icon. Light from the top left: the lit side is the
     ramp's lighter shade, the bottom/right edge a shade darker. 2–4 shades per small icon.
   - Interface: made of the world's materials (style guide §18): 9-slice pixel skins (style/skins: wood, stone,
     cloth, paper, gold, night), corners in steps on the 2-px grid (clip-path), four shapes (plank, medallion,
     ribbon, seal); hard drop shadows in whole pixels (--drop), a bevel (--bevel); no border-radius, no blur,
     no soft gradients — fades are dithered (--dither-*).
   - Type: Tiny5 for titles, buttons, tabs, labels; Golos Text for reading text and every number.
     Nothing under 12 px. No emoji or font glyphs as icons: js/uiicons.js draws them.

   LAYOUT (one standard for both pages, checked by the screen checker: row-size, row-align, grid,
   spacing, cover — webapp/tools/audit.js):
   - Spacing: the 4-px scale only — 4 8 12 16 20 24 32 40 48 (--sp-*). The 2-px --b is a border width,
     never a gap: frames are box-shadows and need no margin.
   - Sizes: icon button 44×44 (--icon-btn); text button height 44 (--btn-h); a primary full-width button
     48 (--btn-primary-h); chips 32 visible with a 44 hit area (--chip-h). Buttons in one row or one
     toolbar are one size; a toolbar is a grid of equal columns.
   - One frame for every control and card: --frame (+ --drop for what floats, + --bevel for buttons). No radius.
   - Sheets: --sheet-pad on both sides; every block starts and ends on the sheet's padding lines.
   - List rows: actions sit right in fixed --act-slot columns; a missing action keeps its slot (shown
     disabled), so the same action lines up in every row.
   - Overlays (toasts, floating bars) never cover a sheet's header or a button. */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800&family=Tiny5&display=swap');

:root {
  /* ---------------------------------------------------------------- palette (= webapp/js/palette.js ramps) */
  --ink-0: #140c1c; --ink-1: #2a1f33; --ink-2: #443650;
  --night-0: #0d0912; --night-1: #17111e; --night-2: #1a1420; --night-3: #221a2b; --night-4: #2e2438;
  --mist-0: #6b6889; --mist-1: #a39aa8; --mist-2: #cbc6dc;
  --stone-0: #3b3d48; --stone-1: #585b69; --stone-2: #7b7f8f; --stone-3: #a2a6b4; --stone-4: #cbced8;
  --snow-0: #b9cfe0; --snow-1: #e3eef6; --snow-2: #ffffff;
  --bone-0: #b39d72; --bone-1: #d8c69d; --bone-2: #f3e9d2;
  --wood-0: #3a2315; --wood-1: #5b3920; --wood-2: #7f532c; --wood-3: #a6743d; --wood-4: #cf9e62;
  --steppe-0: #8a6a22; --steppe-1: #b8902e; --steppe-2: #dcb84a; --steppe-3: #f2dc7e;
  --green-0: #16301e; --green-1: #234a26; --green-2: #336a2f; --green-3: #4d8a38; --green-4: #72ab45; --green-5: #a2cf5c; --green-6: #d1ea84;
  --olive-0: #5d5a2c; --olive-1: #807c3c; --olive-2: #a6a254;
  --water-0: #0f2244; --water-1: #173c6e; --water-2: #24609c; --water-3: #3a87c4; --water-4: #6db3e2; --water-5: #b5e1f5;
  --ochre-0: #4f1712; --ochre-1: #7f2618; --ochre-2: #ad3c1f; --ochre-3: #d45f2a; --ochre-4: #ec8c48; --ochre-5: #f6bb7a;
  --berry-0: #2e1638; --berry-1: #552463; --berry-2: #843a8c; --berry-3: #b65fb3; --berry-4: #e09ad6;
  --flesh-1: #a1525a; --flesh-2: #d27b78; --flesh-3: #f0aa9c;
  --gold-0: #8a5a0c; --gold-1: #c98e14; --gold-2: #f2c230; --gold-3: #ffe878;
  --rad-1: #3f8a1c; --rad-2: #78c82a; --rad-3: #b8f53c;
  --shallow-1: #4fb3c8; --shallow-4: #e8f6f8;

  /* ---------------------------------------------------------------- roles: the game's own night, palette only
     (Telegram's theme colours are not followed: they would bring colours from outside the palette) */
  --bg: var(--night-3);
  --bg2: var(--night-1);
  --text: var(--bone-2);
  --hint: var(--mist-1);
  --link: var(--gold-2);
  --btn: var(--ochre-2); /* bone text on it: contrast 5.2 */
  --btn-text: var(--bone-2);
  --card: var(--night-2);
  --line: color-mix(in srgb, var(--bone-2) 12%, transparent);
  --ink: var(--ink-0);
  --good: var(--green-4);
  --bad: var(--ochre-4);
  --warn: var(--gold-2);
  --gold: var(--gold-2);
  --bar: rgba(20, 12, 28, 0.86);

  /* rarity (Хуяка loot, also eras/capstones) */
  --r-trash: var(--stone-3);
  --r-common: var(--green-4);
  --r-rare: var(--water-3);
  --r-epic: var(--berry-3);
  --r-legendary: var(--gold-2);
  --r-mythic: var(--ochre-3);

  /* research branches */
  --br-craft: var(--ochre-3); --br-lore: var(--berry-3); --br-trade: var(--gold-2); --br-life: var(--green-4); --br-war: var(--ochre-2);

  /* ---------------------------------------------------------------- dithers: 2-px checker cells (×2 art pixels);
     a fade is solid → 50% → 25% bands of these, never a soft gradient. Colour: --dc. */
  --dither-50: conic-gradient(var(--dc, var(--ink-0)) 25%, transparent 0 50%, var(--dc, var(--ink-0)) 0 75%, transparent 0) 0 0 / 4px 4px;
  --dither-25: conic-gradient(var(--dc, var(--ink-0)) 25%, transparent 0) 0 0 / 4px 4px;

  /* ---------------------------------------------------------------- type
     Display: Tiny5, a pixel face with Cyrillic, for titles, buttons, tabs, labels.
     UI: Golos Text for reading text and every number (tabular digits: 12.0 never reads as 18.0). */
  --font-display: 'Tiny5', 'Golos Text', system-ui, sans-serif;
  --font-ui: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 12px; --fs-s: 12.5px; --fs-m: 15px; --fs-l: 18px; --fs-xl: 24px;

  /* ---------------------------------------------------------------- space, pixel borders, shadows (multiples of 2 px) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --tap: 44px;               /* smallest thumb target */
  --icon-btn: 44px; --btn-h: 44px; --btn-primary-h: 48px; --chip-h: 32px;
  --sheet-pad: 16px;         /* a sheet's side padding: the lines every block in it starts and ends on */
  --act-slot: 44px;          /* one action column in a list row */
  --b: 2px;                  /* pixel border */
  /* notched pixel frame: borders on four sides, corners left out */
  --frame: 0 calc(-1 * var(--b)) 0 0 var(--ink), 0 var(--b) 0 0 var(--ink), calc(-1 * var(--b)) 0 0 0 var(--ink), var(--b) 0 0 0 var(--ink);
  --drop: 0 calc(var(--b) * 3) 0 0 rgba(0, 0, 0, 0.35);
  --bevel: inset 0 var(--b) 0 0 rgba(255, 255, 255, 0.16), inset 0 calc(-2 * var(--b)) 0 0 rgba(0, 0, 0, 0.28);

  /* Telegram: the device's safe area plus its own header (content safe area) on top of it */
  --safe-top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------- the world's materials (style guide §18)
   Shapes: stepped corners on the 2-px grid (--cut-4/10/12), the seal (number badge), the ribbon (headers, tabs).
   Skins: 9-slice pixel tiles (style/skins/*.png, drawn by tools/gen_skins.py, which also writes them here as data
   URIs: a relative url() in a custom property would resolve against the file that uses it), 16 art px, slice 6,
   shown ×2: border-image: var(--skin-wood) 6 fill / 12px / 0 repeat. Each has a -down face for the press. --hard-drop is the floating shadow of a skinned element (a filter, because a
   9-slice has no box to cast --drop from). */
:root {
  --cut-4: polygon(0px 4px, 0px 2px, 2px 2px, 2px 0px, 4px 0px, calc(100% - 4px) 0px, calc(100% - 2px) 0px, calc(100% - 2px) 2px, calc(100% - 0px) 2px, calc(100% - 0px) 4px, calc(100% - 0px) calc(100% - 4px), calc(100% - 0px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 0px), calc(100% - 4px) calc(100% - 0px), 4px calc(100% - 0px), 2px calc(100% - 0px), 2px calc(100% - 2px), 0px calc(100% - 2px), 0px calc(100% - 4px));
  --cut-12: polygon(0px 12px, 0px 10px, 2px 10px, 2px 8px, 4px 8px, 4px 6px, 6px 6px, 6px 4px, 8px 4px, 8px 2px, 10px 2px, 10px 0px, 12px 0px, calc(100% - 12px) 0px, calc(100% - 10px) 0px, calc(100% - 10px) 2px, calc(100% - 8px) 2px, calc(100% - 8px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 8px, calc(100% - 2px) 8px, calc(100% - 2px) 10px, calc(100% - 0px) 10px, calc(100% - 0px) 12px, calc(100% - 0px) calc(100% - 12px), calc(100% - 0px) calc(100% - 10px), calc(100% - 2px) calc(100% - 10px), calc(100% - 2px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) calc(100% - 2px), calc(100% - 10px) calc(100% - 2px), calc(100% - 10px) calc(100% - 0px), calc(100% - 12px) calc(100% - 0px), 12px calc(100% - 0px), 10px calc(100% - 0px), 10px calc(100% - 2px), 8px calc(100% - 2px), 8px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 8px), 2px calc(100% - 8px), 2px calc(100% - 10px), 0px calc(100% - 10px), 0px calc(100% - 12px));
  --cut-10: polygon(0px 10px, 0px 8px, 2px 8px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 8px 2px, 8px 0px, 10px 0px, calc(100% - 10px) 0px, calc(100% - 8px) 0px, calc(100% - 8px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 8px, calc(100% - 0px) 8px, calc(100% - 0px) 10px, calc(100% - 0px) calc(100% - 10px), calc(100% - 0px) calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) calc(100% - 0px), calc(100% - 10px) calc(100% - 0px), 10px calc(100% - 0px), 8px calc(100% - 0px), 8px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 8px), 0px calc(100% - 8px), 0px calc(100% - 10px));
  --seal: polygon(0px 6px, 0px 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0px, 6px 0px, calc(100% - 6px) 0px, calc(100% - 4px) 0px, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, calc(100% - 0px) 4px, calc(100% - 0px) 6px, calc(100% - 0px) calc(100% - 6px), calc(100% - 0px) calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) calc(100% - 0px), calc(100% - 6px) calc(100% - 0px), 6px calc(100% - 0px), 4px calc(100% - 0px), 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0px calc(100% - 4px), 0px calc(100% - 6px));
  --ribbon: polygon(0px 0px, calc(100% - 0px) 0px, calc(100% - 0px) calc(50% - 8px), calc(100% - 2px) calc(50% - 8px), calc(100% - 2px) calc(50% - 6px), calc(100% - 4px) calc(50% - 6px), calc(100% - 4px) calc(50% - 4px), calc(100% - 6px) calc(50% - 4px), calc(100% - 6px) calc(50% - 2px), calc(100% - 8px) calc(50% - 2px), calc(100% - 8px) 50%, calc(100% - 8px) calc(50% + 2px), calc(100% - 6px) calc(50% + 2px), calc(100% - 6px) calc(50% + 4px), calc(100% - 4px) calc(50% + 4px), calc(100% - 4px) calc(50% + 6px), calc(100% - 2px) calc(50% + 6px), calc(100% - 2px) calc(50% + 8px), calc(100% - 0px) calc(50% + 8px), 100% 100%, 0px 100%, 0px calc(50% + 8px), 2px calc(50% + 8px), 2px calc(50% + 6px), 4px calc(50% + 6px), 4px calc(50% + 4px), 6px calc(50% + 4px), 6px calc(50% + 2px), 8px calc(50% + 2px), 8px 50%, 8px calc(50% - 2px), 6px calc(50% - 2px), 6px calc(50% - 4px), 4px calc(50% - 4px), 4px calc(50% - 6px), 2px calc(50% - 6px), 2px calc(50% - 8px), 0px calc(50% - 8px));
  /* skins:begin */
  --skin-wood: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAArElEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDAwwjTvnuRGin4G17xdDG++PGFkhGnesPUUTsV3nn1hUJHiwRDbefkPAxMDAwPD9Wu3Ge48+4LTAHTNyICJGEX4AAuykygyAOYCbP7FBmAWMqFLkOoVDAOIAcjexWkAsbGCNxCJCViMQCQW4AxEUl3BwsDAwLD16GOyDWF68+UJ487Lfwg5BAPsvPwHkplgAuRmZwA/0ku5qFo2fQAAAABJRU5ErkJggg==);
  --skin-wood-down: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAk0lEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDAwwjS767KQop9h5+U/DG++PGFkEuGR+Z/tLoBX8f1XXzHE1MR/MojwyPxnwqcIBhTFuHHKMRGjCB+AexyfC4gyAOaC+6++EuUamIVM6BKkegXDAGIAsndxGkBsrOANRGICFiMQiQU4A5FUVxA0gJDLKM5MjDABcrMzAAxxOs1hr/h+AAAAAElFTkSuQmCC);
  --skin-stone: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAqElEQVR4nM2TrRLCMBCE96IrK+v46VugahAMr0omoiaKl4CGxEVGxhfDdUrLEBLFypv9di9zE8JLddWMyFCIngCAGO6vOofH8dAhRE/E8EX2cNZgs91/BdnjrIGWCgIAbnc7Gdp2l7WJWA6G4ZGE5iWrgF80L3kLSL3/k6dogz8OcNYkgaVnCsi9/yog9/4sqqtm7M6nonYtFUSInrRURXCInogHpd/5Cd4YP1qm6R5XAAAAAElFTkSuQmCC);
  --skin-stone-down: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAqklEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDAwwjS7+PsyPH50n0FWThGvRpiaPRs3M7z58oSRSYRH5n96cTEpljMwMDAwqBvqMIjwyPxnQpdQVlEjySAMA+7euUVQE7IlGAYQA5AtQTGAUABiU0OWCwaxAY8f3SeoAV0N3ABS4x/DAFLjH8MAYgA2S5jefHnCOLO3lxRzGBgYGBhunr/C8ObLE0ZGmAC52RkA/KA1HiXpAEUAAAAASUVORK5CYII=);
  --skin-cloth: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDCwwDTfaNAhRT+DRgPD/zdfnjAyIWs+uOE60XS21B8GER6Z/4wiPDL/DwTzMdy8+5UkF1x69ZNh6jMWBiaSdGEBowYMLwPsAzRJomGAUYRH5n+21B+ybJ/6jIWB6c2XJ4xTn7GQpfnNlyeMjDABcrMzAEnsPMMiS4PIAAAAAElFTkSuQmCC);
  --skin-cloth-down: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAg0lEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDAwwjRnS/0hRT/D1GcsDG++PGFkEuGR+T/TgJkh1FKIgYGBgWjamvsbgwiPzH9GmAGXXv0kyQUXPv5iOPqVi4GJJF1YwKgBw8sAUlMiDFCeEt98ecKYfuEvyU4/+pWL4c2XJ4yMMAFyszMAJpw3Ehz2Nt8AAAAASUVORK5CYII=);
  --skin-paper: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoklEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDAwwjQ/f3mKFP0MkuJmDG++PGFkhGm+e3E7SQbcvn6VITF/FQMTAwMDw48vb4jSgA0wEVIAA6qa2vgNwKWAkCuYCCkg5AomQgoIuYKJkAJCrsAwgFRXYBhAqiuwGkCMK/AaQIwrYICFgYGB4cCWBWQbwvTmyxPGxPxVRNmGDBLzV0EyE0yA3OwMAC1kQ9I7ayJZAAAAAElFTkSuQmCC);
  --skin-paper-down: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAp0lEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDAwwjTPnxiGU/H1mw8YNNUVUMQS81cxvPnyhJFJhEfm/5FdjXhtQ9fMwMDAUJZlxiDCI/OfiVgnX7/5AKs4EyEF+FyBYgAuBYRcwURIASFXMBFSQMgVGIFIqiswDCDVFVijkRRXYDWAGFfgNYAYVxA0gFhXML358oTRxq2eZFd0TTvF8ObLE0ZGmAC52RkAEpY+HrQAO0EAAAAASUVORK5CYII=);
  --skin-gold: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgElEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDAwwjS/vhNDin4GUZUlDG++PGFkhGk+tWwOg6aJDMP1M0+IMuDgmR8MXZsEGJgYGBgYPt/aQZJmZMAEY5CjGcUAcsGoAcPCABYGBgaGGTPukO+CN1+eMHZtEiBZY9cmAUhmggmQm50BUistlPVEUWUAAAAASUVORK5CYII=);
  --skin-gold-down: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAgElEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDAwwjSX+X1gYGBgYLA34WA4eOYHQQO6NgkwvPnyhJFJhEfm/9amHyRpZmBgYPDQf8MgwiPznwkmQIpmZAA3gBzNKAaQC0YNGDWAgYGBgenNlyeM3nUcJGvccVGE4c2XJ4yMMAFyszMActcoo5e7ClcAAAAASUVORK5CYII=);
  --skin-night: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdElEQVR4nO2ToQ6DQBAFZwkSWckXVCH6/9+AqiGp2pBCjhquQVzuwHAJdk8zcpOZPLPCyaNpdww4rwJQZ7l7viw+/ZvdeRXJ8kcHU+C/rcSQqADm39ckX6mKzTtwBy7UANMyli9wXiWGZBZjSDivIvlQ+s4HlOMqgt9FNaMAAAAASUVORK5CYII=);
  --skin-night-down: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAWElEQVR4nGNkgAIRHpn/DCSAN1+eMDIwMDAwwjQzszKRop/h7+9/DG++PGFkEuGR+c/Hx0+SZgYGBoaff78xiPDI/CfNWixg1IBRAwaHARRnJkaYALnZGQBcwhuqcgi2sQAAAABJRU5ErkJggg==);
  /* skins:end */
  --hard-drop: drop-shadow(0 4px 0 rgba(20, 12, 28, .55));
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--night-2); color: var(--text); font: var(--fs-m)/1.35 var(--font-ui); overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; padding: 0; } /* no browser padding: sizes come from the tokens */
p { margin: 0 0 var(--sp-3); } /* not the browser's 1em */
.row-end > * { flex-shrink: 0; } /* action buttons keep their width (and grid): a full row wraps */
img.px, canvas.px { image-rendering: pixelated; vertical-align: middle; flex: none; }
img.px.ui { display: inline-block; }
.meta img.px.ui, .line img.px.ui, .name img.px.ui, .note img.px.ui, .toast img.px.ui, .dur img.px.ui { margin: 0 4px 0 0; }
.num, .q, .mat b, .kv > span:last-child { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; }
.muted { color: var(--hint); }
.small { font-size: var(--fs-s); }
.good { color: var(--good); }
.bad { color: var(--bad); }

/* ---------------------------------------------------------------- frames: pixel border with notched corners */
.px-frame { box-shadow: var(--frame), var(--drop); }
.px-panel { background: var(--bg); box-shadow: var(--frame), var(--drop), var(--bevel); }

/* ---------------------------------------------------------------- buttons */
.btn { min-height: var(--tap); padding: 0 var(--sp-4); border: 0; border-radius: 0; font: 400 16px/1 var(--font-display);
  letter-spacing: .03em; background: var(--card); color: var(--text); box-shadow: var(--frame), var(--drop), var(--bevel);
  margin: 0 0 8px; }
.btn.primary { background: var(--btn); color: var(--btn-text); }
.btn.gold, .btn.primary.hot { background: var(--gold-1); color: var(--ink); }
.btn.danger { background: var(--ochre-1); color: var(--bone-2); }
.btn.ghost { background: var(--card); color: var(--text); }
.btn.small { min-height: var(--tap); padding: 0 var(--sp-3); font-size: 14px; }
.btn.off { background: var(--ink-2); color: var(--mist-1); }
.btn:active, .chip:active, .round:active { transform: translateY(var(--b)); box-shadow: var(--frame), 0 var(--b) 0 0 rgba(0, 0, 0, 0.35), var(--bevel); }

/* a text button's width steps in 4 px (where the browser can round intrinsic sizes), so buttons
   set side by side keep their edges on the 4-px grid */
.btn, .chip { width: calc-size(max-content, round(up, size, 4px)); }
/* equal-column toolbars: whole 4-px columns, the last one takes what is left */
.eq2 { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr; grid-template-columns: round(down, calc((100% - var(--sp-2)) / 2), 4px) 1fr; }
.eq3 { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(2, round(down, calc((100% - 2 * var(--sp-2)) / 3), 4px)) 1fr; }
.eq2 > *, .eq3 > * { width: auto; margin: 0; }

/* a primary full-width button: 48 high */
.btn.full { width: 100%; height: var(--btn-primary-h); min-height: var(--btn-primary-h); }
/* a pill (small toggle chip): 32 visible, a 44 hit area round it */
.pill { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--chip-h); padding: 0 var(--sp-3); border: 0;
  background: var(--ink-1); color: var(--bone-1); font: 400 14px/1 var(--font-display); box-shadow: var(--frame); }
.pill::before { content: ''; position: absolute; left: 0; right: 0; top: calc((var(--chip-h) - var(--tap)) / 2); bottom: calc((var(--chip-h) - var(--tap)) / 2); }
.pill.on { background: var(--ochre-2); color: var(--bone-2); }
/* a list row: text, then actions in fixed columns on the right */
.lrow { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center; padding: var(--sp-1) 0; border-bottom: var(--b) dotted var(--line); }
.lrow .acts { display: grid; grid-auto-flow: column; grid-auto-columns: var(--act-slot); gap: var(--sp-1); }

/* square icon button (zoom, home) */
.round { width: var(--tap); height: var(--tap); border: 0; border-radius: 0; background: rgba(34, 26, 43, 0.92); color: var(--bone-2);
  font: 400 22px/1 var(--font-display); box-shadow: var(--frame), var(--drop), var(--bevel); }

/* chips: top-bar buttons and small toggles */
.chip { min-height: var(--tap); min-width: var(--tap); justify-content: center; display: inline-flex; gap: 8px; align-items: center; padding: 0 var(--sp-3); border: 0; border-radius: 0;
  background: var(--wood-1); color: var(--bone-2); font: 400 15px/1 var(--font-display); letter-spacing: .02em;
  box-shadow: var(--frame), var(--drop), var(--bevel); margin: 0; }
.chip.green { background: var(--green-1); }
.chip.red { background: var(--ochre-1); }
.chip.gold { background: var(--gold-1); color: var(--ink); }
.chip .num, .chip b { font: 700 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; }

/* segmented switch */
.seg { display: flex; background: rgba(0, 0, 0, 0.45); padding: 0; box-shadow: var(--frame); margin: 0; }
.seg button { min-height: var(--tap); min-width: 64px; padding: 0 var(--sp-3); border: 0; background: none; font: 400 16px/1 var(--font-display); color: var(--bone-1); }
.seg button.on { background: var(--ochre-2); color: var(--bone-2); box-shadow: var(--bevel); }

/* tags: small labels inside text */
.tag { display: inline-block; margin-left: 8px; padding: 4px 8px 0; font: 400 12px/1.1 var(--font-display); letter-spacing: .03em;
  background: var(--line); color: var(--hint); vertical-align: middle; }
.tag.era, .tag.r-legendary { background: var(--gold-1); color: var(--ink); }
.tag.r-trash { background: var(--r-trash); color: var(--ink); } .tag.r-common { background: var(--r-common); color: var(--ink); }
.tag.r-rare { background: var(--r-rare); color: var(--snow-2); } .tag.r-epic { background: var(--r-epic); color: var(--snow-2); } .tag.r-mythic { background: var(--r-mythic); color: var(--ink-0); }
.tag.br-craft { background: var(--br-craft); color: var(--ink-0); } .tag.br-lore { background: var(--br-lore); color: var(--snow-2); }
.tag.br-trade { background: var(--br-trade); color: var(--ink); } .tag.br-life { background: var(--br-life); color: var(--ink); }
.tag.br-war { background: var(--br-war); color: var(--snow-2); }

/* ---------------------------------------------------------------- tabs */
.tabs { display: flex; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-2); }
.tab { flex: 1; min-height: var(--tap); border: 0; background: var(--card); font: 400 16px/1 var(--font-display); color: var(--hint);
  box-shadow: var(--frame); margin: 0; }
.tab.on { color: var(--text); background: color-mix(in srgb, var(--link) 18%, var(--card)); box-shadow: var(--frame), inset 0 -4px 0 0 var(--link); }

/* ---------------------------------------------------------------- cards and notes */
.card { background: var(--card); padding: var(--sp-3); margin: var(--sp-3) 0; box-shadow: var(--frame), inset 0 var(--b) 0 0 rgba(255, 255, 255, .05); }
.card .name { font: 400 16px/1.2 var(--font-display); letter-spacing: .02em; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.card.locked { opacity: .55; }
.card.future { opacity: .5; }
.card.ready { box-shadow: var(--frame), inset 0 0 0 var(--b) var(--good); }
.card.selected, .card.on { box-shadow: var(--frame), inset 0 0 0 var(--b) var(--link); }
.note { margin: var(--sp-2) 0; padding: var(--sp-3); background: var(--card); font-size: 14px; box-shadow: var(--frame); }
.note.warn { box-shadow: var(--frame), inset 4px 0 0 0 var(--bad); }
.hint { color: var(--hint); font-size: 13.5px; margin: 0 0 var(--sp-2); }
.sec { margin: var(--sp-4) 0 var(--sp-2); font: 400 14px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.sec .muted { text-transform: none; letter-spacing: 0; font: 500 12.5px var(--font-ui); }
.kvs { display: grid; gap: 4px; margin: var(--sp-1) 0 var(--sp-3); }
.kv { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 0; border-bottom: var(--b) dotted var(--line); }
.kv > span:first-child { color: var(--hint); }
.kv > span:last-child { text-align: right; font-weight: 600; }

/* materials and stats in text */
.mats { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.mat { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; background: rgba(0, 0, 0, .2); font-size: 13px; box-shadow: 0 0 0 1px var(--line); }
.mat.short { background: color-mix(in srgb, var(--bad) 30%, transparent); box-shadow: 0 0 0 1px var(--bad); }
.mat.out b { color: var(--good); }
.metas { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-1) 0; }
.meta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-s); padding: 4px 8px; background: var(--line); }
.meta.bad { color: var(--bad); }
.meta.good { color: var(--good); }

/* bars: progress (striped gold) and wear (green → red) */
.pbar { height: 8px; background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 var(--b) var(--ink); margin: var(--sp-2) 0 0; }
.pbar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--gold-2) 0 6px, var(--gold-1) 6px 8px); }
.wear { width: 80%; height: 5px; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 1px var(--ink); }
.wear i { display: block; height: 100%; background: var(--good); }
.wear.low i { background: var(--bad); }

/* ---------------------------------------------------------------- toasts */
.toast { max-width: 520px; padding: 8px 16px; background: var(--ink-1); color: var(--bone-2); font-size: 14px;
  box-shadow: var(--frame), var(--drop); animation: tin .18s steps(3); transition: opacity .35s, transform .35s; margin: 0; }
.toast.ok { background: var(--green-1); }
.toast.err { background: var(--ochre-1); }
.toast.warn { background: var(--olive-0); }
.toast.out { opacity: 0; transform: translateY(-6px); }
@keyframes tin { from { opacity: 0; transform: translateY(-6px); } }

/* ---------------------------------------------------------------- bottom sheet */
.sheet { background: var(--bg); color: var(--text); box-shadow: 0 calc(-1 * var(--b)) 0 0 var(--ink), 0 -8px 0 0 rgba(0, 0, 0, .25); }
.sheet-title { font: 400 22px/1.15 var(--font-display); letter-spacing: .02em; }
.grab i { width: 44px; height: 4px; background: var(--mist-0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* whatever floats over the map hides while a sheet or the tree is up: one thing to tap at a time */
body.sheet-open #hud, body.sheet-open #roadBtn, body.sheet-open #worldbar { visibility: hidden; }
.tag.eureka { background: var(--gold-2); color: var(--ink-0); display: inline-flex; align-items: center; gap: 4px; }
.tag img.px.ui { margin: 0 0 0 0; }