/* ルールブック（はじめてのルール・完全版）共通。アプリの承認済み基調：黒インクの不透明面＋金の細線、明朝は見出しと語りだけ */
:root {
  --rb-panel: #0c1820;
  --rb-panel-2: #0f1f29;
  --rb-gold-line: rgba(217, 184, 115, .42);
  --rb-self: #e0559a;   /* アプリの「あなた」の陣営色（盤面の桃の枠） */
  --rb-enemy: #4fb3e8;  /* アプリの「相手」の陣営色（盤面の青の枠） */
  --rb-counter: #8c4fd6; /* 対抗の紫 */
  --rb-harm: #e0705e;
  --rb-ember: #e0805a; --rb-tide: #5fa9d9; --rb-forest: #a3b862; --rb-mist: #9fd3c4;
}

body.rulebook {
  background:
    linear-gradient(180deg, rgba(4,10,15,.55), rgba(4,10,15,.94) 60vh, var(--ink) 100vh),
    url("../images/world.webp") center top / 100% auto no-repeat,
    var(--ink);
}
/* アプリの対戦画面の霧のような光の粒 */
body.rulebook::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(2px 2px at 12% 30%, rgba(240,217,159,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(240,217,159,.4), transparent 60%),
    radial-gradient(2px 2px at 64% 72%, rgba(209,230,240,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 84%, rgba(240,217,159,.35), transparent 60%);
}

.rb-main { width: min(920px, 100%); margin: 0 auto; padding: 108px 16px 80px; }
/* アプリから開いたとき（?app=1）はサイトのヘッダーを出さない */
html.in-app .site-header { display: none; }
html.in-app .rb-main { padding-top: 28px; }
html.in-app .rb-footer-site { display: none; }

.rb-hero { text-align: center; padding: 3.5rem 0 2.4rem; }
.rb-hero .eyebrow { margin-bottom: .8rem; }
.rb-hero h1 { font-size: clamp(2.3rem, 7vw, 3.8rem); letter-spacing: .04em; line-height: 1.25; text-shadow: 0 3px 24px #000; }
.rb-hero h1 .nw { display: inline-block; }
.rb-hero p.lead { max-width: 36em; margin: 1.2rem auto 0; color: #d3d7d4; font-size: 1.02rem; }
.rb-rule { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1.6rem auto 0; color: var(--gold); }
.rb-rule::before, .rb-rule::after { content: ""; width: 72px; height: 1px; background: var(--rb-gold-line); }
.rb-rule i { width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); }

/* 不透明の面＋金の二重線の額 */
.rb-panel {
  position: relative; margin: 1.6rem 0; padding: clamp(1.2rem, 4vw, 2.2rem);
  background: var(--rb-panel); border: 1px solid var(--rb-gold-line); border-radius: 12px;
  box-shadow: inset 0 0 0 4px var(--rb-panel), inset 0 0 0 5px rgba(217,184,115,.16), 0 18px 40px rgba(0,0,0,.35);
}
.rb-panel h2 { margin: 0 0 1rem; color: var(--gold-pale); font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 600; letter-spacing: .04em; line-height: 1.4; }
.rb-panel h3 { margin: 1.8rem 0 .6rem; color: var(--gold-pale); font: 600 1.12rem "Noto Serif JP", serif; letter-spacing: .03em; }
.rb-panel p, .rb-panel li { color: #d5dad6; }
.rb-panel p { margin: .7rem 0; }
.rb-panel ul, .rb-panel ol { padding-left: 1.3em; }
.rb-panel li { margin: .35rem 0; }
.rb-panel strong { color: #fff; }
.rb-step { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; margin-right: .6rem; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: 600 1rem "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums; vertical-align: .15em; }
.num { font-variant-numeric: tabular-nums; }

/* 案内役エリンゲの語り */
.erlinge { display: grid; grid-template-columns: 64px 1fr; gap: .9rem; align-items: start; margin: 1.4rem 0; }
.erlinge img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold); box-shadow: 0 0 0 3px var(--rb-panel), 0 0 0 4px rgba(217,184,115,.35); }
.erlinge .bubble { position: relative; padding: .85rem 1.1rem; background: var(--rb-panel-2); border: 1px solid rgba(217,184,115,.3); border-radius: 10px; }
.erlinge .bubble::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: var(--rb-panel-2); border-left: 1px solid rgba(217,184,115,.3); border-bottom: 1px solid rgba(217,184,115,.3); transform: rotate(45deg); }
.erlinge .who { display: block; color: var(--gold); font-size: .74rem; font-weight: 700; letter-spacing: .14em; }
.erlinge .say { display: block; margin-top: .2rem; color: #f1ede2; font: 500 1rem/1.8 "Noto Serif JP", serif; }

/* 図 */
.rb-figure { margin: 1.4rem 0; }
.rb-figure svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.rb-figure figcaption { margin-top: .6rem; color: var(--muted); font-size: .85rem; text-align: center; }
.rb-shot { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 1.4rem; align-items: center; }
.rb-shot img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--rb-gold-line); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
@media (max-width: 640px) { .rb-shot { grid-template-columns: 1fr; } .rb-shot img { max-width: 260px; margin: 0 auto; } }

/* 番号付きの流れ（横並び→小画面で縦） */
.rb-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 1.2rem 0; padding: 0; list-style: none; counter-reset: flow; }
.rb-flow li { position: relative; margin: 0; padding: .9rem .8rem; background: var(--rb-panel-2); border: 1px solid rgba(217,184,115,.3); border-radius: 10px; }
.rb-flow li b { display: block; color: var(--gold-pale); font: 600 1rem "Noto Serif JP", serif; }
.rb-flow li span { display: block; margin-top: .3rem; color: #c5ccc8; font-size: .86rem; line-height: 1.6; }
.rb-flow li em { display: block; color: var(--gold); font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
@media (max-width: 720px) { .rb-flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .rb-flow { grid-template-columns: 1fr; } }

/* 数値の表 */
.rb-table-wrap { overflow-x: auto; margin: 1rem 0; }
.rb-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rb-table th, .rb-table td { padding: .6rem .55rem; border-bottom: 1px solid rgba(217,184,115,.2); text-align: left; vertical-align: top; color: #d5dad6; }
.rb-table th { color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.rb-table td:first-child { color: #fff; font-weight: 600; white-space: nowrap; }

/* 要点（覚えること3つ等） */
.rb-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.2rem 0; }
.rb-points div { padding: 1rem; text-align: center; background: var(--rb-panel-2); border: 1px solid rgba(217,184,115,.3); border-radius: 10px; }
.rb-points .big { display: block; color: var(--gold-pale); font: 600 2.2rem/1.2 "Noto Serif JP", serif; font-variant-numeric: tabular-nums; }
.rb-points .big small { font-size: .9rem; margin-left: .15rem; }
.rb-points .cap { display: block; margin-top: .35rem; color: #c5ccc8; font-size: .86rem; line-height: 1.6; }
@media (max-width: 560px) { .rb-points { grid-template-columns: 1fr; } }

/* カードの並び */
.rb-cards { display: flex; justify-content: center; gap: .7rem; margin: 1.2rem 0; flex-wrap: wrap; }
.rb-cards img { width: min(150px, 30%); height: auto; border-radius: 8px; box-shadow: 0 10px 24px rgba(0,0,0,.5); }

/* 用語の札（押せないのでピル型にしない） */
.tag { display: inline-block; padding: 0 .35em; border: 1px solid rgba(217,184,115,.5); border-radius: 3px; color: var(--gold-pale); font-size: .86em; font-weight: 600; white-space: nowrap; }
.tag.counter { border-color: rgba(166,120,230,.7); color: #d4bdf5; }

/* 目次 */
.rb-toc { columns: 2; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.rb-toc li { margin: .2rem 0; break-inside: avoid; }
.rb-toc a { color: #d5dad6; text-decoration: none; }
.rb-toc a:hover { color: var(--gold-pale); }
.rb-toc .n { display: inline-block; width: 2.2em; color: var(--gold); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .rb-toc { columns: 1; } }

/* ページ間の案内 */
.rb-next { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 2.4rem 0 0; }
.rb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.4rem; border: 1px solid var(--gold); border-radius: 8px; color: var(--gold-pale); text-decoration: none; font-weight: 600; letter-spacing: .06em; }
.rb-btn.primary { background: var(--gold); color: #10140f; }
.rb-btn:hover { filter: brightness(1.08); }

.rb-note { color: var(--muted); font-size: .85rem; }
.rb-panel :target, .rb-panel[id] { scroll-margin-top: 96px; }
html.in-app .rb-panel[id] { scroll-margin-top: 16px; }

.rb-footer { margin-top: 3rem; text-align: center; color: var(--muted); font-size: .82rem; }
.rb-footer a { color: var(--gold-pale); }

/* 遊び方ガイドの動画（縦長）。面の中央に、スマホでは幅いっぱいに置く */
.rb-video video { display: block; width: min(360px, 100%); height: auto; aspect-ratio: 9 / 16; margin: 1.2rem auto .4rem; border: 1px solid var(--rb-gold-line); border-radius: 12px; background: #000; }