/* ================================================================
   WOG SPA — 介面精練疊加層 (Refine v1)  2026-07-11
   ----------------------------------------------------------------
   目的：把現有「金銅 × 暗黑奇幻」再拉高一檔質感，色相一個不改。
   四根槓桿：① 字型階層 ② 材質層次 ③ 金屬金 ④ HUD 儀表感。
   原則：載入順序最末（覆蓋 spa-theme/base），只動【顏色 / 字型 / 陰影】，
         不動任何【尺寸 / 版面 / 間距 / 邏輯】→ 零重排、零 JS、不影響運作。
   範圍：本 v1 對準「每畫面共用外殼 + 角色首頁 + 主鈕 + modal」。
         shop / guild / 戰鬥等各功能卡片沿用同一套 token 自動受惠；
         需個別加深度的下一 pass 再補。A/B 滿意後可併入 spa-theme + spa-base。
   ================================================================ */

/* ══════ ① Token 精練：只提亮 / 加暖 / 補深度變數，色相不改 ══════ */
:root {
  /* 文字：微提亮 + 加暖，暗底上更好讀（識別度不變） */
  --c-text:       #d3c3a4;   /* was #c8b898 */
  --c-text-dim:   #a99a80;   /* was #a09080 */

  /* 金：主金保持識別，只把「亮金」推亮供高光/發光用 */
  --c-gold-light: #f0d488;   /* was #e8c86a */

  /* 邊框：由偏橙棕改為偏金的暖線，當作精緻髮絲邊 */
  --c-border:     rgba(196, 150, 72, 0.30);   /* was rgba(160,100,20,.35) */

  /* 新增：精練層專用 */
  --c-highlight:  rgba(255, 255, 255, 0.06);          /* 頂緣高光 */
  --c-card-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.55); /* 卡片柔和落影 */
  --c-btn-metal:  linear-gradient(180deg, #f2d885 0%, #dcb654 46%, #c69a3e 54%, #b3852f 100%);

  /* 字型：展示體（拉丁/數字走襯線，中文落回系統無襯線 → 標題出階層、正文不變）
     真做時把下方 @font-face 的自架 subset 展示字塞進 --font-display 第一順位即可，一行替換。 */
  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', 'PingFang TC', 'Noto Sans TC', serif;
  --font-num:     'Bahnschrift', 'DIN Alternate', 'Roboto Condensed', 'Courier New', monospace;
}

/* 真字型落地 hook（v1 先用系統襯線代打；拿到自架 subset 字後解註解並填 URL）：
@font-face{
  font-family:'WOG Display';
  src:url('../fonts/wog-display.woff2') format('woff2');
  font-weight:400 700; font-display:swap;
  unicode-range:U+0000-00FF, U+2000-206F, U+2070-209F;   subset：只含拉丁+數字+符號
}
*/

/* ══════ ② 材質層次：底層暗角 + 微噪點（治 OLED 死黑色帶），純背景不吃事件 ══════ */
body {
  background-color: var(--c-bg);
  background-image:
    radial-gradient(135% 75% at 50% -8%, rgba(32, 22, 48, 0.55), transparent 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 140px 140px;
}

/* 統一的髮絲高光 + 柔影，套在共用外殼與首頁容器上 */
#spa-header      { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35); }
#spa-nav         { box-shadow: inset 0 1px 0 var(--c-highlight); }
.sv-base-stats,
.sv-combat-grid,
.spa-modal       { box-shadow: inset 0 1px 0 var(--c-highlight), var(--c-card-shadow); }

/* 4 欄屬性格：圓角收邊 + 每格極淡上→下漸層，脫離純色平塗 */
.sv-base-stats   { border-radius: var(--r-md); overflow: hidden; }
.sv-stat         { background: linear-gradient(180deg, var(--c-surface2), var(--c-surface)); }

/* ══════ ③ 金屬金：主鈕多段金屬反光 + 內緣高光；nav 指示線發光 ══════ */
.btn-primary {
  background: var(--c-btn-metal);
  color: #1f1608;                                   /* 亮金上用深字，對比比白字更清楚 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    0 4px 14px rgba(180, 130, 40, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  font-family: var(--font-display);
  letter-spacing: 0.05em;
}
.btn-primary:active {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);   /* 按壓：金屬凹陷 */
}

.nav-tab.active            { color: var(--c-gold-light); }
.nav-tab.active::before    { box-shadow: 0 0 10px rgba(240, 212, 136, 0.55); }

/* ══════ ④ HUD 儀表感：等寬數字對齊 + 血條/屬性條軌道內凹 + 填色頂部反光 ══════ */
/* 全域等寬數字：只影響數字寬度（等寬對齊），不改版面 */
#spa-root { font-variant-numeric: tabular-nums; }

