/* ==========================================================================
   My Room 3D (#/room) — game room-decorator nhúng IFRAME cùng origin (/room3d/).
   Mọi luật nằm dưới .r3-root; full-bleed bằng margin âm huỷ padding của .view,
   chiều cao trừ chrome app theo đúng con số các game khác đã đo (60px thanh trên /
   56px tabbar — xem css/ispeak.css:806-819, css/farm.css:23-36; chép, không đoán lại).

   File này CỐ Ý ngắn: bản thân game có ~900 dòng CSS RIÊNG bên trong iframe —
   ở đây chỉ có chỗ đứng của iframe + thanh đầu (ví xu) + lớp modal xã hội của
   PARENT (hàng xóm/hộp thư/duel… G5+ đổ nội dung vào #r3ModalWrap).
   KHÔNG z-index ≥ 70 (test 4988); KHÔNG thêm class nào của file này vào ispeak.css.
   ========================================================================== */
.r3-root {
  --r3-bg: #0f1420;
  --r3-card: #1b2334;
  --r3-line: #2c3852;
  margin: -18px -16px -64px;
  background: var(--r3-bg);
  color: #fff;
  font-family: var(--font, system-ui), sans-serif;
}
/* .view-wide có padding 0 0 64px (css/ispeak.css khối .view-wide), khác .view
   18px 16px 64px — ba lề âm vốn để huỷ padding của .view phải về 0, chỉ giữ lề
   đáy -64px. Thiếu dòng này là cả phòng kéo lệch lên 18px (pill xu chui xuống
   dưới header sticky) và tràn 16px ra ngoài mỗi mép — cùng bài học đã trả ở
   .rm-root/.gw-root/.farm-root (css/farm.css, css/gang.css). */
.r3-root:is(.view-wide *) { margin-top: 0; margin-left: 0; margin-right: 0; }

/* Cột cố định, không cuộn — cùng con số với .farm-root #fmApp. */
.r3-root #r3App {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);                /* Safari cũ không hiểu dvh — đường lùi */
  height: calc(100dvh - 60px);
  min-height: 320px;
  overflow: hidden;
}
@media (max-width: 719px) {
  .r3-root #r3App { height: calc(100vh - 124px); }
  .r3-root #r3App { height: calc(100dvh - 60px - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

/* Thanh đầu mỏng của PARENT: ví xu (server là chân lý) + chỗ cho nút xã hội G5. */
.r3-root #r3Top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* màn hẹp: hàng nút 👤/👀/xã hội xuống dòng, stage tự co theo */
  gap: 8px;
  padding: 6px 10px;
  background: var(--r3-card);
  border-bottom: 1px solid var(--r3-line);
  flex: 0 0 auto;
  min-height: 44px;
}
.r3-root #r3Coins {
  font-weight: 700;
  font-size: 15px;
  background: #26301c;
  border: 1px solid #46542e;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
/* Chip trần mint (164): "⛏️ 12" = lương sim còn rút được hôm nay; 0 thì nói lý do. */
.r3-root #r3Mint {
  font-size: 12px;
  opacity: .8;
  background: #2a2416;
  border: 1px solid #4d4426;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.r3-root #r3Mint[hidden] { display: none; }
.r3-root #r3Title {
  font-weight: 700;
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.r3-root #r3Btns { display: flex; gap: 6px; flex: 0 0 auto; }

/* Sân khấu = iframe chiếm trọn phần còn lại. */
/* overscroll-behavior chặn rubber-band / pull-to-refresh, như mọi game khác
   trong repo (farm/gang/pets/kingdom).
   KHÔNG khai touch-action ở đây: #r3Stage là CHA của iframe, mà touch-action
   hiệu dụng TRUYỀN QUA ranh giới frame xuống tài liệu con (Blink:
   Frame::SetInheritedEffectiveTouchAction) — đặt 'none' là giết mọi thao tác
   CUỘN bằng ngón tay BÊN TRONG game: lưới 754 thẻ cửa hàng, menu ⚙ Thêm, hồ
   sơ cư dân, bảng 👆 Cách chơi. Bên trong game canvas đã tự khai
   touch-action:none cho riêng nó (room3d/index.html), đó mới là chỗ đúng.
   Review đa-agent trước deploy 02/09 bắt được; đổi lấy việc chụm-phóng trên
   vùng không-canvas là món hời quá đắt. */
.r3-root #r3Stage { flex: 1; min-height: 0; position: relative; overscroll-behavior: none; }
.r3-root #r3Frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #cfe3ee;   /* màu trời của game — đỡ nháy đen lúc iframe đang nạp */
}

