/* ==========================================================================
   game-ui.css — Lop giao dien DUNG CHUNG cho game Mot Doi Nguoi
   (Phap Phap Online) — chi VISUAL, khong doi gameplay / luat / so Xu.
   Nguon: nghien cuu Hay Day / Stardew Valley / Township / Animal Crossing
   Pocket Camp + audit CDP 10/11/2026 (spec hidden_files/thiet-ke-ui-game-2026-11-10.md).
   Cach dung: <link rel="stylesheet" href="game-ui.css"> + them class gu-*
   vao cac phan tu co san (xem snippet tich hop 3 dong trong spec).
   Tien to gu- tranh dung do class voi CSS game hien co. Khong copy asset /
   thuong hieu game khac — chi hoc mau bo cuc / mau sac / kich thuoc cham.
   ========================================================================== */

:root {
  /* PALETTE 8 MAU KHOA 10/11 (DX-1) — khoa theo §5 DX-1 (hoc Stardew "quy tac 8 mau" + Hay Day).
     Chi 8 mau nay dung cho mau chinh; shade duoi chi la bien the sang/toi cua 8 mau.
     Xu LUON 1 mau vang duy nhat --gu-xu. KHONG vien den: vien = mau toi nhat cua vat
     (vd --gu-ink / --gu-red-dark), KHONG dung den tuyet doi. Bong do dung rgba(58,34,8,alpha)
     = --gu-ink + alpha (khong co hex literal). */
  --gu-cream: #faf3dc;        /* 1. kem nen */
  --gu-gold: #c9a227;         /* 2. vang tram */
  --gu-red: #a31621;          /* 3. do son mai */
  --gu-ink: #3a2208;          /* 4. nau dam — chu chinh (tuong phan > 7:1 tren cream) */
  --gu-green: #2e7d32;        /* 5. xanh la ruong — MOI (DX-1) */
  --gu-xu: #b8860b;           /* 6. vang Xu — DUY NHAT cho tien */
  --gu-blue: #1976d2;         /* 7. xanh lam nuoc — MOI (DX-1) */
  --gu-ivory: #fffdf4;        /* 8. trang nga — MOI (DX-1) */
  /* P3b (11/11, chuan §2.5/§1): mau mui ten khac go + mai ngoi — CHỈ THÊM, không đổi 8 màu trên */
  --gu-wood: #7a5a3a;         /* than mui ten go nau */
  --gu-ink2: #2b1d14;         /* vien nau den (mui ten + khung) */
  --gu-roof: #e08a2e;         /* mai ngoi cam (nen L3) */
  /* Shade (bien the cua 8 mau tren — giu nguyen tu ban truoc): */
  --gu-cream-2: #f3e9c8;      /* nen card / vung phu */
  --gu-ink-soft: #6b4a1f;     /* chu phu */
  --gu-red-dark: #7d1019;     /* do dam hon khi bam */
  --gu-gold-soft: #ffe9a8;    /* vang nhat — chu tren bien go / nen chip */
  --gu-wood: #8b5a2b;         /* go — bien chi duong */
  --gu-wood-dark: #5f3c17;
  --gu-line: #d9c08a;         /* vien card */
  --gu-ok: var(--gu-green);   /* alias ve --gu-green (DX-1) */
  --gu-bad: #b3261e;
  --gu-radius: 16px;
  --gu-touch: 48px;           /* cham toi thieu mobile (iOS 44pt / Android 48dp) */
  --gu-touch-primary: 56px;   /* nut chinh 56–64px */
}

/* --- Trang: le toi thieu 12–16px + vung an toan (notch / thanh home) ------- */
.gu-page {
  background: var(--gu-cream);
  color: var(--gu-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.5;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-bottom: max(76px, calc(env(safe-area-inset-bottom, 0px) + 68px)); /* chua cho nav duoi */
}
.gu-wrap { max-width: 720px; margin: 0 auto; }
.gu-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700; color: var(--gu-red);
  margin: 12px 0 4px; text-align: center;
}
.gu-sub { color: var(--gu-ink-soft); text-align: center; margin: 0 0 12px; }

