/* ---- src/00-base.css ---- */
/* ==========================================================================
   Tiệm Trà Mơ Ước — bundle.css
   Mọi màu, khoảng cách, bo góc, bóng đều lấy từ tokens.css (var(--…)).
   Tiền tố lớp: tt-. Khối: tt-x · biến thể: tt-x--y · phần tử: tt-x__y · trạng thái: is-*.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap");

/* --- Nền tảng ------------------------------------------------------------ */
.tt-app {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
/* :where() giữ độ ưu tiên bằng 0 để một lớp component (.tt-button…) luôn thắng phần reset này. */
:where(.tt-app) *,
:where(.tt-app) *::before,
:where(.tt-app) *::after { box-sizing: border-box; }
:where(.tt-app) :where(button, input, select, textarea) { font: inherit; color: inherit; }
/* Thuộc tính hidden luôn thắng display của component (.tt-button { display: inline-flex } v.v.): ngoại lệ !important duy nhất ngoài reduced-motion. */
:where(.tt-app) [hidden] { display: none !important; }
:where(.tt-app) :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Trên tranh vẽ của sân khấu, focus-ring (pink) kém tương phản ở Đêm dịu: dùng nét outline cố định của tranh (~10:1). */
:where(.tt-stage) :focus-visible { outline-color: var(--outline); }

/* Khung cho preview của design system: lề 16px, nền theo theme. */
.tt-preview { margin: 0; padding: 16px; min-height: 100%; }

/* --- Tiện ích dùng chung ------------------------------------------------- */
/* Icon PNG vẽ tay (assets/Icons): luôn object-fit contain, không tô màu lại được. */
.tt-ico { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: middle; flex: none; }
.tt-ico--lg { width: 30px; height: 30px; }
/* Số tiền, số lượng, giờ: chữ số đều cột. */
.tt-num { font-variant-numeric: tabular-nums; }
.tt-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Hàng ngang tự xuống dòng, dùng để xếp các mẫu trong preview. */
.tt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.tt-stack { display: flex; flex-direction: column; gap: var(--space-8); }

/* Sân khấu toạ độ cố định 768×1376 (quầy pha, splash): vẽ theo px của tranh rồi scale bằng TTMU.fitStage. */
.tt-stage-frame { position: relative; width: 100%; overflow: hidden; }
.tt-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; color: var(--stage-ink); }
/* Lớp phủ màu theme lên tranh vẽ (art-tint): đặt làm con cuối của .tt-stage. */
.tt-stage__tint { position: absolute; inset: 0; background: var(--art-tint); pointer-events: none; mix-blend-mode: multiply; }

/* --- Chuyển động --------------------------------------------------------- */
/* Lò xo nhẹ của game: cubic-bezier(.34,1.56,.64,1) .18s cho nút nổi; lắc .3s khi khách giận. */
@keyframes tt-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes tt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes tt-ring { from { transform: scale(.96); opacity: 1; } to { transform: scale(1.08); opacity: 0; } }
@keyframes tt-slide-in { from { transform: translateX(120px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .tt-app *,
  .tt-app *::before,
  .tt-app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- src/10-controls.css ---- */
/* ==========================================================================
   10-controls — Button, IconButton, SettingsRow, Chip, ThemePicker, Stepper, PriceInput, CodeInput
   Mọi luật là một lớp (+ trạng thái); thứ tự nguồn quyết định biến thể: biến thể đứng sau lớp gốc.
   Reset font/color của bundle.css nền dùng :where() nên không cần selector theo phần tử.
   ========================================================================== */

/* --- Button ---------------------------------------------------------------
   .big / .sbtn / .danger / .front-btn-megah — css/style.css */
.tt-button {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-align: center;
}
.tt-button:disabled { cursor: not-allowed; }

/* Nút lớn 3D (.big): nút chính của mỗi hộp thoại. */
.tt-button--primary {
  gap: 6px;
  width: 100%; max-width: 420px;
  background: var(--pink); color: var(--on-pink);
  border: 0; border-radius: var(--radius-16);
  padding: var(--space-12) var(--space-26);
  font-size: 1.1rem; font-weight: 800;
  box-shadow: var(--shadow-press);
}
.tt-button--primary:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--shadow-press-down); }
.tt-button--primary:disabled { opacity: .6; }

/* Nút nhỏ (.sbtn): nhãn 1–2 dòng, <b> là dòng giá/số. */
.tt-button--small {
  flex-direction: column;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-10);
  padding: var(--space-4) var(--space-8);
  font-size: .78rem; font-weight: 700; line-height: 1.1;
}
.tt-button--small b { display: block; font-size: .9rem; }
.tt-button--small:disabled { opacity: .4; }
.tt-button--accent { background: var(--pink); border-color: var(--pink); color: var(--on-pink); }
/* .sbtn.ghost: nút nhỏ rộng rãi hơn, dùng cho hành động phụ ("Bỏ qua", "Tối đa", "Đóng"). */
.tt-button--ghost { padding: var(--space-10); font-size: .95rem; }

/* Nút nguy hiểm (.danger): viền warn, nền trong. */
.tt-button--danger {
  background: transparent; color: var(--warn);
  border: 2px solid var(--warn); border-radius: var(--radius-12);
  padding: var(--space-8) var(--space-14);
  font-weight: 700;
}
.tt-button--danger:disabled { opacity: .4; }

/* Nút Xuống Phố (.front-btn-megah): gradient cam, nảy lò xo khi hover/nhấn. */
.tt-button--street {
  gap: 5px;
  background: linear-gradient(135deg, var(--street-hi), var(--street));
  color: var(--on-fill);
  border: 1.5px solid var(--street-line); border-radius: var(--radius-12);
  padding: 3px var(--space-8);
  line-height: 1;
  box-shadow: var(--shadow-street);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-button--street:hover:not(:disabled) { transform: scale(1.08); }
.tt-button--street:active:not(:disabled) { transform: scale(.94); }
.tt-button--street:disabled { opacity: .4; }
.tt-button__icon {
  width: 20px; height: 20px; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--outline) 25%, transparent));
}
.tt-button__text { font-size: .72rem; font-weight: 800; white-space: nowrap; letter-spacing: .3px; }

/* --- IconButton -----------------------------------------------------------
   .pbtn, .h-btns-grid .pbtn — css/style.css */
.tt-iconbutton {
  --tt-icon: 26px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0;
  border: 2px solid var(--line); border-radius: var(--radius-round);
  background: var(--panel); color: var(--ink);
  font-size: .95rem; line-height: 1; cursor: pointer;
}
.tt-iconbutton--sm { --tt-icon: 18px; width: 28px; height: 28px; min-width: 28px; margin: 0; }
.tt-iconbutton:disabled { opacity: .4; cursor: not-allowed; }
.tt-iconbutton__icon { width: var(--tt-icon); height: var(--tt-icon); object-fit: contain; display: block; }

/* --- SettingsRow ----------------------------------------------------------
   .setl, .setb — css/style.css */
.tt-settings-list {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: var(--space-6); padding-right: var(--space-4);
}
/* .setl gốc cuộn trong hộp thoại (max-height 58vh): bật bằng --scroll. */
.tt-settings-list--scroll { max-height: 58vh; overflow-y: auto; }
.tt-settings-row {
  display: flex; align-items: center; gap: var(--space-12);
  width: 100%; min-height: 52px;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-12) var(--space-14);
  font-size: 1rem; font-weight: 800; text-align: left; cursor: pointer;
}
.tt-settings-row:disabled { opacity: .4; cursor: not-allowed; }
.tt-settings-row__icon { font-size: 1.3rem; }
.tt-settings-row__icon .tt-ico { width: 30px; height: 30px; vertical-align: middle; }
.tt-settings-row__value { margin-left: auto; color: var(--soft); font-size: .78rem; font-weight: 700; text-align: right; }
/* .setb.warnb */
.tt-settings-row--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
/* Nút "Cập nhật bản mới" (style nội tuyến trong showSettings): nền xanh bạc hà, viền target. */
.tt-settings-row--success {
  background: linear-gradient(135deg, color-mix(in srgb, var(--mint) 18%, var(--panel)), color-mix(in srgb, var(--mint) 30%, var(--panel)));
  border-color: var(--target);
}

/* --- Chip -----------------------------------------------------------------
   .chip, .chip.on, .chip.ic2, .chip.lg, .segtabs, .seg, .revflt — css/style.css */
.tt-chip {
  border: 2px solid var(--line); border-radius: var(--radius-10);
  background: transparent; color: var(--ink);
  padding: 7px 2px;
  font-size: .78rem; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.tt-chip[aria-pressed="true"] {
  border-color: var(--pink);
  background: color-mix(in srgb, var(--pink) 16%, transparent);
  box-shadow: var(--shadow-on);
}
.tt-chip:disabled { opacity: .4; cursor: not-allowed; }
.tt-chip--icon {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px;
}
.tt-chip--lg { min-height: 52px; font-size: .9rem; }
.tt-chip__text { font-size: .78rem; font-weight: 700; }
/* .segtabs / .seg: chip chia đều bề rộng. */
.tt-segmented { display: flex; gap: var(--space-4); }
.tt-segmented > .tt-chip { flex: 1; padding: 7px 2px; }
.tt-segmented--compact > .tt-chip { padding: 6px var(--space-4); }
/* .revflt: hàng lọc xuống dòng. */
.tt-chip-group { display: flex; flex-wrap: wrap; gap: var(--space-6); }

/* --- ThemePicker ----------------------------------------------------------
   .thg, .thb, .thb i, .thb.on — css/style.css */
.tt-theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-10); }
.tt-theme-picker--two { grid-template-columns: repeat(2, 1fr); }
.tt-theme-picker__item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-8) var(--space-4);
  font-size: .78rem; font-weight: 800; cursor: pointer;
}
.tt-theme-picker__item[aria-checked="true"] { border-color: var(--pink); box-shadow: var(--shadow-ring-pink); }
/* Ô màu mang data-theme riêng nên luôn hiện đúng màu theme của nó. */
.tt-theme-picker__swatch {
  display: block; width: 34px; height: 34px; border-radius: var(--radius-round);
  background: linear-gradient(135deg, var(--bg) 0 50%, var(--pink) 50%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--outline) 12%, transparent);
}

/* --- Stepper --------------------------------------------------------------
   .step5, .step5 .sbtn, .step5 input — css/style.css */
.tt-stepper { display: flex; align-items: center; gap: 3px; }
.tt-stepper__btn {
  display: grid; place-items: center;
  width: 30px; height: 32px; padding: 0;
  font-size: 1.1rem; line-height: 1;
}
.tt-stepper__input {
  width: 46px; height: 32px; padding: 0;
  border: 2px solid var(--line); border-radius: var(--radius-8);
  background: var(--bg); color: var(--ink);
  font-weight: 800; line-height: 28px; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.tt-stepper__input::-webkit-inner-spin-button,
.tt-stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- PriceInput -----------------------------------------------------------
   .pin, .pin input, .pin span — css/style.css */
.tt-price { display: flex; align-items: center; gap: var(--space-4); }
.tt-price__input {
  width: 88px; padding: 5px var(--space-8);
  border: 2px solid var(--line); border-radius: var(--radius-10);
  background: var(--bg); color: var(--ink);
  font-weight: 700; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.tt-price__input--wide { width: 112px; }
.tt-price__input::-webkit-inner-spin-button,
.tt-price__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tt-price__unit { font-size: .8rem; color: var(--soft); }

/* --- CodeInput ------------------------------------------------------------
   .pinbox, .pinbox.nm — css/style.css */
.tt-code-input {
  width: 100%;
  border: 2px solid var(--line); border-radius: var(--radius-12);
  background: var(--bg); color: var(--ink);
  padding: var(--space-10);
  font-size: 1.2rem; text-align: center; letter-spacing: 4px;
}
.tt-code-input--name { letter-spacing: 0; font-size: 1.05rem; font-weight: 700; }

/* ---- src/12-controls-extra.css ---- */
/* ==========================================================================
   12-controls-extra — Switch, Slider, Tooltip, Spinner, Skeleton
   Bổ sung có chủ đích: game gốc không có 5 điều khiển này; thiết kế theo ngôn ngữ của hệ thống
   (viền 2px, bóng phẳng lệch dọc, bo theo thang, Baloo 2, motif trân châu).
   ========================================================================== */

/* --- Switch ---------------------------------------------------------------
   Gần nhất: .sndrow (cặp nút âm thanh trong Cài đặt). Bổ sung có chủ đích. */
.tt-switch {
  display: inline-flex; align-items: center; gap: var(--space-10);
  min-height: 44px; padding: var(--space-4) var(--space-2);
  background: transparent; border: 0; color: var(--ink);
  font-size: 1rem; font-weight: 800; text-align: left; cursor: pointer;
}
.tt-switch:disabled { opacity: .4; cursor: not-allowed; }
.tt-switch__label { flex: 1; }
.tt-switch__track {
  position: relative; flex: none; display: block;
  width: 54px; height: 30px;
  background: var(--fill-muted); border: 2px solid var(--line); border-radius: var(--radius-pill);
  transition: background-color .18s, border-color .18s;
}
.tt-switch__knob {
  position: absolute; top: 2px; left: 2px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-round);
  box-shadow: var(--shadow-board);
  color: var(--mint); font-size: .72rem; font-weight: 800; line-height: 1;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-switch[aria-checked="true"] .tt-switch__track { background: var(--mint); border-color: var(--mint); }
.tt-switch[aria-checked="true"] .tt-switch__knob { transform: translateX(24px); border-color: var(--mint); }
.tt-switch[aria-checked="true"] .tt-switch__knob::before { content: "✓"; }
.tt-switch__state { flex: none; min-width: 2.2em; font-size: .78rem; font-weight: 700; color: var(--soft); }
.tt-switch__state-on { display: none; }
.tt-switch[aria-checked="true"] .tt-switch__state-on { display: inline; }
.tt-switch[aria-checked="true"] .tt-switch__state-off { display: none; }
/* Dạng hàng cài đặt: nền bg, viền line, cùng cỡ với .tt-settings-row. */
.tt-switch--row {
  display: flex; width: 100%; min-height: 52px;
  background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-12) var(--space-14);
}

/* --- Slider ---------------------------------------------------------------
   Bổ sung có chủ đích. --tt-slider-pct do TTMU.slider cập nhật (phần đã chọn tô pink). */
.tt-slider { --tt-slider-pct: 0%; display: block; }
.tt-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); }
.tt-slider__label { font-size: 1rem; font-weight: 800; }
.tt-slider__value { font-size: .9rem; font-weight: 800; color: var(--pink-d); }
.tt-slider__input {
  display: block; width: 100%; height: 44px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.tt-slider__input:disabled { opacity: .4; cursor: not-allowed; }
.tt-slider__input::-webkit-slider-runnable-track {
  height: 14px; border: 2px solid var(--line); border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--pink) var(--tt-slider-pct), var(--fill-muted) var(--tt-slider-pct));
}
.tt-slider__input::-moz-range-track {
  height: 10px; border: 2px solid var(--line); border-radius: var(--radius-pill);
  background: var(--fill-muted);
}
.tt-slider__input::-moz-range-progress { height: 10px; border-radius: var(--radius-pill); background: var(--pink); }
.tt-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -9px;
  background: var(--pink); border: 2px solid var(--pink-d); border-radius: var(--radius-round);
  box-shadow: var(--shadow-press);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-slider__input::-moz-range-thumb {
  box-sizing: border-box; width: 28px; height: 28px;
  background: var(--pink); border: 2px solid var(--pink-d); border-radius: var(--radius-round);
  box-shadow: var(--shadow-press);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-slider__input:active:not(:disabled)::-webkit-slider-thumb { transform: translateY(3px); box-shadow: var(--shadow-press-down); }
.tt-slider__input:active:not(:disabled)::-moz-range-thumb { transform: translateY(3px); box-shadow: var(--shadow-press-down); }
/* Nhãn mốc: lề 14px = nửa núm để vạch khớp tâm núm. */
.tt-slider__marks {
  display: flex; justify-content: space-between;
  margin: 0 var(--space-14); font-size: .78rem; font-weight: 700; color: var(--soft);
}

/* --- Tooltip --------------------------------------------------------------
   Bổ sung có chủ đích. TTMU.tooltip tạo phần tử, đặt vị trí cố định theo trigger. */
.tt-tooltip {
  --tt-arrow-x: 50%;
  position: fixed; left: 0; top: 0; z-index: 100070; /* trên Toast 100000, Dialog 100050, UrgentAlert 100060 */
  width: max-content; max-width: min(240px, calc(100vw - 16px));
  padding: var(--space-6) var(--space-10);
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius-10); box-shadow: var(--shadow-board);
  font-size: .82rem; font-weight: 700; line-height: 1.25;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.tt-tooltip.is-shown { visibility: visible; opacity: 1; }
.tt-tooltip::after {
  content: ""; position: absolute; left: var(--tt-arrow-x); bottom: -4px;
  width: 10px; height: 10px; margin-left: -5px;
  background: var(--ink); transform: rotate(45deg); border-radius: 2px;
}
/* Tooltip nằm dưới trigger: mũi tên đổi lên trên. */
.tt-tooltip--bottom::after { bottom: auto; top: -4px; }
/* Dùng để minh hoạ trong tài liệu: nằm theo dòng, luôn hiện. */
.tt-tooltip--inline { position: relative; display: inline-block; visibility: visible; opacity: 1; margin-bottom: var(--space-6); }

/* --- Spinner --------------------------------------------------------------
   Ba viên trân châu nảy. Bổ sung có chủ đích. */
@keyframes tt-spinner-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-10px); }
}
.tt-spinner { --tt-pearl: 12px; display: inline-flex; align-items: flex-end; gap: var(--space-6); padding-top: 12px; }
.tt-spinner--sm { --tt-pearl: 8px; gap: var(--space-4); padding-top: 8px; }
.tt-spinner__pearl {
  display: block; width: var(--tt-pearl); height: var(--tt-pearl);
  background: var(--ink); border-radius: var(--radius-round);
  animation: tt-spinner-bounce 1s ease-in-out infinite;
}
.tt-spinner__pearl:nth-child(2) { background: var(--pink); animation-delay: .15s; }
.tt-spinner__pearl:nth-child(3) { animation-delay: .3s; }
/* Nhãn "Đang tải…": chỉ đọc bằng screen reader; khi giảm chuyển động thì hiện thành chữ. */
.tt-spinner__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tt-spinner { align-items: center; gap: var(--space-8); padding-top: 0; }
  .tt-spinner__label {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto;
    font-size: .9rem; font-weight: 700; color: var(--ink);
  }
}

