/* LÕI — sảnh, phòng chờ, màn chơi */
#app { position: absolute; inset: 0; display: flex; flex-direction: column; }
.man { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---------- Sảnh ---------- */

/* ---------- Hộp chọn chế độ ---------- */
.hop-che-do .dau-tro { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hop-che-do .dau-tro .bt { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 38px; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: var(--bong); flex: none; }
.hop-che-do .dau-tro .bt svg { width: 44px; height: 44px; }
.hop-che-do p { margin: 0; color: var(--chu-nhat); }
.cac-che-do { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.che-do { border: 2px solid #ece8ff; border-radius: 18px; padding: 14px; cursor: pointer; text-align: center; transition: border-color .15s, transform .15s, background .15s; background: #fff; }
.che-do:hover { transform: translateY(-2px); border-color: var(--chinh); }
.che-do.bat { border-color: var(--chinh); background: var(--mat-2); }
.che-do .i { font-size: 34px; } .che-do b { display: block; margin-top: 4px; } .che-do small { color: var(--chu-nhat); font-size: .78rem; }
.dong-cau-hinh { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.dong-cau-hinh > label { min-width: 110px; font-weight: 700; font-size: .92rem; }
.nhom-chon { display: flex; gap: 6px; flex-wrap: wrap; }
.nhom-chon button { border: 2px solid #ece8ff; background: #fff; border-radius: 999px; padding: .4em .9em; font-weight: 700; cursor: pointer; color: var(--chu); }
.nhom-chon button.bat { border-color: var(--chinh); background: var(--chinh); color: #fff; }

/* ---------- Phòng chờ ---------- */
.phong { align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.phong .th-the { width: min(720px, 100%); }
.ma-phong { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.ma-phong .ma { font-size: 2.4rem; font-weight: 900; letter-spacing: .25em; color: var(--chinh); background: var(--mat-2); padding: .1em .5em; border-radius: 14px; }
.ds-ghe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ghe { border-radius: 16px; padding: 12px; background: var(--mat-2); display: flex; align-items: center; gap: 10px; min-height: 64px; border: 2px solid transparent; }
.ghe .av { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--mat); border-radius: 50%; flex: none; }
.ghe b { display: block; font-size: .92rem; } .ghe small { color: var(--chu-nhat); font-size: .75rem; }
.ghe.trong { border: 2px dashed #cfc6ff; background: var(--mat); color: var(--chu-nhat); justify-content: center; cursor: pointer; }
.ghe.toi { border-color: var(--chinh); }
.ghi-chu { font-size: .82rem; color: var(--chu-nhat); background: #fff8e1; border-radius: 12px; padding: 10px 12px; margin-top: 12px; line-height: 1.45; }

/* ---------- Màn chơi ---------- */
.man-choi { background: rgba(10, 5, 40, .12); }
.thanh-tren { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); z-index: 5; flex-wrap: nowrap; overflow-x: auto; }
.thanh-tren .ten-tro { color: #fff; font-weight: 800; font-size: 1.05rem; white-space: nowrap; margin-right: 6px; }
.ds-nguoi { display: flex; gap: 6px; flex: 1; justify-content: center; }
.nguoi { position: relative; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.9); border-radius: 999px; padding: 3px 12px 3px 3px; font-size: .85rem; font-weight: 700; transition: transform .2s, box-shadow .2s; white-space: nowrap; border: 3px solid transparent; }
.nguoi .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: var(--c, #ddd); }
.nguoi.luot { transform: scale(1.08); border-color: var(--vang); box-shadow: 0 0 0 4px rgba(255, 212, 59, .45), var(--bong); }
.nguoi.luot::after { content: ''; position: absolute; inset: -9px; border-radius: inherit; border: 4px solid rgba(255, 212, 59, .3); pointer-events: none; animation: nhip-luot calc(1.2s * var(--tg, 1)) ease-in-out infinite; will-change: opacity, transform; } /* lớp riêng: nhịp lượt không vẽ lại cả trang trên máy không GPU */
@keyframes nhip-luot { 50% { opacity: 0; transform: scale(.96); } }
.cl0 .nguoi.luot::after { animation: none; }
.nguoi .bong-chat { position: absolute; top: 110%; left: 50%; transform: translateX(-50%); background: var(--mat); border-radius: 14px; padding: 4px 10px; font-size: 1.4rem; box-shadow: var(--bong-lon); z-index: 20; white-space: nowrap; }
.nguoi .bong-chat.chu { font-size: .9rem; }
.khung-tro { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.bang-emoji { position: absolute; right: 10px; top: 56px; background: var(--mat); border-radius: 18px; padding: 10px; box-shadow: var(--bong-lon); display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; z-index: 30; width: 260px; }
.bang-emoji button { border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; border-radius: 10px; padding: 4px; }
.bang-emoji button:hover { background: var(--mat-2); }
.bang-emoji .cau { grid-column: 1 / -1; font-size: .85rem; text-align: left; padding: 6px 10px; background: var(--mat-2); }
.man-ket { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,10,60,.45); z-index: 40; backdrop-filter: blur(2px); }
.man-ket .th-the { text-align: center; min-width: min(380px, 92vw); }
.man-ket h2 { font-size: 2.4rem; margin: 6px 0; }
.man-ket .lon-bt { font-size: 72px; }
.man-chuyen-may { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; background: linear-gradient(135deg, #7c5cff, #ff5ca8); color: #fff; text-align: center; cursor: pointer; }
.man-chuyen-may .av { font-size: 90px; }
@media (max-width: 640px) {
  .thanh-tren .ten-tro { display: none; }
  .nguoi { padding-right: 6px; } .nguoi .ten-n { display: none; }
}

/* Ảnh Blender gói 4–5: nền sảnh, logo, ảnh bìa trò */

/* Ván dở */
.van-do { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #e6fcf5; border: 2px solid var(--la); border-radius: 16px; padding: 10px 12px; margin: 10px 0 4px; }
.van-do > div { flex: 1; min-width: 150px; }
.van-do b { display: block; }
.van-do small { color: var(--chu-nhat); }

/* ===== Theo thiết bị (TH.thietBi, HOP-DONG mục 13) ===== */
.nut-ngan-keo, .nut-toan-man, .nhac-xoay { display: none !important; }
/* Điện thoại / máy tính bảng: nút đủ lớn để chạm */
.cham .th-nut { min-height: 44px; }
.cham .th-nut.tron { min-width: 44px; min-height: 44px; }
.cham .nhom-chon button { min-height: 40px; }
.cham:not(.ung-dung) .man-choi .nut-toan-man { display: inline-flex !important; }

/* Điện thoại xoay ngang: chiều cao thấp, tận dụng chiều ngang */
/* Ngăn kéo: trò gắn class th-bang-ben cho bảng bên; trên điện thoại ngang bảng trượt ra từ phải */
.tb-dt-ngang .man-choi:has(.th-bang-ben) .nut-ngan-keo { display: inline-flex !important; }
.tb-dt-ngang .th-bang-ben { position: absolute !important; top: 0; right: 0; bottom: 0; left: auto !important; width: min(340px, 48vw) !important; max-width: none !important; height: auto !important;
  z-index: 60; overflow-y: auto; background: var(--mat); box-shadow: -10px 0 30px rgba(0,0,0,.3); padding: 10px 10px 10px 12px; padding-right: calc(10px + env(safe-area-inset-right));
  transform: translateX(105%); transition: transform .25s cubic-bezier(.3,.8,.4,1); }
.tb-dt-ngang .th-bang-ben.mo { transform: none; }
.tb-dt-ngang .man-choi.ngan-keo-mo .nut-ngan-keo { background: var(--chinh); color: #fff; }
/* Nhắc xoay ngang (trò có huongUuTien: 'ngang') */
.tb-dt-doc .nhac-xoay { display: flex !important; position: absolute; left: 50%; top: calc(62px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 45; align-items: center; gap: 8px;
  background: rgba(20,10,60,.88); color: #fff; padding: 6px 6px 6px 14px; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: var(--bong-lon); width: max-content; max-width: 94vw; }
.nhac-xoay .i { display: inline-block; animation: th-xoay 1.6s ease-in-out infinite; }
@keyframes th-xoay { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* PC: bảng rộng, hover */

/* Nhiệm vụ hôm nay + thành tích (HOP-DONG mục 14) */
.hop-thanh-tich { width: min(720px, 94vw); }
.bang-thanh-tich h3 { margin: 14px 0 6px; font-size: 1rem; color: var(--chinh); }
.tt-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tt { display: flex; gap: 10px; align-items: center; background: var(--mat-2); border-radius: 12px; padding: 8px 10px; filter: grayscale(.6); opacity: .8; }
.tt.dat { filter: none; opacity: 1; background: #fff8e1; box-shadow: inset 0 0 0 2px var(--vang); }
.tt-bt { font-size: 26px; }
.tt > div:nth-child(2) { flex: 1; min-width: 0; }
.tt b { display: block; font-size: .88rem; } .tt small { color: var(--chu-nhat); font-size: .75rem; }
.tt-xu { font-size: .75rem; font-weight: 800; color: var(--cam); white-space: nowrap; }
.tt-thanh { height: 5px; border-radius: 3px; background: #ddd8ff; margin-top: 4px; overflow: hidden; } .tt-thanh i { display: block; height: 100%; background: var(--chinh); }

/* ===== Theme trắng/hồng: sảnh, phòng, màn chơi ===== */
.chip-xu { display: inline-flex; align-items: center; gap: 4px; }
.chip-xu .th-ic { color: var(--vang); }
/* hộp chọn chế độ */
.hop-che-do .dau-tro .bt.co-bia { width: 96px; height: 60px; --rong-anh: 96px; background-color: transparent; box-shadow: var(--bong); border-radius: 12px; }
.che-do .i { line-height: 0; display: flex; justify-content: center; color: var(--chinh); }
.che-do .i svg { width: 34px; height: 34px; }
.theme-trang .che-do { border-color: var(--vien); }
.theme-trang .che-do.bat { border-color: var(--chinh); background: var(--mat-2); }
.theme-trang .nhom-chon button { border-color: var(--vien); }
.theme-trang .nhom-chon button.bat { border-color: var(--chinh); background: var(--chinh); }
.theme-trang .ghi-chu { background: var(--mat-2); }
.theme-trang .van-do { background: var(--mat-2); border-color: var(--chinh); }
.luoi-avatar { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; margin: 12px 0; max-height: 236px; overflow-y: auto; padding: 2px; }
.chon-av { border: 2px solid transparent; background: var(--mat-2); border-radius: 16px; padding: 6px; cursor: pointer; display: grid; place-items: center; }
.chon-av .th-av { --av: 52px; }
.chon-av.bat { border-color: var(--chinh); background: var(--mat); }
/* thành tích */
.tt-bt { line-height: 0; color: var(--chu-nhat); } .tt-bt svg { width: 28px; height: 28px; }
.tt.dat .tt-bt { color: var(--vang); }
.tt-xu { display: inline-flex; align-items: center; gap: 3px; } .tt-xu .th-ic { color: var(--vang); }
.theme-trang .tt.dat { background: var(--mat); box-shadow: inset 0 0 0 2px var(--chinh); }
.theme-trang .bang-thanh-tich h3 { color: var(--chinh); }
/* phòng online */
.ghe .av.th-av { --av: 44px; }
.theme-trang .ghe { background: var(--mat-2); }
.theme-trang .ghe.trong { border-color: var(--vien); }
.theme-trang .ma-phong .ma { color: var(--chinh); background: var(--mat-2); }
/* màn chơi */
.theme-trang .man-choi { background: var(--nen-choi, linear-gradient(180deg, #fff 0%, #fff4f8 100%)); }
.theme-trang .thanh-tren { background: var(--mat); border-bottom: 1px solid var(--vien); backdrop-filter: none; }
.theme-trang .thanh-tren .ten-tro { color: var(--chu); }
.nguoi .av.th-av { --av: 30px; }
.theme-trang .nguoi { box-shadow: inset 0 0 0 1.5px var(--vien); }
.man-chuyen-may .av.th-av { --av: 120px; margin: 0 auto 10px; }
.theme-trang .man-chuyen-may { background: linear-gradient(135deg, #ff8ab5, #ec4f8c); }
.man-ket .lon-bt { line-height: 0; display: flex; justify-content: center; color: var(--vang); }
.man-ket .lon-bt svg { width: 72px; height: 72px; }
.man-ket .lon-bt.bt-buon { color: var(--chu-nhat); } .man-ket .lon-bt.bt-xinHoa { color: var(--xanh); }
.theme-trang .man-ket { background: rgba(42,34,48,.25); }
.nguoi .bong-chat .th-sticker { width: 1.8em; height: 1.8em; }
.bang-emoji button .th-sticker { width: 34px; height: 34px; margin: auto; }
.nhac-xoay .i svg { width: 20px; height: 20px; }
.theme-trang .nhac-xoay { background: rgba(42,34,48,.9); }