/* tea-persona.css — 🫖「你是哪種茶」人格測驗（innovation ③，2026-07-18）
   overlay 家族（z 10060，同 tea-fortune）：宣紙米白面板＋金髮絲線＋印章紅落款。
   高度一律 vh fallback＋dvh；⚠️ 面板已有 backdrop 遮罩，勿再往內加 backdrop-filter。 */
.hh-pa-overlay {
  position: fixed; inset: 0; z-index: 10060;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(24, 32, 26, 0);
  transition: background 0.25s ease;
  pointer-events: none;
}
.hh-pa-overlay.is-open { background: rgba(24, 32, 26, 0.55); pointer-events: auto; }
.hh-pa-panel {
  width: 100%; max-width: 560px;
  max-height: 88vh; max-height: 88dvh;
  overflow-y: auto; -webkit-overflow-scrolling: auto;
  background: linear-gradient(180deg, #faf6ec, #f4eddb);
  border-radius: 22px 22px 0 0;
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  position: relative;
  transform: translateY(30px); opacity: 0;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.24s ease;
}
.hh-pa-overlay.is-open .hh-pa-panel { transform: translateY(0); opacity: 1; }
.hh-pa-close {
  appearance: none; -webkit-appearance: none;
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px;
  border: none; background: none;
  font-size: 17px; color: #8a8069; cursor: pointer;
}
.hh-pa-eyebrow {
  font: 700 10.5px/1 "Cormorant Garamond", serif;
  letter-spacing: 0.32em;
  color: #a8894f;
  text-align: center;
  margin: 6px 0 10px;
}
/* intro */
.hh-pa-intro { text-align: center; padding: 12px 6px 4px; }
.hh-pa-title {
  font: 700 24px/1.4 "Noto Serif TC", "Noto Serif TC Fallback", serif;
  color: #2c3a2e; letter-spacing: 0.1em; margin: 0 0 8px;
}
.hh-pa-sub { font: 500 13.5px/1.8 "Noto Serif TC", "Noto Serif TC Fallback", serif; color: #6a5b3d; margin: 0 auto 18px; max-width: 320px; }
.hh-pa-seals { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.hh-pa-seals span {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 17px/1 "Noto Serif TC", "Noto Serif TC Fallback", serif;
  color: #fff; background: var(--pc, #4a6b52); opacity: 0.85;
}
.hh-pa-start {
  appearance: none; -webkit-appearance: none;
  border: none; cursor: pointer;
  background: #2c3a2e; color: #f5efe0;
  font: 700 15px/1 var(--font-ui, sans-serif);
  letter-spacing: 0.14em;
  padding: 15px 44px; border-radius: 999px;
  min-height: 48px;
}
.hh-pa-start:active { transform: scale(0.97); }
/* quiz */
.hh-pa-quiz { padding: 6px 2px; }
.hh-pa-prog { font: 700 12px/1 var(--font-ui, sans-serif); color: #a8894f; text-align: center; margin: 4px 0 8px; letter-spacing: 0.1em; }
.hh-pa-progbar { height: 3px; background: rgba(148, 114, 62, 0.18); border-radius: 2px; margin: 0 30px 20px; overflow: hidden; }
.hh-pa-progbar i { display: block; height: 100%; background: #94723e; border-radius: 2px; transition: width 0.3s ease; }
.hh-pa-q {
  font: 700 19px/1.6 "Noto Serif TC", "Noto Serif TC Fallback", serif;
  color: #2c3a2e; text-align: center; margin: 0 0 20px; letter-spacing: 0.04em;
}
.hh-pa-opts { display: grid; gap: 10px; }
.hh-pa-opt {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; text-align: left;
  font: 500 14.5px/1.6 "Noto Serif TC", "Noto Serif TC Fallback", serif;
  color: #3d4a3f;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(148, 114, 62, 0.3);
  border-radius: 14px;
  padding: 14px 16px; min-height: 50px;
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.hh-pa-opt:active { transform: scale(0.98); border-color: #94723e; background: rgba(148, 114, 62, 0.08); }
/* result */
.hh-pa-result { text-align: center; padding: 4px 4px 6px; }
.hh-pa-seal {
  width: 92px; height: 92px; margin: 6px auto 14px;
  border-radius: 50%;
  background: #9d3f2e;
  color: #f5efe0;
  font: 700 44px/92px "Noto Serif TC", "Noto Serif TC Fallback", serif;
  box-shadow: 0 8px 22px rgba(157, 63, 46, 0.3);
}
.hh-pa-name { font: 700 23px/1.4 "Noto Serif TC", "Noto Serif TC Fallback", serif; color: #2c3a2e; margin: 0 0 4px; letter-spacing: 0.08em; }
.hh-pa-line { font: 600 13.5px/1.6 "Noto Serif TC", "Noto Serif TC Fallback", serif; color: var(--pc, #94723e); margin: 0 0 12px; }
.hh-pa-desc {
  font: 500 14px/2 "Noto Serif TC", "Noto Serif TC Fallback", serif;
  color: #4a4436; text-align: left;
  margin: 0 auto 18px; max-width: 420px;
  padding: 14px 16px;
  border-top: 1px solid rgba(148, 114, 62, 0.25);
  border-bottom: 1px solid rgba(148, 114, 62, 0.25);
}
.hh-pa-teahead { font: 700 11px/1 var(--font-ui, sans-serif); letter-spacing: 0.22em; color: #a8894f; margin: 0 0 10px; }
.hh-pa-tea {
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 420px; margin: 0 auto 18px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(148, 114, 62, 0.35);
  border-radius: 14px; padding: 10px 14px 10px 10px;
  text-align: left;
}
.hh-pa-tea img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; }
.hh-pa-teaname { flex: 1; font: 700 14.5px/1.5 "Noto Serif TC", "Noto Serif TC Fallback", serif; color: #2c3a2e; }
.hh-pa-teago { font-size: 20px; color: #94723e; flex: none; }
.hh-pa-tea:active { transform: scale(0.985); }
.hh-pa-actions { display: flex; gap: 10px; justify-content: center; }
.hh-pa-share, .hh-pa-retake {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; min-height: 46px;
  font: 700 13.5px/1 var(--font-ui, sans-serif);
  letter-spacing: 0.08em;
  border-radius: 999px; padding: 13px 26px;
}
.hh-pa-share { border: none; background: #94723e; color: #f5efe0; }
.hh-pa-retake { background: none; border: 1px solid rgba(148, 114, 62, 0.45); color: #8a6a3c; }
.hh-pa-share:active, .hh-pa-retake:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .hh-pa-overlay, .hh-pa-panel, .hh-pa-progbar i { transition: none; }
}
/* 桌機：置中對話框化 */
@media (min-width: 1024px) {
  .hh-pa-overlay { align-items: center; }
  .hh-pa-panel { border-radius: 22px; max-height: 86vh; max-height: 86dvh; }
}