/* --- Skeleton -------------------------------------------------------------
   Khung chờ. Bổ sung có chủ đích. Vùng chứa đặt aria-busy="true". */
@keyframes tt-skeleton-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tt-skeleton {
  position: relative; display: block; overflow: hidden;
  height: 14px; background: var(--fill-muted);
  border: 2px solid var(--line); border-radius: var(--radius-6);
}
.tt-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--panel) 70%, transparent), transparent);
  animation: tt-skeleton-shine 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .tt-skeleton::after { display: none; } }
.tt-skeleton--title { height: 20px; border-radius: var(--radius-8); }
.tt-skeleton--circle { width: 44px; height: 44px; flex: none; border-radius: var(--radius-round); }
.tt-skeleton--block { height: 72px; border-radius: var(--radius-10); }
.tt-skeleton--w25 { width: 25%; }
.tt-skeleton--w50 { width: 50%; }
.tt-skeleton--w75 { width: 75%; }
.tt-skeleton-row { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-8) 0; }
.tt-skeleton-row__text { flex: 1; display: flex; flex-direction: column; gap: var(--space-6); }
.tt-skeleton-card {
  display: flex; flex-direction: column; gap: var(--space-8);
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-12) var(--space-14);
}

/* ---- src/20-chrome.css ---- */
/* ==========================================================================
   20-chrome — Điều hướng và khung tiệm: FolderTabs, Pager, HUD, Awning,
   Signboard, ChalkMenu, SplashScreen.
   Dùng lại lớp của 10-controls qua markup (tt-iconbutton--sm, tt-button--street).
   ========================================================================== */

/* --- FolderTabs -----------------------------------------------------------
   .tabs, .tab, .tab.on, .pane — css/style.css; markup renderPrep() — js/game.js */
.tt-tabs { margin: 0 var(--space-12); }
.tt-tabs__list {
  display: flex; gap: var(--space-4);
  padding: 5px 5px 0; overflow-x: auto;
  background: var(--fill-tabs);
  border-radius: var(--radius-16) var(--radius-16) 0 0; box-shadow: var(--shadow-edge-top);
}
.tt-tabs__tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 0; background: transparent; color: var(--ink); opacity: var(--alpha-tab-idle);
  padding: 6px 2px; border-radius: var(--radius-12) var(--radius-12) 0 0;
  font-size: .7rem; line-height: 1.1; font-weight: 700;
  white-space: nowrap; cursor: pointer;
}
.tt-tabs__tab[aria-selected="true"] { background: var(--panel); color: var(--ink); opacity: 1; box-shadow: var(--shadow-tab-on); }
/* Dải tab cuộn ngang nên vòng focus nằm trong tab để không bị cắt. */
.tt-tabs__tab:focus-visible { outline-offset: -3px; }
.tt-tabs__icon { width: 30px; height: 30px; object-fit: contain; display: block; pointer-events: none; }
.tt-tabs__panel {
  background: var(--panel); padding: var(--space-12);
  border-radius: 0 0 var(--radius-16) var(--radius-16); box-shadow: var(--shadow-edge-bottom);
}
/* Chừa chỗ cho thanh nút Mở cửa cố định ở đáy màn chuẩn bị. */
.tt-tabs__panel--openbar { margin-bottom: var(--space-openbar); }

/* --- Pager ----------------------------------------------------------------
   .pager, .pager button, .pager button.on, :disabled, .pager span — css/style.css */
.tt-pager {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 6px; margin: 10px 0;
}
.tt-pager__button {
  min-width: 38px; height: 38px; padding: 0 6px;
  border-radius: var(--radius-12); border: 2px solid var(--line);
  background: var(--panel); color: var(--ink);
  font-size: 1rem; font-weight: 800; cursor: pointer;
}
.tt-pager__button[aria-current="page"] { background: var(--pink); border-color: var(--pink); color: var(--on-pink); }
.tt-pager__button:disabled { opacity: .35; cursor: not-allowed; }
.tt-pager__gap { color: var(--soft); font-weight: 800; }

/* --- HUD ------------------------------------------------------------------
   header, .h-l, .h-btns-grid, .h-m, .h-r, .stars — css/style.css; index.html 80–99 */
.tt-hud {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-8);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--space-14) 6px;
  background: var(--bg); color: var(--ink);
}
/* Màn thấp (≤680px): HUD thu gọn như game (style.css:513). */
@media (max-height: 680px) {
  .tt-hud { padding: calc(env(safe-area-inset-top, 0px) + 4px) var(--space-14) var(--space-4); }
}
.tt-hud__left { display: flex; align-items: center; gap: var(--space-8); font-weight: 700; line-height: 1.1; }
.tt-hud__buttons {
  display: inline-grid; grid-template-columns: repeat(2, 28px); grid-auto-rows: 28px;
  gap: 3px 4px; align-items: center; justify-content: center; flex: none;
}
.tt-hud__emoji { font-size: 1.15rem; line-height: 1; display: grid; place-items: center; }
.tt-hud__sub { display: block; color: var(--soft); font-size: .78rem; font-weight: 500; }
.tt-hud__center { min-width: 0; text-align: center; font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
.tt-hud__shop {
  display: block; max-width: 46vw; margin: 0 auto;
  color: var(--pink-d); font-size: .68rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tt-hud__right {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  text-align: right; font-weight: 700; line-height: 1.1;
}
.tt-hud__stars { color: var(--gold); letter-spacing: 1px; }
.tt-hud__rate { display: block; color: var(--soft); font-size: .78rem; font-weight: 500; }

/* --- Awning ---------------------------------------------------------------
   .awning, .awning::after, body.selling .awning — css/style.css */
.tt-awning {
  position: relative; height: 26px;
  background: repeating-linear-gradient(90deg, var(--pink) 0 30px, var(--awning-white) 30px 60px);
}
/* Viền vỏ sò dưới mái: nửa đĩa pink và trắng xen kẽ, bước 60px; tràn 10px xuống dưới. */
.tt-awning::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background:
    radial-gradient(circle at 15px 0, var(--pink) 10px, transparent 11px) 0 0 / 60px 10px repeat-x,
    radial-gradient(circle at 45px 0, var(--awning-white) 10px, transparent 11px) 0 0 / 60px 10px repeat-x;
}
.tt-awning--compact { height: 10px; }

/* --- Signboard ------------------------------------------------------------
   .sign, .sign button, .sign button small — css/style.css;
   .frontshop-door-plaque, .frontshop-door-name — css/style.css (biến thể cửa tiệm) */
.tt-signboard {
  position: relative; z-index: 1; display: flex; justify-content: center;
  margin: 18px var(--space-12) -10px;
}
.tt-signboard__plate {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 3px solid var(--counter); border-radius: var(--radius-14);
  background: var(--sign-paper); color: var(--sign-ink);
  padding: 6px 16px; font-size: 1.3rem; font-weight: 800;
  box-shadow: var(--shadow-sign);
}
.tt-signboard__plate--editable { cursor: pointer; }
.tt-signboard__hint { margin-left: 6px; font-size: .8rem; opacity: var(--alpha-sign-hint); }
/* Biển ở cửa tiệm (màn Xuống Phố): gỗ tối, viền vàng, đèn lồng hai bên. */
.tt-signboard--door { margin: 0; }
.tt-signboard__plate--door {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  overflow: visible; padding: 6px 18px;
  border-color: var(--gold-lit);
  background: linear-gradient(180deg, var(--wood-dark) 0%, var(--outline) 100%);
  box-shadow:
    var(--shadow-toast),
    inset 0 1px 2px color-mix(in srgb, var(--on-fill) 40%, transparent),
    0 0 16px color-mix(in srgb, var(--gold-lit) 40%, transparent);
}
.tt-signboard__name {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--gold-lit); font-size: 1.15rem; font-weight: 800; letter-spacing: .8px;
  text-shadow: 0 2px 4px color-mix(in srgb, var(--outline) 80%, transparent), 0 0 10px color-mix(in srgb, var(--gold-lit) 50%, transparent);
}

/* --- ChalkMenu ------------------------------------------------------------
   .board, .board h2, .board .items, .it, .btop, .extra, .tgb — css/style.css;
   menuBoard() — js/game.js */
.tt-chalkmenu {
  margin: 0 var(--space-12) var(--space-10); padding: 18px var(--space-14) var(--space-10);
  background: var(--chalk); color: var(--chalk-ink);
  border: 8px solid var(--counter); border-radius: var(--radius-10);
  box-shadow: var(--shadow-board);
}
.tt-chalkmenu__title { margin: 0 0 6px; font-size: 1.35rem; font-weight: 800; letter-spacing: .5px; text-align: center; }
.tt-chalkmenu__items { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-16); font-size: .92rem; }
.tt-chalkmenu__items--top { margin-top: var(--space-2); }
.tt-chalkmenu__item {
  display: flex; justify-content: space-between;
  border-bottom: 1px dashed color-mix(in srgb, var(--chalk-ink) 25%, transparent);
}
.tt-chalkmenu__group { margin-top: 8px; font-size: .85rem; font-weight: 800; opacity: var(--alpha-chalk-group); }
.tt-chalkmenu__subgroup { grid-column: 1 / -1; margin-top: var(--space-4); font-size: .75rem; opacity: var(--alpha-chalk-sub); }
.tt-chalkmenu__extra { margin-top: 6px; font-size: .8rem; text-align: center; opacity: var(--alpha-chalk-extra); }

/* --- SplashScreen ---------------------------------------------------------
   .splash, .sp4, .sp4-st, .sp4-t, .sp4-tag, .sp4-me, .sp4-foot, .sp4-msg,
   .sp4-bar, .sp4-go, .sp4-help, .sp4-ver — css/style.css; showSplash() — js/game.js.
   Toạ độ theo px của sân khấu 768×1376; scale bằng TTMU.fitStage. */
.tt-splash { background: var(--stage-ground); }
.tt-splash__art { position: absolute; left: 0; top: 0; width: 768px; height: 1376px; display: block; }
.tt-splash__title {
  position: absolute; left: 0; right: 0; top: 548px; margin: 0;
  text-align: center; white-space: nowrap;
  color: var(--stage-ink); font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: .01em;
  text-shadow:
    0 4px 0 var(--stage-paper), 4px 0 0 var(--stage-paper), -4px 0 0 var(--stage-paper), 0 -4px 0 var(--stage-paper),
    3px 3px 0 var(--stage-paper), -3px 3px 0 var(--stage-paper), 3px -3px 0 var(--stage-paper), -3px -3px 0 var(--stage-paper),
    0 8px 12px color-mix(in srgb, var(--stage-soft) 25%, transparent);
}
.tt-splash__tagline {
  position: absolute; left: 74px; right: 74px; top: 1046px; margin: 0; overflow: hidden;
  text-align: center; white-space: nowrap;
  color: var(--stage-soft); font-size: 26px; line-height: 1.3; font-weight: 700;
}
.tt-splash__owner {
  position: absolute; left: 90px; right: 90px; top: 1122px; margin: 0;
  text-align: center; color: var(--stage-accent); font-size: 28px; font-weight: 800;
}
.tt-splash__foot {
  position: absolute; left: 154px; top: 1170px; width: 460px; height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
}
.tt-splash__message { color: var(--stage-soft); font-size: 26px; font-weight: 800; }
.tt-splash__bar {
  position: relative; width: 100%; height: 48px; overflow: hidden;
  border-radius: var(--radius-24); background: var(--stage-track);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--stage-ink) 15%, transparent);
}
.tt-splash__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--radius-24); background: var(--stage-fill); box-shadow: var(--shadow-fill-edge); }
.tt-splash__percent { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-fill); font-size: 26px; font-weight: 800; }
.tt-splash__go {
  width: 100%; height: 78px; border: 0; border-radius: 26px;
  background: var(--stage-pink); color: var(--on-fill);
  font-size: 36px; font-weight: 800; box-shadow: 0 7px 0 var(--stage-pink-d); cursor: pointer;
}
.tt-splash__go:focus-visible,
.tt-splash__help:focus-visible { outline-color: var(--outline); }
.tt-splash__go:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--stage-pink-d); }
.tt-splash__help {
  padding: 4px 12px; border: 0; background: none; cursor: pointer;
  color: var(--stage-soft); font-size: 26px; font-weight: 800; text-decoration: underline;
}
.tt-splash__version { position: absolute; left: 84px; top: 1318px; color: var(--stage-soft); font-size: 26px; font-weight: 800; opacity: var(--alpha-splash-version); }

