/* Token thiết kế JX3Web — V2 (DESIGN_V2 §2.1) + V4 (docs/impl/V4_ux_spec.md §2). Builder CHỈ dùng biến, không định nghĩa lại.
   Tên V2 (--panel, --text, --gold…) giữ làm bí danh — KHÔNG xoá. Thành phần dùng chung (kit, tiền tố k-) ở css/kit.css, nạp
   kèm qua @import dưới đây (index.html chưa link kit.css — xem "Yêu cầu cho main" trong docs/impl/V4_ux.md). */
@import url("kit.css");

:root{
  /* ── V2 (giữ nguyên tên + giá trị) ── màu — phong cách JX3: mực xanh ngọc + viền ngọc lục bảo + vàng kim (U3 §4) */
  --ink-0:#0c0f13; --ink-1:#14181e; --ink-2:#1c222a; --ink-3:#27303a;
  --panel:rgba(10,22,24,.72); --panel-strong:rgba(10,22,24,.86); --panel-line:rgba(95,184,162,.38);
  --gold:#e0b862; --gold-deep:#b48a3c; --jade:#5fb8a2; --cinnabar:#d0573f; --text:#ece6d6; --text-dim:#a59e8f;
  --hp:#e2462f; --hp-hi:#ff7a4a; --mp:#3d8bff; --cast:#8fe0a0; --exp:#e0b862; --cd-veil:rgba(0,0,0,.62);
  --rel-self:#7dffb0; --rel-party:#1a9ce3; --rel-ally:#3fd25e; --rel-neutral:#eeee0f; --rel-enemy:#f03d08;
  --rel-foe:#c51ac9; --rel-dead:#727272;                                   /* force_relation.txt (U3 §3.8) — CHỈ cho tô/viền */
  --q-yellow:#ffd200; --q-blue:#4fb3ff; --q-orange:#ff8a00; --q-green:#5ad25a; --q-gray:#9a9a9a;
  --ok:#5ad25a; --warn:#e6a23c; --err:#ff5a4a;
  /* chữ — bản VH dùng Tahoma (fontlist.ini.vi_VN); Android → Roboto/Noto, iOS → system-ui (đủ dấu tiếng Việt) */
  --font:Tahoma,"Segoe UI",Roboto,"Noto Sans",system-ui,Arial,sans-serif; --font-title:"Noto Serif","Times New Roman",serif;
  --shadow-text:0 1px 0 #262626,0 0 3px rgba(0,0,0,.9);
  /* nhịp, bo, lớp, chuyển động */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --r-s:.375rem; --r-m:.625rem; --r-pill:999px;
  --z-world:1; --z-hud:10; --z-controls:20; --z-sheet:30; --z-modal:40; --z-toast:50;
  --dur-fast:120ms; --dur:200ms; --ease:cubic-bezier(.2,.8,.2,1);
  /* an toàn (notch) */
  --sl:max(12px,env(safe-area-inset-left)); --sr:max(12px,env(safe-area-inset-right));
  --st:max(8px,env(safe-area-inset-top)); --sb:max(8px,env(safe-area-inset-bottom));
  /* cảm ứng (U7 §7, đơn vị rem đã nhân --ui-scale) */
  --tap:2.75rem; --btn-atk:4.8rem; --btn-skill:3.6rem; --btn-util:2.9rem; --btn-page:2.2rem;

  /* ── V4 §2.1 màu THEO VAI TRÒ (tương phản đo trên trời sáng #e8eef2 — bảng §2.1 đặc tả) ── */
  /* mặt: scene .62 = dải dưới chữ nằm trên cảnh (CHỈ chữ --tx-1) · hud .86 = khung HUD có chữ màu · panel/raised/sunken đặc */
  --sf-scene:rgba(6,10,12,.62); --sf-hud:rgba(10,18,20,.86); --sf-panel:#12181d; --sf-raised:#1c232b; --sf-sunken:#0b0f13;
  --sf-hover:rgba(224,184,98,.08); --sf-selected:rgba(224,184,98,.14); --sf-backdrop:rgba(4,6,8,.62);
  /* chữ */
  --tx-1:#ece6d6; --tx-2:#c9c1ae; --tx-3:#a59e8f; --tx-off:#7d776c; --tx-on-ac:#1b1408; --tx-link:#f0cf7a;
  /* nhấn */
  --ac:#e0b862; --ac-hi:#ecc97a; --ac-lo:#b48a3c; --ac-2:#5fb8a2;
  /* trạng thái (chữ) + nền nút nguy hiểm (chữ trắng 6,0:1 — KHÔNG dùng --cinnabar làm nền chữ sáng) */
  --st-ok:#5ad25a; --st-warn:#e6a23c; --st-danger:#ff7b66; --st-danger-fill:#b8321f; --st-info:#6cc4ff;
  /* chữ tên theo quan hệ (biến thể sáng của --rel-*, ≥ 4,5:1 trên --sf-hud) */
  --rel-self-tx:#7dffb0; --rel-party-tx:#4cb6f0; --rel-ally-tx:#3fd25e; --rel-neutral-tx:#eeee0f; --rel-enemy-tx:#ff6a45;
  --rel-foe-tx:#ea76ec; --rel-dead-tx:#9a9a9a;
  /* phẩm chất vật phẩm (viền ô) + biến thể chữ tên */
  --rare-0:#a9a9a9; --rare-1:#fafafa; --rare-2:#00d24b; --rare-3:#007eff; --rare-4:#ff2dff; --rare-5:#ffa500;
  --rare-3-tx:#4da3ff; --rare-4-tx:#ff5cff;
  /* tiền (chỉ biểu tượng đồng xu; số luôn --tx-1) */
  --money-brick:#e07b39; --money-gold:#e8c15a; --money-silver:#c9d1d9; --money-copper:#c8875a;
  /* viền */
  --ln-1:rgba(95,184,162,.38); --ln-field:rgba(95,184,162,.62); --ln-2:rgba(255,255,255,.08); --ln-ac:rgba(224,184,98,.55);

  /* ── V4 §2.2 chữ: cỡ = max(sàn × t, rem × s) — t = --ui-text (Cỡ chữ 1/1,12/1,25, Layout ghi), s nằm trong rem ── */
  --ui-text:1;
  --fs-2xs:max(calc(10px*var(--ui-text)),.6875rem);   /* số ≤ 3 ký tự trên huy hiệu/ô, chữ phím, số trên thanh máu */
  --fs-xs:max(calc(11px*var(--ui-text)),.75rem);      /* nhãn 1–2 từ (đồng hồ, kênh chat, đơn vị) */
  --fs-sm:max(calc(12px*var(--ui-text)),.8125rem);    /* meta, chú thích, dòng chat, mục tiêu NV */
  --fs-md:max(calc(13px*var(--ui-text)),.875rem);     /* thân, nút, tab, dòng danh sách */
  --fs-lg:max(calc(14px*var(--ui-text)),1rem);        /* tên trên khung, tiêu đề mục, giá chính */
  --fs-xl:max(calc(16px*var(--ui-text)),1.125rem);    /* tiêu đề cửa sổ/sheet (serif) */
  --fs-2xl:max(calc(20px*var(--ui-text)),1.5rem);     /* công bố, tên vùng, số lớn */
  --fs-3xl:max(calc(24px*var(--ui-text)),2rem);       /* tên map ở màn nạp */
  --lh-tight:1.25; --lh-body:1.45;

  /* ── V4 §2.3 khoảng cách/bo/bóng ── */
  --sp-5:1.5rem; --sp-6:2rem; --r-xs:.25rem; --r-l:.875rem;
  --elev-1:0 2px 8px rgba(0,0,0,.35); --elev-2:0 10px 28px rgba(0,0,0,.5); --elev-3:0 16px 48px rgba(0,0,0,.6);
  /* ── V4 §2.4 chuyển động ── */
  --dur-press:80ms; --dur-slow:280ms; --ease-out:cubic-bezier(.4,0,1,1);
  /* ── V4 §2.5 lớp ── */
  --z-tracker:15; --z-hint:25; --z-window:30; --z-feed:50; --z-loading:60; --z-system:70;
  /* ── kích thước thành phần (u ⇒ rem) ── */
  --k-h-sm:max(24px,1.5rem); --k-h-md:max(28px,2rem); --k-h-lg:max(36px,2.5rem); --k-icon:max(28px,2rem); --k-close:max(28px,2rem);
  /* [V5 ui] ô vật phẩm/trang bị THỐNG NHẤT toàn UI (túi, nhân vật, cửa hàng…): 48 px @1920, sàn 44 px (1366), cảm ứng ≥ 52 px */
  --slot:max(44px,3rem); --slot-gap:.25rem;
}
/* cảm ứng: sàn chữ cao hơn (đọc ở tầm tay, ngoài trời — COMMON "chữ thân ≥ 12 px" ⇒ câu ≥ 13 px), nút ≥ 44 px THẬT */
html[data-ui]:not([data-ui="desktop"]){
  --fs-2xs:max(calc(11px*var(--ui-text)),.6875rem); --fs-xs:max(calc(12px*var(--ui-text)),.75rem);
  --fs-sm:max(calc(13px*var(--ui-text)),.8125rem); --fs-md:max(calc(14px*var(--ui-text)),.875rem);
  --fs-lg:max(calc(15px*var(--ui-text)),1rem); --fs-xl:max(calc(17px*var(--ui-text)),1.125rem);
  --fs-2xl:max(calc(20px*var(--ui-text)),1.5rem); --fs-3xl:max(calc(24px*var(--ui-text)),2rem);
  --k-h-sm:36px; --k-h-md:max(44px,2.75rem); --k-h-lg:52px; --k-icon:44px; --k-close:44px;
  --slot:max(52px,3.25rem); --slot-gap:4px;
}
html{font-size:calc(16px*var(--ui-scale,1))}           /* MỌI kích thước HUD viết bằng rem */