/* 關鍵讀數改展示數字體，強化「儀表」份量 */
.sv-stat-val,
.vital-pct { font-family: var(--font-num); }

/* 血條 / 經驗條 / 屬性條：軌道內凹陰影 + 填色上緣一道反光 */
.hdr-bar,
.sv-cbar {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.hdr-bar-fill,
.sv-cbar-fill { position: relative; }
.hdr-bar-fill::after,
.sv-cbar-fill::after {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent);
  border-radius: inherit;
  pointer-events: none;
}

/* ══════ 字型階層：標題 / 角色名 / modal 標題走展示體 ══════ */
.hdr-title {
  font-family: var(--font-display);
  letter-spacing: 0.07em;
  text-shadow: 0 0 12px rgba(240, 212, 136, 0.28);
}
.sv-name {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.spa-modal-title {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  color: var(--c-gold-light);
}

/* ================================================================
   Refine v2 — 下一 pass：把同一套質感延伸到各功能畫面 + 戰鬥/抽卡 hero moment
   ----------------------------------------------------------------
   同原則：只動 色/字/陰影，不動版面/尺寸。便宜的全域一致化（標題、血條）無腦鋪開；
   卡片深度只套「真正的卡片容器」不套每個列表列（避免雜亂，呼應「其餘清晰即可」）。
   ================================================================ */

/* ── 各功能標題統一走展示體（中文自動落回系統無襯線，只 Latin/數字襯線 + 字距）── */
.faq-header, .faq-title, .guild-header, .gv-adv-header,
.shop-cat-title, .shop-eq-hd, .bank-card-hd, .sv-section-hd,
.mission-title, .mission-detail-title, .team-item-title,
.system-item-title, .sign-head-title, .race-final-title,
.race-track-title, .synth-detail-title, .wog-card-header,
.ab-card2-title, .gv-vs-name {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

/* ── 所有 HUD 血條 / 進度條：軌道內凹 + 填色頂部反光（延伸 v1 的 .hdr-bar/.sv-cbar）──
   涵蓋 戰鬥HP / 角色HP / 任務進度 / 世界BOSS進度。fill 全為 height:100% 靜態，加 relative 安全。 */
.gv-hp-bar, .sv-bar, .mission-progress-bar,
.gv-npc-progress-bar, .ab-track {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.gv-hp-fill, .sv-bar-fill, .mission-progress-fill,
.gv-npc-progress-fill { position: relative; }
.gv-hp-fill::after, .sv-bar-fill::after,
.mission-progress-fill::after, .gv-npc-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent);
  border-radius: inherit;
  pointer-events: none;
}

/* ── 卡片容器材質：canonical .wog-card + 各功能主卡片（含抽卡 .draw-box hero 容器）──
   只套「容器級卡片」，列表列（shop-item/arm-item/syn-item…）維持清晰不加深度。 */
.wog-card, .sale-card, .bank-card, .pet-card, .job-card, .draw-box {
  background: linear-gradient(180deg, var(--c-surface2), var(--c-surface));
  box-shadow: inset 0 1px 0 var(--c-highlight), var(--c-card-shadow);
}

/* ================================================================
   Refine v3 — 強度上調（2026-07-11）
   ----------------------------------------------------------------
   原因：v1/v2 太含蓄，實機幾乎看不出（展示體只影響 Latin，中文無感）。
   對策：在【同一風格家族】內把可見度拉到當初 approve 的樣張程度——
   金色更亮更常見、卡片邊框清楚、標題金色加粗（中文也讀得出階層）、卡片加金條簽名。
   仍只動 色/字/陰影，不動版面。太搶眼可回調本區數值或整段移除。
   ================================================================ */

/* 主金提亮 + 邊框轉清晰金 → 全站 accent 與卡片邊框一起「看得見」 */
:root {
  --c-gold:       #dcb84e;                 /* was #c9a84c：全站金色 accent 一起提亮 */
  --c-gold-light: #f6dc92;
  --c-border:     rgba(212, 170, 82, 0.42); /* was .30：卡片/面板/輸入框邊框清楚可見 */
  --c-text:       #dccaa8;
}

/* 標題：金色 + 加粗 → 展示體只影響 Latin，補顏色/字重讓【中文標題】也明顯跳出階層。
   （刻意排除 .gv-vs-name：戰鬥藍/綠敵我配色要保留，不可蓋成金） */
.hdr-title, .sv-name, .spa-modal-title,
.faq-header, .faq-title, .guild-header, .gv-adv-header,
.shop-cat-title, .shop-eq-hd, .bank-card-hd, .sv-section-hd,
.mission-title, .mission-detail-title, .team-item-title,
.system-item-title, .sign-head-title, .race-final-title,
.race-track-title, .synth-detail-title, .wog-card-header,
.ab-card2-title {
  color: var(--c-gold-light);
  font-weight: 700;
}

/* 卡片簽名：左側金條，一眼看出「精緻卡片」（樣張同款；卡片皆無既有 ::before、static 定位，安全） */
.wog-card, .sale-card, .bank-card, .pet-card, .job-card { position: relative; }
.wog-card::before, .sale-card::before, .bank-card::before,
.pet-card::before, .job-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold-dim));
  border-radius: 3px 0 0 3px;
  pointer-events: none;
}

