@charset "UTF-8";
/* ==========================================================================
   Kit/css/theme.css ── 神策 色票 token ＋ 共用裝飾（內頁換膚・階段 1）
   --------------------------------------------------------------------------
   載入順序（index.php）：bootstrap → sweetalert2 → animate → fancybox
     → [theme.css] → style.css → info.css → rule.css
   本檔只放 :root token、body 退路、工具類、手寫 SVG、動效原則。
   元件本體（.step-card / .modern-table…）寫在 style.css / info.css，只能引用這裡的名稱。
   字型由 index.php 的 Google Fonts <link> 載入，本檔不寫 @font-face。
   --------------------------------------------------------------------------
   token 兩層：
   ・UI 層   --gold-bright / --red-ui / --blue-ui ＝ 介面高亮（導覽 active、搜尋漸層、警示框），值＝現況。
   ・等級層 --rank-common/adv/rare/hero/legend/myth ＝ 一般／高級／稀有／英雄／傳說／神話；
     初期只是 UI 層的別名，只在等級選擇器（.rank-* / .stat-badge.* / .simple-tag.high /
     .tag-gold / .enchant-badge）內手動指派。日後微調等級色只改 --rank-* 的值，UI 層不受影響。
   --------------------------------------------------------------------------
   禁止：
   1. 新增、改名或改值 token；節慶換季只改 --accent。
   2. <18px 文字用 --vermilion-500 ── 小字紅一律 --vermilion-400，≥18px 粗體才用 500。
   3. --gold-700 當文字色 ── 只當線條、菱形、角飾。
   4. --ink-700 當常態面板底 ── 只給表格偶數列與 hover 底。
   5. --shadow 當 background ── 只給 box-shadow。
   6. 用 @import 載入本檔；在本檔寫版面屬性（display/position/padding…）覆蓋既有元件。
   ========================================================================== */

