/* 基础样式文件 - Base.css */
/* 遵循DRY原则，定义全局CSS变量和基础样式 */

/* CSS变量系统 - 游戏主题色彩 */
:root {
    /* 主要颜色 - 霓虹灯效果 */
    --primary-red: #ff2d55;        /* 霓虹红 - 主要按钮和强调 */
    --electric-blue: #007aff;      /* 电光蓝 - 次要按钮和链接 */
    --neon-purple: #bf5af2;        /* 霓虹紫 - 装饰和高亮 */
    --neon-green: #30d158;         /* 霓虹绿 - 成功状态 */
    --neon-orange: #ff9f0a;        /* 霓虹橙 - 警告状态 */
    
    /* 背景颜色 */
    --dark-bg: #0a0a0a;            /* 主背景 - 深黑色 */
    --card-bg: #1a1a1a;            /* 卡片背景 - 深灰色 */
    --section-bg: #111111;         /* 区域背景 */
    --overlay-bg: rgba(0, 0, 0, 0.8); /* 遮罩背景 */
    
    /* 文字颜色 */
    --text-primary: #ffffff;        /* 主要文字 - 白色 */
    --text-secondary: #a0a0a0;     /* 次要文字 - 浅灰色 */
    --text-muted: #666666;         /* 静音文字 - 深灰色 */
    --text-accent: var(--primary-red); /* 强调文字 */
    
    /* 边框和分割线 */
    --border-color: #333333;       /* 边框颜色 */
    --border-accent: var(--primary-red); /* 强调边框 */
    --divider-color: #222222;      /* 分割线颜色 */
    
    /* 阴影效果 */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-neon: 0 0 20px var(--primary-red);
    --shadow-glow: 0 0 30px rgba(255, 45, 85, 0.3);
    
    /* 尺寸和间距 */
    --spacing-xs: 0.25rem;         /* 4px */
    --spacing-sm: 0.5rem;          /* 8px */
    --spacing-md: 1rem;            /* 16px */
    --spacing-lg: 1.5rem;          /* 24px */
    --spacing-xl: 2rem;            /* 32px */
    --spacing-2xl: 3rem;           /* 48px */
    --spacing-3xl: 4rem;           /* 64px */
    
    /* 边框半径 */
    --radius-sm: 0.25rem;          /* 4px */
    --radius-md: 0.5rem;           /* 8px */
    --radius-lg: 0.75rem;          /* 12px */
    --radius-xl: 1rem;             /* 16px */
    --radius-full: 9999px;         /* 完全圆角 */
    
    /* 过渡动画 */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.3s ease-out;
    --transition-slow: 0.5s ease-out;
    
    /* 字体大小 */
    --text-xs: 0.75rem;            /* 12px */
    --text-sm: 0.875rem;           /* 14px */
    --text-base: 1rem;             /* 16px */
    --text-lg: 1.125rem;           /* 18px */
    --text-xl: 1.25rem;            /* 20px */
    --text-2xl: 1.5rem;            /* 24px */
    --text-3xl: 1.875rem;          /* 30px */
    --text-4xl: 2.25rem;           /* 36px */
    --text-5xl: 3rem;              /* 48px */
    --text-6xl: 3.75rem;           /* 60px */
    
    /* 容器最大宽度 */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
}

/* CSS重置 - 现代化重置样式 */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    line-height: 1.6;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 链接样式 */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-normal);
}

a:hover {
    color: var(--primary-red);
}

a:focus {
    outline: 2px solid var(--primary-red);
    outline-offset: 2px;
}

/* 图片和媒体 */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

img {
    border-style: none;
}

/* 列表 */
ul, ol {
    list-style: none;
}

/* 按钮 */
button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: inherit;
}

/* 表单元素 */
input, textarea, select {
    font: inherit;
    color: inherit;
}

/* 标题 */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

/* 段落 */
p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

/* 强调文本 */
strong, b {
    font-weight: 700;
    color: var(--text-primary);
}

/* 代码 */
code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background-color: var(--card-bg);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

/* 预格式化文本 */
pre {
    background-color: var(--card-bg);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

pre code {
    background: none;
    padding: 0;
}

/* 水平分割线 */
hr {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    margin: var(--spacing-xl) 0;
}

/* 选择文本样式 */
::selection {
    background-color: var(--primary-red);
    color: var(--text-primary);
}

::-moz-selection {
    background-color: var(--primary-red);
    color: var(--text-primary);
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--card-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-red);
}

/* Firefox滚动条 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--card-bg);
}

/* 焦点可见性 */
.focus-visible {
    outline: 2px solid var(--primary-red);
    outline-offset: 2px;
}

/* 屏幕阅读器专用内容 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 禁用状态 */
.disabled,
[disabled] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* 隐藏元素 */
.hidden {
    display: none !important;
}

/* 视觉隐藏 */
.invisible {
    visibility: hidden;
}

/* 透明度工具类 */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* 过渡工具类 */
.transition-fast { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow { transition: all var(--transition-slow); }

/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 字体粗细 */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* 响应式隐藏工具类 */
@media (max-width: 767px) {
    .hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hidden-desktop { display: none !important; }
}

/* 打印样式 */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a, a:visited {
        text-decoration: underline;
    }
    
    .no-print {
        display: none !important;
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}