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

* {
  /* 遊戲全畫面必備的 UI 鎖定 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 唯一不吃上面那組鎖的東西：文字輸入欄。
   `*` 的 user-select/touch-callout 也會套到 @pixi/ui 在 focus 時丟進
   document.body 的隱藏 <input>（見 AuthInput）以及各個 DOM overlay 表單，
   長按因此不會進入選字模式 → 手機端完全叫不出「貼上」氣泡。

   只放行真的會打字的型別：checkbox / radio / button / file 沒有可選取的文字，
   解鎖它們只是白白把手勢還給瀏覽器。`:not([type])` 不可少——@pixi/ui 的
   `document.createElement("input")` 不帶 type，AuthInput 也只在
   authOptions.type 有值時才補，所以擷取欄可能整場都沒有 type 屬性。

   注意這裡**不動 `touch-action`**：長按選字與拖曳選取把手不需要它，而在 iOS
   上 `touch-action: auto` 會替欄位開回雙指／雙擊縮放——那正是「輸入模式下頁面
   尺寸變更」的另一條路徑。已在 Android 模擬器（Chrome 109）實測 touch-action:
   none 之下長按選單、Select all、拖曳選取把手（[0,11] → [0,4]）與
   Copy→Paste 往返全部正常。 */
input:is(
    :not([type]),
    [type="text"],
    [type="tel"],
    [type="password"],
    [type="number"],
    [type="email"],
    [type="search"],
    [type="url"]
  ),
textarea {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}

/* iOS Safari 對「focus 當下 computed font-size < 16px」的欄位會自動放大整頁
   ——那就是「輸入模式下頁面尺寸變更」在 iOS 上的形態。`@pixi/ui` 的
   Input.createInputField 只寫 position/size/opacity/border/background，從不設
   font-size，所以它建立的擷取用 <input> 吃 UA 預設約 13.3px。

   必須是 CSS 不能是 JS：createInputField 在 `document.body.appendChild(input)`
   之後**同步**呼叫 `input.focus()`，而且要到 focus 之後才 `this.input = input`
   ——所以 AuthInput._startEditing 拿到元素時已經太遲，寫 inline style 補不回來。
   規則放在樣式表，元素一 append 就是 16px。

   `body > input` 精準命中「直接掛在 body 的隱藏輔助 input」：@pixi/ui 的擷取欄、
   idPictureRow 的 display:none 檔案選取器。promo / wallet deposit /
   personal-data 的可見欄位都包在各自的 root 容器內，不受影響。
   ⚠ 這是「魔法路徑」，相依於 @pixi/ui 把 input append 到 body。AuthInput.test.ts
   有一則測試守住這個前提，升版改了結構會先炸在那裡。真的炸了怎麼辦：
   1. 先看新版有沒有給 class/id——**目前沒有**（createInputField 只寫 inline
      style，不碰 className/id），所以今天沒有比這更穩的鉤子；有了就換過去。
   2. 都沒有的話，AuthInput 可以自己覆寫 createInputField() 接管建立流程，但
      連 focus 時序也得一起承擔（focus 是在 append 之後同步發生的）。 */
body > input {
  font-size: 16px;
}

html,
body {
  overflow: hidden !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
  background-color: #000000;
  position: fixed;
}

/* Webview iframe — overlaid on PixiJS canvas */
#webview-iframe {
  position: fixed;
  left: 0;
  width: 100%;
  border: none;
  z-index: 10;
  touch-action: auto;
  -webkit-user-select: auto;
  user-select: auto;
}

/* ── Boot splash: instant pre-Pixi loading screen (see src/app/bootSplash.ts) ── */
#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 5; /* above the static canvas; below #webview-iframe (z-index 10) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e1e1e; /* MATCHES the engine clear color so handoff doesn't shift */
  /* The fill has already reached 100% by the time this runs (bootSplash.ts waits
     for it), so the fade only has to get out of the way. */
  transition: opacity 300ms ease;
}
#boot-splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.boot-splash__inner {
  position: relative;
  /* matched to the Pixi LAKI badge (182px art * 0.8); verify in browser smoke */
  width: 146px;
  height: 146px;
  transform-origin: center;
}
/* The DIM badge. Dimmed here (no JS) so the first painted frame already shows
   the logo — .boot-fill then paints the LIT part on top. See app/bootWave.ts. */
.boot-logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.22;
}
/* Carries the liquid AND the percentage — the readout is drawn twice in here
   (dimmed, then full inside the wave clip) so it darkens with the badge instead
   of floating at full brightness over it. Styling lives in app/bootWave.ts. */
.boot-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}