/* ---- src/30-data.css ---- */
/* ==========================================================================
   30-data — Card, Callout, ItemRow, Badge, Rating, Progress, StatTiles, Ledger, Review, Avatar
   Hiển thị dữ liệu. Độ đặc hiệu phẳng (một lớp + trạng thái); reset của .tt-app dùng :where()
   nên không cần qualify theo phần tử.
   ========================================================================== */

/* --- Card -----------------------------------------------------------------
   .goalc, .goalc.done, .gh, .gh span, .gr, .gt, .till — css/style.css */
.tt-card {
  background: var(--panel);
  border: 2px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-10) var(--space-12);
  text-align: left;
}
/* .goalc.done: viền + chữ mint, căn giữa, đậm. */
.tt-card.is-done { border-color: var(--mint); color: var(--mint); font-weight: 800; text-align: center; }
.tt-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-4); font-weight: 800;
}
.tt-card__meta { font-size: .72rem; color: var(--soft); font-weight: 600; }
.tt-card__row { margin-top: var(--space-6); }
.tt-card__row-text { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; }
.tt-card__row-value { color: var(--soft); }
.tt-card__row.is-done .tt-card__row-label { color: var(--mint); }
/* .till: thẻ két tiền, rộng tối đa 330px, bo 20. */
.tt-card--till {
  width: 100%; max-width: 330px; padding: 14px; border-radius: var(--radius-20);
  display: flex; flex-direction: column; gap: var(--space-10);
}

/* --- Callout --------------------------------------------------------------
   .evc, .evc.loan, .fore, .wbox, .lvup — css/style.css */
.tt-callout { text-align: left; }
.tt-callout--event, .tt-callout--loan {
  display: flex; align-items: center; gap: var(--space-10);
  border: 2px solid var(--gold); border-radius: var(--radius-12);
  padding: var(--space-8) var(--space-10);
}
.tt-callout--event { background: color-mix(in srgb, var(--gold) 22%, var(--panel)); }
.tt-callout--loan { background: color-mix(in srgb, var(--mint) 14%, var(--panel)); border-color: var(--mint); }
.tt-callout__icon { width: 30px; height: 30px; object-fit: contain; flex: none; }
.tt-callout__title { display: block; font-size: .95rem; font-weight: 700; }
.tt-callout__text { display: block; color: var(--soft); font-weight: 600; font-size: .8rem; line-height: 1.3; }
.tt-callout__action { margin-left: auto; flex: none; }
.tt-callout--forecast {
  background: var(--bg); border-radius: var(--radius-10);
  padding: var(--space-8) var(--space-10); font-size: .85rem; line-height: 1.35; box-shadow: var(--shadow-edge);
}
.tt-callout--big { font-size: 1.1rem; font-weight: 800; text-align: center; }
.tt-callout--warn {
  font-size: .75rem; border-radius: var(--radius-8); padding: 5px var(--space-8);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.tt-callout--level {
  background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--ink);
  border-radius: var(--radius-10); padding: var(--space-6) var(--space-10); font-weight: 700;
}

/* --- ItemRow --------------------------------------------------------------
   .rowi, .rowi .nm, .rowi .sub, .rowi .sub.low, .btns, .sw, .wl — css/style.css */
.tt-item-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: var(--space-10); align-items: center;
  padding: var(--space-8) 0; border-bottom: 1px solid var(--line);
}
.tt-item-row:last-child { border-bottom: 0; }
.tt-item-row__icon { width: 30px; height: 30px; object-fit: contain; justify-self: center; }
.tt-item-row__name { font-weight: 700; line-height: 1.15; }
.tt-item-row__sub { font-size: .78rem; color: var(--soft); font-weight: 500; }
.tt-item-row__sub.is-low { color: var(--warn); font-weight: 700; }
.tt-item-row__sub--ok { color: var(--mint); }
.tt-item-row__note { color: var(--soft); font-size: .72rem; }
.tt-item-row__actions { display: flex; gap: var(--space-4); }
.tt-item-row__actions--grid { display: grid; grid-template-columns: repeat(3, auto); gap: 3px; }
.tt-item-row__swatch { display: block; width: 26px; height: 26px; border-radius: var(--radius-round); border: 2px solid var(--line); }

/* --- Badge ----------------------------------------------------------------
   .tag, .life(.l1/.l3/.l0), .sold, .sell-mat-btn, .kpi-buff-pill — css/style.css */
.tt-badge {
  display: inline-block; vertical-align: middle; white-space: nowrap;
  font-size: .66rem; font-weight: 700; line-height: 1.4;
  border-radius: var(--radius-6); padding: 0 5px;
  background: var(--fill-muted); color: var(--soft);
}
.tt-badge--muted { background: var(--fill-muted); color: var(--soft); }
.tt-badge--accent { background: var(--pink); color: var(--on-pink); font-size: .7rem; font-weight: 500; }
.tt-badge--fresh-1 { background: var(--fresh-1-bg); color: var(--fresh-1-ink); }
.tt-badge--fresh-3 { background: var(--fresh-3-bg); color: var(--fresh-3-ink); }
.tt-badge--sold { background: var(--warn); color: var(--on-fill); font-size: .58rem; border-radius: 5px; padding: 0 4px; }
/* Pill khuyến mãi "Bán 30% (+1,4k)": dùng được cho <span> hoặc <button type="button">. */
.tt-badge--promo {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--fresh-3-bg); color: var(--fresh-3-ink);
  border: 1px solid var(--gold); border-radius: var(--radius-8);
  padding: 2px 7px; font-size: .72rem; font-weight: 700; line-height: 1.2;
}
.tt-badge--promo[type="button"] { cursor: pointer; transition: transform .15s; }
.tt-badge--promo[type="button"]:hover { transform: translateY(-1px); }
.tt-badge--promo[type="button"]:active { transform: translateY(1px); }
/* Pill số liệu (.kpi-buff-pill). */
.tt-badge--count {
  display: inline-flex; align-items: center; gap: var(--space-4);
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-8); padding: 3px var(--space-8);
  font-size: .78rem; font-weight: 800; line-height: 1.2;
}
.tt-badge__icon { width: 1.1em; height: 1.1em; object-fit: contain; vertical-align: -.2em; }

/* --- Rating ---------------------------------------------------------------
   .stars, .revsum, .revbig, .dist, .dstr — css/style.css */
.tt-rating { display: inline-flex; align-items: baseline; gap: var(--space-4); }
.tt-rating__stars { color: var(--gold); letter-spacing: 1px; }
.tt-rating__score { font-weight: 800; font-variant-numeric: tabular-nums; }
.tt-rating-summary {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-16); align-items: center;
  margin-bottom: var(--space-10);
}
.tt-rating-summary__big { text-align: center; }
.tt-rating-summary__score { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1; }
.tt-rating-summary__stars { color: var(--gold); letter-spacing: 1px; }
.tt-rating-summary__count { color: var(--soft); font-size: .82rem; }
.tt-rating-summary__row {
  display: grid; grid-template-columns: 22px 1fr 28px; gap: var(--space-6); align-items: center;
  width: 100%; border: 0; background: none; padding: 3px var(--space-4);
  border-radius: var(--radius-8); cursor: pointer; text-align: left; font-size: .8rem;
}
.tt-rating-summary__row[aria-pressed="true"] { background: var(--fill-muted); box-shadow: var(--shadow-edge); }
.tt-rating-summary__bar { background: var(--fill-muted); border-radius: 4px; height: 8px; }
.tt-rating-summary__bar > i { display: block; height: 8px; border-radius: 4px; background: var(--gold); }
.tt-rating-summary__row[aria-pressed="true"] .tt-rating-summary__bar { background: var(--panel); }

/* --- Progress -------------------------------------------------------------
   .gb, .gb i, .gr.ok .gb i, .pat, .pat i, .tbar, .tbar i — css/style.css */
.tt-progress { background: var(--fill-muted); overflow: hidden; height: 6px; border-radius: 3px; }
.tt-progress__fill { display: block; height: 100%; background: var(--gold); }
.tt-progress--goal { margin-top: 2px; }
.tt-progress.is-done .tt-progress__fill { background: var(--mint); }
.tt-progress--patience { height: 5px; margin-top: var(--space-4); grid-column: 1 / -1; }
.tt-progress--patience .tt-progress__fill { background: var(--mint); }
.tt-progress--revenue { height: 4px; border-radius: 2px; margin-top: 3px; }
.tt-progress--revenue .tt-progress__fill { background: var(--link); }

/* --- StatTiles ------------------------------------------------------------
   .kpis, .kpis div, .kpis b — css/style.css */
.tt-stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-8); }
.tt-stat-tiles__tile {
  background: var(--bg); border-radius: var(--radius-10); padding: var(--space-6);
  text-align: center; font-size: .72rem; color: var(--soft); box-shadow: var(--shadow-edge);
}
.tt-stat-tiles__value { display: block; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.tt-stat-tiles--summary { margin: var(--space-10) 0 var(--space-4); }
.tt-stat-tiles--summary .tt-stat-tiles__tile { font-size: 1rem; }

/* --- Ledger ---------------------------------------------------------------
   .rh, .thead, .trow, .tgrp, .ttot, .crow, .gtab — css/style.css */
.tt-ledger__heading {
  font-weight: 800; font-size: 1.1rem; margin: 14px 0 var(--space-4);
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.tt-ledger__head, .tt-ledger__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 62px 76px; gap: var(--space-6);
  align-items: start; font-size: .8rem;
}
.tt-ledger__head { color: var(--soft); font-weight: 700; font-size: .7rem; padding: 2px 0; }
.tt-ledger__row { padding: var(--space-4) 0; border-bottom: 1px dashed var(--line); }
.tt-ledger__row.is-zero { opacity: var(--alpha-ledger-zero); }
.tt-ledger__row--sub { font-size: .76rem; color: var(--soft); border-bottom: 0; padding: 1px 0 1px var(--space-8); }
.tt-ledger__num { text-align: right; font-variant-numeric: tabular-nums; }
.tt-ledger__group { font-size: .72rem; font-weight: 800; color: var(--soft); margin-top: var(--space-6); }
.tt-ledger__line {
  display: flex; justify-content: space-between; gap: var(--space-8);
  font-size: .84rem; padding: var(--space-4) 0; border-bottom: 1px dashed var(--line);
}
.tt-ledger__line--sub { font-size: .76rem; color: var(--soft); border-bottom: 0; padding: 1px 0 1px var(--space-8); }
.tt-ledger__amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-ledger__amount--in { color: var(--link); }
.tt-ledger__amount--out { color: var(--warn); }
.tt-ledger__total {
  display: flex; justify-content: space-between; font-weight: 800;
  padding: var(--space-6) 0 0; font-size: .95rem;
}
.tt-ledger__table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: var(--space-4) 0; }
.tt-ledger__th, .tt-ledger__td { border-bottom: 1px dashed var(--line); padding: var(--space-4) var(--space-6); text-align: left; }
.tt-ledger__th { color: var(--soft); font-weight: 700; }

/* --- Review ---------------------------------------------------------------
   .rev, .rtop, .rday, .rface, .tag — css/style.css */
.tt-review {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-10); align-items: start;
  padding: var(--space-8) 0; border-bottom: 1px solid var(--line);
}
.tt-review__face { display: flex; justify-content: center; }
.tt-review__top { display: flex; align-items: center; gap: var(--space-6); font-size: .85rem; }
.tt-review__day { margin-left: auto; color: var(--soft); font-size: .72rem; }
.tt-review__stars { color: var(--gold); letter-spacing: 1px; }
.tt-review__text { margin: 2px 0 0; line-height: 1.35; }
.tt-review__text--bad { color: var(--warn); }
.tt-review__reply { margin: var(--space-6) 0 0; color: var(--link); font-size: .85rem; line-height: 1.35; }
.tt-review__reply-label { font-weight: 800; }

/* --- Avatar ---------------------------------------------------------------
   .who .face, .rface — css/style.css */
.tt-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden;
  width: 36px; height: 36px; border-radius: var(--radius-round);
  background: var(--bg); border: 2px solid var(--line);
  font-size: 1.7rem; line-height: 1;
}
.tt-avatar--sm { width: 28px; height: 28px; font-size: 1.2rem; }
.tt-avatar--lg { width: 56px; height: 56px; font-size: 2.6rem; }
.tt-avatar__img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-round); }
.tt-avatar--emoji { user-select: none; }
.tt-card--goal { margin: 0; }
.tt-ledger { font-variant-numeric: tabular-nums; }

/* ---- src/40-feedback.css ---- */
/* ==========================================================================
   Phản hồi: Toast, Dialog, Bubble, Coachmark, EmptyState
   ========================================================================== */

