/* ==========================================================================
 * TIỆM NÉT CỎ — Design system UI
 * Chữ dễ đọc: Be Vietnam Pro (nội dung, số) + Baloo 2 (tiêu đề, nút).
 * Màn hình bắt đầu dùng VT323 pixel; UI trong game giữ font dễ đọc và viền đậm.
 *
 * Bố cục:
 *  - Ngang (desktop): thanh HUD 1 hàng trên cùng · dock menu giữa đáy ·
 *    popup ngữ cảnh + panel neo bên phải · toast giữa trên · nhiệm vụ góc dưới trái.
 *  - Dọc (body.portrait): HUD 2 hàng · tab bar đáy · popup/panel = bottom sheet.
 * ========================================================================== */
:root {
  --ink: #2a1c1c;
  --ink-2: #5a4a3a;
  --muted: #7a6a5a;
  --paper: #fff8ea;
  --paper-2: #fdefd2;
  --card: #ffffff;
  --line: #e6d5b0;
  --bar: #271f30;
  --bar-2: #3b2e48;
  --bar-text: #f4eefc;
  --bar-muted: #c9b6e4;
  --green: #43a047;
  --green-d: #2e7d32;
  --orange: #ff8f1f;
  --red: #e53935;
  --blue: #1e88e5;
  --yellow: #ffcf33;
  --shadow: 0 4px 0 var(--ink);
  --shadow-sm: 0 2px 0 var(--ink);
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Baloo 2', 'Be Vietnam Pro', system-ui, sans-serif;
  --top-h: 58px;
  --dock-h: 90px;
  --dock-safe-bottom: env(safe-area-inset-bottom);
}
body.portrait {
  --top-h: calc(98px + env(safe-area-inset-top));
  --dock-h: calc(66px + var(--dock-safe-bottom));
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #1a1420; color: var(--ink);
  font-family: var(--font); font-size: 14px; line-height: 1.35;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
#game { position: fixed; inset: 0; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: grab; }
[hidden] { display: none !important; }
button { font-family: var(--font); cursor: pointer; color: inherit; touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid #56b8ff; outline-offset: 2px;
}
small { line-height: 1.3; }
.pxi { image-rendering: pixelated; vertical-align: middle; }
.num, .mono { font-variant-numeric: tabular-nums; font-weight: 800; }
.muted { color: var(--muted); font-size: 13px; padding: 3px 0; }
.muted .pxi, .hint .pxi, .pp-box .pxi, .cust-info .pxi, .satrow .pxi { height: 14px; vertical-align: -2px; }
.hint { font-size: 12.5px; color: #6b5a44; background: #fff3c9; border: 2px dashed #d9b86a; border-radius: 10px; padding: 6px 9px; margin: 6px 0; }
.pos { color: var(--green-d); }
.neg { color: var(--red); }
.center { text-align: center; }

/* ---------------- Nút ---------------- */
.btn {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  --edge: #2f8034; --lip: #276b2c;   /* viền + gờ 3D = tông đậm của chính màu nút */
  border: 1.5px solid var(--edge); border-radius: 12px;
  box-shadow: 0 3px 0 var(--lip), 0 4px 10px rgba(42, 28, 28, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  padding: 6px 12px; font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1.15; color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); background: var(--green);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.15s;
}
.btn small { font-family: var(--font); font-weight: 600; font-size: 11px; opacity: 0.95; text-shadow: none; margin-top: 1px; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(2px) scale(0.98); box-shadow: 0 1px 0 var(--lip), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn:disabled { filter: grayscale(0.8) brightness(0.92); cursor: not-allowed; }
.btn.cant { filter: grayscale(0.7) brightness(0.92); }
.btn.cant::after { content: '💸'; position: absolute; right: -8px; top: -10px; font-size: 13px; }
.btn-green { background: linear-gradient(#5cc261, #3d9a42); --edge: #2f8034; --lip: #276b2c; }
.btn-orange { background: linear-gradient(#ffa53d, #f07b12); --edge: #c7600a; --lip: #a94f06; }
.btn-red { background: linear-gradient(#ff5c57, #d63330); --edge: #ae2522; --lip: #8f1d1b; }
.btn-blue { background: linear-gradient(#45a5f5, #1c79cf); --edge: #1664ad; --lip: #115291; }
.btn-yellow { background: linear-gradient(#ffe066, #ffbf1a); color: var(--ink); text-shadow: none; --edge: #cf9800; --lip: #b07f00; }
.btn-gray { background: linear-gradient(#a8a8b3, #7c7c88); --edge: #62626e; --lip: #50505a; }
.btn.big { width: 100%; font-size: 17px; padding: 9px 12px; margin-top: 6px; }
.btn.small { font-size: 13px; padding: 4px 10px; }
.btn.tiny { font-size: 12px; padding: 2px 8px; border-width: 1.5px; box-shadow: 0 2px 0 var(--lip), inset 0 1px 0 rgba(255, 255, 255, 0.3); border-radius: 8px; }
.btn.on { outline: 2px solid var(--yellow); outline-offset: 1px; }
.btn-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }
.bi { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bi .pxi { flex: 0 0 auto; height: 14px; }
.link-btn { background: none; border: none; color: var(--muted); text-decoration: underline; font-size: 12px; }
.pulse { animation: pulse 0.9s infinite; }
@keyframes pulse { 50% { transform: scale(1.04); } }   /* chỉ transform: GPU ghép lớp, không vẽ lại mỗi khung */
/* Tiết kiệm pin (Perf) / giảm chuyển động: tắt các hoạt ảnh trang trí lặp vô hạn, giữ nguyên chuyển cảnh ngắn và mũi tên hướng dẫn. */
body.lowfx .pulse, body.lowfx #pause-banner, body.lowfx #quest-tracker.ready, body.lowfx .bb-btn .badge, body.lowfx .side-action .badge, body.lowfx .plan-btn.wanted, body.lowfx .expand-art .ex.next, body.lowfx .logo-main, body.lowfx .vip-banner .vb-crown, body.lowfx #prep-bar .btn,
body.lowfx .ttl, body.lowfx .ttl::before, body.lowfx .ttl::after, body.lowfx .fr-neon, body.lowfx .fr-rgb, body.lowfx .fr-rgb > img, body.lowfx .fr-dragon, body.lowfx .lb-trophy, body.lowfx .lb-pod.p1 .lb-crown .pxi, body.lowfx .bg-banner img, body.lowfx .bg-cell.r-legend::after, body.lowfx .bg-sheet.r-legend .bg-sheet-art, body.lowfx .sc-cell.win { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .pulse, #pause-banner, #quest-tracker.ready, .bb-btn .badge, .side-action .badge, .plan-btn.wanted, .expand-art .ex.next, .logo-main, .vip-banner .vb-crown, #prep-bar .btn { animation: none !important; } }

/* ==========================================================================
 * HUD — thanh trên (ngang: 1 hàng)
 * ========================================================================== */
#hud {
  position: fixed; top: 0; left: 0; right: 0; height: var(--top-h); z-index: 20;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: linear-gradient(var(--bar-2), var(--bar)); color: var(--bar-text);
  border-bottom: 3px solid var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.hud-time { display: flex; flex-direction: column; line-height: 1.1; padding-right: 4px; }
.hud-day { font-size: 11px; font-weight: 600; color: var(--bar-muted); white-space: nowrap; }
.hud-day b { color: #fff; font-weight: 800; }
.hud-clock { font-family: var(--display); font-size: 24px; line-height: 1; color: #ffe14d; }
.hud-shop { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; padding: 2px 12px; border-left: 1px solid rgba(255, 255, 255, 0.14); max-width: 220px; }
.hud-shop b { font-family: var(--display); font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-shop small { font-size: 10px; font-weight: 800; color: var(--yellow); letter-spacing: 0.8px; white-space: nowrap; }
.hud-money {
  position: relative; margin-left: auto; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; min-width: 160px; padding: 0 14px; font-size: 19px; color: var(--ink);
  background: linear-gradient(#fffbe8, #ffe9a8); border: 2px solid var(--ink); border-radius: 12px;
}
.hud-money { max-width: min(360px, 44vw); min-width: 0; }
.hud-money .ic { flex: 0 0 auto; }
#hud-money-v { display: block; flex: 0 1 auto; min-width: 0; white-space: nowrap; }
body.portrait #hud-money { max-width: none; }
.hud-money .ic .pxi { height: 20px; }
.hud-money.neg { color: var(--red); }
.hud-money.bump { animation: bump 0.25s; }
.hud-money.flash { animation: flash 0.5s; }
@keyframes bump { 50% { transform: scale(1.1); } }
@keyframes flash { 30%, 70% { background: #ffb3b3; transform: translateX(-3px); } 50% { transform: translateX(3px); } }
#save-dot { position: absolute; right: 5px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #7cb342; opacity: 0; }
#save-dot.blink { animation: savedot 1.2s; }
@keyframes savedot { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.money-delta { position:fixed;pointer-events:none;white-space:nowrap;transition:transform 100ms cubic-bezier(.2,.8,.2,1);font-variant-numeric:tabular-nums; }
.money-delta-number { display:block;font-family:var(--display);font-size:20px;font-weight:900;line-height:28px;letter-spacing:.2px;transform-origin:center;animation:money-hit 1.15s 100ms both;paint-order:stroke fill;-webkit-text-stroke:3px var(--ink);text-shadow:0 3px 0 var(--ink); }
.money-delta.pos { color:#b8f48a; }
.money-delta.neg { color:#ffb29e; }
@keyframes money-hit {
  0% { opacity:0;transform:translateY(8px) scale(.65); }
  10% { opacity:1;transform:translateY(0) scale(1.16); }
  22% { opacity:1;transform:translateY(-2px) scale(.97); }
  32%,55% { opacity:1;transform:translateY(-2px) scale(1); }
  100% { opacity:0;transform:translateY(-8px) scale(.88); }
}
@keyframes money-hit-quiet { 0%,70% { opacity:1; } 100% { opacity:0; } }
body.lowfx .money-delta { transition:none; }
body.lowfx .money-delta-number { animation:money-hit-quiet 1.25s both; }
@media (prefers-reduced-motion:reduce) {
  .money-delta { transition:none; }
  .money-delta-number { animation:money-hit-quiet 1.25s both; }
}
.hud-stat { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-size: 16px; }
.hud-stat .ic .pxi { height: 16px; }
.stars { color: #ffb300; font-size: 13px; letter-spacing: -1px; }
.stars .half { background: linear-gradient(90deg, #ffb300 50%, #6b5f78 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hud-status { margin-left: auto; display: flex; gap: 4px; }
.hud-status .st { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-size: 13px; font-weight: 700; color: #e2d8f0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud-status .st .pxi { height: 12px; }
.hud-status .st.bad { background: var(--red); color: #fff; }
.hud-status .st.off { background: #111; color: var(--yellow); }
.hud-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0; }
.hud-btn .pxi { height: 14px; }
.hud-btn:active { transform: scale(0.92); }
.speed-group { display: flex; background: #fff3cf; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.speed-group .hud-btn { width: 38px; height: 32px; }
.speed-group .hud-btn + .hud-btn { border-left: 1px solid #d8c9a8; }
.speed-group .hud-btn.on { background: var(--yellow); }
.hud-icon { width: 38px; height: 36px; background: linear-gradient(#fff8dc, #ffe9b0); border: 1.5px solid #d8b872; border-radius: 10px; box-shadow: 0 2px 0 #8a6a2e, inset 0 1px 0 #fff; }
.hud-icon .pxi { height: 17px; }
.hud-icon.off { opacity: 0.55; }
@media (max-width: 1180px) { body:not(.portrait) .stars { display: none; } body:not(.portrait) #btn-music { display: none; } }
@media (max-width: 980px) { body:not(.portrait) .hud-shop { display: none; } body:not(.portrait) .hud-status .st { padding: 0 5px; } }
@media (max-width: 820px) { body:not(.portrait) .hud-status { display: none; } body:not(.portrait) #btn-sound { display: none; } }

/* Sự kiện đang diễn ra */
.events { position: absolute; top: calc(100% + 7px); right: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; z-index: 19; pointer-events: none; max-width: min(46vw, calc(100vw - 140px)); }
.events .ev { display: flex; align-items: center; gap: 5px; background: var(--bar-2); color: #fff; border: 2px solid var(--ink); border-radius: 9px; padding: 2px 9px; font-size: 12px; font-weight: 700; box-shadow: var(--shadow-sm); pointer-events: auto; }
.events .ev .pxi { height: 12px; }
#pause-banner { position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%); z-index: 15; pointer-events: none; font-family: var(--display); font-weight: 800; font-size: 44px; color: #fff; letter-spacing: 2px; text-shadow: 0 4px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink); animation: pulse 1.4s infinite; }

/* Nhiệm vụ (góc dưới trái, gọn; rê chuột để xem chi tiết) */
#quest-tracker { position: fixed; left: 10px; bottom: calc(var(--dock-h) + 8px); z-index: 18; max-width: 300px; cursor: pointer; background: rgba(255, 248, 234, 0.96); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 5px 10px; font-size: 13px; }
#quest-tracker.ready { animation: glow 1s infinite; }
@keyframes glow { 50% { box-shadow: 0 2px 0 var(--ink), 0 0 18px 4px #ffd23a; } }
.qt-title { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 14px; white-space: nowrap; }
.qt-title .pxi { height: 13px; }
.qt-mini { margin-left: auto; font-size: 12px; font-weight: 800; background: var(--paper-2); border-radius: 6px; padding: 0 6px; font-family: var(--font); }
.qt-row { display: none; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: 12.5px; }
.qt-row b { font-variant-numeric: tabular-nums; }
.qt-row.done { color: var(--green-d); text-decoration: line-through; }
.qt-reward { display: none; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
#quest-tracker:hover .qt-row, #quest-tracker:hover .qt-reward { display: flex; }
.qt-claim { width: 100%; margin-top: 5px; font-size: 13px; padding: 3px 8px; }
body.coaching #quest-tracker, body.building #quest-tracker, body.sheet-open #quest-tracker, body.panel-open #quest-tracker { display: none; }

/* Toast (giữa, dưới thanh trên) */
#toasts { position: fixed; top: calc(var(--top-h) + 8px); left: 50%; transform: translateX(-50%); width: min(400px, calc(100vw - 24px)); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 110; pointer-events: none; }
.toast { max-width: 100%; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm); padding: 6px 12px; font-size: 13px; font-weight: 600; line-height: 1.3; animation: tin 0.25s; pointer-events: auto; }
.toast.clickable { cursor: pointer; }
.toast.clickable::after { content: ' ›'; font-weight: 800; }
.toast.t-good { background: #dcf5d0; }
.toast.t-bad { background: #ffd6d4; }
.toast.t-warn { background: #fff0b3; }
.toast.t-event { background: #d9e8ff; }
.toast.out { opacity: 0; transform: translateY(-10px); transition: 0.35s; }
@keyframes tin { from { transform: translateY(-12px); opacity: 0; } }
.achv { position: fixed; top: calc(var(--top-h) + 56px); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; gap: 12px; align-items: center; width: max-content; max-width: calc(100vw - 24px); background: linear-gradient(#3b2f6a, #1f1840); color: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink), 0 0 30px #ffd23a88; padding: 10px 16px; animation: achin 0.5s cubic-bezier(.2, 1.6, .5, 1); }
.achv small { display: block; color: var(--yellow); font-weight: 800; font-size: 11px; letter-spacing: 1px; }
.achv b { display: block; font-family: var(--display); font-size: 18px; }
.achv span { font-size: 12.5px; opacity: 0.85; }
.achv.out { opacity: 0; transition: 0.5s; }
@keyframes achin { from { transform: translate(-50%, -30px) scale(0.6); opacity: 0; } }

/* ==========================================================================
 * Dock menu dưới
 * ========================================================================== */
#bottom-bar { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 8px; padding: 6px; background: rgba(39, 31, 48, 0.9); border: 1.5px solid #4a3b58; border-radius: 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.bb-btn { position: relative; width: 86px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: linear-gradient(#fffaf0, #ffe7b8); border: 1.5px solid #cfa862; border-radius: 12px; box-shadow: 0 3px 0 #a87d3c, inset 0 1px 0 #fff; font-family: var(--display); font-weight: 800; font-size: 12px; color: var(--ink); transition: transform 0.08s; }
.bb-btn .pxi { height: 21px; }
.bb-btn:hover { transform: translateY(-2px); }
.bb-btn:active { transform: translateY(2px) scale(0.96); box-shadow: 0 1px 0 #a87d3c; }
.bb-btn.on { background: linear-gradient(#ffe066, #ffbf1a); border-color: #cf9800; box-shadow: 0 3px 0 #a87800, inset 0 1px 0 #fff6c2; }
.bb-btn .badge { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-style: normal; font-weight: 800; font-size: 13px; border: 1.5px solid #fff3d6; border-radius: 50%; box-shadow: 0 1px 3px rgba(122, 20, 20, 0.5); animation: pulse 0.8s infinite; }
.upgrade-ready-dot { position: absolute; top: 2px; right: 3px; width: 11px; height: 11px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #e53935; box-shadow: 0 1px 3px rgba(122, 20, 20, .5); pointer-events: none; }
.bb-btn .upgrade-ready-dot { top: -5px; right: auto; left: -5px; width: 13px; height: 13px; border-color: #fff3d6; }

/* Tác vụ phụ: tách khỏi dock để nhóm quản lý chính thoáng hơn. */
#side-actions { position: fixed; z-index: 19; }
.side-action { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; background: linear-gradient(#fffaf0, #ffe7b8); border: 1.5px solid #cfa862; border-radius: 12px; box-shadow: 0 3px 0 #a87d3c, inset 0 1px 0 #fff; color: var(--ink); transition: transform 0.08s, filter 0.15s; }
.side-action .pxi { width: 21px; height: 21px; }
.side-action:hover { transform: translateY(-1px); filter: brightness(1.04); }
.side-action:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 #a87d3c; }
.side-action.on { background: linear-gradient(#ffe066, #ffbf1a); border-color: #cf9800; box-shadow: 0 3px 0 #a87800, inset 0 1px 0 #fff6c2; }
.side-action.soon { background: linear-gradient(#eee8dc, #d7cdbb); border-color: #9e917c; box-shadow: 0 3px 0 #726755, inset 0 1px 0 #fff; color: #594f43; }
.side-action .badge { position: absolute; top: -7px; right: -6px; min-width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; background: var(--red); color: #fff; font-style: normal; font-weight: 800; font-size: 12px; border: 1.5px solid #fff3d6; border-radius: 50%; box-shadow: 0 1px 3px rgba(122, 20, 20, 0.5); animation: pulse 0.8s infinite; }

/* Nút về giữa quán */
#zoom-ctrl { position: fixed; z-index: 19; }
#zoom-ctrl .hud-btn { background: linear-gradient(#fffaf0, #ffe7b8); border: 1.5px solid #cfa862; border-radius: 12px; box-shadow: 0 3px 0 #a87d3c, inset 0 1px 0 #fff; }
#zoom-ctrl .pxi { height: 18px; }

/* Thanh xây dựng */
#build-bar { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(1100px, calc(100vw - 20px)); z-index: 20; background: rgba(255, 248, 234, 0.97); border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); padding: 7px 9px; }
.bbar-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bbar-title { display: flex; align-items: center; gap: 6px; margin-right: auto; font-family: var(--display); font-weight: 800; font-size: 15px; }
.bbar-items { display: flex; gap: 7px; overflow-x: auto; padding: 7px 2px 5px; }
.bitem { flex: 0 0 auto; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px; background: #fff; border: 1.5px solid #d4ba88; border-radius: 12px; box-shadow: 0 2px 0 #c6a771; font-size: 11.5px; font-weight: 700; line-height: 1.15; text-align: center; }
.bitem > img { height: 44px; image-rendering: pixelated; }
.bitem b { font-size: 13px; color: var(--green-d); font-variant-numeric: tabular-nums; }
.bitem.on { background: #fff0a8; outline: 3px solid var(--orange); }
.bitem.cant b { color: var(--red); }
.bitem:active { transform: scale(0.95); }
.bbar-hint { font-size: 12px; color: var(--muted); text-align: center; }

/* ==========================================================================
 * Popup ngữ cảnh (ngang: neo phải · dọc: bottom sheet)
 * ========================================================================== */
#popup {
  position: fixed; top: calc(var(--top-h) + 10px); right: 10px; width: 350px; z-index: 30;
  max-height: calc(100vh - var(--top-h) - var(--dock-h) - 26px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 0 5px 0 var(--ink), 0 10px 30px rgba(0, 0, 0, 0.35); padding: 10px 12px 12px; font-size: 13.5px;
}
#popup.pop-in { animation: slidein 0.2s cubic-bezier(.2, 1.3, .5, 1); }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.pp-head { display: flex; align-items: center; gap: 8px; }
.pp-title { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.1; }
.pp-title .pxi { height: 20px; vertical-align: -3px; }
.pp-av { width: 42px; image-rendering: pixelated; background: #ffe7b8; border: 2px solid var(--ink); border-radius: 10px; }
.pp-sub { font-size: 12.5px; color: var(--muted); }
.pp-x { margin-left: auto; flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid #cdb48a; border-radius: 9px; box-shadow: 0 2px 0 #b89a6a; }
.pp-x .pxi { height: 12px; }
.pp-x:active { transform: scale(0.9); }
.tag { color: #fff; border: 2px solid var(--ink); border-radius: 7px; padding: 0 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.3px; white-space: nowrap; }
.pp-tabs, .panel-tabs { display: flex; gap: 5px; }
.pp-tabs { margin: 8px 0 2px; overflow-x:auto; }
.pp-tabs button, .panel-tabs button { flex: 1; padding: 5px 4px; background: var(--paper-2); border: 1.5px solid #d4ba88; border-radius: 9px; box-shadow: 0 2px 0 #c6a771; font-family: var(--display); font-weight: 800; font-size: 13px; }
.panel-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.panel-tabs button, .panel-primary button, .promotion-ready-cta { position: relative; }
.panel-tab-alert { min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--red); color: #fff; border: 1.5px solid #fff4d0; box-shadow: 0 2px 0 #9f231e; font: 800 11px/1 var(--font); font-style: normal; }
.pp-tabs button.on, .panel-tabs button.on { background: var(--yellow); border-color: #cf9800; box-shadow: 0 2px 0 #b07f00; }
.pp-tabs .pxi { height: 13px; }
.pp-box { background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 7px 9px; margin-top: 8px; }
.pp-box.warn { background: #fff3c9; }
.pp-box.need { background: #e6f4ff; }
.pp-box.fault { background: #ffe3e0; }
.pp-box.order { background: #fff1e0; }
.fault-title { font-weight: 800; color: var(--red); }
.order-row { display: flex; gap: 10px; align-items: center; }
.order-row > div { min-width: 0; }
.order-row small { display: block; color: var(--ink-2); }
.patience { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 4px; }
.pp-box.session { background: #122219; color: #9dff9d; border-color: #0c140f; box-shadow: inset 0 0 12px #000; padding: 6px 10px; }
.sess-grid { display: grid; grid-template-columns: 1.25fr 0.8fr 1fr; gap: 6px; }
.sess-grid small { display: block; font-size: 10.5px; font-weight: 600; color: #6fd46f; }
.sess-grid small .pxi { height: 9px; vertical-align: 0; }
.sess-grid b { display: block; font-size: 16px; color: #e0ffe0; font-variant-numeric: tabular-nums; font-weight: 800; }
.sess-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; font-size: 12px; }
.sess-items span { background: rgba(157, 255, 157, 0.14); border-radius: 6px; padding: 1px 6px; }
.sess-items .pxi { height: 12px; }
.cust-mini { display: flex; gap: 9px; align-items: center; margin-top: 8px; padding: 4px 9px; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; }
.cust-mini > img { width: 28px; image-rendering: pixelated; }
.cust-mini small { color: var(--muted); }
.satrow { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.cust-info { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 13px; }
.qtag { display: inline-block; background: var(--yellow); border: 2px solid var(--ink); border-radius: 7px; padding: 0 6px; font-size: 11px; font-weight: 800; color: var(--ink); }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.plan-btn { background: linear-gradient(#5cc261, #3d9a42); --edge: #2f8034; --lip: #276b2c; font-size: 13.5px; padding: 7px 6px; }
.plan-btn.wanted { background: linear-gradient(#ffa53d, #f07b12); --edge: #c7600a; --lip: #a94f06; animation: pulse 1.2s infinite; }
.plan-btn .pxi { height: 13px; }
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 9px; }
.stats4 .sb { display: flex; flex-direction: column; gap: 3px; }
.stats4 .sb small { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-weight: 600; }
.stats4 .sb small b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bar { flex: 1; height: 8px; background: #e0d2b4; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(#7ed957, #43a047); transition: width 0.25s; }
.bar i.mid { background: linear-gradient(#ffd54f, #ffb300); }
.bar i.low { background: linear-gradient(#ff8a80, #e53935); }
.btn-row.second .btn { flex: 1; }
/* Footer dính đáy: nút hành động chính luôn nhìn thấy */
.pp-foot { position: sticky; bottom: -12px; z-index: 2; margin: 10px -12px -12px; padding: 9px 12px 12px; background: var(--paper); border-top: 2px dashed var(--line); box-shadow: 0 -10px 12px -10px rgba(0, 0, 0, 0.3); }
.pp-foot .btn.big { margin-top: 0; }
.bill { margin-top: 8px; padding: 7px 9px; background: #fffdf5; border: 2px dashed #b89e6a; border-radius: 10px; font-size: 13.5px; }
.bill-title { font-family: var(--display); font-weight: 800; font-size: 15px; text-align: center; letter-spacing: 1px; }
.bill .pxi { height: 12px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row b { font-variant-numeric: tabular-nums; }
.row.total { margin-top: 3px; padding-top: 3px; border-top: 1px dashed currentColor; font-weight: 800; }
.spec { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12.5px; }
.spec td { padding: 3px 4px; border-bottom: 1px dashed var(--line); }
.spec td:first-child { width: 84px; color: var(--muted); }
.upg { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 2px dashed var(--line); }
.upg .pxi { height: 13px; }
.upg small { display: block; color: var(--ink-2); font-size: 11.5px; }
.upg.max { opacity: 0.6; }
.soft-title { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: 0.8px; color: var(--ink-2); }
.soft-title .pxi { height: 13px; }
.stock-list { display: flex; flex-direction: column; gap: 4px; }
.stock-row { display: grid; grid-template-columns: 22px 1fr 30px auto auto; gap: 6px; align-items: center; font-size: 13px; }
.stock-row b { text-align: right; font-variant-numeric: tabular-nums; }
.stock-row small { color: var(--muted); font-size: 10.5px; }
.stock-row.low b { color: var(--red); }
.toggle { display: flex; gap: 7px; align-items: center; margin-top: 9px; font-size: 13px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--green); }

/* ==========================================================================
 * Panel menu (ngang: neo phải · dọc: bottom sheet cao)
 * ========================================================================== */
#panel {
  position: fixed; top: calc(var(--top-h) + 10px); right: 10px; bottom: calc(var(--dock-h) + 10px); z-index: 25;
  width: min(460px, calc(100vw - 20px)); display: flex; flex-direction: column;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 0 5px 0 var(--ink), 0 10px 40px rgba(0, 0, 0, 0.4);
}
#panel.slide-in { animation: slidein 0.22s cubic-bezier(.2, 1.3, .5, 1); }
.panel-head { display: flex; align-items: center; padding: 7px 12px; background: linear-gradient(#ffe066, #ffbf1a); border-bottom: 3px solid var(--ink); border-radius: 15px 15px 0 0; }
.panel-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: 0.5px; }
.panel-profile-btn { margin-left: auto; min-height: 34px; padding: 4px 10px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #936515; border-radius: 10px; background: #fff8dc; color: var(--ink); box-shadow: 0 2px 0 #a9751a; font: 800 11px var(--display); cursor: pointer; }
.panel-profile-btn .bi { gap: 5px; } .panel-profile-btn .pxi { height: 15px; }
.panel-profile-btn:not([hidden]) + .pp-x { margin-left: 8px; }   /* nút hồ sơ ẩn thì X vẫn dạt phải */
.panel-tabs { padding: 8px 10px 0; overflow-x:auto; }
.panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 14px; font-size: 13.5px; }
.sign-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.sign-head .sign-img { flex: 1 1 100%; min-width: 0; }
.sign-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.sign-actions .btn { flex: 1; min-height: 44px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.card { background: var(--card); border: 2px solid var(--ink); border-radius: 11px; box-shadow: var(--shadow-sm); padding: 5px 7px; }
.card small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; line-height: 1.2; }
.card b { font-size: 15px; font-variant-numeric: tabular-nums; }
.card em { display: block; font-size: 10px; font-style: normal; color: var(--red); }
.card.bad { background: #ffe0dd; }
.chart { display: flex; gap: 6px; align-items: flex-end; height: 120px; padding: 18px 8px 4px; background: var(--card); border: 2px solid var(--ink); border-radius: 11px; }
.chart.small { height: 92px; margin: 8px 0; }
.chart .col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.chart .col i { width: 70%; background: linear-gradient(#7ed957, #43a047); border: 2px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; animation: grow 0.5s; transform-origin: bottom; }
.chart .col i.neg { background: linear-gradient(#ff8a80, #e53935); }
.chart .col em { font-style: normal; font-size: 10px; font-weight: 700; }
.chart .col small { font-size: 10.5px; color: var(--muted); }
@keyframes grow { from { transform: scaleY(0); } }
.envs { display: flex; flex-direction: column; gap: 5px; }
.envs > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 4px 9px; background: var(--card); border: 2px solid var(--ink); border-radius: 10px; }
.envs > div small { width: 100%; font-size: 11px; color: var(--muted); }
.envs > div.bad { background: #ffe0dd; }
.envs .pxi { height: 13px; }
.stage-req { display: flex; flex-wrap: wrap; gap: 5px; }
.stage-req span { padding: 2px 9px; background: var(--card); border: 2px solid var(--ink); border-radius: 9px; font-size: 12.5px; }
.stage-req span.ok { background: #dcf5d0; }
.soft { overflow: hidden; background: #122219; color: #9dff9d; border: 3px solid var(--ink); border-radius: 12px; font-size: 13px; }
.soft-bar { padding: 3px 10px; background: #1f5f3a; color: #fff; font-weight: 700; }
.soft-list { display: flex; flex-direction: column; gap: 3px; padding: 5px 7px; }
.soft-row { display: flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px dashed #2c4d38; }
.soft-row .num { width: 22px; color: #ffe14d; }
.soft-row .dot { flex: 0 0 auto; width: 10px; height: 10px; border: 1px solid #000; border-radius: 50%; }
.soft-row .inf { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mem-list { display: flex; flex-direction: column; gap: 4px; }
.mem { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; padding: 4px 9px; background: var(--card); border: 2px solid var(--ink); border-radius: 11px; }
.mem > img { width: 26px; image-rendering: pixelated; }
.mem small { display: block; font-size: 11px; color: var(--muted); }
.mem .r { margin-left: auto; text-align: right; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 11px; color: var(--muted); }
.tbl td { padding: 4px 2px; border-bottom: 1px dashed var(--line); }
.tbl tr.locked { opacity: 0.55; }
.shop-grid, .upg-list, .staff-list { display: flex; flex-direction: column; gap: 9px; }
.shop-card, .upg-card, .staff-card { display: flex; align-items: center; gap: 10px; padding: 7px 9px; background: var(--card); border: 2px solid var(--ink); border-radius: 13px; box-shadow: 0 3px 0 var(--ink); }
.shop-card > img { flex: 0 0 auto; width: 52px; image-rendering: pixelated; }
.shop-card.locked { opacity: 0.6; }
.sc-body, .uc-body, .st-body { flex: 1; min-width: 0; }
.sc-body b, .uc-body b, .st-body b { font-family: var(--display); font-size: 15px; }
.sc-body small, .uc-body small, .st-body small { display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.3; }
.sc-body .roi { color: var(--green-d); font-weight: 700; }
.uc-body small.next { color: var(--green-d); }
.upg-card > .pxi { height: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.chips span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; background: var(--paper-2); border-radius: 6px; font-size: 11px; font-weight: 700; }
.chips span .pxi { height: 10px; }
.chips span.bad { background: #ffcdd2; }
.pips { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; }
.pips i { width: 14px; height: 7px; background: #e0d2b4; border: 1px solid var(--ink); border-radius: 2px; }
.pips i.on { background: var(--orange); }
.maxed { font-weight: 800; color: var(--green-d); font-size: 12px; }
.expand-art { display: flex; gap: 5px; margin-bottom: 9px; }
.floor-build-card { margin-top: 12px; display: grid; gap: 9px; }
.floor-build-card p { margin: 0; line-height: 1.45; }
.floor-built-list { display: flex; flex-wrap: wrap; gap: 6px; }
.floor-built-list span { padding: 5px 8px; border: 1px solid #8ab77b; border-radius: 8px; background: #e5f5de; font-size: 12px; font-weight: 700; }
.floor-building { padding: 9px; border-radius: 9px; background: #fff0ba; font-weight: 700; }
.floor-overview-list { display: grid; gap: 7px; margin: 8px 0 14px; }
.floor-overview-list button { display: grid; grid-template-columns: 1fr auto; gap: 2px 9px; align-items: center; padding: 9px 11px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.floor-overview-list button.on { background: #fff0ba; }
.floor-overview-list button b { font-family: var(--display); }
.floor-overview-list button span { grid-column: 1; font-size: 12px; }
.floor-overview-list button em { grid-column: 2; grid-row: 1 / 3; font-size: 11px; font-style: normal; font-weight: 800; }
#floor-nav { position: fixed; z-index: 22; top: calc(var(--top-h) + 8px); left: 10px; }
#floor-nav[hidden] { display: none; }
.floor-nav-building { display: block; padding: 9px; border-radius: 8px; background: #fff0ba; font-size: 11px; font-weight: 800; }
#floor-nav button { min-height: 34px; border: 2px solid var(--ink); border-radius: 7px; background: #fff8ea; color: var(--ink); font: 700 12px var(--font); cursor: pointer; white-space: nowrap; }
#floor-nav .floor-toggle { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 7px; box-shadow: 0 2px 0 var(--ink); }
.floor-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.floor-list { position: absolute; top: calc(100% + 7px); left: 0; width: 180px; max-width: calc(100vw - 20px); display: grid; gap: 5px; padding: 6px; border: 2px solid var(--ink); border-radius: 10px; background: #fff8ea; box-shadow: 0 4px 0 var(--ink); }
.floor-list[hidden] { display: none; }
#floor-nav .floor-list button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; border-width: 1px; text-align: left; }
#floor-nav button.on { background: #ffcf33; }
#floor-nav button:focus-visible { outline: 3px solid #6748d7; outline-offset: 2px; }
#floor-nav button small { font-size: 10px; font-weight: 600; }
@media (max-width: 600px) { #floor-nav { left: 8px; } }
@media (pointer: coarse) { #floor-nav button { min-height: 44px; } }
.expand-art .ex { flex: 1; padding: 10px 4px; background: #e0d2b4; border: 2px solid var(--ink); border-radius: 10px; text-align: center; font-size: 12px; font-weight: 800; }
.expand-art .ex.own { background: #dcf5d0; }
.expand-art .ex.next { background: #fff0a8; animation: pulse 1.2s infinite; }
.expand-card { padding: 10px 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 13px; }
.staff-card { align-items: flex-start; }
.staff-card > img { width: 40px; image-rendering: pixelated; }
.st-rec { margin-top: 5px; padding: 5px 8px; background: var(--paper-2); border-radius: 9px; }
.st-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12.5px; }
.st-name .pxi { height: 12px; }
.st-name .lv { color: #ff9f1a; letter-spacing: -1px; }
.st-name small { margin-left: auto; color: var(--muted); }
.st-btns { display: flex; gap: 6px; margin-top: 5px; }
.st-btns .btn { flex: 1; }
.quest-main { padding: 10px 12px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 13px; box-shadow: 0 3px 0 var(--ink); }
.quest-main small { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 1px; }
.quest-main h3 { margin: 0 0 6px; font-family: var(--display); font-size: 20px; }
.qobj { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 5px 0; }
.qobj .bar { grid-column: 1 / 3; }
.qobj b { font-variant-numeric: tabular-nums; }
.qobj.done span { color: var(--green-d); }
.reward { margin-top: 6px; }
.qnext { display: flex; align-items: center; gap: 6px; margin: 4px 0; padding: 4px 9px; background: var(--paper-2); border-radius: 9px; font-size: 13px; }
.qnext small { margin-left: auto; color: var(--muted); }
.achv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.ach { padding: 7px; text-align: center; background: #ece2cd; border: 2px solid var(--ink); border-radius: 11px; opacity: 0.6; filter: grayscale(1); }
.ach.got { opacity: 1; filter: none; background: linear-gradient(#fff6c2, #ffe07a); }
.ach b { display: block; font-family: var(--display); font-size: 13px; }
.ach small { display: block; font-size: 11px; color: var(--ink-2); }

/* ==========================================================================
 * Modal
 * ========================================================================== */
#modal-layer { position: fixed; inset: 0; z-index: 100; }
.modal-wrap { isolation:isolate; } /* Each dialog's internal sheets stay below the next dialog. */
.modal-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(20, 12, 20, 0.55); animation: fadein 0.2s; }
.modal-wrap.nonblock { background: transparent; pointer-events: none; }
.modal-wrap.nonblock .modal { pointer-events: auto; }
.modal-wrap.out { opacity: 0; transition: opacity 0.18s; }
@keyframes fadein { from { opacity: 0; } }
.modal { width: min(460px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; padding: 14px 18px 16px; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink), 0 20px 50px rgba(0, 0, 0, 0.5); animation: popin 0.25s cubic-bezier(.2, 1.5, .5, 1); }

/* Desktop: thanh cuộn phải nhìn thấy và đủ rộng để kéo bằng chuột. */
@media (pointer: fine) {
  :where(#popup, .panel-body, .modal, .bbar-items, .pp-tabs, .panel-tabs,
    .ki-tabs, .ki-body, .enav, .ebody, .sp-stages, .bm-cats, .bm-filters,
    .bm-results, .bm-detailcol, .bm-sell, .bm-sheet, .bm-picklist,
    .sc-list-scroll, .sc-timeline, .sc-sheet, .sc-stage-scroll, .sx-list,
    .sc-et-tabs, .sc-et-grid, .online-ranks) {
    scrollbar-width: auto;
    scrollbar-color: #9a7b4c rgba(51, 39, 58, .14);
  }
  :where(#popup, .panel-body, .modal, .bbar-items, .pp-tabs, .panel-tabs,
    .ki-tabs, .ki-body, .enav, .ebody, .sp-stages, .bm-cats, .bm-filters,
    .bm-results, .bm-detailcol, .bm-sell, .bm-sheet, .bm-picklist,
    .sc-list-scroll, .sc-timeline, .sc-sheet, .sc-stage-scroll, .sx-list,
    .sc-et-tabs, .sc-et-grid, .online-ranks)::-webkit-scrollbar { width: 10px; height: 10px; }
  :where(#popup, .panel-body, .modal, .bbar-items, .pp-tabs, .panel-tabs,
    .ki-tabs, .ki-body, .enav, .ebody, .sp-stages, .bm-cats, .bm-filters,
    .bm-results, .bm-detailcol, .bm-sell, .bm-sheet, .bm-picklist,
    .sc-list-scroll, .sc-timeline, .sc-sheet, .sc-stage-scroll, .sx-list,
    .sc-et-tabs, .sc-et-grid, .online-ranks)::-webkit-scrollbar-thumb {
    background: #9a7b4c; border: 2px solid transparent; border-radius: 999px; background-clip: padding-box;
  }
  .mouse-dragging { cursor: grabbing !important; scroll-behavior: auto !important; }
  .mouse-dragging * { pointer-events: none; }
  :is(.bbar-items, .pp-tabs, .panel-tabs, .ki-tabs, .enav, .sp-stages, .bm-cats, .online-tabs, .sc-tabs, .sc-et-tabs) {
    cursor: grab; overscroll-behavior-inline: contain;
  }
  body .sp-stages, body .bm-cats, body .sc-et-tabs { scrollbar-width:auto; }
}
@keyframes popin { from { transform: scale(0.85); opacity: 0; } }
.modal h2 { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 24px; text-align: center; }
.modal h2 .pxi { height: 24px; }
.modal p { margin: 6px 0; }
.modal.report { width: min(560px, 100%); }
.modal.report .sign-img { margin: 0 0 10px; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rep-col { padding: 7px 11px; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; }
.rep-col h3 { margin: 0 0 5px; font-family: var(--display); font-size: 15px; letter-spacing: 1px; }
.rrow { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; }
.rrow b { font-variant-numeric: tabular-nums; }
.rrow.sum { margin-top: 4px; padding-top: 3px; border-top: 2px dashed #b89e6a; font-weight: 800; }
.rep-profit { margin: 12px 0 6px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 22px; }
.rep-profit b { font-variant-numeric: tabular-nums; }
.rep-profit.pos b { color: var(--green-d); }
.rep-profit.neg b { color: var(--red); }
.rep-stats { display: flex; gap: 6px; text-align: center; }
.rep-stats > div { flex: 1; padding: 4px 8px; background: var(--card); border: 2px solid var(--ink); border-radius: 11px; }
.rep-stats small { display: block; font-size: 11px; color: var(--muted); }
.rep-stats b { font-size: 17px; font-variant-numeric: tabular-nums; }
.rep-stats b.stars { font-size: 15px; }
.rep-stats em { display: block; font-size: 11px; font-style: normal; color: var(--muted); }
.rep-money { text-align: center; font-size: 14px; }
.debt-head { display: flex; gap: 12px; align-items: center; }
.debt-head > img { width: 56px; image-rendering: pixelated; background: #ffe7b8; border: 2px solid var(--ink); border-radius: 12px; }
.debt-auto { display: flex; align-items: flex-start; gap: 10px; padding: 12px; margin: 12px 0; border: 1px solid #d4b98e; border-radius: 10px; background: #fff3d8; cursor: pointer; }
.debt-auto input { flex: none; width: 20px; height: 20px; margin: 2px 0; accent-color: #318b42; }
.debt-auto span { font-weight: 700; }
.debt-auto small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: #6b5747; }
.debt-head h2 { justify-content: flex-start; }
.speech { padding: 4px 10px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; font-style: italic; }
.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-list .btn { padding: 9px 12px; font-size: 15px; }
.keys { margin-top: 10px; font-size: 12px; color: var(--muted); }
.modal.celebrate { text-align: center; color: #fff; background: linear-gradient(#3b2f6a, #1f1840); }
.cel-title { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--yellow); letter-spacing: 1px; }
.cel-name { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1.1; text-shadow: 0 4px 0 #000, 0 0 20px #ff6bd5; }
.cel-sub { opacity: 0.85; }
.confetti { position: fixed; top: -10px; z-index: 70; width: 8px; height: 12px; pointer-events: none; animation: confetti linear forwards; }
@keyframes confetti { to { transform: translateY(105vh) rotate(720deg); } }
.coin-fly { position: fixed; z-index: 45; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 35% 35%, #fff6c2, #ffd23a 45%, #e59a10); border: 2px solid #a86a00; transition: transform 0.65s cubic-bezier(.5, -0.4, .6, 1), opacity 0.65s; }

/* Đặt tên tiệm */
.sign-img { display: block; width: 100%; border-radius: 4px; image-rendering: pixelated; }
.sign-preview { margin: 8px 0; padding: 10px 8px; background: linear-gradient(#c7b48c, #9c8a66); border: 3px solid var(--ink); border-radius: 13px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.15); }
.name-row { display: flex; gap: 8px; align-items: stretch; }
.name-row input { flex: 1; min-width: 0; padding: 6px 12px; font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; outline: none; box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.07); }
.name-row input:focus { border-color: var(--orange); }
.name-row .btn { padding: 4px 12px; }
.name-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 2px; }
.chip-btn { padding: 3px 11px; font-family: var(--font); font-weight: 700; font-size: 12.5px; color: var(--ink); background: #fff3cf; border: 1.5px solid #d4b574; border-radius: 999px; box-shadow: 0 2px 0 #c09a55; }
.chip-btn:active { transform: translateY(2px); box-shadow: none; }
.name-err { min-height: 18px; font-size: 13px; font-weight: 700; color: var(--red); }
.modal.naming .btn-row { flex-wrap: nowrap; }
.modal.naming .btn-row .btn-gray { flex: 0 0 auto; }
.modal.naming .btn-row .btn.big { flex: 1; width: auto; margin-top: 0; white-space: nowrap; }

/* Nội dung bảng phụ: xem trước đúng kích thước chữ ngoài mặt tiền. */
.service-sign-intro { margin: 0 0 10px; color: var(--ink-2); }
.service-sign-preview { margin: 0 0 14px; padding: 10px; text-align: center; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 12px; }
.service-sign-preview figcaption { margin-bottom: 6px; font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 1px; }
.service-sign-preview canvas { display: block; width: min(100%, 320px); height: auto; margin: auto; image-rendering: pixelated; }
.service-sign-field { margin-top: 12px; }
.service-sign-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; font-weight: 800; }
.service-sign-field [data-sign-count] { flex-shrink: 0; font: 600 12px var(--font); color: var(--muted); }
.service-sign-field [data-sign-count].at-limit { color: var(--ink); font-weight: 800; }
.service-sign-field input { min-height: 44px; width: 100%; font-size: 18px; }
.service-sign-hint { margin: 10px 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.service-sign-reset { min-height: 44px; max-width: 100%; }
.service-sign-editor .name-err { margin-top: 8px; }
.service-sign-editor .btn-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin: 0; }
.service-sign-editor .btn-row .btn { min-height: 44px; min-width: 0; white-space: normal; }

/* Minigame */
.modal.mg { text-align: center; }
.mg-area { position: relative; height: 200px; margin: 8px 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 12px; }
.mg-area.case { background: linear-gradient(135deg, #2b2d35, #17181d); }
.mg-area .fan { position: absolute; left: 36%; top: 26%; width: 90px; height: 90px; border-radius: 50%; border: 6px solid #555; background: repeating-conic-gradient(#444 0 20deg, #666 20deg 40deg); animation: spin 3s linear infinite; }
.mg-area .ram { position: absolute; right: 12%; top: 18%; width: 14px; height: 110px; background: #1b5e20; border: 2px solid #000; box-shadow: 20px 0 0 #1b5e20; }
.mg-area .gpu { position: absolute; left: 8%; bottom: 12%; width: 60%; height: 34px; background: #333; border: 2px solid #000; }
@keyframes spin { to { transform: rotate(360deg); } }
.dust { position: absolute; width: 40px; height: 32px; border-radius: 50%; cursor: pointer; background: radial-gradient(circle, #c9bfa6, #9c8f74 60%, transparent 70%); transition: transform 0.2s, opacity 0.2s; }
.dust.gone { opacity: 0; transform: scale(1.8) !important; pointer-events: none; }
.mg-timer { height: 12px; overflow: hidden; background: #eee; border: 2px solid var(--ink); border-radius: 6px; }
.mg-timer i { display: block; height: 100%; background: linear-gradient(90deg, #e53935, #ffb300, #43a047); }
.mg-result { min-height: 22px; margin-top: 6px; font-weight: 800; }
.mg-result.ok { color: var(--green-d); }
.mg-result.fail { color: var(--red); }
.mg-bar { position: relative; height: 46px; margin: 12px 0; background: #333; border: 3px solid var(--ink); border-radius: 12px; }
.mg-bar .zone { position: absolute; top: 0; bottom: 0; background: rgba(80, 220, 100, 0.7); border-left: 2px solid #fff; border-right: 2px solid #fff; }
.mg-bar .needle { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; background: #ffd23a; box-shadow: 0 0 6px #ffd23a; }
.mg-bar .needle span { position: absolute; top: -22px; left: -9px; font-size: 18px; }

/* ==========================================================================
 * Hướng dẫn (coach)
 * ========================================================================== */
#coach { position: fixed; left: 50%; bottom: calc(var(--dock-h) + 10px); transform: translateX(-50%); z-index: 35; width: min(560px, calc(100vw - 20px)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink), 0 0 0 4px #ffd23a55; }
#coach.pop-in { animation: coachin 0.3s cubic-bezier(.2, 1.5, .5, 1); }
@keyframes coachin { from { transform: translate(-50%, 20px); opacity: 0; } }
.coach-av { flex: 0 0 auto; width: 52px; image-rendering: pixelated; background: #ffe7b8; border: 2px solid var(--ink); border-radius: 12px; }
.coach-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.coach-text { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.coach-btns { grid-column: 1 / -1; justify-self: end; display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.coach-btns button { min-width: 104px; min-height: 44px; margin: 0; }
.coach-btns .link-btn { border-radius: 8px; }
.coach-btns button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
#coach-arrow { position: fixed; z-index: 36; transform: translate(-50%, -100%); pointer-events: none; font-size: 32px; color: #ffe14d; text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink); animation: bounce 0.6s infinite alternate; }
@keyframes bounce { to { margin-top: -10px; } }
.tut-glow { box-shadow: 0 0 0 4px #ffe14d, 0 0 20px 6px #ffd23a !important; }

/* ==========================================================================
 * Màn hình chính
 * ========================================================================== */
#title-screen {
  --font: 'VT323', monospace;
  --display: var(--font);
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px;
  font-family: var(--font); font-synthesis: none;
  background: radial-gradient(ellipse at center, rgba(20, 12, 30, 0.35), rgba(10, 6, 16, 0.88));
}
#title-screen :is(.logo-sub, .logo-main, .logo-price, .tagline, .btn, .save-info, .title-foot) { font-weight: 400; }
#title-screen .logo-sub { font-size: 22px; letter-spacing: 3px; }
#title-screen .logo-price { font-size: 24px; }
#title-screen .tagline { font-size: 22px; line-height: 1.2; }
#title-screen .btn.big { font-size: 26px; }
#title-screen .btn.small { font-size: 22px; }
#title-screen .save-info, #title-screen .title-foot { font-size: 18px; }
.title-box { width: min(500px, 100%); text-align: center; }
.logo { padding: 16px 12px 14px; background: linear-gradient(#2a1845, #1b1030); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink), 0 0 40px #ff3d8155; animation: popin 0.5s cubic-bezier(.2, 1.5, .5, 1); }
.logo-sub { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: 5px; color: #9be7ff; }
.logo-main { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 11vw, 72px); line-height: 1.05; color: #ffe14d; letter-spacing: 1px; text-shadow: 0 4px 0 #d7263d, 0 0 26px #ff6bd5; -webkit-text-stroke: 1px #7a1020; animation: neon 3s infinite; }
.title-version { margin-top: 4px; color: #cde9ff; font-size: 18px; line-height: 1; letter-spacing: 1px; }
.logo-price { display: inline-block; margin-top: 6px; padding: 1px 12px; font-family: var(--display); font-weight: 800; font-size: 16px; color: #d7263d; background: #fff; border: 3px solid var(--ink); border-radius: 10px; }
@keyframes neon { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: 0.6; } }
.tagline { margin: 14px 0; color: #fff; font-weight: 600; line-height: 1.4; text-shadow: 0 2px 0 #000; }
.title-btns { display: flex; flex-direction: column; gap: 9px; width: min(320px, 100%); margin: 0 auto; }
.title-btns .btn.big { margin-top: 0; }
#title-screen .community-btn { width: 100%; min-height: 44px; flex-direction: row; gap: 8px; text-decoration: none; }
.community-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.save-info { margin-top: -3px; color: #ffe7b8; font-size: 13px; }
.save-info b { color: #ffe14d; }
.title-foot { margin-top: 14px; color: #bba; font-size: 12px; }

/* ==========================================================================
 * MÀN HÌNH DỌC (body.portrait)
 * ========================================================================== */
/* HUD 2 hàng, lưới 12 cột */
body.portrait #hud {
  height: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 42px 30px;
  gap: 6px; padding: calc(6px + env(safe-area-inset-top)) 8px 7px; border-radius: 0 0 18px 18px;
}
body.portrait .hud-shop, body.portrait #btn-sound, body.portrait #btn-music, body.portrait .stars { display: none; }
body.portrait #hud-daybox { grid-column: 1 / 4; grid-row: 1; justify-content: center; }
body.portrait .hud-day { font-size: 10px; }
body.portrait .hud-clock { font-size: 24px; }
body.portrait #hud-money { grid-column: 4 / 11; grid-row: 1; margin: 0; min-width: 0; height: auto; font-size: 20px; padding: 0 8px; }
body.portrait #btn-menu { grid-column: 11 / 13; grid-row: 1; width: auto; height: auto; }
body.portrait #hud-rating, body.portrait #hud-fame { grid-row: 2; height: auto; padding: 0 7px; font-size: 15px; justify-content: flex-start; }
body.portrait #hud-rating { grid-column: 1 / 3; }
body.portrait #hud-fame { grid-column: 3 / 5; }
body.portrait .hud-stat .ic .pxi { height: 13px; }
body.portrait #hud-status { grid-column: 5 / 9; grid-row: 2; margin: 0; gap: 3px; }
body.portrait .hud-status .st { flex: 1; min-width: 0; height: auto; justify-content: center; gap: 2px; padding: 0 2px; font-size: 11.5px; overflow: hidden; }
body.portrait .hud-status .st .pxi { height: 10px; }
body.portrait .speed-group { grid-column: 9 / 13; grid-row: 2; border-radius: 9px; }
body.portrait .speed-group .hud-btn { flex: 1; width: auto; height: 26px; }
body.portrait .speed-group .hud-btn .pxi { height: 11px; }
body.portrait .events { left: auto; right: 8px; max-width: calc(100vw - 140px); justify-content: flex-end; }
body.portrait .events .ev { font-size: 11px; }
body.portrait #pause-banner { font-size: 36px; top: 46%; }
body.portrait #quest-tracker { left: 8px; bottom: calc(var(--dock-h) + 8px); max-width: calc(100vw - 72px); }
body.portrait #toasts { top: calc(var(--top-h) + 6px); width: calc(100vw - 16px); }
body.portrait .toast { font-size: 12.5px; padding: 5px 10px; }
body.portrait .achv { top: calc(var(--top-h) + 48px); }

/* Tab bar đáy */
body.portrait #bottom-bar { left: 0; right: 0; bottom: 0; transform: none; gap: 0; padding: 5px 4px calc(5px + var(--dock-safe-bottom)); background: var(--paper); border: 0; border-top: 1.5px solid #d9bf8a; border-radius: 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3); }
body.portrait .bb-btn { flex: 1; width: auto; height: 54px; margin: 0 2px; font-size: 10.5px; gap: 1px; }
body.portrait .bb-btn .pxi { height: 20px; }
body.portrait .bb-btn:hover { transform: none; }

/* Popup → bottom sheet */
body.portrait #popup {
  top: auto; left: 0; right: 0; bottom: var(--dock-h); width: auto; max-height: 60vh;
  padding: 16px 12px 12px; border-bottom: 0; border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45); font-size: 14px;
}
body.portrait #popup::before { content: ''; position: absolute; top: 6px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #cdb88f; }
body.portrait #popup.pop-in, body.portrait #panel.slide-in { animation: sheetup 0.22s ease-out; }
@keyframes sheetup { from { transform: translateY(30%); opacity: 0.3; } }
body.portrait .pp-x { width: 36px; height: 36px; }
body.portrait .btn.big { padding: 11px 12px; font-size: 17px; }
body.portrait .plan-grid .btn { padding: 9px 6px; font-size: 14px; }
body.portrait .pp-tabs button, body.portrait .panel-tabs button { padding: 7px 4px; }
body.portrait .stock-row { grid-template-columns: 22px 1fr 30px auto; }
body.portrait .stock-row small { display: none; }
body.portrait .btn.tiny { padding: 4px 9px; }

/* Panel → bottom sheet cao (chừa chỗ 1 dòng toast phía trên) */
body.portrait #panel { top: auto; left: 0; right: 0; bottom: var(--dock-h); width: auto; height: calc(100vh - var(--top-h) - var(--dock-h) - 48px); border-bottom: 0; border-radius: 20px 20px 0 0; }
body.portrait .panel-head { border-radius: 17px 17px 0 0; }
body.portrait .cards { grid-template-columns: repeat(2, 1fr); }
body.portrait .shop-card { flex-wrap: wrap; }

/* Build bar */
body.portrait #build-bar { left: 0; right: 0; bottom: 0; transform: none; width: auto; padding: 7px 7px calc(7px + env(safe-area-inset-bottom)); border-bottom: 0; border-radius: 18px 18px 0 0; }
body.portrait .bitem { width: 80px; }

/* Coach: dưới; khi đang mở sheet thì nhảy lên trên */
body.portrait #coach { bottom: calc(var(--dock-h) + 8px); width: calc(100vw - 12px); padding: 6px 8px; gap: 8px; }
body.portrait.sheet-open #coach { top: calc(var(--top-h) + 4px); bottom: auto; }
body.portrait .coach-av { width: 40px; }
body.portrait .coach-text { font-size: 13.5px; }

/* Modal */
body.portrait .modal { padding: 12px 13px 14px; border-radius: 18px; }
body.portrait .modal h2 { font-size: 21px; }
body.portrait .rrow { font-size: 12px; }
body.portrait .mg-area { height: 240px; }
body.portrait .dust { width: 46px; height: 38px; }

/* Màn ngang thấp (điện thoại xoay ngang, cửa sổ nhỏ) */
@media (max-height: 520px) {
  body:not(.portrait) { --top-h: 50px; --dock-h: 72px; }
  body:not(.portrait) .hud-clock { font-size: 20px; }
  body:not(.portrait) .hud-money { height: 34px; font-size: 17px; }
  body:not(.portrait) .bb-btn { height: 46px; width: 74px; font-size: 11px; }
  body:not(.portrait) .bb-btn .pxi { height: 16px; }
  body:not(.portrait) #bottom-bar { bottom: 6px; padding: 4px; }
}
body.portrait .hud-status .u { display: none; }

/* Quiet cafe mixer; the original pixel title treatment stays scoped to the title. */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid #007c83; outline-offset:3px; }
.modal.audio-settings { width:min(580px,100%); padding:22px; }
.audio-heading { text-align:center; }
.audio-eyebrow { display:block; font-size:10px; font-weight:800; letter-spacing:1.5px; color:#66765b; }
.audio-heading h2 { margin:5px 0; }
.audio-heading p { margin:0 0 16px; color:var(--ink-2); font-size:13px; }
.radio-card { padding:14px; background:#e6ecdc; border:2px solid #76846a; border-radius:12px; }
.radio-card>b { display:block; margin:5px 0; font-size:17px; }
.radio-card>small { display:block; min-height:16px; font-size:11px; color:#53624e; }
.radio-controls { display:flex; gap:8px; margin-top:12px; }
.radio-controls select { flex:1; min-width:0; }
.radio-controls select,.manager-filters select { padding:8px; border:2px solid #79846c; border-radius:7px; background:#fffdf4; color:var(--ink); font:inherit; font-size:12px; }
.radio-controls button { white-space:nowrap; font-size:12px; }
.audio-toggles { display:flex; justify-content:space-between; gap:10px; margin:16px 0; font-size:13px; font-weight:700; }
.audio-toggles label,.space-toggle { cursor:pointer; }
.audio-settings input[type=checkbox] { accent-color:#397d5b; width:16px; height:16px; vertical-align:middle; }
.audio-mixer { display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; padding:4px 0 18px; }
.audio-slider>span { display:flex; justify-content:space-between; font-size:13px; }
.audio-slider output { color:#526848; font-variant-numeric:tabular-nums; }
.audio-slider input { width:100%; margin:7px 0 3px; accent-color:#508866; cursor:pointer; }
.audio-slider small { display:block; font-size:10px; color:#696751; line-height:1.4; }
.space-toggle { display:block; font-size:13px; border-top:1px solid #d2ccb7; padding-top:12px; }
.space-toggle small { display:block; margin:4px 0 0 23px; color:#696751; font-size:11px; }
.audio-preview { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:14px; }
.audio-preview>span { font-size:11px; margin-right:4px; }
.audio-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:13px 0; font-size:10px; }
.audio-footer a { color:#406049; }
.audio-footer .chip-btn { font-size:10px; }
.audio-close { width:100%; margin-top:7px; }
.settings-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:12px; border-top:1px solid #d2ccb7; }
.settings-actions .btn { font-size:12px; }
.manager-filters { display:flex; gap:10px; margin-bottom:12px; }
.manager-filters label { flex:1; font-size:12px; }
.manager-filters select { display:block; width:100%; margin-top:4px; }
.report-cash { padding:9px; margin:8px 0; border:1px solid #c9c2ab; border-radius:8px; font-size:12px; }
.report-cash summary { cursor:pointer; font-weight:700; }
@media(max-width:420px) { .modal.audio-settings { padding:15px; } .audio-mixer { gap:14px; } .radio-controls { flex-wrap:wrap; } .radio-controls select { width:100%; flex-basis:100%; } .audio-toggles { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }

/* Staff recruitment: paper dossiers, restrained tier colors, existing pixel portraits. */
.hr-hero { background: #293d3b; color: #fff8ea; border: 3px solid var(--ink); border-radius: 12px; padding: 20px; margin-bottom: 14px; box-shadow: 0 4px 0 #c9b68d; }
.hr-hero small { letter-spacing: .1em; color: #d7dcbb; font-size: 11px; font-weight: 800; }
.hr-hero h2 { font: 800 28px/1.12 var(--display); margin: 9px 0; }
.hr-hero p { color: #e1e5d2; margin: 8px 0 0; font-size: 12px; }
.hr-summary { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; font-size: 11px; color: var(--muted); }
.hr-summary span { flex: 1; min-width: 80px; }
.hr-summary b { display: block; font-size: 17px; color: var(--ink); }
.hr-role, .hr-filters label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 12px; }
.hr-role select, .hr-filters select, .hr-slot select { width: 100%; min-width: 0; min-height: 42px; font: 600 13px var(--font); background: #fffdf7; color: var(--ink); border: 2px solid #b6a78d; border-radius: 7px; padding: 8px; }
.hr-channels { display: grid; gap: 14px; margin: 16px 0; }
.hr-channel { background: #fffdf7; border: 2px solid #beab86; border-radius: 10px; padding: 14px; }
.hr-channel-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hr-channel h3, .hr-role-card h3 { margin: 0; font: 800 20px var(--display); }
.hr-channel-top strong { white-space: nowrap; font-size: 14px; color: #466b4c; }
.hr-channel p, .hr-role-card > p { margin: 6px 0 12px; font-size: 12px; color: var(--ink-2); }
.hr-channel > .btn { width: 100%; min-height: 40px; margin-top: 12px; }
.hr-odds { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; padding: 10px 0; border-top: 1px solid var(--line); }
.hr-odds > span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hr-odds b { font-size: 11px; font-variant-numeric: tabular-nums; }
.hr-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 3px 5px; border: 2px solid var(--rank); color: var(--ink); background: #fff9e9; border-radius: 4px; font: 900 12px/1 var(--font); box-shadow: 0 2px 0 var(--rank); }
.hr-pity { display: block; font-size: 11px; color: #786143; }
.hr-explainer { padding: 13px; border: 1px solid #c9b99b; border-radius: 8px; margin: 15px 0; font-size: 12px; line-height: 1.6; background: #f5ecd8; }
.hr-explainer summary { font-weight: 800; cursor: pointer; min-height: 24px; }
.hr-log { padding-left: 20px; }
.hr-log li { margin: 8px 0; }
.hr-section-head h2 { font: 800 26px/1.15 var(--display); margin: 8px 0; }
.hr-section-head p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.hr-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.hr-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hr-card { background: #fffdf8; border: 2px solid #c6b394; border-radius: 10px; padding: 13px; }
.hr-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hr-identity > div { min-width: 0; }
.hr-identity h3 { font: 800 19px/1.2 var(--display); margin: 6px 0 3px; }
.hr-identity p { font-size: 11px; margin: 0; color: var(--muted); }
.hr-identity small { font-size: 11px; }
.hr-portrait { image-rendering: pixelated; width: 64px; height: 72px; object-fit: contain; flex-shrink: 0; background: #e7e9d6; border: 2px solid #c1c5ab; border-radius: 5px; }
.hr-occupation { font-size: 12px; font-weight: 700; color: #6c604e; margin: 10px 0; }
.hr-stats { display: grid; gap: 6px; margin: 12px 0; }
.hr-stats > div { display: grid; grid-template-columns: 74px 1fr 25px; gap: 9px; align-items: center; font-size: 11px; }
.hr-stats b { text-align: right; font-variant-numeric: tabular-nums; }
.hr-stats meter { width: 100%; height: 12px; accent-color: #6a8b78; }
.hr-stats meter::-webkit-meter-bar { background: #eee6d2; border: 0; }
.hr-stats meter::-webkit-meter-optimum-value { background: #6a8b78; }
.hr-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.hr-card-foot small { color: var(--muted); font-size: 11px; }
.hr-card-foot .btn, .hr-actions .btn, .hr-pages .btn, .hr-slot > .btn { min-height: 36px; font-size: 12px; background: #f3e5c8; color: var(--ink); text-shadow: none; --edge: #c9ab78; --lip: #ad8f5f; }
.hr-actions .btn-green { background: #436d51; color: #fff; --edge: #2f5a3d; --lip: #264a32; }
.hr-pages { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 20px 0 12px; font-size: 12px; }
.hr-role-card { border: 2px solid #c6b394; border-radius: 10px; padding: 14px; background: #fffdf8; margin-bottom: 14px; }
.hr-slots { display: grid; gap: 9px; }
.hr-slot { border: 1px solid #c8c9b5; border-left: 4px solid #75937d; padding: 12px; border-radius: 5px; display: flex; flex-direction: column; gap: 9px; background: #f3f5e9; font-size: 12px; }
.hr-slot.locked { border-left-color: #b4aa99; background: #efeadf; color: #776d5c; }
.hr-slot .hr-identity b, .hr-slot .hr-identity small { display: block; margin: 6px 0 0; }
.hr-slot label { display: flex; flex-direction: column; gap: 5px; }
.hr-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.hr-actions .btn { flex: 1; padding: 10px; }
.hr-modal { width: min(510px,calc(100vw - 24px)); text-align: left; }
.hr-detail { font-size: 13px; line-height: 1.6; }
.hr-detail > small:first-child { font-size: 11px; font-weight: 800; letter-spacing: .07em; color: #596e51; }
.hr-detail-head { display: flex; gap: 18px; align-items: center; margin: 18px 0 12px; }
.hr-detail-head .hr-portrait { width: 96px; height: 108px; }
.hr-detail-head h2 { margin: 7px 0 0; font-size: 27px; line-height: 1.1; text-align: left; }
.hr-detail-head p { margin: 6px 0; }
.hr-style { color: var(--muted); font-size: 11px; }
.hr-close { width: 100%; min-height: 40px; margin-top: 18px; background: #3d5f4c; }
.hr-level-name { display: block; font-size: 20px; margin-top: 8px; }
.hr-hero progress { width: 100%; height: 12px; margin-top: 12px; accent-color: #bbd98e; }
.hr-requirements { list-style: none; padding: 0; margin: 12px 0 18px; }
.hr-requirements li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 12px; }
.hr-requirements li b { white-space: nowrap; }
.hr-requirements .done { color: #347241; }
.hr-subtitle { margin: 24px 0 12px; }
.hr-unlocks > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hr-unlocks span { color: #8a7b65; }
.hr-unlocks .unlocked { color: #347241; }
.hr-report-xp { padding: 14px; background: #e6eddb; border: 2px solid #97ab7e; border-radius: 9px; margin: 16px 0; }
.hr-report-xp p { font-size: 11px; line-height: 1.5; }
@keyframes hr-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hr-reveal .hr-detail-head { animation: hr-arrive .32s ease-out; }
@media (prefers-reduced-motion: reduce) { .hr-reveal .hr-detail-head { animation: none; } }
@media (max-width: 420px) {
  .hr-hero { padding: 15px; }
  .hr-hero h2 { font-size: 25px; }
  .hr-channel { padding: 11px; }
  .hr-channel h3 { font-size: 18px; }
  .hr-odds { gap: 2px; }
  .hr-odds b { font-size: 10px; }
  .hr-detail-head { gap: 11px; }
  .hr-detail-head .hr-portrait { width: 72px; height: 86px; }
  .hr-detail-head h2 { font-size: 23px; }
  .hr-actions { flex-direction: column; }
}

/* Compact staff screens: keep decisions visible, disclose biography on demand. */
.hr-compact { min-width: 0; }
.hr-compact .hr-summary { gap: 6px 10px; padding: 4px 0 10px; font-size: 12px; }
.hr-compact .hr-summary span { min-width: 64px; }
.hr-compact .hr-summary b { font-size: 16px; line-height: 1.3; }
.hr-compact .hr-role { flex-direction: row; align-items: center; gap: 10px; }
.hr-compact .hr-role select { flex: 1; width: auto; min-height: 44px; }
.hr-channel-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 10px 0; }
.hr-channel-choice { min-width: 0; min-height: 78px; padding: 8px 4px; display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; background: #f3ead7; border: 2px solid #b8a382; border-radius: 9px; color: var(--ink); font: 600 12px/1.2 var(--font); }
.hr-channel-choice small { font-size: 11px; color: #65563e; }
.hr-channel-choice.on, .hr-role-picker button.on { background: #e1ecd8; border-color: #436d51; box-shadow: inset 0 0 0 1px #436d51; }
.hr-compact .hr-channel { padding: 10px; }
.hr-compact .hr-channel h3, .hr-compact .hr-role-card h3 { font-size: 18px; }
.hr-compact .hr-channel-top strong { font-size: 13px; }
.hr-compact .hr-odds { padding: 10px 0 8px; margin-top: 8px; }
.hr-compact .hr-pity { font-size: 12px; line-height: 1.4; }
.hr-compact .hr-channel > .btn { min-height: 44px; margin-top: 8px; }
.hr-compact .hr-explainer { margin: 10px 0 0; padding: 0 10px; font-size: 12px; }
.hr-compact .hr-explainer summary { min-height: 44px; line-height: 44px; }
.hr-compact .hr-explainer[open] { padding-bottom: 10px; }
.hr-list-count { font-size: 12px; color: var(--muted); padding: 2px 0 6px; }
.hr-compact .hr-filters { gap: 8px; margin: 0 0 10px; }
.hr-compact .hr-filters label { flex-direction: row; align-items: center; gap: 6px; }
.hr-compact .hr-filters select { min-height: 44px; padding: 6px 4px; font-size: 12px; }
.hr-list { display: grid; gap: 6px; }
.hr-person { width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px; min-height: 70px; border: 1px solid #c6b394; border-radius: 8px; background: #fffdf8; color: var(--ink); font: 13px/1.3 var(--font); }
.hr-person:hover { border-color: #436d51; background: #f0f5e9; }
.hr-person .hr-portrait { width: 36px; height: 44px; }
.hr-person-info { flex: 1; min-width: 0; }
.hr-person-name { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.hr-person-name > b { overflow-wrap: anywhere; font-size: 13px; }
.hr-person-info > small { display: block; font-size: 12px; color: #6c604e; }
.hr-person-score { text-align: center; flex: 0 0 49px; }
.hr-person-score b { display: block; font-size: 18px; }
.hr-person-score small { font-size: 10px; color: #6c604e; white-space: nowrap; }
.hr-compact .hr-pages { padding: 8px 0 0; gap: 8px; }
.hr-compact .hr-pages .btn { min-width: 48px; min-height: 44px; }
.hr-role-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-bottom: 10px; }
.hr-role-picker button { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 44px; padding: 5px 7px; border: 1px solid #b8a382; border-radius: 7px; background: #f3ead7; color: var(--ink); font: 12px/1.25 var(--font); }
.hr-role-picker button span { white-space: nowrap; }
.hr-compact .hr-role-card { padding: 10px; margin: 0; }
.hr-compact .hr-role-card > .hr-channel-top { align-items: center; margin-bottom: 8px; }
.hr-compact .hr-role-card > .hr-channel-top .btn { min-height: 44px; font-size: 12px; }
.hr-compact .hr-slot { padding: 8px; gap: 8px; }
.hr-slot-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hr-slot.locked .hr-slot-heading { min-height: 36px; }
.hr-slot-person { display: flex; align-items: center; gap: 8px; min-width: 0; border: 0; padding: 0; background: none; color: var(--ink); text-align: left; font: 12px/1.25 var(--font); }
.hr-compact .hr-slot-filled { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.hr-slot-filled > .btn { min-height: 44px; padding: 6px 8px; font-size: 12px; }
.hr-slot-person > span { min-width: 0; }
.hr-slot-person .hr-portrait { width: 36px; height: 44px; }
.hr-slot-person small { display: block; color: #6c604e; margin-top: 4px; }
.hr-compact .hr-actions { flex-direction: row; flex-wrap: nowrap; margin: 0; gap: 8px; }
.hr-compact .hr-actions .btn { min-width: 0; min-height: 44px; padding: 6px; line-height: 1.2; }
.hr-compact .hr-slot select { min-height: 44px; }
.hr-detail.hr-compact { line-height: 1.4; }
.hr-detail.hr-compact .hr-detail-head { margin: 10px 0; gap: 12px; }
.hr-detail.hr-compact .hr-detail-head .hr-portrait { width: 56px; height: 64px; }
.hr-detail.hr-compact .hr-detail-head h2 { justify-content: flex-start; font-size: 23px; margin: 5px 0; }
.hr-detail.hr-compact .hr-detail-head > div { min-width: 0; }
.hr-detail.hr-compact .hr-detail-head b { font-size: 12px; }
.hr-detail.hr-compact .hr-stats { margin: 10px 0; gap: 5px; }
.hr-detail.hr-compact .hr-stats > div { min-height: 18px; font-size: 12px; grid-template-columns: 82px 1fr 28px; gap: 8px; }
.hr-profile-pay { display: flex; gap: 8px; justify-content: space-between; padding: 6px 0 10px; font-size: 12px; }
.hr-detail.hr-compact .hr-actions { margin: 0 0 8px; }
.hr-detail.hr-compact .hr-actions .btn small { display: block; font: 11px/1.4 var(--font); margin-top: 3px; }
.hr-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.hr-detail-footer .btn { min-height: 44px; min-width: 84px; }
.hr-compact :is(button,select):focus-visible { outline: 3px solid #316b9d; outline-offset: 2px; }

/* ======================= QUÁN SỐNG (mở khóa theo ngày, khách quen, kinh doanh) ======================= */
.lx-new { display: inline-block; margin-left: 4px; padding: 0 6px; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #fff; background: var(--red); border: 1.5px solid var(--ink); border-radius: 6px; vertical-align: 1px; }
.lx-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
.lx-chips .pxi { height: 12px; vertical-align: -2px; }
.chip-btn.on { background: var(--ink); color: #fff; }
.qobj .btn.small { grid-column: 1 / 3; justify-self: end; }
.qobj small { grid-column: 1 / 3; }
/* Hộp thoại nhân vật */
.owner-profile-card { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 12px; padding: 11px 12px; border: 2px solid var(--ink); border-radius: 14px; background: linear-gradient(135deg, #fff8df, #f1d99e); box-shadow: 0 3px 0 var(--ink); }
.owner-profile-card > img { width: 62px; height: 76px; object-fit: contain; image-rendering: pixelated; border: 2px solid #b98e52; border-radius: 11px; background: #fff4cf; }
.owner-profile-card > div { min-width: 0; display: grid; gap: 2px; }
.owner-profile-card small { color: #9a6321; font: 800 10px var(--display); letter-spacing: .8px; }
.owner-profile-card b { font: 800 20px/1.1 var(--display); }
.owner-profile-card span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.owner-profile-card > .btn span { color: inherit; }
@media (max-width: 560px) { .owner-profile-card { grid-template-columns: 58px 1fr; } .owner-profile-card > img { width: 54px; height: 66px; } .owner-profile-card > .btn { grid-column: 1 / -1; min-height: 44px; } }
.lx-talk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lx-talk-head img { width: 64px; height: 64px; image-rendering: pixelated; background: #fff3cf; border: 2px solid var(--ink); border-radius: 12px; }
.lx-talk-head small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .6px; color: var(--muted); text-transform: uppercase; }
.lx-talk-head b { font-family: var(--display); font-size: 22px; line-height: 1.1; }
.lx-speech { position: relative; background: #fffdf3; border: 2px solid var(--ink); border-radius: 12px; padding: 9px 12px; font-size: 15px; line-height: 1.45; margin-bottom: 10px; }
.lx-choices { display: flex; flex-direction: column; gap: 7px; }
.lx-choices .btn { width: 100%; justify-content: center; }
/* Thẻ mở khóa */
.lx-unlock-card { max-width: 440px; }
.lx-unlock-head { text-align: center; }
.lx-unlock-head small { font-weight: 800; letter-spacing: 1px; color: var(--muted); font-size: 11px; }
.lx-unlock-head h2 { margin: 2px 0 8px; color: #c2410c; }
.lx-unlock-list { display: flex; flex-direction: column; gap: 8px; }
.lx-unlock { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(#fffbe8, #fff1c4); border: 2px solid var(--ink); border-radius: 13px; box-shadow: var(--shadow-sm); animation: lxPop .45s both; }
.lx-unlock:nth-child(2) { animation-delay: .12s; } .lx-unlock:nth-child(3) { animation-delay: .24s; }
.lx-unlock .lx-thumb { width: 48px; image-rendering: pixelated; flex: 0 0 auto; }
.lx-unlock .lx-ic { flex: 0 0 48px; display: grid; place-items: center; }
.lx-u-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lx-u-body small { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; color: #c2410c; }
.lx-u-body b { font-family: var(--display); font-size: 17px; line-height: 1.15; }
.lx-u-body span { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.lx-unlock-more { margin: 9px 0; padding: 7px 10px; font-size: 12.5px; background: #fff; border: 2px dashed var(--line); border-radius: 10px; line-height: 1.5; }
@keyframes lxPop { from { transform: scale(.85) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Khách quen */
.lx-reg-list { display: flex; flex-direction: column; gap: 8px; }
.lx-reg { display: flex; gap: 9px; padding: 8px; background: var(--card); border: 2px solid var(--ink); border-radius: 13px; box-shadow: var(--shadow-sm); }
.lx-reg > img { width: 48px; height: 48px; image-rendering: pixelated; background: #fff3cf; border: 2px solid var(--ink); border-radius: 10px; flex: 0 0 auto; }
.lx-reg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.lx-reg-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.lx-reg-top b { font-family: var(--display); font-size: 17px; }
.lx-reg-top small { color: var(--muted); }
.lx-reg-top em { font-style: normal; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 6px; background: #eee3c8; }
.lx-reg-top em.good { background: #dcf5d0; } .lx-reg-top em.bad { background: #ffd7d2; }
.lx-rel { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.lx-rel span { white-space: nowrap; min-width: 92px; } .lx-rel span .pxi { height: 12px; vertical-align: -2px; }
.lx-rel .bar i { background: linear-gradient(#ff9fc8, #e8407a); }
.lx-mem { color: #6b4a8a; }
.lx-cust { margin-top: 6px; padding: 6px 8px; background: #fff0f6; border: 2px dashed #e8a0c0; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
/* Kinh doanh */
.lx-price { display: flex; flex-wrap: wrap; gap: 5px; }
.lx-toggle { align-items: flex-start; }
.lx-toggle span { display: flex; flex-direction: column; } .lx-toggle small { color: var(--muted); font-size: 11.5px; }
.lx-mk { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.lx-mk-card { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--shadow-sm); font-size: 12.5px; }
.lx-mk-card em { font-style: normal; font-weight: 800; color: var(--green-d); font-size: 12px; }
.lx-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lx-week div { text-align: center; padding: 4px 0; background: var(--card); border: 2px solid var(--ink); border-radius: 9px; font-size: 11px; }
.lx-week div b { display: block; font-size: 12px; font-variant-numeric: tabular-nums; }
.lx-week div.on { background: var(--yellow); }
.lx-log { font-size: 12px; display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow: auto; background: #fffdf3; border: 2px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.lx-log small { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.lx-npcq-head { display: flex; align-items: center; gap: 8px; }
.lx-npcq-head img { width: 32px; height: 32px; image-rendering: pixelated; border: 2px solid var(--ink); border-radius: 8px; background: #fff3cf; }
.lx-npcq-head small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }
.lx-qt { cursor: pointer; } .lx-qt.ready { color: #c2410c; font-weight: 800; }
.ach.secret { opacity: .75; background: repeating-linear-gradient(45deg, #f3ead6, #f3ead6 6px, #ece0c4 6px, #ece0c4 12px); }
/* Linh kiện */
.lx-parts { display: flex; flex-direction: column; gap: 7px; }
.lx-part { display: flex; align-items: center; gap: 10px; padding: 7px 9px; background: var(--card); border: 2px solid var(--ink); border-radius: 13px; box-shadow: 0 3px 0 var(--ink); }
.lx-part.locked { opacity: .6; }
.lx-part .sc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; }
.lx-part .sc-body b { font-size: 14px; }
.lx-part .btn small { display: block; font-size: 11px; opacity: .9; }
.lx-part .lx-ic { flex: 0 0 44px; display: grid; place-items: center; }
.lx-part .lx-chair, .lx-opt > img { width: 44px; image-rendering: pixelated; flex: 0 0 auto; }
/* Popup nâng cấp máy */
.lx-power { margin: 6px 0 4px; font-size: 12px; color: var(--ink-2); }
.lx-slot { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 5px; padding: 7px 9px; font-family: var(--font); font-size: 13px; color: var(--ink); text-align: left; background: var(--card); border: 1.5px solid #d4ba88; border-radius: 11px; box-shadow: 0 2px 0 #c6a771; cursor: pointer; }
.lx-slot span { flex: 0 0 104px; font-weight: 700; } .lx-slot span .pxi { height: 13px; vertical-align: -2px; }
.lx-slot b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-slot i { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--blue); white-space: nowrap; }
.lx-slot.on { background: #fff3cf; }
.lx-opts { margin: 4px 0 2px 10px; padding-left: 8px; border-left: 3px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.lx-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
.lx-opt > div { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.lx-opt > div small { color: var(--muted); font-size: 11.5px; }
.lx-opt.locked { opacity: .6; }
.plan-btn.combo { background: linear-gradient(#58a6ff, #1e6fd6); --edge: #1760b8; --lip: #124f98; }
body.portrait .plan-grid:has(.combo) { grid-template-columns: repeat(3, 1fr); }
body.portrait .lx-mk { grid-template-columns: 1fr; }
body.portrait .lx-slot span { flex-basis: 88px; }
.lx-spec { font-size: 12px; line-height: 1.4; color: var(--ink-2); margin: 2px 0; }
.lx-spec.muted { color: var(--muted); font-size: 11.5px; padding: 0; }

/* ---- Tên quán + cấp quán + thanh EXP (HUD) ---- */
.hud-shop .hs-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.hud-shop .hs-name b { font-family: var(--display); font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.hud-shop .hs-name small { font-size: 10px; font-weight: 800; color: var(--bar-muted); letter-spacing: 0.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-shop .hs-prog { display: flex; align-items: center; gap: 5px; margin-top: 3px; min-width: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hud-shop .hs-prog:hover .hs-lv { background: var(--paper); }
.hud-shop .hs-prog:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.hud-shop .hs-prog:active { transform: translateY(1px); }
.hud-shop .hs-lv { flex: 0 0 auto; padding: 0 6px; font-size: 10.5px; font-weight: 800; line-height: 15px; color: var(--ink); background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 6px; white-space: nowrap; }
.hud-shop .hs-xp { flex: 1 1 auto; min-width: 44px; height: 7px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(0, 0, 0, 0.45); border-radius: 4px; overflow: hidden; }
.hud-shop .hs-xp i { display: block; height: 100%; background: linear-gradient(90deg, #7ed957, #3fd3ff); transition: width 0.4s; }
.hud-shop .hs-num { flex: 0 0 auto; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--bar-muted); font-variant-numeric: tabular-nums; }
.speed-group .hud-btn.locked { opacity: 0.38; position: relative; }
.speed-group .hud-btn.locked::after { content: ''; position: absolute; right: 3px; top: 3px; width: 6px; height: 5px; border-radius: 1px; background: #c9a227; box-shadow: 0 -3px 0 -1px transparent; }
@media (max-width: 980px) { body:not(.portrait) .hud-shop { display: flex; max-width: 150px; padding: 2px 8px; } body:not(.portrait) .hud-shop .hs-name small, body:not(.portrait) .hud-shop .hs-num { display: none; } }
@media (max-width: 820px) { body:not(.portrait) .hud-shop { max-width: 132px; } body:not(.portrait) .hud-shop .hs-name b { font-size: 12px; } body:not(.portrait) .hud-shop .hs-prog { gap: 3px; } body:not(.portrait) .hud-shop .hs-xp { display: none; } }
/* Dọc: hàng thứ 3 của HUD = tên quán · bậc · cấp · EXP */
body.portrait { --top-h: calc(126px + env(safe-area-inset-top)); }
body.portrait #hud { grid-template-rows: 42px 30px 22px; }
body.portrait #hud .hud-shop { display: flex; grid-column: 1 / 13; grid-row: 3; flex-direction: row; align-items: center; gap: 10px; max-width: none; min-width: 0; padding: 0 4px; border-left: 0; }
body.portrait .hud-shop .hs-name { flex: 1 1 auto; flex-direction: row; align-items: center; max-width: none; }
body.portrait .hud-shop .hs-name b { font-size: 15px; }
body.portrait .hud-shop .hs-name small { font-size: 9.5px; }
body.portrait .hud-shop .hs-prog { flex: 0 0 auto; margin: 0; }
/* Hàng 3 dọc: [tên quán …] [Cấp][thanh EXP][số EXP] — thanh EXP luôn hiện, chiếm phần còn lại của hàng */
body.portrait .hud-shop .hs-name { flex: 1 1 0; min-width: 0; overflow: hidden; }
body.portrait .hud-shop .hs-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.portrait .hud-shop .hs-prog { flex: 0 1 62%; min-width: 0; gap: 5px; }
body.portrait .hud-shop .hs-xp { min-width: 30px; }

.sale-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #b5a78b}.sale-row small{display:block;font-size:11px;margin-top:3px}.sale-step{display:flex;align-items:center;gap:8px;flex-shrink:0}.sale-step b{min-width:68px;text-align:center}.sale-step button{min-width:36px;min-height:40px}.envs details{font-size:12px;line-height:1.5;margin-top:8px}.envs summary{cursor:pointer;text-decoration:underline}@media(max-width:480px){.sale-row{flex-wrap:wrap}.sale-step{margin-left:auto}}

/* Management navigation: four stable groups, then only related sections. */
.panel-tabs.grouped-tabs { display:flex; flex-direction:column; gap:7px; padding:10px 12px 0; overflow:visible; }
.panel-primary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.panel-secondary { display:flex; gap:7px; padding-bottom:8px; border-bottom:1px solid #d9cbb1; overflow-x:auto; }
.panel-secondary button { flex:0 0 auto; }
.panel-tabs.grouped-tabs button { min-height:44px; padding:8px 4px; line-height:1.2; white-space:nowrap; font-size:12px; }
.panel-primary button { background:#eee1c7; }
.panel-primary button.on { background:var(--yellow); box-shadow:0 2px 0 #b07f00; }
.panel-secondary button { border-width:1px; background:transparent; font-weight:700; }
.panel-secondary button.on { background:#fff0ba; border-color:#b38832; }
@media(max-width:380px){.panel-tabs.grouped-tabs{padding-inline:8px}.panel-primary,.panel-secondary{gap:5px}.panel-tabs.grouped-tabs button{font-size:11px}}

/* Tài chính khẩn cấp: khoản vay, quảng cáo cứu trợ và nguy cơ phá sản. */
.finance-balance { display:flex; align-items:center; gap:10px; padding:12px 14px; border:2px solid var(--ink); border-radius:14px; background:linear-gradient(135deg,#fff5c9,#f0d184); box-shadow:0 3px 0 var(--ink); }
.finance-balance small { font:800 10px var(--display); color:#8b6518; letter-spacing:.8px; }
.finance-balance b { margin-left:auto; font:800 25px var(--display); }
.finance-balance span { font-size:11px; color:var(--muted); }
.finance-balance.danger { background:#ffe0d5; border-color:#8d2924; } .finance-balance.danger b { color:var(--red); }
.finance-warning { margin:6px 0 10px; padding:9px 11px; border-left:5px solid var(--red); border-radius:8px; background:#fff0e5; color:#713629; font-size:12px; line-height:1.45; }
.loan-offers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.loan-offers article { display:grid; align-content:start; gap:5px; padding:11px; border:2px solid #6e2d29; border-radius:13px; background:#fff8e9; box-shadow:0 3px 0 #6e2d29; }
.loan-offers small { color:#a04938; font:800 10px var(--display); letter-spacing:.7px; }
.loan-offers b { font:800 21px var(--display); color:#7e241f; }
.loan-offers span,.loan-offers em { font-size:11px; font-style:normal; line-height:1.35; color:var(--muted); }
.loan-offers .btn { margin-top:5px; min-height:42px; }
.loan-contract { margin-top:10px; padding:12px; border:2px solid #70451c; border-radius:14px; background:#fff8e8; box-shadow:0 3px 0 #70451c; }
.loan-contract.late { border-color:#a52f29; background:#fff0e7; }
.loan-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.loan-head small { display:block; color:var(--muted); font:800 10px var(--display); } .loan-head b { font:800 21px var(--display); }
.loan-head > span { padding:5px 9px; border-radius:10px; background:#b8322c; color:#fff; font-weight:800; }
.loan-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:10px; }
.loan-grid > div { padding:8px; border-radius:9px; background:#f1dfba; text-align:center; }
.loan-grid small { display:block; color:var(--muted); font-size:10px; } .loan-grid b { font-size:13px; }
.loan-late { margin-top:9px; padding:8px 10px; border-radius:9px; background:#ffd6cb; color:#86251f; font-weight:800; font-size:12px; }
.loan-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; } .loan-actions .btn { min-height:46px; }
.ad-rescue { margin-top:12px; padding:11px 12px; display:flex; align-items:center; gap:12px; border:2px dashed #9c8d72; border-radius:13px; background:#eee8dc; opacity:.72; }
.ad-rescue.ready { border-color:#427fc0; background:#e7f3ff; opacity:1; }
.ad-rescue > div { min-width:0; display:grid; gap:2px; } .ad-rescue small { color:#537293; font:800 10px var(--display); } .ad-rescue b { font-size:14px; } .ad-rescue span { color:var(--muted); font-size:11px; }
.ad-rescue .btn { margin-left:auto; flex:0 0 auto; }
.finance-rules { margin-top:10px; display:grid; gap:5px; padding:10px 12px; border-radius:12px; background:#2c2024; color:#f5dfca; }
.finance-rules b { color:#ff806f; font:800 12px var(--display); } .finance-rules span { font-size:11.5px; }
.finance-history { display:grid; gap:5px; } .finance-history > div { display:grid; grid-template-columns:35px 1fr auto; gap:8px; align-items:center; padding:7px 9px; border-bottom:1px solid #d7c8ac; background:#fffaf0; }
.finance-history small { color:var(--muted); } .finance-history b { color:#7e241f; }
.finance-doom { margin-top:12px; padding:18px; border:3px solid #2b1515; border-radius:14px; background:#5c2222; color:#fff; text-align:center; } .finance-doom b { font:800 24px var(--display); }
.rep-finance { margin:8px 0; padding:7px 10px; border-radius:10px; background:#ffe0d5; color:#703028; font-size:12px; font-weight:800; text-align:center; }
.modal.bankruptcy { width:min(520px,calc(100vw - 24px)); text-align:center; border-color:#210f12; background:linear-gradient(#4c2025,#21161a); color:#fff4df; box-shadow:0 7px 0 #10080a,0 24px 60px #000a; }
.bankrupt-mark { margin:-4px auto 10px; color:#ff5e4d; font:800 44px/1 var(--display); letter-spacing:2px; text-shadow:0 4px 0 #18080a; transform:rotate(-2deg); }
.modal.bankruptcy h2 { color:#ffd8a0; } .modal.bankruptcy .muted { color:#cbb9ad; }
.bankrupt-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }
.bankrupt-stats span { padding:9px 5px; border:1px solid #80505a; border-radius:9px; background:#2b1c20; font-size:11px; } .bankrupt-stats b { display:block; margin-top:3px; font-size:15px; }
@media(max-width:560px){.finance-balance{display:grid;grid-template-columns:1fr auto}.finance-balance b{margin:0}.finance-balance span{grid-column:1/-1}.loan-offers{grid-template-columns:1fr}.loan-grid{grid-template-columns:1fr 1fr}.loan-actions{grid-template-columns:1fr}.ad-rescue{align-items:flex-start;flex-direction:column}.ad-rescue .btn{width:100%;margin:0}.bankrupt-stats{grid-template-columns:1fr}}

/* ---- HUD dọc: bỏ cụm tốc độ/tạm dừng → hàng thông số thoáng; nút menu cao bằng hàng 1 ---- */
body.portrait #hud-rating { grid-column: 1 / 4; }
body.portrait #hud-fame { grid-column: 4 / 7; }
body.portrait #hud-status { grid-column: 7 / 13; gap: 5px; }
body.portrait .hud-status .st { font-size: 12.5px; gap: 3px; }
body.portrait .hud-status .st .pxi { height: 11px; }
body.portrait #btn-menu { height: 42px; align-self: stretch; border-radius: 12px; }
body.portrait #btn-menu .pxi { height: 20px; }

/* ---- Menu gọn (tạm dừng) ---- */
.modal.menu-modal { width: min(420px, 100%); padding: 16px 16px 12px; }
.menu-head { text-align: center; margin-bottom: 10px; }
.menu-head h2 { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.menu-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.menu-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; margin-bottom: 10px; background: #eef4e8; border: 2px solid #9fb38f; border-radius: 12px; }
.menu-account > div { flex: 1; min-width: 0; }
.menu-account b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-account small { display: block; font-size: 11.5px; color: #4d6b52; }
.menu-cloud { font-size: 20px; color: #3f8f62; }
.menu-sec { padding: 8px 10px; background: #fffaf0; border: 2px solid var(--line); border-radius: 12px; }
.menu-label { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; color: var(--muted); }
.menu-audio-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: 5px 0; }
.menu-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; cursor: pointer; }
.menu-switch input { width: 17px; height: 17px; accent-color: var(--green); }
.menu-audio-row input[type=range] { width: 100%; margin: 0; accent-color: #508866; cursor: pointer; }
.menu-audio-row output { font-size: 12px; text-align: right; color: #526848; font-variant-numeric: tabular-nums; }
.menu-track { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.menu-track > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }   /* 3 cột × 2 hàng: 6 nút không bị bóp hẹp */
.menu-actions .btn { min-height: 46px; padding: 8px 6px; font-size: 13px; text-align: center; }
.menu-actions .btn .bi { justify-content: center; gap: 5px; line-height: 1.15; }
.menu-danger { display: flex; justify-content: space-between; gap: 10px; margin: 12px 2px 0; }
.menu-danger .link-btn { font-size: 12.5px; }
.link-btn.danger { color: var(--red); font-weight: 800; }
.menu-close { width: 100%; margin-top: 12px; }
.menu-credits { display: block; margin-top: 8px; text-align: center; font-size: 10.5px; color: #8a7a5a; }

.menu-support { width: 100%; min-height: 44px; }
.modal.author-support { width: min(520px, 100%); border-radius: 4px; box-shadow: var(--shadow); }
.author-support .ui-dialog-head { text-align: center; }
.author-support-image { display: block; width: 100%; height: auto; max-height: max(120px, calc(var(--ui-vh, 100dvh) - 176px)); object-fit: contain; }
.author-support-status { text-align: center; }
.author-support .btn { border-radius: 4px; }

/* ---- Nhiệm vụ: khối "CÓ THƯỞNG" trên cùng ---- */
.claim-box { margin-bottom: 10px; padding: 8px 10px; background: linear-gradient(#fff6d6, #ffe9a8); border: 2px solid var(--ink); border-radius: 13px; box-shadow: var(--shadow-sm); }
.claim-box .soft-title { margin: 0 0 4px; color: #a4540c; }
.claim-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px dashed #d9b86a; }
.claim-box .soft-title + .claim-row { border-top: 0; }
.claim-row > div { min-width: 0; }
.claim-row b { display: block; font-size: 13px; line-height: 1.25; }
.claim-row small { display: block; font-size: 11px; color: #8a6a3a; }
.claim-row .btn { flex: 0 0 auto; }

/* ---- Hàng thông số: ★ và ❤ co theo nội dung, phần còn lại cho ping/nhiệt/điện ---- */
.hud-stats { display: contents; }
body.portrait .hud-stats { display: flex; grid-column: 1 / 13; grid-row: 2; align-self: stretch; gap: 6px; min-width: 0; }
body.portrait .hud-stats .hud-stat { flex: 0 0 auto; height: auto; min-width: 48px; padding: 0 7px; gap: 4px; font-size: 14.5px; justify-content: center; }
body.portrait .hud-stats .hud-stat .ic .pxi { height: 13px; }
body.portrait .hud-stats .hud-status .st { font-size: 12px; }
#hud-beauty .ic .pxi { height: 17px; }
@media (max-width: 1080px) { body:not(.portrait) #hud-beauty { padding: 0 7px; } }
body.portrait .hud-stats #hud-status { flex: 1 1 auto; min-width: 0; }

/* ---- Ô mạng / nhiệt độ / điện: chữ & icon to ngang ô ★ ❤ Beauty ---- */
body.portrait .hud-stats .hud-status { gap: 5px; }
body.portrait .hud-stats .hud-status .st { font-size: 14.5px; font-weight: 800; gap: 4px; padding: 0 3px; color: #f1eafc; }
body.portrait .hud-stats .hud-status .st .pxi { height: 15px; }
@media (max-width: 400px) {
  body.portrait .hud-stats { gap: 5px; }
  body.portrait .hud-stats .hud-stat { padding: 0 5px; font-size: 14px; }
  body.portrait .hud-stats .hud-status .st { font-size: 13.5px; gap: 2px; padding: 0 1px; }
  body.portrait .hud-stats .hud-status .st .pxi { height: 13px; }
}

/* ---- Hình minh họa linh kiện (32 px vẽ tay, phóng x2) ---- */
.lx-partimg { flex: 0 0 48px; width: 48px; height: 48px; image-rendering: pixelated; background: #f6f0e2; border: 1.5px solid #e2d3ae; border-radius: 10px; }
.lx-opt .lx-optimg { flex: 0 0 36px; width: 36px; height: 36px; image-rendering: pixelated; background: #f6f0e2; border-radius: 8px; }
.lx-opt > .lx-opt-body { flex: 1; }
.lx-curimg { flex: 0 0 26px; width: 26px; height: 26px; image-rendering: pixelated; }
.lx-unlock .lx-thumb[src] { image-rendering: pixelated; }

.kit-line { display: block; color: #6b4fa0; font-weight: 700; } .kit-line .pxi { height: 11px; vertical-align: -1px; }

/* ---- Tab Tài sản ---- */
.assets-head { margin-bottom: 8px; }
.asset-total { display: flex; flex-direction: column; align-items: center; padding: 10px; background: linear-gradient(#fff8dc, #ffe9a8); border: 1.5px solid #d9b86a; border-radius: 12px; }
.asset-total small { font-size: 11px; font-weight: 800; color: #8a6a2e; letter-spacing: .3px; }
.asset-total b { font-family: var(--display); font-size: 24px; color: var(--green-d); }
.asset-bar { display: flex; height: 8px; margin: 7px 2px; border-radius: 99px; overflow: hidden; background: #eee3c8; }
.asset-bar .cash { background: #f5b820; } .asset-bar .eq { background: #46a5f5; }
.cards.two { grid-template-columns: 1fr 1fr; }
.card-link { text-align: left; font: inherit; cursor: pointer; }
.asset-group { margin-top: 6px; background: var(--card); border: 1.5px solid #e2d3ae; border-radius: 11px; }
.asset-group summary { display: flex; align-items: center; gap: 6px; padding: 9px 10px; cursor: pointer; list-style: none; }
.asset-group summary::-webkit-details-marker { display: none; }
.asset-group summary span { color: var(--muted); font-size: 12px; } .asset-group summary strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.asset-group summary .pxi { height: 14px; }
.asset-items { padding: 0 10px 6px; }
.asset-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px dashed #eadfbf; font-size: 13px; }
.asset-row > div { display: flex; flex-direction: column; min-width: 0; } .asset-row small { color: var(--muted); font-size: 11px; }
.asset-row em { font-style: normal; color: #6b4fa0; font-weight: 800; }
.asset-row > span { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.assets-head .card em { color: var(--muted); font-style: normal; font-weight: 700; }

/* ---------- Nút đóng chuẩn (UI.closeBtn / UI.addX): vuông 44px, góc phải trên, icon X pixel ---------- */
.x-btn { position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: linear-gradient(#fffaf0, #ffe7b8); border: 1.5px solid #cfa862; border-radius: 12px; box-shadow: 0 3px 0 #a87d3c, inset 0 1px 0 #fff; color: var(--ink); cursor: pointer; }
.x-btn .pxi { height: 14px; }
.x-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a87d3c; }
.x-btn.inline { position: static; margin-left: auto; }
.modal { position: relative; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.modal.has-x { padding-top: 16px; }
.modal.has-x > h2, .modal.has-x .hr-detail-head { padding-right: 52px; }

/* ---------- Chip hiệu ứng HUD (bấm được) + thẻ chi tiết + chip hệ quả trong hộp lựa chọn ---------- */
.events .ev { cursor: pointer; font-family: var(--font); min-height: 26px; }
.events .ev.buffs { background: linear-gradient(#7b5cff, #5a3fd6); }
.fx-list { display: grid; gap: 6px; margin: 6px 0 10px; }
.fx-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid #e6d0a0; background: #fff; }
.fx-row.good { border-color: #8fd394; background: #eefaea; } .fx-row.bad { border-color: #f2b2a8; background: #fff1ee; }
.fx-row > div { flex: 1; min-width: 0; } .fx-row b { display: block; font-size: 14px; } .fx-row small { display: block; color: #6b5a44; font-size: 12px; }
.fx-row .pxi { height: 18px; }
.lx-choice { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: center; }
.lx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.lx-chip { font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.3; padding: 2px 7px; border-radius: 8px; background: rgba(255,255,255,.88); color: #2a1c1c; text-shadow: none; }
.lx-chip.good { box-shadow: inset 0 0 0 1.5px #43a047; } .lx-chip.bad { box-shadow: inset 0 0 0 1.5px #e53935; color: #8a1d1b; } .lx-chip.chance { box-shadow: inset 0 0 0 1.5px #ffb300; }
/* Hộp thoại sự kiện ngẫu nhiên (.lx-talk): xem css/event-dialog.css */
.rep-market.bonus { background: #e6f7df; color: #1f6a2a; }

/* ---------- Băng rôn khách VIP ---------- */
.vip-banner { position: fixed; top: calc(var(--top-h) + 52px); left: 50%; transform: translateX(-50%); z-index: 112; display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: calc(100vw - 24px); padding: 8px 16px 8px 10px; border: 2.5px solid var(--ink); border-radius: 14px; pointer-events: none;
  background: linear-gradient(100deg, #2a1d3d 0%, #3b2854 45%, #2a1d3d 100%); color: #fff7dc; box-shadow: 0 0 0 2px var(--vip) inset, 0 6px 0 rgba(0,0,0,.25), 0 0 22px color-mix(in srgb, var(--vip) 55%, transparent); animation: vbIn .45s cubic-bezier(.2,1.6,.4,1); overflow: hidden; }
.vip-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%); transform: translateX(-120%); animation: vbShine 1.6s .3s ease-in-out 2; }
.vip-banner .vb-crown { filter: drop-shadow(0 0 6px var(--vip)); animation: vbBob 1s ease-in-out infinite alternate; }
.vip-banner small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--vip); }
.vip-banner b { font-size: 14px; font-weight: 700; line-height: 1.25; }
.vip-banner em { font-style: normal; font-weight: 900; color: var(--vip); text-shadow: 0 0 8px color-mix(in srgb, var(--vip) 60%, transparent); }
.vip-banner.big { padding: 10px 18px 10px 12px; }
.vip-banner.big b { font-size: 15.5px; }
.vip-banner.out { animation: vbOut .45s ease-in forwards; }
@keyframes vbIn { from { transform: translate(-50%, -30px) scale(.8); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes vbOut { to { transform: translate(-50%, -24px); opacity: 0; } }
@keyframes vbShine { to { transform: translateX(120%); } }
@keyframes vbBob { from { transform: translateY(1px) rotate(-6deg); } to { transform: translateY(-2px) rotate(6deg); } }
body.portrait .vip-banner { top: calc(var(--top-h) + 44px); }
.vip-tag { color: var(--vip); background: #2a1d3d; padding: 1px 6px 1px 4px; border-radius: 6px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .vip-banner, .vip-banner::after, .vip-banner .vb-crown { animation: none; } }

/* ---------- Chuẩn bị quán (phase 'prep') ---------- */
.rep-next { display: flex; gap: 8px; align-items: stretch; }
.rep-next .btn-orange { flex: 0 0 auto; }
.rep-next .btn.big { flex: 1; }
#prep-bar { position: fixed; top: calc(var(--top-h) + 8px); left: 50%; transform: translateX(-50%); z-index: 105; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; width: max-content; max-width: calc(100vw - 16px);
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-sm); animation: tin .25s; }
#prep-bar .pb-txt { display: flex; align-items: center; gap: 8px; min-width: 0; }
#prep-bar .pb-txt span { display: flex; flex-direction: column; line-height: 1.2; }
#prep-bar b { font-size: 13.5px; }
#prep-bar small { font-size: 11.5px; color: var(--ink-soft, #6b5a48); }
#prep-bar .btn { white-space: nowrap; animation: prepPulse 1.6s ease-in-out infinite; }
@keyframes prepPulse { 50% { transform: scale(1.04); } }
body.prep #toasts { top: calc(var(--top-h) + 66px); }
body.portrait #prep-bar { top: calc(var(--top-h) + 6px); padding: 5px 5px 5px 10px; }
body.portrait #prep-bar .btn { font-size: 12px; padding: 7px 10px; }
@media (prefers-reduced-motion: reduce) { #prep-bar .btn { animation: none; } }
.rep-next .btn { white-space: nowrap; margin: 0; }
body.portrait .rep-next .btn { font-size: 13px; padding-left: 10px; padding-right: 10px; }
body.portrait .rep-next .btn.big { font-size: 15px; }

/* Popup báo bản mới */
.modal.app-update-modal, body.portrait .modal.app-update-modal {
  width: min(520px, 100%); min-width: 0;
  max-height: calc(100vh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)) - 8px);
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)) - 8px);
  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left;
}
.app-update-head, .app-update-footer { flex: 0 0 auto; padding: 14px 18px; }
.app-update-head { border-bottom: 1px solid var(--line); }
.app-update-modal .app-update-head h2 { margin: 0; font-size: 23px; line-height: 1.25; overflow-wrap: anywhere; }
.app-update-body { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 18px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.app-update-body:focus-visible { outline: 3px solid #2468a8; outline-offset: -3px; }
.app-update-notes { margin: 0; padding-left: 20px; }
.app-update-notes li { padding-left: 2px; margin: 0 0 8px; }
.app-update-modal .app-update-help { margin: 12px 0 0; color: var(--ink-2); }
.app-update-footer { border-top: 1px solid var(--line); background: var(--paper); }
.app-update-modal .app-update-status { margin: 0 0 10px; font-size: 13px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.app-update-status:empty { display: none; }
.app-update-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.app-update-modal .app-update-acts .btn { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; font-size: 15px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .app-update-head, .app-update-footer { padding: 12px 14px; }
  .app-update-modal .app-update-head h2 { font-size: 21px; }
  .app-update-body { padding: 12px 14px; }
  .app-update-acts { grid-template-columns: minmax(0, 1fr); }
}
.cloud-conflict-modal .cloud-conflict { max-width: 360px; }
.cloud-conflict .cc-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; margin: 6px 0; border-radius: 8px; background: rgba(0,0,0,.06); }
.cloud-conflict .cc-status { font-weight: 600; }
.cloud-conflict .cc-status:empty { display: none; }
.cloud-conflict .cc-acts .btn { white-space: nowrap; }
.cloud-conflict .cc-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* Mũi tên cuộn thanh tab/chip trên PC (js/scroll-keep.js) */
.sk-arrow { position: sticky; z-index: 4; flex: 0 0 0; width: 0; align-self: stretch; pointer-events: none; }
.sk-arrow.l { left: 0; order: -9999; }
.sk-arrow.r { right: 0; order: 9999; }
.sk-arrow i { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff8e8; border: 1.5px solid #3a2a24; box-shadow: 0 2px 0 #3a2a24; color: #3a2a24; font: 800 22px/1 'Baloo 2', sans-serif; font-style: normal; cursor: pointer; pointer-events: auto; transition: opacity .15s; }
.sk-arrow.l i { left: 0; }
.sk-arrow.r i { right: 0; }
.sk-arrow i:hover { background: #ffe39a; }
.sk-arrow.off i { opacity: 0; pointer-events: none; }
/* Hiệu ứng trang trí trong hộp mua: nhóm kinh doanh nổi bật, uy tín nhạt hơn */
.bb-stats .fx-money { background: #fff1c4; border-color: #e0b84a; }
.bb-stats .fx-rating { background: #ffe4f0; border-color: #e58ab0; }
.bb-stats .fx-guest { background: #e6f6e9; border-color: #8ccf98; }
.bb-stats .fx-traffic, .bb-stats .fx-cost { opacity: .8; }
.lx-bio { display: block; font-style: italic; opacity: .85; }
.mem-more { display: block; margin: 8px auto 0; }

/* Sàn theo tầng: texture dịu, cùng khung UI xây dựng hiện có. */
.finish-summary { padding: 5px 3px; font-size: 13px; color: var(--ink); }
.finish-summary small { display: block; color: #6a5947; font-size: 12px; margin-top: 2px; }
.bitem.finish-card { width: 108px; min-height: 122px; gap: 4px; }
.bitem.finish-card > img { width: 96px; height: 48px; border-radius: 7px; border: 1px solid #7b726c; object-fit: cover; }
.bitem.finish-card.locked { background: #ebe5da; color: #655a4b; }
.bitem.finish-card.locked img { opacity: .7; }
.finish-dialog { text-align: left; }
.finish-preview { display: grid; grid-template-columns: 144px 1fr; gap: 16px; align-items: center; padding: 12px; background: #eee6d3; border-radius: 12px; }
.finish-preview > img { width: 144px; height: 96px; image-rendering: pixelated; border-radius: 8px; border: 2px solid #887865; }
.finish-preview b { font-size: 19px; }
.finish-preview p { margin: 6px 0; line-height: 1.4; }
.finish-preview small { color: #5e5042; }
.finish-floor-label { margin: 16px 0 8px; font-size: 13px; font-weight: 800; }
.finish-floor-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.finish-floor-tabs .btn { min-height: 44px; }
.finish-note { color: #655746; font-size: 13px; line-height: 1.5; }
.finish-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.finish-actions .btn { min-height: 44px; flex: 1; }
@media(max-width: 480px) { .finish-preview { grid-template-columns: 96px 1fr; gap: 10px; padding: 10px; }.finish-preview > img { width: 96px; height: 80px; }.finish-preview b { font-size: 16px; }.finish-actions { flex-direction: column; } }

/* Photo mode leaves only the world canvas visible, including dynamically added UI. */
body.photo-mode > :not(#game) { visibility: hidden !important; pointer-events: none !important; }
body.photo-mode > :not(#game) * { visibility: hidden !important; }
#zoom-ctrl { display: flex; align-items: center; }
#zoom-ctrl[hidden], #zoom-ctrl .hud-btn[hidden] { display: none; }
#zoom-ctrl .hud-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; }
#btn-photo { margin: 0; color: #684821; }
#btn-photo svg { display: block; width: 20px; height: 20px; }

/* Desktop cash grows with its actual digits; portrait keeps its grid allocation. */
body:not(.portrait) .hud-money { flex: 0 0 auto; width: max-content; min-width: 190px; max-width: none; padding-inline: 18px; }
body:not(.portrait) #hud-money-v { flex: 0 0 auto; }
.sale-step button { touch-action: none; user-select: none; }

/* Chọn sàn nhà: thẻ chi tiết NẰM TRONG thanh xây dựng (không còn hộp thoại che quán) → xem thử trực tiếp trên bản đồ */
.finish-detail { display: grid; gap: 6px; padding: 4px 2px 2px; }
.fd-head { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; padding: 6px; background: #eee6d3; border-radius: 10px; }
.fd-head > img { width: 84px; height: 56px; image-rendering: pixelated; border-radius: 6px; border: 2px solid #887865; }
.fd-head b { display: block; font-size: 15px; line-height: 1.15; }
.fd-head small { display: block; color: #5e5042; font-size: 11.5px; margin: 1px 0 2px; }
.fd-head p { margin: 0; font-size: 11.5px; line-height: 1.3; color: #4a3d30; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-live { padding: 4px 8px; border-radius: 8px; background: #e3f2dc; color: #2f6a3a; font-size: 11.5px; font-weight: 700; }
.fd-floors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 800; }
.fd-floors .btn { min-height: 34px; padding: 0 12px; font-size: 12px; }
.fd-now { font-size: 11.5px; color: #655746; }
.fd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fd-actions .big { grid-column: 1 / -1; min-height: 42px; }
.fd-actions .btn { min-height: 36px; font-size: 12px; }
#build-bar:has(.finish-detail) .bbar-cats { display: none; }
#build-bar:has(.finish-detail) .finish-summary { padding: 2px 2px 0; }
#build-bar:has(.finish-detail) .bbar-tools [data-act="b-tool"] { display: none; }
#build-bar:has(.finish-detail) .bbar-tools { flex-wrap: nowrap; }

/* Private admin title and in-game debt reminder. */
.ttl.ttl-admin { background: #ffe066; color: #5b2600; border: 2px solid #a64b00; box-shadow: 2px 2px 0 #5b2600; text-shadow: none; font-weight: 900; }
.debt-reminder { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; text-align: center; border-radius: 4px; border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.debt-reminder-icon { font-size: 48px; color: var(--orange); }
.debt-reminder-clock { font-weight: 800; color: var(--red); }
.debt-message-log { white-space: pre-line; background: var(--paper-2); padding: 12px; line-height: 1.7; border: 2px solid var(--ink-2); border-radius: 4px; }

#panel .card em { color: var(--ink-2); }
.finish-card small { white-space: normal; overflow-wrap: anywhere; }

/* Debt phone: a compact handset, distinct call and message screens. */
.modal.debt-phone-modal { width:min(360px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:8px; border:3px solid #0d1320; border-radius:28px; background:#202b39; box-shadow:5px 6px 0 #0d1320; overflow:auto; }
.debt-phone-modal > .ui-dialog-head { display:none; }
.debt-phone-modal > .ui-dialog-body { padding:0; overflow:visible; }
.debt-phone { position:relative; background:#f1eadc; color:#2a2630; border:2px solid #536475; border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:12px; min-height:510px; text-align:left; }
.phone-status { display:flex; justify-content:space-between; font-size:10px; font-weight:800; }
.phone-speaker { width:48px;height:5px;background:#172331;border-radius:4px;position:absolute;left:calc(50% - 24px);top:8px; }
.phone-contact { display:flex;gap:12px;align-items:center;padding:16px 0 12px;border-bottom:2px solid #c9bfac; }
.phone-contact h2 { margin:4px 0;font-size:22px;overflow-wrap:anywhere;line-height:1.2; }
.phone-contact small { font-size:10px;letter-spacing:1px;font-weight:800; }
.phone-contact > div > span { font-size:12px; }
.phone-contact .sc-av { width:56px;height:56px;flex:0 0 56px;overflow:hidden;border-radius:12px;background:#e6d6b0;display:grid;place-items:center; }
.phone-contact img { width:56px;height:56px;object-fit:contain;image-rendering:pixelated; }
.phone-call-state { font-size:12px;text-align:center; }
.debt-phone .debt-message-log { background:transparent;padding:0;border:0;white-space:normal;overflow:auto;max-height:190px;min-height:100px;flex:1; }
.phone-bubble { background:#fffaf0;border:2px solid #c4b9a3;border-radius:4px 12px 12px 12px;padding:10px 12px;margin:0 16px 8px 0;box-shadow:2px 2px 0 #d4c9b6;overflow-wrap:anywhere; }
.phone-bubble > span { white-space:pre-wrap;font-size:14px;line-height:1.5; }
.phone-bubble small { display:block;font-size:10px;opacity:.7;margin-top:4px; }
.phone-reply { padding:10px;border:2px solid #c9bfac;border-radius:16px;font-size:11px;color:#665d50; }
.phone-call-actions { display:flex;justify-content:space-around;gap:16px; }
.phone-round { border:0;background:none;color:inherit;font:12px var(--font);padding:4px;min-width:80px; }
.phone-round span { display:grid;place-items:center;width:52px;height:52px;margin:0 auto 8px;border-radius:50%;font-size:28px;color:white;border:2px solid #182a31;box-shadow:0 3px 0 #111b25; }
.phone-round.decline span { background:#be4148;transform:rotate(135deg); }
.phone-round.accept span { background:#31985a; }
.phone-round:disabled { opacity:.55; }
.phone-round:focus-visible,.debt-compose textarea:focus-visible { outline:3px solid #e9b649;outline-offset:3px; }
.phone-footer { margin-top:auto;text-align:center; }
.debt-phone .debt-reminder-clock { color:inherit;margin:0 0 8px;font-size:12px; }
.phone-footer small { display:block;font-size:10px;opacity:.8;margin-top:8px; }
.phone-progress { height:4px;background:#b5b5a9;overflow:hidden; }
.phone-progress i { display:block;height:100%;background:#438964; }
.phone-home { width:76px;height:4px;border-radius:4px;background:currentColor;opacity:.6;margin:4px auto 0; }
.debt-phone.is-call { background:#233d4a;color:#f7efdb;border-color:#6b8790; }
.is-call .phone-contact { flex-direction:column;text-align:center;border-color:#526d74; }
.is-call .phone-bubble { background:#355461;color:#fff5df;border-color:#769399;box-shadow:2px 2px 0 #172f3a;margin-right:0; }
.is-call .phone-contact h2 { font-size:24px; }
.is-ringing .phone-contact .sc-av { animation:phone-ring .3s steps(2) infinite; }
@keyframes phone-ring { 50% { transform:rotate(5deg); } }
.debt-compose { display:flex;flex-direction:column;gap:8px; }
.debt-compose label { font-weight:800; }
.debt-compose textarea { width:100%;resize:vertical;min-height:88px;max-height:180px;padding:12px;border:2px solid var(--ink-2);border-radius:4px;font:16px var(--font);background:var(--paper);color:var(--ink); }
.debt-text-count { text-align:right;color:var(--ink-2); }
.debt-presets { display:flex;gap:8px;flex-wrap:wrap; }
.debt-presets .btn { white-space:normal;text-align:left;min-height:36px; }
@media (max-height:540px) and (min-width:600px) {
 .modal.debt-phone-modal { width:600px; }
 .debt-phone { min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:12px; }
 .phone-status { grid-column:1/-1; }
 .phone-contact,.is-call .phone-contact { grid-column:1;grid-row:2/5;justify-content:center;flex-direction:column;text-align:center;padding:8px;border:0; }
 .phone-call-state,.debt-phone .debt-message-log,.phone-call-actions,.phone-reply,.phone-footer { grid-column:2; }
 .debt-phone .debt-message-log { max-height:90px;min-height:60px; }
 .phone-round span { width:36px;height:36px;font-size:22px;margin-bottom:4px; }
 .phone-home { grid-column:1/-1; }
}
@media (prefers-reduced-motion:reduce) { .is-ringing .phone-contact .sc-av { animation:none; } }
body.lowfx .is-ringing .phone-contact .sc-av { animation:none; }

/* Smartphone refinement: physical bezel, camera island and native screen hierarchy. */
/* Screen radius 34px + 6px bezel + 1px rim = concentric 41px outer corners.
   Explicit portrait selector prevents generic modal padding/radius overrides. */
.modal.debt-phone-modal, body.portrait .modal.debt-phone-modal { width:352px; padding:6px; border:1px solid #68707b; border-radius:41px; background:#08090d; box-shadow:0 0 0 1px #171a21; max-width:calc(100vw - 28px); overflow:hidden; }
.debt-phone-modal:focus { outline:none; }
.debt-phone { min-height:0; height:min(650px,calc(100dvh - 60px)); border:0;border-radius:34px;padding:16px 16px 12px;gap:10px;background:#fff;color:#151519; font-family:-apple-system,BlinkMacSystemFont,'Be Vietnam Pro',sans-serif; }
.phone-status { height:27px;flex-shrink:0;padding:1px 7px 0;font-size:12px;align-items:center; }
.phone-status-icons { display:flex;align-items:center;gap:5px;font-size:10px; }
.phone-signal { font-size:10px;letter-spacing:-2px;font-style:normal; }
.phone-battery { display:block;position:relative;width:20px;height:10px;border:1px solid currentColor;border-radius:3px;padding:1px; }
.phone-battery:before { content:'';display:block;height:100%;width:85%;background:currentColor;border-radius:1px; }
.phone-battery:after { content:'';position:absolute;right:-3px;top:2px;width:2px;height:4px;background:currentColor; }
.phone-speaker { width:88px;height:24px;top:10px;left:calc(50% - 44px);border-radius:16px;background:#08090d; }
.phone-speaker i { position:absolute;right:9px;top:7px;width:9px;height:9px;background:#172a43;box-shadow:inset 2px 1px 0 #364a64;border-radius:50%; }
.phone-app-nav { display:flex;justify-content:space-between;align-items:center;height:22px;flex-shrink:0;font-size:12px;color:#287cf4; }
.phone-app-nav > span { font-size:30px;line-height:16px; }
.phone-app-nav b { margin-left:auto;font-size:16px; }
.phone-contact { flex-shrink:0;gap:8px;padding:0 0 12px;border-bottom:1px solid #ddd;flex-direction:column;text-align:center; }
.phone-contact .sc-av { width:44px;height:44px;flex-basis:44px;border-radius:50%;border:0;box-shadow:none; }
.phone-contact h2 { font:600 16px/1.3 -apple-system,BlinkMacSystemFont,'Be Vietnam Pro',sans-serif;margin:5px 0; }
.phone-contact small { display:none; }
.phone-contact .phone-sender-label { display:block;font-size:10px;line-height:1.4;letter-spacing:0;color:#666670; }
.is-call .phone-contact .phone-sender-label { color:#c8d3db; }
.phone-contact > div > span { font-size:11px;color:#7c7c83; }
.phone-call-state { font-size:10px;color:#82828a; }
.debt-phone .debt-message-log { min-height:50px;max-height:none;flex:1;padding:0 2px; }
.phone-bubble { background:#e9e9eb;border:0;box-shadow:none;border-radius:16px 16px 16px 4px;padding:10px 12px;margin:0 22px 10px 0; }
.phone-bubble > span { font-size:13px;line-height:1.5; }
.phone-bubble small { font-size:9px;color:#6a6a72;text-align:right; }
.phone-reply { flex-shrink:0;display:flex;align-items:center;gap:8px;border:0;padding:0;background:none;color:#838389; }
.phone-reply > b { font-size:24px;font-weight:400;background:#f0f0f3;border-radius:50%;width:30px;height:30px;text-align:center; }
.phone-reply > span { flex:1;border:1px solid #c7c7cd;border-radius:18px;padding:8px 12px;font-size:12px; }
.phone-reply > i { font-size:18px;background:#cccdd1;color:white;border-radius:50%;width:24px;height:24px;text-align:center;position:absolute;right:24px;font-style:normal; }
.phone-footer { flex-shrink:0;margin-top:4px; }
.debt-phone .debt-reminder-clock { font-size:10px;font-weight:500;margin-bottom:6px; }
.phone-footer small { font-size:8px;margin-top:5px; }
.phone-progress { height:3px;background:#e1e1e5;border-radius:2px; }
.phone-progress i { background:#3984ed; }
.phone-home { flex-shrink:0;width:100px;height:4px;background:#141418;opacity:1;margin:4px auto 0; }
.debt-phone.is-call { background:linear-gradient(160deg,#213b56 0%,#18334b 45%,#16333b 100%);color:#fff; }
.is-call .phone-app-nav { justify-content:center;color:#bbc8d1;font-size:11px; }
.is-call .phone-contact { padding:12px 0 0;border:0;gap:14px; }
.is-call .phone-contact .sc-av { width:88px;height:88px;flex-basis:88px;border-radius:50%;box-shadow:0 0 0 5px #ffffff0d; }
.is-call .phone-contact h2 { font-size:26px;font-weight:500; }
.is-call .phone-contact > div > span { color:#c8d3db; }
.is-call .phone-call-state { color:#c8d3db;font-size:13px; }
.is-call .debt-message-log { display:flex;align-items:center;min-height:40px; }
.is-call .phone-bubble { width:100%;background:#ffffff12;color:#fff;border:0;box-shadow:none;text-align:center;border-radius:14px;margin:0; }
.is-call .phone-bubble small { color:#c3d0d7; }
.phone-call-tools { display:flex;justify-content:space-around;flex-shrink:0;text-align:center;color:#ebf2f6;font-size:22px;padding:4px 0; }
.phone-call-tools small { display:block;font-size:10px;margin-top:4px; }
.phone-call-actions { flex-shrink:0;padding:4px 4px 8px;justify-content:space-between; }
.phone-round { font-size:11px; }
.phone-round span { width:56px;height:56px;border:0;box-shadow:none;font-size:28px;margin-bottom:8px; }
.phone-round.decline span { background:#f0444e; }
.phone-round.accept span { background:#2ac867; }
.is-call .phone-home { background:white; }
.is-call .phone-progress { background:#ffffff25; }
.is-call .phone-progress i { background:#83c3d4; }
@media (max-height:540px) and (min-width:600px) {
 .modal.debt-phone-modal { width:352px;max-height:none;zoom:.53; }
 .debt-phone { display:flex;height:600px;min-height:0;padding:16px;gap:10px; }
 .phone-contact,.is-call .phone-contact { flex-direction:column;padding:12px 0; }
 .debt-phone .debt-message-log { max-height:none;min-height:50px; }
 .phone-round span { width:56px;height:56px;font-size:28px; }
}
@media (max-height:700px) and (max-width:599px) {
 .debt-phone { gap:6px; }
 .is-call .phone-contact { padding:0;gap:6px; }
 .is-call .phone-contact .sc-av { width:52px;height:52px;flex-basis:52px; }
 .phone-round span { width:44px;height:44px; }
 .phone-call-tools { display:none; }
}

/* Kinh doanh: mở rộng danh mục trong panel cuộn sẵn có. */
#panel[data-panel="manage"] .lx-mk-card.biz-option {
  min-width: 0; gap: 8px; padding: 12px; border: 2px solid var(--ink);
  border-radius: 4px; background: var(--paper); box-shadow: var(--shadow-sm);
  overflow-wrap: anywhere;
}
.biz-campaigns, .biz-tournaments { gap: 12px; margin: 12px 0; }
.biz-tournaments { display: grid; grid-template-columns: 1fr; }
.biz-option .btn { min-height: 44px; margin-top: auto; white-space: normal; }
.biz-option .stage-req { margin: 0; }
.biz-option strong { color: var(--ink); }
#panel[data-panel="manage"] .gig-job .btn { min-height: 44px; min-width: 44px; }

/* Chat reply: compact quotation and cancellable composer context. */
.sc-quote, .sc-reply-draft { border:2px solid var(--ink-2); border-left:4px solid var(--green); border-radius:4px; background:var(--paper-2); color:var(--ink); padding:8px; text-align:left; }
.sc-quote { display:block; width:100%; margin:4px 0 8px; font:inherit; min-height:44px; }
.sc-quote b, .sc-quote span, .sc-reply-draft span, .sc-reply-draft small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-quote b, .sc-reply-draft small { font-weight:800; }
.sc-reply-draft { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.sc-reply-draft > div { flex:1; min-width:0; }
.sc-reply-draft .sc-x2 { min-width:44px; min-height:44px; }
.sc-quote:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }
.sc-reply-highlight .sc-bubble { outline:3px solid var(--yellow); outline-offset:2px; }

/* Danh vọng: dùng khung nhiệm vụ chung, số lớn vẫn xuống dòng trên touch. */
.fame-road { border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); }
.fame-road p { margin: 8px 0; overflow-wrap: anywhere; }
.fame-road details { margin-top: 12px; border-top: 2px solid var(--line); padding-top: 8px; }
.fame-road summary { cursor: pointer; font-weight: 700; min-height: 44px; padding: 8px 0; }
.fame-road summary:focus-visible { outline: 2px solid var(--green-d); outline-offset: 2px; }

/* Emergency finance uses the existing panel, buttons and scroll region. */
.finance-recovery { margin:12px 0; padding:12px; border:2px solid var(--ink); border-radius:4px; background:var(--paper-2); box-shadow:var(--shadow-sm); }
.finance-recovery > b { color:var(--red); font-family:var(--display); font-size:18px; }
.finance-recovery p { margin:8px 0; }
.liquidation-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0; border-top:1px solid var(--line); }
.liquidation-row > div { min-width:0; }
.liquidation-row b,.liquidation-row small { display:block; overflow-wrap:anywhere; }
.liquidation-row small { color:var(--ink-2); margin-top:4px; }
.liquidation-row .btn { flex-shrink:0; min-height:44px; margin:0; }
@media(max-width:560px) { .liquidation-row { align-items:stretch; flex-direction:column; } .liquidation-row .btn { width:100%; } }

/* Explain customer-help objectives at the point where players discover them. */
.request-goal-help { margin-top:8px; padding:8px; border:2px solid var(--line); border-radius:4px; background:var(--paper-2); font-size:13px; line-height:1.5; }
.request-goal-help p { margin:0 0 8px; }
.request-goal-help summary { cursor:pointer; font-weight:800; min-height:44px; display:flex; align-items:center; text-decoration:underline; }
.request-goal-help summary:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.request-goal-help details[open] summary { margin-bottom:4px; }
.request-goal-help .btn { width:100%; min-height:44px; white-space:normal; }

.request-goal-help summary::before { content:'+'; margin-right:8px; font-weight:800; }
.request-goal-help details[open] summary::before { content:'−'; }