/* API Firewall — Honeypot 隱藏欄位 */
.firewall-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}


#loading-area,
#error-area {
  display: none;
}

#loading-area.is-visible,
#error-area.is-visible {
  display: block;
}

#result-area {
  display: none;
}

#result-area.is-visible,
.result-page-main #result-area.is-visible {
  display: block;
}

/* 捲動至結果區時，預留 sticky 導覽列空間 */
.result-section {
  scroll-margin-top: 80px;
}

#error-debug {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8f8f8;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow: auto;
  border-radius: 8px;
}

.form-error {
  color: #f0506e;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

#header .uk-flex.uk-flex-middle {
  min-height: auto !important;
}

/* 情境入口頁 — 四張分類卡片 */
.category-entry-section {
  background: linear-gradient(180deg, #faf9f6 0%, #fff 55%, #faf8f4 100%);
  padding: 4rem 20px;
}

.category-entry__header {
  max-width: 36rem;
  margin: 0 auto 3rem;
}

.category-entry__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a7a5c;
}

.category-entry__title {
  margin: 0 0 1rem;
  font-family: "Noto Serif TC", "Songti TC", "PingFang TC", serif;
  font-size: clamp(1.65rem, 3.2vw, 2.15rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #2a2826;
  line-height: 1.45;
}

.category-entry__lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #6b6560;
}

.category-entry__grid {
  margin-top: 0;
}

.category-entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 2rem 1.85rem 1.75rem;
  border-radius: 16px;
  border: 1px solid rgba(201, 169, 98, 0.28);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 32px rgba(42, 40, 38, 0.04);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.22s ease,
    background 0.28s ease;
}

.category-entry-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.category-entry-card__label,
.category-entry-card__headline,
.category-entry-card__text,
.category-entry-card__cta {
  position: relative;
  z-index: 1;
}

/* 感情 — 淡墨梅花 */
.category-entry-card--relationship .category-entry-card__bg::before {
  content: "";
  position: absolute;
  top: -8%;
  right: -4%;
  width: 140px;
  height: 140px;
  opacity: 0.55;
  background:
    radial-gradient(circle at 50% 50%, rgba(42, 40, 38, 0.07) 0%, rgba(42, 40, 38, 0.07) 18%, transparent 19%),
    radial-gradient(circle at 50% 18%, rgba(42, 40, 38, 0.05) 0%, rgba(42, 40, 38, 0.05) 14%, transparent 15%),
    radial-gradient(circle at 78% 38%, rgba(42, 40, 38, 0.05) 0%, rgba(42, 40, 38, 0.05) 14%, transparent 15%),
    radial-gradient(circle at 22% 38%, rgba(42, 40, 38, 0.05) 0%, rgba(42, 40, 38, 0.05) 14%, transparent 15%),
    radial-gradient(circle at 62% 68%, rgba(42, 40, 38, 0.04) 0%, rgba(42, 40, 38, 0.04) 12%, transparent 13%),
    radial-gradient(circle at 38% 68%, rgba(42, 40, 38, 0.04) 0%, rgba(42, 40, 38, 0.04) 12%, transparent 13%);
}

.category-entry-card--relationship .category-entry-card__bg::after {
  content: "";
  position: absolute;
  top: 28%;
  right: 12%;
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, transparent, rgba(42, 40, 38, 0.08), transparent);
  transform: rotate(8deg);
}

/* 事業 — 淡墨山勢 */
.category-entry-card--career .category-entry-card__bg::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55%;
  opacity: 0.7;
  background:
    linear-gradient(158deg, transparent 42%, rgba(42, 40, 38, 0.045) 42%, rgba(42, 40, 38, 0.045) 100%),
    linear-gradient(172deg, transparent 58%, rgba(42, 40, 38, 0.035) 58%, rgba(42, 40, 38, 0.035) 100%),
    linear-gradient(145deg, transparent 68%, rgba(42, 40, 38, 0.025) 68%, rgba(42, 40, 38, 0.025) 100%);
}

.category-entry-card--career .category-entry-card__bg::after {
  content: "";
  position: absolute;
  bottom: 18%;
  right: 8%;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(42, 40, 38, 0.06), transparent);
  transform: rotate(-6deg);
}