/* --- HUD: tien goc phai tren (icon + so), cap do + ngay goc doi dien ----- */
.gu-hud {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--gu-cream);
  padding: 8px 4px;
  border-bottom: 2px solid var(--gu-line);
}
.gu-hud-left, .gu-hud-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gu-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 12px;
  background: var(--gu-ivory); border: 2px solid var(--gu-line); border-radius: 999px;
  font-weight: 700; font-size: clamp(14px, 1.2vw, 17px); white-space: nowrap;
}
/* Xu LUON 1 mau vang duy nhat, khong dung mau khac cho tien. */
.gu-xu { color: var(--gu-xu); border-color: var(--gu-gold); background: #fff8e1; }
.gu-level { color: var(--gu-ink); }

/* --- Nut: toi thieu 48px, chinh 56px, trang thai bam / khoa ro rang ------- */
.gu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--gu-touch);
  padding: 10px 20px;
  border-radius: 12px;
  border: 2px solid var(--gu-ink-soft);
  background: var(--gu-ivory); color: var(--gu-ink);
  font-family: inherit; font-size: clamp(15px, 1.2vw, 18px); font-weight: 700;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .08s ease, filter .08s ease;
}
.gu-btn:active { filter: brightness(.88); transform: scale(.97); }
.gu-btn-primary {
  min-height: var(--gu-touch-primary);
  background: var(--gu-red); border-color: var(--gu-red-dark); color: #fff8e1;
}
.gu-btn-primary:active { background: var(--gu-red-dark); }
.gu-btn-gold { background: var(--gu-gold); border-color: #9c7c14; color: #2e2000; }
.gu-btn-block { display: flex; width: 100%; }
/* NGUYEN TAC DE CHOI: khong cho user chon sai roi moi bao loi — nut khoa
   mo 45% + kem dong ly do (xem .gu-btn-note), khong an nut di. */
.gu-btn:disabled, .gu-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; filter: none;
}
.gu-btn-note {
  display: block; margin-top: 6px;
  color: var(--gu-bad); font-size: 14px; font-weight: 700; text-align: center;
}

/* --- Bien chi duong + phi di chuyen ---------------------------------------
   Bien tren map 3D la texture canvas (khong dung duoc CSS) — class nay dung
   cho the bien DOM trong sheet/popup + trang test. Phi HIEN NGAY tren bien.
   Khoa: phu xam + khoa + so thieu, KHONG cho bam (pointer-events: none). */
.gu-sign {
  display: block; width: 100%; text-align: center;
  background: linear-gradient(180deg, var(--gu-wood), var(--gu-wood-dark));
  color: var(--gu-gold-soft);
  border: 3px solid var(--gu-ink); border-radius: 12px;
  padding: 14px 12px; margin: 8px 0;
  font-size: clamp(16px, 1.4vw, 20px); font-weight: 700;
  cursor: pointer;
}
.gu-sign small, .gu-sign-fee {
  display: block; margin-top: 4px;
  font-size: clamp(14px, 1.2vw, 17px); font-weight: 700; color: var(--gu-gold-soft);
}
.gu-sign-locked {
  filter: grayscale(.7) brightness(.75);
  cursor: not-allowed; pointer-events: none;
}
.gu-sign-need {
  display: block; margin-top: 4px;
  color: #ffb4ab; font-size: clamp(14px, 1.2vw, 17px); font-weight: 700;
}
/* Chip phi dung trong sheet mo bien / nut dieu huong (vd nut "Vao cho" tren hub). */
.gu-fee-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  background: #fff8e1; border: 1px solid var(--gu-gold);
  color: var(--gu-xu); font-size: 14px; font-weight: 700; white-space: nowrap;
}

