* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 22px 24px 40px;
  font-family: "Zen Maru Gothic", -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #2c2416;
  background: #fdf6e3;
  line-height: 1.8;
  font-size: 14px;
  /* 長い単語やURLで横スクロールが出ると、ポップアップ(iframe)の中では
     スクロールバーが見えず「画面が崩れている」ようにしか見えない。必ず折り返す。 */
  overflow-wrap: break-word;
}

h1 {
  font-size: 20px;
  font-weight: 800;
  color: #1f5c45;
  margin: 0 0 10px;
}

h2 {
  font-size: 15px;
  font-weight: 700;
  color: #1f5c45;
  margin: 26px 0 8px;
  border-bottom: 2px solid #e5d18f;
  padding-bottom: 4px;
}

/* h2の中の小見出し(例: 「チップと点数」の中の「ドラ」)。h2ほど強くせず、
   下線も付けない(h2の区切りと紛らわしくなるため)。 */
h3 {
  font-size: 13px;
  font-weight: 700;
  color: #1f5c45;
  margin: 16px 0 6px;
}

p {
  margin: 8px 0;
}

ul, ol {
  padding-left: 1.4em;
  margin: 8px 0;
}

li {
  margin: 4px 0;
}

a {
  color: #a5822a;
  font-weight: 600;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
  /* 中身の長さで列幅が伸びて表がはみ出すのを防ぐ(狭い画面での横崩れ対策)。 */
  table-layout: fixed;
}

th, td {
  border: 1px solid #e5d18f;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

th {
  background: #e5d18f;
  width: 30%;
}

hr {
  border: none;
  border-top: 2px solid #e5d18f;
  margin: 22px 0;
}

.meta {
  color: #8a7d5f;
  font-size: 13px;
}

.disclaimer {
  background: #fbe0e0;
  border: 2px solid #e6c8b0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12px;
  color: #6b4a2f;
  margin-top: 22px;
}

/* 以下は遊び方ページ(rules.html)専用の図解パーツ。他の規約ページには影響しない。 */

.rules-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.rules-hero .hero-icon {
  font-size: 44px;
  flex-shrink: 0;
}

.rules-hero h1 {
  margin: 0 0 4px;
}

.figure-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0 10px;
  padding: 16px 12px;
  background: #fffaf0;
  border: 2px solid #e5d18f;
  border-radius: 16px;
}
/* あがりの例は9枚並ぶので、間隔をさらに詰める。 */
.figure-hand {
  gap: 4px;
}
.figure-plus {
  font-weight: 900;
  color: #a5822a;
  flex: 0 0 auto;
}

.figure-caption {
  text-align: center;
  color: #8a7d5f;
  font-size: 12px;
  margin: -4px 0 18px;
}

/* 牌はゲーム画面と同じ縦カード(スートを上・数字を下)。
   【横並びをやめた理由】以前は44×58の箱に絵文字と数字を横に並べていたため、
   スマホ幅では2文字が箱に収まらず、はみ出して崩れて見えていた。
   幅は画面幅に追従させ、9枚並べても折り返しで必ず収まるようにする。 */
