/* AgeUp UI v2 tokens (2026-09-29): simple clean cartoon. ONLY :root declarations; /ui-editor/ rewrites this file.
   game/style.css consumes var(); load theme.css first. Palette = design/ui-v2/gen.sh (muted soft). Docs: docs/UI-SKIN.md. */
:root {
  /* ---- screen scale (2026-09-29): every size = N * --u. 1px at ref 1280x720 (landscape) or 720x1280 (portrait), whichever the
     screen fits better; clamp = touch floor .85 / 4K cap 2. Tune the numbers only. ---- */
  --u: clamp(.85px, max(min(100vw / 1280, 100dvh / 720), min(100vw / 720, 100dvh / 1280)), 2px);  /* landscape ref 1280x720 OR portrait ref 720x1280, whichever fits better */

  /* ---- palette ---- */
  --cream: #F3E9D2;             /* panel body */
  --cream-lt: #FBF6EA;          /* slot/input face, top highlight */
  --cream-dk: #E4D3B0;          /* wells, dividers, empty track */
  --brown: #8B6B4E;             /* secondary text, soft borders */
  --line: #3B2A1E;              /* thick outline + ink */
  --ink: #3B2A1E;
  --ink-dim: #7A6048;
  --sage: #9DB88A;              /* primary button, progress */
  --sage-dk: #6F8F5C;
  --blue: #8FAFC8;              /* MP, selection */
  --blue-dk: #5F84A3;
  --coral: #E39B86;             /* HP, danger, close */
  --coral-dk: #B8664F;
  --gold: #E8C56A;              /* tier chip, highlight */
  --bronze: #C38A5C;            /* K-220 achievement badge tier 1 */
  --silver: #B8C3CC;            /* K-220 achievement badge tier 2 (tier 3 = --gold) */
  --gold-dk: #B8923A;
  --rar-1: #8A8478;             /* K-407 rarity ladder step 1 grey: card junk, fish common (wheel wedge/fill/chip, fish row bar) */
  --rar-2: #4F8A3A;             /* step 2 green: card common, fish uncommon */
  --rar-3: #3F74B8;             /* step 3 blue: card rare, fish rare */
  --rar-4: #C8921A;             /* step 4 gold: card great, fish legendary */
  --rar-gem: #B0479E;           /* fish gem row (off-ladder) */
  --locked: #C0533F;            /* requirement not met text */
  --scrim: rgba(59, 42, 30, .45);
  --page: #CFE0D0;              /* behind pre-game screens before the bg loads */

  /* ---- shape ---- */
  --line-w: calc(3 * var(--u));                /* outline thickness */
  --radius: calc(20 * var(--u));               /* panels */
  --radius-sm: calc(12 * var(--u));            /* buttons, slots */
  --lift: 0 calc(4 * var(--u)) 0 rgba(59, 42, 30, .35);           /* cartoon drop under buttons/panels */
  --shadow: 0 calc(6 * var(--u)) 0 rgba(59, 42, 30, .28), 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(59, 42, 30, .25);
  --gloss: inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(59, 42, 30, .14);
  --well: inset 0 calc(3 * var(--u)) 0 rgba(59, 42, 30, .10);

  /* ---- sizes ---- */
  --btn-h: calc(44 * var(--u));                /* touch target floor */
  --slot: calc(56 * var(--u));
  --menu-btn: calc(52 * var(--u));
  --hotbar-h: calc(76 * var(--u));
  --pad: calc(14 * var(--u));                  /* panel padding */
  --panel-w: calc(540 * var(--u));             /* >=520 keeps .ui-split two-pane (container query) */

  /* ---- UI v3 9-slice edge sizes (fixed, * --u only; see style.css UI v3 skin) ---- */
  --pnl-t: calc(62 * var(--u));   /* rolled top */
  --pnl-b: calc(60 * var(--u));   /* rolled bottom */
  --pnl-l: calc(40 * var(--u));   /* torn side rim */
  --pnl-r: calc(38 * var(--u));
  --pnl-slice: 88 68 86 71;       /* px in assets/ui3/panel.webp: top right bottom left (corner/edge art kept fixed) */
  --slot-slice: 33;               /* px in slot.png / slot_empty.png */
  --inset-slice: 36;              /* px in inset.png */
  --slot-edge: calc(15 * var(--u));
  --inset-edge: calc(16 * var(--u));
  --gear-slot: calc(56 * var(--u));
  --side-tab: calc(56 * var(--u));   /* K-125 side tab button */  /* bag gear block slot */

  /* ---- type (Thai: Mitr, rounded; keep engine/font.js CANVAS_FONT in step) ---- */
  --font: 'Mitr', 'Prompt', Tahoma, sans-serif;
  --body-size: calc(15 * var(--u));
  --title-size: calc(20 * var(--u));

  /* ---- motion ---- */
  --anim-ms: 160ms;
  --ease: cubic-bezier(.2, .8, .2, 1.2);
}