html {
  -ms-touch-action: none;
}

body, canvas, div {
  display: block;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;

  cursor: default;
  color: #888;
  background-color: #333;

  text-align: center;
  font-family: Helvetica, Verdana, Arial, sans-serif;

  display: flex;
  flex-direction: column;
}

canvas {
  background-color: rgba(0, 0, 0, 0);
}

#GameDiv, #Cocos3dGameContainer, #GameCanvas {
  width: 100%;
  height: 100%;
}

:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

/* ============================================================================
   Khung chơi: KHÔNG BAO GIỜ rộng hơn 9:16
   ----------------------------------------------------------------------------
   Vì sao cần: thiết kế là 720x1280 với `fitWidth: true, fitHeight: false` —
   đúng cho điện thoại, vì máy 20:9 vốn cao hơn 9:16 và ép nó là vứt màn hình đi
   (xem "Decisions locked" trong buildlog). Nhưng cùng lựa chọn đó, trên một cửa
   sổ NGANG, Cocos scale theo chiều rộng: cửa sổ 1600x900 cho hệ số 1600/720 =
   2.22, nên chiều cao thiết kế 1280 thành 2844 px trong khung chỉ 900 px. Kết
   quả là HUD to khổng lồ và mất 2/3 màn hình — đúng lỗi gặp trên itch.io và cả
   trên localhost.

   `max-width: calc(100vh * 9 / 16)` chỉ ràng buộc khi cửa sổ RỘNG hơn 9:16:
     - điện thoại 9:19.5 -> 100vh*9/16 lớn hơn bề rộng thật, không bó gì cả,
       game tràn hết màn hình như cũ.
     - cửa sổ ngang       -> game co về một hộp dọc, căn giữa, hai bên viền đen.

   Phần này chỉ chạy được khi `screen.exactFitScreen` là FALSE. Engine đọc cờ đó
   từ `src/settings.json`; builder sinh ra nó từ thuộc tính `cc_exact_fit_screen`
   trên `#GameDiv` trong template này — nên index.html đi kèm đã GỠ thuộc tính
   đó. Còn để `true` thì engine đo theo `window.innerWidth/innerHeight` và ghi đè
   inline style, mọi luật CSS ở đây đều vô nghĩa.
   ============================================================================ */

body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

#GameDiv {
  width: 100%;
  height: 100%;
  max-width: calc(100vh * 9 / 16);
  margin: 0 auto;
}

#Cocos3dGameContainer,
#GameCanvas {
  width: 100%;
  height: 100%;
}