/**
 * ============================================================================
 *  base.css —— 基础层（设计变量 / 重置 / 字体 / 页面底色 / 通用原子样式）
 * ============================================================================
 *  版式框架来自参考网站（辰兴电竞价格表），配色在此基础上保留 dduniao 的视觉识别。
 *
 *  改配色：直接改下面 :root 里的变量，全站生效。
 *  改文案：不要改这里，请去 assets/js/config.js 与 assets/js/data.js。
 * ============================================================================
 */

/* ==========================================================================
   1. 设计变量
   ========================================================================== */
:root {
  /* ---- 版式骨架配色（参考网站原样） ---- */
  --bg: #fdf2f8;
  --card: #ffffff;
  --pink: #ec4899;
  --pink-l: #fbcfe8;
  --purple: #a855f7;
  --purple-l: #e9d5ff;
  --tx: #4a1942;          /* 主文字 */
  --tx2: #9d6b8c;         /* 次要文字 */
  --line: #fce7f3;        /* 描边 */

  /* ---- dduniao 视觉识别色（内容区沿用） ---- */
  --dd-pink: #ff9a9e;
  --dd-pink-soft: #fecfef;
  --dd-purple: #764ba2;
  --dd-gold: #ffd700;
  --gradient-dd-pink: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  --gradient-brand: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
  --gradient-subtab: linear-gradient(135deg, #fda4af, #f472b6);

  /* ---- 圆角 / 阴影 ---- */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 16px rgba(236, 72, 153, .08);
  --shadow-poster: 0 6px 24px rgba(168, 85, 247, .15);
  --shadow-cta: 0 6px 20px rgba(236, 72, 153, .4);
  --shadow-soft: 0 2px 10px rgba(168, 85, 247, .10);

  /* ---- 版心宽度（由下方断点覆盖） ---- */
  --content-max: 100%;
  /* 底部固定按钮栏高度，用于给 body 留安全距离 */
  --cta-space: 104px;
}

/* ==========================================================================
   2. 重置
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  /* 吸顶导航的高度补偿：锚点跳转时不被导航挡住 */
  scroll-padding-top: 70px;
}

body {
  /* 页面底色（可用 config.js 的 SITE_CONFIG.background 覆盖） */
  background: var(--page-bg, linear-gradient(180deg, #fce7f3 0%, #fdf2f8 30%, #f3e8ff 100%));
  background-attachment: fixed;
  color: var(--tx);
  font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  /* 给固定在底部的两个按钮留出空间 */
  padding-bottom: var(--cta-space);
  overflow-x: hidden;
}

/* 手写风格字体：标题、按钮等活泼元素专用（加载失败时自动回落到系统字体） */
.fun {
  font-family: "ZCOOL KuaiLe", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* 隐藏横向滚动条（顶部标签栏用） */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 仅供屏幕阅读器 */
.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;
}

/* ==========================================================================
   3. 版心容器
   ========================================================================== */
.shell {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ==========================================================================
   4. 通用动画
   ========================================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 进入动画工具类 */
.anim-up  { animation: fadeUp .4s ease both; }
.anim-pop { animation: popIn .28s ease both; }

/* 无障碍：系统开启「减少动态效果」时关闭动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   5. 响应式：版心宽度
   ========================================================================== */
/* 移动端（<768px）：满宽，保持参考网站的原始版式 */
@media (max-width: 767px) {
  :root {
    --content-max: 100%;
    --cta-space: 104px;
  }
}

/* 平板（768–1199px）：居中收窄，维持参考网站的纵向节奏 */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --content-max: 720px;
    --cta-space: 112px;
  }
}

/* 桌面（≥1200px） */
@media (min-width: 1200px) {
  :root {
    --content-max: 880px;
    --cta-space: 116px;
  }
}