:root {
  --bg: #f3e3cc; --ink: #3a2317; --soft: #7a5a48; --panel: #fffaf2; --line: #ead7bd;
  --brown: #8a5a3b; --red: #e25b4a; --red-d: #a93d30; --mint: #4fa883; --mint-d: #2f7a5c; --gold: #f0b43c; --warn: #e2574c;
  --shadow: 0 4px 0 var(--ink); --shadow-sm: 0 3px 0 var(--ink);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-snap: cubic-bezier(.5, 0, .1, 1);
  --nav-h: 76px;
}
/* touch-action: manipulation tắt phóng to bằng chạm đúp trên mobile (vẫn cho cuộn trong bảng) */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--ink); font-family: 'Baloo 2', system-ui, sans-serif; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; transition: transform .22s var(--ease-pop), box-shadow .22s var(--ease-pop), filter .15s; }
button:active { transform: translateY(3px) scale(.95); transition-duration: .06s; transition-timing-function: var(--ease-snap); }
button.dis { filter: grayscale(.6) opacity(.55); }
svg { display: block; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.punch { animation: punch .35s var(--ease-pop); }
@keyframes punch { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- thanh trên ---------- */
#hud { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 10px; background: var(--panel); border-bottom: 3px solid var(--ink); box-shadow: 0 3px 0 #3a231733; z-index: 5; font-weight: 700; }
.icb { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--brown); color: #fff; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); display: grid; place-items: center; padding: 0; }
.icb svg { width: 22px; height: 22px; }
.icb.ghosty { background: #f1e4d0; color: var(--brown); }
.icb:active { box-shadow: 0 0 0 var(--ink); }
.h-shop { flex: 1; min-width: 0; line-height: 1.1; }
.h-shop b { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: left center; }
.h-shop small { display: block; font-size: 12px; font-weight: 600; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-m { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 5px; border-radius: 22px; background: #fff; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); line-height: 1; }
.h-m i { width: 30px; height: 30px; flex: none; }
.h-m span { display: block; font-size: 21px; font-weight: 800; color: var(--brown); font-variant-numeric: tabular-nums; white-space: nowrap; }
.h-m small { display: block; font-size: 11px; font-weight: 700; color: var(--mint-d); white-space: nowrap; }

/* ---------- dòng nhiệm vụ dưới thanh trên ---------- */
#goal { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 70px); transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 7px; max-width: min(94vw, 460px); min-height: 40px; padding: 4px 12px 4px 7px; border-radius: 20px; background: #fffaf2ee; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 700; text-align: left; }
#goal:active { transform: translateX(-50%) translateY(3px) scale(.96); box-shadow: 0 0 0 var(--ink); }
#goal i { width: 24px; height: 24px; flex: none; }
#goal span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#goal > b { flex: none; color: var(--soft); font-variant-numeric: tabular-nums; }
#goal .claim, #goal .go { padding: 1px 10px; border-radius: 12px; background: var(--mint); color: #fff; border: 2px solid var(--ink); }
#goal.ready { background: #fff3d6; animation: goalGlow 1.4s ease-in-out infinite; }
@keyframes goalGlow { 50% { box-shadow: 0 3px 0 var(--ink), 0 0 0 4px #f0b43c77; } }
#goal.pop { animation: goalPop .45s var(--ease-pop); }
@keyframes goalPop { from { transform: translateX(-50%) scale(.7); opacity: .3; } }

/* ---------- nhãn trạm, bong bóng khách ---------- */
#labels, #bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.lbl { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 3px; min-height: 30px; padding: 2px 7px 5px; border-radius: 11px; background: #fffaf2f2; border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font-size: 13px; font-weight: 800; white-space: nowrap; color: var(--ink); will-change: transform; pointer-events: auto; line-height: 1; }
.lbl:active { box-shadow: 0 0 0 var(--ink); }
/* sao và mũi tên là huy hiệu ở góc, để nhãn đủ hẹp cho năm trạm đứng cạnh nhau */
.lbl .st { position: absolute; top: -11px; right: -9px; display: flex; align-items: center; gap: 0; padding: 0 4px 0 1px; border-radius: 9px; background: var(--ink); color: #ffd23f; font-size: 11px; line-height: 16px; }
.lbl .st svg { width: 13px; height: 13px; color: var(--gold); }
.lbl .up { position: absolute; top: -13px; left: -9px; width: 20px; height: 20px; animation: upBob .7s ease-in-out infinite alternate; }
@keyframes upBob { to { transform: translateY(-3px); } }
.lbl.can { border-color: var(--mint-d); box-shadow: 0 2px 0 var(--mint-d), 0 0 0 3px #4fa88355; }
.lbl .bar { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 3px; border-radius: 2px; background: #3a23171a; overflow: hidden; opacity: 0; transition: opacity .2s; }
.lbl .bar.on { opacity: 1; }
.lbl .bar i { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); }
.lbl.lock { background: #fff3d6f2; padding-bottom: 2px; }
.lbl.lock .lk { width: 16px; height: 16px; }
.lbl.lock.can { background: var(--mint); color: #fff; border-color: var(--ink); animation: breatheS 1.2s ease-in-out infinite; }
/* nhãn và bong bóng được đặt chỗ bằng transform, nên animation chỉ được dùng scale/opacity */
@keyframes breatheS { 50% { scale: 1.07; } }
.lbl.lock.far { opacity: .55; padding: 2px 6px; }

.bub { position: absolute; left: 0; top: 0; width: 38px; height: 42px; padding: 3px 5px; border-radius: 12px; background: #fff; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); will-change: transform; animation: bubIn .4s var(--ease-pop) both; }
.bub::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.bub .dic { width: 100%; height: 100%; }
.bub.taken { background: #eaf7f0; border-color: var(--mint-d); }
/* khách vừa tới, gấu chưa ra ghi món: bong bóng "..." đang gọi */
.bub.ask .dots { display: flex; align-items: center; justify-content: center; gap: 3px; height: 100%; }
.bub.ask .dots b { width: 6px; height: 6px; border-radius: 50%; background: #b7a08c; animation: askDot 1.1s ease-in-out infinite; }
.bub.ask .dots b:nth-child(2) { animation-delay: .18s; }
.bub.ask .dots b:nth-child(3) { animation-delay: .36s; }
@keyframes askDot { 40% { translate: 0 -4px; opacity: 1; } }
.bub.bye { animation: bye .22s var(--ease-snap) forwards; }
@keyframes bubIn { from { scale: .3; opacity: 0; } }
@keyframes bye { to { opacity: 0; scale: .6; } }

/* ---------- thanh dưới ---------- */
#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 10px); pointer-events: none; }
#nav button { position: relative; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 94px; min-height: 64px; padding: 6px 4px 5px; border-radius: 18px; background: var(--panel); border: 3px solid var(--ink); box-shadow: var(--shadow); font-size: 13px; font-weight: 800; }
#nav button svg { width: 30px; height: 30px; }
#nav button:active { box-shadow: 0 0 0 var(--ink); }
#nav button.mid { width: 112px; min-height: 76px; background: var(--gold); }
#nav button.mid svg { width: 36px; height: 36px; }
.bdg { position: absolute; top: -9px; right: -7px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--red); color: #fff; font-size: 13px; line-height: 19px; border: 2.5px solid var(--ink); }

/* ---------- bảng trượt ---------- */
#sheet { position: fixed; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center; background: #3a231733; }
.sheet-card { width: min(100%, 560px); max-height: 72vh; display: flex; flex-direction: column; background: var(--panel); border: 3px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 20px); box-shadow: 0 -4px 0 #3a231722; }
.sheet-card.enter { animation: sheetIn .42s var(--ease-out) both; }
@keyframes sheetIn { from { transform: translateY(105%); } }
.sh-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sh-ic { width: 46px; height: 50px; flex: none; display: grid; place-items: center; }
.sh-ic svg { width: 100%; height: 100%; }
.sh-t { flex: 1; min-width: 0; line-height: 1.1; }
.sh-t h3 { margin: 0; font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-t small { font-size: 13px; color: var(--soft); font-weight: 700; }
.x { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #f1e4d0; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); font-size: 18px; font-weight: 800; }
.list { overflow-y: auto; flex: 1; min-height: 60px; padding-right: 8px; }
.muted { color: var(--soft); }
.small { font-size: 13px; }
.note { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 10px; border-radius: 14px; background: #f1e4d0; font-weight: 700; }
.note svg { width: 22px; height: 22px; flex: none; }
.note.done { background: #e4f4ec; }

.ms { margin: 2px 0 8px; }
.ms-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ms-top small { font-size: 12px; font-weight: 700; color: var(--brown); text-align: right; }
.ms-bar { height: 10px; margin-top: 4px; border-radius: 5px; background: #3a23171f; border: 2px solid var(--ink); overflow: hidden; }
.ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #f7d36a); transform-origin: left; transition: transform .3s var(--ease-out); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-bottom: 10px; }
.stats > div { padding: 6px 8px; border-radius: 12px; background: #fff; border: 2px solid var(--line); line-height: 1.15; }
.stats small { display: block; font-size: 11px; font-weight: 700; color: var(--soft); }
.stats b { font-size: 17px; font-weight: 800; }
.stats em { display: block; font-style: normal; font-size: 12px; font-weight: 800; color: var(--mint-d); }
.seg { display: flex; gap: 5px; margin-bottom: 8px; }
.seg button { flex: 1; min-height: 44px; border-radius: 12px; background: #f1e4d0; font-weight: 800; font-size: 14px; border: 2px solid transparent; }
.seg button.on { background: var(--brown); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-sm); }
button.big { width: 100%; min-height: 60px; padding: 8px 12px; border-radius: 18px; background: var(--mint); color: #fff; font-size: 20px; font-weight: 800; border: 3px solid var(--ink); box-shadow: var(--shadow); text-shadow: 0 2px 0 #0000002e; line-height: 1.05; }
button.big:active { box-shadow: 0 0 0 var(--ink); }
button.big small { display: block; font-size: 15px; font-weight: 800; opacity: .95; }
button.big.buy { background: var(--gold); color: var(--ink); text-shadow: none; }
button.big.go { background: var(--mint); margin-top: 10px; }
button.big.bump { animation: bump .25s var(--ease-pop); }
@keyframes bump { 40% { transform: scale(.96) translateY(2px); } }
.breathe { animation: breathe 1.8s ease-in-out infinite; }
.breathe:active { animation: none; }
@keyframes breathe { 50% { transform: scale(1.03); } }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 2px dashed var(--line); }
.row .nm { line-height: 1.2; min-width: 0; flex: 1; }
.row .nm small { display: block; font-size: 12px; color: var(--soft); }
.row.owned { opacity: .55; }
.ric { width: 36px; height: 36px; flex: none; }
.subh { margin: 8px 0 0; font-size: 13px; font-weight: 800; color: var(--soft); text-transform: uppercase; letter-spacing: .04em; }
.row em { flex: none; display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 13px; font-weight: 800; white-space: nowrap; }
.row em svg { width: 20px; height: 20px; }
em.ok { color: var(--mint-d); } em.here { color: var(--red); } em.lk { opacity: .6; }
.own { color: var(--mint); font-weight: 800; }
button.pri, .btns .pri { background: var(--red); color: #fff; min-height: 44px; padding: 8px 14px; border-radius: 14px; font-weight: 800; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); white-space: nowrap; }
button.pri:active { box-shadow: 0 0 0 var(--ink); }
button.buyu { background: var(--gold); color: var(--ink); min-width: 86px; }
button.ghost { background: #f1e4d0; min-height: 44px; padding: 6px 12px; border-radius: 12px; font-weight: 700; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); }
button.ghost:active { box-shadow: 0 0 0 var(--ink); }
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.stars i { width: 20px; height: 20px; color: #e7d7c0; }
.stars i.on { color: var(--gold); }
.stars svg { width: 100%; height: 100%; }

.tbar { height: 10px; margin-bottom: 6px; border-radius: 5px; background: #3a23171f; border: 2px solid var(--ink); overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--mint); transform-origin: left; transition: transform .5s var(--ease-out); }
.trow { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 3px 0; border-bottom: 2px dashed var(--line); font-size: 14px; font-weight: 700; animation: rowIn .35s var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 30ms); }
.trow > span { flex: 1; line-height: 1.2; }
.tic { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.tic b { width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid #c9b59f; }
.trow em { font-style: normal; font-size: 12px; color: var(--soft); white-space: nowrap; }
.trow em.rw { color: #c9912a; font-weight: 800; }
.trow.got { opacity: .5; }
.trow.got > span { text-decoration: line-through; }
.trow .claim { min-height: 40px; padding: 4px 10px; font-size: 13px; background: var(--mint); animation: breathe 1.4s ease-in-out infinite; }
@keyframes rowIn { from { transform: translateY(10px) scale(.96); opacity: 0; } }

/* ---------- thông báo, chữ bay, xu bay ---------- */
#toasts { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 118px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 9; pointer-events: none; width: 92vw; }
.toast { padding: 7px 16px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; text-align: center; border: 2px solid #000; box-shadow: 0 3px 0 #0006; animation: toastIn .35s var(--ease-pop) both; max-width: 100%; }
.toast b { color: #ffd23f; }
.toast.bad { background: #b8392c; }
.toast.bad b { color: #fff; }
.toast.out { animation: toastOut .25s var(--ease-snap) forwards; }
@keyframes toastIn { from { transform: translateY(-14px) scale(.85); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-8px) scale(.9); opacity: 0; } }
.float { position: fixed; transform: translate(-50%, -100%); font-weight: 800; font-size: 20px; pointer-events: none; z-index: 8; animation: floatUp 1.25s var(--ease-out) forwards; -webkit-text-stroke: 5px #fff; paint-order: stroke fill; white-space: nowrap; }
.float.good { color: var(--mint); }
.float.neg { color: var(--warn); font-size: 16px; }
.float.small { font-size: 15px; }
.float.money { color: #c9912a; font-size: 26px; }
.float.money.sm { font-size: 17px; -webkit-text-stroke: 4px #fff; z-index: 3; }
@keyframes floatUp { 0% { opacity: 0; scale: .5; } 12% { opacity: 1; scale: 1.15; } 25% { scale: 1; } 70% { opacity: 1; } 100% { opacity: 0; margin-top: -54px; } }
.coinfly { position: fixed; left: 0; top: 0; transform: translate(-100px, -100px); width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 8; pointer-events: none; }
.conf { position: fixed; left: 0; top: 0; width: 9px; height: 5px; border-radius: 1px; z-index: 11; pointer-events: none; }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 7; opacity: 0; }
#flash.good { background: radial-gradient(circle, transparent 40%, #ffd23f66 100%); animation: flash .5s var(--ease-out); }
#flash.bad { background: radial-gradient(circle, transparent 45%, #e2574c88 100%); animation: flash .45s var(--ease-out); }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- màn chuyển quán ---------- */
#curtain { position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff6e8, #f0d9b8); text-align: center; }
#curtain small { display: block; font-size: 16px; font-weight: 700; color: var(--soft); }
#curtain b { display: block; font-size: 42px; font-weight: 800; }
#curtain.in { animation: curIn .5s var(--ease-out) both; }
#curtain.in > div { animation: logoIn .6s .2s var(--ease-pop) both; }
#curtain.out { animation: curOut .6s var(--ease-out) forwards; }
@keyframes curIn { from { clip-path: circle(0% at 50% 100%); } to { clip-path: circle(150% at 50% 100%); } }
@keyframes curOut { to { opacity: 0; transform: scale(1.06); } }

/* ---------- hộp thoại ---------- */
#modal { position: fixed; inset: 0; background: #3a231777; display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
#modal.show { animation: fadeIn .2s var(--ease-out); }
#modal.show .card { animation: cardIn .42s var(--ease-pop); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes cardIn { from { transform: scale(.75) translateY(20px); opacity: 0; } }
.card { width: min(100%, 420px); max-height: 90vh; overflow-y: auto; background: var(--panel); border: 3px solid var(--ink); border-radius: 22px; padding: 16px 18px; box-shadow: 0 6px 0 var(--ink); }
.card h2 { margin: 0 0 8px; text-align: center; }
.card .btns { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.card .btns button { min-height: 50px; padding: 10px; border-radius: 14px; background: #f1e4d0; font-weight: 800; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); }
.card .btns button:active { box-shadow: 0 0 0 var(--ink); }
.card .btns button.pri { background: var(--mint); color: #fff; }
.card.warnc h2 { color: var(--red); }
.how { padding-left: 20px; margin: 0; line-height: 1.5; }
.btns:empty { display: none; }
#modal.top { align-items: flex-start; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
.big-money { margin: 8px 0 2px; text-align: center; font-size: 34px; font-weight: 800; color: #c9912a; -webkit-text-stroke: 1px #fff; font-variant-numeric: tabular-nums; }
/* két tiền vắng mặt: cả thanh là sức chứa của két, vàng = đã tích, đỏ = két đầy */
.offbar { position: relative; height: 16px; margin: 10px 2px 4px; border-radius: 9px; background: #f1e4d0; border: 2.5px solid var(--ink); overflow: hidden; }
.offbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffd66b, #f0b43c); animation: offFill .9s var(--ease-out) both; transform-origin: left; }
.offbar.full .fill { background: linear-gradient(#ff9a6b, #e25b4a); }
@keyframes offFill { from { transform: scaleX(0); } }
.offmeta { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--soft); font-variant-numeric: tabular-nums; }
.offmeta b { color: var(--red); }
.offfull { margin: 6px 0 0; color: var(--red); font-weight: 600; }

/* ---------- đổi tên quán ---------- */
button.ren { display: inline-flex; align-items: center; gap: 5px; flex: none; }
button.ren svg { width: 18px; height: 18px; }
.sign-prev { margin: 4px auto 12px; width: 100%; perspective: 500px; }
.sign-prev .awn { height: 22px; margin: 0 6px; border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; background: repeating-linear-gradient(90deg, var(--red) 0 22px, #fff3dc 22px 44px); position: relative; }
.sign-prev .awn::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: -9px; height: 10px; background: radial-gradient(circle at 11px 0, var(--red) 10px, transparent 10.5px) 0 0 / 44px 10px repeat-x, radial-gradient(circle at 33px 0, #fff3dc 10px, transparent 10.5px) 0 0 / 44px 10px repeat-x; }
.sign-prev .board { min-height: 78px; display: grid; place-items: center; padding: 14px 14px 10px; border-radius: 14px; background: #fff3dc; border: 3px solid var(--ink); box-shadow: inset 0 0 0 5px var(--brown), var(--shadow); text-align: center; transform-origin: 50% 0; }
.sign-prev .board span { display: inline-block; font-size: clamp(19px, 6.4vw, 27px); font-weight: 800; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.sign-prev .board span.ph { color: #b8a08c; }
.sign-prev.flip .board { animation: signFlip .45s var(--ease-out); }
@keyframes signFlip { 0% { transform: rotateX(0); } 45% { transform: rotateX(85deg); } 100% { transform: rotateX(0); } }
.sign-prev.stamp .board { animation: stamp .6s var(--ease-pop) forwards; }
@keyframes stamp { 0% { transform: scale(1); } 25% { transform: scale(.9) rotate(-2deg); } 60% { transform: scale(1.08) rotate(1deg); box-shadow: inset 0 0 0 5px var(--gold), 0 4px 0 var(--ink), 0 0 0 8px #f0b43c66; } 100% { transform: scale(1); box-shadow: inset 0 0 0 5px var(--gold), 0 4px 0 var(--ink), 0 0 0 4px #f0b43c44; } }
.rn-field { display: grid; grid-template-columns: 1fr 52px; gap: 8px; }
.rn-field input { min-width: 0; min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); background: #fff; font: inherit; font-size: 19px; font-weight: 700; color: var(--ink); outline: none; transition: box-shadow .2s var(--ease-out), border-color .2s; -webkit-user-select: text; user-select: text; }
.rn-field input:focus { border-color: var(--mint-d); box-shadow: 0 3px 0 var(--mint-d), 0 0 0 4px #4fa88340; }
.rn-field.shake { animation: shakeX .4s var(--ease-out); }
.rn-field.shake input { border-color: var(--warn); }
@keyframes shakeX { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 5px; } 60% { translate: -4px; } 80% { translate: 2px; } }
.dice { width: 52px; height: 52px; padding: 8px; border-radius: 14px; background: #fff3d6; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); }
.dice:active { box-shadow: 0 0 0 var(--ink); }
.dice.roll svg { animation: roll .5s var(--ease-pop); }
@keyframes roll { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } }
.rn-meta { display: flex; justify-content: space-between; gap: 8px; margin: 5px 2px 8px; font-size: 12px; font-weight: 700; color: var(--soft); }
#rnMsg.bad { color: var(--warn); }
#rnCount { font-variant-numeric: tabular-nums; }
#rnCount.near { color: #c07a12; }
#rnCount.full { color: var(--warn); animation: shakeX .3s var(--ease-out); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { min-height: 44px; padding: 4px 12px; border-radius: 20px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font-size: 14px; font-weight: 700; animation: rowIn .35s var(--ease-pop) both; animation-delay: calc(var(--i, 0) * 50ms); }
.chip:active { box-shadow: 0 0 0 var(--ink); }
.rn-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.rn-btns button { min-height: 52px; font-size: 17px; }
.rn-btns .pri { background: var(--mint); }
.rn-btns .pri.soft { filter: saturate(.35) opacity(.6); }

.set { display: flex; flex-direction: column; gap: 8px; }
.set button { display: flex; justify-content: space-between; align-items: center; min-height: 50px; padding: 8px 14px; border-radius: 14px; background: #fff; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); font-weight: 700; }
.set b { min-width: 52px; padding: 2px 10px; border-radius: 10px; background: #e7d7c0; color: var(--soft); }
.set b.on { background: var(--mint); color: #fff; }

/* ---------- tài khoản Discord ---------- */
.acct { margin-bottom: 10px; }
.acct .discord { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border-radius: 14px; background: #5865f2; color: #fff; font-weight: 800; font-size: 16px; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); }
.acct .discord svg { width: 24px; height: 24px; }
.acct .discord:active { box-shadow: 0 0 0 var(--ink); }
.acct p { margin: 6px 2px 0; }
.acct.in { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #eef0ff; border: 2.5px solid var(--ink); }
.acct.in img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); flex: none; background: #fff; }
.acct .who { flex: 1; min-width: 0; line-height: 1.2; }
.acct .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct .who small { font-size: 12px; color: var(--soft); }
.pick { margin: 8px 0; padding: 8px 12px; border-radius: 12px; background: #fff; border: 2px solid var(--line); text-align: left; }
.pick small { display: block; font-size: 12px; font-weight: 700; color: var(--soft); }

/* ---------- hướng dẫn lần đầu ---------- */
.coach-bubble { position: fixed; left: 0; top: 0; z-index: 9; max-width: 250px; padding: 9px 13px 10px; border-radius: 14px; background: var(--ink); border: 3px solid var(--gold); box-shadow: 0 4px 0 #0007; color: #fff6e6; pointer-events: none; animation: coachPop .38s var(--ease-pop); will-change: transform; }
.coach-bubble .cb-body { font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; }
.coach-bubble .cb-body b { color: #ffd23f; }
.coach-bubble.swap .cb-body { animation: hintIn .35s var(--ease-pop); }
@keyframes hintIn { from { transform: translateY(6px) scale(.9); opacity: .3; } }
.coach-bubble .cb-skip { display: block; margin: 7px auto 0; min-height: 30px; padding: 2px 12px; border-radius: 10px; background: #ffffff1f; color: #e7d7c0; font-size: 12px; font-weight: 700; pointer-events: auto; }
.coach-bubble .cb-tail { position: absolute; left: var(--tail-x, 50%); bottom: -10px; width: 15px; height: 15px; margin-left: -7.5px; background: var(--ink); border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(45deg); }
.coach-bubble.below .cb-tail { bottom: auto; top: -10px; border: 0; border-left: 3px solid var(--gold); border-top: 3px solid var(--gold); }
@keyframes coachPop { from { opacity: 0; scale: .8; } }
.coach-glow { z-index: 3; animation: coachGlow 1.1s ease-in-out infinite !important; }
@keyframes coachGlow { 50% { box-shadow: 0 0 0 4px #ffd23fdd, 0 0 18px 4px #ffd23f99, 0 3px 0 var(--ink); } }
.card.welcome { text-align: center; }
.wel-hero { width: 76px; height: 86px; margin: 0 auto 4px; animation: logoIn .6s var(--ease-pop) both, bob 2.4s .6s ease-in-out infinite; }
.wel-hero svg { width: 100%; height: 100%; }
.how.wel { text-align: left; display: flex; flex-direction: column; gap: 6px; }
.how.wel b { color: var(--brown); }

/* ---------- màn mở ---------- */
#splash { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff6e8, #f0d9b8); animation: splashFailsafe .4s 12s forwards; }
/* JS chạy được thì tắt lớp dự phòng; JS lỗi thì sau 12 giây màn mở tự ẩn để không kẹt */
#splash.js { animation: none; }
/* vào quán: màn mở phóng to và mờ đi như bay xuyên qua cửa */
#splash.out { animation: splashOut .7s var(--ease-out) forwards; pointer-events: none; }
@keyframes splashOut { 60% { opacity: .9; } to { opacity: 0; transform: scale(1.45); } }
@keyframes splashFailsafe { to { opacity: 0; visibility: hidden; } }
.sp-in { text-align: center; }
.sp-in .logo { width: 124px; height: 124px; margin: 0 auto; animation: logoIn .7s var(--ease-pop) both, bob 2.4s 0.7s ease-in-out infinite; filter: drop-shadow(0 6px 0 #3a231733); }
.sp-in .logo img { width: 100%; height: 100%; border-radius: 24%; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.sp-in h1 { margin: 10px 0 0; font-size: 34px; font-weight: 800; color: var(--ink); animation: logoIn .6s .15s var(--ease-pop) both; }
.sp-wait { margin: 16px 0 0; font-weight: 700; color: var(--soft); animation: waitBlink 1.1s ease-in-out infinite alternate; }
@keyframes waitBlink { from { opacity: .45; } to { opacity: 1; } }
.sp-in .enter { margin: 18px 0 0; min-width: 220px; min-height: 60px; padding: 10px 28px; border-radius: 22px; background: var(--mint); color: #fff; font-size: 22px; font-weight: 800; border: 3px solid var(--ink); box-shadow: var(--shadow); text-shadow: 0 2px 0 #0000002e; animation: logoIn .55s var(--ease-pop) both, breathe 1.6s .7s ease-in-out infinite; }
.sp-in .enter:active { box-shadow: 0 0 0 var(--ink); animation: none; }
@keyframes logoIn { from { transform: scale(.3) translateY(30px); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-3deg); } }

@media (max-height: 680px) {
  .sheet-card { max-height: 78vh; }
  #nav button { min-height: 56px; }
  #nav button.mid { min-height: 64px; }
  .stats b { font-size: 15px; }
}
@media (max-width: 360px) {
  #nav button { width: 84px; }
  .h-m span { font-size: 18px; }
}
/* Giảm chuyển động: bỏ lắc, nhún, trượt dài; giữ mờ dần, chớp màu và nảy nhỏ để phản hồi không mất. */
@media (prefers-reduced-motion: reduce) {
  .breathe, .lbl .up, .lbl.lock.can, #goal.ready, .sp-in .logo, .sp-in .enter, .sp-wait, .sign-prev.flip .board, .dice.roll svg, .rn-field.shake, #rnCount.full, .wel-hero, .trow .claim, .bub.vip.go, .offbar .fill { animation: none !important; }
  .coach-glow { animation: none !important; box-shadow: 0 0 0 4px #ffd23fdd, 0 3px 0 var(--ink) !important; }
  .sheet-card.enter, .trow, #curtain.in { animation-name: fadeIn !important; }
  .float { animation-name: fadeIn !important; animation-direction: reverse !important; }
}

/* ---------- chọn cách chơi lần đầu: Discord hay khách ---------- */
.wel-hero img { width: 100%; height: 100%; border-radius: 24%; border: 3px solid var(--ink); box-shadow: var(--shadow-sm); object-fit: cover; }
.login .wel-hero { width: 92px; height: 92px; }
.login-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lg-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 16px; text-align: left; border: 3px solid var(--ink); box-shadow: var(--shadow); }
.lg-opt:active { box-shadow: 0 0 0 var(--ink); }
.lg-opt i { width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.lg-opt i svg { width: 100%; height: 100%; }
.lg-opt b { display: block; font-size: 17px; font-weight: 800; line-height: 1.15; }
.lg-opt small { display: block; font-size: 12px; font-weight: 600; line-height: 1.25; opacity: .9; }
.lg-opt.discord { background: #5865f2; color: #fff; }
.lg-opt.discord i { width: 34px; height: 34px; }
.lg-opt.guest { background: #fff; color: var(--ink); }
.lg-opt.guest small { color: var(--soft); }


/* ---------- vào quán: trước khi vào thì giấu thanh trên/dưới, bảng đăng nhập nổi trên màn mở ---------- */
body.pre #hud { transform: translateY(-115%); }
body.pre #nav { transform: translateY(140%); }
body.pre #goal, body.pre #labels, body.pre #bubbles { opacity: 0; }
body.pre #modal { z-index: 30; }
body.pre #toasts { z-index: 31; }
/* lúc vào: máy quay sà vào quán, thanh trên trượt xuống, thanh dưới trượt lên, nhãn hiện dần theo thứ tự */
body.entering #hud { transition: transform .6s var(--ease-pop) .55s; }
body.entering #nav { transition: transform .6s var(--ease-pop) .75s; }
body.entering #goal { transition: opacity .45s var(--ease-out) 1.05s; }
body.entering #labels, body.entering #bubbles { transition: opacity .5s var(--ease-out) 1.25s; }
@media (prefers-reduced-motion: reduce) {
  #splash.out { animation-name: fadeIn !important; animation-direction: reverse !important; }
}

/* ---------- kim cương, tăng tốc, món hot, khách VIP, Kho báu ---------- */
.h-g { flex: none; display: flex; align-items: center; gap: 3px; padding: 3px 10px 3px 4px; border-radius: 18px; background: #fff; border: 2.5px solid var(--ink); box-shadow: var(--shadow-sm); font-size: 17px; font-weight: 800; color: #2a7fb8; cursor: pointer; }
.h-g i { width: 24px; height: 24px; flex: none; }
.gi { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; }
.gi svg, .toast svg, .float svg { width: 1em; height: 1em; display: inline-block; vertical-align: -2px; }
.toast svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 2px; }
.float.money.vip { color: #c9912a; font-size: 24px; }
.float.money.hot { color: #ff6b3d; }
.float.gemtx { color: #2a7fb8; font-size: 20px; }
#nav button { width: 86px; }
#nav button.mid { width: 104px; }
@media (max-width: 360px) { #nav button { width: 74px; } #nav button.mid { width: 92px; } }

#boostBtn { position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 30px); z-index: 5; width: 64px; height: 64px; padding: 0; border-radius: 50%; border: 3px solid var(--ink); box-shadow: var(--shadow); display: grid; place-items: center; align-content: center; gap: 0; color: #fff; background: #9b6bd1; }
/* vòng đếm giờ quanh nút: chỉ tô phần viền, giữa để trống cho nền nút */
#boostBtn .bb-ring { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(#ffd23f calc(var(--k, 1) * 1turn), #3a231740 0); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); pointer-events: none; }
#boostBtn .bb-ic { width: 26px; height: 26px; }
#boostBtn .bb-ic svg { width: 100%; height: 100%; }
#boostBtn b { font-size: 14px; font-weight: 800; line-height: 1; text-shadow: 0 2px 0 #0004; }
#boostBtn.ready { animation: breathe 1.5s ease-in-out infinite; }
#boostBtn.active { background: #ff8a3d; }
#boostBtn.cd { background: #b9b0a6; }
#boostBtn.cd .bb-ic { filter: grayscale(1) opacity(.7); }
#boostBtn.pop { animation: goalPop .45s var(--ease-pop); }
body.pre #boostBtn, body.pre .h-g { opacity: 0; pointer-events: none; }

.lbl .hotb { position: absolute; top: -17px; left: 50%; margin-left: -11px; width: 22px; height: 22px; animation: flick .5s ease-in-out infinite alternate; }
@keyframes flick { to { scale: 1.15; rotate: 4deg; } }
.lbl.hot { border-color: #ff8a3d; box-shadow: 0 2px 0 #c2410c, 0 0 0 3px #ff8a3d66; }
.bub.vip { background: #fff3c4; border-color: #c9912a; box-shadow: 0 3px 0 #c9912a, 0 0 0 3px #ffd23f88; }
/* khách VIP đang chờ người chơi: bong bóng mời chạm, vạch đỏ dưới đáy là thời gian chờ còn lại */
.bub.vip.go { pointer-events: auto; cursor: pointer; animation: vipCall 1s ease-in-out infinite; }
.bub.vip .tapme, .bub.vip .vt { display: none; }
.bub.vip.go .tapme { display: block; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); background: var(--red); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; padding: 2px 7px 3px; border-radius: 9px; border: 2px solid var(--ink); white-space: nowrap; }
.bub.vip.go .vt { display: block; position: absolute; left: 4px; right: 4px; bottom: 1px; height: 4px; border-radius: 2px; background: #3a231722; overflow: hidden; }
.bub.vip.go .vt i { position: absolute; inset: 0; background: var(--red); transform-origin: left; }
@keyframes vipCall { 50% { scale: 1.14; } }

/* màn rót ly chiều khách VIP: giữ nút để rót, thả ở vạch vàng */
#vipGame { position: fixed; inset: 0; z-index: 13; display: flex; align-items: center; justify-content: center; background: #3a231766; backdrop-filter: blur(3px); animation: fadeIn .22s ease; padding: 16px; }
.vg-card { position: relative; width: min(320px, 100%); background: var(--panel); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); padding: 14px 16px 16px; text-align: center; animation: bubIn .32s var(--ease-pop); }
.vg-card.shake { animation: vgShake .4s ease; }
.vg-card .x { position: absolute; right: 8px; top: 8px; }
.vg-head { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 10px; text-align: left; }
.vg-head > svg { width: 34px; height: 34px; flex: none; }
.vg-head b { display: block; font-size: 18px; }
.vg-head small { color: var(--soft); }
.vg-cup { position: relative; width: 118px; height: 185px; margin: 0 auto 14px; border: 3.5px solid var(--ink); border-top-width: 2.5px; border-radius: 10px 10px 26px 26px; background: #fffdf8; overflow: hidden; }
.vg-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--c); transform: scaleY(0); transform-origin: bottom; opacity: .92; }
.vg-fill::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: #ffffff66; }
.vg-band { position: absolute; left: 0; right: 0; background: #4fa88322; border-top: 2px dashed var(--mint); border-bottom: 2px dashed var(--mint); z-index: 1; }
.vg-gold { position: absolute; left: 0; right: 0; background: #ffd23f99; border-top: 2px solid #c9912a; border-bottom: 2px solid #c9912a; z-index: 1; }
.vg-res { position: absolute; left: 4px; right: 4px; top: 40%; z-index: 2; font-weight: 800; font-style: normal; font-size: 15px; color: var(--ink); -webkit-text-stroke: 4px #fff; paint-order: stroke fill; animation: bubIn .3s var(--ease-pop); }
.vg-res.perfect { color: #c9912a; font-size: 17px; }
.vg-hold { width: 100%; touch-action: none; -webkit-user-select: none; user-select: none; font-size: 15px; }
@keyframes vgShake { 25% { translate: -6px 0; } 60% { translate: 5px 0; } }

.pips { display: flex; gap: 3px; margin-top: 4px; }
.pips i { width: 16px; height: 6px; border-radius: 3px; background: #e7d7c0; }
.pips i.on { background: #4fb3e8; }
button.buyv { display: inline-flex; align-items: center; gap: 4px; background: #4fb3e8; min-width: 70px; justify-content: center; }
button.buyv .gi { width: 18px; height: 18px; }
.claim .gi { width: 14px; height: 14px; vertical-align: -2px; }
.wel-hero.feat { width: 84px; height: 84px; }
@media (prefers-reduced-motion: reduce) {
  #boostBtn.ready, .lbl .hotb { animation: none !important; }
}