/* MBTI Demo 版面：手機直式為主（iPhone 16 Pro），桌機也能看 */
:root {
  --ink: #1f2f62;          /* 深藍：字、外框（和泡泡範本同色） */
  --paper: #fff;
  --soft: #eef3ff;         /* 選項按鈕底色 */
  --shadow: 0 6px 16px rgba(31, 47, 98, 0.18);
  --font: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  /* 金屬按鍵（開始、選單共用）：漸層中間最亮、往上下漸暗，像圓柱形的金屬（User 2026-10-14 指定）；
     底下一層厚度，看起來是凸起來的；按下去往下沉、厚度變薄 */
  --metal-bg: linear-gradient(180deg, #7d8593 0%, #a9b0bb 18%, #d8dce2 38%, #ffffff 50%, #d8dce2 62%, #a9b0bb 82%, #7d8593 100%);
  --metal-border: 1.5px solid #6b7482;
  --metal-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),   /* 上緣反光 */
    inset 0 -2px 3px rgba(60, 70, 90, 0.35),   /* 下緣陰影 */
    0 5px 0 #6f7887,                           /* 按鍵的厚度 */
    0 10px 16px rgba(0, 0, 0, 0.45);           /* 落在背景上的影子 */
  --metal-shadow-pressed:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 3px rgba(60, 70, 90, 0.35),
    0 1px 0 #6f7887,
    0 4px 8px rgba(0, 0, 0, 0.45);
}

html, body { margin: 0; height: 100%; }
body {
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: #1b2a55;     /* 背景圖載入前的底色（夜空的深藍） */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* 場景：佔滿可見畫面（iPhone 網址列伸縮時跟著變）
   背景圖：直式畫面用直式圖，橫式畫面用橫式圖（橫式圖的中間一欄就是直式圖）。
   cover＋置中的算法 demo.js 的 robotFrame() 也用到，改這裡要一起改那裡 */
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overflow: clip;          /* 機器人停在畫面外時，點按鍵不會把畫面捲過去（hidden 仍可被捲動；舊 Safari 由 demo.js 擋） */
  background: #1b2a55 url(../assets/bg/bg-portrait.jpg) center / cover no-repeat;
}
@media (min-aspect-ratio: 1/1) {
  .scene { background-image: url(../assets/bg/bg-landscape.jpg); }
}

/* ---------- 機器人（robot.js 產生） ---------- */
/* 機器人疊在字卡上面（User 2026-10-11 決定）；pointer-events: none 讓點擊穿過機器人，帽子蓋到按鍵也按得到 */
.robot-flyer { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.robot-stage { position: relative; }
.robot-canvas { width: 100%; height: 100%; display: block; }

/* ---------- 對話泡泡（做法同 reference/bubble-demo.html） ---------- */
/* wrap 是尾巴尖端那一點，跟 Rive 的浮動一樣 3 秒一輪上下飄 */
.bubble-wrap {
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  animation: bob 3s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--bob, -7px)); }
}
.bubble {
  position: absolute;
  bottom: 1.1em;           /* 尾巴高度，尾巴尖端剛好落在 wrap 的位置 */
  width: max-content;
  box-sizing: border-box;
  padding: 0.6em 1em;
  background: var(--paper);
  font-size: clamp(15px, 4vw, 21px);
  font-weight: 700;
  line-height: 1.45;
  white-space: pre-line;   /* 台詞裡的 \n 會換行，換行位置由 demo.js 指定 */
  text-wrap: balance;      /* 沒指定又放不下時，兩行長度平均，不會只剩一兩個字掉到第二行 */
  border-radius: 1.1em;
  border: 0.15em solid var(--ink);
  box-shadow: var(--shadow);
  transform-origin: var(--tail, 80%) 120%;   /* 從尾巴的位置彈出來 */
  transform: scale(0);
  opacity: 0;
}
/* 尾巴：兩個三角形疊出有外框的尖角，尖端在 --tail（從泡泡左緣算） */
.bubble::before, .bubble::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent;
}
.bubble::before {
  left: calc(var(--tail, 80%) - 1.1em);
  bottom: -1.1em;
  border-width: 1.1em 0 0 1.1em;
  border-top-color: var(--ink);
}
.bubble::after {
  left: calc(var(--tail, 80%) - 0.975em);
  bottom: -0.75em;
  border-width: 0.8em 0 0 0.8em;
  border-top-color: var(--paper);
}
.bubble.show { animation: pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.bubble.hide { animation: pop-out 0.25s ease-in forwards; }
/* 泡泡底下的按鍵（robot.ask，例如進化卡的「離開」「開始」）：泡泡本身點不到，只有按鍵點得到 */
.bubble-actions { display: flex; gap: 0.5em; margin-top: 0.7em; white-space: normal; }
.bubble-btn {
  flex: 1 1 0;
  pointer-events: auto;
  padding: 0.4em 0.8em;
  font: inherit;
  color: var(--ink);
  background: var(--soft);
  border: 2px solid var(--ink);
  border-radius: 0.8em;
  cursor: pointer;
  touch-action: manipulation;
}
.bubble-btn.primary { background: var(--ink); color: #fff; }
.bubble-btn:disabled { cursor: default; }
@keyframes pop-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes pop-out {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(0.6); opacity: 0; }
}

/* ---------- 字卡（問題、結果） ---------- */
.card {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 20px);
  width: min(calc(100% - 32px), 460px);
  box-sizing: border-box;
  padding: 20px 18px 18px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow);
  transform: translate(-50%, -16px) scale(0.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s 0.35s;
}
.card.in {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s;
}
/* 換下一題時，卡片留著、只有內容淡出淡入 */
.card-body { transition: opacity 0.25s ease; }
.card-body.fade { opacity: 0; }

