/* =============================================================
 * Stitch 2.0 Design System — ported from GY2 (2026-04-07 redesign)
 * Source: /Users/cengdewei/Guiyuan2/Guiyuan/apps/guiyuan/src/index.css
 * Target: Until I Crack (UIC) — pure HTML game, portable tokens
 *
 * 用法（v5_story.html）:
 *   <link rel="stylesheet" href="assets/stitch_tokens.css">
 *   <!-- 放在 inline <style> 之前，讓 inline style 可覆寫 -->
 *
 * 設計語彙：水彩、古銅銹綠、墨色宇宙、五行、金紫雙主色
 * ============================================================= */

/* --- Google Fonts (Noto Serif TC + JetBrains Mono + display fonts) --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;700&family=Ma+Shan+Zheng&family=Cinzel+Decorative:wght@400;700;900&family=Plus+Jakarta+Sans:wght@400;500;700&display=swap');

:root {
  /* ---------- Darkness Tier Scale (T0 最深 → T7 最亮) ---------- *
   * T0–T3 對齊 v5_story.html 既有值。T4–T7 為 Stitch 2.0 延伸層，
   * 對應 GY2 的 surface-battle / parchment / warm。           */
  --t0: #000000;          /* surface-ritual  最深，儀式黑 */
  --t1: #0c0c10;          /* surface-collapse 墨黑 (UIC --ink) */
  --t2: #1a1a22;          /* surface-practice 練習層 */
  --t3: #2c2c38;          /* surface-abyss   深淵 */
  --t4: #1A1510;          /* surface-battle  戰鬥銅暈 */
  --t5: #4A3520;          /* ink            古銅墨 */
  --t6: #8B7355;          /* ink-light      淡墨 */
  --t7: #E8D5B7;          /* parchment      羊皮紙 */

  /* ---------- Element Tokens (五行 — Stitch 2.0 brighter) ---------- */
  --water: #3B82F6;       /* 水：青藍 */
  --fire:  #DC2626;       /* 火：朱紅 */
  --earth: #D4A017;       /* 土：金黃（同 gold） */
  --metal: #9CA3AF;       /* 金：銀灰 */
  --wood:  #3A7C5E;       /* 木：古銅銹綠 */

  /* ---------- Brand Tokens（保留 v5_story.html 既有命名） ---------- */
  --gold:        #d4a44a; /* UIC 既有 gold（略偏暖） */
  --gold-bright: #D4A017; /* GY2 主金 */
  --gold-light:  #F6D365; /* 高光金 */
  --gold-warm:   #C4A77D; /* 銅色 */
  --gold-dark:   #A67C00; /* 古金 */

  --purple:        #6b3f8f; /* UIC 既有 purple */
  --purple-bright: #8B5CF6; /* shadow-purple */
  --purple-deep:   #6D28D9; /* shadow-deep */
  --purple-text:   #C4B5FD; /* shadow-text */

  --rebel-red: #c8443c;   /* UIC 既有：叛逆紅 */
  --hp-red:    #A63F3F;   /* GY2 HP red */

  --ink:        #0c0c10;  /* UIC 既有：底墨色（= T1） */
  --ink-deep:   #32200d;  /* 深墨棕 */
  --ink-label:  #8B5E4B;  /* 標籤墨棕 */

  --bone:       #efe9d8;  /* UIC 既有：骨白 */
  --bone-muted: #8a8474;  /* UIC 既有：靜骨灰 */

  /* ---------- Text on Dark ---------- */
  --text-primary:   rgba(255,255,255,0.87);
  --text-secondary: rgba(255,255,255,0.50);
  --text-hint:      rgba(255,255,255,0.20);

  /* ---------- Glass ---------- */
  --glass-bg:     rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.10);

  /* ---------- Pillar Colors（八字四柱） ---------- */
  --pillar-year:  #3A7C5E;
  --pillar-month: #D4A017;
  --pillar-day:   #3B82F6;
  --pillar-hour:  #8B5CF6;

  /* ---------- Fonts (6 families, 對齊 GY2) ---------- */
  --font-serif:    'Noto Serif TC', 'Songti TC', Georgia, serif;
  --font-headline: 'Noto Serif TC', serif;
  --font-body:     'Noto Serif TC', serif;
  --font-label:    'Manrope', sans-serif;
  --font-brush:    'Ma Shan Zheng', cursive;
  --font-gothic:   'Cinzel Decorative', serif;
  --font-mono:     'JetBrains Mono', 'Plus Jakarta Sans', monospace;
  --font-display:  'Cinzel Decorative', 'Noto Serif TC', serif;
}

