/* ==========================================================================
   Wobble Wars (#/battle) — mô phỏng trận đánh low-poly, nhúng IFRAME cùng origin
   (/battlesim/). Mọi luật nằm dưới .bs-root; full-bleed bằng lề âm huỷ padding
   của .view; chiều cao trừ chrome app theo đúng các con số css/vocabroyale.css
   đã đo (60px thanh trên / 56px thanh tab) — chép, không đoán lại.

   File này CỐ Ý ngắn, cùng lẽ với css/vocabroyale.css: game có CSS RIÊNG bên
   trong iframe (battlesim/css/style.css). Ở đây chỉ có chỗ đứng của iframe.

   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):
     · Mọi selector ở tầng ngoài cùng bắt đầu bằng .bs- — 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: nó lan qua
       ranh giới iframe và giết cử chỉ BÊN TRONG game. Game tự khai cho canvas
       của nó trong CSS riêng — đó mới là đúng chỗ.
   ========================================================================== */
.bs-root {
  --bs-bg: #1a1f2e;            /* đúng nền màn chờ của game ⇒ không có đường ráp màu quanh iframe */
  margin: -18px -16px -64px;
  background: var(--bs-bg);
  color: #fff;
}

/* .view-wide có padding 0 0 64px (khác .view: 18px 16px 64px) ⇒ ba lề âm về 0, giữ lề đáy. */
.bs-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. */
.bs-root #bsApp {
  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;
}

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

.bs-root #bsFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bs-bg);
}

/* ---- khổ điện thoại: thêm 56px thanh tab dưới ---- */
@media (max-width: 719px) {
  .bs-root #bsApp { height: calc(100vh - 124px); }
  .bs-root #bsApp {
    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 ---- */
@media (max-width: 979px) {
  .bs-root:is(body.s8-play *) { margin-bottom: 0; }
}
@media (max-width: 719px) {
  .bs-root:is(body.s8-play *) #bsApp {
    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 ---- */
.bs-root:is(body.s8-play.s8-imm *) { padding-top: env(safe-area-inset-top); }
.bs-root:is(body.s8-play.s8-imm *) #bsApp {
  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 ⤢ của vỏ app (48px nút + 8px lề) — cùng phép đo và
   cùng hai cách làm sai mà css/vocabroyale.css đã ghi: padding ở khung sân không đẩy con
   absolute, còn width:auto trên iframe (replaced element) rơi về 300px. Nên khai thẳng bề
   rộng. Góc ấy trong game là hai nút 🎥 🔊 — không chừa là nút thoát đè lên chúng. */
@media (min-width: 720px) {
  .bs-root:is(body.s8-play.s8-imm *) #bsFrame {
    width: calc(100% - env(safe-area-inset-right) - 56px);
  }
}
@media (max-width: 719px) {
  .bs-root:is(body.s8-play.s8-imm *) #bsApp {
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  /* khổ hẹp chừa từ TRÊN: 56px bề ngang là 15% màn 375px, 56px chiều cao chỉ 7% */
  .bs-root:is(body.s8-play.s8-imm *) #bsFrame {
    width: 100%;
    top: 56px;
    height: calc(100% - 56px);
  }
}