/* =============================================================================
 * theme.css — 視覺主題設定
 * 設計人員可在此調整色彩、背景焦點、遮罩強度、玻璃面板與文字陰影。
 * style.css 僅負責元件結構與版面。
 * ========================================================================== */

:root {
  /* 基礎色彩 */
  --bg: #120c08;
  --bg-2: #1d130b;
  --ink: #fdeee2;
  --ink-dim: #dacec5;
  --line: rgba(255, 255, 255, 0.16);
  --gold: #ffe7b7;

  /* 職業系列色彩 */
  --warrior: #F75267;
  --archer: #FFD452;
  --mage: #AB75E9;
  --healer: #C4E170;
  --bard: #E23769;
  --rogue: #EF822D;

  /* 預設強調色 */
  --accent: #ff7a2e;
  --accent-rgb: 255, 122, 46;
  --accent-hi: #ffb066;
  --fam: var(--accent);

  /* 共用元件參數 */
  --radius: 16px;
  --maxw: 640px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* 背景與可讀性 */
  --theme-bg-image: url("../assets/content/bg.jpg");
  --theme-bg-position: center center;
  --theme-bg-scrim-top: rgba(8, 6, 12, 0.38);
  --theme-bg-scrim-bottom: rgba(8, 6, 12, 0.56);
  --theme-intro-scrim: rgba(8, 6, 12, 0.7);
  --theme-panel: rgba(10, 9, 16, 0.72);
  --theme-panel-solid: rgba(10, 9, 16, 0.9);
  --theme-panel-border: rgba(255, 255, 255, 0.16);
  --theme-panel-blur: 12px;
  --theme-text-shadow: 0 2px 9px rgba(0, 0, 0, 0.92);
}

/* 最底層背景；原本的 .bg-stars 與 .bg-fog 仍在其上方。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--theme-bg-scrim-top), var(--theme-bg-scrim-bottom)),
    var(--theme-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--theme-bg-position);
}

/* 首頁中央局部暗幕，不遮掉外圍背景人物。 */
.intro-inner {
  position: relative;
  isolation: isolate;
}
/* .intro-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -52px -42px;
  background: radial-gradient(
    ellipse at center,
    var(--theme-intro-scrim) 0%,
    rgba(8, 6, 12, 0.38) 58%,
    transparent 80%
  );
  filter: blur(4px);
} */

/* 測驗與結果內容使用玻璃面板，避免文字直接壓在複雜背景上。 */
.q-card,
.result-detail > .detail-block:not(.actions) {
  background: var(--theme-panel);
  border: 1px solid var(--theme-panel-border);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(var(--theme-panel-blur));
  backdrop-filter: blur(var(--theme-panel-blur));
}
.q-card {
  padding: clamp(20px, 5vw, 32px);
}
.result-detail > .detail-block:not(.actions) {
  padding: 20px;
}

/* 選項本身再增加一層對比。 */
.choice {
  background: rgba(10, 9, 16, 0.62);
}

/* 小字與說明文字在亮色天空或人物上仍保持清楚。 */
.intro-sub,
.intro-copy,
.q-copy,
.q-sub,
.prog-label,
.why-who,
.why-why {
  text-shadow: var(--theme-text-shadow);
}

/* 不支援背景模糊的瀏覽器使用較不透明的替代色。 */
@supports not (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .q-card,
  .result-detail > .detail-block:not(.actions) {
    background: var(--theme-panel-solid);
  }
}

/* 手機裁切保留右側角色，並加強遮罩以提高文字對比。 */
@media (max-width: 719px) {
  :root {
    --theme-bg-position: 78% center;
    --theme-bg-scrim-top: rgba(8, 6, 12, 0.46);
    --theme-bg-scrim-bottom: rgba(8, 6, 12, 0.64);
    --theme-intro-scrim: rgba(8, 6, 12, 0.78);
    --theme-panel: rgba(10, 9, 16, 0.8);
    --theme-panel-blur: 10px;
  }

  .intro-inner::before {
    inset: -38px -20px;
  }
}