/* ==========================================================================
   Vocab Royale (#/vocabroyale) — battle royale từ vựng 3D, nhúng IFRAME cùng
   origin (/vocabroyale/). Mọi luật nằm dưới .vr-root; full-bleed bằng lề â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 thanh tab — css/ispeak.css, css/room3d.css;
   chép, không đoán lại).

   File này CỐ Ý ngắn: game có ~430 dòng CSS RIÊNG bên trong iframe. Ở đây chỉ
   có chỗ đứng của iframe — không thanh đầu, không pill xu. Parent không có gì
   thật để hiển thị: xu của game nằm trong localStorage của chính nó (giai đoạn
   1 chưa nối ví chung), và một con số bịa còn tệ hơn một chỗ trống.

   BA LUẬT CỦA REPO ÁP VÀO FILE NÀY (mô tả, không trích — có bài kiểm quét cả
   phần chú thích và một chữ chép nguyên là tự làm đỏ chính nó):
     · Mọi selector ở tầng ngoài cùng bắt đầu bằng .vr- — kể cả luật theo
       body.s8-play / .s8-imm, viết bằng :is() thay vì đảo vế.
     · Không khai thuộc tính xếp lớp chồng nào; trần của repo là 70 và ở đây
       không cần lớp nào cả.
     · Không khai thuộc tính điều khiển cử chỉ chạm trên khung sân. Thuộc tính
       ấy lan qua ranh giới iframe và giết cuộn BÊN TRONG game — bài học đã trả
       ở css/duel.css. Game tự khai nó cho joystick và cụm nút trong CSS riêng
       của nó, đó mới là đúng chỗ.
   ========================================================================== */
.vr-root {
  --vr-bg: #0f1226;            /* đúng nền của game ⇒ không có đường ráp màu quanh iframe */
  margin: -18px -16px -64px;
  background: var(--vr-bg);
  color: #fff;
}

/* .view-wide có padding 0 0 64px (khác .view: 18px 16px 64px), nên ba lề âm vốn để huỷ
   padding của .view phải về 0, chỉ giữ lề đáy. Thiếu dòng này là cả sân kéo lệch lên 18px
   và tràn 16px ra mỗi mép — cùng bài học đã trả ở .r3-root/.farm-root/.gw-root. */
.vr-root:is(.view-wide *) { margin-top: 0; margin-left: 0; margin-right: 0; }

/* Cột cố định, không cuộn. 60px = thanh trên của app. */
.vr-root #vrApp {
  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;
}

.vr-root #vrStage {
  position: relative;
  flex: 1;
  min-height: 0;
  overscroll-behavior: none;
}

/* Nền = nền của SẢNH trong iframe, vì sảnh là trang được nạp đầu tiên. Không có dòng này
   thì có một nhịp trắng trước khi tài liệu con vẽ xong. */
.vr-root #vrFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--vr-bg);
}

/* ---- khổ điện thoại: thêm 56px thanh tab dưới ---- */
@media (max-width: 719px) {
  .vr-root #vrApp { height: calc(100vh - 124px); }
  .vr-root #vrApp {
    height: calc(100dvh - 60px - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* ---- body.s8-play: thanh tab dưới đã ẩn (css/ispeak.css) ⇒ trả lại 56px ----
   Viết bằng :is() chứ không đảo vế thành `body.s8-play .vr-root`: luật nhà là mọi selector
   tầng ngoài của file game phải bắt đầu bằng gốc của game ấy. */
@media (max-width: 979px) {
  .vr-root:is(body.s8-play *) { margin-bottom: 0; }
}
@media (max-width: 719px) {
  .vr-root:is(body.s8-play *) #vrApp {
    height: calc(100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* ---- body.s8-imm: thanh trên cũng đi ⇒ trả lại nốt 60px ---- */
.vr-root:is(body.s8-play.s8-imm *) { padding-top: env(safe-area-inset-top); }
.vr-root:is(body.s8-play.s8-imm *) #vrApp {
  height: calc(100vh - env(safe-area-inset-top));
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* NHƯỜNG GÓC TRÊN-PHẢI CHO NÚT THOÁT — và đây là chỗ Vocab Royale phải trả giá khác bốn
   game kia. Chúng có thanh đầu của PARENT để nhét 56px vào (css/ispeak.css khối .s8-imm-exit
   ghi con số gốc: 48px nút + 8px lề); trò này cố ý không có thanh nào, nên chỗ ấy phải cắt
   thẳng vào bề ngang của sân.
   Đổi lấy gì: bản đồ nhỏ của game nằm ở góc trên-phải, cách mép 14px và rộng tới 170px —
   để nguyên là nút thoát đè lên đúng chỗ hiển thị vòng bo, tức vừa không đọc được vòng bo
   vừa khó bấm trúng nút.
   HAI CÁCH LÀM SAI, cả hai đều đã thử và đo:
     · padding-right trên khung sân — con absolute có inset:0 căn theo PADDING BOX của khối
       chứa, nên padding ở đó không đẩy nó một pixel nào; trông y hệt luật không chạy.
     · right + width:auto trên iframe — iframe là REPLACED ELEMENT, `width: auto` rơi về bề
       rộng NỘI TẠI 300px chứ không co theo cặp left/right. Đo ở 960×600: sân còn 300px
       thay vì 889px.
   Nên: khai thẳng bề rộng. */
@media (min-width: 720px) {
  .vr-root:is(body.s8-play.s8-imm *) #vrFrame {
    width: calc(100% - env(safe-area-inset-right) - 56px);
  }
}
@media (max-width: 719px) {
  .vr-root:is(body.s8-play.s8-imm *) #vrApp {
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  /* KHỔ HẸP CHỪA TỪ TRÊN, KHÔNG TỪ BÊN PHẢI — và đây là một phép đo chứ không phải gu.
     Ở 375×812, 56px bề ngang là 15% màn hình; 56px chiều cao chỉ là 7%. Máy cầm NGANG
     rộng 812px nên nó rơi vào nhánh ≥720 ở trên và vẫn chừa bên phải, đúng chiều dồi dào
     của nó — mà trận đấu thì game vốn đã bảo người chơi xoay ngang máy.
     top + height chứ không padding, vì cùng lý do đã ghi ở khối trên: con absolute có
     inset:0 căn theo padding box. */
  .vr-root:is(body.s8-play.s8-imm *) #vrFrame {
    width: 100%;
    top: 56px;
    height: calc(100% - 56px);
  }
}