:root {
  --bg: #0f1222;
  --bg2: #171b33;
  --panel: #1e2344;
  --panel2: #282e56;
  --line: #313867;
  --text: #eceeff;
  --muted: #9aa3d0;
  --accent: #3ee6c1;
  --accent2: #ff5fa2;
  --warn: #ffb547;
  --bad: #ff5c6c;
  --good: #4fe38a;
  --gold: #ffcf4a;
  --t1: #7b95ff;
  --t2: #3ee6c1;
  --t3: #ffcf4a;
  --t4: #d38bff;
  --radius: 14px;
}

/* Đăng nhập và chọn bản lưu: đủ rộng để thao tác trên điện thoại. */
.cloud-panel { display: grid; gap: 12px; }
.cloud-panel p { margin: 0 0 8px; line-height: 1.6; }
.cloud-panel form { display: grid; gap: 8px; margin-bottom: 14px; }
.cloud-panel label { display: grid; gap: 5px; }
.cloud-panel input { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #FFFDF4; color: #3A2A22; font: inherit; font-size: 16px; }
.cloud-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cloud-choices > div { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.cloud-choices .btn { width: 100%; }
.cloud-status { max-width: 340px; margin: 4px auto; }
@media(max-width:420px) { .cloud-choices { grid-template-columns: 1fr; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(123, 149, 255, .16), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(255, 95, 162, .12), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: 'Be Vietnam Pro', system-ui, 'Segoe UI', sans-serif;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; touch-action: manipulation; }
/* Game: chạm vào chữ không bôi đen, chạm giữ không hiện menu copy / tìm Google */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
[data-hit], .cust, .pk, .ipill { touch-action: manipulation; }
h1, h2, h3, h4 { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 10px; }
.center { text-align: center; }
.neg { color: var(--bad) !important; }
.warn-text { color: var(--warn); }
kbd { background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; font-size: 12px; }

/* ---------- Nút ---------- */
.btn {
  border: 0; border-radius: 12px; padding: 10px 16px;
  background: var(--panel2); color: var(--text); font-weight: 600; cursor: pointer;
  transition: transform .08s, background .15s, box-shadow .15s, opacity .15s;
}
.btn:hover { background: #333a6c; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #2bb8ff); color: #051420; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.ghost:hover { background: rgba(255, 255, 255, .05); }
.btn.danger { color: #ff8a96; border-color: rgba(255, 92, 108, .4); }
.btn.small { padding: 6px 12px; font-size: 13.5px; }
.btn.big { padding: 14px 28px; font-size: 18px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }

.btn.hold {
  width: 100%; padding: 16px; font-size: 17px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent2), #ff9a5f); color: #22060f;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.btn.hold.holding {
  transform: scale(.97);
  box-shadow: 0 0 0 4px rgba(255, 95, 162, .35), 0 0 30px rgba(255, 95, 162, .55);
}

/* ---------- Màn hình ---------- */
.screen { display: none; min-height: 100vh; flex-direction: column; }
.screen.active { display: flex; }

#screen-title { align-items: center; justify-content: center; padding: 24px 16px; }
.title-card { text-align: center; max-width: 520px; }
.logo { font-size: 64px; animation: bob 2.4s ease-in-out infinite; }
.title-card h1 {
  font-size: clamp(40px, 9vw, 64px); font-weight: 800; letter-spacing: -.02em; margin: 8px 0;
  background: linear-gradient(90deg, var(--accent), #8fb1ff, var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(62, 230, 193, .25);
}
.tagline { color: var(--muted); font-size: 17px; margin: 0 0 28px; }
.title-buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.title-buttons .btn { min-width: 220px; }

/* ---------- HUD ---------- */
.hud {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 10px 16px; background: rgba(23, 27, 51, .92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.hud-item { display: flex; flex-direction: column; line-height: 1.15; }
.hud-item .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hud-item b { font-size: 19px; font-variant-numeric: tabular-nums; }
#hud-clock { color: var(--gold); }
.hud-spacer { flex: 1; }

/* ---------- Buổi sáng ---------- */
.prep-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; padding: 16px; flex: 1; align-items: start; }
.panel { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.panel h2 { font-size: 19px; margin-bottom: 2px; }
.stock-row, .up-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.stock-row:last-child, .up-row:last-child { border-bottom: 0; }
.si { font-size: 28px; text-align: center; }
.locked, .owned { opacity: .55; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07); white-space: nowrap; }
.chip.warn { background: rgba(255, 181, 71, .16); color: #ffd08a; }
.chip.bad { background: rgba(255, 92, 108, .18); color: #ff9aa5; }
.chip.t1 { color: var(--t1); } .chip.t2 { color: var(--t2); } .chip.t3 { color: var(--t3); } .chip.t4 { color: var(--t4); }
.machines { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; }
.prep-footer {
  position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: rgba(23, 27, 51, .95); border-top: 1px solid var(--line);
}
.prep-footer .hint { margin: 0; }

/* ---------- Khách ở cửa (thẻ chờ) ---------- */
.empty { color: var(--muted); font-size: 13px; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.cust {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; background: var(--panel); border: 2px solid var(--line); border-radius: 12px;
  padding: 8px 10px 11px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.cust.enter { animation: slideIn .3s ease-out; }
.cust .avatar { font-size: 30px; line-height: 1; }
.cust .req { display: flex; flex-direction: column; font-size: 14px; }
.cust .req span { color: var(--muted); font-size: 13px; }
.cust.lost { opacity: .7; border-style: dashed; }
.cust.lost .req span { color: var(--bad) !important; }
.cust.lost .patience i { background: var(--muted) !important; }
.patience { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .06); }
.patience i, .pbar i { display: block; height: 100%; background: var(--good); transition: background .3s; }
.patience i.mid { background: var(--warn); }
.patience i.low, .pbar i.low { background: var(--bad); }
#log { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.log-line { animation: fadeIn .3s; }
.log-line:first-child { color: var(--text); }

#pause-overlay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center;
  background: rgba(15, 18, 34, .8); border-radius: 16px; font-size: 22px; font-weight: 800; z-index: 5; padding: 16px;
}
.paused #pause-overlay { display: flex; }

/* ---------- Trong ngày: màn dọc (cảnh quán ở trên, quầy thao tác ở dưới) ---------- */
/* Bảng màu dùng chung cho các màn và cửa sổ trong quán. */
.warm {
  --bg2: #F6ECD7; --panel: #FFFDF5; --panel2: #EFE2C8; --line: #D9C5A4;
  --text: #453429; --muted: #79644F; --accent: #238D80; --accent2: #D97956;
  --warn: #C97A10; --bad: #C0392B; --good: #2E9E5B; --gold: #C98A10;
  --t1: #5F7394; --t2: #137A70; --t3: #B7791F; --t4: #7C4DD6;
  color: var(--text);
}
#screen-play { align-items: center; }
.play-col {
  width: min(100%, 480px); min-height: 100vh; display: flex; flex-direction: column;
  background: #FFF6E3; box-shadow: 0 0 40px rgba(0, 0, 0, .45);
}
.phud {
  height: 48px; box-sizing: border-box;
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 5px;
  padding: 8px 8px; background: #FFF6E3; border-bottom: 1px solid var(--line);
}
.phud-sp { flex: 1; }
.ppill {
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  background: #fff; border: 1.5px solid var(--line); border-radius: 99px; padding: 3px 8px; font-size: 12px;
}
.ppill b { font-size: 14px; font-variant-numeric: tabular-nums; }
#screen-play #hud-clock { color: var(--text); }
#hud-money.neg { color: var(--bad); }
.icon-btn {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--text); font-weight: 800;
}
.icon-btn:active { transform: scale(.94); }

.scene-wrap { position: sticky; top: 48px; z-index: 6; background: #F2DFB4; box-shadow: 0 6px 12px -8px rgba(58, 42, 34, .35); }
#scene { display: block; width: 100%; height: auto; max-height: 46vh; aspect-ratio: 760 / 680; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.rows { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 5px; }
.rows button {
  position: relative; border: 1.5px solid #CFAE7C; background: #FFFDF4; color: var(--text); border-radius: 99px;
  padding: 2px 10px; font-size: 12.5px; font-weight: 800; cursor: pointer; line-height: 1.15;
}
.rows button small { display: block; font-size: 10px; font-weight: 600; color: var(--muted); }
.rows button.on { background: var(--accent); border-color: #137A70; color: #fff; }
.rows button.on small { color: #E1F6F2; }
.rows button.alert::after {
  content: ''; position: absolute; top: -3px; right: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bad); border: 2px solid #FFFDF4; animation: sc-pulse 1s ease-in-out infinite alternate;
}
#screen-play #pause-overlay { border-radius: 0; background: rgba(42, 33, 28, .72); color: #FFF6E3; }

/* Quầy thao tác */
.dock { flex: 1; position: relative; display: flex; flex-direction: column; background: #FBF1DA; border-top: 4px solid #A86F45; padding: 14px 12px 16px; }
.dock::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: #C8905E; }
.dock.open .dock-door { display: none; }
.dock-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.dock-head h3, .dock-title { font-family: 'VT323', monospace; font-weight: 400; font-size: 19px; }
/* nút đóng cửa, cửa cuốn, tua nhanh */
.play-actions { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px; background: #FFF6E3; border-top: 1px solid var(--line); }
.play-actions .btn { min-height: 44px; padding: 8px 10px; font-size: 13px; }
.play-actions .btn[hidden] { display: none; }

/* Máy tính chủ: app đủ rộng để chạm, nội dung cuộn riêng và nút đóng luôn ở ngoài. */
.modal-host { width: min(680px, 100%); }
.modal-host .modal-body { min-height: 0; overflow-y: auto; }
.host-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.host-toolbar > b { margin-left: auto; }
.host-status { color: #137A70; background: #E1F6F2; border-radius: 10px; padding: 10px; }
.host-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.host-app { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 120px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: #FFFDF4; color: var(--text); cursor: pointer; font: inherit; }
.host-app > span { font-size: 30px; }
.host-app small { color: var(--muted); font-size: 11px; }
.host-app:hover, .host-app:focus-visible { background: #E1F6F2; outline: 2px solid #1FA89A; }
.host-news { border-bottom: 1px dashed var(--line); padding: 10px 0; }
.host-news h3 { margin: 0 0 6px; }
.host-news p { margin: 6px 0; }
.host-reply { background: #E1F6F2; border-left: 3px solid #1FA89A; padding: 10px; margin: 0 0 16px; border-radius: 8px; }
.host-reply-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.host-reply-editor { margin-bottom: 16px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.host-reply-editor summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.host-reply-editor summary::after { content: '▾'; margin-left: auto; }
.host-reply-editor[open] summary::after { content: '▴'; }
.host-reply-editor label { display: block; margin: 8px 0 4px; }
.host-reply-editor textarea, .host-reply-editor select { width: 100%; min-width: 0; font: inherit; user-select: text; }
.host-reply-editor select { min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #FFFDF4; }
.host-reply-editor textarea { resize: vertical; min-height: 90px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.host-reply-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.modal-host .btn { min-height: 44px; }
.host-bets { display: grid; gap: 10px; }
.host-bets > div { padding: 10px; background: #FFFDF4; border: 1px solid var(--line); border-radius: 10px; }
.host-bets > div > div { display: flex; gap: 8px; margin-top: 8px; }
.host-bets .btn { flex: 1; }
.host-dice-result { text-align: center; padding: 12px; background: #FFFDF4; border-radius: 12px; margin-top: 14px; }
.host-dice { display: flex; justify-content: center; gap: 10px; font-size: 48px; color: var(--text); }
.host-bets input { display: block; width: 100%; min-width: 0; margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.host-ban { padding: 12px; margin: 12px 0; border: 2px solid #A83226; border-radius: 10px; background: #FFFDF4; }
.host-ban .btn { min-height: 44px; }
.modal-gambling .modal-actions .btn { min-height: 44px; }
.dice-rolling span { display: inline-block; animation: dice-roll .22s linear infinite; }
.dice-rolling span:nth-child(2) { animation-direction: reverse; }
.dice-rolling span:nth-child(3) { animation-delay: -.1s; }
@keyframes dice-roll { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(180deg) translateY(-7px); } 100% { transform: rotate(360deg) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dice-rolling span { animation: none; } }
.host-monitor { cursor: pointer; }
.host-monitor:focus-visible { outline: 3px solid #1FA89A; }
.modal.modal-host { display: flex; flex-direction: column; width: min(680px, 100%); overflow: hidden; }
.modal-host .modal-title, .modal-host .modal-actions { flex: none; }
.modal-host .modal-body { flex: 1; }
.warm .modal-host .modal-actions { position: static; margin-top: 12px; padding: 10px 0 0; }
@media (min-width: 600px) { .host-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.play-actions .door-ctl { margin-left: auto; }
#screen-play .play-actions #btn-catch-thief { background: #C0392B; color: #fff; border-color: #C0392B; }
.door-ctl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-self: center; }
.door-ctl .btn.small { padding: 5px 10px; font-size: 12.5px; }
#screen-play #btn-close { background: #3B3561; color: #FFF6E3; border: 1px solid #2A2547; }
#screen-play #btn-close.warn { background: var(--bad); border-color: var(--bad); }
#screen-play #btn-shutter.on { background: #6B5B4B; color: #FFF6E3; }
.speed-btn { width: auto; padding: 0 8px; border-radius: 99px; font-size: 12.5px; }
.speed-btn.on { background: var(--accent); border-color: #137A70; color: #fff; }
#screen-play #queue { display: flex; flex-direction: row; gap: 8px; overflow-x: auto; padding: 6px 2px 8px; scroll-snap-type: x proximity; }
#screen-play .empty { flex: 1; border-color: var(--line); color: var(--muted); }
#screen-play .cust {
  flex: 0 0 auto; width: 148px; scroll-snap-align: start; flex-direction: row; align-items: center; gap: 6px;
  background: #fff; border: 2px solid var(--line); padding: 6px 8px 10px; color: var(--text);
}
#screen-play .cust:hover { transform: translateY(-2px); }
#screen-play .cust.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 168, 154, .25); }
#screen-play .cust .face { width: 42px; height: 45px; flex: none; }
#screen-play .cust .req { font-size: 13px; min-width: 0; }
#screen-play .cust .req b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#screen-play .cust .req span { font-size: 11.5px; color: var(--muted); }
#screen-play .cust.want-2 .req span { color: var(--t2); }
#screen-play .cust.want-3 .req span { color: var(--t3); }
#screen-play .cust.want-4 .req span { color: var(--t4); }
#screen-play .cust .cust-reg { color: #B7791F !important; }
#screen-play .patience { background: #EFE3C8; height: 5px; }
.patience.checkin-patience { position: static; height: 6px; border-radius: 3px; overflow: hidden; margin: 2px 0 4px; }
.dock-hint { font-weight: 700; font-size: 13.5px; color: #137A70; min-height: 20px; margin-top: 2px; }
.staff-task-btn { width: 100%; margin-top: 5px; }
.staff-task-btn[hidden] { display: none; }
#screen-play #log { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }

.dock-card { display: flex; flex-direction: column; gap: 8px; animation: dockIn .2s ease-out; }
@keyframes dockIn { from { opacity: 0; transform: translateY(10px); } }
.dock-card-head { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.dock-close { width: 30px; height: 30px; }
.dock-body { display: flex; flex-direction: column; gap: 8px; }
.dock-actions {
  position: sticky; bottom: 0; display: flex; gap: 8px; padding: 10px 0 2px; margin-top: 2px;
  background: linear-gradient(rgba(251, 241, 218, 0), #FBF1DA 35%);
}
.dock-foot { position: sticky; bottom: 0; z-index: 2; background: linear-gradient(rgba(251, 241, 218, 0), #FBF1DA 18%); }
.dock-foot .dock-actions { position: static; background: none; }
.dock-actions .btn { flex: 1; }
.dock-actions .btn.ghost { flex: 0 1 auto; padding: 10px 11px; font-size: 13px; }
.dock-actions .btn.primary { flex: 1 0 auto; }
#screen-play .station.later { order: 5; padding: 6px 10px; }
#screen-play .station.later .pot { width: 64px; }

#screen-play .btn { background: #fff; border: 1.5px solid var(--line); color: var(--text); }
#screen-play .btn:hover { background: #FFF9EA; }
#screen-play .btn.primary { background: #1FA89A; border-color: #137A70; color: #fff; box-shadow: 0 3px 0 #137A70; }
#screen-play .btn.ghost { background: transparent; }
#screen-play .btn.danger { color: var(--bad); border-color: #F2B8B0; }
#screen-play .btn.hold { border: 0; background: #F07A5A; color: #fff; box-shadow: 0 4px 0 #C95A3F; }
#screen-play .btn.hold.holding { transform: translateY(3px); box-shadow: 0 1px 0 #C95A3F, 0 0 0 5px rgba(240, 122, 90, .28); }
#screen-play .warn { color: #8A4B08; background: #FFF1D6; border-color: #F2CF8A; margin: 0; }
#screen-play .note { color: #137A70; background: #E1F6F2; border-color: #9EDDD2; margin: 0; }
#screen-play .chip { background: #fff; border: 1px solid var(--line); color: var(--text); }
#screen-play .hint { color: var(--muted); }
#screen-play .muted { color: var(--muted); }

/* Quầy nạp giờ */
.checkin { display: flex; flex-direction: column; gap: 8px; }
#screen-play .talk { margin: 0; gap: 8px; align-items: flex-start; }
.talk .face { width: 62px; height: 66px; flex: none; }
#screen-play .speech {
  background: #fff; border: 1.5px solid var(--line); color: var(--text); border-radius: 14px; padding: 6px 10px;
  font-family: 'VT323', monospace; font-weight: 400; font-size: 22px; line-height: 1.05;
}
#screen-play .speech small { font-family: 'Be Vietnam Pro', sans-serif; color: var(--muted); font-size: 12px; }
#screen-play .speech::before { display: none; }
.checkin .want { margin: 0; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.pk {
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 5px 4px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; line-height: 1.2; color: var(--text);
}
.pk b { font-size: 13px; }
.pk small { font-size: 11px; font-weight: 700; }
.pk.ok small { color: #137A70; }
.pk.bad small { color: var(--bad); }
.pk.off small { color: var(--muted); }
.pk.sel { border: 2.5px solid #1FA89A; background: #EAF8F5; }
.pk:disabled { opacity: .45; cursor: not-allowed; }
.assign-line { font-size: 13.5px; }
#screen-play .fill { background: #FFFDF4; border: 2px solid #CFAE7C; margin: 8px 0 24px; height: 34px; }
#screen-play .fill-level { background: linear-gradient(90deg, #F6D27A, #F2B632); }
#screen-play .fill-zone { background: rgba(31, 168, 154, .22); border-color: #1FA89A; }
#screen-play .fill-mark { background: #137A70; box-shadow: none; }
#screen-play .fill-tick { color: var(--muted); font-weight: 700; }
#screen-play .readout { margin: 0; font-size: 13.5px; }
#screen-play .readout b { color: var(--text); font-size: 20px; }

/* Bếp */
#screen-play .kitchen { display: flex; flex-direction: column; gap: 8px; }
#screen-play .ticket { background: #FFFDF4; color: var(--text); border: 1.5px dashed #D9B98A; box-shadow: none; padding: 8px 10px; }
#screen-play .ticket-head { display: flex; gap: 8px; align-items: center; border: 0; padding: 0; margin: 0 0 6px; font-size: 13.5px; }
.ticket-head .face { width: 40px; height: 43px; flex: none; }
.ticket-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ticket-items .it { font-family: 'VT323', monospace; font-size: 20px; background: #F6EBD4; border-radius: 6px; padding: 0 7px; }
#screen-play .pbar { background: #EFE3C8; }
#screen-play .tray { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; background: #fff; }
#screen-play .tray-head { margin: 0; }
#screen-play .tray-items .chip { background: #F6EBD4; border: 0; }
#screen-play .tray-items em { color: #B7791F; }
#screen-play .station { background: #F3E6CB; border: 1.5px solid #E0CC9F; padding: 8px 10px 10px; }
#screen-play .station.dim { opacity: .65; }
#screen-play .station h4 { font-size: 14px; margin-bottom: 6px; }
.cook-row { display: flex; gap: 10px; align-items: center; }
.pot { width: 108px; flex: none; }
.pot svg { display: block; width: 100%; height: auto; }
.cook-side { flex: 1; min-width: 0; }
#screen-play .row { gap: 6px; }
#screen-play .stock-btn { min-width: 70px; padding: 5px 8px; background: #fff; border-color: var(--line); color: var(--text); font-size: 12.5px; }
#screen-play .stock-btn .si { font-size: 22px; }
#screen-play .stock-btn:hover:not(:disabled) { border-color: #1FA89A; }
#screen-play .cook-area .fill { margin-bottom: 26px; }
#screen-play .fill.vertical { width: 70px; height: 120px; margin: 0 auto; background: rgba(255, 255, 255, .7); }

/* Chuyển động của cảnh (tên keyframe có tiền tố sc- để không đụng hiệu ứng cũ) */
#screen-play .chalk { font-family: 'VT323', monospace; }
#screen-play .marker { font-family: 'VT323', monospace; font-weight: 700; }
#screen-play .baloo { font-family: 'VT323', monospace; font-weight: 400; }
#scene [data-hit] { cursor: pointer; }
#scene .sc-st:hover .hl { opacity: 1; }
#scene .hl { opacity: 0; transition: opacity .15s; }
#scene .sc-cust:hover { filter: brightness(1.06); }
#screen-play .spin { animation: sc-spin .32s linear infinite; transform-box: fill-box; transform-origin: center; }
#screen-play .spin-slow { animation: sc-spin 2.4s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
#screen-play .rgb { animation: sc-hue 5s linear infinite; }
@keyframes sc-hue { to { filter: hue-rotate(360deg); } }
/* ánh màn hình chập chờn như đang đổi cảnh game · đèn nháy so le · biển neon thỉnh thoảng chớp */
#screen-play .tv { animation: sc-tv 2.6s steps(1) infinite; }
@keyframes sc-tv { 0% { opacity: 1; } 18% { opacity: .82; } 31% { opacity: 1; } 47% { opacity: .9; } 63% { opacity: .74; } 70% { opacity: 1; } 88% { opacity: .86; } }
#screen-play .twinkle { animation: sc-twinkle 1.6s ease-in-out infinite alternate; }
@keyframes sc-twinkle { to { opacity: .25; } }
#screen-play .blink { animation: sc-blink 3.2s steps(1) infinite; }
@keyframes sc-blink { 0%, 100% { opacity: 1; } 91% { opacity: .2; } 94% { opacity: 1; } 96% { opacity: .35; } }

/* TV treo tường (tv.js): cảnh game pixel, mọi chuyển động nhảy từng ô (steps) cho đúng chất pixel */
#screen-play .px-blink { animation: px-blink 1.2s steps(1) infinite; }
@keyframes px-blink { 0%, 100% { opacity: 0; } 50% { opacity: .35; } 75% { opacity: .55; } }
#screen-play .px-blink-slow { animation: px-fade 4s steps(4) infinite alternate; }
@keyframes px-fade { from { opacity: 0; } to { opacity: .6; } }
#screen-play .px-flash { animation: px-flash 2.4s steps(1) infinite; }
@keyframes px-flash { 0%, 55%, 70%, 100% { opacity: 0; } 58%, 66% { opacity: 1; } 62% { opacity: .4; } }
#screen-play .px-moba-a { animation: px-moba-a 2.4s steps(8) infinite; }
@keyframes px-moba-a { 0%, 15% { transform: translate(0, 0); } 55%, 70% { transform: translate(14px, -6px); } 100% { transform: translate(0, 0); } }
#screen-play .px-moba-b { animation: px-moba-b 2.4s steps(8) infinite; }
@keyframes px-moba-b { 0%, 15% { transform: translate(0, 0); } 55%, 70% { transform: translate(-14px, 6px); } 100% { transform: translate(0, 0); } }
#screen-play .px-ball { animation: px-ball 3s steps(16) infinite; }
@keyframes px-ball { 0% { transform: translate(8px, 14px); } 25% { transform: translate(30px, 6px); } 50% { transform: translate(54px, 16px); } 75% { transform: translate(30px, 22px); } 100% { transform: translate(8px, 14px); } }
#screen-play .px-chase-a { animation: px-chase-a 3s steps(12) infinite; }
@keyframes px-chase-a { 0% { transform: translate(14px, 18px); } 50% { transform: translate(48px, 18px); } 100% { transform: translate(14px, 18px); } }
#screen-play .px-chase-b { animation: px-chase-b 3s steps(12) infinite; }
@keyframes px-chase-b { 0% { transform: translate(40px, 10px); } 50% { transform: translate(24px, 12px); } 100% { transform: translate(40px, 10px); } }
#screen-play .px-peek { animation: px-peek 2.4s steps(3) infinite; }
@keyframes px-peek { 0%, 30% { transform: translateY(5px); } 45%, 75% { transform: translateY(0); } 90%, 100% { transform: translateY(5px); } }
#screen-play .px-jump { animation: px-jump 1.4s steps(4) infinite; }
@keyframes px-jump { 0%, 40%, 100% { transform: translateY(0); } 60% { transform: translateY(-5px); } 80% { transform: translateY(-2px); } }
#screen-play .px-wave { animation: px-wave 3s steps(8) infinite; }
@keyframes px-wave { to { transform: translateX(-16px); } }
#screen-play .px-bob { animation: px-bob 1.6s steps(2) infinite; }
@keyframes px-bob { 50% { transform: translateY(1px); } 85% { transform: translateY(2px); } }
#screen-play .px-fishjump { animation: px-fishjump 5s steps(10) infinite; }
@keyframes px-fishjump {
  0%, 60% { transform: translate(44px, 32px); } 68% { transform: translate(47px, 13px); } 76% { transform: translate(51px, 9px); }
  84% { transform: translate(55px, 14px); } 92%, 100% { transform: translate(58px, 32px); }
}
#screen-play .px-disco { animation: px-blink-on 1s steps(1) infinite; }
#screen-play .px-disco.d1 { animation-delay: -.33s; }
#screen-play .px-disco.d2 { animation-delay: -.66s; }
@keyframes px-blink-on { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#screen-play .px-scroll { animation: px-scroll 1.8s steps(9) infinite; }
@keyframes px-scroll { from { transform: translateY(9px); } to { transform: translateY(-9px); } }
#screen-play .px-dancer { animation: px-dancer .9s steps(2) infinite; }
@keyframes px-dancer { 50% { transform: translate(1px, -1px); } }
#screen-play .px-road { animation: px-road .6s steps(3) infinite; }
@keyframes px-road { to { transform: translateY(7px); } }
#screen-play .px-car { animation: px-car 2.8s steps(6) infinite; }
@keyframes px-car { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }
#screen-play .px-breath { animation: px-breath 2s steps(2) infinite; }
@keyframes px-breath { 50% { transform: translateY(1px); } }
#screen-play .px-died { animation: px-died 7s steps(1) infinite; }
@keyframes px-died { 0%, 72%, 100% { opacity: 0; } 75%, 95% { opacity: 1; } }
#screen-play .px-live { animation: sc-blink 2.4s steps(1) infinite; }

/* Đồ đạc theo nâng cấp (decor.js): quạt treo tường quay + lắc qua lại, gió máy lạnh, đèn router, ổ điện tóe lửa */
#screen-play .dc-sway { animation: dc-sway 3.2s ease-in-out infinite alternate; }
@keyframes dc-sway { from { transform: translateX(-3px) scaleX(.72) rotate(-4deg); } to { transform: translateX(3px) scaleX(.72) rotate(4deg); } 50% { transform: scaleX(1); } }
#screen-play .dc-spin { animation: dc-spin .32s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dc-spin { to { transform: rotate(360deg); } }
#screen-play .dc-air { animation: dc-air 2.2s linear infinite; }
@keyframes dc-air { from { transform: translateY(-4px); opacity: 0; } 30% { opacity: .9; } to { transform: translateY(18px); opacity: 0; } }
#screen-play .dc-led { animation: dc-led 1s steps(1) infinite; }
@keyframes dc-led { 0%, 100% { opacity: 1; } 40% { opacity: .2; } 55% { opacity: 1; } 70% { opacity: .3; } }
#screen-play .dc-spark { animation: dc-spark 4.5s steps(1) infinite; }
@keyframes dc-spark { 0%, 86%, 100% { opacity: 0; } 88%, 93% { opacity: 1; } 90% { opacity: .3; } }
#scene .tap { animation: sc-tap .22s ease-in-out infinite alternate; }
@keyframes sc-tap { to { transform: translateY(-3px); } }
#scene .jig { animation: sc-jig 1.1s ease-in-out infinite; }
@keyframes sc-jig { 30% { transform: translate(-2px, 1px); } 60% { transform: translate(2px, -1px); } }
#scene .seat { transition: transform .25s ease-out; }
#scene .seat.nudge { transform: translateY(-7px); }
#scene .hop { animation: sc-hop .32s ease-in-out infinite alternate; }
@keyframes sc-hop { to { transform: translateY(-6px); } }
#scene .shake { animation: sc-shake .14s linear infinite alternate; }
@keyframes sc-shake { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
#scene .peek { animation: sc-peek 2.6s ease-in-out infinite; }
@keyframes sc-peek { 0%, 100% { transform: translateX(0); } 35%, 65% { transform: translateX(9px) rotate(4deg); } }
#scene .kick { animation: sc-kick .3s ease-in-out infinite alternate; }
@keyframes sc-kick { to { transform: translateY(-4px); } }
#scene .sit-in, #scene .sc-pop { animation: sc-sitin .35s ease-out; }
@keyframes sc-sitin { from { transform: translateY(-14px); opacity: .3; } }
#scene .walking .leg-l { animation: sc-legs .3s ease-in-out infinite alternate; }
#scene .walking .leg-r { animation: sc-legs .3s ease-in-out infinite alternate-reverse; }
@keyframes sc-legs { to { transform: translateY(-6px); } }
#scene .walking .upper { animation: sc-bob .3s ease-in-out infinite alternate; }
@keyframes sc-bob { to { transform: translateY(-3px); } }
#scene .held { animation: sc-jitter .11s linear infinite alternate; }
@keyframes sc-jitter { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-1px); } }
#scene .stir { animation: sc-stir .5s ease-in-out infinite alternate; }
@keyframes sc-stir { to { transform: translate(-6px, 3px); } }
#scene .breath { animation: sc-breath 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sc-breath { 50% { transform: scaleY(1.1); } }
#scene .ear { animation: sc-ear 5.5s infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sc-ear { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-22deg); } 94% { transform: rotate(8deg); } }
#scene .wag { animation: sc-wag .18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 100% 100%; }
@keyframes sc-wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
#scene .zzz text { animation: sc-zzz 3s ease-in infinite; opacity: 0; }
#scene .zzz text:nth-child(2) { animation-delay: 1s; }
#scene .zzz text:nth-child(3) { animation-delay: 2s; }
@keyframes sc-zzz { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -30px); } }
#screen-play .steam path { animation: sc-steam 2.4s ease-in-out infinite; opacity: 0; }
#screen-play .steam path:nth-child(2) { animation-delay: .8s; }
#screen-play .steam path:nth-child(3) { animation-delay: 1.6s; }
#screen-play .steam.strong path { animation-duration: 1.2s; }
@keyframes sc-steam { 0% { transform: translateY(6px) scaleX(.8); opacity: 0; } 30% { opacity: .75; } 100% { transform: translateY(-38px) scaleX(1.25); opacity: 0; } }
#scene #flame { opacity: 0; transition: opacity .2s; }
#scene #flame.on { opacity: 1; }
#scene #flame.on path, .pot .flame-on path { animation: sc-flick .12s linear infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sc-flick { to { transform: scaleY(1.25); } }
#scene .sc-bubble { animation: sc-pop .3s ease-out, sc-float 1.4s ease-in-out .3s infinite alternate; }
#scene .sc-bubble.faded { opacity: .45; }
@keyframes sc-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes sc-float { to { transform: translateY(-5px); } }
#scene .sc-ring { animation: sc-pulse 1s ease-in-out infinite alternate; }
@keyframes sc-pulse { from { opacity: .4; } to { opacity: 1; } }
#scene .sc-float { animation: sc-rise 1.6s ease-out forwards; pointer-events: none; }
@keyframes sc-rise { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }


/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(5, 7, 18, .72); backdrop-filter: blur(3px); animation: fadeIn .15s;
}
.modal {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 20px; padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55); animation: pop .2s ease-out;
}
.modal-kitchen { width: min(760px, 100%); }
.modal-title { font-size: 21px; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.warn { color: #ffd08a; background: rgba(255, 181, 71, .1); border: 1px solid rgba(255, 181, 71, .3); border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }
.note { color: var(--accent); background: rgba(62, 230, 193, .08); border: 1px solid rgba(62, 230, 193, .25); border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }

.talk { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.big-avatar { font-size: 54px; line-height: 1; }
.speech { position: relative; background: #fff; color: #161a2e; border-radius: 16px; padding: 10px 14px; font-size: 16px; font-weight: 600; }
.speech small { display: block; color: #6b7090; font-weight: 600; font-size: 12px; }
.speech::before { content: ''; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-right-color: #fff; border-left: 0; }
.assign { font-size: 14px; color: var(--muted); }
.assign b { color: var(--text); }
.readout { text-align: center; font-size: 15px; margin: 2px 0 12px; }
.readout b { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--gold); }

/* Thanh "đổ đầy" */
.fill { position: relative; height: 40px; margin: 14px 0 28px; background: #0a0d1c; border: 2px solid var(--line); border-radius: 12px; overflow: visible; }
.fill-level { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 10px; background: linear-gradient(90deg, #2bb8ff, var(--accent)); }
.fill-zone { position: absolute; top: 0; bottom: 0; background: rgba(255, 207, 74, .22); border-left: 2px dashed var(--gold); border-right: 2px dashed var(--gold); }
.fill-mark { position: absolute; top: -7px; bottom: -7px; width: 3px; margin-left: -1.5px; background: var(--gold); border-radius: 2px; box-shadow: 0 0 8px var(--gold); }
.fill-tick { position: absolute; top: 100%; transform: translateX(-50%); font-size: 11.5px; color: var(--muted); padding-top: 5px; white-space: nowrap; }
.fill-cook .fill-level { background: linear-gradient(90deg, #f7e3a1, #f2b84b 55%, #c7622a); }

.fill.vertical { width: 84px; height: 150px; margin: 0 auto; border-top: 0; border-radius: 4px 4px 18px 18px; overflow: hidden; }
.fill.vertical .fill-level { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 0; border-radius: 0; background: linear-gradient(0deg, #4a2912, #9a6334 55%, #f1dcc0); }
.fill.vertical .fill-zone { left: 0; right: 0; top: auto; border: 0; border-top: 2px dashed var(--gold); border-bottom: 2px dashed var(--gold); }
.fill.vertical .fill-mark { left: 0; right: 0; top: auto; bottom: auto; width: auto; height: 3px; margin: 0 0 -1.5px; }

/* Bếp */
.kitchen { display: grid; grid-template-columns: 210px 1fr; gap: 14px; }
.ticket {
  background: #fffbea; color: #2a2410; border-radius: 6px; padding: 12px 14px 14px; transform: rotate(-.6deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35); font-size: 14.5px; position: relative;
}
.ticket-head { border-bottom: 2px dashed #d6ccaa; padding-bottom: 6px; margin-bottom: 6px; }
.ticket ul { list-style: none; margin: 0 0 10px; padding: 0; }
.ticket li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-weight: 600; }
.pbar { height: 5px; background: #e8e0c4; border-radius: 3px; overflow: hidden; }
.tray { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.tray-head { font-weight: 700; margin-bottom: 8px; }
.tray-items { display: flex; flex-wrap: wrap; gap: 6px; }
.tray-items .chip { font-size: 13.5px; padding: 5px 10px; background: var(--panel2); }
.tray-items em { font-style: normal; color: var(--gold); }
.station { grid-column: 1 / -1; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.station h4 { font-size: 15px; margin-bottom: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.stock-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 96px;
  background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px;
  cursor: pointer; font-weight: 600; font-size: 13.5px; transition: border-color .15s, transform .08s;
}
.stock-btn .si { font-size: 26px; }
.stock-btn small { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.stock-btn:hover:not(:disabled) { border-color: var(--accent); }
.stock-btn:active:not(:disabled) { transform: scale(.95); }
.stock-btn:disabled { opacity: .35; cursor: not-allowed; }
.cook-area { margin-top: 6px; }
.pour-area { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.pour-side { flex: 1; }

/* Tổng kết ngày */
.sum-block { background: var(--panel); border-radius: 14px; padding: 6px 14px; }
.sum-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.sum-row:last-child { border-bottom: 0; }
.sum-row.up b { color: var(--good); }
.sum-row.down b { color: var(--bad); }
.sum-row.total { font-size: 18px; font-weight: 800; }
.sum-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.sum-stats div { background: var(--panel); border-radius: 12px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; }
.sum-stats b { font-size: 20px; }
.sum-stats span { font-size: 11.5px; color: var(--muted); }

.howto { padding-left: 20px; margin: 0 0 10px; line-height: 1.55; }
.sound-row { display: grid; grid-template-columns: 1fr minmax(100px, 160px) 3.2em; align-items: center; gap: 10px; margin: 0 0 14px; }
.sound-row label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.sound-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.sound-row b { text-align: right; font-variant-numeric: tabular-nums; }
.howto li { margin-bottom: 8px; }

/* Chữ bay */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.fx {
  position: fixed; transform: translate(-50%, 0); pointer-events: none; white-space: nowrap;
  font-weight: 800; font-size: 16px; text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
  animation: floatUp 1.5s ease-out forwards;
}
.fx.money { color: #7dffb5; font-size: 18px; }
.fx.good { color: var(--accent); }
.fx.warn { color: var(--warn); }
.fx.bad { color: #ff7f8c; }

/* Hiệu ứng hình ảnh (vfx.js) */
.vfx { position: fixed; pointer-events: none; transform: translate(-50%, -50%); will-change: transform, opacity; }
.vfx.coin {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF4B8 0 18%, #FFD23F 19% 60%, #E0A21B 61%);
  box-shadow: 0 0 0 1.5px #B47A12, 0 2px 4px rgba(0, 0, 0, .35);
}
/* viền trắng + bóng tối để nổi trên cả sàn sáng lẫn quán tối */
.vfx.spark { font-weight: 800; line-height: 1; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, .45); }
.vfx-bump { animation: vfx-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes vfx-bump { 30% { transform: scale(1.22); filter: brightness(1.15); } }
.vfx-shake { animation: vfx-shake .38s linear; }
@keyframes vfx-shake {
  15% { transform: translate(-4px, 2px) rotate(-.4deg); } 30% { transform: translate(4px, -2px) rotate(.4deg); }
  50% { transform: translate(-3px, 1px); } 70% { transform: translate(2px, -1px); } 85% { transform: translate(-1px, 0); }
}
.vfx-flicker { animation: vfx-flicker .7s steps(1); }
@keyframes vfx-flicker {
  0% { filter: brightness(.35); } 12% { filter: brightness(1.1); } 22% { filter: brightness(.25); } 34% { filter: brightness(.9); }
  48% { filter: brightness(.4); } 60% { filter: brightness(1); } 100% { filter: none; }
}
/* cửa cuốn: vân thép ngang bám đáy, thanh tay nắm ở mép dưới */
.vfx-shutter {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 20; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .25), transparent 6px) bottom / 100% 14px repeat-y,
    repeating-linear-gradient(to bottom, #9AA3A6 0 11px, #6F787C 11px 14px) bottom / 100% 100%;
  box-shadow: inset 0 -6px 0 #4E5659, 0 4px 10px rgba(0, 0, 0, .3);
}
.vfx-shutter-handle {
  position: absolute; left: 50%; bottom: 10px; width: 64px; height: 8px; margin-left: -32px;
  border-radius: 4px; background: #3F4649; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25);
}

/* ---------- Hiệu ứng ---------- */
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.85); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -56px) scale(1); }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(79, 227, 138, .2); } 50% { box-shadow: 0 0 0 5px rgba(79, 227, 138, .4); } }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .fx { animation: floatUp 1.5s linear forwards !important; }
}

/* ---------- Tên quán ---------- */
.hud-shop { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.hud-shop .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hud-shop b {
  font-size: 19px; color: var(--accent); max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom;
}
.shop-btn { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-size: 14px; }
.shop-btn:hover b { text-decoration: underline; text-underline-offset: 3px; }
.name-row { display: flex; gap: 8px; }
.name-input {
  flex: 1; min-width: 0; font: inherit; font-size: 18px; font-weight: 600; color: var(--text);
  background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px;
}
.name-input:focus { outline: none; border-color: var(--accent); }
.name-input.shake { animation: shake .1s 3; border-color: var(--bad); }
.name-dice { font-size: 20px; padding: 8px 14px; }
#btn-continue small { display: block; font-size: 13px; font-weight: 600; opacity: .75; }

/* ---------- Hàng cận date / hết date / công an ---------- */
.bad-text { color: #ff8a96; }
.chip.expired { background: rgba(255, 92, 108, .3); color: #ffd0d5; font-weight: 600; }
.stock-btns { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.stock-btns .btn { white-space: nowrap; }
.stock-btns .near { font-size: 12px; padding: 4px 10px; }
.stock-row.has-expired { background: linear-gradient(90deg, rgba(255, 92, 108, .07), transparent 70%); }
.stock-btn.next-expired { border-color: rgba(255, 92, 108, .55); }
.stock-btn small.bad-text { color: #ff8a96; }
.fine {
  display: flex; justify-content: space-between; align-items: center; margin-top: 10px;
  background: rgba(255, 92, 108, .12); border-radius: 12px; padding: 12px 14px; font-size: 16px;
}
.fine b { color: var(--bad); font-size: 22px; }

/* ---------- Dàn máy & linh kiện ---------- */
.mc-row, .part-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.mc-row { cursor: pointer; }
.mc-row:hover { background: rgba(255, 255, 255, .03); }
.mc-parts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 13px; }
.pp { white-space: nowrap; }
.pp b { font-size: 11px; color: var(--muted); margin-left: 1px; vertical-align: super; }
.mc-buy { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 12px; }
.net-plans { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(128, 128, 128, .35); }
.net-plan { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; font-size: 13.5px; }
.net-plan.cur { opacity: .85; }
.mc-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.mc-money { margin-left: auto; }
.part-h { font-size: 14px; margin: 14px 0 2px; color: var(--muted); }
.part-row:last-child { border-bottom: 0; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.pips i { width: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); }
.pips i.on { background: var(--accent); }
.modal-machine { width: min(620px, 100%); }

/* ---------- Thư viện game ---------- */
.prep-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.game-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.game-row:last-child { border-bottom: 0; }
.game-row .chip { margin-left: 2px; }
.game-row.own .si { opacity: .9; }
.chip.hot { background: rgba(255, 95, 162, .18); color: #ff9cc6; font-weight: 600; }
#games-hot { margin: 8px 0 2px; }

/* ---------- Google Maps & review ---------- */
.maps-panel { grid-column: 1 / -1; }
#maps { display: grid; grid-template-columns: auto 180px 1fr; gap: 18px; align-items: start; margin-top: 10px; }
.maps-score { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; }
.maps-score b { font-size: 42px; line-height: 1; }
.maps-bars { display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
.mb-row { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.mb-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mb-bar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.maps-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.maps-reviews .hint, .maps-reviews > .btn { grid-column: 1 / -1; justify-self: start; margin: 0; }
.stars { letter-spacing: 1px; font-size: 14px; }
.stars .on { color: var(--gold); }
.stars .off { color: rgba(255, 255, 255, .18); }
.review { background: var(--panel); border-radius: 12px; padding: 10px 12px; border-left: 3px solid var(--line); }
.review.s1, .review.s2 { border-left-color: var(--bad); }
.review.s4, .review.s5 { border-left-color: var(--good); }
.rv-head { display: flex; gap: 8px; align-items: center; }
.rv-av { font-size: 22px; }
.rv-guide { font-size: 11px; color: var(--muted); }
.rv-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.rv-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; }
.review-list { display: flex; flex-direction: column; gap: 8px; }
.sum-reviews { margin: 4px 0 12px; }
.sum-reviews h4 { font-size: 14px; margin-bottom: 8px; }

/* Câu chào lộ tính cách ở cửa */
.cust .req .cust-say { color: var(--gold); font-size: 12.5px; font-style: italic; margin-top: 2px; }
.cust .avatar { position: relative; }
.trait-badge {
  position: absolute; right: -6px; bottom: -4px; font-size: 13px; line-height: 1;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 99px; padding: 2px;
}
.cust .req span.cust-reg { color: var(--accent); font-size: 11.5px; font-weight: 600; }
.cust .req span.cust-shy { color: var(--muted); font-style: italic; }

/* Khách rụt rè: bong bóng mờ rồi thu thành 💭 */
.pc-bubble.faded { opacity: .45; animation: none; }
.pc-bubble.shy { padding: 3px 9px 5px; font-size: 16px; opacity: .85; animation: bob 2.4s ease-in-out infinite; }

/* Sổ khách quen */
.regulars-panel { grid-column: 1 / -1; }
.reg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 8px; max-height: 330px; overflow: auto; }
.reg-row { display: flex; gap: 10px; background: var(--panel); border-radius: 12px; padding: 8px 10px; }
.reg-row.cold { opacity: .6; }
.reg-av { font-size: 24px; line-height: 1.2; }
.reg-main { min-width: 0; }
.reg-hearts { color: var(--accent2); font-size: 12px; letter-spacing: 1px; }
.reg-mem { margin-top: 2px; }
.reg-mem.good { color: var(--good); }
.reg-mem.bad { color: var(--warn); }
.reg-tag { font-size: 11px; font-weight: 700; color: var(--accent); background: rgba(62, 230, 193, .1); border-radius: 99px; padding: 1px 7px; }
.reg-tag.new { color: var(--gold); background: rgba(255, 207, 74, .1); }

/* Bảng nhận xét cuối ngày */
.modal-summary { width: min(640px, 100%); }
.board { margin: 4px 0 12px; }
.board h4 { font-size: 14px; margin: 12px 0 8px; }
.board-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.board-col { background: var(--panel); border-radius: 12px; padding: 4px 12px 10px; border-top: 3px solid var(--line); }
.board-col.up { border-top-color: var(--good); }
.board-col.down { border-top-color: var(--bad); }
.board-col h4 { margin: 8px 0 6px; }
.board-col ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.board-col li { margin-bottom: 4px; }
.memo-list { display: flex; flex-direction: column; gap: 8px; }
.memo { background: var(--panel); border-radius: 12px; border-left: 3px solid var(--line); }
.memo.s1, .memo.s2 { border-left-color: var(--bad); }
.memo.s4, .memo.s5 { border-left-color: var(--good); }
.memo summary { display: flex; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.memo summary::-webkit-details-marker { display: none; }
.memo summary:hover { background: rgba(255, 255, 255, .03); }
.memo-av { font-size: 26px; line-height: 1.1; }
.memo-main { flex: 1; min-width: 0; }
.memo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.memo-head small { color: var(--muted); font-size: 12px; }
.memo q { display: block; margin: 3px 0; font-size: 13.5px; line-height: 1.45; }
.memo-meta { font-size: 12px; color: var(--muted); }
.memo-meta::after { content: ' · ▸ vì sao?'; }
.memo[open] .memo-meta::after { content: ' · ▾'; }
.intent.good { color: var(--good); }
.intent.warn { color: var(--warn); }
.intent.bad { color: #ff8a96; }
.memo-why { margin: 0 12px 8px 48px; padding-left: 16px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.memo-next { margin: 0 12px 10px 48px; font-size: 13px; color: var(--accent); }

/* ---------- Điện thoại ---------- */
@media (max-width: 760px) {
  #maps { grid-template-columns: auto 1fr; }
  .maps-reviews { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .hud-shop b { font-size: 16px; max-width: 160px; }
  body { font-size: 14px; }
  .hud { gap: 14px; padding: 8px 12px; }
  .hud-item b { font-size: 16px; }
  .prep-body { grid-template-columns: 1fr; padding: 12px; }
  .play-body { flex-direction: column; padding: 12px; gap: 12px; }
  .door { width: auto; }
  #queue { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .cust { min-width: 165px; width: auto; }
  #log { display: none; }
  #pcs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .pc-screen { height: 50px; }
  .kitchen { grid-template-columns: 1fr; }
  .tray { grid-column: 1; }
  .sum-stats { grid-template-columns: repeat(2, 1fr); }
  .board-cols { grid-template-columns: 1fr; }
  .memo-why, .memo-next { margin-left: 14px; }
  .prep-footer { flex-direction: column; align-items: stretch; }
}

/* Quầy thao tác gọn cho điện thoại: đủ chỗ thấy nút giữ mà không phải cuộn nhiều */
#screen-play .btn.hold { padding: 13px; font-size: 16px; }
#screen-play .dock-body { gap: 6px; }
#screen-play .kitchen, .checkin { gap: 6px; }
#screen-play .ticket { padding: 6px 10px; }
#screen-play .ticket-head { margin-bottom: 4px; }
#screen-play .pot { width: 92px; }
#screen-play .station { padding: 6px 10px 8px; }
#screen-play .station h4 { margin-bottom: 4px; }
#screen-play .stock-btn { min-width: 62px; padding: 4px 6px; font-size: 12px; }
#screen-play .stock-btn .si { font-size: 19px; }
#screen-play .stock-btn small { font-size: 10.5px; }
#screen-play .cook-area .fill, #screen-play .checkin .fill { height: 28px; margin: 4px 0 20px; }
#screen-play .fill-tick { font-size: 11px; padding-top: 2px; }
#screen-play .dock .hint { margin: 2px 0; font-size: 12.5px; }
@media (max-height: 760px) { #scene { max-height: 40vh; } }

/* Buổi sáng: bảng phấn và bốn đồ vật trên bàn chuẩn bị. */
.warm { --bg: #FFF6E3; background: #FFF6E3; color: var(--text); }
.warm h1,.warm h2,.warm h3 { font-family: 'VT323', monospace; }
.warm .btn.primary { background: #1FA89A; color: white; box-shadow: 0 3px 0 #137A70; }
.warm .btn:hover { background: #EAD7B2; }
.warm .btn.primary:hover { background: #168D81; }
.warm .chip { background: #F3E6CB; }
.warm .chip.bad,.warm .chip.expired,.warm .bad-text,.warm .btn.danger { color: #A83226; }
.warm .chip.warn,.warm .warn-text { color: #90520A; }
.warm .chip.hot { color: #AD422A; background: #FBE0CE; }
#screen-prep { width: min(100%,480px); margin: auto; align-items: stretch; padding-bottom: 88px; }
#screen-prep .hud { background: #FFF6E3; gap: 10px; padding: 10px 12px; }
#screen-prep .hud-shop { width: 100%; }
#screen-prep .hud-item { flex-direction: row; gap: 5px; align-items: baseline; }
#screen-prep .hud-item b { font-size: 14px; }
#screen-prep .prep-body { display: grid; grid-template-columns: minmax(0,1fr); padding: 0; gap: 0; }
.pr-morning svg { display: block; width: 100%; }
.pr-workbook { min-width: 0; padding: 12px; }
.pr-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-bottom: 12px; }
.pr-tabs button { background: #F3E6CB; border: 0; border-bottom: 4px solid transparent; border-radius: 14px 14px 8px 8px; padding: 8px 2px; font-size: 12px; font-weight: 800; cursor: pointer; }
.pr-tabs button[aria-selected="true"] { background: #FFFDF4; border-bottom-color: #1FA89A; }
.pr-tabs button:focus-visible { outline: 3px solid #137A70; outline-offset: 2px; }
.pr-object { display: block; font-size: 29px; width: 46px; margin: 0 auto 5px; filter: drop-shadow(0 2px 1px #72594322); }
.pr-tabs button[aria-selected="true"] .pr-object { transform: rotate(0); }
.pr-page { padding: 12px; background: #FFFDF4; border-radius: 8px 8px 18px 18px; }
.pr-page h2:not(:first-child) { margin-top: 22px; }
.pr-page .stock-row { grid-template-columns: 36px minmax(0,1fr); gap: 8px; border-bottom-style: dashed; }
.pr-page .stock-btns { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
.pr-page .stock-btns .btn { font-size: 11px; padding: 7px; }
.pr-page .si svg { width: 36px; height: 48px; }
.pr-page #maps { grid-template-columns: auto 1fr; }
.pr-page .maps-reviews { grid-column: 1 / -1; grid-template-columns: 1fr; }
.pr-page .game-row,.pr-page .up-row,.pr-page .mc-row { gap: 6px; grid-template-columns: 28px minmax(0,1fr) auto; }
.pr-page .btn.small { font-size: 11px; }
.pr-receipt { border-top: 4px dashed #D9B98A; line-height: 1.9; }
#screen-prep .prep-footer { position: fixed; bottom: 0; width: min(100%,480px); z-index: 12; background: #FFF6E3; padding: 12px 16px max(16px,env(safe-area-inset-bottom)); }
#btn-open { width: 100%; }
.pr-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; margin: 12px 0; }
.pr-preview figure { margin: 0; background: #F3E6CB; border-radius: 12px; padding: 8px; }
.pr-preview svg { width: 100%; height: 125px; }
.pr-preview figcaption { font-size: 12px; }

/* Cửa sổ nổi dùng cùng bảng màu với quán. */
#modal-root { background: transparent; }
.warm .modal-overlay { background: #3A2A227A; }
.warm .modal { background: #FFF6E3; border: 2px solid #D9B98A; box-shadow: 0 20px 60px #3A2A2255; }
.warm .modal-title { font-family: 'VT323', monospace; color: #3A2A22; }
.warm .warn { color: #8E5009; background: #FBEAC6; border-color: #D9B98A; }
.warm .note { color: #146F65; background: #E3F0E3; border-color: #B1D1B9; }
.warm .modal-actions { position: sticky; bottom: -20px; padding: 12px 0; background: #FFF6E3; border-top: 1px dashed #D9B98A; }
.warm .modal-summary { background: #FFFDF4; border-radius: 5px; border-top: 7px dashed #D9B98A; border-bottom: 7px dashed #D9B98A; }
.warm .modal-summary .modal-title { text-align: center; padding-bottom: 12px; border-bottom: 2px dashed #D9B98A; }
.warm .sum-money,.warm .sum-stats > div,.warm .board-col,.warm .memo,.warm .review { background: #F3E6CB; }
.warm .sum-money { font-variant-numeric: tabular-nums; }
.warm .intent.bad { color: #A83226; }
.warm .stars .off { color: #B5A28A; }
.warm .pips i,.warm .mb-bar { background: #DDCCAD; }
.warm .pips i.on { background: #1FA89A; }
.warm .modal-summary .modal-actions { background: #FFFDF4; }
.warm .modal-police { border-top: 6px solid #F07A5A; }

/* Tấm bưu thiếp quán nhỏ ở màn chào. */
body { background: #E5D8BF; }
#screen-title { background: radial-gradient(ellipse at top,#FFF9E9,#EDDFC4); }
.title-card { width: min(100%,480px); padding-bottom: 20px; }
#title-scene { overflow: hidden; border: 5px solid #FFFDF4; border-radius: 24px; box-shadow: 0 2px 0 #BDA781, 0 12px 30px #72594322; }
#title-scene svg { display: block; width: 100%; max-height: 42vh; background: #F2DFB4; }
.pr-eyebrow { color: #886447; font-size: 10px; letter-spacing: .18em; margin: 24px 0 0; }
.title-card h1 { color: #146F65; background: none; text-shadow: none; font-size: clamp(36px,9vw,54px); margin: 2px 0; }
.title-card .tagline { color: #725943; font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.title-buttons .btn { width: min(100%,300px); }
.warm svg .baloo { font-family: 'VT323', monospace; }
.warm svg .marker { font-family: 'VT323', monospace; }
body:has(.modal-overlay) #fx-layer { visibility: hidden; }

/* ---------- Màn chơi trên điện thoại ----------
   Khung cố định vừa một màn hình: HUD + cảnh quán ở trên, quầy thao tác cuộn riêng ở dưới.
   Thanh đo, nút giữ và nút xác nhận nằm ở đáy quầy nên luôn thấy mà không phải cuộn trang. */
@media not all and (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #screen-play.active { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  #screen-play .play-col { height: 100%; min-height: 0; overflow: hidden; }
  #screen-play .phud { flex: none; flex-wrap: wrap; position: relative; top: auto; height: auto; min-height: 44px; padding: 6px 6px; gap: 4px; }
  #screen-play .ppill { padding: 3px 7px; gap: 3px; }
  #screen-play .phud-sp { display: none; }
  #screen-play .infra { flex: none; position: relative; top: auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 8px; }
  #screen-play .infra::-webkit-scrollbar { display: none; }
  #screen-play .scene-wrap { flex: none; position: relative; top: auto; }
  #screen-play #scene { max-height: 42dvh; }
  /* quầy đang mở: cảnh cắt phần tường trên (xem PlayScene.crop) và thấp lại */
  #screen-play.dock-open #scene { aspect-ratio: 760 / 510; max-height: 32dvh; }
  #screen-play .dock {
    flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 10px 0; scroll-padding-bottom: 80px;
  }
  #screen-play .dock-door { padding-bottom: 12px; }
  #screen-play .dock-card { gap: 6px; }
  #screen-play .dock-card-head { margin-top: 0; }
  #screen-play .dock-title { font-size: 17px; }
  #screen-play .dock-foot {
    position: sticky; bottom: 0; z-index: 2; margin: 0 -10px; padding: 6px 10px max(10px, env(safe-area-inset-bottom));
    background: #FBF1DA; border-top: 1px dashed var(--line); box-shadow: 0 -6px 10px -8px rgba(58, 42, 34, .35);
  }
  #screen-play .dock-foot .dock-actions { position: static; background: none; padding: 6px 0 0; margin: 0; }

  /* nạp giờ */
  #screen-play .talk .face { width: 46px; height: 49px; }
  #screen-play .speech { font-size: 20px; line-height: 1.05; padding: 5px 9px; }
  #screen-play .picker { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  #screen-play .pk { padding: 4px 3px 5px; }
  #screen-play .pk b { white-space: nowrap; }
  #screen-play .checkin-foot .fill { height: 26px; margin: 2px 0 18px; }
  #screen-play .checkin-foot .readout { margin: 0 0 6px; }
  #screen-play .checkin-foot .readout b { font-size: 18px; }
  #screen-play .checkin-foot .btn.hold { padding: 12px; }

  /* bếp */
  #screen-play .ticket .face { width: 32px; height: 34px; }
  #screen-play .ticket { font-size: 12.5px; }
  #screen-play .tray { padding: 4px 8px; }
  #screen-play .pot { width: 68px; }
  #screen-play .cook-row { gap: 8px; }
  #screen-play .stock-btn {
    display: grid; grid-template-columns: auto auto; column-gap: 5px; align-items: center; justify-items: start;
    min-width: 0; padding: 4px 8px; text-align: left; line-height: 1.15;
  }
  #screen-play .stock-btn .si { grid-row: span 2; font-size: 20px; }
  #screen-play .stock-btn small { grid-column: 2; }
  #screen-play .cook-go { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; }
  #screen-play .cook-go .cook-area { flex: 1; min-width: 0; margin: 0; }
  #screen-play .cook-go .fill { height: 26px; margin: 4px 0 18px; }
  #screen-play .cook-go .btn.hold { flex: 0 0 auto; width: auto; padding: 10px 12px; font-size: 15px; }
  #screen-play .pour-area { gap: 10px; margin-top: 6px; }
  #screen-play .fill.vertical { width: 58px; height: 96px; }
  #screen-play .dock-actions { flex-wrap: wrap; }
  #screen-play .dock-actions .btn { white-space: normal; min-width: 0; min-height: 44px; }
  #screen-play .dock-actions .btn.ghost { flex: 1 1 0; padding: 9px 8px; font-size: 12.5px; }
  #screen-play .dock-actions .btn.primary { flex: 1 1 100%; padding: 10px 8px; }
  #screen-play .ticket-items .it { font-size: 18px; }
}

@media(prefers-reduced-motion:reduce) {
  #scene .walking * { animation: none !important; }
}

.pr-object svg { display: block; width: 42px; height: 42px; margin: auto; }

/* ---------- Hạ tầng: thanh nhiệt độ / điều hòa / mạng / điện trên màn chơi ---------- */
.infra {
  position: sticky; top: 48px; z-index: 9; display: flex; flex-wrap: wrap; gap: 5px;
  padding: 5px 8px; background: #FFF6E3; border-bottom: 1px solid var(--line);
}
.ipill {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font: inherit; font-size: 12px; font-weight: 600;
  background: #fff; color: var(--text); border: 1.5px solid var(--line); border-radius: 99px; padding: 3px 9px;
}
.ipill.warn { background: #FBEAC6; color: #8E5009; border-color: #E0B970; }
.ipill.bad { background: #FBDCD6; color: #A83226; border-color: #E59A8C; }
.ipill.on { background: #DDF1EC; color: #137A70; border-color: #8FCFC3; }
.ipill.off { color: var(--muted); }
.btn-i { cursor: pointer; box-shadow: 0 2px 0 var(--line); }
.btn-i:active { transform: translateY(1px); box-shadow: none; }
.ipill.blink { animation: ipill-blink 1s ease-in-out infinite; }
@keyframes ipill-blink { 50% { opacity: .55; } }
@media(prefers-reduced-motion:reduce) { .ipill.blink { animation: none; } }

/* ---------- Bảng tổng kết: nhóm thu chi ---------- */
.sum-group > summary { list-style: none; cursor: pointer; }
.sum-group > summary::-webkit-details-marker { display: none; }
.sum-group > summary .sum-row span::after { content: ' ▸'; color: var(--muted); font-size: 12px; }
.sum-group[open] > summary .sum-row span::after { content: ' ▾'; }
.sum-group > .sum-row { padding-left: 16px; font-size: 14px; }
.sum-group > .sum-row b { color: inherit; font-weight: 600; }
.modal-summary p.bad { color: #A83226; background: #FBDCD6; border: 1px solid #E59A8C; border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 14px; }

/* ---------- Tab Hóa đơn: thời tiết, hóa đơn tuần, vay vốn ---------- */
#prep-costs p { margin: 6px 0; }
.staff-box { background: #FFF9E9; border: 2px solid #D9B98A; border-radius: 14px; padding: 10px; line-height: 1.5; }

/* ---------- Sổ kế toán và kho đồ thải ---------- */
.account-box { margin: 12px 0; padding: 12px; border: 2px solid #D9B98A; border-radius: 14px; background: #FFF9E9; line-height: 1.5; }
.account-box h3, .account-box h4 { margin: 8px 0; }
.account-box h3:first-child { margin-top: 0; }
.account-box p { margin: 8px 0; }
.account-box .sum-row { gap: 12px; align-items: flex-start; }
.account-box .sum-row > span { min-width: 0; }
.account-box .sum-row > b { flex-shrink: 0; }
.account-box details { margin-top: 10px; border-top: 1px dashed #D9B98A; padding-top: 8px; }
.account-box summary { cursor: pointer; font-weight: 700; }
.account-advice { padding: 10px; background: #E7F1E4; border-radius: 10px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; font-size: 13px; }
.account-option input[type="checkbox"] { width: 20px; height: 20px; accent-color: #137A70; }
.account-option input[type="number"] { width: 100%; min-width: 0; padding: 10px; border: 1px solid #C9AE87; border-radius: 8px; background: #fff; font: inherit; }
.staff-box > p { margin: 0 0 8px; }
.staff-row { display: grid; gap: 7px; border-top: 1px dashed #D9B98A; padding: 10px 0; }
.staff-row label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; }
.staff-row input { width: 120px; max-width: 50%; padding: 7px; border: 1px solid #C9AE87; border-radius: 8px; background: #fff; font: inherit; }
.staff-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-box > button { margin-top: 5px; }
.bill-today p { margin: 0 0 6px; }
.bill-box, .loans { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(128, 128, 128, .35); }
.bill-box h4, .loans h4 { margin: 0 0 6px; }
.due { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #FBEAC6; border: 1px solid #E0B970; }
.due.late { background: #FBDCD6; border-color: #E59A8C; }
.loan-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.loan-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Dàn máy: phím chuột, thanh lý ---------- */
.mc-fix { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; }
.mc-sell { margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(128, 128, 128, .35); }

/* ---------- Chuyển bản lưu ---------- */
.transfer h4 { margin: 12px 0 2px; }
.transfer h4:first-child { margin-top: 0; }
.code-box {
  width: 100%; font: 12px/1.4 ui-monospace, Consolas, monospace; color: var(--text); word-break: break-all;
  background: #FFFDF4; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px; resize: vertical; margin-bottom: 6px;
}
.transfer-short-code {
  width: 100%; min-width: 0; padding: 14px 8px; margin: 8px 0;
  color: #137A70; background: #FFFDF4; border: 2px dashed #CFAE7C; border-radius: 12px;
  text-align: center; font: bold 28px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .12em;
}
.transfer [data-create] { width: 100%; margin: 8px 0; }
.transfer details { margin-top: 12px; }
.transfer details summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.transfer [data-expiry] { margin: 0 0 8px; }

/* ---------- Album thẻ và mở gói mẫu ---------- */
.tcg-shop { margin: 12px 0; padding: 12px; background: #F4ECD8; border: 1px solid #D9C4A0; border-radius: 12px; }
.tcg-shop-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.tcg-shop h3 { margin: 0 0 8px; font-size: 16px; }
.tcg-stock-row { padding: 12px 0; border-top: 1px dashed #C9AE87; font-size: 12px; }
.tcg-stock-row p { margin: 6px 0; }
.tcg-stock-row details { margin: 8px 0; }
.tcg-stock-row summary, .tcg-market-notes summary { cursor: pointer; min-height: 30px; padding: 6px 0; }
.tcg-stock-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tcg-owned { display: block; margin: 5px 0 10px; font-size: 10px; line-height: 1.5; color: #695343; }
.tcg-price-detail, .tcg-quote { background: #E7F4E9; border-radius: 12px; padding: 10px 14px; font-size: 13px; }
.tcg-message { background: #E8F3EB; border-radius: 9px; padding: 10px; font-size: 12px; }
.tcg-buyer-card { max-width: 180px; margin: 12px auto; }
.tcg-buyer-modal .modal-actions { position: sticky; bottom: 0; background: #FFF6E3; }
.tcg-buyer-modal .modal-actions .btn { min-height: 44px; }
.tcg-album { color: #3A2A22; }
.tcg-demo-note { padding: 10px 12px; margin: 0 0 12px; background: #E7F4E9; border: 1px solid #B0D6BD; border-radius: 10px; font-size: 12px; }
.tcg-sets, .tcg-album-bar, .tcg-open-actions, .tcg-pack-heading { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.tcg-sets { flex-wrap: wrap; justify-content: flex-start; }
.tcg-album .btn { min-height: 44px; }
.tcg-filters { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin: 12px 0; }
.tcg-filters label { display: grid; gap: 4px; font-size: 12px; }
.tcg-filters input, .tcg-filters select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #C9AE87; border-radius: 9px; background: #FFFDF4; color: #3A2A22; padding: 8px; font: inherit; }
.tcg-album-bar { margin: 12px 0; }
.tcg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tcg-thumb, .tcg-reveal { min-width: 0; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.tcg-thumb:focus-visible, .tcg-reveal:focus-visible, .tcg-tear-strip:focus-visible { outline: 3px solid #137A70; outline-offset: 4px; border-radius: 12px; }
.tcg-basic { --card-color: #7E928A; }
.tcg-rare { --card-color: #468DB8; }
.tcg-epic { --card-color: #8E6BD8; }
.tcg-legend { --card-color: #C98A10; }
.tcg-mythic { --card-color: #C0668D; }
.tcg-face { display: flex; flex-direction: column; width: 100%; padding: 7px; border: 3px solid var(--card-color); border-radius: 13px; background: #FFF6E3; box-shadow: 0 4px 0 #3A2A2218; text-align: center; overflow: hidden; }
.tcg-card-top { display: flex; align-items: center; justify-content: space-between; gap: 3px; min-height: 23px; font-size: 9px; font-weight: 800; }
.tcg-rarity { padding: 3px 6px; background: var(--card-color); color: white; border-radius: 5px; }
.tcg-stamp { color: #695343; font-size: 8px; letter-spacing: .04em; }
.tcg-picture { display: block; margin: 5px 0 7px; aspect-ratio: 1; border: 1.5px solid #D9C39F; border-radius: 8px; overflow: hidden; background: #E5F1D4; }
.tcg-picture svg { display: block; width: 100%; height: 100%; }
.tcg-name { display: grid; place-items: center; min-height: 34px; font-size: 12px; font-weight: 800; line-height: 1.25; }
.tcg-code { font-size: 9px; color: #806B58; padding: 3px 0; letter-spacing: .08em; }
.tcg-detail { max-width: 330px; margin: 18px auto; }
.tcg-detail .tcg-name { font-size: 19px; min-height: 44px; }
.tcg-detail .tcg-card-top { font-size: 12px; }
.tcg-detail .tcg-stamp { font-size: 10px; }
.tcg-pack-heading { margin-bottom: 12px; font-size: 13px; }
.tcg-pack-stage, .tcg-open-stage { text-align: center; }
.tcg-pack { position: relative; width: 230px; margin: 18px auto; isolation: isolate; }
.tcg-tear-strip { position: relative; z-index: 3; width: 100%; height: 46px; background: #137A70; color: #FFF6E3; border: 2px solid #3A2A22; border-bottom: 2px dashed #FFF6E3; border-radius: 9px 9px 0 0; cursor: grab; touch-action: none; transform: translateX(var(--drag, 0px)) rotate(0deg); font: bold 15px sans-serif; }
.tcg-pack-body { position: relative; z-index: 2; display: grid; gap: 10px; padding: 16px 14px; background: #FFF0CB; border: 2px solid #3A2A22; border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 6px 0 #3A2A221A; }
.tcg-pack-body > b { color: #137A70; font-size: 20px; }
.tcg-pack-body > span { font-size: 13px; font-weight: 800; }
.tcg-pack-body > div { border: 2px solid #D9C39F; border-radius: 50%; overflow: hidden; aspect-ratio: 1; }
.tcg-pack-body svg { display: block; width: 100%; height: 100%; }
.tcg-pack-body small { color: #695343; font-size: 10px; font-weight: 800; }
.tcg-pull-cards { position: absolute; z-index: 1; top: 60px; left: 25px; right: 25px; height: 210px; }
.tcg-pull-cards i { position: absolute; inset: 0; border: 3px solid #FFF6E3; border-radius: 12px; background: #137A70; }
.tcg-pull-cards i:nth-child(2) { transform: rotate(-6deg); }
.tcg-pull-cards i:nth-child(3) { transform: rotate(6deg); }
.is-tearing .tcg-tear-strip { animation: tcg-tear var(--card-tear-ms) ease-in forwards; }
.is-tearing .tcg-pack-body { animation: tcg-drop var(--card-tear-ms) ease-in forwards; }
.is-tearing .tcg-pull-cards { animation: tcg-pull var(--card-tear-ms) ease-out forwards; }
.tcg-stage-status { font-size: 13px; min-height: 38px; margin: 12px 0; }
.tcg-reveal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 10px; }
.tcg-reveal { aspect-ratio: .68; perspective: 900px; }
.tcg-flip-inner { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.tcg-back, .tcg-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tcg-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #137A70; border: 4px solid #F1D59A; outline: 1px solid #3A2A22; outline-offset: -7px; border-radius: 13px; color: #FFF6E3; }
.tcg-back b { font-size: 44px; }
.tcg-back span, .tcg-back small { font-size: 10px; }
.tcg-front { transform: rotateY(180deg); }
.tcg-front .tcg-face { height: 100%; }
.tcg-front .tcg-name { flex: 1; }
.is-open .tcg-flip-inner { transform: rotateY(180deg); }
.is-flipping .tcg-flip-inner { animation: tcg-flip var(--card-flip-ms) ease-in-out forwards; }
.tcg-reveal:disabled { cursor: default; opacity: 1; }
.tcg-progress { color: #695343; font-size: 12px; }
.tcg-open-actions { justify-content: center; flex-wrap: wrap; }
@keyframes tcg-tear { to { transform: translate(180px, -55px) rotate(24deg); opacity: 0; } }
@keyframes tcg-drop { 35% { transform: translateY(12px); } to { transform: translateY(90px) rotate(-8deg); opacity: 0; } }
@keyframes tcg-pull { to { transform: translateY(-35px); } }
@keyframes tcg-flip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@media (max-width: 480px) {
  .tcg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tcg-reveal-row { gap: 6px; }
  .tcg-reveal .tcg-face { padding: 3px; border-width: 2px; border-radius: 9px; }
  .tcg-reveal .tcg-card-top { flex-wrap: wrap; justify-content: center; font-size: 8px; min-height: 30px; }
  .tcg-reveal .tcg-stamp { font-size: 6px; }
  .tcg-reveal .tcg-name { font-size: 9px; min-height: 29px; }
  .tcg-reveal .tcg-code { font-size: 7px; }
  .tcg-reveal .tcg-picture { margin: 3px 0; }
  .tcg-back { border-width: 3px; }
  .tcg-back b { font-size: 30px; }
  .tcg-back span { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tcg-album *, .tcg-album *::before, .tcg-album *::after { animation: none !important; transition: none !important; }
}

/* ---------- Minh họa ấm: cùng vật liệu từ quán tới các bảng thao tác ---------- */
.warm .btn, #screen-play .btn {
  border-radius: 12px; border: 1px solid var(--line);
  background: #FFF9EB; color: var(--text);
  box-shadow: 0 2px 0 #C9B69655, inset 0 1px 0 #FFFFFF;
}
.warm .btn.primary, #screen-play .btn.primary {
  background: linear-gradient(#299B8C, #208779); border-color: #176B60;
  color: #FFFDF5; box-shadow: 0 3px 0 #176B60, inset 0 1px 0 #FFFFFF33;
}
.warm .btn.primary:hover, #screen-play .btn.primary:hover { background: #208779; }
.warm .btn.ghost, #screen-play .btn.ghost { background: transparent; box-shadow: none; }
.warm .btn:focus-visible, .warm .icon-btn:focus-visible {
  outline: 3px solid #238D80; outline-offset: 3px;
}
.warm .btn:disabled { box-shadow: none; }
.warm .btn.danger { color: #A83226; border-color: #E2A891; }
.warm .panel, .warm .modal { border-color: var(--line); }
.warm .modal { border-radius: 20px; box-shadow: 0 4px 0 #72594322, 0 18px 60px #45342944; }
.warm .modal-title, .dock-title { letter-spacing: -.02em; }
.warm .modal-actions .btn { min-height: 44px; }
.warm .speech { background: #FFFDF5; color: var(--text); box-shadow: 0 2px 0 #72594318; }
.warm .speech small { color: var(--muted); }

.title-card { padding-top: 4px; }
.title-card h1 { color: #235D51; font-size: clamp(34px, 8.8vw, 49px); line-height: 1.15; margin: 6px 0 10px; }
.title-card .tagline { max-width: 360px; margin: 0 auto 20px; }
.pr-eyebrow { margin-top: 20px; font-size: 10px; letter-spacing: .14em; }
.title-buttons { gap: 12px; }
.title-buttons > .btn { width: min(100%, 340px); min-height: 52px; }
.title-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 340px); }
.title-tools .btn { min-width: 0; width: 100%; min-height: 44px; padding: 10px 4px; font-size: 12px; }
.title-buttons .cloud-status { font-size: 11px; margin-top: 2px; }

#screen-prep .hud { border-bottom: 1px solid #DBC8A8; background: #FFF8E8; gap: 8px; }
#screen-prep .hud-shop { padding: 2px 0 4px; }
#screen-prep .shop-btn { color: #235D51; }
#screen-prep .hud-item { padding: 6px 8px; border: 1px solid #E4D4B9; border-radius: 9px; background: #FFFDF5; }
#screen-prep .hud-item .lbl { font-size: 10px; }
.pr-workbook { padding: 14px 12px; }
.pr-tabs { gap: 6px; }
.pr-tabs button {
  min-height: 76px; padding: 8px 2px; background: #EDDFC3;
  border: 1px solid #D3BC95; border-bottom: 3px solid #C3A67A;
  border-radius: 14px; color: #614A35; box-shadow: inset 0 1px 0 #FFF8E8;
}
.pr-tabs button[aria-selected="true"] { background: #FFFDF5; border-color: #238D80; color: #235D51; box-shadow: 0 2px 0 #238D8033; }
.pr-page { border-radius: 16px; padding: 14px; box-shadow: 0 3px 0 #72594312; }
.pr-page h2 { color: #5C4531; font-size: 23px; }
.pr-page .stock-row { padding: 14px 0; }
.pr-page .stock-btns .btn { min-height: 36px; padding: 8px 10px; }
.pr-page .si svg { width: 40px; height: 50px; }
#screen-prep .prep-footer { border-top: 1px solid #DDCBAA; background: #FFF8E8; box-shadow: 0 -6px 18px #7259430C; }

.play-col { background: #FFF8E8; box-shadow: 0 0 40px #604B3522; }
.phud, .play-actions { background: #FFF8E8; }
.ppill { border-radius: 10px; border-color: #DDCBAA; background: #FFFDF5; }
.icon-btn { border-radius: 10px; border-color: #DDCBAA; background: #FFFDF5; }
.scene-wrap { background: #F3E9D2; }
.dock { background: #F6ECD7; border-top-color: #A77550; }
.dock::before { background: #D6A676; }
#screen-play .cust { border-radius: 14px; border-color: #DDCBAA; background: #FFFDF5; box-shadow: 0 2px 0 #72594318; }
#screen-play .cust.selected { border-color: #238D80; box-shadow: 0 0 0 3px #238D8026; }
#screen-play .dock-foot { background: #F6ECD7; }
#scene .sc-bubble { filter: drop-shadow(0 3px 2px #45342926); }
.rows { width: max-content; max-width: calc(100% - 12px); }
.rows button { min-height: 44px; padding: 4px 8px; white-space: nowrap; border-radius: 10px; box-shadow: 0 2px 0 #72594322; }
.rows button small { white-space: nowrap; }
.rows button.on { background: #238D80; }
.host-app { background: #FFFDF5; border-color: #DDCBAA; box-shadow: 0 3px 0 #72594316; }
.host-app > span { padding: 6px 12px; border-radius: 12px; background: #F0E6CF; }
.tcg-shop { background: #F4E9D2; }
.tcg-face { background: #FFF9EB; box-shadow: 0 3px 0 #72594322, 0 8px 16px #72594312; }
.tcg-picture { border-color: #CCB692; }

/* ---------- Thẻ minh họa và bao năm lá ---------- */
.tcg-basic { --card-color: #AEC7BD; --card-bg: #244D45; }
.tcg-rare { --card-color: #85CDF4; --card-bg: #173451; }
.tcg-epic { --card-color: #C5A0F1; --card-bg: #382358; }
.tcg-legend { --card-color: #F9D276; --card-bg: #674013; }
.tcg-mythic { --card-color: #F0B6DD; --card-bg: #392659; }
.tcg-face { position: relative; isolation: isolate; padding: 7px; border: 2px solid var(--card-color); border-radius: 14px; color: #FFF5DE; background: radial-gradient(ellipse at 15% 5%, #FFFFFF35, transparent 40%), linear-gradient(145deg, #FFFFFF16, transparent 48%, #FFFFFF20), var(--card-bg); box-shadow: inset 0 0 0 1px #FFF8D74D, 0 4px 12px #24123A35; }
.tcg-face::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: repeating-linear-gradient(125deg, transparent 0 24%, #FFFFFF06 25%, transparent 27% 50%); }
.tcg-face::after { content: '✦'; position: absolute; bottom: 7px; right: 10px; color: var(--card-color); font-size: 17px; pointer-events: none; }
.tcg-mythic .tcg-face, .tcg-face.tcg-mythic { background: linear-gradient(135deg, #5B4384, #233F5D 42%, #593857 80%, #6A4776); }
.tcg-card-top { padding: 1px 0 3px; }
.tcg-rarity { color: #251D36; background: linear-gradient(125deg, #FFFFFFAA, var(--card-color)); border: 1px solid #FFFFFF66; border-radius: 8px; box-shadow: 0 2px 5px #0003; }
.tcg-stamp { color: #FFF4D9; text-shadow: 0 1px 3px #0008; }
.tcg-picture { position: relative; aspect-ratio: .8; margin: 5px 0 7px; background: #E7E4EB; border: 1px solid var(--card-color); border-radius: 9px; box-shadow: inset 0 0 8px #0005; }
.tcg-art-fallback { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tcg-art-fallback svg { width: 100%; height: 100%; }
.tcg-name { color: #FFF0BC; text-shadow: 0 2px 3px #180E2A; font-size: 12px; }
.tcg-code { color: #F3EBFE; }
.tcg-detail { max-width: 285px; }
.tcg-detail .tcg-name { font-size: 17px; }
.tcg-market-clock { margin: 8px 0; color: #4A6471; font-size: 12px; font-weight: 700; }
.warm .modal.tcg-buyer-modal { background: linear-gradient(135deg, #F5F0FFEE, #D7DCEDEE); border-color: #E3D6AE; backdrop-filter: blur(12px); }
.tcg-buyer-modal .tcg-quote { background: #FFFFFF90; border: 1px solid #FFFFFFD9; box-shadow: 0 6px 18px #5E45801A; }
.tcg-buyer-modal .modal-actions { background: #E3DDEFF2; border-radius: 12px; padding: 10px 0; }
.tcg-buyer-card { max-width: 210px; }
.tcg-pack { width: 205px; margin: 12px auto; filter: drop-shadow(0 8px 10px #19173735); }
.tcg-tear-strip { height: 44px; border-color: #D9CBED; border-bottom: 0; color: #FBEEBB; background: repeating-linear-gradient(90deg, #FFFFFF10 0 2px, transparent 2px 5px), linear-gradient(135deg, #627299, #392558 50%, #2E7890); clip-path: polygon(0 0, 100% 0, 100% 90%, 96% 100%, 92% 90%, 88% 100%, 84% 90%, 80% 100%, 76% 90%, 72% 100%, 68% 90%, 64% 100%, 60% 90%, 56% 100%, 52% 90%, 48% 100%, 44% 90%, 40% 100%, 36% 90%, 32% 100%, 28% 90%, 24% 100%, 20% 90%, 16% 100%, 12% 90%, 8% 100%, 4% 90%, 0 100%); }
.tcg-pack-body { gap: 6px; padding: 10px; border-color: #D9CBED; background: repeating-linear-gradient(90deg, #FFFFFF0D 0 2px, transparent 2px 5px), linear-gradient(135deg, #514169, #22384F 45%, #604365); box-shadow: inset 0 0 0 1px #FBEDBC55; }
.tcg-pack-body > b, .tcg-pack-body > span, .tcg-pack-body small { color: #FFF1C8; }
.tcg-pack-body > b { font-size: 17px; }
.tcg-pack-body > div { border: 0; border-radius: 10px; }
.tcg-pack-body .tcg-picture { aspect-ratio: 1.1; margin: 0; }
.tcg-pull-cards { top: 50px; height: 180px; }
.tcg-pull-cards i { background: linear-gradient(135deg, #29365A, #57346D); border-color: #E7D09B; }
.tcg-pull-cards i:nth-child(4) { transform: rotate(-12deg); }
.tcg-pull-cards i:nth-child(5) { transform: rotate(12deg); }
.tcg-reveal-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.tcg-reveal { aspect-ratio: .45; position: relative; }
.tcg-front .tcg-picture { flex-shrink: 0; }
.tcg-base-price { display: block; flex-shrink: 0; margin-top: 3px; padding: 5px 2px; border-top: 1px solid #FFF1CB55; color: #FFF4D8; font-size: 10px; line-height: 1.3; }
.tcg-base-price b { white-space: nowrap; }
.tcg-with-base::after { bottom: 32px; }
.tcg-collection-progress { padding: 10px 12px; border-radius: 10px; background: #E5EEE2; color: #305B4D; font-size: 13px; font-weight: 700; }
.tcg-collection-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.tcg-empty-owned { grid-column: 1 / -1; padding: 20px; text-align: center; border: 1px dashed #BCAC89; border-radius: 12px; }
.is-flipping .tcg-flip-inner { animation-delay: var(--card-delay, 0ms); animation-fill-mode: both; }
.tcg-reveal.is-open::after { content: ''; position: absolute; z-index: 2; inset: 0; border: 2px solid var(--card-color); border-radius: 16px; box-shadow: 0 0 15px var(--card-color); pointer-events: none; animation: tcg-reveal-glow .6s ease-out both; }
.tcg-open-stage .tcg-name { font-size: 11px; }
.tcg-back { background: radial-gradient(circle at 50% 30%, #786896, transparent 65%), #293A55; border-color: #DDC991; }
.tcg-open-actions { position: sticky; z-index: 4; bottom: 0; padding: 10px 0; background: #FFF9EDFA; border-radius: 12px; box-shadow: 0 -5px 15px #BDAF9133; }
@keyframes tcg-tear { to { transform: translate(165px, -32px) rotate(13deg); opacity: 0; } }
@keyframes tcg-drop { to { transform: translateY(100px) scale(.85); opacity: 0; } }
@keyframes tcg-pull { to { transform: translateY(-38px) scale(1.06); } }
@keyframes tcg-flip {
  0% { transform: rotateY(0) translateY(0) scale(1); }
  18% { transform: rotateY(-8deg) translateY(-7px) scale(1.03); }
  38% { transform: rotateY(0) translateY(-7px) scale(1.03); }
  65% { transform: rotateY(105deg) translateY(-7px) scale(1.03); }
  84% { transform: rotateY(188deg) translateY(-3px) scale(1.02); }
  100% { transform: rotateY(180deg) translateY(0) scale(1); }
}
@keyframes tcg-reveal-glow { from { opacity: .9; transform: scale(.95); } to { opacity: 0; transform: scale(1); } }
@media (max-width: 600px) {
  .tcg-reveal-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tcg-reveal { aspect-ratio: .5; }
  .tcg-reveal .tcg-card-top { flex-wrap: nowrap; justify-content: space-between; min-height: 22px; }
  .tcg-reveal .tcg-stamp { font-size: 7px; }
  .tcg-reveal .tcg-name { font-size: 11px; }
  .tcg-reveal-row > .tcg-reveal:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
}
#screen-play .stock-btn .si svg { display: block; width: 26px; height: 32px; }

/* Tranh có chất liệu đi cùng khung giấy và nút men ngọc, chữ vẫn là chữ thật. */
#screen-title {
  background: radial-gradient(ellipse at 50% 12%, #FFF9E8, #E8D0A4);
}
#title-scene { border-color: #FFF8E7; box-shadow: 0 0 0 1px #BE9464, 0 5px 0 #C9A67544, 0 12px 30px #72594322; }
.warm .btn.primary, #screen-play .btn.primary {
  border: 2px solid #176B60;
  box-shadow: 0 3px 0 #176B60, inset 0 0 0 2px #79D6C477, inset 0 2px 8px #FFFFFF22;
}
.pr-tabs button {
  background: linear-gradient(110deg, #F5D9AA, #ECD0A0 55%, #F7DEB8);
  box-shadow: 0 3px 0 #A77F5066, inset 0 0 0 2px #FFF5DC88;
}
.pr-tabs button[aria-selected="true"] {
  background: linear-gradient(#FFF8E5, #F5E3C3);
  box-shadow: 0 3px 0 #238D8066, inset 0 0 0 2px #FFFDF5;
}
.warm .panel, .warm .modal, .ppill {
  background-image: linear-gradient(135deg, #FFFFFF55, #E8CFA522);
}

/* Hình catalogue dùng cùng máy với cảnh chơi, đủ khung cho tựa đầu ghế cao. */
.pr-page .mc-row { grid-template-columns: 64px minmax(0,1fr); align-items: start; }
.pr-page .mc-picture { grid-row: span 2; padding: 5px; border-radius: 10px; background: #F2E7D0; border: 1px solid #D5C2A0; }
.pr-page .mc-picture svg { width: 100%; height: 82px; }
.pr-page .mc-row > .btn { grid-column: 2; justify-self: start; }
.pr-morning { border-radius: 12px; overflow: hidden; box-shadow: 0 3px 0 #C4A87B33; }
#screen-play .cust .face { border: 1px solid #DCC9A8; border-radius: 12px; background: #F6EBD5; }
#scene .sc-st > g > .seat { filter: drop-shadow(0 1px 1px #42362633); }
.pot { border-radius: 12px; background: linear-gradient(#F7EDD6, #EFE0BF); }
@media (min-width: 900px) {
  .pr-page .mc-row { grid-template-columns: 76px minmax(0,1fr) auto; align-items: center; }
  .pr-page .mc-picture { grid-row: auto; }
  .pr-page .mc-row > .btn { grid-column: auto; }
}

@media (max-width: 420px) {
  #screen-prep .hud-item { padding: 5px 6px; }
  #screen-prep .hud-item b { font-size: 12px; }
  .pr-page { padding: 12px; }
  .pr-tabs button { font-size: 11px; }
}
.howto-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.howto-tabs .btn { min-height: 40px; }

/* ---------- Nhiệm vụ tuần và mốc sưu tầm thẻ (đầu tab Nhập hàng) ---------- */
.quest-box { margin: 0 0 14px; padding: 12px; border: 2px solid #D9B98A; border-radius: 14px; background: #FFF9E9; line-height: 1.45; }
.quest-box h3 { margin: 0 0 4px; }
.quest-box h4 { margin: 12px 0 6px; }
.quest-box .hint { margin: 0 0 8px; }
.quest-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px dashed #D9B98A; }
.quest-row.done b { color: #2E9E5B; }
.quest-icon { font-size: 20px; line-height: 1.2; text-align: center; }
.quest-bar { height: 8px; margin: 5px 0 3px; border-radius: 4px; background: #EADCC0; overflow: hidden; }
.quest-bar i { display: block; height: 100%; border-radius: 4px; background: #1FA89A; }
.quest-row.done .quest-bar i { background: #2E9E5B; }
.quest-row .btn { margin-top: 6px; min-height: 40px; }

/* ---------- Thẻ bài: tác dụng, kệ trưng bày, phân rã/chế ---------- */
.tcg-fx { display: block; margin: 0 2px 3px; padding: 3px 5px; border-radius: 7px; background: #00000030; color: #FFF5DE; font-size: 9.5px; font-weight: 700; line-height: 1.3; }
.tcg-detail .tcg-fx { font-size: 13px; padding: 6px 8px; }
.tcg-shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 10px 0; }
.tcg-shelf-slot { display: grid; gap: 6px; align-content: start; }
.tcg-shelf-slot.is-empty { place-items: center; min-height: 170px; border: 2px dashed #C9AE87; border-radius: 13px; color: #806B58; background: #FFF9EB; }
.tcg-shelf-total { padding: 10px; border-radius: 10px; background: #E1F6F2; line-height: 1.5; }
.tcg-shelf-pick { display: grid; gap: 6px; align-content: start; }
.tcg-shelf-pick .btn, .tcg-shelf-slot .btn { min-height: 40px; }
.tcg-card-actions { max-width: 420px; margin: 0 auto; line-height: 1.5; }
.tcg-card-actions .btn { min-height: 44px; }

/* ---------- Mở gói hồi hộp: hào quang bao, chồng thẻ, nạp sáng, màn Legend/Mythic ---------- */
.tcg-pack { --aura: transparent; }
.tcg-aura-rare { --aura: #6FB7E8; }
.tcg-aura-epic { --aura: #A57BFF; }
.tcg-aura-legend { --aura: #FFC94A; }
.tcg-aura-mythic { --aura: #FF7AC8; }
.tcg-aura { position: absolute; inset: 4px; z-index: 0; border-radius: 16px; box-shadow: 0 0 34px 16px var(--aura); opacity: .7; animation: tcg-aura 2.2s ease-in-out infinite; pointer-events: none; }
.tcg-aura-basic .tcg-aura { display: none; }
.tcg-aura-legend .tcg-pack-body, .tcg-aura-mythic .tcg-pack-body { animation: tcg-wiggle 1.6s ease-in-out infinite; }
.tcg-aura-mythic .tcg-aura { animation: tcg-aura 1.2s ease-in-out infinite, tcg-hue 2.4s linear infinite; }
@keyframes tcg-aura { 50% { opacity: 1; transform: scale(1.04); } }
@keyframes tcg-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-2deg); } 82% { transform: rotate(2.5deg); } 88% { transform: rotate(-1.5deg); } }
@keyframes tcg-spin { to { transform: rotate(360deg); } }

.tcg-stack { position: relative; width: min(220px, 50vw); margin: 18px auto 12px; aspect-ratio: .68; }
.tcg-stack-under { position: absolute; inset: 0; border-radius: 13px; background: #0F5E57; border: 3px solid #F1D59A; }
.tcg-stack-under:nth-of-type(1) { transform: translate(6px, 6px) rotate(3deg); }
.tcg-stack-under:nth-of-type(2) { transform: translate(-6px, 8px) rotate(-3deg); }
.tcg-stack-under:nth-of-type(3) { transform: translate(4px, 11px) rotate(2deg); }
.tcg-stack-under:nth-of-type(4) { transform: translate(-3px, 13px) rotate(-1deg); }
/* Lá trên dùng kích thước chồng thẻ, không lấy tỉ lệ của hàng kết quả. */
.tcg-stack .tcg-top { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; aspect-ratio: auto; }
.tcg-top:not(:disabled):hover .tcg-flip-inner { transform: translateY(-6px) rotate(-1deg); transition: transform .15s; }
/* lưng thẻ báo trước độ hiếm (Basic không lóe) */
.tcg-back.tcg-hint-rare { box-shadow: 0 0 10px 2px #6FB7E8AA; }
.tcg-back.tcg-hint-epic { box-shadow: 0 0 16px 4px #A57BFFCC; animation: tcg-pulse 1.3s ease-in-out infinite; }
.tcg-back.tcg-hint-legend { box-shadow: 0 0 22px 6px #FFC94ADD; border-color: #FFD966; animation: tcg-pulse 1s ease-in-out infinite; }
.tcg-back.tcg-hint-mythic { box-shadow: 0 0 26px 8px #FF7AC8DD; border-color: #FFB3E2; animation: tcg-pulse .8s ease-in-out infinite, tcg-hue 2.4s linear infinite; }
@keyframes tcg-pulse { 50% { filter: brightness(1.25); } }
@keyframes tcg-hue { to { filter: hue-rotate(360deg); } }
/* Epic trở lên: rung mạnh dần rồi mới lật (thời lượng --card-flip-ms gồm cả phần nạp) */
.tcg-top.is-charging .tcg-flip-inner { animation: tcg-charge var(--card-flip-ms) ease-in forwards; }
@keyframes tcg-charge {
  0% { transform: rotateY(0) scale(1); }
  10% { transform: rotateY(0) scale(1.03) translateX(-2px); } 18% { transform: rotateY(0) scale(1.04) translateX(3px); }
  26% { transform: rotateY(0) scale(1.05) translateX(-4px); } 34% { transform: rotateY(0) scale(1.06) translateX(5px); }
  42% { transform: rotateY(0) scale(1.08) translateX(-6px); } 50% { transform: rotateY(0) scale(1.1) translateX(6px); }
  58% { transform: rotateY(0) scale(1.12); }
  100% { transform: rotateY(180deg) scale(1); }
}
.tcg-revealed-strip { display: flex; justify-content: center; gap: 6px; min-height: 92px; flex-wrap: wrap; }
.tcg-mini { position: relative; width: 62px; animation: tcg-land .35s ease-out; }
.tcg-mini .tcg-face { padding: 2px; border-width: 2px; border-radius: 7px; font-size: 6px; }
.tcg-mini .tcg-card-top, .tcg-mini .tcg-code, .tcg-mini .tcg-fx { display: none; }
.tcg-mini .tcg-name { min-height: 0; font-size: 7px; }
.tcg-mini .tcg-picture { margin: 2px 0; }
@keyframes tcg-land { from { transform: translateY(-60px) scale(1.6); opacity: 0; } }
.tcg-reveal { position: relative; }
.tcg-badge { position: absolute; z-index: 3; top: -6px; right: -4px; padding: 2px 6px; border-radius: 8px; background: #6B5B4B; color: #FFF6E3; font-size: 9px; font-weight: 800; box-shadow: 0 2px 4px #0003; white-space: nowrap; }
.tcg-badge.is-new { background: #E2463A; animation: tcg-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
.tcg-mini .tcg-badge { font-size: 7px; padding: 1px 4px; }
@keyframes tcg-pop { from { transform: scale(0); } }
.tcg-pack-value { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; background: #FFF9EB; }
/* lá Epic+ vừa lật trong hàng: nháy sáng */
.tcg-reveal.is-open.tcg-epic .tcg-front, .tcg-reveal.is-open.tcg-legend .tcg-front, .tcg-reveal.is-open.tcg-mythic .tcg-front { animation: tcg-flash .7s ease-out; }
@keyframes tcg-flash { from { filter: brightness(2.2) saturate(1.4); } }

/* Màn hào quang Legend/Mythic */
.tcg-spotlight { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 14px; padding: 16px; background: radial-gradient(circle at 50% 45%, #3A2A5CEE, #120A1EF5 70%); animation: fadeIn .25s; overflow: hidden; }
.tcg-spot-legend { --spot: #FFC94A; }
.tcg-spot-mythic { --spot: #FF7AC8; }
.tcg-rays { position: absolute; left: 50%; top: 45%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(from 0deg, var(--spot) 0deg 6deg, transparent 6deg 20deg); opacity: .22; animation: tcg-spin 14s linear infinite; pointer-events: none; }
.tcg-spot-mythic .tcg-rays { background: repeating-conic-gradient(from 0deg, #FF7AC8 0deg 6deg, transparent 6deg 15deg, #5FF2DC 15deg 21deg, transparent 21deg 30deg, #FFD04A 30deg 36deg, transparent 36deg 45deg); opacity: .3; }
.tcg-spot-title { position: relative; font-size: clamp(34px, 9vw, 56px); font-weight: 900; letter-spacing: .06em; color: #FFF6E3; text-shadow: 0 0 18px var(--spot), 0 4px 0 #0008; animation: tcg-pop .5s cubic-bezier(.3, 1.8, .5, 1); }
.tcg-spot-card { position: relative; width: min(250px, 70vw); animation: tcg-rise .7s cubic-bezier(.2, 1.4, .4, 1); filter: drop-shadow(0 0 22px var(--spot)); }
.tcg-spot-card .tcg-badge { top: -10px; right: -8px; font-size: 12px; padding: 4px 9px; }
.tcg-spotlight .btn { position: relative; min-height: 48px; min-width: 160px; }
@keyframes tcg-rise { from { transform: translateY(80px) scale(.4) rotate(-12deg); opacity: 0; } }
.tcg-sparks { position: absolute; left: 50%; top: 45%; pointer-events: none; }
.tcg-sparks i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--spot); box-shadow: 0 0 8px var(--spot); animation: tcg-spark 1.4s ease-out infinite; }
.tcg-sparks i:nth-child(odd) { background: #FFF6E3; }
.tcg-sparks i:nth-child(1) { --dx: 160px; --dy: -120px; }
.tcg-sparks i:nth-child(2) { --dx: -150px; --dy: -140px; animation-delay: .1s; }
.tcg-sparks i:nth-child(3) { --dx: 190px; --dy: 40px; animation-delay: .2s; }
.tcg-sparks i:nth-child(4) { --dx: -190px; --dy: 60px; animation-delay: .3s; }
.tcg-sparks i:nth-child(5) { --dx: 60px; --dy: -200px; animation-delay: .4s; }
.tcg-sparks i:nth-child(6) { --dx: -70px; --dy: 190px; animation-delay: .5s; }
.tcg-sparks i:nth-child(7) { --dx: 120px; --dy: 170px; animation-delay: .6s; }
.tcg-sparks i:nth-child(8) { --dx: -130px; --dy: -60px; animation-delay: .7s; }
.tcg-sparks i:nth-child(9) { --dx: 210px; --dy: -40px; animation-delay: .8s; }
.tcg-sparks i:nth-child(10) { --dx: -220px; --dy: -10px; animation-delay: .9s; }
.tcg-sparks i:nth-child(11) { --dx: 20px; --dy: 220px; animation-delay: 1s; }
.tcg-sparks i:nth-child(12) { --dx: -20px; --dy: -230px; animation-delay: 1.1s; }
@keyframes tcg-spark { from { transform: translate(0, 0) scale(1.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tcg-aura, .tcg-pack-body, .tcg-back, .tcg-rays, .tcg-sparks i, .tcg-spot-card, .tcg-spot-title, .tcg-mini, .tcg-badge, .tcg-front { animation: none !important; }
  .tcg-top.is-charging .tcg-flip-inner { animation: none; transform: rotateY(180deg); }
}

/* Ngày khai trương: thẻ hướng dẫn trên cảnh quán, tin mở khóa buổi sáng */
.coach { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0; padding: 8px 12px; border-radius: 12px;
  background: #E1F6F2; border: 2px solid #1FA89A; color: #0F5C54; font-size: 14px; line-height: 1.4; animation: dockIn .25s ease-out; }
.coach[hidden] { display: none; }
.coach-step { font-weight: 800; white-space: nowrap; }
.coach-text { flex: 1 1 240px; }
.coach-skip { margin-left: auto; border: 0; background: none; color: #5E7C76; text-decoration: underline; font: inherit; font-size: 12px; cursor: pointer; padding: 4px; }
.unlock-news { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #FFF4D6; border: 1px dashed #E2A93B; }
.unlock-news span { font-size: 13px; color: var(--muted); }
.host-app.locked { opacity: .55; cursor: default; }
.host-app.locked:hover { background: #FFFDF4; outline: none; }

/* ---------- Bố cục: màn rộng dùng hết khung, điện thoại gọn ----------
   Cùng điều kiện với COMPACT_MQ trong game.js: màn rộng = từ 900px và nằm ngang. */
.scene-wrap .infra {
  position: absolute; top: 6px; left: 6px; z-index: 4; max-width: calc(100% - 12px);
  padding: 0; background: none; border: 0;
}
.scene-wrap .ipill { background: #FFFDF5E6; box-shadow: 0 1px 3px #4534291F; }
.menu-list { display: grid; gap: 8px; }
.menu-list .btn { width: 100%; min-height: 48px; justify-content: flex-start; text-align: left; }
.modal-menu { width: min(360px, 100%); }

@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .compact-only { display: none !important; }
  /* trong ngày: cảnh quán lấp cột trái, quầy thao tác là cột phải cuộn riêng, trang không cuộn */
  #screen-play.active { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .play-col {
    width: 100%; height: 100%; min-height: 0; display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 480px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "hud hud" "coach dock" "scene dock" "scene actions";   /* hàng nút xuống đáy cột phải, cảnh cao hết cỡ */
  }
  .phud { grid-area: hud; position: relative; top: auto; }
  .coach { grid-area: coach; margin: 8px 12px 0; }
  .scene-wrap { grid-area: scene; position: relative; top: auto; min-height: 0; box-shadow: none; }
  #scene { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
  .play-actions { grid-area: actions; border-left: 4px solid #A86F45; }
  .dock { grid-area: dock; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 0; border-left: 4px solid #A86F45; }
  .dock::before { display: none; }

  /* buổi sáng: rộng tới 1440px, cảnh quán dính bên trái */
  #screen-prep { width: min(100%, 1440px); }
  #screen-prep .prep-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; padding: 12px 16px; align-items: start; }
  .pr-morning { position: sticky; top: 80px; }
  #screen-prep .hud { flex-wrap: nowrap; }
  #screen-prep .hud-shop { width: auto; min-width: 0; }
  .hud-nav { display: flex; align-items: center; gap: 8px; }
  #screen-prep .prep-footer { width: min(100%, 1440px); align-items: flex-end; justify-content: flex-end; }
  #btn-open { max-width: 480px; }
}

@media not all and (min-width: 900px) and (min-aspect-ratio: 4/3) {
  .wide-only { display: none !important; }
  /* trong ngày: thanh trên một dòng, thẻ khai trương và hàng nút mỏng lại */
  #screen-play .phud { flex-wrap: nowrap; padding: 6px; gap: 4px; }
  #screen-play .ppill { padding: 3px 6px; font-size: 11px; }
  #screen-play .ppill b { font-size: 13px; }
  #screen-play .phud .icon-btn { width: 34px; height: 34px; }
  #screen-play .phud-sp { display: block; flex: 1; }
  #screen-play .scene-wrap .infra { position: absolute; top: 4px; left: 4px; flex-wrap: wrap; overflow: visible; padding: 0; }
  #screen-play .scene-wrap .ipill { font-size: 11px; padding: 2px 7px; }
  .coach { margin: 4px 6px; padding: 5px 10px; font-size: 12.5px; gap: 0 8px; border-width: 1.5px; }
  .coach-step { font-size: 12px; }
  #screen-play .play-actions { padding: 4px 8px; }
  #screen-play .play-actions .btn { min-height: 38px; padding: 6px 10px; }

  /* buổi sáng: tên quán + ☰ một dòng, ba số liệu một dòng; cảnh quán thấp lại cho thấy sổ nhập hàng */
  #screen-prep .hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 6px; padding: 8px 10px; }
  #screen-prep .hud-shop { grid-column: 1 / 4; width: auto; padding: 0; }
  #screen-prep .menu-btn { grid-column: 4; grid-row: 1; width: 40px; height: 40px; align-self: center; }
  #screen-prep .hud-spacer { display: none; }
  #screen-prep .hud-item { justify-content: center; }
  .pr-morning svg { max-height: 34vh; }
  .pr-tabs button { min-height: 58px; padding: 6px 2px; }
  .pr-object, .pr-object svg { width: 30px; height: 30px; margin-bottom: 2px; }
}
.account-fold > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.account-fold > summary::-webkit-details-marker { display: none; }
.account-fold > summary h3::after { content: ' ▸'; color: var(--muted); font-size: 14px; }
.account-fold[open] > summary h3::after { content: ' ▾'; }
.account-fold[open] > summary { margin-bottom: 8px; }

/* ---------- Giao diện pixel (đợt 1 đồ họa pixel) ----------
   Một "ô pixel" giao diện = --px. Viền khuyết góc bằng bốn bóng cứng, không bo tròn, không dải màu.
   Tiêu đề, nút, con số dùng VT323; chữ đọc dài giữ Be Vietnam Pro. Icon pixel do pixel-ui.js chèn (.px-ic). */
:root {
  --px: 3px; --ink: #2B1D22; --paper: #FFF8EC; --cream: #F3E3C3; --cream-d: #E3CBA0;
  --jade: #2E9C8A; --jade-d: #1E6B5F; --jade-l: #6CCBB2; --terra: #C8693F; --terra-d: #8E4430; --terra-l: #EBA77A;
  --red: #D9534A; --red-d: #9E3530; --red-l: #F08A80;
  --notch: 0 calc(-1 * var(--px)) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink);
  --drop: 0 calc(2 * var(--px)) 0 0 #2B1D2240;
}
@media not all and (min-width: 900px) and (min-aspect-ratio: 4/3) { :root { --px: 2px; } }
.px-ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; image-rendering: pixelated; margin: 0 .08em; }
:is(#screen-title, #screen-prep, #screen-play, #modal-root, #fx-layer) * { border-radius: 0 !important; }
:is(#screen-title, #screen-prep, #screen-play, #modal-root) :is(h1, h2, h3, .modal-title, .dock-title, .dock-head h3) {
  font-family: 'VT323', monospace; font-weight: 400; letter-spacing: .5px; line-height: 1.05;
}
:is(#screen-prep, #modal-root) h2, #modal-root .modal-title { font-size: 30px; }
:is(#screen-prep, #screen-play, #modal-root) h3, :is(#screen-play) .dock-title, #screen-play .dock-head h3 { font-size: 25px; }

/* nút */
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn {
  font-family: 'VT323', monospace; font-weight: 400; font-size: 23px; line-height: 1; letter-spacing: .3px;
  margin: var(--px); padding: 8px 14px 10px; border: 0; background: var(--paper); background-image: none; color: var(--ink);
  box-shadow: var(--notch), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--cream-d), var(--drop); filter: none; transform: none;
}
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn:hover { background: var(--cream); filter: none; }
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn:active:not(:disabled) { transform: translateY(var(--px)); box-shadow: var(--notch), inset var(--px) var(--px) 0 0 var(--cream-d); }
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn.small { font-size: 20px; padding: 6px 10px 8px; }
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn.big { font-size: 30px; padding: 12px 24px 14px; }
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn.primary {
  background: var(--jade); color: var(--paper); border: 0;
  box-shadow: var(--notch), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--jade-d), inset var(--px) var(--px) 0 0 var(--jade-l), var(--drop);
}
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn.primary:hover { background: #36AE9A; }
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn.danger {
  background: var(--red); color: var(--paper); border: 0;
  box-shadow: var(--notch), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--red-d), inset var(--px) var(--px) 0 0 var(--red-l), var(--drop);
}
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn.ghost.danger { background: var(--paper); color: var(--red-d); box-shadow: var(--notch), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--cream-d), var(--drop); }
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn.hold {
  background: var(--terra); color: var(--paper);
  box-shadow: var(--notch), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--terra-d), inset var(--px) var(--px) 0 0 var(--terra-l), var(--drop);
}
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .btn:disabled { opacity: .45; }
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .icon-btn {
  font-family: 'VT323', monospace; font-size: 20px; font-weight: 400; margin: var(--px);
  border: 0; background: var(--paper); box-shadow: var(--notch), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 0 var(--cream-d);
}
:is(#screen-title, #screen-prep, #screen-play, #modal-root) .icon-btn .px-ic { width: 20px; height: 20px; margin: 0; vertical-align: middle; }

/* ô số liệu, chip */
#screen-play .ppill, #screen-prep .hud-item, .scene-wrap .ipill {
  border: 0; background: var(--paper); background-image: none; margin: var(--px); box-shadow: var(--notch);
}
#screen-play .ppill b, #screen-prep .hud-item b { font-family: 'VT323', monospace; font-weight: 400; font-size: 22px; line-height: 1; }
#screen-prep .hud-item .lbl { font-family: 'VT323', monospace; font-size: 15px; letter-spacing: .5px; }
.scene-wrap .ipill { font-family: 'VT323', monospace; font-size: 18px; font-weight: 400; }
:is(#screen-prep, #screen-play, #modal-root) .chip { background: var(--cream); border: 0; box-shadow: inset 0 0 0 1px #C9AD82; }

/* khung, cửa sổ nổi */
.modal-overlay { background: #2B1D2299; backdrop-filter: none; }
#modal-root .modal {
  border: 0; background: var(--paper); background-image: none; margin: 4px;
  box-shadow: 0 -4px 0 0 var(--ink), 0 4px 0 0 var(--ink), -4px 0 0 0 var(--ink), 4px 0 0 0 var(--ink), 0 12px 0 0 #2B1D2255;
}
:is(#screen-prep, #modal-root) :is(.panel, .pr-page, .account-box, .host-app, .note, .warn, .unlock-news, .tcg-shop) { background-image: none; }
#screen-prep .pr-page, #modal-root .host-app, #modal-root .account-box { border: 0; box-shadow: var(--notch); margin: var(--px); }
#modal-root .host-app:hover { outline: none; background: #E1F6F2; }
:is(#screen-prep, #screen-play, #modal-root) .note { color: var(--jade-d); background: #E1F6F2; border: 0; box-shadow: inset 0 0 0 2px var(--jade); }
:is(#screen-prep, #screen-play, #modal-root) .warn { color: #7A4508; background: #FBEAC6; border: 0; box-shadow: inset 0 0 0 2px #D3962E; }
.coach { border: 0; box-shadow: var(--notch), inset 0 0 0 2px var(--jade); margin: 6px calc(6px + var(--px)); }
.unlock-news { border: 0; box-shadow: inset 0 0 0 2px #D3962E; }
.speech { box-shadow: 0 0 0 2px var(--ink); }
.speech::before { display: none; }

/* tab buổi sáng */
#screen-prep .pr-tabs button {
  font-family: 'VT323', monospace; font-weight: 400; font-size: 20px; letter-spacing: .3px;
  background: var(--cream-d); background-image: none; border: 0; margin: var(--px); box-shadow: var(--notch), inset 0 calc(-1 * var(--px)) 0 0 #C9AD82;
}
#screen-prep .pr-tabs button[aria-selected="true"] { background: var(--paper); box-shadow: var(--notch), inset 0 calc(-1 * var(--px)) 0 0 var(--jade); }
#modal-root .howto-tabs .btn { min-height: 0; }

/* khách ở cửa, thanh kiên nhẫn chia ô */
#screen-play .cust { border: 0; background: var(--paper); box-shadow: var(--notch); margin: var(--px); }
#screen-play .cust.selected { box-shadow: var(--notch), inset 0 0 0 var(--px) var(--jade); }
.patience { background: #3A2A2E; }
.patience::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, #2B1D22 10px 12px); pointer-events: none; }
.patience.checkin-patience { position: relative; }
.fill { border: 0; box-shadow: var(--notch); background: #3A2A2E; }
#screen-prep .hud-item, #screen-play .ppill, .hud-nav .btn, .play-actions .btn, #screen-prep .hud-shop { white-space: nowrap; }
#screen-prep .hud-item { padding: 4px 8px; }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) { #screen-prep .hud-item { flex-direction: row; align-items: baseline; gap: 6px; } }
:is(#screen-play) .icon-btn.speed-btn { width: auto; padding: 0 6px; white-space: nowrap; }

/* ---------- Cảnh quán pixel: hoạt hình từng khung (steps), không trượt mượt ---------- */
#scene image { image-rendering: pixelated; }
#scene .px-type { animation: px-type .5s steps(1) infinite; }
@keyframes px-type { 50% { transform: translateY(5px); } }
#scene .px-hop { animation: px-hop .5s steps(1) infinite; }
@keyframes px-hop { 50% { transform: translateY(-10px); } }
#scene .px-shake { animation: px-shake .3s steps(1) infinite; }
@keyframes px-shake { 50% { transform: translateX(5px); } }
#scene .px-sit { animation: px-sit .4s steps(2) 1; }
@keyframes px-sit { from { transform: translateY(-15px); } }
#scene .px-flick { animation: px-flick 1.4s steps(1) infinite; }
@keyframes px-flick { 50% { opacity: .55; } }
#scene #flame { display: none; }
#scene #flame.on { display: inline; animation: px-flick .3s steps(1) infinite; }
#scene .px-steam { opacity: .6; animation: px-steam 1s steps(1) infinite; }
#scene .px-steam.strong { opacity: 1; }
@keyframes px-steam { 50% { transform: translateY(-5px); } }
#scene .walking { animation: px-walk .36s steps(1) infinite; }
@keyframes px-walk { 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { #scene .px-type, #scene .px-hop, #scene .px-shake, #scene .px-flick, #scene .px-steam, #scene .walking { animation: none; } }
#scene .sc-bubble { filter: none; animation: px-pop .3s steps(3) 1, px-bob 1.2s steps(1) .3s infinite; }
@keyframes px-pop { from { transform: translateY(12px); opacity: 0; } }
@keyframes px-bob { 50% { transform: translateY(-4px); } }
#scene .sit-in, #scene .sc-pop { animation: px-pop .3s steps(3) 1; }
svg.face { image-rendering: pixelated; }
#screen-play .dock-actions .btn, #modal-root .modal-actions .btn { white-space: nowrap; }

/* ---------- Màn tiêu đề và buổi sáng pixel (đợt 3) ---------- */
#title-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 12px; font-size: 0; line-height: 0; }
#title-logo .px-logo { display: block; max-width: 100%; height: auto; }
#title-scene { border: 0; box-shadow: var(--notch), 0 6px 0 #2B1D2233; }
#title-scene svg, #prep-scene svg { background: #F3E3C3; image-rendering: pixelated; }
.pr-object { filter: none; }
.pr-object .px-ic { width: 40px; height: 40px; margin: 0; }
.si .px-item { display: block; margin: auto; image-rendering: pixelated; }
.pr-page .si .px-item { width: 40px; height: 40px; }
#screen-play .stock-btn .si .px-item { width: 26px; height: 26px; }
.pr-preview svg, .pr-page .mc-picture svg { image-rendering: pixelated; }
@media (max-width: 760px) { .pr-object .px-ic { width: 30px; height: 30px; } }
#title-scene { width: min(100%, calc(42vh * 760 / 680)); margin: 0 auto; }
#title-scene svg { width: 100%; height: auto; max-height: none; }

/* ---------- Sổ sách kế toán theo TT99 (game-ledger.js) ---------- */
.good-text { color: var(--good, #4fd18b); }
.modal.ledger-modal { width: min(980px, 100%); }
.ledger-open { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.ledger-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ledger-pick { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 8px 0; font-size: 14px; }
.ledger-pick select { max-width: 100%; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; }
.ledger-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ledger-table th, .ledger-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ledger-table th { background: var(--panel2); position: sticky; top: 0; white-space: nowrap; }
.ledger-table .num { text-align: right; white-space: nowrap; }
.ledger-table .nowrap { white-space: nowrap; }
.ledger-table tr.total td { font-weight: 800; }
.ledger-table tr.head td { font-weight: 800; background: var(--panel2); }
.ledger-table tr[data-ledger-entry] { cursor: pointer; }
.ledger-table tr[data-ledger-entry]:hover, .ledger-table tr.sel { background: rgba(35, 141, 128, .12); }
.ledger-table button.link, .ledger-voucher button.link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-align: left; text-decoration: underline dotted; cursor: pointer; }
.ledger-voucher { margin-top: 12px; padding: 10px; border: 2px dashed var(--line); border-radius: 12px; background: var(--panel); }
.ledger-voucher .ledger-table { margin-top: 6px; }
.ledger-table.report td:first-child, .ledger-table td:nth-child(3) { min-width: 190px; }
@media (max-width: 760px) {
  .ledger-tabs { gap: 4px; }
  .ledger-tabs .btn { font-size: 12px; padding: 4px 8px; }
  .ledger-tabs .btn .px-ic { width: 16px; height: 16px; }
}
.ledger-table.tax-form input { width: 140px; max-width: 40vw; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #FFFDF4; color: var(--text); font: inherit; text-align: right; }
.ledger-table.tax-form td:first-child { min-width: 170px; }
.ledger-table.tax-form td:nth-child(3) { min-width: 0; }
@media (max-width: 760px) {
  .ledger-table.tax-form td:first-child { min-width: 0; }
  .ledger-table.tax-form input { width: 112px; }
}

/* ---------- Khung thẻ, gói thẻ, màn mở gói theo pixel ----------
   Đè lên các khối thẻ cũ phía trên: nền màu đặc theo độ hiếm, viền bằng bóng cứng, không dải màu hay bóng nhòe.
   Hào quang và ánh sáng là vòng viền cứng nhấp nháy theo bước. */
.tcg-basic { --card-bg: #244D45; --card-ring: #AEC7BD; }
.tcg-rare { --card-bg: #1B3A5C; --card-ring: #7DB4E3; }
.tcg-epic { --card-bg: #3A2860; --card-ring: #9C7BD0; }
.tcg-legend { --card-bg: #5E3B1C; --card-ring: #F6CB55; }
.tcg-mythic { --card-bg: #4A2C55; --card-ring: #F29BB8; }
.tcg-face, .tcg-mythic .tcg-face, .tcg-face.tcg-mythic {
  margin: var(--px); padding: calc(3 * var(--px)); border: 0; background: var(--card-bg); color: #FFF5DE;
  box-shadow: var(--notch), inset 0 0 0 var(--px) var(--card-ring), inset 0 0 0 calc(2 * var(--px)) var(--card-bg), inset 0 0 0 calc(3 * var(--px)) #00000040;
}
.tcg-face::before { display: none; }
/* lấp lánh góc thẻ: dấu cộng 3×3 ô pixel */
.tcg-face::after {
  content: ''; bottom: calc(4 * var(--px) + 3px); right: calc(5 * var(--px) + 3px); width: 3px; height: 3px; font-size: 0;
  background: var(--card-ring); box-shadow: 0 -3px var(--card-ring), 0 3px var(--card-ring), -3px 0 var(--card-ring), 3px 0 var(--card-ring);
}
.tcg-card-top { min-height: 22px; }
.tcg-rarity {
  padding: 1px 6px 2px; border: 0; background: var(--card-ring); color: var(--ink); box-shadow: 0 0 0 2px var(--ink);
  font-family: 'VT323', monospace; font-size: 15px; font-weight: 400; line-height: 1;
}
.tcg-stamp { color: #FFF4D9; text-shadow: none; font-family: 'VT323', monospace; font-size: 13px; font-weight: 400; letter-spacing: .5px; }
.tcg-picture { border: 0; background: var(--card-bg); box-shadow: 0 0 0 var(--px) var(--ink); margin: calc(2 * var(--px)) var(--px) calc(3 * var(--px)); }
.tcg-picture svg, .tcg-art-fallback svg { image-rendering: pixelated; }
.tcg-name { color: #FFF0BC; text-shadow: 2px 2px 0 #0007; font-family: 'VT323', monospace; font-weight: 400; font-size: 18px; line-height: 1; }
.tcg-detail .tcg-name { font-size: 26px; }
.tcg-open-stage .tcg-name { font-size: 16px; }
.tcg-fx { background: #00000038; box-shadow: inset 0 0 0 1px #FFFFFF1A; }
.tcg-code { color: #E8DDF5; font-family: 'VT323', monospace; font-size: 13px; letter-spacing: 1px; }
.tcg-base-price { border-top: 2px dashed #FFF1CB55; font-family: 'VT323', monospace; font-size: 15px; }
.tcg-badge { border: 0; background: #6B5B4B; box-shadow: 0 0 0 2px var(--ink); font-family: 'VT323', monospace; font-size: 14px; font-weight: 400; line-height: 1; padding: 2px 5px; }
.tcg-badge.is-new { background: var(--red); animation: tcg-pop .3s steps(3); }
.tcg-mini .tcg-face { padding: 3px; box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--card-ring); }
.tcg-mini .tcg-face::after { display: none; }
.tcg-mini .tcg-name { font-size: 11px; text-shadow: none; }
.tcg-mini .tcg-badge { font-size: 11px; }

/* lưng thẻ: nền xanh than, viền vàng, khuyết góc; độ hiếm báo trước bằng vòng màu cứng */
.tcg-back {
  border: 0; outline: 0; background: #293A55; color: #FFF6E3;
  box-shadow: var(--notch), inset 0 0 0 calc(2 * var(--px)) #DDC991, inset 0 0 0 calc(3 * var(--px)) #293A55, inset 0 0 0 calc(4 * var(--px)) #DDC99166;
}
.tcg-back b { font-family: 'VT323', monospace; font-weight: 400; color: #DDC991; }
.tcg-back span, .tcg-back small { font-family: 'VT323', monospace; font-size: 15px; letter-spacing: 1px; }
.tcg-back.tcg-hint-rare { box-shadow: var(--notch), inset 0 0 0 calc(2 * var(--px)) #7DB4E3, 0 0 0 calc(3 * var(--px)) #7DB4E366; }
.tcg-back.tcg-hint-epic { box-shadow: var(--notch), inset 0 0 0 calc(2 * var(--px)) #9C7BD0, 0 0 0 calc(3 * var(--px)) #9C7BD0AA; animation: tcg-px-blink .9s steps(1) infinite; }
.tcg-back.tcg-hint-legend { box-shadow: var(--notch), inset 0 0 0 calc(2 * var(--px)) #F6CB55, 0 0 0 calc(3 * var(--px)) #F6CB55CC, 0 0 0 calc(5 * var(--px)) #F6CB5555; animation: tcg-px-blink .6s steps(1) infinite; }
.tcg-back.tcg-hint-mythic { box-shadow: var(--notch), inset 0 0 0 calc(2 * var(--px)) #F29BB8, 0 0 0 calc(3 * var(--px)) #F29BB8CC, 0 0 0 calc(5 * var(--px)) #6CCBB277; animation: tcg-px-blink .45s steps(1) infinite, tcg-hue 2.4s steps(8) infinite; }
@keyframes tcg-px-blink { 50% { filter: brightness(1.3); } }
.tcg-stack-under { border: 0; background: #293A55; box-shadow: var(--notch), inset 0 0 0 calc(2 * var(--px)) #DDC991; }
.tcg-reveal.is-open::after { border: 0; border-radius: 0; box-shadow: 0 0 0 calc(2 * var(--px)) var(--card-ring), 0 0 0 calc(4 * var(--px)) var(--ink); animation: tcg-px-ring .45s steps(3) both; }
@keyframes tcg-px-ring { from { opacity: 1; } to { opacity: 0; } }

/* gói thẻ: dải xé răng cưa, thân gói sọc cứng, các lá ló ra */
.tcg-pack { filter: drop-shadow(0 6px 0 #2B1D2244); }
.tcg-tear-strip {
  border: 0; color: #FBEEBB; background: repeating-linear-gradient(90deg, #FFFFFF14 0 3px, transparent 3px 6px), #3A3466;
  box-shadow: inset 0 var(--px) 0 #6C64A8; font-family: 'VT323', monospace; font-size: 20px; font-weight: 400;
}
.tcg-pack-body {
  border: 0; background: repeating-linear-gradient(90deg, #FFFFFF0F 0 3px, transparent 3px 6px), #2E3352;
  box-shadow: 0 var(--px) 0 var(--ink), var(--px) 0 0 var(--ink), calc(-1 * var(--px)) 0 0 var(--ink), inset 0 0 0 var(--px) #DDC99177;
}
.tcg-pack-body > b { font-family: 'VT323', monospace; font-weight: 400; font-size: 24px; line-height: 1; }
.tcg-pack-body > span, .tcg-pack-body small { font-family: 'VT323', monospace; font-weight: 400; font-size: 16px; letter-spacing: .5px; }
.tcg-pack-body > div { box-shadow: 0 0 0 var(--px) var(--ink); }
.tcg-pull-cards i { border: 0; background: #293A55; box-shadow: var(--notch), inset 0 0 0 calc(2 * var(--px)) #DDC991; }
/* hào quang gói: hai vòng cứng thay quầng mờ */
.tcg-aura { inset: 0; box-shadow: 0 0 0 calc(3 * var(--px)) var(--aura), 0 0 0 calc(6 * var(--px)) color-mix(in srgb, var(--aura) 45%, transparent); opacity: .85; animation: tcg-px-blink 1s steps(1) infinite; }
.tcg-aura-mythic .tcg-aura { animation: tcg-px-blink .5s steps(1) infinite, tcg-hue 2.4s steps(8) infinite; }
.tcg-aura-legend .tcg-pack-body, .tcg-aura-mythic .tcg-pack-body { animation: tcg-wiggle 1.6s steps(12) infinite; }

/* màn Legend/Mythic */
.tcg-spotlight { background: #160E24F2; }
.tcg-rays, .tcg-spot-mythic .tcg-rays { opacity: .16; animation: tcg-spin 14s steps(56) infinite; }
.tcg-spot-title { font-family: 'VT323', monospace; font-weight: 400; letter-spacing: 3px; text-shadow: 4px 4px 0 var(--spot), 0 8px 0 #0008; animation: tcg-pop .4s steps(4); }
.tcg-spot-card { filter: drop-shadow(5px 5px 0 var(--spot)); animation: tcg-rise .6s steps(6); }
.tcg-sparks i { width: 9px; height: 9px; box-shadow: none; animation-timing-function: steps(7); }

/* mở gói và người mua thẻ: nền giấy đặc, không kính mờ */
.tcg-open-actions { background: var(--paper); box-shadow: 0 calc(-1 * var(--px)) 0 var(--ink); }
#modal-root .modal.tcg-buyer-modal { backdrop-filter: none; }
.tcg-buyer-modal .tcg-quote { background: var(--cream); border: 0; box-shadow: var(--notch); margin: var(--px); }
.tcg-buyer-modal .modal-actions { background: var(--paper); box-shadow: 0 calc(-1 * var(--px)) 0 var(--ink); }
.tcg-price-detail, .tcg-quote, .tcg-message, .tcg-demo-note, .tcg-collection-progress, .tcg-pack-value { box-shadow: inset 0 0 0 2px #C9AD82; border: 0; }
.tcg-shop { border: 0; box-shadow: var(--notch); margin: var(--px); }
.tcg-filters input, .tcg-filters select { border: 0; box-shadow: inset 0 0 0 2px #C9AD82; }
.tcg-shelf-slot.is-empty, .tcg-empty-owned { border: 2px dashed #C9AD82; }
@media (max-width: 600px) {
  .tcg-reveal .tcg-name { font-size: 14px; }
  .tcg-reveal .tcg-stamp { font-size: 11px; }
  .tcg-reveal .tcg-rarity { font-size: 12px; }
}
@media (max-width: 480px) {
  .tcg-reveal .tcg-face { padding: calc(2 * var(--px)); box-shadow: var(--notch), inset 0 0 0 var(--px) var(--card-ring); }
  .tcg-reveal .tcg-code { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .tcg-aura, .tcg-back, .tcg-rays, .tcg-sparks i, .tcg-spot-card, .tcg-spot-title, .tcg-badge { animation: none !important; }
}
/* Hóa đơn bán hàng (game-invoice.js) */
.invoice-src { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 10px; }
.invoice-card { padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel2); font-size: 13px; }
.invoice-paper { padding: 10px; border: 2px solid var(--line); border-radius: 12px; background: #FFFDF4; }
.invoice-head { text-align: center; margin-bottom: 6px; letter-spacing: .5px; }
.invoice-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; font-size: 14px; }
.invoice-field input { flex: 1 1 200px; min-width: 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; }
.invoice-field.wide input { flex-basis: 100%; }
.ledger-table.invoice-lines td:nth-child(3) { min-width: 0; }
.ledger-table.invoice-lines input { width: 110px; max-width: 32vw; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; text-align: right; }
@media (max-width: 760px) {
  .ledger-table.invoice-lines th:first-child, .ledger-table.invoice-lines td:first-child,
  .ledger-table.invoice-lines th:nth-child(3), .ledger-table.invoice-lines td:nth-child(3) { display: none; }
  .ledger-table.invoice-lines th, .ledger-table.invoice-lines td { padding: 5px 4px; white-space: normal; }
  .ledger-table.invoice-lines input { width: 84px; }
}
/* Kiểm toán nội bộ (game-audit.js) */
.audit-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
.audit-act input, .audit-act select, .audit-line input, .audit-line select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font: inherit; max-width: 100%; }
.audit-act input { width: 120px; }
.audit-line { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.audit-line select { flex: 1 1 150px; min-width: 0; }
.audit-line input { width: 120px; }
.audit-review { max-height: 300px; overflow-y: auto; }
.ledger-table.tax-form select { max-width: 160px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; }
.count-cell input { width: 70px; display: block; margin-bottom: 4px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; text-align: right; }
.ledger-table.tax-form .count-cell select { max-width: 100%; }
@media (max-width: 760px) { .ledger-table.tax-form th { white-space: normal; } }
@media (max-width: 760px) {
  .ledger-modal .ledger-table th { white-space: normal; }
  .ledger-table.tax-form th, .ledger-table.tax-form td { padding: 5px 4px; }
  .ledger-table.tax-form .count-cell select { width: 118px; }
}
.ledger-table.compact td:nth-child(3) { min-width: 0; }