/* 星圖數學 — 色彩 tokens
   深藍夜空星圖 RPG。所有顏色僅此定義；元件一律引用變數。 */
:root {
  /* ── 基底色階 ───────────────────────── */
  --night-900: #0D1320;  /* 最深夜空（漸層底） */
  --night-800: #141C2B;  /* 主背景：夜空 */
  --night-700: #1E2A3C;  /* 卡片底 */
  --night-600: #2A3A52;  /* 浮起／按壓面 */

  --gold-300: #F9DDAE;
  --gold-400: #F5CB86;
  --gold-500: #F0B860;  /* 點亮／成就 */
  --gold-600: #D49B3E;

  --teal-400: #62D2BE;
  --teal-500: #3DBFA8;  /* 通過／正確 */
  --teal-600: #2E9B88;

  --red-400: #EE7355;
  --red-500: #E04F2E;   /* 斷點／錯誤 */
  --red-600: #B83D21;

  --mist-300: #C6D2E2;
  --mist-400: #AAB9CD;
  --mist-500: #8FA3BC;  /* 鎖定／次要文字 */
  --mist-600: #5E7188;
  --mist-700: #3C4B61;

  /* ── 語意別名 ───────────────────────── */
  --bg-sky: var(--night-800);
  --surface-card: var(--night-700);
  --surface-elevated: var(--night-600);
  --surface-sheet: #18223300;

  --text-primary: #EFF4FB;
  --text-secondary: var(--mist-500);
  --text-disabled: var(--mist-600);
  --text-on-gold: #1C1406;
  --text-on-teal: #06201B;

  --state-lit: var(--gold-500);      /* 已點亮：驗證過的能力 */
  --state-pass: var(--teal-500);     /* 通過／答對 */
  --state-break: var(--red-500);     /* 斷點／答錯 */
  --state-locked: var(--mist-600);   /* 鎖定 */
  --state-ready: var(--mist-400);    /* 可挑戰 */

  --border-card: rgba(143, 163, 188, 0.16);
  --border-strong: rgba(143, 163, 188, 0.34);
}
/* 星圖數學 — 字體 tokens
   Noto Sans TC：標題 700/900、內文 400。
   數字、技能編號、分數一律等寬字 IBM Plex Mono。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root {
  --font-sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* 字級（390px 行動視口） */
  --text-display: 28px;   /* 畫面主標 900 */
  --text-title: 22px;     /* 區塊標題 700 */
  --text-subtitle: 17px;  /* 卡片標題 700 */
  --text-body: 16px;      /* 內文 400，行高 1.6 */
  --text-caption: 13px;   /* 輔助說明 */
  --text-micro: 11px;     /* 徽章、標籤 */

  --num-display: 40px;    /* 大數字（mono 700） */
  --num-body: 18px;       /* 行內數字（mono 600） */

  --leading-tight: 1.25;
  --leading-body: 1.6;

  --tracking-wide: 0.08em; /* 全大寫/標籤用 */
}
/* 星圖數學 — 間距、圓角、尺寸 tokens（4px 基準） */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* 圓角 */
  --radius-card: 16px;     /* 大卡片 */
  --radius-control: 14px;  /* 按鈕、選項 */
  --radius-chip: 999px;    /* 徽章、藥丸 */

  /* 尺寸（拇指友善） */
  --h-cta: 56px;          /* 主 CTA */
  --h-control: 52px;      /* 一般按鈕／選項最小高 */
  --hit-min: 44px;        /* 最小點擊範圍 */
  --node-size: 64px;      /* 技能節點直徑 */
  --node-size-lg: 120px;  /* 點亮動畫主角 */

  /* 版面 */
  --page-x: 20px;                                /* 頁面左右留白 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --viewport-w: 390px;
  --viewport-h: 844px;
}
/* 星圖數學 — 發光、動效 tokens
   原則：只在「點亮技能」做大動畫；其餘克制（呼吸光、淡入）。 */