/* Lớp modal xã hội của parent phủ LÊN iframe (G5+ đổ nội dung). */
.r3-root #r3ModalWrap {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(10, 14, 22, .55);
}
.r3-root #r3ModalWrap[hidden] { display: none; }

/* ==================== chrome xã hội (G5): nút + modal + toast/pop ==================== */
.r3-root .r3-tbtn {
  position: relative;
  min-width: 44px;
  min-height: 38px;
  font-size: 18px;
  background: #232d42;
  border: 1px solid var(--r3-line);
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}
.r3-root .r3-tbtn.r3-ping { border-color: #e0b44a; }
.r3-root .r3-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: #e0645a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  padding: 0 4px;
}
.r3-root .r3-badge[hidden] { display: none; }

/* Modal: thẻ giữa màn, cuộn bên trong, tiêu đề dính (khuôn #rmModal cũ). */
.r3-root #r3Modal {
  max-width: 560px;
  margin: 4vh auto;
  max-height: 86%;
  overflow-y: auto;
  background: var(--r3-card);
  border: 1px solid var(--r3-line);
  border-radius: 14px;
  padding: 14px;
}
.r3-root #r3Modal h2 { font-size: 18px; margin: 0 0 8px; position: sticky; top: -14px; background: var(--r3-card); padding: 6px 0; }
.r3-root .r3-hint { font-size: 12.5px; opacity: .75; margin: 4px 0; }
.r3-root .r3-strong { font-size: 14px; font-weight: 600; }
.r3-root .r3-parts { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.r3-root .r3-pbtn {
  background: #232d42;
  border: 1px solid var(--r3-line);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  cursor: pointer;
}
.r3-root .r3-pbtn.on { background: #3a4a6e; border-color: #5b6f9e; font-weight: 700; }
.r3-root .r3-mbtn {
  background: #232d42;
  border: 1px solid var(--r3-line);
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13.5px;
  cursor: pointer;
  min-height: 38px;
}
.r3-root .r3-mbtn.go { background: #2e4a33; border-color: #4a6e52; font-weight: 700; }
.r3-root .r3-mbtn.danger { background: #4a2a2a; border-color: #6e4444; }
.r3-root .r3-mrow { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }
.r3-root .r3-search {
  width: 100%;
  font-size: 16px;              /* ≥16px: iOS không tự zoom khi focus */
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--r3-line);
  background: #141b2b;
  color: #fff;
  margin: 6px 0;
  -webkit-user-select: text;
  user-select: text;
}

/* Hàng người: avatar + tên (cửa ghé thăm) + nút hành động. */
.r3-root .r3-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #232d42; }
.r3-root .r3-row.dim { opacity: .55; }
.r3-root .r3-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.r3-root .r3-ini { background: #3a4a6e; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.r3-root .r3-nmbtn { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.r3-root .r3-nmbtn small { display: block; font-weight: 400; font-size: 11.5px; opacity: .65; }
.r3-root .r3-grp { font-size: 11.5px; font-weight: 700; opacity: .6; text-transform: uppercase; margin-top: 8px; }
.r3-root .r3-rest { font-size: 12px; opacity: .6; }
.r3-root .r3-tk { font-weight: 700; margin: 4px 0; }
.r3-root .r3-rev, .r3-root .r3-cleanrow { display: flex; align-items: center; gap: 8px; justify-content: space-between; background: #141b2b; border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.r3-root .r3-feed { font-size: 12.5px; opacity: .85; margin-top: 8px; }
.r3-root .r3-feed b { display: block; margin-bottom: 2px; }

/* Hộp thư + ghim */
.r3-root .r3-ibrow { padding: 8px 0; border-bottom: 1px solid #232d42; font-size: 13.5px; }
.r3-root .r3-ibrow.new { background: #1e2a1e; border-radius: 8px; padding: 8px 6px; }
.r3-root .r3-ibact { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.r3-root .r3-ibpin { font-size: 11.5px; opacity: .7; }
.r3-root .r3-pinpick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.r3-root .r3-pin { background: #2b2a1c; border: 1px solid #4d4426; border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 13px; }
.r3-root .r3-pinrm { font-size: 11px; opacity: .65; }
.r3-root .r3-pinby { font-size: 11.5px; opacity: .7; margin: 4px 0 6px; }

/* Bảng xếp hạng */
.r3-root .r3-brow { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #232d42; color: #fff; padding: 6px 0; cursor: pointer; font-size: 14px; }
.r3-root div.r3-brow { cursor: default; }
.r3-root .r3-brow.me { background: #1e2a3e; border-radius: 8px; padding: 6px; }
.r3-root .r3-brow.r3-bhidden { opacity: .55; }
.r3-root .r3-brk { width: 28px; text-align: center; flex: 0 0 auto; font-weight: 700; }
.r3-root .r3-bnm { flex: 1; min-width: 0; font-weight: 600; }
.r3-root .r3-bnm small { display: block; font-weight: 400; font-size: 11.5px; opacity: .65; }
.r3-root .r3-bgap { text-align: center; opacity: .5; font-size: 12px; padding: 4px; }
.r3-root .r3-bhidtag { font-size: 10px; background: #4a2a2a; border-radius: 6px; padding: 1px 5px; }

/* Thanh ghé thăm — nổi trên sân khấu, dưới modal (60) và ngang toast (55). */
.r3-root #r3Visit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1b2334ee;
  border: 1px solid #e0b44a88;
  border-radius: 12px;
  padding: 6px 10px;
  max-width: 94%;
}
.r3-root .r3-vnm { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r3-root .r3-vre { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 2px; }
.r3-root .r3-rbtn { font-size: 18px; min-width: 44px; }
.r3-root .r3-vsent { font-weight: 700; text-align: center; padding: 8px 0; }
.r3-root .r3-msgbox {
  width: 100%;
  font-size: 16px;              /* ≥16px: iOS không tự zoom khi focus */
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--r3-line);
  background: #141b2b;
  color: #fff;
  resize: vertical;
  -webkit-user-select: text;
  user-select: text;
}
.r3-root .r3-msgfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.r3-root #r3MsgCount.over { color: #e0645a; font-weight: 700; }

/* Duel + rương */
.r3-root .r3-drow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #232d42; font-size: 13.5px; }
.r3-root .r3-drow span { flex: 1; min-width: 0; }
.r3-root .r3-drow.new { background: #1e2a1e; border-radius: 8px; padding: 6px; }
.r3-root .r3-drec b, .r3-root .r3-dinc b, .r3-root .r3-dout b { display: block; margin-top: 8px; font-size: 13px; }
.r3-root .r3-chestwin { font-size: 20px; font-weight: 700; text-align: center; padding: 14px 0; }

/* Toast + thẻ báo việc — nằm TRONG sân khấu, không đè thanh đầu. z thấp hơn modal(60). */
.r3-root #r3Toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 55;
  background: #1b2334ee;
  border: 1px solid var(--r3-line);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13.5px;
  max-width: 86%;
}
.r3-root #r3Toast.err { border-color: #a05050; }
.r3-root #r3Toast.ok { border-color: #4a6e52; }
.r3-root #r3Toast[hidden] { display: none; }
/* Thẻ báo việc: giữa-đáy, xếp phía trên #r3Toast (bottom:14 + ~40px cao). Góc
   phải-trên là cột cửa hàng 366px của iframe — đặt ở đó là đè title shop. */
.r3-root #r3Pop { position: absolute; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 55; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.r3-root .r3-pop {
  background: #1b2334ee;
  border: 1px solid #e0b44a88;
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  max-width: 260px;
}

/* Tủ nhân vật (170/171): lưới skin + ô đồ mặc trong modal 🧍 */
.r3-root .r3-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.r3-root .r3-skin { background: #141b2b; border: 1px solid var(--r3-line); border-radius: 12px; padding: 8px 6px; text-align: center; }
.r3-root .r3-skin.on { border-color: #e0b44a; }
.r3-root .r3-skin img { width: 64px; height: 64px; object-fit: contain; }
.r3-root .r3-wsw { width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 12px; font-size: 34px; line-height: 64px; }
.r3-root .r3-wnm { font-size: 12px; font-weight: 600; margin-bottom: 4px; }

/* ---- body.s8-play: thanh tab dưới ẩn (xem css/ispeak.css) ---- */
/* ispeak.css hạ padding-bottom của .view về 0 từ mốc ≤979px — lề đáy -64px phải
   về 0 CÙNG mốc đó, không thì dải 720-979px hụt đúng 64px đáy. */
@media (max-width: 979px) {
  body.s8-play .r3-root { margin-bottom: 0; }
}
@media (max-width: 719px) {
  body.s8-play .r3-root #r3App {
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* ---- body.s8-imm: toàn màn hình, thanh trên cũng đi (xem css/ispeak.css) ---- */
body.s8-play.s8-imm .r3-root { padding-top: env(safe-area-inset-top); }
/* 56px = 48px nút #immExit + 8px lề — con số gốc ở css/ispeak.css khối .s8-imm-exit. */
body.s8-play.s8-imm .r3-root #r3Top { padding-right: calc(env(safe-area-inset-right) + 56px); }
body.s8-play.s8-imm .r3-root #r3App {
  height: calc(100vh);
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
@media (max-width: 719px) {
  body.s8-play.s8-imm .r3-root #r3App {
    height: calc(100vh);
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* ==================== ☰ màn hẹp: gộp hàng nút xã hội (mobile-redesign 09/2026) ====
   ≤719px (mốc chung của app — KHÔNG đẻ mốc mới): #r3Title + #r3Coins ẩn — xu hiện
   đúng MỘT nơi là pill trong iframe (server vẫn là chân lý qua bridge; chip ⛏️ mint
   GIỮ vì là điểm chạm sư phạm "luyện nói để nhận lương"); #r3Btns thành sheet thả
   dưới nút ☰, badge ☰ do js/views/room.js cộng dồn từ badge con.
   Đặt CUỐI FILE: cùng độ cụ thể thì thứ tự nguồn quyết định.
   z-index 65: dưới trần 70 (test 4988), trên #r3Visit (55) để sheet dùng được cả lúc
   ghé thăm. 65 > #r3ModalWrap (60) không thành vấn đề vì hai lớp không bao giờ cùng
   hiện — bấm nút nào trong sheet là room.js đóng sheet TRƯỚC khi modal mở. */
.r3-root #r3More { display: none; }
.r3-root #r3Top { position: relative; }
@media (max-width: 719px) {
  .r3-root #r3Title, .r3-root #r3Coins { display: none; }
  .r3-root #r3More { display: block; margin-left: auto; min-height: 44px; }
  .r3-root #r3Btns {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 8px;
    z-index: 65;
    background: var(--r3-card);
    border: 1px solid var(--r3-line);
    border-radius: 12px;
    padding: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100vw - 16px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
  }
  .r3-root #r3Top.open #r3Btns { display: flex; }
  /* trong sheet, nút xã hội lên đủ sàn chạm 44px (mặc định 38px từ thời desktop) */
  .r3-root #r3Btns .r3-tbtn { min-height: 44px; min-width: 48px; }
}

/* ==================== toast / thẻ báo việc trên màn hẹp (rà soát mobile 02/09) ====
   Cả hai đứng ở đáy sân khấu (bottom 14/64) — đúng chỗ #navbar của iframe (cao
   92–112px sát đáy): toast che 🛒/🧑 suốt 3,2s, thẻ báo việc là nút bấm nên còn
   nuốt luôn cú chạm trong 6s. Màn dọc: nhấc cả hai lên trên navbar. Màn ngang
   (rail nav bên trái, cột công cụ bên phải, đáy là cần + pad): lên góc trên,
   chừa pill xu bên trái. Toast không bao giờ cần bấm → pointer-events none,
   để nó có đè lên gì thì cú chạm vẫn xuyên tới nút bên dưới.
   Đặt CUỐI FILE — cùng độ cụ thể với khối gốc #r3Toast/#r3Pop nên thứ tự
   nguồn quyết định; KHÔNG sửa khối gốc (test canh bottom: của #r3Pop). */
.r3-root #r3Toast { pointer-events: none; }
@media (max-width: 719px) {
  .r3-root #r3Toast { bottom: 120px; }
  .r3-root #r3Pop { bottom: 166px; }
}
@media (max-height: 520px) {
  .r3-root #r3Toast, .r3-root #r3Pop { bottom: auto; top: calc(8px + env(safe-area-inset-top)); left: 60%; max-width: 40%; font-size: 12.5px; }
}

/* ==================== màn ngang nhúng + dải 720–820 (rà soát mobile 02/09) ====
   Điện thoại cầm ngang: parent còn 375–412px, trừ thanh trên 60 và #r3Top ~57 là
   iframe chỉ còn 258–295px. Nén #r3Top về 40px trả lại ~17px cho sân khấu.
   Dải 720–820px (iPad mini dọc): iframe đã bật bố cục ngón tay (index.html ≤820)
   nhưng hàng nút xã hội ở đây vẫn 38px của desktop — nâng theo CON TRỎ THÔ chứ
   không đẻ mốc px mới (mốc chung của app là 719/979, xem chú thích trên). */
/* Kèm max-width: đây là luật cho ĐIỆN THOẠI CẦM NGANG, không phải cho cửa sổ
   desktop bị kéo bẹp (mốc 979px là mốc chung của app). */
@media (max-height: 480px) and (max-width: 979px) {
  .r3-root #r3Top { min-height: 40px; padding: 2px 8px; }
  .r3-root #r3More { min-height: 40px; }
}
@media (pointer: coarse) {
  .r3-root .r3-tbtn { min-height: 44px; min-width: 48px; }
}

/* nhãn chữ cho nút xã hội (js/views/room.js gắn từ title) — chỉ hiện trong sheet
   ☰ màn hẹp, xếp thành cột đọc được; desktop giữ hàng emoji như cũ. */
.r3-root .r3-tlbl { display: none; }
@media (max-width: 719px) {
  .r3-root #r3Top.open #r3Btns { flex-direction: column; align-items: stretch; min-width: 220px; }
  .r3-root #r3Btns .r3-tbtn { display: flex; align-items: center; gap: 10px; padding: 0 12px; text-align: left; }
  .r3-root #r3Btns .r3-tbtn[hidden] { display: none; }
  .r3-root .r3-tlbl { display: inline; font-size: 13.5px; font-weight: 600; }
}

/* ==================== sàn chạm 44px cho nút trong MODAL (rà soát 26/09) ====================
   Đo bằng khung thử mount CHÍNH social/presence/avatar/home.js (api giả) ở 375×700 và
   667×300, pointer: coarse: nút .r3-mbtn 38px (nút cảm xúc .r3-rbtn 42), tab .r3-pbtn
   29,5–32px, nút tên .r3-nmbtn 35,5px — trong khi .r3-tbtn của sheet ☰ đã 44 (khối con
   trỏ thô phía trên). Chỉ BUTTON .r3-nmbtn: home.js/presence.js dùng cùng lớp cho SPAN tên.
   KHÔNG có ngoại lệ màn ngang (khác chip/thanh trên — chúng ăn chỗ sân khấu vĩnh viễn):
   modal tự cuộn trong trần max-height 86%. Đo 667×300, cả s8-play lẫn s8-imm: không modal
   nào chuyển từ vừa khung sang phải cuộn, nút Đóng không khuất thêm trong lòng modal; năm
   modal ngắn (📌 🎁 👀 ⚔️ mời premium, 👋 tiễn cư dân) cao thêm 6–18px, cao nhất 253,8px.
   Chuột (pointer: fine) giữ 38px như cũ.
   Đặt CUỐI FILE: cùng độ cụ thể với luật gốc .r3-mbtn nên thứ tự nguồn quyết định; KHÔNG
   gộp vào khối con trỏ thô của .r3-tbtn (bài kiểm M2 neo vào luật ĐẦU TIÊN của khối đó). */
@media (pointer: coarse) {
  .r3-root .r3-mbtn, .r3-root .r3-pbtn, .r3-root button.r3-nmbtn { min-height: 44px; }
}

/* ==================== sheet ☰ trên màn THẤP: mọi nút chạm được (rà soát 26/09) ====================
   Đo 667×300, s8-play, con trỏ thô: sheet một cột 9 nút cao 462px mở từ y=106 xuống 568,
   mà #r3App (overflow hidden) dừng ở 378 ⇒ ⚔️ 🎁 📌 🏆 bị cắt hẳn, ✉️ chỉ chạm được sau khi
   cuộn TRANG 63px. Android còn thêm 🔔 (notify.js, khi quyền báo chưa hỏi) ⇒ cụt 5 nút.
   (1) TRẦN chiều cao + tự cuộn, ở mọi bề rộng có sheet. Hằng số = mọi thứ nằm trên mép dưới
       sheet: thanh trên 60 (cùng con số #r3App trừ) + hộp đệm #r3Top (56; còn 44 khi khối
       màn ngang phía trên nén nó) + khe 4 giữa #r3Top và sheet + lề đáy 8. s8-imm không có
       thanh trên ⇒ bớt 60. Trừ tai thỏ y như #r3App. Sheet vừa khung thì trần không chạm tới:
       màn dọc 375×700 trần 572 > 462, không xê một pixel. Màn dọc THẤP thì có đổi, và đó là
       cùng một lỗi: 360×560 (Android) nút 🔔 đang nằm ngoài #r3App.
       Hai dòng cuối của luật đầu là BẮT BUỘC đi kèm trần: luật gốc của sheet còn xuống dòng
       và dồn cuối từ thời sheet là một HÀNG emoji. Cột có trần mà còn xuống dòng là bẻ sang
       cột thứ hai (sheet phình 344px, cuộn ngang); còn dồn cuối thì phần tràn đi lên TRÊN
       mép, vùng cuộn không với tới (đo 320×568, 10 nút: mất 🏡).
   (2) Màn NGANG: lưới 2 cột. Nhãn dài nhất "Khách đang ở nhà bạn" 207px ⇒ sheet 438px, vừa
       cả khổ 480. 667×300: 8/9 nút chạm được ngay, 🏆 sau 78px cuộn (một cột: 278px).
   Dòng vh đi trước dòng dvh là đường lùi cho Safari chưa có dvh (iOS 14.3), cùng lệ #r3App.
   KHÔNG gom hằng số vào biến CSS: dòng dvh mang biến mà trình duyệt không hiểu dvh thì hỏng
   lúc TÍNH giá trị và rơi về none — không rơi về dòng vh. */
@media (max-width: 719px) {
  .r3-root #r3Btns {
    max-height: calc(100vh - 128px);
    max-height: calc(100dvh - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  body.s8-play.s8-imm .r3-root #r3Btns {
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
@media (max-width: 719px) and (max-height: 480px) {
  .r3-root #r3Btns {
    max-height: calc(100vh - 116px);
    max-height: calc(100dvh - 116px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  body.s8-play.s8-imm .r3-root #r3Btns {
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
@media (max-width: 719px) and (max-height: 480px) and (orientation: landscape) {
  .r3-root #r3Top.open #r3Btns { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ==================== màn ngang: sàn #r3App 320 → 210 (rà soát 26/09) ====================
   Sàn 320px là sàn của MÁY ĐỨNG. Cầm ngang thì 100dvh − 60 chỉ còn 200–320px nên sàn
   thắng và trang cao hơn màn: 667×300 trang 378 (cuộn 78), iframe cao 275 mà chỉ thấy
   197 — cần đi bộ, cụm #pad, chip công cụ và đáy rail nằm dưới mép màn; cuộn trang
   ≥40px để với tới thì ☰ chui xuống dưới .topbar sticky. 844×340 cũng tràn (378).
   Cùng lý với farm.css G43 ("sân bé còn hơn nút bị cắt") — nhưng KHÔNG hạ về 0: iframe
   có tier riêng cho sân khấu 160–240px (room3d/index.html, khối max-height:240px, rail
   còn 3 nút từ 189px), thấp hơn nữa là rail tràn TRONG iframe, không cuộn tới được.
   210 − #r3Top (45 ở ≤719, 49 ở hàng nút rộng hơn) = sân khấu ≥ 165 / 161px, tức đúng
   đáy của tier ấy; máy thấp hơn cả mức đó thì trang cuộn một chút thay vì bóp game.
   Kèm max-width như khối màn ngang phía trên: cửa sổ desktop kéo bẹp vẫn giữ 320. */
@media (max-height: 480px) and (max-width: 979px) {
  .r3-root #r3App { min-height: 210px; }
}

/* ==================== chip 🔥 chuỗi luyện nói (219 — R-1 giữ chân) ====================
   Là NÚT thật (bấm mở bảng chuỗi/tấm/chìa) nên focus được và đọc được bằng trình đọc
   màn hình; dáng pill cùng giọng với chip 🎤 ở trên. Thanh trên đã chật trên điện thoại
   (≤719px đã ẩn #r3Title + #r3Coins) nên đây là chip THỨ BA và là chip cuối: kho xu
   treo KHÔNG đẻ chip thứ tư mà kể ngay trong chip 🎤 (paintMint của js/views/room.js).
   Đặt CUỐI FILE: cùng độ cụ thể thì thứ tự nguồn quyết định. */
.r3-root #r3Streak {
  font-size: 12.5px;
  font-weight: 700;
  color: inherit;
  background: #34210f;
  border: 1px solid #6d4520;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  cursor: pointer;
}
.r3-root #r3Streak[hidden] { display: none; }
@media (pointer: coarse) {
  .r3-root #r3Streak { min-height: 44px; padding: 0 12px; }
}
/* màn ngang nhúng: thanh trên nén còn 40px — chip đừng kéo nó cao trở lại */
@media (max-height: 480px) and (max-width: 979px) {
  .r3-root #r3Streak { min-height: 32px; padding: 0 10px; }
}