/* 健康 — 流動雲氣 */
.category-entry-card--health .category-entry-card__bg::before {
  content: "";
  position: absolute;
  top: 10%;
  right: 5%;
  width: 130px;
  height: 80px;
  opacity: 0.65;
  background:
    radial-gradient(ellipse 55px 28px at 35% 50%, rgba(42, 40, 38, 0.045), transparent),
    radial-gradient(ellipse 45px 22px at 65% 45%, rgba(42, 40, 38, 0.04), transparent),
    radial-gradient(ellipse 38px 18px at 50% 62%, rgba(42, 40, 38, 0.035), transparent);
  filter: blur(0.5px);
}

.category-entry-card--health .category-entry-card__bg::after {
  content: "";
  position: absolute;
  top: 32%;
  right: 18%;
  width: 90px;
  height: 50px;
  opacity: 0.5;
  background:
    radial-gradient(ellipse 40px 20px at 40% 50%, rgba(42, 40, 38, 0.035), transparent),
    radial-gradient(ellipse 32px 16px at 70% 55%, rgba(42, 40, 38, 0.03), transparent);
  filter: blur(1px);
}

/* 尋物 — 淡金卦象 */
.category-entry-card--lost-item .category-entry-card__bg::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8%;
  width: 52px;
  height: 112px;
  transform: translateY(-50%);
  opacity: 0.14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 112' fill='none'%3E%3Crect x='0' y='2' width='52' height='4' rx='1' fill='%23c9a962'/%3E%3Crect x='0' y='20' width='22' height='4' rx='1' fill='%23c9a962'/%3E%3Crect x='30' y='20' width='22' height='4' rx='1' fill='%23c9a962'/%3E%3Crect x='0' y='38' width='52' height='4' rx='1' fill='%23c9a962'/%3E%3Crect x='0' y='56' width='52' height='4' rx='1' fill='%23c9a962'/%3E%3Crect x='0' y='74' width='22' height='4' rx='1' fill='%23c9a962'/%3E%3Crect x='30' y='74' width='22' height='4' rx='1' fill='%23c9a962'/%3E%3Crect x='0' y='92' width='52' height='4' rx='1' fill='%23c9a962'/%3E%3C/svg%3E") center / contain no-repeat;
}

.category-entry-card:hover,
.category-entry-card:focus {
  text-decoration: none;
  color: inherit;
  border-color: rgba(201, 169, 98, 0.55);
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(201, 169, 98, 0.12),
    0 14px 40px rgba(201, 169, 98, 0.12);
  transform: translateY(-2px);
}

.category-entry-card__label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #8a7a5c;
}

.category-entry-card__headline {
  margin: 0 0 0.85rem;
  font-family: "Noto Serif TC", "Songti TC", "PingFang TC", serif;
  font-size: clamp(1.15rem, 2.2vw, 1.32rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #2a2826;
  line-height: 1.5;
  max-width: 14em;
}

.category-entry-card__text {
  flex: 1;
  margin: 0 0 1.35rem;
  font-size: 0.94rem;
  line-height: 1.8;
  color: #5c5652;
}

.category-entry-card__cta {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a7a5c;
}

.category-back-link {
  margin: 0 0 2rem;
}

.category-back-link a {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: #8a7a5c;
  text-decoration: none;
}

.category-back-link a:hover {
  color: #2a2826;
}

.category-page-label {
  color: #8a7a5c;
  margin-bottom: 0.35rem;
}

.category-page-intro {
  font-family: "Noto Serif TC", "Songti TC", "PingFang TC", serif;
  font-size: 1.08rem;
  line-height: 1.85;
  color: #3a3836;
  margin-bottom: 1.25rem;
}

.category-page-reminder {
  color: #ED4852;
  font-weight: 500;
  font-size: 1.12em;
  letter-spacing: 0.15em;
}

/* MVP 分類頁表單 — 四步驟 */
.mvp-form .form-step {
  margin-bottom: 0.15rem;
}

.mvp-form .form-step--submit {
  margin-bottom: 0.5rem;
}

.mvp-form .form-step--submit .analysis-mode-wrap {
  margin-bottom: 0.85rem;
}

.mvp-form .form-step__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
}

.mvp-form .form-step__head--mode {
  margin-bottom: 0.55rem;
}

