/* ============================================================
   guide.css — shouyou.me 攻略页公共样式
   所有 guides/*.html 共用；页面内只写内容，不重复定义视觉
   ============================================================ */

:root {
  --bg:#07070d; --card:#13131f; --card2:#171728; --border:#26264a;
  --cyan:#00c6ff; --blue:#0072ff; --violet:#a855f7; --amber:#f0b429;
  --text:#eef0ff; --dim:#9aa0c0; --body:#c9cde8;
}

* { box-sizing: border-box; }

body {
  margin:0;
  background: radial-gradient(1200px 600px at 50% -10%, #15173a 0%, var(--bg) 60%);
  color:var(--text);
  font-family: system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  min-height:100vh; padding:3rem 1rem 4rem; line-height:1.8;
}

.wrap { max-width: 780px; margin: 0 auto; }

/* ---------- 语言切换 ---------- */
.lang-switch {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: .4rem; justify-content: flex-end;
  padding: .5rem 0 .8rem;
  background: linear-gradient(180deg, var(--bg) 60%, transparent);
}
.lang-switch button {
  font: inherit; font-size: .78rem; cursor: pointer;
  padding: .32rem .8rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--dim);
}
.lang-switch button.active {
  border-color: var(--cyan); color: var(--cyan);
  background: rgba(0,198,255,.1);
}

/* 默认显示中文；body[data-lang="en"] 时反转 */
body[data-lang="en"] .lang-zh { display: none; }
body:not([data-lang="en"]) .lang-en { display: none; }

/* ---------- 排版 ---------- */
h1 { font-size:1.6rem; margin:0 0 .3rem; line-height:1.4; }
.meta { color:var(--dim); font-size:.82rem; margin-bottom:2rem; }
h2 { font-size:1.12rem; margin:2.4rem 0 .7rem; color:var(--cyan); }
h3 { font-size:.96rem; margin:1.6rem 0 .4rem; color:var(--amber); }
p, li { font-size:.92rem; color:var(--body); }
ul, ol { padding-left: 1.4rem; }
li { margin: .35rem 0; }
a { color:var(--cyan); text-decoration:none; }
a:hover { text-decoration:underline; }
strong { color: var(--text); }

.back { display:inline-block; margin-bottom:1.6rem; font-size:.85rem; }
.crumb { font-size:.82rem; color:var(--dim); margin-bottom:.8rem; }

table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.84rem; }
th, td { border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top; }
th { background:var(--card); color:var(--text); }
td { color:var(--body); }
caption { caption-side: bottom; font-size:.76rem; color:var(--dim); padding-top:.5rem; text-align:left; }

.tip, .warn, .note {
  border-radius:0 10px 10px 0; padding:.8rem 1rem; margin:1.2rem 0;
  font-size:.86rem; color:var(--body);
}
.tip  { background:rgba(0,198,255,.07);  border-left:3px solid var(--cyan); }
.warn { background:rgba(240,180,41,.07); border-left:3px solid var(--amber); }
.note { background:rgba(168,85,247,.07); border-left:3px solid var(--violet); }

.key {
  display:inline-block; background:var(--card2); border:1px solid var(--border);
  border-radius:6px; padding:1px 8px; font-size:.78rem;
  font-family:ui-monospace,monospace; color:var(--text);
}

.formula {
  display:block; background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:.7rem 1rem; margin:.8rem 0;
  font-family:ui-monospace,monospace; font-size:.82rem;
  color:var(--cyan); overflow-x:auto; white-space:nowrap;
}

.play-cta {
  display:inline-block; margin-top:1.8rem; padding:10px 20px; border-radius:10px;
  font-size:.88rem; font-weight:600; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,#0072ff,#00c6ff);
}
.play-cta:hover { filter:brightness(1.12); text-decoration:none; }

.guide-nav { display:flex; gap:.6rem; margin-top:2.6rem; font-size:.84rem; flex-wrap:wrap; }
.guide-nav a {
  padding:.5rem 1rem; border:1px solid var(--border); border-radius:10px; color:var(--dim);
}
.guide-nav a:hover { border-color:var(--cyan); color:var(--cyan); text-decoration:none; }

.adsbygoogle { display:block; margin:1.6rem auto; max-width:100%; text-align:center; }

@media (max-width: 560px) {
  body { padding:2rem .9rem 3rem; }
  h1 { font-size:1.35rem; }
  table { font-size:.78rem; }
  th, td { padding:5px 7px; }
}