/* --- Toast (.toast, .toast.show, .toast.pri — css/style.css) --------------- */
.tt-toast {
  position: fixed; left: 50%; bottom: calc(85px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 100000; max-width: min(560px, 94vw);
  padding: var(--space-10) var(--space-22);
  background: var(--ink); color: var(--bg);
  border: 1.5px solid color-mix(in srgb, var(--on-fill) 25%, transparent);
  border-radius: var(--radius-24); box-shadow: var(--shadow-toast);
  font-weight: 800; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.tt-toast.is-shown { opacity: 1; }
/* Toast ưu tiên (.pri): phạt, tiền giả, lỗi. */
.tt-toast--alert { background: var(--toast-alert); color: var(--on-fill); }
/* Chỉ để trưng bày tĩnh trong tài liệu: nằm trong dòng, luôn hiện. */
.tt-toast--inline {
  position: static; transform: none; display: inline-block;
  opacity: 1; max-width: 100%;
}
/* Bổ sung có chủ đích (Task 2): sắc thái success/warn/info/reward, icon đi kèm, nút hành động.
   Mỗi sắc thái luôn có icon hoặc chữ đi kèm, không chỉ dựa vào màu. */
.tt-toast--success { background: var(--toast-success); color: var(--on-fill); }
.tt-toast--warn { background: var(--toast-warn); color: var(--on-fill); }
.tt-toast--info { background: var(--toast-info); color: var(--on-fill); }
.tt-toast--reward { background: var(--toast-reward); color: var(--on-fill); }
/* Toast có icon / nút / số tiền: xếp ngang. Đặt sau --inline để vẫn chạy khi trưng bày tĩnh. */
.tt-toast--rich { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-10); }
/* Chỉ toast có nút hành động mới bấm được khi đang hiện (toast khác: pointer-events none). */
.tt-toast--action.is-shown { pointer-events: auto; }
.tt-toast__icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-round);
  background: var(--on-fill); font-size: .95rem; font-weight: 800; line-height: 1;
}
.tt-toast--success .tt-toast__icon { color: var(--toast-success); }
.tt-toast--warn .tt-toast__icon { color: var(--toast-warn); }
.tt-toast--info .tt-toast__icon { color: var(--toast-info); }
.tt-toast--reward .tt-toast__icon { color: var(--toast-reward); }
.tt-toast--alert .tt-toast__icon { color: var(--toast-alert); }
/* Icon PNG (assets/Icons) thay cho chữ: không tô nền. */
.tt-toast__icon--img { width: 30px; height: 30px; background: transparent; border-radius: 0; }
.tt-toast__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tt-toast__text { min-width: 0; }
.tt-toast__label { display: block; font-size: .82rem; font-weight: 700; }
/* Số tiền lớn của toast phần thưởng ("+50k"). */
.tt-toast__amount { font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tt-toast__action {
  flex: none; cursor: pointer;
  padding: var(--space-4) var(--space-12);
  background: transparent; color: inherit;
  border: 2px solid currentColor; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 800; line-height: 1.2;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-toast__action:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tt-toast__action:active { transform: scale(.94); }
/* Vòng focus theo màu chữ của toast (nền toast luôn đậm so với chữ), không dùng focus-ring của theme. */
.tt-toast__action:focus-visible { outline-color: currentColor; }

/* --- Dialog (.modal, .card, .askbtns, .sp-banner-* — css/style.css) ------- */
.tt-dialog {
  position: fixed; inset: 0; z-index: 100050;
  display: flex; align-items: center; justify-content: center;
  padding-top: calc(var(--space-12) + env(safe-area-inset-top, 0px));
  padding-right: calc(var(--space-12) + env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  padding-left: calc(var(--space-12) + env(safe-area-inset-left, 0px));
  background: var(--scrim); overflow-y: auto;
}
.tt-dialog__card {
  position: relative; margin: auto; width: 100%; max-width: 400px; max-height: 88vh;
  overflow-y: auto; text-align: center;
  padding: var(--space-16) var(--space-16) var(--space-14);
  background: var(--panel); border-radius: var(--radius-20); box-shadow: var(--shadow-modal);
}
.tt-dialog__title { margin: 0 0 var(--space-6); font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
/* Tiêu đề lớn (.card h1): tổng kết ngày, lên level. */
.tt-dialog__title--display { margin: var(--space-4) 0 var(--space-8); font-size: 2rem; font-weight: 800; line-height: 1.05; }
.tt-dialog__message { margin: var(--space-6) 0; color: var(--soft); line-height: 1.4; }
.tt-dialog__actions { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-12); }
/* Thông báo của Dev (.sp-banner-*): nhãn, nút đóng, khối chữ có vạch hồng bên trái. */
.tt-dialog__badge {
  display: inline-block; margin-bottom: var(--space-8); padding: var(--space-4) var(--space-14);
  background: var(--fresh-1-bg); color: var(--fresh-1-ink);
  border: 1px solid color-mix(in srgb, var(--pink) 40%, var(--panel));
  border-radius: var(--radius-20); font-size: .82rem; font-weight: 800;
}
.tt-dialog__close {
  position: absolute; top: var(--space-12); right: var(--space-12); width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fill-muted); color: var(--soft); border: 0; border-radius: var(--radius-round);
  box-shadow: var(--shadow-edge);
  font-size: 1rem; font-weight: 800; cursor: pointer; transition: transform .15s;
}
.tt-dialog__close:active { transform: scale(.9); }
.tt-dialog__body {
  margin: 0 0 var(--space-14); padding: var(--space-12) var(--space-14); text-align: left;
  background: color-mix(in srgb, var(--pink) 8%, var(--panel)); color: var(--ink);
  border-left: 4px solid var(--pink); border-radius: var(--radius-14);
  font-size: .84rem; line-height: 1.55;
}
/* Chỉ để trưng bày tĩnh trong tài liệu: không phủ cả màn hình. */
.tt-dialog--inline {
  position: relative; inset: auto; z-index: auto; display: block; overflow: visible;
  padding: var(--space-12); border-radius: var(--radius-12);
}

/* --- Bubble (.say, .frontshop-karin-bubble, #q3say — css/style.css) ------- */
.tt-bubble {
  display: inline-block; max-width: 100%;
  padding: 5px 7px; background: var(--bg); color: var(--ink);
  border-radius: 4px var(--radius-12) var(--radius-12) var(--radius-12);
  font-size: .74rem; line-height: 1.3; box-shadow: var(--shadow-edge);
}
.tt-bubble__key { color: var(--pink-d); font-weight: 800; }
/* Đặt trên nền bg (game luôn đặt .say trên panel): đổi sang nền panel + viền line. */
.tt-bubble--raised { background: var(--panel); border: 2px solid var(--line); box-shadow: none; }
/* Lời linh vật ở mặt tiền: viền vàng, đuôi giữa phía dưới, lơ lửng nhẹ. */
.tt-bubble--mascot {
  position: relative; max-width: 240px; padding: var(--space-6) var(--space-12);
  background: var(--panel); border: 2px solid var(--gold); border-radius: var(--radius-14);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--ink) 20%, transparent);
  font-size: .78rem; text-align: center; line-height: 1.35;
  animation: tt-bob 5s ease-in-out infinite;
}
.tt-bubble--mascot::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 0; border-style: solid; border-width: 7px 7px 0;
  border-color: var(--gold) transparent transparent;
}
/* Lời khách ở quầy (#q3say): chữ 24px trên sân khấu 768px, không nền. */
.tt-bubble--stage { padding: 0; box-shadow: none; background: transparent; color: var(--stage-ink); font-size: 24px; font-weight: 600; line-height: 1.18; }
.tt-bubble--stage .tt-bubble__key { color: var(--stage-accent); }

/* --- Coachmark (#q3coach, .q3coachT — css/style.css) ---------------------- */
.tt-coach {
  display: flex; align-items: center; justify-content: center;
  max-width: 420px; min-height: 40px; padding: var(--space-6) var(--space-12);
  background: var(--coach); color: var(--on-fill);
  border-radius: var(--radius-14); box-shadow: var(--shadow-coach);
  font-size: 19px; font-weight: 800; line-height: 1.15; text-align: center; pointer-events: none;
}
.tt-coach[hidden] { display: none; }
/* Phần tử được chỉ dẫn: vòng 4px + vòng nhấp nháy. Phần tử cần position: relative (hoặc absolute). */
.tt-coach-target { z-index: 2; box-shadow: 0 0 0 4px var(--coach); animation: none; }
.tt-coach-target::before {
  content: ''; position: absolute; inset: -10px; pointer-events: none;
  border: 5px solid var(--coach); border-radius: 18px;
  animation: tt-ring 1.1s ease-out infinite; will-change: transform, opacity;
}

/* --- EmptyState (.cust.empty, .q3idle, .q3wait, .none — css/style.css) ---- */
.tt-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4); min-height: 84px; padding: var(--space-6);
  border: 2px dashed var(--line); border-radius: var(--radius-14);
  color: var(--soft); font-size: .8rem; text-align: center;
}
/* Ô trống trong làn khách (.lane .cust.empty). */
.tt-empty--lane { width: 100%; height: 128px; }
.tt-empty__icon { width: 40px; height: 40px; object-fit: contain; opacity: .8; }
.tt-empty__hint { margin-top: var(--space-4); font-size: .8em; font-weight: 700; opacity: var(--alpha-empty-hint); }
/* Dấu "—" khi một ô không có dữ liệu (.none). */
.tt-empty__none { color: var(--soft); font-size: .8rem; line-height: 1; }
/* Trên sân khấu quầy ("Đang chờ khách…" / "Ngồi chơi xíu đi"). */
.tt-empty--stage {
  padding: var(--space-4) var(--space-12); border-color: var(--stage-track); border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--stage-paper) 85%, transparent);
  color: var(--stage-muted); font-size: 24px; font-weight: 800; line-height: 1.2;
}

/* ---- src/45-alerts.css ---- */
/* ==========================================================================
   Thông báo & cảnh báo: Alert, UrgentAlert, Countdown
   ========================================================================== */

/* --- Alert (.wbox, .evc, .evc.loan, .tax-status-box — css/style.css) ------ */
.tt-alert {
  display: flex; align-items: flex-start; gap: var(--space-10);
  padding: var(--space-8) var(--space-10);
  background: var(--panel); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-12);
  text-align: left;
}
/* Mức độ: nền pha 10–22% với panel, viền 2px cùng màu (như .evc / .wbox). */
.tt-alert--info { background: color-mix(in srgb, var(--link) 10%, var(--panel)); border-color: var(--link); }
.tt-alert--success { background: color-mix(in srgb, var(--mint) 14%, var(--panel)); border-color: var(--mint); }
.tt-alert--warn { background: color-mix(in srgb, var(--gold) 22%, var(--panel)); border-color: var(--gold); border-left-width: 6px; }
.tt-alert--danger { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: var(--warn); border-left-width: 6px; }
.tt-alert__icon { flex: none; width: 30px; height: 30px; object-fit: contain; }
.tt-alert__body { flex: 1; min-width: 0; }
.tt-alert__title { display: block; font-size: .95rem; font-weight: 800; line-height: 1.25; }
.tt-alert__text { display: block; margin-top: 2px; color: var(--soft); font-size: .8rem; font-weight: 600; line-height: 1.3; }
.tt-alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); }
.tt-alert__close {
  flex: none; width: 28px; height: 28px; margin: -2px -4px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--soft); border: 0; border-radius: var(--radius-round);
  font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.tt-alert__close:hover { background: var(--fill-muted); color: var(--ink); }
.tt-alert[hidden] { display: none; }

/* --- UrgentAlert (.police-raid-overlay, .police-*, .verdict-* — css/style.css) */
.tt-urgent {
  position: fixed; inset: 0; z-index: 100060;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px var(--space-16); overflow-y: auto; text-align: center;
  background: var(--urgent-bg);
  animation: tt-urgent-flash .6s infinite alternate;
}
@keyframes tt-urgent-flash {
  from { box-shadow: inset 0 0 30px color-mix(in srgb, var(--urgent-bar-from) 60%, transparent); }
  to { box-shadow: inset 0 0 70px color-mix(in srgb, var(--urgent-bar-from) 95%, transparent); }
}
@keyframes tt-urgent-badge { from { transform: scale(1); } to { transform: scale(1.1); } }
.tt-urgent__badge {
  margin-bottom: var(--space-6); font-size: 2.8rem; line-height: 1;
  animation: tt-urgent-badge .5s infinite alternate;
}
.tt-urgent__img { display: block; width: 56px; height: 56px; object-fit: contain; }
.tt-urgent__title { margin: 0 0 var(--space-6); color: var(--urgent-title); font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.tt-urgent__sub { max-width: 420px; margin: 0 0 var(--space-10); color: var(--urgent-sub); font-size: .88rem; font-weight: 700; line-height: 1.35; }
.tt-urgent__track {
  width: 100%; max-width: 320px; height: 14px; margin-bottom: var(--space-6); overflow: hidden;
  background: color-mix(in srgb, var(--on-fill) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-fill) 60%, transparent); border-radius: var(--radius-8);
}
.tt-urgent__bar {
  height: 100%; border-radius: var(--radius-8);
  background: linear-gradient(90deg, var(--urgent-bar-from), var(--urgent-bar-to));
  transition: width .1s linear;
}
.tt-urgent__count { margin-bottom: var(--space-8); color: var(--urgent-sub); font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Thẻ phạt (.police-fine-card): thẻ trung tâm viền warn 3px, tiêu đề đứt nét, số tiền phạt lớn. */
.tt-urgent__card {
  width: 100%; max-width: 440px; padding: 18px var(--space-16);
  background: var(--panel); color: var(--ink);
  border: 3px solid var(--warn); border-radius: var(--radius-20); box-shadow: var(--shadow-modal);
  text-align: center;
}
.tt-urgent__header {
  margin: 0 0 var(--space-12); padding-bottom: var(--space-8);
  border-bottom: 2px dashed var(--warn); color: var(--warn);
  font-size: 1.15rem; font-weight: 800;
}
.tt-urgent__body { font-size: .9rem; line-height: 1.5; text-align: left; }
.tt-urgent__amount { margin: var(--space-10) 0; color: var(--warn); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tt-urgent__actions { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-8); }
/* Nút chính của thẻ phạt (.police-fine-confirm-btn): nền warn đặc, chữ on-fill, rộng hết thẻ. */
.tt-urgent__confirm {
  width: 100%; padding: var(--space-12) 20px; cursor: pointer;
  background: var(--warn); color: var(--on-fill); border: 0; border-radius: var(--radius-12);
  font-size: 1rem; font-weight: 800;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--warn) 30%, transparent);
}
.tt-urgent__confirm:active { transform: translateY(2px); }
/* Kết luận sau cảnh báo (.verdict-title.fail|.success, .verdict-box). */
.tt-urgent__verdict-title { margin: var(--space-4) 0 var(--space-6); font-size: 1.35rem; font-weight: 800; letter-spacing: .3px; }
.tt-urgent__verdict-title--fail { color: var(--warn); }
.tt-urgent__verdict-title--success { color: var(--mint); }
.tt-urgent__verdict {
  margin: var(--space-10) 0; padding: var(--space-12) var(--space-14);
  border: 1.5px solid var(--line); border-radius: var(--radius-14);
  font-size: .92rem; line-height: 1.6; text-align: left;
}
.tt-urgent__verdict--fail { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: var(--warn); }
.tt-urgent__verdict--success { background: color-mix(in srgb, var(--mint) 14%, var(--panel)); border-color: var(--mint); }
/* Chỉ để trưng bày tĩnh trong tài liệu: không phủ cả màn hình, không nhấp nháy. */
.tt-urgent--inline {
  position: relative; inset: auto; z-index: auto; overflow: visible;
  padding: var(--space-16) var(--space-12); border-radius: var(--radius-20); animation: none;
}

/* --- Countdown (.tax-timer-badge, .tax-overdue-dot — css/style.css) -------- */
.tt-countdown {
  display: inline-flex; align-items: center; gap: var(--space-6);
  padding: 5px var(--space-12); border-radius: var(--radius-20);
  background: var(--timer-ok); color: var(--on-fill);
  font-size: .92rem; font-weight: 800; letter-spacing: .5px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tt-countdown--ok { background: var(--timer-ok); }
.tt-countdown--soon { background: var(--timer-soon); }
.tt-countdown--overdue { background: var(--timer-overdue); animation: tt-pulse 1.2s infinite; }
.tt-countdown__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; object-fit: contain; line-height: 1; }
.tt-countdown__text { font-variant-numeric: tabular-nums; }
/* Icon PNG vẽ tay trên nền đậm: đặt trên chấm trắng để đọc được. */
.tt-countdown__icon--img { padding: 1px; background: var(--on-fill); border-radius: var(--radius-round); }

/* ---- src/50-counter.css ---- */
/* ==========================================================================
   50-counter — Quầy pha: CustomerCard, PatienceBar, PourGauge, IngredientBin, CupSize
   Dùng lại (không định nghĩa lại): tt-avatar, tt-bubble, tt-progress--patience, tt-empty--lane, tt-button.
   PatienceBar / PourGauge / IngredientBin đo bằng px của sân khấu 768×1376 (quầy pha trong game).
   ========================================================================== */

