/* ゲーム紹介ページ(/<game>)の共通の形。色は各ゲームの CSS(--ink / --white / --red / --muted と --ib-*)、
   ボタンは /common/room.css のものを使う。ゲーム固有の絵は public/<game>/intro.css に書く。
   ゲーム画面と違って縦に長い「読むページ」なので、ふつうにスクロールさせる。 */
html, body.intro { height: auto; }
body.intro { display: block; -webkit-user-select: text; user-select: text; padding: 0 16px; }
.intro a.ib-btn { text-align: center; text-decoration: none; line-height: 30px; }

.in-head { max-width: 560px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 0 0; }
.in-head a { display: inline-block; padding: 6px 0; color: var(--ink); font-size: 13px; text-decoration: none; }

.in-main { max-width: 560px; margin: 0 auto; }

/* いちばん上 */
.in-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0 28px; text-align: center; }
/* 人数・時間などは丸い札にせず、屋台の値札のように1行の文字で */
.in-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 18px; margin-top: 2px; font-size: 14px; }
.in-chips li { white-space: nowrap; }
.in-chips b { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 15px; color: var(--red); margin: 0 1px; }
.in-cta { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.in-note { font-size: 12px; color: var(--muted); }

/* 見出しつきの段 */
/* 見出しは黒い丸札にせず、説明書のように太い線の上に置く */
.in-sec { padding: 26px 0 22px; }
.in-sec h2 { font-size: 22px; font-weight: 900; padding-bottom: 4px; border-bottom: 4px solid var(--ink); margin-bottom: 16px; }
.in-text { font-size: 15px; line-height: 1.85; }
.in-text b { color: var(--red); }
.in-small { font-size: 13px; color: var(--muted); margin-top: 12px; }
.nw { white-space: nowrap; }

/* 結果のレシートの例 */
.in-receipt { max-width: 330px; margin: 18px auto 0; }

/* 遊び方 */
/* 遊び方: カードを並べず、左に大きな番号、右に絵と説明(取扱説明書の手順の形) */
.in-steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 22px; }
.in-steps li { position: relative; padding-left: 50px; }
.in-steps h3 { font-size: 17px; font-weight: 900; margin-top: 10px; }
.in-steps .no { position: absolute; left: 0; top: -6px; font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 40px; line-height: 1; color: var(--red); }
.in-steps p { font-size: 14px; line-height: 1.75; margin-top: 4px; }
.in-steps p b { color: var(--red); }
.in-step-art { min-height: 92px; background: var(--ib-bg); border: 2.5px solid var(--ink); border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 12px; }
.in-step-art .odai { width: 100%; max-width: 260px; }

/* 友達の呼び方 */
/* 友達の呼び方: バッジつきのカードにせず、見出し語+説明の2行 */
.in-invite { display: grid; grid-template-columns: 1fr; gap: 14px; }
.in-invite b { display: block; font-size: 15px; font-weight: 900; }
.in-invite p { font-size: 14px; line-height: 1.75; margin-top: 2px; }

.in-last { text-align: center; padding-bottom: 28px; }
.in-more { display: inline-block; margin-top: 16px; padding: 6px; color: var(--ink); font-size: 14px; text-underline-offset: 4px; }

.in-foot { max-width: 560px; margin: 0 auto; padding: 16px 0 calc(20px + env(safe-area-inset-bottom)); border-top: 3px solid var(--ink); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.in-foot b { color: var(--red); }
.in-foot a { color: var(--muted); text-underline-offset: 3px; }

/* PC・タブレット: 遊び方と呼び方を2列に */
@media (min-width: 640px) {
  .in-main, .in-head, .in-foot { max-width: 720px; }
  .in-hero .in-cta { max-width: 420px; }
  .in-steps, .in-invite { grid-template-columns: 1fr 1fr; }
  .in-last .in-cta { max-width: 420px; margin: 0 auto; }
}