/* 石器时代玩家服务中心 · Q版网游风 */
:root {
  --grass: #edf5e9;
  --ink: #23301f;
  --muted: #6b7a66;
  --forest: #195736;
  --gold: #ffbf2e;
  --gold-deep: #d9951a;
  --card: #fffef8;
  --line: #cfe2c6;
  --c-pay: #f0a92a;
  --c-auction: #4da3e8;
  --c-cbg: #ff8a3d;
  --c-register: #f273c0;
  --c-password: #35b5ab;
  --c-fusion: #9a82e8;
  --c-mall: #e85d75;
  --c-guides: #7a9e3c;
  --c-event: #e8552f;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 14px;
  --shadow-hard: 0 6px 0 rgba(25, 87, 54, 0.16);
  --shadow-hard-lg: 0 10px 0 rgba(25, 87, 54, 0.16);
  --font-title: "ZCOOL KuaiLe", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-body: "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--grass);
  background-image: radial-gradient(rgba(25, 87, 54, 0.05) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
}

/* ---------- 天空云朵（纯 CSS 场景装饰） ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* 天光渐变：上蓝下暖，清晨尼斯大陆 */
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 62vh;
  background: linear-gradient(180deg, #bfe4f5 0%, #d3eeda 42%, rgba(211, 238, 218, 0) 100%);
}
/* 太阳（避开右侧原始人站位） */
.sky::after {
  content: "";
  position: absolute;
  top: 34px;
  right: 4%;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff3b0, #ffd75e 58%, #ffc63f);
  box-shadow: 0 0 0 16px rgba(255, 214, 79, .18), 0 0 0 34px rgba(255, 214, 79, .07);
}
.cloud {
  position: absolute;
  width: 110px;
  height: 34px;
  background: #fff;
  border-radius: 999px;
  opacity: 0.85;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 44px; height: 44px; top: -20px; left: 18px; }
.cloud::after { width: 30px; height: 30px; top: -13px; right: 20px; }
.cloud-a { top: 92px; left: 7%; animation: cloud-drift 90s linear infinite alternate; }
.cloud-b { top: 170px; right: 8%; transform: scale(0.72); opacity: 0.7; animation: cloud-drift 120s linear infinite alternate-reverse; }
.cloud-c { top: 300px; left: 16%; transform: scale(0.55); opacity: 0.55; animation: cloud-drift 150s linear infinite alternate; }
@keyframes cloud-drift {
  from { margin-left: 0; }
  to { margin-left: 70px; }
}

/* ---------- 浮动胶囊顶栏 ---------- */
.topbar {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, 1080px);
  margin: 18px auto 0;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--card);
  border: 2px solid var(--forest);
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand-name { font-family: var(--font-title); font-size: 22px; color: var(--forest); letter-spacing: 2px; }
.server-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  color: var(--forest);
  background: var(--grass);
  border-radius: 999px;
  font-family: Consolas, monospace;
  font-size: 12.5px;
  white-space: nowrap;
}
.server-status span { width: 9px; height: 9px; border-radius: 50%; background: #58c26e; box-shadow: 0 0 0 3px rgba(88, 194, 110, 0.2); }
.back-home {
  padding: 7px 16px;
  color: var(--forest);
  border: 2px solid var(--forest);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.back-home:hover { color: #fff; background: var(--forest); }

/* ---------- 胶囊顶栏内导航（交易/充值子页共用） ---------- */
.topnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topnav a {
  padding: 7px 14px;
  color: var(--forest);
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.topnav a:hover { border-color: var(--line); background: var(--grass); }
.topnav a.active { color: #fff; background: var(--forest); border-color: var(--forest); }
.topnav span.account { color: var(--forest); font-size: 13px; font-weight: 700; padding: 0 6px; }
.topnav .link-btn {
  padding: 6px 14px;
  color: var(--muted);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}
.topnav .link-btn:hover { color: #c0392b; border-color: #c0392b; }

/* ---------- 主页 Hero ---------- */
.hero { position: relative; z-index: 1; padding: 48px 20px 36px; text-align: center; }
.hero .eyebrow { margin: 0 0 10px; color: var(--muted); font-family: Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: 3px; }
.hero h1 {
  margin: 0;
  font-family: var(--font-title);
  font-size: 58px;
  letter-spacing: 6px;
  color: var(--gold);
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 2px 0 #fff,
    0 6px 0 rgba(25, 87, 54, 0.35);
}
.hero-sub { margin: 14px 0 0; color: var(--forest); font-size: 15px; font-weight: 700; letter-spacing: 1px; }
/* Hero 底部远处丛林山影 */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 92px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='92' viewBox='0 0 480 92'%3E%3Cpath d='M0 70 L38 44 L64 62 L102 30 L138 58 L172 40 L210 66 L246 46 L282 64 L318 38 L354 60 L392 42 L428 62 L480 48 L480 92 L0 92 Z' fill='%23a7cf92' opacity='.45'/%3E%3Cpath d='M0 78 L52 58 L96 72 L150 52 L200 72 L252 58 L304 74 L356 56 L410 72 L480 60 L480 92 L0 92 Z' fill='%238fc177' opacity='.55'/%3E%3C/svg%3E") repeat-x bottom / auto 100%;
  pointer-events: none;
}
/* Hero 左侧的佩露夏（白虎形态，image-rendering 保持像素风） */
.hero-char {
  position: absolute;
  bottom: 2px;
  width: 96px;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 0 rgba(25, 87, 54, .18));
  animation: char-idle 2.6s ease-in-out infinite;
  pointer-events: none;
}
.hero-char-l { left: 7%; }
@keyframes char-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ---------- 首页新手路线 ---------- */
.newbie-route {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1080px);
  margin: 0 auto 24px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.7fr);
  gap: 24px;
  align-items: center;
  background: var(--card);
  border: 2px solid var(--forest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
}
.newbie-route-copy { min-width: 0; }
.newbie-kicker {
  margin: 0 0 4px;
  color: var(--gold-deep);
  font: 700 10px Georgia, serif;
  letter-spacing: 2px;
}
.newbie-route h2 {
  margin: 0;
  color: var(--forest);
  font-family: var(--font-title);
  font-size: 28px;
  letter-spacing: 3px;
}
.newbie-route-copy > p:not(.newbie-kicker) {
  margin: 8px 0 13px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.newbie-route-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--forest);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.newbie-route-link span { color: var(--gold-deep); font-size: 19px; line-height: 1; }
.newbie-route-link:hover { color: var(--gold-deep); }
.newbie-route-steps {
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
}
.newbie-route-steps li {
  min-width: 0;
  min-height: 112px;
  padding: 12px 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--grass);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
}
.newbie-route-steps li:nth-child(2) { background: #fff8e6; border-color: #efd58f; }
.newbie-route-steps li:nth-child(3) { background: #eef4ff; border-color: #c3d5f1; }
.newbie-route-steps li:nth-child(4) { background: #fff0f2; border-color: #efc6cf; }
.newbie-step-no {
  color: var(--gold-deep);
  font: 700 11px Consolas, monospace;
  letter-spacing: 1px;
}
.newbie-route-steps strong {
  display: block;
  color: var(--forest);
  font-size: 14px;
  line-height: 1.35;
}
.newbie-route-steps small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

/* ---------- 门户导航卡片 ---------- */
.nav-grid {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1080px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.nav-card {
  --card-accent: var(--forest);
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 26px 18px 20px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  background:
    radial-gradient(circle 3px at 11px 11px, rgba(25, 87, 54, .22) 2.4px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 11px) 11px, rgba(25, 87, 54, .22) 2.4px, transparent 3px),
    radial-gradient(circle 3px at 11px calc(100% - 11px), rgba(25, 87, 54, .22) 2.4px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 11px) calc(100% - 11px), rgba(25, 87, 54, .22) 2.4px, transparent 3px),
    var(--card);
  border: 2px solid var(--card-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-card:hover { transform: translateY(-5px) rotate(-1deg); box-shadow: var(--shadow-hard-lg); }
.nav-icon {
  position: relative;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--card-accent);
  border-radius: 22px;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.15),
    0 0 0 3px var(--card),
    0 0 0 5px rgba(25, 87, 54, .12);
  overflow: hidden;
}
/* 道具图：像素风原图展示，内缩留白防溢出 */
.nav-icon img, .download-button-icon img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  image-rendering: pixelated;
}
.nav-icon svg { width: 36px; height: 36px; }
.nav-card strong { font-family: var(--font-title); font-size: 22px; letter-spacing: 3px; }
/* 标题下的主题色短横条：色彩呼应 + 引导视线 */
.nav-card strong::after {
  content: "";
  display: block;
  width: 30px;
  height: 3.5px;
  margin: 6px auto 0;
  border-radius: 3px;
  background: var(--card-accent);
  opacity: .5;
}
.nav-card small { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.nav-go { margin-top: 2px; color: var(--card-accent); font-size: 13px; font-weight: 700; }
.nav-pay { --card-accent: var(--c-pay); }
.nav-auction { --card-accent: var(--c-auction); }
.nav-cbg { --card-accent: var(--c-cbg); }
.nav-register { --card-accent: var(--c-register); }
.nav-password { --card-accent: var(--c-password); }
.nav-fusion { --card-accent: var(--c-fusion); }
.nav-mall { --card-accent: var(--c-mall); }
.nav-guides { --card-accent: var(--c-guides); }
.nav-event { --card-accent: var(--c-event); }

/* ---------- 官方客户端下载 ---------- */
.download-section {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1080px);
  margin: 0 auto 24px;
  padding: 22px 0 4px;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr);
  gap: 20px;
  align-items: center;
  border-top: 2px dashed var(--line);
}
.download-intro { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.download-mark {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--forest);
  border-radius: 16px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15);
  overflow: hidden;
}
.download-mark img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  image-rendering: pixelated;
}
.download-mark svg { width: 26px; height: 26px; }
.download-kicker { margin: 0 0 2px; color: var(--gold-deep); font: 700 10px Georgia, serif; letter-spacing: 2px; }
.download-intro h2 { margin: 0; color: var(--forest); font-family: var(--font-title); font-size: 26px; letter-spacing: 3px; }
.download-intro p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.download-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; min-width: 0; }
.download-button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  color: var(--ink);
  text-decoration: none;
  background: var(--card);
  border: 2px solid var(--forest);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 rgba(25, 87, 54, .14);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.download-button:hover { transform: translateY(-3px); box-shadow: 0 7px 0 rgba(25, 87, 54, .14); background: #fff; }
.download-button:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(25, 87, 54, .14); }
.download-button-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 10px;
}
.download-quark .download-button-icon { background: #24a86b; }
.download-baidu .download-button-icon { background: #3185e8; }
.download-direct .download-button-icon { background: #e8862c; }
.download-button-icon svg { width: 20px; height: 20px; }
.download-button-copy { min-width: 0; display: grid; gap: 3px; }
.download-button-copy strong { overflow-wrap: anywhere; color: var(--forest); font-size: 14px; line-height: 1.3; }
.download-button-copy small { color: var(--muted); font-size: 12px; }
.download-button-copy b { color: var(--gold-deep); letter-spacing: .5px; }
.download-button-go { margin-left: auto; color: var(--forest); font-size: 20px; line-height: 1; }
.download-contact {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 13px;
  text-align: center;
}
.download-contact strong { color: var(--forest); letter-spacing: 1px; }

/* ---------- 功能页面板 ---------- */
main.page { position: relative; z-index: 1; flex: 1; width: min(100% - 40px, 560px); margin: 0 auto; padding: 38px 0 52px; }
main.page.wide { width: min(100% - 32px, 1180px); }
.panel-card {
  background: var(--card);
  border: 2px solid var(--forest);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hard-lg);
  overflow: hidden;
}
.panel-head { padding: 24px 30px 16px; border-bottom: 2px dashed var(--line); text-align: center; }
.panel-head h1 { margin: 0; font-family: var(--font-title); font-size: 28px; color: var(--forest); letter-spacing: 3px; }
.panel-head p { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.form-panel { padding: 26px 30px 30px; display: grid; gap: 15px; }
label { display: grid; gap: 7px; color: var(--forest); font-size: 13px; font-weight: 700; }
input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  color: var(--ink);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  font: 15px Consolas, "Microsoft YaHei", sans-serif;
  outline: none;
}
input:hover { border-color: #a9c69d; }
input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(255, 191, 46, 0.35); }

.captcha-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.captcha-field legend { margin-bottom: 7px; padding: 0; color: var(--forest); font-size: 13px; font-weight: 700; }
.captcha-row { display: grid; grid-template-columns: minmax(74px, 1fr) 150px 46px; gap: 9px; align-items: center; }
.captcha-row input { height: 46px; text-align: center; text-transform: uppercase; letter-spacing: 4px; }
.captcha-image { display: block; width: 150px; height: 46px; border: 2px solid var(--line); border-radius: var(--radius-md); background: #f1eee5; }
.captcha-refresh {
  width: 46px;
  height: 46px;
  padding: 0;
  color: var(--forest);
  background: var(--grass);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  font: 22px/1 Georgia, serif;
  cursor: pointer;
}
.captcha-refresh:hover { border-color: var(--forest); background: #e2eedb; }

.primary-action {
  height: 50px;
  margin-top: 8px;
  color: #5b3d05;
  background: var(--gold);
  border: 2px solid var(--gold-deep);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--gold-deep);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  cursor: pointer;
}
.primary-action:hover { filter: brightness(1.05); }
.primary-action:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }
.primary-action:disabled { cursor: wait; opacity: 0.62; }

.notice { min-height: 24px; padding: 0 30px 22px; color: var(--muted); font-size: 13px; text-align: center; }
.notice.success { color: var(--forest); }
.notice.error { color: #c0392b; }

.fusion-frame { display: block; width: 100%; height: 1120px; border: 0; background: #fff; }

/* ---------- 草地页脚 ---------- */
.meadow {
  position: relative;
  height: 88px;
  margin-top: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='88' viewBox='0 0 240 88'%3E%3Cpath d='M0 42 Q30 24 60 42 T120 42 T180 42 T240 42 V88 H0 Z' fill='%239ed08a'/%3E%3Cpath d='M0 60 Q40 44 80 60 T160 60 T240 60 V88 H0 Z' fill='%237cbf68'/%3E%3C/svg%3E") repeat-x bottom / auto 100%;
}
/* 草地上的原始树影 */
.meadow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='88' viewBox='0 0 360 88'%3E%3Cg fill='%235ea552' opacity='.5'%3E%3Ccircle cx='52' cy='40' r='22'/%3E%3Crect x='48' y='52' width='8' height='24' rx='3'/%3E%3Ccircle cx='300' cy='34' r='18'/%3E%3Crect x='296.5' y='46' width='7' height='22' rx='3'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom / auto 100%;
  pointer-events: none;
}
footer { position: relative; z-index: 1; padding: 0 24px 14px; color: #f2f9ec; text-align: center; font: 11px Georgia, serif; letter-spacing: 2px; text-shadow: 0 1px 0 rgba(25, 87, 54, 0.4); }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newbie-route { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .nav-grid { grid-template-columns: 1fr; }
  .newbie-route { width: min(100% - 32px, 560px); margin-bottom: 20px; padding: 19px 17px; }
  .newbie-route h2 { font-size: 24px; }
  .newbie-route-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .newbie-route-steps li { min-height: 104px; padding: 10px 9px 9px; }
  .newbie-route-steps strong { font-size: 13px; }
  .newbie-route-steps small { font-size: 11px; }
  .download-section { grid-template-columns: 1fr; gap: 15px; margin: 0 auto 20px; padding-top: 20px; }
  .download-actions { grid-template-columns: 1fr; }
  .download-contact { grid-column: auto; }
  .hero { padding: 36px 16px 28px; }
  .hero h1 { font-size: 40px; letter-spacing: 4px; }
  .cloud-c { display: none; }
  .sky::after { width: 52px; height: 52px; top: 22px; right: 4%; box-shadow: 0 0 0 10px rgba(255, 214, 79, .16), 0 0 0 22px rgba(255, 214, 79, .07); }
  .hero-char { width: 64px; bottom: 0; }
  .hero-char-l { left: 3%; }
  .server-status { font-size: 11px; padding: 5px 10px; }
  .brand-name { font-size: 19px; }
  main.page { padding: 26px 0 40px; }
  .form-panel { padding: 22px 20px 24px; }
  .panel-head { padding: 20px 20px 14px; }
  .captcha-row { grid-template-columns: minmax(64px, 1fr) 126px 46px; gap: 7px; }
  .captcha-image { width: 126px; object-fit: fill; }
  .fusion-frame { height: 1280px; }
}


/* ================= 攻略页 guides.html ================= */
html { scroll-behavior: smooth; }
.guides-page { position: relative; z-index: 1; flex: 1; width: min(100% - 32px, 1080px); margin: 0 auto 40px; }

/* ---------- 页头 ---------- */
.g-hero { text-align: center; padding: 34px 16px 22px; }
.g-hero .eyebrow { margin: 0 0 8px; color: var(--muted); font-family: Georgia, serif; font-size: 11.5px; font-weight: 700; letter-spacing: 3px; }
.g-hero h1 { font-family: var(--font-title); font-size: 40px; letter-spacing: 6px; color: var(--forest); margin: 0; text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(25,87,54,.14); }
.g-hero p { color: var(--muted); font-size: 13.5px; margin: 10px 0 0; }

/* ---------- 吸顶分类导航 ---------- */
.cat-nav {
  position: sticky; top: 10px; z-index: 20;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  background: rgba(255,254,248,.92); backdrop-filter: blur(6px);
  border: 2px solid var(--forest); border-radius: 999px;
  box-shadow: var(--shadow-hard); padding: 8px 12px; margin: 6px auto 26px;
  width: fit-content; max-width: 100%;
}
.cat-nav a {
  text-decoration: none; font-weight: 700; font-size: 13.5px; letter-spacing: 1px;
  color: var(--forest); padding: 7px 16px; border-radius: 999px; border: 2px solid transparent;
  transition: all .12s ease; white-space: nowrap;
}
.cat-nav a:hover { border-color: var(--line); background: var(--grass); }
.cat-nav a.hot { color: #fff; background: var(--forest); }
.cat-nav a.hot:hover { background: #217a4b; }

/* ---------- 分类区块 ---------- */
.cat-sec { scroll-margin-top: 90px; margin-bottom: 40px; }
.cat-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.cat-head h2 { font-family: var(--font-title); font-size: 28px; letter-spacing: 4px; color: var(--forest); margin: 0; }
.cat-head .en { font-family: Georgia, serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: var(--gold-deep); }
.cat-desc { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.cat-bar { height: 6px; border-radius: 3px; margin-bottom: 18px; background: linear-gradient(90deg, var(--gold), transparent); }

/* ---------- 特色卡片 ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.feat-card {
  background: var(--card); border: 2px solid var(--forest); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard); padding: 18px 18px 16px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hard-lg); }
.feat-card strong { font-family: var(--font-title); font-size: 19px; letter-spacing: 2px; color: var(--forest); display: block; margin-bottom: 6px; }
.feat-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.feat-tag { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--forest); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; letter-spacing: 1px; }
.feat-tag.hot { background: #e85d75; }
.feat-tag.new { background: #4da3e8; }

/* ---------- 攻略索引卡 ---------- */
.idx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.idx-card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border: 2px solid var(--forest); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard); padding: 16px 18px 14px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.idx-card:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow-hard-lg); }
.idx-card h3 { font-family: var(--font-title); font-size: 20px; letter-spacing: 2px; color: var(--forest); margin: 0 0 8px; }
.idx-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.badge { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2.5px 10px; letter-spacing: .5px; }
.b-lv { background: #e8f2ff; color: #2b6cb0; border: 1.5px solid #b8d4f5; }
.b-type { background: var(--grass); color: var(--forest); border: 1.5px solid var(--line); }
.b-diff { background: #fff4d6; color: #9a6b00; border: 1.5px solid #f0d488; }
.b-reward { background: #fdeef1; color: #c13a54; border: 1.5px solid #f5c3cd; }
.idx-card p { margin: 0; color: var(--muted); font-size: 12.8px; line-height: 1.7; }
.idx-open { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--gold-deep); }

/* ---------- 攻略正文 ---------- */
.guide-card {
  background: var(--card); border: 2px solid var(--forest); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hard); margin-bottom: 26px; overflow: hidden; scroll-margin-top: 90px;
}
.guide-head { padding: 20px 26px; color: #fff; background: linear-gradient(135deg, var(--forest), #2c7a4e); }
.guide-head h2 { font-family: var(--font-title); font-size: 24px; letter-spacing: 2px; margin: 0 0 10px; }
.guide-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-badges .badge { background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.guide-body { padding: 10px 26px 24px; font-size: 14px; line-height: 1.9; }
.guide-body h3 { font-family: var(--font-title); font-size: 18px; letter-spacing: 1.5px; color: var(--forest); margin: 22px 0 8px; padding-left: 12px; border-left: 5px solid var(--gold); }
.guide-body h4 {
  font-size: 14.5px; color: var(--forest); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px;
}
.guide-body h4::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--forest); color: #fff; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.guide-body h4.step-1::before { content: "1"; } .guide-body h4.step-2::before { content: "2"; }
.guide-body h4.step-3::before { content: "3"; } .guide-body h4.step-4::before { content: "4"; }
.guide-body h4.step-5::before { content: "5"; } .guide-body h4.step-6::before { content: "6"; }
.guide-body h4.step-7::before { content: "7"; } .guide-body h4.step-0::before { content: "0"; }
.guide-body p { margin: 6px 0; }
.guide-body ol, .guide-body ul { margin: 6px 0; padding-left: 22px; }
.guide-body li { margin: 3px 0; }
.guide-body table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
.guide-body th, .guide-body td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; }
.guide-body th { background: var(--grass); color: var(--forest); font-weight: 700; }
.guide-body tr:nth-child(even) td { background: #fbfdf8; }
.guide-body code { background: var(--grass); border-radius: 6px; padding: 1px 7px; font-size: 12.5px; color: var(--forest); font-weight: 700; }
.tip { border-left: 4px solid var(--gold); background: #fff8e6; border-radius: 0 12px 12px 0; padding: 9px 14px; margin: 10px 0; font-size: 13px; }
.warn { border-left: 4px solid #e85d75; background: #fdeef1; border-radius: 0 12px 12px 0; padding: 9px 14px; margin: 10px 0; font-size: 13px; }
.reward-pets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0; }
.reward-pets span { background: var(--grass); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: var(--forest); text-align: center; }

@media (max-width: 640px) {
  .g-hero h1 { font-size: 30px; }
  .cat-head h2 { font-size: 22px; }
  .guide-head h2 { font-size: 19px; }
  .guide-body { padding: 8px 16px 18px; }
  .cat-nav { border-radius: 20px; }
  /* mobile feature cards: 2 columns */
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .feat-card { padding: 12px 12px 10px; }
  .feat-card strong { font-size: 15.5px; letter-spacing: 1px; margin-bottom: 4px; }
  .feat-card p { font-size: 12px; line-height: 1.6; }
  .feat-tag { font-size: 10px; padding: 1px 8px; margin-bottom: 6px; }
}

/* ---------- 攻略模态框（:target 纯CSS实现，CSP 安全） ---------- */
.qmodal { display: none; position: fixed; inset: 0; z-index: 200; }
.qmodal:target { display: block; }
.qmodal-bg { position: absolute; inset: 0; background: rgba(18, 38, 24, .55); cursor: default; }
.qmodal-box {
  position: absolute; inset: 3.5% 5%; max-width: 1080px; margin: 0 auto;
  background: var(--card); border: 2px solid var(--forest); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-lg); display: flex; flex-direction: column; overflow: hidden;
}
.qmodal-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; background: var(--forest); color: #fff;
  font-family: var(--font-title); font-size: 17px; letter-spacing: 2px;
}
.qmodal-close {
  color: #fff; text-decoration: none; font-family: inherit; font-size: 13.5px; letter-spacing: 1px;
  border: 2px solid rgba(255,255,255,.65); border-radius: 999px; padding: 3px 14px;
  transition: background .12s ease;
}
.qmodal-close:hover { background: rgba(255,255,255,.18); }
.qmodal-box iframe { flex: 1; width: 100%; border: 0; background: #f7f5ea; }

/* ---------- 独立攻略页（模态框 iframe 内） ---------- */
body.guide-single { background: #f7f5ea; }
body.guide-single .guides-page { padding-top: 20px; }
@media (max-width: 720px) {
  .qmodal-box { inset: 0; max-width: none; border-radius: 0; border-width: 0; }
}

/* ---------- 动效偏好：减少动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sky::after { animation: none; }
  .cloud-a, .cloud-b, .cloud-c { animation: none; }
  .hero-char { animation: none; }
  html { scroll-behavior: auto; }
}