/* Janus — 版面只做一件事：把整張圖等比例放進畫面正中央。
   所有元件的座標都是「相對於這張圖」的百分比。 */

/* 英文：0xProto。unicode-range 限定拉丁字，所以中文版不會去下載這兩個檔。
   之後英文版要換粗體，字級那邊改 font-weight: 700 就會用到 Bold。

   ★ 這兩個 ttf 是「瘦過」的：原本的 Nerd Font 版一個檔 2.3 MB，裡面一萬多個字
     幾乎都是給程式設計師的終端機圖示，這個網站一個都用不到。
     用 pyftsubset 只留下 U+0020–U+024F（拉丁字、數字、標點、重音字母），
     2.3 MB → 105 KB，字的長相、字寬、行高完全沒變（有比對過）。
     原檔留在 ../../字型原檔/（在 janus 資料夾外面，不會上傳）。
     以後要加別的語言（例如希臘文、俄文）才需要重做一次。 */
@font-face {
  font-family: 'Proto Nerd';
  src: url('../fonts/0xProtoNerdFont-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F;
}
@font-face {
  font-family: 'Proto Nerd';
  src: url('../fonts/0xProtoNerdFont-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F;
}
/* unicode-range 只留拉丁字那一段。
   全形標點（……、，。）留給黑體，不然中文句子裡的省略號會變成等寬字體的窄版。 */

:root {
  /* --sw = 畫面上那張圖的實際寬度。所有字級、間距都用它算，
     不寫死像素，手機桌機都一樣比例。圖的比例 2250x4000 = 0.5625 */
  --sw: min(100vw, calc(100vh * 0.5625));

  /* 中文用黑體；拉丁字會先落到 Proto Nerd */
  --font: 'Proto Nerd', 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei',
          'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
}
@supports (height: 100dvh) {
  :root { --sw: min(100vw, calc(100dvh * 0.5625)); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #fff;
  overflow: hidden;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 整張圖永遠完整可見，不裁切、不拉伸 */
#stage {
  position: relative;
  width: var(--sw);
  height: calc(var(--sw) / 0.5625);
}

/* 背景 + 疊圖 + 材質是一個獨立的混合群組。
   isolation: isolate 把混合鎖在這一層裡面，材質不會去乘到對話框或物品欄，
   打字的時候瀏覽器也不用把整個畫面連材質重新合成一次。 */
#scene {
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;      /* 配下面的「多畫一圈」用的 */
  pointer-events: none;
}

/* 背景圖和影片都多畫一圈（上下左右各 1px），多出來的被 #scene 裁掉。
   為什麼要這樣：作者的圖有不少張最外圈那一列／欄是透明的（輸出時的鋸齒），
   透明的地方會透出後面白色的頁面，全黑的畫面就會看到一條白邊。
   多畫一圈剛好把那一圈蓋在畫面外面，順便也把瀏覽器算尺寸的零頭吃掉。
   代價是每邊少看到 1px，全出血的圖看不出來。 */
#bg, #vid {
  position: absolute;
  left: -1px;
  top: -1px;
  right: auto;
  bottom: auto;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  display: block;
  pointer-events: none;
}

/* 牆面材質（作者的 wall.png）。
   object-fit: cover = 等比例放大到蓋滿再裁掉多的，顆粒才不會被拉扁。

   ★ 濃淡就是下面這個 opacity：1 = 材質原本的濃度，數字越小越淡，0 = 完全看不到。
     要整個關掉，把 js/scenes.js 最下面那段設 tex 的迴圈註解掉。 */
#tex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}
#tex[hidden] { display: none; }

/* 影片：跟背景圖同一個位置、同一個比例（影片是 1080x1920，跟畫面一樣）。
   muted + playsinline 是手機的規矩 —— 靜音才准自動播，
   不然 iPhone 會強制跳全螢幕或乾脆不播。 */
#vid {
  object-fit: cover;
  background: #fff;
}
#vid[hidden] { display: none; }