/* ================================================================
   Refine v4 — 輸入框打磨（2026-07-11）
   ----------------------------------------------------------------
   畫面最後一塊平面感＝輸入欄位（存款/轉帳/收款人/註冊…到處都是）。
   加「凹陷質感 + 金色 focus 光環」，與 (b) 濃金一致。仍只動 色/陰影，不動版面。
   ================================================================ */
.form-input, .gv-setting-input, .chat-msg-input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);      /* 欄位內凹，脫離平塗 */
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input:focus, .gv-setting-input:focus, .chat-msg-input:focus {
  border-color: var(--c-gold);                          /* focus 亮金邊 */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45),
              0 0 0 2px rgba(220, 184, 78, 0.25);        /* + 金色光環，聚焦清楚 */
}

/* ================================================================
   Refine v5 — 補齊其餘功能頁（2026-07-11）
   ----------------------------------------------------------------
   副本/世界BOSS/抽卡/攻城/邊境/拍賣會/戰鬥結算/公會卡/任務框/福利 這些頁面
   用自帶 class（不吃共用 .wog-card），先前只有 token 提升、沒拿到卡片深度與金標題。
   此區補上，與銀行/商店/公會一致。
   卡片用【inset box-shadow 畫左金條】而非 ::before → 免 position:relative 風險、
   且【不覆蓋各卡背景】（保留戰鬥結算勝負色 / 抽卡 banner 等狀態背景）。
   標題只取結構性 -head/-hd/-title（跳過所有 -name，避免蓋掉實體/稀有度色）。
   ================================================================ */

/* 大頁面自帶卡片：左金條 + 頂緣高光 + 柔影（14 卡皆無既有 box-shadow，安全） */
.dg-card, .wb-card, .gacha-panel, .ft-card, .ft-hist-card, .bd-card,
.guild-card, .gv-npc-card, .gv-result-card, .mission-detail-box,
.mission-req-box, .synth-detail-box, .welfare-box, .rbid-hammer-box {
  box-shadow: inset 3px 0 0 var(--c-gold),
              inset 0 1px 0 var(--c-highlight),
              var(--c-card-shadow);
}

/* 各功能結構性標題：金色 + 加粗（與 v3 批次一致；已排除全部 -name） */
.dg-room-title, .dg-room-head, .wb-hd, .ft-title, .ft-hd,
.rbid-item-head, .draw-result-head, .gacha-bn-head,
.ab-modal-title, .gv-log-header, .mission-req-title {
  color: var(--c-gold-light);
  font-weight: 700;
}

/* ================================================================
   Refine v6 — Hero moment：戰鬥結算揭示（2026-07-11，配 spa-fight.js 的數字 count-up）
   ----------------------------------------------------------------
   純 CSS：勝負橫幅彈入 + 勝利金色掃光 + 獎勵格依序浮現。尊重 reduced-motion。
   ================================================================ */
@keyframes gvBannerPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
.gv-result-banner { animation: gvBannerPop .42s cubic-bezier(.34, 1.56, .64, 1); }

/* 勝利橫幅：一道金白掃光（overflow 夾住，不外溢） */
.gv-result-banner--win { position: relative; overflow: hidden; }
.gv-result-banner--win::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg); animation: gvShine 1.1s ease-out .3s 1; pointer-events: none;
}
@keyframes gvShine { to { left: 130%; } }

/* 獎勵格依序淡入上浮（數字同時 count-up） */
@keyframes gvRewardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.gv-result-reward { animation: gvRewardIn .4s ease-out backwards; }
.gv-result-reward:nth-child(1) { animation-delay: .05s; }
.gv-result-reward:nth-child(2) { animation-delay: .14s; }
.gv-result-reward:nth-child(3) { animation-delay: .23s; }
.gv-result-reward:nth-child(4) { animation-delay: .32s; }
.gv-result-reward:nth-child(5) { animation-delay: .41s; }

@media (prefers-reduced-motion: reduce) {
  .gv-result-banner, .gv-result-banner--win::after, .gv-result-reward { animation: none; }
}