/* --- CustomerCard + Lane ---------------------------------------------------
   .lane / .lane .cust / .cust / .who / .say / .icons / .ic / .otx / .decl / .cust.onlc — css/style.css 336–392 */
/* Làn khách cuộn ngang, mỗi thẻ bám mép trái khi dừng cuộn. Đệm trên 22px chừa chỗ cho mặt nổi lên mép thẻ. */
.tt-lane {
  display: flex; gap: var(--space-8);
  overflow-x: auto; overflow-y: hidden;
  padding: var(--space-22) var(--space-10) var(--space-8);
  flex: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tt-customer {
  position: relative; flex: none; width: 172px; min-height: 84px;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-6);
  scroll-snap-align: start;
}
.tt-customer:active { transform: scale(.97); }
/* Khách đơn online: viền pink, tên chuyển pink-d (.cust.onlc). */
.tt-customer--online { border-color: var(--pink); }
.tt-customer.is-angry { animation: tt-shake .3s; }

/* Nút chọn phủ kín thẻ (stretched button): bàn phím chọn khách; × từ chối nằm trên nó. Thẻ không lồng <button>. */
.tt-customer__select {
  position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; margin: 0;
  border: 0; border-radius: var(--radius-12); background: transparent; cursor: pointer;
}
.tt-customer__select:focus-visible { outline-offset: 1px; }

/* Hàng mặt + tên: kéo lên -18px để mặt nổi qua mép trên của thẻ. */
.tt-customer__who {
  display: flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 800; margin-top: -18px;
}
.tt-customer--online .tt-customer__who { color: var(--pink-d); }
.tt-customer__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-customer__tag { font-weight: 800; font-size: .75rem; color: var(--pink); }
/* Khung bọc cho tt-bubble: thẻ chỉ quyết định chỗ đặt lời gọi món. */
.tt-customer__say { min-width: 0; font-size: .74rem; line-height: 1.3; }

/* Hàng ô thành phần (.icons / .ic): trà, hương, size, topping, đường, đá. */
.tt-customer__tiles { display: flex; gap: 3px; }
.tt-customer__tile {
  flex: 1; min-width: 0; height: 40px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-8);
}
.tt-customer__tile-label {
  max-width: 100%; overflow: hidden; white-space: nowrap;
  font-size: .52rem; line-height: 1; font-weight: 700; color: var(--soft);
}
.tt-customer__tile.is-done { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, var(--panel)); }
.tt-customer__tile.is-done::after {
  content: "✓"; position: absolute; top: -7px; right: -5px;
  width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--mint); color: var(--on-fill); border-radius: var(--radius-round);
  font-size: .55rem; font-weight: 800;
}

/* Danh sách món của đơn online (.otx): số thứ tự tròn + tên món, món đủ thì xanh và có ✓. */
.tt-customer__order { padding-right: 14px; font-size: .72rem; line-height: 1.2; }
.tt-customer--online .tt-customer__order { padding-right: 0; }
.tt-customer__line { display: flex; gap: var(--space-4); align-items: baseline; line-height: 1.25; }
.tt-customer__num {
  flex: none; width: 13px; height: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fill-muted); color: var(--soft); border-radius: var(--radius-round);
  font-size: .58rem; font-weight: 800;
}
.tt-customer__item.is-done { color: var(--mint); font-weight: 700; }
.tt-customer__item.is-done::after { content: " ✓"; }

/* Nút từ chối × (.decl): góc trên phải của thẻ. */
.tt-customer__decline {
  position: absolute; z-index: 2; right: 2px; top: 2px; padding: 2px 4px;
  border: 0; background: none; color: var(--soft);
  font-size: .8rem; cursor: pointer;
}

/* --- PatienceBar ------------------------------------------------------------
   .q3pat / .q3bar / .q3bar i — css/style.css 618–620; màu theo updPat() trong game.js */
.tt-patience { display: flex; align-items: center; gap: var(--space-8); font-weight: 800; font-size: 17px; letter-spacing: .03em; color: var(--stage-ink); }
.tt-patience__bar {
  flex: 1; height: 20px; overflow: hidden;
  background: var(--stage-paper); border: 3px solid var(--outline); border-radius: var(--radius-10);
}
.tt-patience__fill {
  display: block; width: 100%; height: 100%;
  background: var(--patience); border-radius: var(--radius-6);
  transition: width .25s linear;
}
.tt-patience.is-mid .tt-patience__fill { background: var(--gold); }
.tt-patience.is-low .tt-patience__fill { background: var(--warn); }

/* --- PourGauge ---------------------------------------------------------------
   .q3gauge / .q3lv / .q3ok — css/style.css 648–650; rót bằng giữ tay (js/game.js, tick() ~ dòng 7619) */
.tt-pour { display: flex; flex-direction: column; gap: var(--space-10); width: 170px; max-width: 100%; }
.tt-pour--fluid { width: 100%; }
.tt-pour__track {
  position: relative; height: 18px; padding: 3px;
  background: var(--wood-dark); border-radius: 9px;
}
.tt-pour__level {
  width: 0; height: 100%; border-radius: var(--radius-6);
  background: linear-gradient(90deg, var(--pour-low), var(--pour-mid) 60%, var(--pour-high) 80%);
}
/* Cửa sổ đích: left/width do JS đặt từ opts.target; mặc định như game (74% / 12%). */
.tt-pour__target {
  position: absolute; top: -4px; bottom: -4px; left: 74%; width: 12%;
  border: 3px solid var(--on-fill); border-radius: 5px;
  pointer-events: none;
}
.tt-pour__hold { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tt-pour__result { min-height: 1.3em; font-size: .9rem; font-weight: 800; text-align: center; color: var(--soft); }
.tt-pour.is-hit .tt-pour__result { color: var(--mint); }
.tt-pour.is-miss .tt-pour__result { color: var(--warn); }

/* --- IngredientBin ------------------------------------------------------------
   .q3z / .q3badge / .q3spr / .q3lbT — css/style.css 622–635; toạ độ sprite lấy từ js/game.js (TCOL, TROW, BINS) */
.tt-bin {
  position: relative; display: block; flex: none; width: 107px; height: 98px; padding: 0;
  border: 0; border-radius: var(--radius-14); background: none; color: var(--stage-ink);
  cursor: pointer; isolation: isolate;
}
.tt-bin:focus-visible { outline-color: var(--outline); }
/* Ảnh crop từ sprite bg.jpg 768×1376: nơi dùng đặt background-image và background-position (âm toạ độ x, y của khay). */
.tt-bin__img {
  position: absolute; inset: 0; border-radius: var(--radius-14);
  background-repeat: no-repeat; background-size: 768px 1376px; pointer-events: none;
}
/* Nhấn / đang chọn tạm: lớp phủ trắng 28% vẽ bằng ::after phía trên ảnh crop (ảnh opaque che nền của nút). */
.tt-bin::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-14); pointer-events: none; z-index: 1;
  background: transparent; transition: background .1s;
}
.tt-bin:active::after,
.tt-bin.is-on::after { background: color-mix(in srgb, var(--on-fill) 28%, transparent); }
.tt-bin.is-want { z-index: 1; box-shadow: var(--shadow-want); animation: tt-pulse 1.4s ease-in-out infinite; will-change: transform; }
.tt-bin.is-picked { box-shadow: var(--shadow-pick); }
.tt-bin.is-empty,
.tt-bin.is-locked { cursor: not-allowed; }

/* Lớp phủ "Hết" / ổ khoá: luôn nằm trong DOM, chỉ hiện khi khay hết hoặc bị khoá. */
.tt-bin__veil {
  display: none; position: absolute; z-index: 2; inset: 6px; place-items: center;
  border-radius: var(--radius-10); pointer-events: none;
  background: color-mix(in srgb, var(--stage-paper) var(--alpha-veil), transparent);
  font-size: 22px; font-weight: 800; color: var(--stage-muted);
}
.tt-bin.is-empty .tt-bin__veil,
.tt-bin.is-locked .tt-bin__veil { display: grid; }
.tt-bin.is-locked .tt-bin__veil { background: color-mix(in srgb, var(--stage-ground) 85%, transparent); }
.tt-bin.is-locked .tt-bin__veil-text,
.tt-bin.is-empty .tt-bin__veil-lock { display: none; }
.tt-bin__veil-lock { width: 26px; height: 26px; object-fit: contain; }

/* Badge số lượng: tròn 28px; --sm 24px cho khay foam/hũ. Vị trí mặc định: góc trên phải. */
.tt-bin__badge {
  position: absolute; z-index: 3; top: -1px; right: -3px; min-width: 28px; height: 28px; padding: 0 4px;
  display: grid; place-items: center; pointer-events: none;
  background: var(--bin-badge); border: 2.5px solid var(--outline-soft); border-radius: var(--radius-14);
  font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--stage-ink);
}
.tt-bin__badge:empty { display: none; }
.tt-bin__badge--sm { top: 9px; right: -2px; min-width: 24px; height: 24px; font-size: 13px; border-width: 2px; }
.tt-bin.is-locked .tt-bin__badge { background: var(--stage-paper); border-color: var(--stage-track); }
.tt-bin.is-locked .tt-bin__badge--sm { display: none; }
/* Nhãn chữ dưới khay foam (.q3lbT): 16px đậm, 2 dòng. */
.tt-bin__label {
  position: absolute; z-index: 2; left: 6px; right: 6px; bottom: 2px; height: 34px; display: grid; place-items: center;
  font-size: 16px; font-weight: 800; line-height: 1.02; text-align: center; pointer-events: none; color: var(--stage-ink);
  background: var(--bin-label-bg);
}

/* --- CupSize --------------------------------------------------------------------
   .mcup / .mcup.L / .bigsz / .bigsz.on — css/style.css 206, 245–248, 362–363 */
.tt-cupsize { display: flex; gap: var(--space-8); }
.tt-cupsize__option {
  flex: 1 1 0; min-width: 0; min-height: 52px;
  display: flex; align-items: center; justify-content: center; gap: var(--space-10);
  background: transparent; border: 2px solid var(--line); border-radius: var(--radius-12);
  font-size: 1.2rem; font-weight: 800; cursor: pointer;
}
.tt-cupsize__option[aria-checked="true"] { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 18%, transparent); box-shadow: var(--shadow-on); }
.tt-cupsize__fee { font-size: .72rem; font-weight: 700; color: var(--soft); }
/* Hình ly vẽ bằng clip-path (miệng rộng, đáy hẹp), tô currentColor nên theo màu chữ. */
.tt-cupsize__cup {
  display: block; width: 15px; height: 19px; background: currentColor; opacity: .75;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}
.tt-cupsize__cup--l { width: 17px; height: 27px; }
/* Ly nhỏ 12×13 / 13×19 trong ô thành phần của thẻ khách (.mcup). */
.tt-cupsize__mini {
  display: block; width: 12px; height: 13px; background: var(--soft);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}
.tt-cupsize__mini--l { width: 13px; height: 19px; }

/* ---- src/60-characters.css ---- */
/* ==========================================================================
   60-characters — Nhân vật: Character, Mascot, ShipperBadge
   Dùng lại (không định nghĩa lại): tt-bubble, tt-bubble--mascot, tt-sr-only, tt-ico.
   Ảnh atlas (faces.webp 3 cột × 9 hàng, ship.webp 3 cột × 2 hàng, ô 225×220) được cắt bằng
   background-size / background-position theo biến --tt-col, --tt-row; URL ảnh đặt ở style của phần tử.
   ========================================================================== */

/* --- Character -------------------------------------------------------------
   .who .face / .tfc / .tfc.big (40 / 60px) — css/style.css; faceBg() — js/game.js */
.tt-character {
  --tt-face: 60px;
  display: inline-flex; align-items: center; gap: var(--space-10);
  max-width: 100%; min-width: 0;
}
.tt-character--sm { --tt-face: 40px; gap: var(--space-8); }
.tt-character--lg { --tt-face: 88px; gap: var(--space-12); }
/* Cột của atlas theo tâm trạng: 0 bình thường, 1 vui, 2 giận. */
.tt-character--mood-normal { --tt-col: 0; }
.tt-character--mood-happy { --tt-col: 1; }
.tt-character--mood-angry { --tt-col: 2; }

.tt-character__figure { position: relative; flex: none; width: var(--tt-face); height: var(--tt-face); }
.tt-character__face,
.tt-character__img {
  display: block; width: var(--tt-face); height: var(--tt-face);
  background-color: var(--bg); border: 2px solid var(--line); border-radius: var(--radius-round);
}
.tt-character__img { object-fit: contain; }
/* Ô atlas 225×220: scale theo chiều cao ô để mặt không méo, thừa chiều ngang được cắt đều hai bên. */
.tt-character__face {
  --tt-cw: calc(var(--tt-face) * 225 / 220);
  background-repeat: no-repeat; background-origin: border-box;
  background-size: calc(var(--tt-cw) * 3) calc(var(--tt-face) * var(--tt-rows, 9));
  background-position:
    calc(var(--tt-cw) * var(--tt-col, 0) * -1 - (var(--tt-cw) - var(--tt-face)) / 2)
    calc(var(--tt-face) * var(--tt-row, 0) * -1);
}
.tt-character--square .tt-character__face,
.tt-character--square .tt-character__img { border-radius: var(--radius-14); }

/* Huy hiệu tâm trạng: icon PNG trong vòng tròn ở góc dưới phải (giận: ic_angry, vui: stk_heart); tâm trạng
   bình thường không có huy hiệu. Tâm trạng cũng có chữ cho screen reader nên không chỉ dựa vào hình. */
.tt-character__mood {
  position: absolute; right: -4px; bottom: -4px;
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-round);
}
.tt-character__mood-img { display: none; width: 14px; height: 14px; object-fit: contain; }
.tt-character--sm .tt-character__mood { width: 18px; height: 18px; right: -5px; bottom: -5px; }
.tt-character--sm .tt-character__mood-img { width: 11px; height: 11px; }
.tt-character--lg .tt-character__mood { width: 30px; height: 30px; right: -2px; bottom: -2px; }
.tt-character--lg .tt-character__mood-img { width: 20px; height: 20px; }
.tt-character--mood-happy .tt-character__mood { display: flex; border-color: var(--mint); }
.tt-character--mood-happy .tt-character__mood-img--happy { display: block; }
.tt-character--mood-angry .tt-character__mood { display: flex; border-color: var(--warn); }
.tt-character--mood-angry .tt-character__mood-img--angry { display: block; }

