/* 説明ページ（プライバシーポリシー・サイトについて）用。ゲーム画面の配色に合わせる */
:root {
  --bg-top: #0A1224; --bg-bottom: #16264A; --accent: #C9A24B; --text: #F3EBD8; --text-2: #A9B2C6;
  --panel: rgba(14, 26, 51, 0.78);
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --sans: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom)) fixed; color: var(--text); font: 16px/1.85 var(--sans); }
.page { max-width: 760px; margin: 0 auto; padding: 32px 20px 64px; }
.brand { display: block; text-align: center; color: var(--accent); text-decoration: none; font: 600 28px var(--serif); letter-spacing: 0.16em; margin-bottom: 8px; }
h1 { font: 600 26px var(--serif); color: var(--accent); text-align: center; margin: 0 0 4px; }
.meta { text-align: center; color: var(--text-2); font-size: 13px; margin: 0 0 24px; }
.lang { text-align: center; margin: 0 0 32px; font-size: 14px; }
section { background: var(--panel); border: 1px solid rgba(201, 162, 75, 0.3); border-radius: 16px; padding: 24px 24px 12px; margin-bottom: 28px; }
h2 { font: 600 19px var(--serif); color: var(--accent); margin: 0 0 16px; }
h3 { font: 600 16px var(--serif); margin: 22px 0 6px; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 1.3em; }
a { color: var(--accent); }
.back { display: inline-block; margin-top: 8px; }
footer { text-align: center; color: var(--text-2); font-size: 13px; margin-top: 32px; }

/* Readable rules article, also usable without JavaScript. */
.guide-page { overflow-wrap: anywhere; }
.guide-toc { padding: 20px 0; margin-bottom: 24px; }
.guide-toc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.guide-lead { color: var(--text-2); }
.guide-page section { scroll-margin-top: 20px; }
.guide-footer { text-align: center; line-height: 2.3; }
/* One manually placed ad after the article, away from the TOC and game controls. */
.content-ad { width: 100%; max-width: 728px; margin: 56px auto 150px; }
.content-ad-label { color: var(--text-2); font-size: 11px; text-align: center; margin-bottom: 8px; }
.content-ad-content { width: 100%; min-width: 0; height: 100px; }
.content-ad-preview { height: 100%; display: grid; place-items: center; border: 1px dashed var(--text-2); color: var(--text-2); font-size: 12px; }
@media (min-width: 800px) { .content-ad-content { height: 90px; } }
@media (max-width: 480px) {
  .guide-toc ul { grid-template-columns: 1fr; }
  .guide-page section { padding: 20px 16px 12px; }
  .guide-page h1 { font-size: 24px; }
}