.tile-demo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: clamp(28px, 8vw, 40px);
  aspect-ratio: 40 / 54;
  border-radius: 8px;
  background: #fff8e7;
  border: 2px solid #a5822a;
  flex: 0 0 auto;
  line-height: 1;
}
.tile-demo-suit {
  font-size: clamp(0.85rem, 3.4vw, 1.15rem);
  line-height: 1;
}
.tile-demo-num {
  font-size: clamp(0.75rem, 3vw, 1rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* スートごとの色分けもゲーム画面に合わせる。 */
.tile-demo.suit-leaf .tile-demo-num {
  color: #2f8f4e;
}
.tile-demo.suit-berry .tile-demo-num {
  color: #d13b53;
}
.tile-demo.suit-star .tile-demo-num {
  color: #c98a00;
}
/* 字牌(猫・魚・鳥)。2026-08-16「猫鳥魚は文字だけでなく絵文字も付けて」より、数字牌と
   同じ「上段(絵文字) + 下段(漢字1文字)」の縦2段構成(ゲーム画面のtileInnerHtmlと同じ考え方。
   上段はtile-demo-suitを絵文字用に共用する)。色もゲーム画面(game.css)と揃える:
   猫=陸の土色、魚=海の深い青緑、鳥=空の水色。 */
.tile-demo-honor {
  font-size: clamp(0.75rem, 3vw, 1rem);
  font-weight: 900;
  line-height: 1;
}
.tile-demo.suit-tori {
  border-color: #4f97d1;
}
.tile-demo.suit-tori .tile-demo-honor {
  color: #2f72b8;
}
.tile-demo.suit-neko {
  border-color: #a3835a;
}
.tile-demo.suit-neko .tile-demo-honor {
  color: #7a5c3e;
}
.tile-demo.suit-sakana {
  border-color: #2f9c94;
}
.tile-demo.suit-sakana .tile-demo-honor {
  color: #1f7a72;
}

/* 役一覧のカード(2026-08-16「役一覧、参考例も絵付きで」)。表だと文字だけになって
   しまうため、役ごとに実例の牌姿(figure-row)を添えたカード形式に変えた。 */
.yaku-card {
  border: 2px solid #e5d18f;
  border-radius: 16px;
  padding: 12px 14px 2px;
  margin: 12px 0;
  background: #fffaf0;
}
.yaku-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.yaku-card-name {
  font-size: 16px;
  font-weight: 800;
  color: #1f5c45;
}
.yaku-card-mult {
  font-size: 15px;
  font-weight: 900;
  color: #a5822a;
}
.yaku-card-desc {
  margin: 4px 0 0;
}
.yaku-card .figure-row {
  margin: 12px 0 2px;
}
.yaku-card .figure-caption {
  margin: -2px 0 8px;
}

/* 役一覧カードの例(8枚+「+」記号2つ=10要素)を、狭い画面でも折り返さず1行で
   見せる(2026-08-16「役もっと横幅を調整するかして役の例が一段で見えるように」)。
   .tile-demo の既定サイズ(下限28px)のままだと、320px幅のiframeでは1行に収まらない。
   実際の内訳で計算した値:
     320(viewport) − body左右padding(14px×2、@media(max-width:480px)) − .yaku-card
     左右padding(14px×2) − .yaku-card border(2px×2) − .figure-row左右padding
     (8px×2、@media側) − .figure-row border(2px×2) = 240px が牌の並び全体に使える幅。
   10要素の間のgap9か所ぶんと「+」2つぶんを差し引いた残りを牌8枚で割ると、
   1枚あたりの上限は約25.75px。ここでは安全マージンを見て320px幅で約24pxになるよう
   clampを設定した(他のfigure-row――牌の種類・あがりの形の導入部――は一度に
   並べる枚数が少なく、大きいままのほうが読みやすいので対象外のまま)。 */
.yaku-card .tile-demo {
  width: clamp(20px, 7.5vw, 34px);
}
.yaku-card .tile-demo-suit {
  font-size: clamp(0.68rem, 2.6vw, 0.95rem);
}
.yaku-card .tile-demo-num,
.yaku-card .tile-demo-honor {
  font-size: clamp(0.62rem, 2.3vw, 0.85rem);
}
.yaku-card .figure-hand {
  gap: 2px;
}
.yaku-card .figure-plus {
  font-size: 12px;
  margin: 0 -1px; /* 「+」の左右の余白を切り詰めて、その分を牌の幅に回す */
}

/* 1局の流れを示すステップ図(2026-08-16の遊び方ページ簡素化で追加)。
   箇条書きの<ol>だと文章として読む必要があるが、数字バッジ+矢印の横並びなら
   「何が何回起きるか」が一目でわかる。既存の.figure-row/.status-chipと同じ
   クリーム背景・アンバー枠の見た目の言語に揃えてある。 */
.flow-steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 10px;
}
.flow-step {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffaf0;
  border: 2px solid #e5d18f;
  border-radius: 14px;
  padding: 8px 12px;
  flex: 1 1 200px;
  min-width: 140px;
}
.flow-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1f5c45;
  color: #fffaf0;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-label {
  font-size: 12.5px;
  line-height: 1.5;
}
.flow-arrow {
  align-self: center;
  color: #a5822a;
  font-weight: 900;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
@media (max-width: 480px) {
  .flow-arrow {
    display: none; /* 縦積みになった段では矢印が浮いて見えるので隠す */
  }
  .flow-step {
    flex-basis: 100%;
  }
}

/* 役一覧の「理論上の最高得点」ショーケース(Task 4)。他の.yaku-cardと同じ骨格だが、
   一目で「特別枠」とわかるよう金色のグラデーション枠で目立たせる。 */
.yaku-showcase {
  border: 2px solid #c9962f;
  border-radius: 16px;
  padding: 14px 16px 4px;
  margin: 18px 0;
  background: linear-gradient(160deg, #fff6db, #fdf0c8);
  box-shadow: 0 2px 0 #e5d18f;
}
.yaku-showcase-title {
  font-size: 15px;
  font-weight: 900;
  color: #8a5a00;
  margin: 0 0 6px;
}
.yaku-showcase-note {
  font-size: 12px;
  color: #8a7d5f;
  margin: 0 0 10px;
}
.yaku-showcase-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.yaku-showcase-stack span {
  background: #fffaf0;
  border: 2px solid #c9962f;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b4a2f;
}
.yaku-showcase-total {
  font-size: 13px;
  font-weight: 800;
  color: #1f5c45;
  margin: 10px 0 2px;
}
.yaku-showcase-points {
  font-size: 22px;
  font-weight: 900;
  color: #8a5a00;
  margin: 0 0 10px;
}

.status-chip-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0;
}

.status-chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid #a5822a;
  background: #fffaf0;
}

/* スマホなど幅の狭い画面向け。参加画面から開くポップアップ(iframe)内でも、
   iframeの幅を基準にこの指定が効く。 */
@media (max-width: 480px) {
  body {
    padding: 18px 14px 32px;
  }

  th {
    width: 34%;
  }

  .rules-hero {
    gap: 10px;
  }

  .rules-hero .hero-icon {
    font-size: 34px;
  }

  h1 {
    font-size: 18px;
  }

  .figure-row {
    gap: 6px;
    padding: 14px 8px;
  }

  .figure-hand {
    gap: 3px;
  }
}