.tt-character__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.tt-character__name {
  font-size: .9rem; font-weight: 800; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt-character__role { font-size: .78rem; line-height: 1.2; color: var(--soft); }
.tt-character--sm .tt-character__name { font-size: .78rem; }
.tt-character--sm .tt-character__role { font-size: .72rem; }
.tt-character--lg .tt-character__name { font-size: 1rem; }
.tt-character--lg .tt-character__role { font-size: .82rem; }
.tt-character__say { margin-top: var(--space-4); min-width: 0; }
.tt-character--say { align-items: flex-start; }
.tt-character--stacked { flex-direction: column; text-align: center; }
.tt-character--stacked .tt-character__body { align-items: center; }

/* --- Mascot ----------------------------------------------------------------
   .frontshop-karin-wrap / -bubble / -img-box / -img / -badge, karinIdle, karinBounceAnim — css/style.css 2316–2420 */
.tt-mascot { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; user-select: none; }
.tt-mascot__say { margin-bottom: var(--space-6); }
.tt-mascot__box {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 0; margin: 0; background: none; border: 0; border-radius: var(--radius-16); cursor: pointer;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-mascot__box:hover { transform: scale(1.08); }
.tt-mascot__box:active { transform: scale(.92); }
.tt-mascot__img {
  display: block; width: 96px; height: auto;
  filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--ink) 42%, transparent));
}
.tt-mascot.is-ready .tt-mascot__img { animation: tt-mascot-idle 3s ease-in-out infinite; }
.tt-mascot.is-cheer .tt-mascot__img { animation: tt-mascot-cheer .6s cubic-bezier(.34, 1.56, .64, 1); }
/* Hồi chiêu: mèo mờ và xám, nút khoá, đồng hồ đếm ngược nằm giữa ảnh. */
.tt-mascot.is-cooldown .tt-mascot__img { opacity: .5; filter: grayscale(1); }
.tt-mascot__box:disabled { cursor: default; transform: none; }
.tt-mascot__timer {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: var(--space-4); white-space: nowrap;
  padding: var(--space-2) var(--space-8);
  background: var(--panel); color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 800; line-height: 1.2;
}
.tt-mascot__badge {
  margin-top: -6px; padding: 2px 8px; white-space: nowrap;
  background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 70%, var(--ink)));
  color: var(--on-fill); border: 1.5px solid color-mix(in srgb, var(--gold) 20%, var(--panel)); border-radius: var(--radius-10);
  font-size: .68rem; font-weight: 900; letter-spacing: .5px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--gold) 40%, transparent);
}
@keyframes tt-mascot-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@keyframes tt-mascot-cheer {
  0% { transform: scale(1); }
  25% { transform: scale(1.22) rotate(-8deg); }
  50% { transform: scale(.95) rotate(5deg); }
  75% { transform: scale(1.12) rotate(-3deg); }
  100% { transform: scale(1); }
}

/* --- ShipperBadge ----------------------------------------------------------
   .shippermap-status-badge, .shipper-unit / .shipper-img / .shipper-bubble — css/style.css 4270, 4340–4390 */
.tt-shipper {
  --tt-face: 44px;
  display: inline-flex; align-items: center; gap: var(--space-10);
  max-width: 100%; min-width: 0; padding: var(--space-6) var(--space-12) var(--space-6) var(--space-6);
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius-14);
}
.tt-shipper--mood-normal { --tt-col: 0; }
.tt-shipper--mood-happy { --tt-col: 1; }
.tt-shipper--mood-angry { --tt-col: 2; }
.tt-shipper__face,
.tt-shipper__img {
  flex: none; display: block; width: var(--tt-face); height: var(--tt-face);
  background-color: var(--bg); border: 2px solid var(--line); border-radius: var(--radius-round);
}
.tt-shipper__img { object-fit: contain; }
/* Mặt trong ship.webp: 3 cột (tâm trạng) × 2 hàng (shipper), ô 225×220 như faces.webp. */
.tt-shipper__face {
  --tt-cw: calc(var(--tt-face) * 225 / 220);
  background-repeat: no-repeat; background-origin: border-box;
  background-size: calc(var(--tt-cw) * 3) calc(var(--tt-face) * 2);
  background-position:
    calc(var(--tt-cw) * var(--tt-col, 0) * -1 - (var(--tt-cw) - var(--tt-face)) / 2)
    calc(var(--tt-face) * var(--tt-row, 0) * -1);
}
.tt-shipper__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.tt-shipper__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 800; line-height: 1.15; }
.tt-shipper__status {
  display: inline-block; padding: 1px var(--space-8); white-space: nowrap;
  background: color-mix(in srgb, var(--gold) 14%, var(--panel)); color: var(--ink);
  border: 2px solid var(--gold); border-radius: var(--radius-pill);
  font-size: .78rem; font-weight: 800; line-height: 1.3;
}
.tt-shipper.is-going .tt-shipper__status { background: color-mix(in srgb, var(--pink) 14%, var(--panel)); border-color: var(--pink); }
.tt-shipper.is-done .tt-shipper__status { background: color-mix(in srgb, var(--mint) 14%, var(--panel)); border-color: var(--mint); }
.tt-shipper--compact { --tt-face: 32px; gap: var(--space-8); padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4); }
.tt-shipper--compact .tt-shipper__name { font-size: .78rem; }
.tt-shipper--compact .tt-shipper__status { font-size: .72rem; }

/* Marker shipper trên bản đồ (.shipper-unit 38px): ảnh + bong bóng trạng thái phía trên. */
.tt-shipper-pin { position: relative; display: inline-block; width: 38px; height: 38px; }
.tt-shipper-pin__img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--ink) 45%, transparent));
  transition: transform .2s ease;
}
.tt-shipper-pin.is-flip .tt-shipper-pin__img { transform: scaleX(-1); }
.tt-shipper-pin__bubble {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 2px;
  padding: 2px 6px; white-space: nowrap; pointer-events: none;
  background: var(--panel); color: var(--ink); border: 1px solid var(--gold); border-radius: var(--radius-8);
  font-size: 8px; font-weight: 800; line-height: 1.3;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ink) 25%, transparent);
}
.tt-shipper-pin__bubble::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border-style: solid; border-width: 3px; border-color: var(--gold) transparent transparent transparent;
}

/* ---- src/70-business.css ---- */
/* ==========================================================================
   70-business — UpgradeCard, StaffCard, PartyContract, GiftCard, SavingsCard, OnlineOrder, FriendRow
   Thẻ nghiệp vụ của game. Nút, badge, thanh tiến độ, avatar dùng lại qua markup
   (tt-button*, tt-badge*, tt-progress*, tt-avatar*); file này chỉ lo bố cục và trạng thái của từng thẻ.
   Độ đặc hiệu phẳng: một lớp + trạng thái. Trạng thái không chỉ khác màu: luôn kèm chữ hoặc icon.
   ========================================================================== */

/* Danh sách thẻ (ul/ol > li): bỏ chấm đầu dòng, xếp dọc. Dùng chung cho cả nhóm. */
.tt-business-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }

/* --- UpgradeCard ----------------------------------------------------------
   .rowi (tab Nâng cấp), .okline, .wl, .lock.unl — css/style.css */
.tt-upgrade-card {
  display: grid; grid-template-columns: 44px 1fr 88px; gap: var(--space-10); align-items: center;
  background: var(--panel);
  border: 2px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-10) var(--space-12);
  text-align: left;
}
.tt-upgrade-card__icon { width: 40px; height: 40px; object-fit: contain; justify-self: center; }
.tt-upgrade-card__name { font-weight: 700; line-height: 1.15; }
.tt-upgrade-card__effect { font-size: .78rem; color: var(--soft); font-weight: 600; line-height: 1.25; }
.tt-upgrade-card__level { display: flex; justify-content: space-between; margin-top: var(--space-6); font-size: .72rem; font-weight: 700; color: var(--soft); }
.tt-upgrade-card__action { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); text-align: right; }
.tt-upgrade-card__reason { font-size: .72rem; font-weight: 700; color: var(--soft); }
.tt-upgrade-card__reason.is-short { color: var(--warn); }
.tt-upgrade-card__owned { font-size: .9rem; font-weight: 800; }
.tt-upgrade-card__lock { display: inline-flex; align-items: center; gap: var(--space-4); font-size: .72rem; font-weight: 700; color: var(--soft); }
.tt-upgrade-card.is-owned { border-color: var(--mint); }
.tt-upgrade-card.is-locked { border-style: dashed; background: var(--bg); }
.tt-upgrade-card.is-locked .tt-upgrade-card__icon { filter: grayscale(1); }

/* --- StaffCard ------------------------------------------------------------
   .staff-kho-row/-info/-avatar/-details/-name/-sub/-kpi, .kpi-status-working/-off, .kpi-buff-pill,
   .gz-widget/-avatar/-name/-pill-work/-pill-sulk/-msg/-poke-chip — css/style.css */
.tt-staff-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-10);
  background: var(--panel);
  border: 2px solid var(--line); border-radius: var(--radius-12);
  padding: var(--space-10) var(--space-12);
  text-align: left;
}
.tt-staff-card__info { display: flex; align-items: center; gap: var(--space-10); flex: 1; min-width: 0; }
.tt-staff-card__avatar { width: 46px; height: 46px; font-size: 1.45rem; }
.tt-staff-card__body { flex: 1; min-width: 0; }
.tt-staff-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); font-size: .92rem; font-weight: 800; }
.tt-staff-card__sub { margin-top: 2px; font-size: .78rem; color: var(--soft); font-weight: 600; }
.tt-staff-card__wage { font-weight: 800; color: var(--ink); }
.tt-staff-card__buffs { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); }
.tt-staff-card__kpi { margin-top: var(--space-6); }
.tt-staff-card__kpi-text { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 700; color: var(--soft); }
.tt-staff-card__action { flex: none; display: flex; flex-direction: column; align-items: stretch; min-width: 84px; }
/* Widget nhân viên Gen Z (.gz-widget): thanh ngang 64px dưới quầy. */
.tt-staff-card--widget {
  min-height: 64px; border-radius: var(--radius-20);
  padding: 5px var(--space-14); gap: var(--space-12);
  border-width: 1.5px;
}
.tt-staff-card--widget .tt-staff-card__avatar { width: 44px; height: 44px; font-size: 24px; }
.tt-staff-card--widget .tt-staff-card__name { flex-wrap: nowrap; gap: var(--space-8); font-size: 15px; }
.tt-staff-card__msg { font-size: 12.5px; font-weight: 600; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-staff-card--widget.is-sulking { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.tt-staff-card--widget.is-stealing { border-color: var(--warn); border-width: 2px; background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
/* .gz-poke-chip: nút bắt quả tang / dỗ dành. */
.tt-staff-card__poke {
  display: flex; align-items: center; gap: 5px; flex: none; cursor: pointer;
  background: color-mix(in srgb, var(--street) 10%, var(--panel)); color: var(--street);
  border: 1.5px solid var(--street); border-radius: var(--radius-14);
  padding: 7px var(--space-14);
  font-size: 13px; font-weight: 800;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.tt-staff-card__poke:hover:not(:disabled) { transform: scale(1.04); }
.tt-staff-card__poke:active:not(:disabled) { transform: scale(.96); }
.tt-staff-card__poke:disabled { opacity: .4; cursor: not-allowed; }
.tt-staff-card__poke.is-catch { background: var(--warn); color: var(--on-fill); border-color: var(--warn); font-weight: 900; animation: tt-pulse .5s infinite alternate; }

/* --- PartyContract --------------------------------------------------------
   .party-contract-card(.accepted), .party-header/-badge/-status/-deadline/-title/-client/-finance/-desc/-tip/-actions,
   .p-fin-box — css/style.css */
.tt-party-contract {
  background: color-mix(in srgb, var(--gold) 16%, var(--panel));
  border: 2px solid var(--gold); border-radius: var(--radius-16);
  padding: var(--space-12) var(--space-14);
  text-align: left;
}
.tt-party-contract__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-6); margin-bottom: var(--space-6); }
.tt-party-contract__deadline { font-size: .75rem; font-weight: 700; }
.tt-party-contract__status { font-size: .78rem; font-weight: 800; }
.tt-party-contract__title { margin: 2px 0 var(--space-4); font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.tt-party-contract__client { margin-bottom: var(--space-8); font-size: .84rem; }
.tt-party-contract__cups { font-size: 1.05rem; font-weight: 800; }
.tt-party-contract__finance { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin: var(--space-6) 0 var(--space-8); }
.tt-party-contract__box {
  background: var(--panel);
  border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius-10);
  padding: var(--space-6) var(--space-4); text-align: center;
}
.tt-party-contract__box--deposit { border-top-color: var(--link); }
.tt-party-contract__box--payout { border-top-color: var(--mint); }
.tt-party-contract__box--bonus { border-top-color: var(--gold); }
.tt-party-contract__box-label { display: block; font-size: .68rem; font-weight: 700; color: var(--soft); }
.tt-party-contract__box-value { display: block; font-size: .92rem; font-weight: 800; }
.tt-party-contract__desc { margin-bottom: var(--space-8); font-size: .78rem; line-height: 1.35; }
.tt-party-contract__actions { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-8); margin-top: var(--space-6); }
.tt-party-contract.is-accepted { background: color-mix(in srgb, var(--mint) 12%, var(--panel)); border-color: var(--mint); }
.tt-party-contract.is-accepted .tt-party-contract__box { border-top-color: var(--mint); }

/* --- GiftCard -------------------------------------------------------------
   .bb-gift-grid, .bb-gift-card(.on), .bb-gift-icon, .bb-gift-name, .bb-gift-val, .bb-redeem-* — css/banbe.css */
.tt-gift-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  width: 100%;
  background: var(--panel); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-12);
  padding: var(--space-10);
  text-align: center;
}
.tt-gift-card[role="radio"] { cursor: pointer; }
.tt-gift-card[role="radio"][aria-checked="true"] { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 10%, var(--panel)); box-shadow: var(--shadow-ring-pink); }
.tt-gift-card__icon { font-size: 1.8rem; line-height: 1.1; }
.tt-gift-card__icon-img { width: 36px; height: 36px; object-fit: contain; }
.tt-gift-card__name { margin: 0; font-size: .85rem; font-weight: 800; }
.tt-gift-card__value { font-size: .75rem; font-weight: 700; color: var(--pink-d); }
.tt-gift-card__sender { font-size: .72rem; font-weight: 600; color: var(--soft); }
.tt-gift-card__action { margin-top: var(--space-4); }
/* .bb-redeem-box: ô nhập mã quà. */
.tt-gift-card--redeem { align-items: stretch; background: var(--bg); text-align: left; padding: var(--space-12); border-radius: var(--radius-14); }
.tt-gift-card--redeem .tt-gift-card__name { display: flex; align-items: center; gap: var(--space-6); font-size: .9rem; }
.tt-gift-card__row { display: flex; gap: var(--space-8); }
.tt-gift-card__input { flex: 1; min-width: 0; }
/* .bb-gift-grid: lưới 2 cột. */
.tt-gift-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.tt-gift-card-grid__wide { grid-column: span 2; }

/* --- SavingsCard ----------------------------------------------------------
   .p-fin-box, .evc.loan, .ledger, hộp Gửi tiết kiệm Tà Tưa Bank (bankInpAmt, data-bank-term) — css/style.css, js/game.js */