.mvp-form label.form-step__head {
  cursor: pointer;
}

.mvp-form .form-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #FFF;
  background: rgba(201, 169, 98, 0.18);
  border: 1px solid rgba(201, 169, 98, 0.35);
}

.mvp-form .form-step__optional {
  font-weight: 400;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}

.mvp-form .analysis-mode-wrap {
  margin-top: 0;
  margin-bottom: 0;
}

.mvp-form .analysis-mode__legend {
  display: none;
}

/* 問題庫 V2 — 群組 + 快速問題按鈕 */
.question-library {
  margin-bottom: 0;
}

.question-library__lead {
  margin: 0.35rem 0 1rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.02em;
}

.question-library__group + .question-library__group {
  margin-top: 1.35rem;
}

.question-library__group-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.question-library__group-rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 169, 98, 0.35) 20%,
    rgba(201, 169, 98, 0.35) 80%,
    transparent 100%
  );
}

.question-library__group-label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.question-library__group-icon {
  font-size: 1rem;
  line-height: 1;
}

.question-library__group-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.88);
}

.question-library__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.question-pick-btn {
  flex: 1 1 calc(50% - 0.55rem);
  min-width: 9.5rem;
  margin: 0;
  padding: 0.72rem 0.85rem;
  border: 1px solid rgba(201, 169, 98, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

.question-pick-btn:active:not(.is-selected) {
  transform: scale(0.98);
}

.question-pick-btn:hover:not(.is-selected) {
  border-color: rgba(201, 169, 98, 0.58);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 1px rgba(201, 169, 98, 0.1);
}

.question-pick-btn.is-selected,
.question-pick-btn.is-selected:hover,
.question-pick-btn.is-selected:focus-visible {
  border-color: #c9a962;
  background: linear-gradient(145deg, rgba(201, 169, 98, 0.28) 0%, rgba(255, 255, 255, 0.14) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow:
    0 0 0 2px rgba(201, 169, 98, 0.45),
    0 8px 22px rgba(201, 169, 98, 0.2);
}

.question-pick-btn.is-selected::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: rgba(201, 169, 98, 0.95);
  color: #2a2836;
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: middle;
  flex-shrink: 0;
}

.question-library__selected {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid #c9a962;
  border-radius: 0 8px 8px 0;
  background: rgba(201, 169, 98, 0.12);
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
}

.question-library__selected[hidden] {
  display: none !important;
}

.question-library__selected-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a962;
  padding-top: 0.15rem;
}

.question-library__selected-text {
  flex: 1 1 auto;
  font-weight: 600;
}

.question-library__hint {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 640px) {
  .question-pick-btn {
    flex: 1 1 100%;
  }
}

/* 解析模式切換 — 東方極簡 × 米白淡金 */
.analysis-mode-wrap {
  margin-top: 0.25rem;
  margin-bottom: 0.35rem;
}

.analysis-mode__legend {
  display: block;
  margin-bottom: 0.65rem;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.analysis-mode {
  display: flex;
  gap: 0.65rem;
  width: 100%;
}

.analysis-mode__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.analysis-mode__option {
  flex: 1;
  min-width: 0;
  cursor: pointer;
  margin: 0;
}

.analysis-mode__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3.35rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.2s ease;
}

.analysis-mode__title {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.35;
}

.analysis-mode__badge {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: rgba(201, 169, 98, 0.85);
  line-height: 1.3;
}

.analysis-mode__option:hover .analysis-mode__inner {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
}

.analysis-mode__option.is-selected .analysis-mode__inner {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* 完整版 — 淡金邊框與 hover 光感 */
.analysis-mode__option--full .analysis-mode__inner {
  border-color: rgba(201, 169, 98, 0.32);
  background: rgba(250, 248, 243, 0.07);
}

.analysis-mode__option--full:hover .analysis-mode__inner {
  border-color: rgba(201, 169, 98, 0.55);
  background: rgba(250, 248, 243, 0.1);
  box-shadow:
    0 0 0 1px rgba(201, 169, 98, 0.12),
    0 6px 22px rgba(201, 169, 98, 0.14);
}

.analysis-mode__option--full.is-selected .analysis-mode__inner {
  border-color: rgba(201, 169, 98, 0.62);
  background: linear-gradient(
    145deg,
    rgba(250, 248, 243, 0.14) 0%,
    rgba(255, 255, 255, 0.08) 100%
  );
  box-shadow:
    0 0 0 1px rgba(201, 169, 98, 0.18),
    0 8px 26px rgba(201, 169, 98, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.analysis-mode__option--full.is-selected .analysis-mode__title {
  color: #faf8f4;
}

.analysis-mode__option--full.is-selected .analysis-mode__badge {
  color: rgba(224, 200, 140, 0.95);
}

@media (max-width: 480px) {
  .analysis-mode {
    flex-direction: column;
    gap: 0.5rem;
  }

  .analysis-mode__inner {
    min-height: 3rem;
  }
}

@media (max-width: 640px) {
  .category-entry-section {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
  }

  .category-entry-card {
    padding: 1.5rem 1.35rem 1.35rem;
  }
}

.uk-light .uk-textarea, .uk-form-large:not(textarea):not([multiple]):not([size]){
	border-radius: 10px;
}

/* Rewarded Ad Modal */
.rewarded-ad-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.rewarded-ad-modal.is-visible {
  display: flex;
}

.rewarded-ad-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 40, 38, 0.45);
}

.rewarded-ad-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 22rem);
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 16px;
  background: #faf9f6;
  border: 1px solid rgba(201, 169, 98, 0.28);
  box-shadow: 0 18px 48px rgba(42, 40, 38, 0.18);
}