.q-no { font-size: 14px; font-weight: 700; opacity: 0.55; margin-bottom: 6px; }
.q-text {
  margin: 0 0 14px;
  font-size: clamp(17px, 4.8vw, 20px);
  font-weight: 700;
  line-height: 1.55;
}
.opt {
  display: flex;
  gap: 0.5em;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  box-sizing: border-box;
  text-align: left;
  font: inherit;
  font-size: clamp(15px, 4.3vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: var(--soft);
  border: 2px solid var(--ink);
  border-radius: 14px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
}
.opt b { flex: none; }
.opt.picked { background: var(--ink); color: #fff; }
.opt:disabled { cursor: default; }
/* 進化卡的 5 個按鍵：橫排一列、字分兩行（User 2026-10-16）。字卡矮，機器人（在字卡上層）比較不會蓋到按鍵 */
.q-no.center, .q-text.center { text-align: center; }
.opt-row { display: flex; gap: 6px; margin-top: 4px; }
.opt.likert {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  align-items: center;     /* 「看情況」只有一行，上下置中 */
  margin-top: 0;
  padding: 8px 2px;
  text-align: center;
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.35;
  white-space: pre-line;   /* 按鍵文字裡的 \n 換行 */
}

/* 結果字卡 */
.result { text-align: center; font-size: clamp(17px, 4.8vw, 20px); font-weight: 700; line-height: 1.6; }
.result .type { display: inline-block; margin: 2px 0 6px; font-size: 1.9em; letter-spacing: 0.08em; }
.result-note { margin: 10px 0 0; font-size: clamp(14px, 3.9vw, 16px); font-weight: 500; line-height: 1.6; text-align: left; }

/* 能量卡底部的雷達圖（進化卡，User 2026-10-16）：直徑是卡片高度的 1/5（原本 1/8，字母太小看不清），
   底邊貼在人名緞帶上方。16 張卡多數緞帶頂端約在卡片高度 87%；牛頓、愛因斯坦、拿破崙的緞帶偏上，會被蓋到（User 同意） */
.radar {
  position: absolute;
  left: 50%;
  bottom: 13%;
  height: 20%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  pointer-events: none;
}
.radar-bg { fill: rgba(255, 255, 255, 0.88); stroke: var(--ink); stroke-width: 1.5; }
.radar-grid { fill: none; stroke: var(--ink); stroke-opacity: 0.3; stroke-width: 0.8; }
.radar-shape { fill: rgba(31, 47, 98, 0.35); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.radar-dot { fill: var(--ink); }
.radar-label {
  fill: var(--ink);
  fill-opacity: 0.4;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
.radar-label.on { fill-opacity: 1; }

/* ---------- 設帳號：填表字卡（放在 .card 裡） ---------- */
.f-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; text-align: center; }
.f-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.f-row > label { flex: none; width: 4.3em; font-size: 15px; font-weight: 700; }
/* 輸入框字要 16px 以上，iPhone 點進去才不會自動放大畫面 */
.f-row input, .f-row select {
  min-width: 0;
  height: 38px;
  box-sizing: border-box;
  padding: 0 8px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  -webkit-user-select: text;   /* body 設了不能選字，輸入框要打開，iPhone 才打得了字 */
  user-select: text;
}
.f-row input { flex: 1 1 0; }
.f-row input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
/* 下拉選單：拿掉各瀏覽器自己的外觀，右邊畫一個小三角 */
.f-row select {
  flex: none;
  padding-right: 22px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%231f2f62'/%3E%3C/svg%3E") no-repeat right 8px center;
}
.f-row .f-hour { flex: 0 0 3.6em; text-align: center; }
.f-unit { flex: none; font-size: 15px; font-weight: 700; }
.f-verify {
  flex: none;
  height: 38px;
  padding: 0 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: var(--soft);
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}
.f-verify:active { background: var(--ink); color: #fff; }
/* 驗證訊息：對齊在欄位下方 */
.f-msg { margin-left: calc(4.3em + 6px); font-size: 13px; font-weight: 700; color: #2e7d4f; }
.f-msg:empty { display: none; }
.f-msg.bad { color: #c0392b; }
.f-notes { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; opacity: 0.75; }
.f-actions { display: flex; gap: 10px; margin-top: 12px; }
.f-btn {
  flex: 1;
  height: 42px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  background: var(--soft);
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.f-btn.primary { background: var(--ink); color: #fff; }

/* ---------- 問運氣：告示板（放在 .card 裡） ---------- */
/* 字多：比畫面高時，字卡裡面上下捲動 */
.card.board {
  max-height: calc(100% - 40px - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.board-list {
  margin: 8px 0 0;
  padding-left: 1.4em;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
.board-list li { margin-top: 6px; padding-left: 2px; }
.board-list li::marker { font-weight: 700; }

/* 小視窗（demo.js 的 notice()）：蓋住整個畫面，中間一個白框，4 秒後自己消失 */
.notice {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 16, 40, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.notice.show { opacity: 1; }
.notice-box {
  width: min(calc(100% - 64px), 320px);
  box-sizing: border-box;
  padding: 22px 18px;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transform: scale(0.9);
  transition: transform 0.2s ease;
}
.notice.show .notice-box { transform: scale(1); }
.notice-box p { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }

/* ---------- 選單：6 個按鍵，2 個一列、共 3 列 ---------- */
/* 以 402×760 手機畫面的大小排版；demo.js 的 layoutMenu() 依機器人大小設 --u（縮放）與位置，
   所以 16:9 時也在機器人頭上同樣的地方、同樣的布局 */
.menu {
  position: absolute;
  left: 50%;
  top: max(var(--top, 20px), calc(env(safe-area-inset-top, 0px) + 12px));
  width: 330px;
  transform: translateX(-50%) scale(var(--u, 1));
  transform-origin: 50% 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
  visibility: hidden;
}
/* 金屬按鍵（外觀的設定在 :root 的 --metal-*） */
.menu-btn {
  position: relative;
  padding: 14px 4px;
  font: inherit;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);   /* 刻在金屬上的感覺 */
  background: var(--metal-bg);
  border: var(--metal-border);
  border-radius: 16px;
  box-shadow: var(--metal-shadow);
  cursor: pointer;
  touch-action: manipulation;
  transform: translateY(-16px) scale(0.9);
  opacity: 0;
  transition: translate 0.08s, box-shadow 0.08s, filter 0.08s;
}
.menu.in { visibility: visible; }
/* 一個接一個彈出來（延遲由 demo.js 依順序設 --i） */
.menu.in .menu-btn { animation: menu-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.08s) forwards; }
/* 按下去：往下沉、厚度變薄、稍微變暗（用 translate 不用 transform，才不會和進場動畫衝突） */
.menu-btn:active, .start-btn:enabled:active {
  translate: 0 4px;
  filter: brightness(0.92);
  box-shadow: var(--metal-shadow-pressed);
}
@keyframes menu-in {
  from { transform: translateY(-16px) scale(0.9); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---------- 能量卡圖片：由遠到近出現 ---------- */
.energy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.04) rotate(-8deg);
  opacity: 0;
  visibility: hidden;
}
.energy img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(calc(100vw - 48px), 420px);
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(31, 47, 98, 0.35);
  -webkit-touch-callout: none;
  pointer-events: none;
}
.energy.in {
  visibility: visible;
  animation: card-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.energy.out {
  visibility: visible;
  animation: card-out 0.5s ease-in forwards;
}
.energy.tappable { cursor: pointer; }
@keyframes card-in {
  from { transform: translate(-50%, -50%) scale(0.04) rotate(-8deg); opacity: 0; }
  15%  { opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes card-out {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(0.85); opacity: 0; }
}

/* ---------- 開始畫面 ---------- */
.start {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity 0.4s ease;
}
.start.gone { opacity: 0; pointer-events: none; }
.start-btn {
  padding: 14px 48px;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  background: var(--metal-bg);    /* 和選單按鍵一樣的金屬按鍵（User 2026-10-14） */
  border: var(--metal-border);
  border-radius: 999px;
  box-shadow: var(--metal-shadow);
  cursor: pointer;
  touch-action: manipulation;
  transition: translate 0.08s, box-shadow 0.08s, filter 0.08s;
}
.start-btn:disabled { opacity: 0.5; cursor: default; }

/* 診斷列：網址加 ?debug 才顯示 */
.diag {
  position: absolute;
  left: 8px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  font-size: 11px;
  color: #fff;
  opacity: 0.6;
  pointer-events: none;
}