/* 静态站点页（help/privacy/404）共享样式 — 绿色设计系统（--gp-* tokens，与 game.css 同源） */
:root {
  --gp-bg: #f4faf6;
  --gp-surface: #ffffff;
  --gp-surface-2: #f8fdf9;
  --gp-ink: #1b3a2b;
  --gp-ink-light: #4a6b5a;
  --gp-brand: #2f9e44;
  --gp-brand-dark: #237b34;
  --gp-brand-light: #d3f9d8;
  --gp-accent: #ffd43b;
  --gp-line: #c8e6c9;
  --gp-line-strong: #a5d6a7;
  --gp-danger: #e03131;
  --gp-radius: 14px;
  --gp-radius-sm: 10px;
  --shadow-card: 0 6px 20px rgba(27, 58, 43, 0.12);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
  background: var(--gp-bg);
  color: var(--gp-ink);
}

.sp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--gp-surface);
  border-bottom: 1px solid var(--gp-line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.sp-brand {
  font-size: 18px;
  font-weight: 900;
  color: var(--gp-brand-dark);
  text-decoration: none;
  flex: 1;
}
.sp-lang {
  border: 2px solid var(--gp-line);
  background: var(--gp-surface-2);
  color: var(--gp-ink);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 40px;
}
.sp-lang:active { background: var(--gp-brand-light); }

.sp-main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 18px 32px;
}
.sp-main h1 { font-size: 26px; margin: 8px 0 18px; }
.sp-card {
  background: var(--gp-surface);
  border-radius: var(--gp-radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.sp-card h2 { font-size: 18px; margin: 0 0 10px; color: var(--gp-brand-dark); }
.sp-card p { font-size: 14px; line-height: 1.7; margin: 6px 0; color: var(--gp-ink); }
.sp-card ul { margin: 8px 0; padding-left: 20px; }
.sp-card li { font-size: 14px; line-height: 1.7; margin: 4px 0; }
.sp-card a { color: var(--gp-brand-dark); font-weight: 700; }

.sp-404 { text-align: center; padding-top: 48px; }
.sp-404 .sp-emoji { font-size: 56px; }
.sp-404 h1 { font-size: 24px; margin: 12px 0 8px; }
.sp-404 p { color: var(--gp-ink-light); }

.sp-cta {
  display: inline-block;
  margin-top: 18px;
  background: var(--gp-brand);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 24px;
  min-height: 44px;
}
.sp-cta:active { background: var(--gp-brand-dark); }

.sp-foot {
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 13px;
  color: var(--gp-ink-light);
}
.sp-foot a { color: var(--gp-brand-dark); text-decoration: none; font-weight: 700; }

@media (min-width: 768px) {
  .sp-main h1 { font-size: 30px; }
  .sp-card { padding: 22px 26px; }
}