/* ============================================================================
 * LinguEchoes UI Framework — v0.3 Round 1 仁川篇
 * 依據 docs/style/STYLE_GUIDE.md（C4 工作版 v0.3-r1-draft）
 *
 * 原則：
 *   - 所有色值透過 CSS 變數引用，不寫死 hex
 *   - 深色模式為預設；淺色模式由 prefers-color-scheme: light 覆寫
 *   - Glassmorphism 雙軌 class（.glass-*），不破壞 v0.2.2 既有樣式
 *   - Pixel Art 僅用於 sprite/圖像（.pixel-img），不套在學習文字
 *
 * 載入方式（index.html）：
 *   <link rel="stylesheet" href="ui-framework.css">
 *   需在 <style> 區塊之前載入，讓既有樣式具備 cascade 優先權（保留 v0.2.2 行為）
 * ========================================================================== */

/* ─── §2 色票（深色模式預設） ───────────────────────────────────────────── */
:root {
  /* 藍系 — 我方／護盾／子音 */
  --blue-500: #3b82f6;
  --blue-300: #60a5fa;
  --blue-100: #93c5fd;

  /* 紅系 — 敵方／攻擊／危險 */
  --red-500: #ef4444;
  --red-300: #f87171;
  --red-100: #fca5a5;

  /* 仁川城市色 */
  --incheon-sea:   #083b5c;
  --incheon-night: #1e1b4b;
  --incheon-port:  #422006;

  /* 背景層 */
  --bg-0: #050510;
  --bg-1: #0a0a1a;
  --bg-2: #0d0d1a;
  --bg-3: #0f172a;

  /* 強調色 */
  --accent-purple:  #a855f7;
  --accent-gold:    #fbbf24;
  --accent-emerald: #10b981;

  /* 輔助色（非 13 主色，保留一致性） */
  --cons-cyan: #06b6d4;
  --vow-pink:  #ec4899;

  /* 文字 */
  --text-primary: #e8e0ff;
  --text-muted:   #9ca3af;
  --text-dim:     #6b7280;

  /* Glass 基礎參數（深色） */
  --glass-bg:     rgba(255, 255, 255, 0.08);
  --glass-bg-str: rgba(255, 255, 255, 0.14);   /* 強調面板 */
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --glass-blur:   12px;

  /* 子音/母音卡專屬 Glass 色（半透明 tint） */
  --glass-cons-tint: rgba(6, 182, 212, 0.14);
  --glass-vow-tint:  rgba(236, 72, 153, 0.14);

  /* §3 節距／圓角 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
}

/* ─── 淺色模式（備用） ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    /* 背景層翻轉（靠近白） */
    --bg-0: #f4f4fb;
    --bg-1: #ebebf5;
    --bg-2: #dcdce8;
    --bg-3: #c9c9da;

    /* 文字翻轉 */
    --text-primary: #1a1a2e;
    --text-muted:   #4b5563;
    --text-dim:     #6b7280;

    /* Glass 底改用白霧感 */
    --glass-bg:     rgba(255, 255, 255, 0.55);
    --glass-bg-str: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(30, 27, 75, 0.10);
    --glass-shadow: 0 8px 24px rgba(30, 27, 75, 0.12);

    /* 藍紅在白底上提高飽和 */
    --blue-500: #2563eb;
    --red-500:  #dc2626;
  }
}

/* ─── §4 Glassmorphism 基礎 class ───────────────────────────────────────── */

.glass-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
}

/* 強調型面板（彈出視窗、重要提示） */
.glass-panel--strong {
  background: var(--glass-bg-str);
  border-color: rgba(255, 255, 255, 0.18);
}

/* 牌背卡片基底 */
.glass-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* 子音卡變體（青綠 tint） */
.glass-card--consonant {
  background: var(--glass-cons-tint);
  border-color: var(--cons-cyan);
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.22);
}

/* 母音卡變體（粉紅 tint） */
.glass-card--vowel {
  background: var(--glass-vow-tint);
  border-color: var(--vow-pink);
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.22);
}

/* 按鈕 */
.glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 22px;
  min-height: 44px;
  background: var(--glass-bg-str);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}
.glass-button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.35);
}
.glass-button:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}
.glass-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* 按鈕強調（主 CTA：紫色光暈） */
.glass-button--primary {
  border-color: var(--accent-purple);
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.45);
}

/* Tooltip / 預覽框 */
.glass-tooltip {
  background: var(--glass-bg-str);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1.5px solid var(--accent-purple);
  border-radius: var(--r-md);
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.55);
  color: var(--text-primary);
  padding: var(--sp-3);
}

/* HP 條（Glass 容器版） */
.glass-hp-bar {
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  position: relative;
}
.glass-hp-bar > .hp-fill {
  height: 100%;
  transition: width 0.35s ease;
}
.glass-hp-bar > .hp-fill--enemy  { background: linear-gradient(90deg, var(--red-500),  var(--red-300)); }
.glass-hp-bar > .hp-fill--player { background: linear-gradient(90deg, var(--accent-emerald), #34d399); }
.glass-hp-bar > .hp-fill--shield { background: linear-gradient(90deg, var(--blue-500), var(--blue-300)); }

/* 能量條（水平顆粒型） */
.glass-energy-bar {
  display: inline-flex;
  gap: 3px;
  padding: 3px 6px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
}
.glass-energy-bar > .eb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 6px var(--accent-gold),
              0 0 12px rgba(251, 191, 36, 0.5);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.glass-energy-bar > .eb-dot.off {
  opacity: 0.25;
  filter: grayscale(1) brightness(0.6);
  box-shadow: none;
}

/* ─── SVG icon mask-image 工具 class ────────────────────────────────────── */
/* 用法：
 *   <span class="icon-mask" style="--icon-url:url('assets/icons/sword.svg');color:var(--red-500)"></span>
 *   圖標顏色透過 color/currentColor 或 background 控制
 */
.icon-mask {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.icon-mask--lg { width: 1.5em; height: 1.5em; }
.icon-mask--xl { width: 2em;   height: 2em;   }

/* ─── §1 Pixel Art 圖像 class ──────────────────────────────────────────── */
/* 用法：<img class="pixel-img" src="assets/sprites/echo.png">
 * 規則：此 class 僅套在 <img>/<canvas>/sprite 容器，不得套在韓文/中文文字節點
 */
.pixel-img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* Pixel sprite 容器（若需固定尺寸或置中） */
.pixel-sprite {
  display: inline-block;
  image-rendering: pixelated;
  line-height: 0;
}

/* ─── §5 字型規則 ────────────────────────────────────────────────────── */
/* 標準字型：韓文音節 / 中文教學 / 數值一律用 Pretendard + Noto Sans
 * 像素 sprite 絕不套字型（以 img 呈現，不會走到這裡）
 */
.font-standard {
  font-family: 'Pretendard Variable', 'Pretendard',
               'Noto Sans KR', 'Noto Sans TC',
               'Microsoft JhengHei', 'Segoe UI', sans-serif;
}

/* 數值對齊（HP/傷害/XP/₩）：等寬數字 */
.font-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 韓文音節強調（合成預覽等） */
.font-kr-emphasis {
  font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', sans-serif;
  font-weight: 900;
  letter-spacing: -0.5px;
}

/* ─── 可及性：降低動態偏好 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .glass-button,
  .glass-card,
  .glass-hp-bar > .hp-fill {
    transition: none !important;
  }
}