:root {
  /* 2px 發光描邊 = border + 對應 glow */
  --glow-gold: 0 0 10px rgba(240, 184, 96, 0.45), 0 0 28px rgba(240, 184, 96, 0.18);
  --glow-gold-strong: 0 0 16px rgba(240, 184, 96, 0.65), 0 0 48px rgba(240, 184, 96, 0.30);
  --glow-teal: 0 0 10px rgba(61, 191, 168, 0.45), 0 0 28px rgba(61, 191, 168, 0.16);
  --glow-red: 0 0 10px rgba(224, 79, 46, 0.40), 0 0 24px rgba(224, 79, 46, 0.15);
  --glow-mist: 0 0 8px rgba(143, 163, 188, 0.30), 0 0 20px rgba(143, 163, 188, 0.12);

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.5);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-lightup: 1200ms; /* @kind other */
}

/* 可挑戰節點：緩慢呼吸光（克制、不催促） */
@keyframes sm-breath {
  0%, 100% { box-shadow: 0 0 6px rgba(143, 163, 188, 0.22), 0 0 16px rgba(143, 163, 188, 0.08); }
  50%      { box-shadow: 0 0 12px rgba(143, 163, 188, 0.42), 0 0 28px rgba(143, 163, 188, 0.16); }
}

/* 點亮：光暈擴散 */
@keyframes sm-lightup-ring {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* 點亮：粒子飛散（以 --angle / --dist 自訂方向距離） */
@keyframes sm-particle {
  0%   { transform: rotate(var(--angle, 0deg)) translateY(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--angle, 0deg)) translateY(var(--dist, -90px)) scale(0.2); opacity: 0; }
}

/* 點亮主角：彈出 */
@keyframes sm-lightup-pop {
  0%   { transform: scale(0.6); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* 一般進場：克制的淡入上移 */
@keyframes sm-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 星點微閃（背景氛圍，極輕） */
@keyframes sm-twinkle {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* 星圖數學 — 基底樣式與夜空背景 */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--bg-sky);
  -webkit-font-smoothing: antialiased;
}

/* 夜空星圖背景：淡金星雲光暈 + 細微星點 */
.sm-sky {
  background-color: var(--night-800);
  background-image:
    /* 星雲光暈 */
    radial-gradient(ellipse 70% 42% at 18% 8%, rgba(240, 184, 96, 0.07), transparent 70%),
    radial-gradient(ellipse 60% 38% at 85% 72%, rgba(61, 191, 168, 0.05), transparent 70%),
    radial-gradient(ellipse 90% 55% at 50% 110%, rgba(13, 19, 32, 0.9), transparent 70%),
    /* 細微星點（兩層、錯位平鋪） */
    radial-gradient(1px 1px at 22px 34px, rgba(239, 244, 251, 0.55), transparent 1.5px),
    radial-gradient(1px 1px at 88px 12px, rgba(239, 244, 251, 0.30), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 140px 76px, rgba(240, 184, 96, 0.40), transparent 2px),
    radial-gradient(1px 1px at 56px 110px, rgba(239, 244, 251, 0.40), transparent 1.5px),
    radial-gradient(1px 1px at 178px 140px, rgba(239, 244, 251, 0.25), transparent 1.5px),
    radial-gradient(1px 1px at 112px 168px, rgba(143, 163, 188, 0.35), transparent 1.5px);
  background-size:
    100% 100%, 100% 100%, 100% 100%,
    200px 180px, 200px 180px, 200px 180px, 200px 180px, 200px 180px, 200px 180px;
}

/* 按壓回饋：縮小（行動端通用） */
.sm-press { transition: transform var(--duration-fast) var(--ease-out); }
.sm-press:active { transform: scale(0.97); }

/* 可挑戰節點呼吸光 */
.sm-breathing { animation: sm-breath 2.8s ease-in-out infinite; }

/* 克制進場 */
.sm-fade-up { animation: sm-fade-up var(--duration-base) var(--ease-out) both; }