/**
 * 沉浸模式：玩家動線上的頁面只顯示遊戲。
 *
 * 掛載與判斷在 `includes/class-immersive.php`（`body.mh-immersive`），
 * **這一支不做任何 JS 判斷**：CSS 在 `<head>`，第一幀就生效，玩家不會先看到
 * 頁首閃一下再消失。用 JS 加 class 的話一定會有那一閃。
 *
 * ## 為什麼要 `!important`
 * 區塊主題的版面（間距、內距、對齊）是 theme.json 產生的行內 `<style>`，
 * 特異性與載入順序都贏過外掛的樣式表。這裡不是偷懶，是唯一蓋得過去的方式。
 *
 * ## 選擇器為什麼分成兩組
 * 區塊主題（Twenty Twenty-Five 這一類）把頁首／頁尾包成
 * `.wp-site-blocks > header|footer.wp-block-template-part`，標題是
 * `.wp-block-post-title`；傳統主題則是 `.site-header` / `.entry-title` 那一套。
 * 兩組都寫，換主題時不會整個失效。**故意不寫得更廣**（例如所有 `header`）：
 * 遊戲自己的畫面裡也有 header 元素。
 */

/* ---- 網站外框：頁首（含選單）、頁尾、頁面標題 ---- */
body.mh-immersive .wp-site-blocks > header.wp-block-template-part,
body.mh-immersive .wp-site-blocks > footer.wp-block-template-part,
body.mh-immersive .wp-block-post-title,
body.mh-immersive .wp-block-post-date,
body.mh-immersive .wp-block-template-part .wp-block-navigation,
body.mh-immersive .site-header,
body.mh-immersive .site-footer,
body.mh-immersive .site-branding,
body.mh-immersive .main-navigation,
body.mh-immersive .entry-header,
body.mh-immersive .entry-title,
body.mh-immersive .page-title,
body.mh-immersive .wp-block-post-navigation-link,
body.mh-immersive .post-navigation,
body.mh-immersive #comments,
body.mh-immersive .comments-area {
  display: none !important;
}

/* ---- 外框拿掉之後留下來的空隙 ----
   區塊主題的 `.wp-site-blocks > *` 帶著一段 block-gap，頁首藏了那段還在，
   遊戲就會從螢幕中間開始。內容欄的上下內距同理。 */
body.mh-immersive .wp-site-blocks > *,
body.mh-immersive .wp-site-blocks > main > *:first-child {
  margin-block-start: 0 !important;
}
body.mh-immersive .wp-site-blocks > main,
body.mh-immersive .wp-site-blocks > .entry-content,
body.mh-immersive .site-main,
body.mh-immersive .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- main 裡面那一層版型群組的上下內距 ----
   區塊主題不是把內容直接放在 `<main>` 裡，中間還隔著範本自己的
   `.wp-block-group`（Twenty Twenty-Five 實測 `padding-top:70px`）與
   `.entry-content`。頁首藏掉之後那 70px 就變成螢幕頂端的一條空白。

   **左右內距刻意不動。** 那一層的水平內距是 `.alignfull` 的負邊界要抵銷的
   對象（`.has-global-padding > .alignfull { margin-inline: -50px }`）；
   把 padding 歸零而負邊界還在，內容會被推到畫面外，反之把負邊界歸零則
   遊戲再也滿版不了 —— 實測遊戲寬度會從 1280 掉到 1080。這一組是配對的，
   要嘛兩個都不碰。遊戲本來就靠 `alignfull` 拿到整條寬度。 */
body.mh-immersive .wp-site-blocks > main > .wp-block-group,
body.mh-immersive .wp-site-blocks > main > .entry-content,
body.mh-immersive .wp-site-blocks > main > .wp-block-post-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- `--mh-vh`：沉浸模式下「一整個畫面」到底有多高 ----
   **用 svh 不是 vh**：行動瀏覽器的網址列收起時 vh 會比真正的視窗高
   （見 game.css v1.21.0 的實測）。
   管理員工具列是 `position:fixed` 而且 `html` 帶著 `margin-top:32px`，
   所以它佔掉的高度必須從這裡扣一次——**只扣一次**，扣兩次會多出一條捲軸。 */
body.mh-immersive {
  --mh-vh: 100svh;
}
body.mh-immersive.admin-bar {
  --mh-vh: calc(100svh - 32px);
}
@media screen and (max-width: 782px) {
  /* 窄畫面的工具列是 46px（WordPress 自己的斷點就是 782）。 */
  body.mh-immersive.admin-bar { --mh-vh: calc(100svh - 46px); }
}

/* ---- 版面高度 ----
   外框沒了之後，`main` 要撐得起一整個視窗高，否則短內容（例如登入表單）
   會孤零零地黏在螢幕最上緣。 */
body.mh-immersive .wp-site-blocks > main,
body.mh-immersive .site-main {
  min-height: var(--mh-vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 遊戲畫面自己會撐滿（.srg-playing），置中會讓它上下各留一半空隙。 */
body.mh-immersive .wp-site-blocks > main:has(.srg-root.srg-playing),
body.mh-immersive .site-main:has(.srg-root.srg-playing),
/* 傳奇榜頁（2026-10-06 進白名單）：是一張往下讀的清單，不是一張表單。
   置中的話榜還在「載入中…」時整塊浮在螢幕中段，資料一到又往上跳；
   人少的榜（站上現況）則永遠浮在中間，返回鍵離頂端 100px 遠。
   玩家資訊頁不必列：它本來就比一個畫面高，置中等於從頂端開始。 */
body.mh-immersive .wp-site-blocks > main:has(.mh-lb-page),
body.mh-immersive .site-main:has(.mh-lb-page) {
  justify-content: flex-start;
}

/* ---- 撐滿整個視窗的那幾個容器 ----
   遊戲畫面、登入／註冊／選擇頁、選角頁各自寫死了 `calc(100svh - 24px)`
   或 `100dvh`。那個 24 是**沉浸模式之前**的數字：那時遊戲坐在主題頁首底下，
   `scrollToRoot()` 會捲到離頂端 16px 的地方，留 24 才不會剛好多出一條捲軸。

   現在頁首沒了，該扣的只剩管理員工具列。不改那四個檔案而在這裡覆寫，是因為
   那些值在**非**沉浸模式下仍然是對的 —— 改過去等於讓沉浸模式的假設外洩到
   四個不知道沉浸模式存在的樣式表裡。

   症狀很小但很煩：登入頁在 1280×800 實測 scrollHeight 808 / clientHeight 800，
   一條 8px 的捲軸，而畫面上明明什麼都沒滿。**只有登入中的管理員會遇到**
   （玩家沒有工具列，扣 0 剛好）。 */
body.mh-immersive .srg-root.srg-playing,
body.mh-immersive .srg-root.srg-splash-on,
body.mh-immersive .srg-auth,
body.mh-immersive .srg-register,
body.mh-immersive .mh-avsel {
  min-height: var(--mh-vh) !important;
}
body.mh-immersive .srg-root.srg-playing,
body.mh-immersive .srg-root.srg-splash-on {
  max-height: var(--mh-vh) !important;
}

/* ---- 管理員工具列 ----
   **刻意保留**（見 class-immersive.php 的決策）：那是登入者自己的工具列，
   不是網站選單，藏掉之後管理員在前台就沒有回後台的入口了；
   玩家（未登入／一般會員）本來就看不到它。它佔的高度已經由 `--mh-vh` 扣掉。 */