.tt-savings-card {
  display: flex; flex-direction: column; gap: var(--space-8);
  background: var(--panel);
  border: 2px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-12);
  text-align: left;
}
.tt-savings-card__head { display: flex; align-items: center; gap: var(--space-8); }
.tt-savings-card__icon { font-size: 2rem; line-height: 1; }
.tt-savings-card__title { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.tt-savings-card__rate { font-size: .78rem; font-weight: 700; color: var(--soft); }
.tt-savings-card__balance { font-size: 2rem; font-weight: 800; line-height: 1; }
.tt-savings-card__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.tt-savings-card__fact { background: var(--bg); border-radius: var(--radius-10); padding: var(--space-6); text-align: center; box-shadow: var(--shadow-edge); }
.tt-savings-card__fact-label { display: block; font-size: .68rem; font-weight: 700; color: var(--soft); }
.tt-savings-card__fact-value { display: block; font-size: .92rem; font-weight: 800; }
.tt-savings-card__progress-text { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; }
.tt-savings-card__note { font-size: .75rem; line-height: 1.4; color: var(--soft); }
.tt-savings-card__actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-8); }
/* .evc.loan: khoản vay, nền mint. */
.tt-savings-card--loan { background: color-mix(in srgb, var(--mint) 14%, var(--panel)); border-color: var(--mint); }
.tt-savings-card--loan .tt-savings-card__fact { background: var(--panel); }

/* --- OnlineOrder ----------------------------------------------------------
   .online, .onl, .onl .ol, .onl .hd — css/style.css */
.tt-online-order {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--space-6); align-items: center;
  background: var(--panel);
  border: 2px solid var(--pink); border-radius: var(--radius-14);
  padding: var(--space-6) var(--space-8);
  text-align: left;
}
.tt-online-order__icon { width: 32px; height: 32px; object-fit: contain; }
.tt-online-order__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); }
.tt-online-order__app { font-size: .75rem; font-weight: 800; color: var(--pink); }
.tt-online-order__wait { font-size: .72rem; font-weight: 700; color: var(--soft); }
.tt-online-order__items { font-size: .85rem; font-weight: 700; line-height: 1.25; }
.tt-online-order__money { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); font-size: .78rem; font-weight: 600; color: var(--soft); }
.tt-online-order__net { font-size: .95rem; font-weight: 800; color: var(--ink); }
.tt-online-order__actions { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; gap: var(--space-6); }
.tt-online-order__state { font-size: .78rem; font-weight: 800; }

/* --- FriendRow ------------------------------------------------------------
   .bb-friends-list, .bb-friend-item/-face/-details/-name-row/-name/-vip-tag/-sub/-quote/-ops,
   .bb-sm-btn, .bb-fav-tag, .bb-trophy-badge — css/banbe.css */
.tt-friend-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10);
  background: var(--panel);
  border: 2px solid var(--line); border-radius: var(--radius-14);
  padding: var(--space-10) var(--space-12);
  text-align: left;
}
.tt-friend-row__rank {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: none;
  min-width: 28px; height: 28px; padding: 0 var(--space-4);
  background: var(--fill-muted); color: var(--soft);
  border-radius: var(--radius-pill);
  font-size: .85rem; font-weight: 800;
}
/* .bb-trophy-badge: hạng 1–3 có huy hiệu cúp, số hạng vẫn hiện bằng chữ. */
.tt-friend-row__rank--top {
  background: var(--fresh-3-bg); color: var(--fresh-3-ink);
  border: 1.5px solid var(--gold);
  padding: 0 var(--space-6) 0 var(--space-4);
}
.tt-friend-row__trophy { width: 16px; height: 16px; object-fit: contain; }
.tt-friend-row__avatar { width: 44px; height: 44px; }
.tt-friend-row__details { flex: 1; min-width: 140px; }
.tt-friend-row__name-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.tt-friend-row__name { font-size: .95rem; font-weight: 800; }
.tt-friend-row__sub { margin-top: 2px; font-size: .78rem; color: var(--soft); font-weight: 600; }
.tt-friend-row__stars { color: var(--gold); letter-spacing: 1px; }
.tt-friend-row__revenue { font-weight: 800; color: var(--ink); }
.tt-friend-row__favs { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.tt-friend-row__ops { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-left: auto; flex: none; }
.tt-friend-row.is-me { border-color: var(--pink); box-shadow: var(--shadow-ring-pink); }

/* ---- src/80-minigame.css ---- */
/* ==========================================================================
   Minigame dùng chung (Bầu Cua, Xì Dách): MinigameFrame, BetChips, MinigameWallet, MinigameResult
   ========================================================================== */

/* --- MinigameFrame (.baucua-card, .xidach-card / .xd-card-container — css/baucua.css, css/xidach.css) ----
   Khung thẻ chung của hai minigame (hai khối nguồn giống hệt nhau): nền panel, viền counter 3.5px, bo 22px,
   bóng modal, đệm 10/12/14, rộng tối đa 480px. Đặt cùng lớp riêng của game: class="tt-mgframe tt-xidach". */
.tt-mgframe {
  position: relative; display: flex; flex-direction: column; box-sizing: border-box;
  width: 100%; max-width: 480px; margin: 0 auto; padding: var(--space-10) var(--space-12) var(--space-14);
  background: var(--panel); color: var(--ink);
  border: 3.5px solid var(--counter); border-radius: 22px; box-shadow: var(--shadow-modal);
}

/* --- BetChips (.bc-chips-row, .bc-chip*, .xd-chips-section, .xd-chips-bar, .xd-chip* —
   css/baucua.css, css/xidach.css) -------------------------------------------- */
.tt-betchips {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--space-6);
}
/* Khung Xì Dách (.xd-chips-section): hộp viền line, nhãn đứng trên hàng chip. */
.tt-betchips--framed {
  padding: 5px var(--space-8);
  background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius-14);
}
.tt-betchips__label {
  flex: 0 0 100%; text-align: center;
  color: var(--ink); font-size: .74rem; font-weight: 800; letter-spacing: .3px;
}
.tt-betchip {
  --tt-chip-bg: var(--panel);
  --tt-chip-ink: var(--ink);
  --tt-chip-line: var(--line);
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; height: var(--tt-chip-h, 34px); padding: 0 var(--tt-chip-px, var(--space-10));
  background: var(--tt-chip-bg); color: var(--tt-chip-ink);
  border: 2px solid var(--tt-chip-line); border-radius: var(--tt-chip-r, 17px);
  font-size: var(--tt-chip-font, .8rem); font-weight: 800; white-space: nowrap; cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--outline) var(--tt-chip-depth, 12%), transparent);
  transition: transform .1s, box-shadow .1s;
}
.tt-betchip:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
/* Chip đang chọn: nhấc lên 2px và quấn vòng pink 3px cách chip 2px (không chỉ đổi sắc độ). */
.tt-betchip[aria-checked="true"] {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 5px var(--pink);
}
/* Chế độ màu cưỡng bức: box-shadow bị bỏ, dùng viền đậm để vẫn thấy chip đang chọn. */
@media (forced-colors: active) {
  .tt-betchip[aria-checked="true"] { border-width: 4px; }
}
.tt-betchip:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.tt-betchip--10k { --tt-chip-bg: var(--chip-10k-bg); --tt-chip-ink: var(--chip-10k-ink); --tt-chip-line: var(--chip-10k-line); }
.tt-betchip--50k { --tt-chip-bg: var(--chip-50k-bg); --tt-chip-ink: var(--chip-50k-ink); --tt-chip-line: var(--chip-50k-line); }
.tt-betchip--100k { --tt-chip-bg: var(--chip-100k-bg); --tt-chip-ink: var(--chip-100k-ink); --tt-chip-line: var(--chip-100k-line); }
.tt-betchip--500k { --tt-chip-bg: var(--chip-500k-bg); --tt-chip-ink: var(--chip-500k-ink); --tt-chip-line: var(--chip-500k-line); }
.tt-betchip--1m { --tt-chip-bg: var(--chip-1m-bg); --tt-chip-ink: var(--chip-1m-ink); --tt-chip-line: var(--chip-1m-line); }
/* Tất tay: rộng hơn, viền 3px, chữ lớn hơn để nổi giữa hàng chip. */
.tt-betchip--all {
  --tt-chip-bg: var(--chip-all-bg); --tt-chip-ink: var(--chip-all-ink); --tt-chip-line: var(--chip-all-line);
  min-width: var(--tt-chip-all-w, 68px); border-width: 3px; font-size: var(--tt-chip-all-font, .9rem); letter-spacing: .3px;
}
/* Cỡ gọn của Xì Dách (.xd-chip: cao 30px, chữ .76rem, bóng đậm hơn): đặt biến kế thừa, chip đọc lại. */
.tt-betchips--compact {
  --tt-chip-h: 30px; --tt-chip-px: var(--space-8); --tt-chip-r: 15px; --tt-chip-font: .76rem;
  --tt-chip-depth: 25%; --tt-chip-all-w: 60px; --tt-chip-all-font: .82rem;
}

/* --- MinigameWallet (.bc-header, .bc-title, .bc-close-btn, .bc-wallet-bar, .bc-money,
   .bc-bet-total, .xd-header, .xd-title, .xd-close-btn, .xd-wallet-bar, .xd-money —
   css/baucua.css, css/xidach.css) ------------------------------------------------ */
.tt-mgwallet { display: block; }
.tt-mgwallet__header {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-8);
  padding: 2px 0 6px; margin-bottom: var(--space-8);
  background: var(--panel); border-bottom: 2px dashed var(--line);
}
.tt-mgwallet__title {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8);
  margin: 0; color: var(--pink-d); font-size: 1.15rem; font-weight: 800;
}
.tt-mgwallet__sub { color: var(--soft); font-size: .75rem; font-weight: 600; }
.tt-mgwallet__close {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
  color: var(--warn); border: 2px solid var(--warn); border-radius: var(--radius-round);
  font-size: 1.25rem; font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--outline) 15%, transparent);
  transition: transform .15s, background .15s;
}
.tt-mgwallet__close:hover, .tt-mgwallet__close:active {
  background: var(--warn); color: var(--on-fill); transform: scale(1.08);
}
/* Thanh tiền két: nỉ xanh gradient tròn, viền vàng đồng, chữ vàng. */
.tt-mgwallet__bar {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-8);
  margin-bottom: var(--space-8); padding: 5px var(--space-10);
  background: radial-gradient(circle at 50% 35%, var(--felt-hi) 0%, var(--felt-mid) 70%, var(--felt-lo) 100%);
  color: var(--felt-ink); border: 2px solid var(--felt-line); border-radius: var(--radius-12);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--outline) 30%, transparent);
  font-size: .88rem; font-weight: 700;
}
.tt-mgwallet__money {
  color: var(--felt-money); font-size: 1.05rem; font-weight: 800;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--outline) 60%, transparent);
}
.tt-mgwallet__bet { color: var(--felt-bet); font-weight: 800; }
/* Cỡ rộng của Xì Dách (.xd-wallet-bar: bo 14px, đệm 6/14, chữ .92rem, số tiền 1.15rem). */
.tt-mgwallet--wide .tt-mgwallet__bar {
  margin-bottom: var(--space-12); padding: 6px var(--space-14);
  border-radius: var(--radius-14); font-size: .92rem;
}
.tt-mgwallet--wide .tt-mgwallet__money { font-size: 1.15rem; }

/* --- MinigameResult (.bc-result-banner, .bc-result-banner.win|lose|tie, .xd-result-banner —
   css/baucua.css, css/xidach.css) ------------------------------------------------- */
.tt-mgresult {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2) var(--space-8); margin-top: var(--space-8); padding: var(--space-8) var(--space-10);
  background: color-mix(in srgb, var(--street) 8%, var(--panel)); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--radius-12);
  text-align: center; font-size: .95rem; font-weight: 800; line-height: 1.3;
}
.tt-mgresult[hidden] { display: none; }
.tt-mgresult--win { background: color-mix(in srgb, var(--mint) 14%, var(--panel)); border-color: var(--mint); }
.tt-mgresult--lose { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: var(--warn); }
.tt-mgresult--tie { background: color-mix(in srgb, var(--gold) 22%, var(--panel)); border-color: var(--gold); }
.tt-mgresult__text { min-width: 0; }
.tt-mgresult__icon { flex: none; font-size: 1.1rem; line-height: 1; }
.tt-mgresult__label { font-weight: 800; }
.tt-mgresult__amount { font-size: 1.05rem; font-weight: 800; }
.tt-mgresult__detail { flex: 0 0 100%; color: var(--soft); font-size: .8rem; font-weight: 600; }
/* Cỡ gọn của Xì Dách (.xd-result-banner: viền 1.5px, chữ .84rem, cao tối thiểu 32px). */
.tt-mgresult--compact {
  min-height: 32px; margin-top: 0; padding: 6px var(--space-10);
  border-width: 1.5px; font-size: .84rem; font-weight: 700;
}

/* ---- src/81-baucua.css ---- */
/* ==========================================================================
   Bầu Cua: BauCuaBoard, DiceBowl (dùng thêm BetChips, MinigameWallet, MinigameResult ở 80-minigame)
   ========================================================================== */

/* --- BauCuaBoard (.bc-main-layout, .bc-board, .bc-tile*, .bc-sub-btn, .bc-actions-row —
   css/baucua.css) ------------------------------------------------------------------ */
/* Bố cục chính: bàn cược bên trái, đĩa xóc 125px bên phải. */
.tt-baucua {
  display: grid; grid-template-columns: 1fr 125px; gap: var(--space-8); align-items: center;
}
@media (max-width: 380px) {
  .tt-baucua { grid-template-columns: 1fr 110px; gap: var(--space-6); }
}
.tt-baucua__board {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  padding: var(--space-6);
  background: var(--bg); border: 2.5px solid var(--counter); border-radius: var(--radius-16);
  box-shadow: inset 0 2px 5px color-mix(in srgb, var(--outline) 6%, transparent);
}
.tt-baucua__cell { position: relative; display: flex; }
.tt-baucua__tile {
  flex: 1; min-width: 0; min-height: 62px; padding: 4px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--die-face); color: var(--stage-ink);
  border: 2px solid var(--tile-line); border-radius: var(--radius-12);
  cursor: pointer; user-select: none;
  transition: transform .1s, border-color .15s, box-shadow .15s;
}
.tt-baucua__tile:hover:not(:disabled, .is-hit) { transform: translateY(-2px); border-color: var(--pink); }
.tt-baucua__tile:active:not(:disabled) { transform: scale(.97); }
.tt-baucua__tile:disabled { opacity: .5; cursor: not-allowed; }
/* Ô trúng sau khi mở bát: vòng vàng dày, nền vàng nhạt, nhịp phóng nhẹ; kèm chữ ×1/×2/×3. */
.tt-baucua__tile.is-hit {
  background: var(--tile-win); border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold), 0 4px 12px color-mix(in srgb, var(--gold) 45%, transparent);
  animation: tt-baucua-win .6s infinite alternate;
}
@keyframes tt-baucua-win { from { transform: scale(1); } to { transform: scale(1.04); } }
.tt-baucua__img {
  width: 44px; height: 44px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--outline) 12%, transparent));
}
.tt-baucua__name { margin-top: 2px; font-size: .8rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.tt-baucua__count { margin-left: 2px; font-weight: 800; }
.tt-baucua__count[hidden] { display: none; }
/* Badge tiền đã cược ở góc trên phải ô (.bc-tile-badge). */
.tt-baucua__badge {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  padding: 1px var(--space-6); white-space: nowrap; pointer-events: none;
  background: var(--warn); color: var(--on-fill);
  border: 2px solid var(--on-fill); border-radius: var(--radius-10);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--outline) 15%, transparent);
  font-size: .72rem; font-weight: 800;
}
.tt-baucua__badge[hidden] { display: none; }
/* Nút bớt cược ở góc trên trái ô (kiểu .bc-sub-btn, thu nhỏ thành nút tròn). */
.tt-baucua__sub {
  position: absolute; top: -6px; left: -6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: var(--panel); color: var(--ink);
  border: 2px solid var(--counter); border-radius: var(--radius-round);
  font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer;
}
.tt-baucua__sub:hover { background: var(--bg); }
.tt-baucua__sub:disabled { opacity: .5; cursor: not-allowed; }
.tt-baucua__sub[hidden] { display: none; }
/* Hàng nút phụ Chọn lại / Nhân đôi (.bc-actions-row + .bc-sub-btn). */
.tt-baucua__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-10); }
.tt-baucua__action {
  padding: var(--space-6);
  background: var(--panel); color: var(--ink);
  border: 2px solid var(--counter); border-radius: var(--radius-12);
  font-size: .85rem; font-weight: 700; cursor: pointer;
}
.tt-baucua__action:hover:not(:disabled) { background: var(--bg); }
.tt-baucua__action:disabled { opacity: .5; cursor: not-allowed; }

