@font-face {
  font-family: "GenSenMaruGothicTW";
  src: url("/fonts/GenSenMaruGothicTW-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
  font-family: system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  color: #2b2b2b;
}

#canvas-wrap {
  position: fixed;
  inset: 0;
}

#canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 14px 18px 10px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0));
}

#topbar h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  /* brand heading only — body copy stays on system fonts, see the "font
     hierarchy" lesson in workspace CLAUDE.md (全站統一粗體 looked cramped) */
  font-family: "GenSenMaruGothicTW", system-ui, -apple-system, "PingFang TC", sans-serif;
}

#topbar p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b6b6b;
}

body.embed #topbar {
  display: none;
}

/* 一色到底：全站唯一強調色，跟 posture-simulator 同色，維持兩個嵌入頁面視覺一致 */
:root {
  --accent2: #81B8CC;
  --accent2-text: #FFFFFF;
}

/* 所有右側浮動按鈕群組共用一個定位容器，直向堆疊在右上角——不要再分別
   給 #view-controls 用 top、#camera-controls 用 bottom 各自定位 */
#right-controls {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

body.embed #right-controls {
  top: 12px;
  right: 12px;
}

/* 骨骼／肌肉改成兩個獨立開關（原本是互斥的三段式分頁：骨骼／肌肉／
   骨骼＋肌肉），直向排列跟下面的相機控制按鈕同一個視覺語言；兩個都打開
   時自動變成原本「骨骼＋肌肉」的半透明穿透效果，邏輯共用 setView()。 */
#view-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#camera-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 固定同一個寬度＋置中文字，不要讓每顆按鈕依內容各自撐開寬度（骨骼／
   肌肉／筋膜／正面／背面／重置長度都不一樣，寬度不統一排出來右邊
   對齊但左邊參差不齊）。用 #right-controls button 一次選到兩個子容器
   裡的所有按鈕，不用各自列 #view-controls/#camera-controls，筋膜開關
   之後如果換到哪一組都不用記得同步改這裡。.switch-btn 那三顆會用自己
   的 flex 版面覆蓋掉 text-align，寬度統一即可，不用另外處理。 */
#right-controls button {
  border: none;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  min-height: 36px;
  width: 136px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

#right-controls button:hover {
  background: rgba(255,255,255,0.95);
}

/* on narrow screens the title/subtitle run the full width and get covered by
   #right-controls (also fixed, top-right) — reserve room so text wraps clear of it.
   Must come AFTER the base #right-controls button rule above: an earlier attempt
   placed this media query before that rule, and since both have equal specificity
   the later rule in source order silently won regardless of viewport — the
   override never actually applied (looked fine reading the CSS, broke in the
   browser). */
@media (max-width: 768px) {
  #topbar {
    padding-right: 214px;
  }
  #right-controls button {
    width: 122px;
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* 「看起來像開關」的共用樣式（一色到底規格的 toggle-switch）——骨骼／
   肌肉／筋膜三個按鈕共用同一套 .switch-btn + .mini-switch，不是各自
   獨立實作 */
.switch-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mini-switch {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #d9d9d9;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}

.mini-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: left 0.2s;
}

.switch-btn.active .mini-switch {
  background: var(--accent2);
}

.switch-btn.active .mini-switch-knob {
  left: 16px;
}

/* 移到左上角（原本在左下角）——標題/副標題會換行到 2 行，所以留足夠的
   clearance 避免疊字；embed 模式沒有標題列，可以貼近頂端。 */
#info-panel {
  position: fixed;
  left: 16px;
  top: 128px;
  z-index: 10;
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-width: min(60vw, 320px);
}

/* embed 模式沒有標題列可以貼近頂端，但左側面板跟右上角按鈕列在同一
   高度時，窄寬度的 iframe（例如嵌入 posture-simulator）兩邊會撞在一起
   ——往下移到按鈕列下方，不要只比照非 embed 模式判斷「有沒有標題」 */
body.embed #info-panel {
  top: 58px;
}

/* 窄螢幕右側按鈕欄比較寬（放不下橫排），info-panel 要縮窄避免跟右上角
   的「隱藏筋膜」開關卡片重疊——這條規則必須放在上面的基本規則「之後」，
   不能塞進檔案前面那個 @media (max-width:768px) 區塊，因為來源順序在後
   的規則才會贏過同樣 specificity 的基本規則（同一個坑之前 .view-btn 已經
   踩過一次，見上面那條規則旁邊的註解）。 */
@media (max-width: 768px) {
  #info-panel {
    max-width: min(52vw, 320px);
  }
}

#info-panel.visible {
  display: flex;
}

#info-panel .badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}

#info-panel .badge.skeleton,
#info-panel .badge.muscle {
  background: var(--accent2);
  color: var(--accent2-text);
}

#info-label {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}

#btn-unhide {
  display: none;
}

#btn-unhide.visible {
  display: block;
}

/* 隱藏部位收到畫面兩側，依原本在身體的左右側分邊停靠——點一下就
   讓那個部位回來（見 restoreHiddenPart()），取代原本「一按隱藏、
   資訊面板整個消失、只能用『還原』一次全部復原」的做法。 */
.hidden-tray {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
}

.hidden-tray.left {
  left: 0;
  align-items: flex-start;
}

.hidden-tray.right {
  right: 0;
  align-items: flex-end;
}

.hidden-chip {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s;
}

.hidden-tray.left .hidden-chip {
  border-radius: 0 999px 999px 0;
  padding-left: 16px;
}

.hidden-tray.right .hidden-chip {
  border-radius: 999px 0 0 999px;
  padding-right: 16px;
}

.hidden-chip:hover {
  background: #fff;
  color: var(--accent2);
}

#hint {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 9;
  font-size: 12px;
  color: #8a8a8a;
  pointer-events: none;
  transition: opacity 0.3s;
}

#info-panel.visible ~ #hint {
  opacity: 0;
}

body.embed #hint {
  bottom: 12px;
}

#credit {
  position: fixed;
  right: 10px;
  bottom: 6px;
  z-index: 9;
  font-size: 10px;
  color: #a3a3a3;
  pointer-events: none;
}

#credit a {
  color: inherit;
  pointer-events: auto;
}

#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255,255,255,0.92);
  transition: opacity 0.25s;
}

#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#loading-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(129,184,204,0.25);
  border-top-color: var(--accent2);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#loading-text {
  font-size: 13px;
  color: #6b6b6b;
}