/* base.css - 基础样式 */

/* 字体引入 */
@font-face {
  font-family: 'YHW';
  src: url('/fonts/yhw.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 隐藏页面主滚动条，但保留滚动功能 */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #140b2e;
  color: #f0e6d2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-y: scroll; /* 保留滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* SGA文字样式 */
.sga-text, .subtitle {
  font-family: 'YHW', sans-serif;
}

/* 链接样式 */
a {
  color: #c28b37;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #daa54e;
}

/* 按钮基础样式 */
button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: none;
  border: none;
  transition: all 0.3s ease;
}

button:focus {
  outline: none;
}

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

/* 主容器 */
.main-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #1a1240;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* 颜色定义 */
:root {
  /* 主题颜色 */
  --primary-color: #c28b37;
  --primary-light: #daa54e;
  --primary-dark: #8a6223;
  --text-color: #f0e6d2;
  --text-muted: #aaa;
  --bg-color: #1a1240;
  --bg-dark: #140b2e;
  --bg-light: #311e72;
  
  /* 功能颜色 */
  --success-color: #00C851;
  --error-color: #ff4444;
  --info-color: #0096ff;
  --warning-color: #ffbb33;
  
  /* 金属颜色 */
  --gold-color: linear-gradient(135deg, #FFD700, #DAA520);
  --silver-color: linear-gradient(135deg, #C0C0C0, #A9A9A9);
  --bronze-color: linear-gradient(135deg, #CD7F32, #A0522D);
  
  /* 透明度颜色 */
  --overlay-color: rgba(0, 0, 0, 0.5);
  --transparent-light: rgba(255, 255, 255, 0.1);
  --transparent-dark: rgba(20, 11, 46, 0.8);
  
  /* 边框颜色 */
  --border-color: rgba(194, 139, 55, 0.3);
  --border-color-light: rgba(194, 139, 55, 0.2);
  --border-color-dark: rgba(194, 139, 55, 0.5);
}

/* 自定义滚动条 */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(194, 139, 55, 0.5) rgba(30, 21, 72, 0.3);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(30, 21, 72, 0.3);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(194, 139, 55, 0.5);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(194, 139, 55, 0.7);
}

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

/* 按钮波纹效果 */
.ripple {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 渐变背景文字 */
.gradient-text {
  background: linear-gradient(45deg, var(--primary-color), var(--text-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}