/* 手上拿著的東西：跟著游標／手指跑。拿著的時候游標本身收起來 */
#held {
  position: fixed;
  z-index: 20;
  width: calc(var(--sw) * 0.25);   /* ← 手上那個東西的大小，改這個數字 */
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#held[hidden] { display: none; }
body.holding, body.holding * { cursor: none; }

/* 疊圖層（底線、音樂圖示…）：一律是圖，不是 CSS 畫的東西 */
#layers, #hotspots { position: absolute; inset: 0; }
#layers { pointer-events: none; }

.layer {
  position: absolute;
  height: auto;
  display: block;
}

/* 爐前面那排東西，點下去會變淡＝選起來了。
   圖本身是黑線稿，所以「灰掉」是靠降低不透明度做的（濾鏡的去彩色對黑白沒用）。 */
.layer.dim { opacity: 0.3; }

/* 熱區是看不見的，但**滑鼠移過去會變成手指**（作者決定的，唯一的提示）。
   只有電腦看得到 —— 手機沒有游標這回事，cursor 這行對觸控完全沒有作用。

   這個提示不會騙人：還不能用的熱區（有 when 而且現在不成立的）
   engine.js 根本不會把它畫出來，所以變手指的地方一定真的有反應。
   ★ 不想要的話把 pointer 改回 default 就好，改這一行而已。 */
.hotspot {
  position: absolute;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  appearance: none;
}
.hotspot:focus { outline: none; }


/* ── 物品欄 ───────────────────────────────────────────────
   位置照 bagiconsample / sample1 / sample2 量出來的。
   包包鍵在右上角，蓋在「往右走」那條熱區上面，所以熱區不用改短。
   ──────────────────────────────────────────────────────── */

/* 包包鍵和格子也跟熱區一樣，滑鼠移過去變手指（只有電腦看得到）。
   拿著東西的時候例外，游標是收起來的 —— 上面 body.holding 那條優先。 */
#bag {
  position: absolute;
  z-index: 6;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  appearance: none;
}
#bag[hidden] { display: none; }
#bag:focus { outline: none; }
#bag img { display: block; width: 100%; height: auto; }
#bag.open img { transform: rotate(180deg); }   /* 打開的時候倒過來 */

#inventory { position: absolute; inset: 0; z-index: 5; }
#inventory[hidden] { display: none; }

/* 每一格：外框和裡面的東西疊在同一個位置、同樣大小 */
.cell { position: absolute; cursor: pointer; }
.cell img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: auto;
  display: block;
}


/* ── 對話框 ───────────────────────────────────────────────
   兩種尺寸，位置都是照作者的示意圖量出來的：

     .small  一句話用的（爐）。照 a-04.png，外框圖被壓扁。
     .big    NPC 用的（鳥人）。照 birdman-sample.png，接近 a-02.png 的原比例。
     .big.high  同樣的框移到畫面上方，用來蓋住 NPC 的頭（birdman-sample2.png）。

   框是固定大小的，字從框的上緣往下排。
   ──────────────────────────────────────────────────────── */

/* z-index 要比 #catcher 高，不然 catcher 會蓋在對話框上面，選項就按不到了。
   （#stage 沒有設 z-index，所以這裡的 11 跟 catcher 的 10 是同一層在比） */
#dialog { position: absolute; z-index: 11; }
#dialog[hidden] { display: none; }

#dialog-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#dialog-icon {
  position: absolute;
  height: auto;          /* icon 本身不變形 */
}

#dialog-body { position: absolute; }

#dialog-text, #dialog-choices {
  font-size: calc(var(--sw) * 0.0355);
  line-height: 1.7;
  letter-spacing: 0.07em;
  color: #000;
}
#dialog-text { white-space: pre-wrap; }