/* ---- A. token ---- */
:root {
  /* 墨色階 */
  --ink-950: #05080c;                 /* body 底色、footer、手機底部條 */
  --ink-900: #0a0e14;                 /* section 面板、導覽列、.info-page-container */
  --ink-800: #111721;                 /* .step-card、.stat-card、表格奇數列 */
  --ink-700: #18202a;                 /* 只給表格偶數列、hover 底 */
  /* 線 */
  --line: rgba(140,123,80,.35);       /* 所有 1px 框線、分隔線、格線（= gold-700 的 rgba） */
  --line-soft: rgba(241,228,200,.08); /* 內側高光、極淡分隔 */
  /* 硃紅：小字紅用 400、≥18px 粗體才用 500 */
  --vermilion-400: #ff6b5e;           /* <18px 紅字、紅數字（.num-red 預設、td 小字） */
  --vermilion-500: #e0352b;           /* ≥18px 粗體強調、導覽 active 底線 */
  --vermilion-600: #c8302e;           /* 印章、主按鈕底、表頭漸層起點 */
  --vermilion-700: #9a1f26;           /* 筆刷、:active、表頭漸層終點 */
  --vermilion-800: #6a1519;           /* 暗角 */
  /* 金 */
  --gold-400: #e8c56a;                /* 金漸層亮面、次按鈕字 */
  --gold-500: #d4af37;                /* 沿用品牌金：icon、.stat-label、.step-badge 底 */
  --gold-700: #8c7b50;                /* 只當線條與菱形，不當文字 */
  /* 米白文字 */
  --cream: #f1e4c8;                   /* 主文字、H1/H2 */
  --cream-dim: #cfc4ae;               /* 段落、td、.step-desc */
  --cream-mute: #bba682;              /* 眉標、caption、footer 連結 */
  /* 語意 */
  --jade: #2ecfa6;                    /* 玩家得到的好處數字、成功狀態（取代 #00e676） */
  --ember: #ff7a3d;                   /* 只給 hover/focus 光暈 */
  /* UI 亮色層（值＝現況） */
  --gold-bright: #ffd700;
  --red-ui: #ff5252;
  --blue-ui: #4da6ff;
  /* 等級色層（別名；只在等級選擇器內手動指派） */
  --rank-common: #9a9a9a;
  --rank-adv: #4caf50;
  --rank-rare: var(--blue-ui);
  --rank-hero: var(--red-ui);
  --rank-legend: var(--gold-bright);
  --rank-myth: #e040fb;
  /* 其他 */
  --shadow: rgba(0,0,0,.55);          /* 只給 box-shadow */
  --accent: var(--vermilion-500);     /* 節慶換季唯一變數 */
  /* 字型 */
  --font-display: 'Noto Serif TC', 'Noto Sans TC', 'Microsoft JhengHei', serif;
  --font-body: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --font-brush: 'LXGW WenKai TC', 'Noto Serif TC', serif;

  /* ---- D. 手寫 SVG（只有形狀；data URI 裡的 currentColor 不會繼承頁面色，
     直接當 background-image 會是黑色，所以一律用 mask 著色，例：
       -webkit-mask: var(--svg-hook) center / contain no-repeat; mask: 同上;
       background-color: var(--gold-700); opacity: .22;
     # 已寫成 %23；外層雙引號、內層單引號 ---- */
  /* 6px 菱形（描邊正方旋轉 45°）：眉標端點、.modern-table 首尾 th */
  --svg-diamond: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6'><path d='M3 .6 5.4 3 3 5.4 .6 3Z' fill='none' stroke='currentColor'/></svg>");
  /* 雲紋角花 64×64（左上角；其餘三角用 scaleX/scaleY(-1) 翻）：雙線框＋兩個內捲雲紋＋雲尾 */
  --svg-cloud-corner: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='currentColor' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 63V12Q1 1 12 1H63'/><path d='M6 63V15Q6 6 15 6H63'/><path d='M32 18a8 8 0 1 0-16 0a6 6 0 1 0 12 0a4 4 0 1 0-8 0a2 2 0 1 0 4 0'/><path d='M18 32a8 8 0 1 1 0 16a6 6 0 1 1 0-12a4 4 0 1 1 0 8a2 2 0 1 1 0-4'/><path d='M32 18C30 6 6 30 18 32'/><path d='M34 16c5-5 12-4 18 2M16 34c-5 5-4 12 2 18'/><circle cx='22' cy='18' r='.9' fill='currentColor'/><circle cx='18' cy='42' r='.9' fill='currentColor'/></svg>");
  /* 星盤 200×200：3 同心圓＋72 格刻度環＋8 條放射線＋中心四芒＋8 星點 */
  --svg-starchart: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='currentColor'><circle cx='100' cy='100' r='97' stroke-width='1.5'/><circle cx='100' cy='100' r='90' stroke-width='6' stroke-dasharray='1 6.854'/><circle cx='100' cy='100' r='68' stroke-dasharray='3 5'/><circle cx='100' cy='100' r='42'/><path d='M100 3v194M3 100h194M32 32l136 136M168 32L32 168' stroke-opacity='.45'/><path d='M100 86l3.5 10.5L114 100l-10.5 3.5L100 114l-3.5-10.5L86 100l10.5-3.5Z' fill='currentColor' stroke='none'/><g fill='currentColor' stroke='none'><circle cx='100' cy='24' r='2.5'/><circle cx='176' cy='100' r='2.5'/><circle cx='100' cy='176' r='2.5'/><circle cx='24' cy='100' r='2.5'/><circle cx='154' cy='46' r='1.8'/><circle cx='154' cy='154' r='1.8'/><circle cx='46' cy='154' r='1.8'/><circle cx='46' cy='46' r='1.8'/></g></svg>");
  /* 鉤飾 28×12（.ink-bar 左端；右端 scaleX(-1)）：一條貝茲＋小圓鉤＋結點 */
  --svg-hook: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12' fill='none' stroke='currentColor' stroke-linecap='round'><path d='M1 6h9c3 0 4-4 7-4s4 4 7 4'/><path d='M24 6a2.2 2.2 0 1 0 2.2 2.2'/><circle cx='10' cy='6' r='1' fill='currentColor' stroke='none'/></svg>");
}

