/* ガイドページ（遊び方・スコア・星・チャレンジ・実績・FAQ）の追加スタイル。
   ページの土台（配色・見出し・言語切り替え）は法務ページと共通で、実体は
   /legal/legal.css。ここには読み物ページだけで使う要素を足す。 */

/* ---------- ガイド間のナビゲーション ---------- */
.guide-nav{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 34px;
}
.guide-nav a{
  display:inline-block;
  border:1px solid var(--line);
  background:rgba(15,18,42,.6);
  border-radius:999px;
  padding:6px 14px;
  font-size:13px;
  text-decoration:none;
  color:var(--muted);
}
.guide-nav a:hover{border-color:var(--cyan); color:var(--cyan);}
.guide-nav a[aria-current="page"]{
  border-color:var(--cyan); color:var(--bg); background:var(--cyan); font-weight:700;
}

/* ---------- 数値・条件の一覧 ---------- */
.guide-table{
  width:100%; border-collapse:collapse; margin:0 0 24px;
  font-size:15px;
}
.guide-table th,.guide-table td{
  border-bottom:1px solid rgba(138,108,255,.16);
  padding:11px 10px; text-align:left; vertical-align:top;
}
.guide-table thead th{
  color:var(--muted); font-weight:400; font-size:13px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.guide-table td b{color:#fff;}
.guide-table code{font-size:13px;}
@media (max-width:560px){
  .guide-table{font-size:14px;}
  .guide-table th,.guide-table td{padding:9px 6px;}
}

/* 表が狭い画面でも崩れないよう、必要なときだけ横スクロールさせる */
.guide-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 24px;}
.guide-scroll .guide-table{margin:0; min-width:420px;}

/* ---------- 補足ボックス ---------- */
.guide-tip{
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
  background:rgba(15,18,42,.6);
  border-radius:0 14px 14px 0;
  padding:14px 18px;
  margin:0 0 24px;
  font-size:14.5px;
}
.guide-tip b{color:var(--cyan);}

/* ---------- 計算式 ---------- */
.guide-formula{
  border:1px solid var(--line);
  background:rgba(5,6,15,.7);
  border-radius:12px;
  padding:16px 18px;
  margin:0 0 20px;
  font-size:15px;
  line-height:1.8;
  overflow-x:auto;
  color:#fff;
}
.guide-formula small{display:block; margin-top:8px; font-size:13px; line-height:1.7;}

/* ---------- レア度の色見本 ---------- */
.rarity-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  margin-right:8px; vertical-align:middle;
  box-shadow:0 0 8px currentColor;
  background:currentColor;
}

/* ---------- FAQ ---------- */
.faq-q{
  font-size:16px; margin:32px 0 10px; padding-top:20px;
  border-top:1px solid rgba(138,108,255,.16);
  color:#fff;
}
.faq-q:first-of-type{border-top:0; padding-top:0; margin-top:0;}