/* 小的：一句話。
   字的位置（原本量出來是 25.19%，icon 是 29.05%）往上拉了一點，
   拉到第一行離框線還有一點空隙的地方 —— 再上去英文字會頂到框線。
   字放不下的時候不必再擠：dialog.js 的 fitSmall() 會把下面的
   top / height 蓋掉，把框往上拉長。所以這裡的高度是「最矮的樣子」。

   ！改 #dialog-body 的 top 的話，dialog.js 的 SMALL.inner 要跟著改
     （inner = 0.847 - top，0.847 是框線內緣的下緣）。 */
#dialog.small            { left: 6.36%; top: 82.42%; width: 85.62%; height: 15.80%; }
#dialog.small #dialog-icon { left: 13.34%; top: 24.32%; width: 5.13%; }
#dialog.small #dialog-body { left: 20.37%; right: 10.60%; top: 20.46%; }

/* 大的：NPC */
#dialog.big              { left: 1.25%; top: 60.42%; width: 96.13%; height: 31.78%; }
#dialog.big.high         { top: 0.70%; }
#dialog.big #dialog-icon { left: 12.91%; top: 22.69%; width: 4.57%; }
#dialog.big #dialog-body { left: 19.17%; right: 10.22%; top: 20.76%; }

/* 沒有外框的：外框已經畫在背景圖上了（物品欄裡看東西的大圖），
   這裡只負責把字打在圖上那個框的位置。
   圖上那個框的內緣是 73.2% ～ 97.1%，中線 85.15%。
   字用 translateY(-50%) 掛在中線上，所以一行、兩行都會自己置中。
   icon 對齊第一行（一行字的時候剛好也在中線上）。 */
#dialog.flat              { left: 0; top: 0; width: 100%; height: 100%; }
#dialog.flat #dialog-frame { display: none; }
#dialog.flat #dialog-icon  { left: 8.99%; top: 84.06%; width: 4.393%; }
#dialog.flat #dialog-body  { left: 15.01%; right: 8.34%; top: 85.15%;
                             transform: translateY(-50%); }

/* 要玩家打字的地方（塔內守門人問名字）。
   一整列＝已經打過的字（連逗點一起）＋一條線。
   線只有一個單字寬，示意玩家一次只填一格。
   ★ 這是暫時的版型 —— 現在只有一條黑色底線，作者畫好框之後
     把 border-bottom 拿掉，改成 background: url(...) 那張圖就好。 */
#dialog-answer {
  margin-top: 1.2em;
  font-size: calc(var(--sw) * 0.0355);
  line-height: 1.7;
  letter-spacing: 0.07em;
  color: #000;
}
#dialog-answer[hidden] { display: none; }
#dialog-answered { white-space: pre; }

#dialog-input {
  display: inline-block;
  width: 6em;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: #000;
  background: none;
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  padding: 0 0 0.15em 0;
  appearance: none;
}
#dialog-input:focus { outline: none; }

/* 選項：箭頭指著手指按住的那一個，放開才算選 */
#dialog-choices { margin-top: 1.7em; }
#dialog-choices[hidden] { display: none; }

.choice {
  position: relative;
  display: block;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0 0 0 1.5em;   /* 左邊留給箭頭 */
  cursor: default;
  text-align: left;
  appearance: none;
}
.choice:focus { outline: none; }

.choice-arrow {
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 0.55em;
  height: auto;
  visibility: hidden;
}
.choice.on .choice-arrow { visibility: visible; }

#catcher { position: fixed; inset: 0; z-index: 10; }
#catcher[hidden] { display: none; }


/* ── 只有網址加 ?debug 時才會出現，玩家看不到 ────────────── */
body.debug .hotspot { background: rgba(255, 0, 0, .18); outline: 1px solid rgba(255, 0, 0, .6); }
body.debug #readout {
  position: fixed; left: 0; top: 0; z-index: 99;
  font: 12px/1.4 monospace; background: #000; color: #0f0; padding: 4px 6px;
}