/* =========================================================
 * 檔案：src/styles/main3d.css
 * 用途：3D 版（index-3d.html）專用樣式——滿版 3D 畫布、四周暗角、
 *       疊在上面的「玻璃質感」操作介面、過關視窗的位置。
 *       按鈕、訊息列、對話框等基本樣式沿用 main.css，這裡只做 3D 版的調整。
 * 誰會用到：index-3d.html 在 main.css、footer.css 之後載入。
 * ========================================================= */

/* ---------- 整頁：3D 載入前先是深色底 ---------- */
body.body-3d {
  background: #0c0907;
  background-image: none;
}

/* ---------- 3D 畫布：滿版、在最底層 ---------- */
#scene3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;          /* 在 3D 畫面上拖拉時，瀏覽器不要捲動或縮放 */
  outline: none;
}

/* ---------- 四周暗角（電影感） ---------- */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, transparent 58%, rgba(0, 0, 0, .6) 100%);
}

/* ---------- 操作介面：疊在 3D 畫面上，由上而下 標題列 → 訊息 → 3D 區域 → 按鈕 → footer ---------- */
.hud {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  pointer-events: none;        /* 空白處讓手指「穿過去」點到 3D 畫面 */
}
.hud > * {
  pointer-events: auto;
}
.hud .viewport3d {
  flex: 1 1 0;
  min-height: 0;
  pointer-events: none;
}
.hud-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 寬螢幕：訊息已經搬進標題列（layout3d.js 的 setHudMode），
   下方只剩按鈕列，靠右放、寬度不要拉滿 */
.hud[data-mode="wide"] .hud-bottom {
  flex-direction: row;
  justify-content: flex-end;
}
.hud[data-mode="wide"] .tools {
  flex: 0 1 440px;
  min-width: 0;
}

/* 寬螢幕：訊息在標題列裡，填滿標題與按鈕之間的空位
   （flex-basis 0 → 只拿「剩下」的寬度，不會把標題或按鈕擠小） */
.hud .topbar .message {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 12px;
}
/* 標題原本會撐開填滿空位（見 main.css .topbar .title），
   寬螢幕時改成「不撐開」，空位讓給訊息，訊息才會緊接在標題後面 */
.hud[data-mode="wide"] .topbar .title {
  flex: 0 1 auto;
}

/* ---------- 玻璃質感面板（半透明深色＋背景模糊） ---------- */
.hud .topbar {
  background: rgba(20, 14, 9, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 220, 170, .14);
  border-radius: 14px;
  padding: 5px 6px 5px 14px;
}
/* 訊息列是純文字、沒有外框，直接壓在 3D 場景上：
   加一層深色文字陰影，木頭桌面比較亮的地方也看得清楚。
   訊息沒有可以點的東西，讓手指「穿過去」點到 3D 畫面 */
.hud .message {
  color: #f6e7cc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.hud button {
  background: rgba(30, 21, 14, .68);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 220, 170, .22);
}
.hud button.primary {
  background: var(--accent);
  border-color: var(--accent);
}

/* 標題：暖白字＋淡淡光暈，旁邊金色「3D」徽章 */
.hud .topbar h1 {
  color: #f6e7cc;
  letter-spacing: .06em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
.hud .topbar h1 .badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: .68em;
  line-height: 1.5;
  letter-spacing: 0;
  vertical-align: 2px;
  color: #1f1408;
  background: linear-gradient(135deg, #f7d36b, #d98a1c);
}

/* footer 背景透明，壓在 3D 場景上 */
.hud .aj-site-footer {
  pointer-events: auto;
}

/* footer 要貼齊螢幕最下緣：
   .hud 底部有 8px 內距（或 iPhone 底部安全區），footer 放在它上面時，
   藍線到螢幕底部會多出這一段空白，文字看起來就「偏上」、高度也沒變矮。
   做法：用負的下邊距把這段內距吃掉，再把 iPhone 安全區補回 footer 自己的下內距，
   讓「藍線 → 螢幕底部」只剩 footer 本身的高度，文字上下置中。 */
.hud .aj-site-footer {
  margin-bottom: calc(-1 * max(8px, env(safe-area-inset-bottom, 0px)));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 過關視窗：放在畫面下方、背景不變暗，讓慶祝動畫看得到 ---------- */
#winDialog {
  margin: auto auto 16px;
  background: rgba(20, 14, 9, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 220, 170, .25);
}
#winDialog::backdrop {
  background: transparent;
}