/* --- Card / the sap / the nhiem vu: 1 cot mobile, bo 16px, bong nhe ----- */
.gu-card {
  background: var(--gu-ivory);
  border: 2px solid var(--gu-line);
  border-radius: var(--gu-radius);
  padding: 12px 16px; margin: 12px 0;
  box-shadow: 0 2px 6px rgba(58, 34, 8, .12);
}
.gu-card-title { font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; color: var(--gu-red); margin: 0 0 6px; }
.gu-card p { margin: 6px 0; }
.gu-stall-id { color: var(--gu-ink-soft); font-size: 14px; }
.gu-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.gu-price { font-weight: 700; color: var(--gu-ink); }
.gu-price-old { color: var(--gu-ink-soft); text-decoration: line-through; font-size: 14px; }
.gu-save {
  padding: 1px 8px; border-radius: 999px;
  background: #e6f4ea; color: var(--gu-ok);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

/* --- Thanh chi so (suc khoe / hanh phuc / tri tue / may man): thanh + so -- */
.gu-bar-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.gu-bar-label { flex: 0 0 92px; font-size: 14px; font-weight: 700; }
.gu-bar-track {
  flex: 1 1 auto; height: 10px; min-width: 120px;
  background: #e9dfc0; border-radius: 999px; overflow: hidden;
}
.gu-bar-fill { height: 100%; border-radius: 999px; }
.gu-bar-hp { background: #d32f2f; } .gu-bar-happy { background: #f9a825; }
.gu-bar-wis { background: var(--gu-blue); } .gu-bar-luck { background: #43a047; }
.gu-bar-val { flex: 0 0 32px; text-align: right; font-weight: 700; font-size: 14px; }

/* --- Khung nhan vat: cac muc + muc "Cong viec" moi ------------------------ */
.gu-side-sec { border-top: 1px dashed var(--gu-line); padding-top: 10px; margin-top: 12px; }
.gu-side-sec h3 { font-size: 16px; margin: 0 0 8px; color: var(--gu-red); }
.gu-job-current {
  display: block; padding: 8px 12px; margin-bottom: 8px;
  border: 2px solid var(--gu-gold); border-radius: 12px; background: #fff8e1;
  font-weight: 700;
}
.gu-job-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: var(--gu-touch); padding: 8px 12px; margin: 6px 0;
  border: 2px solid var(--gu-line); border-radius: 12px; background: var(--gu-ivory);
}
.gu-job-item .gu-job-wage { color: var(--gu-xu); font-weight: 700; white-space: nowrap; }
.gu-job-item.gu-locked { opacity: .55; }
.gu-job-item.gu-locked .gu-job-wage { color: var(--gu-ink-soft); }
.gu-job-lock-reason { display: block; font-size: 13px; color: var(--gu-bad); font-weight: 700; }

/* --- Thanh dieu huong duoi: 3–5 nut icon + chu, nut chinh giua to hon ---- */
.gu-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around; align-items: flex-end;
  background: #fff8e1;
  border-top: 2px solid var(--gu-gold);
  padding: 6px 4px max(8px, env(safe-area-inset-bottom, 0px));
}
.gu-nav-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  flex: 1 1 0; min-width: 0; min-height: var(--gu-touch);
  background: none; border: none; cursor: pointer;
  color: var(--gu-ink); font-family: inherit; font-size: 12px; font-weight: 700;
  text-decoration: none; padding: 4px 2px;
}
.gu-nav-btn .gu-nav-ico { font-size: 24px; line-height: 1; }
.gu-nav-btn:active { filter: brightness(.85); transform: scale(.96); }
.gu-nav-btn-primary {
  flex: 0 0 64px; height: 64px; margin-top: -22px;
  background: var(--gu-red); color: #fff8e1;
  border: 3px solid #fff8e1; border-radius: 50%;
  box-shadow: 0 2px 8px rgba(58, 34, 8, .35);
}
.gu-nav-btn-primary .gu-nav-ico { font-size: 28px; }

/* --- Desktop: noi dung rong hon, nav giua man hinh ------------------------ */
@media (min-width: 768px) {
  .gu-wrap { max-width: 860px; }
  .gu-sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .gu-nav { max-width: 560px; margin: 0 auto; border-radius: 16px 16px 0 0; }
}
@media (min-width: 1280px) {
  .gu-wrap { max-width: 1020px; }
  .gu-sign-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- DX-4 (10/11, P2): bien go DOM doc-la-hieu + goc san lang song --------
   Bien 3D trong san la texture canvas (ve bang JS, khong dung duoc CSS) nen
   lop DOM nay la ban doc duoc cua cung 7 bien do: chu >=14px, phi hien ngay
   tren bien, bien khoa phu mo + o khoa + so thieu. Chi PHAN ANH state co
   san (Xu, so lan lam dong D46) — KHONG them dieu kien khoa moi, KHONG doi
   ham gating nao. Bam bien mo = mo dung sheet cua bien 3D (xem glue script
   trong nong-trai.html — dispatch tap len canvas, cung duong code nguoi
   dung bam bien 3D). Chi dung 8 mau DX-1; khong anh ngoai, khong asset
   game khac. Vat song quanh san la TINH (emoji + CSS), ke chuyen lang que. */
.gu-sign-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.gu-sign-ico { display: block; font-size: 30px; line-height: 1.15; }
.gu-sign-name { display: block; font-size: clamp(16px, 1.4vw, 20px); }
.gu-sign a, a.gu-sign { text-decoration: none; }
.gu-sign-static { cursor: default; }
.gu-sign-current {
  outline: 3px solid var(--gu-gold); outline-offset: 2px; cursor: default;
}
.gu-sign-locked .gu-sign-ico { filter: grayscale(.7); }
/* Goc san lang: 5 vat tinh ke chuyen (ga, den long, chau hoa, khoi bep,
   xe dap) — chi emoji + 8 mau DX-1, khong anh ngoai. */
.gu-yard {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  background: var(--gu-cream-2); border: 2px solid var(--gu-line);
  border-radius: var(--gu-radius); padding: 10px 8px; margin: 12px 0;
}
.gu-yard-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 56px; padding: 6px 8px;
  background: var(--gu-ivory); border: 1.5px solid var(--gu-line); border-radius: 12px;
  font-size: 26px; line-height: 1.1;
}
.gu-yard-item small { font-size: 14px; font-weight: 700; color: var(--gu-ink-soft); white-space: nowrap; }
.gu-yard-note { width: 100%; text-align: center; font-size: 14px; color: var(--gu-ink-soft); margin: 2px 0 0; }