/**
 * K4电竞 - 基础样式层（底盘）
 * 职责：设计 tokens、通用组件、装饰模块基类
 * 禁止：页面定位、背景图、Hero/Contact 特定样式
 */

/* ===== 设计 Tokens ===== */
:root {
  /* 颜色系统 */
  --bg: #05070a;
  --panel: rgba(255,255,255,.045);
  --line: rgba(255,255,255,.09);
  --text: #e5e7eb;
  --muted: #9ca3af;
  --cyan: #22d3ee;
  --pink: #fb7185;
  
  /* Z-index 层级系统 */
  --z-deco: 0;
  --z-content: 1;
  --z-header: 40;
  --z-loader: 9999;
  
  /* 圆角系统 */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Glow 系统 */
  --glow-sm: 0 0 10px rgba(34,211,238,.1);
  --glow-md: 0 0 22px rgba(34,211,238,.1), 0 0 34px rgba(251,113,133,.06);
  --glow-lg: 0 0 30px rgba(34,211,238,.2), 0 0 50px rgba(251,113,133,.1);
  
  /* Premium Pass: 战术HUD质感 tokens */
  /* 默认档位（更狠、更高级） */
  --hero-overlay-dark: rgba(0, 0, 0, 0.56);
  --hero-cyan-bloom: rgba(57, 213, 255, 0.09);
  --glow-strength: 0.42;
  
  /* A档位：更狠更暗（注释掉，需要时启用）
  --hero-overlay-dark: rgba(0, 0, 0, 0.62);
  --hero-cyan-bloom: rgba(57, 213, 255, 0.07);
  --glow-strength: 0.34;
  */
  
  /* B档位：更亮更清（注释掉，需要时启用）
  --hero-overlay-dark: rgba(0, 0, 0, 0.51);
  --hero-cyan-bloom: rgba(57, 213, 255, 0.11);
  --glow-strength: 0.47;
  */
  --glow-soft: rgba(57, 213, 255, 0.08);
  --glow-edge: rgba(57, 213, 255, 0.15);
  --border-ice: rgba(57, 213, 255, 0.12);
  
  /* 间距系统 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Header 高度（供页面层使用） */
  --header-h: 72px;
  
  /* ===== 背景系统 Tokens（从跑刀页提取） ===== */
  /* 背景基底色（偏冷黑，不是纯黑） */
  --bg-base: #050607;
  
  /* Overlay 遮罩参数 */
  --bg-overlay-opacity-pc: 0.4;        /* PC端 overlay 透明度 */
  --bg-overlay-opacity-tablet: 0.5;    /* 平板端 overlay 透明度 */
  --bg-overlay-opacity-mobile: 0.6;    /* 移动端 overlay 透明度 */
  --bg-overlay-opacity-small: 0.7;     /* 超小屏 overlay 透明度 */
  
  /* Overlay 渐变颜色（偏冷黑，不是纯黑） */
  --bg-overlay-color-top: rgba(5, 6, 7, 0.2);      /* 顶部遮罩色（跑刀页标准） */
  --bg-overlay-color-bottom: rgba(5, 6, 7, 0.3);   /* 底部遮罩色（跑刀页标准） */
  
  /* 护航页专用 overlay（降低15-25%，让背景更可见） */
  --bg-overlay-color-top-huhang: rgba(5, 6, 7, 0.15);    /* 护航页顶部遮罩色（降低25%） */
  --bg-overlay-color-bottom-huhang: rgba(5, 6, 7, 0.22);  /* 护航页底部遮罩色（降低约27%） */
  
  /* 背景图滤镜参数 */
  --bg-image-blur: 0px;                 /* 背景图模糊度 */
  --bg-image-brightness-pc: 1.0;        /* PC端亮度 */
  --bg-image-brightness-tablet: 0.9;   /* 平板端亮度 */
  --bg-image-brightness-mobile: 0.85;  /* 移动端亮度 */
  --bg-image-brightness-small: 0.8;     /* 超小屏亮度 */
  --bg-image-contrast: 1.1;             /* 对比度 */
  
  /* 内容卡片背景（前景层） */
  --content-panel-bg: rgba(5, 7, 10, 0.85);
  --content-panel-blur: blur(12px) saturate(130%);
  --content-sub-panel-bg: rgba(5, 7, 10, 0.75);
  --content-sub-panel-blur: blur(8px) saturate(120%);
}

/* ===== 基础重置 ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  color: var(--text);
  overflow-x: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ===== 字体工具类 ===== */
.font-orbitron {
  font-family: 'Orbitron', system-ui, sans-serif;
}

/* ===== 通用组件：Glass 玻璃拟态 ===== */
.glass {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.glass:hover {
  border-color: rgba(34,211,238,.25);
  box-shadow: var(--glow-md);
}

/* ===== 通用组件：K4 Card ===== */
.k4-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: all 0.3s ease;
}

.k4-card--clickable {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.k4-card--clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.3);
  box-shadow: var(--glow-lg);
}

/* ===== 通用组件：K4 Button ===== */
.k4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.k4-btn:hover {
  border-color: var(--cyan);
  box-shadow: var(--glow-md);
  transform: translateY(-1px);
}

/* ===== 通用组件：Section Title ===== */
.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--spacing-lg);
}

/* ===== 通用组件：Link Underline ===== */
.link-underline {
  text-decoration: none;
  background: linear-gradient(to right, rgba(34,211,238,.55), rgba(251,113,133,.45));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease;
}

.link-underline:hover {
  background-size: 100% 2px;
}

/* ===== 通用组件：Hot Badge ===== */
.hot-badge {
  display: inline-flex;
  align-items: center;
  padding: .12rem .5rem;
  border-radius: var(--radius-full);
  font-size: .72rem;
  line-height: 1rem;
  background: rgba(251,113,133,.12);
  border: 1px solid rgba(251,113,133,.22);
  color: #fda4af;
  margin-left: .45rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* ===== 通用组件：Hairline ===== */
.hairline {
  height: 1px;
  background: var(--line);
}

/* ===== 装饰模块基类（.deco） ===== */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: var(--z-deco);
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.55));
}

.deco img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ===== Header 基础样式 ===== */
header {
  background: rgba(5,7,10,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
}