/* ---- B. body 退路：style.css 稍後把 body 改成引用 token；背景圖到位前靠墨藍漸層＋噪點 ---- */
body {
  background: radial-gradient(ellipse at 30% 10%, #10181f 0%, #080c12 55%, #03060a 100%) fixed;
  background-color: var(--ink-950);
  color: var(--cream-dim);
}
/* 噪點：feTurbulence 160px 平鋪、opacity .05，只在 body 一層、不壓文字 */
body::before {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>") 0 0 / 160px 160px repeat;
}

/* ---- C. 工具類 ---- */
/* 眉標「—◇— 神策 —◇—」：13px、字距 .35em、文字 --cream-mute；線與菱形皆 --gold-700。
   偽元素要同時裝線與菱形，故 mask 兩層（漸層＝髮絲線、--svg-diamond＝6px 旋轉 45° 描邊菱形） */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font: 13px/1 var(--font-brush);
  letter-spacing: .35em;
  color: var(--cream-mute);
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  flex: none;
  width: 56px;
  height: 6px;
  background-color: var(--gold-700);
  -webkit-mask: var(--svg-diamond) right center / 6px 6px no-repeat,
                linear-gradient(90deg, transparent, #000) left center / calc(100% - 10px) 1px no-repeat;
          mask: var(--svg-diamond) right center / 6px 6px no-repeat,
                linear-gradient(90deg, transparent, #000) left center / calc(100% - 10px) 1px no-repeat;
}
.eyebrow::before { margin-right: 12px; }
.eyebrow::after  { margin-left: calc(12px - .35em); transform: scaleX(-1); }

/* 硃紅方印：56px、豎排米白「神策」、雙框（2px 外框＋3px 墨色內縫）、rotate(-3deg)；一屏一枚 */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--vermilion-600);
  border-radius: 2px;
  background: var(--vermilion-600);
  color: var(--cream);
  font: 700 18px/1 var(--font-brush);
  letter-spacing: .1em;
  writing-mode: vertical-rl;
  box-shadow: inset 0 0 0 3px var(--ink-950), inset 0 0 0 4px var(--vermilion-600);
  transform: rotate(-3deg);
  user-select: none;
}
.seal.is-sm {
  width: 32px;
  height: 32px;
  border-width: 1px;
  font-size: 11px;
  box-shadow: inset 0 0 0 2px var(--ink-950), inset 0 0 0 3px var(--vermilion-600);
}

/* 墨色橫條：半透明墨底、上下 1px 髮絲線、兩端鉤飾（--svg-hook 著 --gold-700） */
.ink-bar {
  position: relative;
  padding: 10px 48px;
  background: rgba(5,8,12,.78);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  font-family: var(--font-body);
}
.ink-bar::before,
.ink-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28px;
  height: 12px;
  margin-top: -6px;
  background-color: var(--gold-700);
  -webkit-mask: var(--svg-hook) center / 28px 12px no-repeat;
          mask: var(--svg-hook) center / 28px 12px no-repeat;
}
.ink-bar::before { left: 12px; }
.ink-bar::after  { right: 12px; transform: scaleX(-1); }

/* 數字語意：紅＝規則與限制（時間、上限、門檻、花費）；青玉＝玩家得到的好處（倍率、數量、優惠） */
.num-red  { color: var(--vermilion-400); font-weight: 700; font-variant-numeric: tabular-nums; } /* <18px 預設 */
.num-red.is-lg { color: var(--vermilion-500); } /* 只給 ≥18px 粗體 */
.num-jade { color: var(--jade); font-weight: 700; font-variant-numeric: tabular-nums; }
.t-red  { color: var(--vermilion-500); } /* 標題關鍵字 <em>（≥18px）；小字紅改用 .num-red */
.t-gold { color: var(--gold-400); }

/* ---- E. 動效：transition 只存在於 no-preference；reduce 時 .fade-up 不隱藏、直接顯示。
   .is-in 由 IntersectionObserver 加上（stagger 60ms）；無 IO 的環境由 JS 直接加 .is-in ---- */
.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .fade-up { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
  .fade-up.is-in { opacity: 1; transform: none; }
  .fade-up:nth-child(2) { transition-delay: 60ms; }
  .fade-up:nth-child(3) { transition-delay: 120ms; }
  .fade-up:nth-child(4) { transition-delay: 180ms; }
  .fade-up:nth-child(5) { transition-delay: 240ms; }
  .fade-up:nth-child(n+6) { transition-delay: 300ms; }
}