/* --- DiceBowl (.bc-plate-wrap, .bc-plate, .bc-bowl, .bc-dice-box, .bc-die, .bc-roll-btn —
   css/baucua.css) ------------------------------------------------------------------ */
.tt-dicebowl { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.tt-dicebowl__plate {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 114px; height: 114px; border-radius: var(--radius-round);
  background: radial-gradient(circle, var(--plate-hi) 40%, var(--plate-mid) 70%, var(--plate-lo) 100%);
  border: 4px solid var(--plate-line);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--outline) 15%, transparent), inset 0 3px 6px color-mix(in srgb, var(--awning-white) 80%, transparent);
}
/* Bát úp (xocdia.png): nhấc lên và mờ đi khi mở; lắc khi đang xóc. Chuyển động .45s là của game, dài hơn mức .25s thường dùng. */
.tt-dicebowl__bowl {
  position: absolute; inset: -6px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .35s;
}
.tt-dicebowl__bowl-img {
  display: block; width: 122px; height: auto; max-height: 114px; object-fit: contain;
  filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--outline) 30%, transparent));
}
.tt-dicebowl.is-open .tt-dicebowl__bowl { transform: translateY(-120px) scale(.85); opacity: 0; pointer-events: none; }
.tt-dicebowl.is-shaking .tt-dicebowl__bowl { animation: tt-dicebowl-shake .12s infinite; }
@keyframes tt-dicebowl-shake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-4px, 3px) rotate(-4deg); }
  50% { transform: translate(3px, -3px) rotate(4deg); }
  75% { transform: translate(-3px, -2px) rotate(-2deg); }
  100% { transform: translate(3px, 2px) rotate(3deg); }
}
.tt-dicebowl__dice {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: center;
  width: 90px; height: 90px;
}
.tt-dicebowl__die {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 2px;
  background: var(--die-face); border: 2px solid var(--counter); border-radius: var(--radius-8);
  box-shadow: 0 3px 0 var(--tile-line);
}
.tt-dicebowl__face { display: block; width: 100%; height: 100%; object-fit: contain; }
.tt-dicebowl__status { margin-top: var(--space-6); color: var(--soft); font-size: .75rem; font-weight: 700; text-align: center; }
.tt-dicebowl__roll {
  display: flex; align-items: center; justify-content: center; gap: var(--space-6);
  width: 100%; margin-top: var(--space-8); padding: var(--space-10) var(--space-8);
  background: linear-gradient(135deg, var(--pink), color-mix(in srgb, var(--pink) 70%, var(--pink-d)));
  color: var(--on-pink); border: 3px solid var(--pink-d); border-radius: var(--radius-16);
  box-shadow: var(--shadow-press);
  font-size: 1.15rem; font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: transform .1s;
}
.tt-dicebowl__roll:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--shadow-press-down); }
.tt-dicebowl__roll:disabled { opacity: .5; cursor: not-allowed; }

/* ---- src/82-xidach.css ---- */
/* ==========================================================================
   82-xidach — PlayingCard, CardHand, XiDachSeat, XiDachTable (minigame Xì Dách Trân Châu)
   Dùng lại bằng markup: MinigameWallet / BetChips / MinigameResult (80-minigame), tt-button, tt-avatar.
   Nguồn: css/xidach.css (.xd-*), markup renderUI / renderCard trong js/xidach.js
   ========================================================================== */

/* --- PlayingCard (.xd-card, .xd-card-top, .xd-card-val, .xd-card-mini-suit, .xd-card-suit,
   .xd-card-bottom, .xd-card.face-down — css/xidach.css) ------------------------------- */
.tt-playcard {
  --tt-card-w: 36px; --tt-card-h: 52px; --tt-card-r: 6px;
  --tt-card-bg: var(--card-den-bg); --tt-card-ink: var(--card-den-ink); --tt-card-line: var(--card-den-line);
  --tt-card-val: .75rem; --tt-card-suit: .95rem; --tt-card-pip: .55rem;
  position: relative; display: flex; flex-direction: column; flex: none;
  box-sizing: border-box; width: var(--tt-card-w); height: var(--tt-card-h);
  padding: 3px var(--space-4);
  background: var(--tt-card-bg); color: var(--tt-card-ink);
  border: 1px solid var(--tt-card-line); border-radius: var(--tt-card-r);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--outline) 30%, transparent);
  font-size: .8rem; font-weight: 800; line-height: 1; user-select: none;
}
/* Bốn chất trân châu của game (SUITS): đen (mặc định), hoàng kim, trắng 3Q, dâu tây. Nhận biết bằng biểu tượng và tên đọc, không chỉ bằng màu. */
.tt-playcard--den { --tt-card-bg: var(--card-den-bg); --tt-card-ink: var(--card-den-ink); --tt-card-line: var(--card-den-line); }
.tt-playcard--vang { --tt-card-bg: var(--card-vang-bg); --tt-card-ink: var(--card-vang-ink); --tt-card-line: var(--card-vang-line); }
.tt-playcard--trang { --tt-card-bg: var(--card-trang-bg); --tt-card-ink: var(--card-trang-ink); --tt-card-line: var(--card-trang-line); }
.tt-playcard--dau { --tt-card-bg: var(--card-dau-bg); --tt-card-ink: var(--card-dau-ink); --tt-card-line: var(--card-dau-line); }
/* Cỡ lớn của nhà cái (.xd-dealer-cards-wrap .xd-card: 40×56, bo 7px). */
.tt-playcard--large { --tt-card-w: 40px; --tt-card-h: 56px; --tt-card-r: 7px; font-size: .85rem; }
/* Cỡ mini: bổ sung của design system để năm lá Ngũ linh vừa một ghế hẹp. */
.tt-playcard--mini {
  --tt-card-w: 28px; --tt-card-h: 40px; --tt-card-r: 5px;
  --tt-card-val: .6rem; --tt-card-suit: .75rem; --tt-card-pip: .45rem;
  padding: 2px 3px;
}
.tt-playcard__face { display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 0; }
.tt-playcard__top { display: flex; justify-content: space-between; align-items: center; line-height: 1; }
.tt-playcard__val { font-size: var(--tt-card-val); font-weight: 800; }
.tt-playcard__pip { font-size: var(--tt-card-pip); line-height: 1; }
.tt-playcard__suit {
  align-self: center; margin: 1px 0; font-size: var(--tt-card-suit); line-height: 1; 
}
.tt-playcard__bottom { display: flex; justify-content: flex-end; line-height: 1; transform: rotate(180deg); }
.tt-playcard__back { display: none; font-size: 1.1rem; line-height: 1; }
/* Lá úp (.xd-card.face-down): lưng nâu có ly trà sữa, mặt ẩn. */
.tt-playcard.is-down {
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cardback-hi) 0%, var(--cardback-lo) 100%);
  border: 1.5px solid var(--cardback-line);
}
.tt-playcard.is-down .tt-playcard__face { display: none; }
.tt-playcard.is-down .tt-playcard__back { display: block; }
.tt-playcard--mini.is-down .tt-playcard__back { font-size: .85rem; }

/* --- CardHand (.xd-cards-hand, .xd-dealer-cards-wrap, .xd-dealer-title, .xd-dealer-score-badge*,
   .xd-p-status — css/xidach.css) ----------------------------------------------------------- */
.tt-cardhand {
  --tt-hand-overlap: 12px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); min-width: 0;
}
.tt-cardhand--mini { --tt-hand-overlap: 9px; }
.tt-cardhand__cards {
  display: flex; justify-content: center; align-items: center;
  min-height: 58px; padding: 2px 0;
}
.tt-cardhand--mini .tt-cardhand__cards { min-height: 44px; }
/* Lá bài chồng lệch nhau (margin-left âm); rê chuột nhấc lá lên 4px. */
.tt-cardhand__slot {
  position: relative; display: flex;
  margin-left: calc(var(--tt-hand-overlap) * -1); transition: transform .15s;
}
.tt-cardhand__slot:first-child { margin-left: 0; }
.tt-cardhand__slot:hover { transform: translateY(-4px); z-index: 5; }
.tt-cardhand__empty { color: var(--soft); font-size: .85rem; }
.tt-cardhand__head { order: 2; display: flex; align-items: center; justify-content: center; gap: var(--space-8); max-width: 100%; }
.tt-cardhand__title { display: flex; align-items: center; gap: var(--space-6); color: var(--ink); font-size: .95rem; font-weight: 800; }
/* Nhãn kết quả: biểu tượng + chữ (điểm nằm trong chữ như game). Mỗi loại một tông, luôn có chữ riêng. */
.tt-cardhand__label {
  display: inline-flex; align-items: center; gap: var(--space-4); max-width: 100%;
  padding: 2px var(--space-6) 2px var(--space-8);
  background: var(--fill-muted); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-14);
  font-size: .78rem; font-weight: 800; line-height: 1.2; white-space: nowrap;
}
.tt-cardhand__label[hidden] { display: none; }
.tt-cardhand__icon { flex: none; line-height: 1; }
.tt-cardhand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tt-cardhand__label--xibang, .tt-cardhand__label--xidach, .tt-cardhand__label--ngulinh {
  background: color-mix(in srgb, var(--mint) 14%, var(--panel)); border-color: var(--mint);
}
.tt-cardhand__label--quac { background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: var(--warn); }
.tt-cardhand__label--non { background: color-mix(in srgb, var(--gold) 22%, var(--panel)); border-color: var(--gold); }
.tt-cardhand__label--dutuoi { background: color-mix(in srgb, var(--street) 8%, var(--panel)); border-color: var(--street); }
/* Tay bài nhà cái (.xd-dealer-head + .xd-dealer-cards-wrap): tiêu đề và nhãn cùng hàng, khay bài viền line. */
.tt-cardhand--dealer { align-items: stretch; gap: var(--space-8); }
.tt-cardhand--dealer .tt-cardhand__head { order: -1; justify-content: space-between; }
.tt-cardhand--dealer .tt-cardhand__label { padding: 2px var(--space-10); font-size: .85rem; }
.tt-cardhand--dealer .tt-cardhand__cards {
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-12); padding: 4px;
}

/* --- XiDachSeat (.xd-player-seat, .xd-p-info, .xd-p-avatar, .xd-p-name*, .xd-p-bet, .xd-p-status*,
   .xd-p-xet-btn — css/xidach.css) -------------------------------------------------------- */
.tt-xdseat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  min-width: 0; padding: 6px var(--space-4);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius-12);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.tt-xdseat.is-drawing {
  border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--panel));
  box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 40%, transparent);
}
.tt-xdseat.is-win { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, var(--panel)); }
.tt-xdseat.is-lose, .tt-xdseat.is-busted { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.tt-xdseat__info { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-width: 0; }
.tt-xdseat__who { display: flex; flex-direction: column; min-width: 0; overflow: hidden; line-height: 1.2; }
.tt-xdseat__name { overflow: hidden; color: var(--ink); font-size: .78rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.tt-xdseat__bet { color: var(--soft); font-size: .72rem; font-weight: 700; }
.tt-xdseat__status {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  min-height: 18px; margin: 0; padding: 2px var(--space-6);
  background: var(--fill-muted); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-10);
  font-size: .72rem; font-weight: 800; text-align: center;
}
.tt-xdseat__icon { flex: none; line-height: 1; }
.tt-xdseat__text { min-width: 0; }
.tt-xdseat.is-win .tt-xdseat__status { background: color-mix(in srgb, var(--mint) 14%, var(--panel)); border-color: var(--mint); }
.tt-xdseat.is-lose .tt-xdseat__status, .tt-xdseat.is-busted .tt-xdseat__status {
  background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: var(--warn);
}
.tt-xdseat.is-draw .tt-xdseat__status { background: var(--fill-muted); border-color: var(--line); }
/* Nút So điểm (.xd-p-xet-btn): dùng tt-button--small tt-button--accent; ẩn bằng thuộc tính hidden (luật nền ở 00-base.css). */
.tt-xdseat__xet { align-self: center; }

/* --- XiDachTable (.xidach-card / .xd-card-container, .xd-table, .xd-players-area, .xd-dealer-area,
   .xd-action-bar, .xd-btn*, .xd-rules-overlay, .xd-rules-list — css/xidach.css) -------------- */
/* Khung ngoài lấy từ tt-mgframe (dùng chung với Bầu Cua); ở đây chỉ giữ phần riêng của Xì Dách: làm gốc định vị cho bảng luật. */
.tt-xidach { position: relative; color: var(--ink); }
.tt-xidach__head-actions { display: flex; align-items: center; gap: var(--space-8); }
.tt-xidach__chips { margin: var(--space-4) 0; }
.tt-xidach__table { display: flex; flex-direction: column; gap: var(--space-10); }
.tt-xidach__players {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: var(--space-6);
  padding: var(--space-6); background: var(--bg); border: 2.5px solid var(--counter); border-radius: var(--radius-16);
}
.tt-xidach__empty {
  grid-column: 1 / -1; margin: 0; padding: 15px 0; color: var(--soft); font-size: .88rem; text-align: center;
}
.tt-xidach__dealer {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-8) var(--space-10); background: var(--bg);
  border: 2.5px solid var(--counter); border-radius: var(--radius-16);
}
.tt-xidach__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
/* Bảng luật (.xd-rules-overlay): phủ kín khung bàn, nằm trong luồng của khung nên z-index ≤ 10,
   đứng sau header dính (cũng 10) trong DOM nên nằm trên nó. */
.tt-xidach__rules {
  position: absolute; inset: 0; z-index: 10; box-sizing: border-box;
  display: flex; flex-direction: column; gap: var(--space-10);
  padding: var(--space-16); overflow-y: auto;
  background: var(--panel); color: var(--ink);
  border: 3.5px solid var(--counter); border-radius: 22px;
}
.tt-xidach__rules-title { margin: 0; color: var(--pink-d); font-size: 1.15rem; font-weight: 800; text-align: center; }
.tt-xidach__rules-list {
  display: flex; flex-direction: column; gap: var(--space-6);
  margin: 0; padding: 0; list-style: none; color: var(--soft); font-size: .85rem; line-height: 1.5;
}
.tt-xidach__rules-list strong { color: var(--ink); }
.tt-xidach__rules-close { align-self: center; margin-top: var(--space-10); }