/* =====================================================================
 * 《大周列国志》落地页样式
 * 主题：浅色为默认（:root），html[data-theme="dark"] 时切换为深色
 * ===================================================================== */

:root {
  color-scheme: light;
  --bg: #f6f2e8;
  --bg-top: #fbf8f0;
  --glow: rgba(176, 124, 38, .14);
  --card: #ffffff;
  --card2: #f4efe1;
  --txt: #33302a;
  --muted: #857d66;
  --line: rgba(176, 124, 38, .26);
  --gold: #b07c26;
  --gold-deep: #8e6318;
  --h1-from: #8a6210;
  --h1-to: #c99b3f;
  --btn-from: #f0c96a;
  --btn-to: #d49a2a;
  --btn-txt: #2a1f08;
  --shadow: 0 6px 22px rgba(96, 74, 22, .14);
  --topbar-bg: rgba(246, 242, 232, .88);
  --bar-bg: rgba(250, 247, 240, .96);
  --footer-bg: rgba(236, 229, 211, .65);
  --footer-txt: #8a8266;
  --footer-link: #6f6750;
  --row-line: rgba(51, 48, 42, .08);
  --pill-txt: #1e7d4d;
  --pill-bg: rgba(30, 125, 77, .1);
  --pill-line: rgba(30, 125, 77, .3);
  --theme-color: #f6f2e8;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101522;
  --bg-top: #0d1220;
  --glow: rgba(120, 90, 35, .22);
  --card: #1a2236;
  --card2: #1f2941;
  --txt: #e9ecf4;
  --muted: #98a2b8;
  --line: rgba(232, 194, 115, .16);
  --gold: #e8c273;
  --gold-deep: #d4a24e;
  --h1-from: #fdf3d8;
  --h1-to: #e8c273;
  --btn-from: #f4d78a;
  --btn-to: #d4a24e;
  --btn-txt: #2a1f08;
  --shadow: 0 8px 28px rgba(0, 0, 0, .5);
  --topbar-bg: rgba(13, 18, 32, .85);
  --bar-bg: rgba(13, 18, 32, .96);
  --footer-bg: rgba(10, 14, 24, .6);
  --footer-txt: #7c869c;
  --footer-link: #9aa6bd;
  --row-line: rgba(255, 255, 255, .05);
  --pill-txt: #79e0a8;
  --pill-bg: rgba(121, 224, 168, .1);
  --pill-line: rgba(121, 224, 168, .25);
  --theme-color: #101522;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 15px/1.75 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(60% 40% at 50% 0, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 40%);
  color: var(--txt);
  word-break: break-word;
  transition: background .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* ---------- 顶部 ---------- */
.topbar {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 20;
}
.topbar .wrap { display: flex; align-items: center; gap: 10px; }
.topbar img { width: 32px; height: 32px; border-radius: 8px; }
.topbar b { font-size: 16px; letter-spacing: 1px; }
.topbar .mini-dl {
  margin-left: auto;
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: var(--btn-txt); font-weight: 700; font-size: 14px;
  padding: 6px 16px; border-radius: 99px;
}
.theme-toggle {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card);
  color: var(--gold); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, transform .2s;
  flex: 0 0 auto;
}
.theme-toggle:hover { border-color: var(--gold); transform: rotate(15deg); }
.theme-toggle .ico-moon { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: inline; }

/* ---------- 首屏 ---------- */
.hero { padding: 36px 0 26px; text-align: center; }
.hero-icon {
  width: 96px; height: 96px; border-radius: 22px;
  margin: 0 auto 14px;
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
}
h1 {
  font-size: 30px; letter-spacing: 6px; font-weight: 700;
  background: linear-gradient(180deg, var(--h1-from), var(--h1-to) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--muted); margin-top: 6px; font-size: 14px; letter-spacing: 2px; }
.hero-tags { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.tag {
  font-size: 12px; color: var(--gold);
  border: 1px solid var(--line); padding: 2px 10px; border-radius: 99px;
  background: rgba(176, 124, 38, .06);
}
.dl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: var(--btn-txt); font-size: 18px; font-weight: 700;
  padding: 13px 52px; border-radius: 99px;
  box-shadow: 0 6px 22px rgba(212, 162, 78, .35);
  transition: transform .15s;
}
.dl-btn:hover { transform: translateY(-2px); }
.dl-note { margin-top: 10px; color: var(--muted); font-size: 12.5px; }
.dl-note em { font-style: normal; color: var(--gold); }