/* =============================================================
 * Utility Classes
 * ============================================================= */

/* 玻璃卡片：半透明 + 模糊 + 細邊 */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

/* 墨色宇宙底：徑向漸層暗紫光 + 深層線性漸層 */
.ink-cosmos-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(20,20,35,0.8) 0%, transparent 70%),
    linear-gradient(to bottom, #0A0A0A 0%, #121212 100%);
}

/* 星空粒子點陣 */
.star-field {
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* 羊皮捲頂部 / 底部漸層遮罩（用於可滾動內容） */
.sacred-scroll-top {
  background: linear-gradient(to bottom, var(--bg, #0A0A0A), transparent);
  height: 60px; pointer-events: none;
  position: fixed; top: 0; left: 0; width: 100%; z-index: 40;
}
.sacred-scroll-bottom {
  background: linear-gradient(to top, var(--bg, #0A0A0A), transparent);
  height: 60px; pointer-events: none;
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 40;
}

/* 隱藏滾動條 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 呼吸金光 */
.breathing-glow {
  box-shadow: 0 0 20px rgba(212,160,23,0.2);
}

/* 敘事文字陰影（在亮背景上保護可讀性） */
.narrative-drop {
  text-shadow: 0 0 20px rgba(0,0,0,1), 0 0 10px rgba(212,160,23,0.2);
}

/* 元素色文字工具類 */
.text-water { color: var(--water); }
.text-fire  { color: var(--fire); }
.text-earth { color: var(--earth); }
.text-metal { color: var(--metal); }
.text-wood  { color: var(--wood); }
.text-gold  { color: var(--gold-bright); }
.text-purple{ color: var(--purple-bright); }

/* =============================================================
 * Keyframes — 6 核心 + 額外 Stitch 2.0 動畫
 * ============================================================= */

/* 1. breathe — 通用呼吸 */
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: 0.8; }
  50%      { transform: scale(1.05); opacity: 1;   }
}

/* 2. orbFloat — 球體漂浮 */
@keyframes orbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* 3. starTwinkle — 星辰閃爍 */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1;   }
}

/* 4. subtle-float — 微漂浮 */
@keyframes subtle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* 5. pulse-glow — 金色脈動光暈 */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(212,160,23,0.2); }
  50%      { box-shadow: 0 0 30px rgba(212,160,23,0.5); }
}

/* 6. float-nebula — 星雲漂浮（背景用） */
@keyframes float-nebula {
  0%   { opacity: 0.3; transform: scale(1);   }
  50%  { opacity: 0.5; transform: scale(1.1); }
  100% { opacity: 0.3; transform: scale(1);   }
}

/* --- 額外動畫（GY2 特殊場景） --- */
@keyframes loginRitualBreathe {
  0%, 100% { transform: scale(1);    opacity: 0.3; filter: blur(40px); }
  50%      { transform: scale(1.15); opacity: 0.7; filter: blur(20px); }
}
@keyframes woodenButtonBreathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0  0px #D4A017; }
  50%      { transform: scale(1.02); box-shadow: 0 0 15px #F6D365; }
}
@keyframes gold-dust-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-800px); }
}
@keyframes tilt-scale {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}
@keyframes smoke-char {
  0%   { filter: blur(0px); opacity: 0;    transform: translateY(5px); }
  100% { filter: blur(0px); opacity: 0.87; transform: translateY(0);   }
}
@keyframes slide-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%);  }
}
@keyframes breathingGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(196,167,125,0.1), inset 0 0 5px rgba(196,167,125,0.05);
    border-color: rgba(196,167,125,0.15);
  }
  50% {
    box-shadow: 0 0 25px rgba(196,167,125,0.3), inset 0 0 10px rgba(196,167,125,0.2);
    border-color: rgba(196,167,125,0.5);
  }
}

/* =============================================================
 * 結束 — Stitch 2.0 Tokens
 * ============================================================= */