/**
 * ============================================
 * wordit.art 游戏设计系统 - 王者荣耀风格
 * 版本: v3.1 - Honor of Kings Style
 * 更新: 2026-04-08
 * ============================================
 * 
 * 设计特点：
 * - 金色传说配色
 * - 金属质感
 * - 华丽但不花哨
 * - 史诗感
 * - 无emoji，纯图标
 */

/* ============================================
   色彩系统 - 王者史诗配色
   ============================================ */

:root {
  /* 王者金 - 主色 */
  --king-gold: #FFD700;
  --king-gold-light: #FFEC8B;
  --king-gold-dark: #B8860B;
  --king-gold-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  
  /* 史诗紫 */
  --epic-purple: #9D4EDD;
  --epic-purple-light: #C77DFF;
  --epic-purple-dark: #5A189A;
  --epic-gradient: linear-gradient(135deg, #9D4EDD 0%, #7B2CBF 100%);
  
  /* 传说红 */
  --legend-red: #E63946;
  --legend-red-dark: #9D0208;
  
  /* 荣耀蓝 */
  --glory-blue: #4361EE;
  --glory-blue-dark: #3A0CA3;
  
  /* 神秘黑 */
  --mystery-black: #0D1B2A;
  --mystery-black-light: #1B263B;
  
  /* 背景色 */
  --bg-primary: #0D1B2A;       /* 深蓝黑 */
  --bg-secondary: #1B263B;     /* 次级背景 */
  --bg-card: rgba(27, 38, 59, 0.9);  /* 卡片背景 */
  --bg-overlay: rgba(13, 27, 42, 0.95);
  
  /* 文字色 */
  --text-primary: #FFD700;     /* 金色主文字 */
  --text-secondary: #90E0EF;   /* 青色次级 */
  --text-normal: #E0E1DD;      /* 普通白色 */
  --text-muted: #778DA9;       /* 弱化灰色 */
  
  /* 边框/装饰 */
  --border-gold: 2px solid rgba(255, 215, 0, 0.5);
  --border-epic: 2px solid rgba(157, 78, 221, 0.5);
  
  /* ============================================
     阴影系统 - 金属光泽
     ============================================ */
  
  /* 金色发光 */
  --shadow-gold: 
    0 0 20px rgba(255, 215, 0, 0.3),
    0 0 40px rgba(255, 215, 0, 0.1);
  
  --shadow-gold-strong: 
    0 0 30px rgba(255, 215, 0, 0.5),
    0 0 60px rgba(255, 215, 0, 0.2);
  
  /* 紫色发光 */
  --shadow-purple: 
    0 0 20px rgba(157, 78, 221, 0.3),
    0 0 40px rgba(157, 78, 221, 0.1);
  
  /* 立体阴影 */
  --shadow-3d: 
    0 4px 0 rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.4);
  
  --shadow-3d-strong: 
    0 6px 0 rgba(0, 0, 0, 0.5),
    0 12px 24px rgba(0, 0, 0, 0.5);
  
  /* 卡片阴影 */
  --shadow-card: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 215, 0, 0.1);
  
  /* ============================================
     圆角系统
     ============================================ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  
  /* ============================================
     间距系统
     ============================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  
  /* ============================================
     字体系统 - 王者风格字体
     ============================================ */
  --font-display: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-title: 'Impact', 'Arial Black', sans-serif;
  --font-body: 'PingFang SC', -apple-system, sans-serif;
  --font-number: 'DIN Alternate', 'Impact', sans-serif;
  
  /* 字体大小 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 56px;
  
  /* ============================================
     动画时序
     ============================================ */
  --ease-epic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-epic: 600ms;
}

/* ============================================
   工具类
   ============================================ */

/* 字体 */
.font-king { font-family: var(--font-title); font-weight: 900; }
.font-body { font-family: var(--font-body); }
.font-number { font-family: var(--font-number); }

/* 金色文字 */
.text-gold {
  background: var(--king-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
}

/* 紫色文字 */
.text-epic {
  background: var(--epic-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 边框发光 */
.border-gold {
  border: 2px solid rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2), inset 0 0 20px rgba(255, 215, 0, 0.05);
}

/* 玻璃效果 */
.glass-king {
  background: rgba(27, 38, 59, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

/* 金属质感背景 */
.bg-metal {
  background: linear-gradient(135deg, 
    #1B263B 0%, 
    #2D3A4A 25%, 
    #1B263B 50%, 
    #0D1B2A 75%, 
    #1B263B 100%
  );
  background-size: 200% 200%;
}