.rewarded-ad-modal__title {
  margin: 0 0 0.85rem;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #2a2826;
}

.rewarded-ad-modal__message {
  margin: 0 0 1rem;
  font-size: 0.94rem;
  line-height: 1.75;
  color: #5c5652;
}

.rewarded-ad-modal__error {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #c0392b;
}

.rewarded-ad-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.usage-remaining {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
}

/* 解局結果頁 result.php — 與首頁一致的東方極簡米白／暖灰／淡金 */
.result-page-main {
  background: linear-gradient(180deg, #faf9f6 0%, #fff 55%, #faf8f4 100%);
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.result-page-header {
  margin-bottom: 1.75rem;
}

.result-page-header__title {
  margin-top: 0.35rem;
  margin-bottom: 0.65rem;
  font-family: "Noto Serif TC", "Songti TC", "PingFang TC", serif;
  color: #2a2826;
}

.result-page-header__question {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #4a4540;
}

.result-page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-size: 0.84rem;
  color: #7a7268;
}

.result-page-header__badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 98, 0.45);
  background: rgba(201, 169, 98, 0.1);
  color: #8a7340;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.result-page-share {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.result-page-share__feedback {
  font-size: 0.82rem;
  color: #8a7340;
}

.result-page-notfound {
  padding: 2rem 0 3rem;
  color: #4a4540;
}

.result-page-main .result-section.is-visible {
  display: block;
}

.result-page-slot {
  margin-top: 2rem;
}

.result-page-slot__label {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a7a5c;
}

.result-page-slot__placeholder {
  min-height: 120px;
  border: 1px dashed rgba(201, 169, 98, 0.35);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(42, 40, 38, 0.04);
}

.result-page-slot--full .result-page-slot__inner {
  padding: 1.35rem 1.25rem;
  border: 1px solid rgba(201, 169, 98, 0.28);
  border-radius: 12px;
  background: linear-gradient(145deg, #fff 0%, #faf9f6 100%);
  box-shadow: 0 4px 20px rgba(42, 40, 38, 0.05);
}

.result-page-slot__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: #2a2826;
  font-family: "Noto Serif TC", "Songti TC", serif;
}

.result-page-slot__desc {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #6b6560;
}

.result-page-disclaimer {
  font-size: 0.82rem;
  line-height: 1.6;
  color: #8a8480;
}

.result-page-error-card {
  background: #fff;
  border: 1px solid rgba(201, 169, 98, 0.25);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 4px 18px rgba(42, 40, 38, 0.04);
}

.result-page-error {
  margin: 0;
  color: #b64545;
  line-height: 1.6;
}

.result-page-main .category-back-link a {
  color: #8a7340;
}

.result-page-main .category-back-link a:hover {
  color: #2a2826;
}