/* 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;
}

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;
  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; }
@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; }

/* 結果字卡 */
.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; }

/* ---------- 能量卡圖片：由遠到近出現 ---------- */
.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);       /* 背景是深色夜空，按鈕用白底才看得清楚 */
  background: var(--paper);
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  touch-action: manipulation;
}
.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;
}