/* ---------- 数据条 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 0 26px; }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 4px; text-align: center;
}
.stat i { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
.stat b { color: var(--gold); font-size: 14px; }

/* ---------- 区块 ---------- */
section { padding: 26px 0; }
h2 {
  font-size: 20px; letter-spacing: 2px; margin-bottom: 14px;
  padding-left: 12px; position: relative; font-weight: 600;
}
h2::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px;
  border-radius: 2px;
  background: linear-gradient(var(--gold), var(--gold-deep));
}

/* 视频（横版 16:9，比竖版放宽） */
.video-box {
  max-width: 640px; margin: 0 auto; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
video { width: 100%; display: block; background: #000; }

/* 截图 */
.shots {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.shots img {
  height: 400px; width: auto; border-radius: 10px;
  scroll-snap-align: center; border: 1px solid var(--line); flex: 0 0 auto;
}
.shots::-webkit-scrollbar { height: 6px; }
.shots::-webkit-scrollbar-thumb { background: var(--card2); border-radius: 3px; }

/* 介绍 */
.intro p { margin-bottom: 12px; text-align: justify; color: var(--txt); opacity: .92; }

/* 特色 */
.feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.feat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; transition: border-color .2s;
}
.feat:hover { border-color: var(--gold); }
.feat b { display: block; color: var(--gold); font-size: 15px; margin-bottom: 4px; }
.feat span { color: var(--muted); font-size: 13px; line-height: 1.7; }

/* 安装指南 */
.guide { counter-reset: step; }
.guide li {
  list-style: none; position: relative; padding: 0 0 14px 44px; color: var(--txt); opacity: .92;
}
.guide li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: var(--btn-txt); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.guide li::after {
  content: ""; position: absolute; left: 13px; top: 33px; bottom: 2px; width: 2px;
  background: var(--line);
}
.guide li:last-child::after { display: none; }

/* 开服表 */
.events {
  width: 100%; border-collapse: collapse; background: var(--card);
  border-radius: 12px; overflow: hidden; font-size: 14px;
}
.events caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: 12px; padding-top: 8px; }
.events th, .events td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--row-line); }
.events th { color: var(--gold); font-weight: 600; background: rgba(176, 124, 38, .06); }
.events tr:last-child td { border-bottom: none; }
.pill {
  display: inline-block; font-size: 12px; color: var(--pill-txt);
  background: var(--pill-bg); border: 1px solid var(--pill-line);
  padding: 1px 10px; border-radius: 99px;
}

/* FAQ */
details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 10px; overflow: hidden;
}
summary {
  cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 14.5px;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; color: var(--gold); font-size: 18px; font-weight: 700; flex: 0 0 auto; }
details[open] summary::before { content: "−"; }
details p { padding: 0 16px 14px 34px; color: var(--muted); font-size: 13.5px; }

/* 底部下载引导 */
.dl-cta {
  text-align: center;
  background: linear-gradient(160deg, var(--card), var(--card2));
  border: 1px solid var(--line); border-radius: 16px; padding: 30px 16px;
}
.dl-cta p { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* 页脚 */
footer {
  margin-top: 20px; border-top: 1px solid var(--line);
  padding: 26px 0 90px; color: var(--footer-txt); font-size: 12.5px;
  background: var(--footer-bg);
}
footer h3 { color: var(--muted); font-size: 13px; margin: 10px 0 4px; font-weight: 600; }
footer a { color: var(--footer-link); }
footer a:hover { color: var(--gold); }

/* 底部悬浮下载条（移动端） */
.dl-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--bar-bg); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dl-bar img { width: 44px; height: 44px; border-radius: 10px; }
.dl-bar .t { flex: 1; min-width: 0; }
.dl-bar .t b { display: block; font-size: 15px; }
.dl-bar .t span { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-bar a {
  background: linear-gradient(135deg, var(--btn-from), var(--btn-to));
  color: var(--btn-txt); font-weight: 700; padding: 10px 26px;
  border-radius: 99px; font-size: 15px; flex: 0 0 auto;
}

@media (min-width: 700px) {
  .dl-bar { display: none; }
  footer { padding-bottom: 40px; }
}
@media (max-width: 420px) {
  h1 { font-size: 26px; letter-spacing: 4px; }
  .shots img { height: 340px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}