/* 麻雀道場 - Day 1 最小スタイル (スマホ縦持ち 375px 基準) */
* {
  box-sizing: border-box;
}

/* Phase 1.5-F-Fix: [hidden] 属性を確実に効かせる。
   .home / .header__meta などに display:flex を指定すると CSS specificity で
   UA デフォルトの [hidden]{display:none} を上書きしてしまい、画面切替が
   効かなくなる不具合があったため、!important で強制する。 */
[hidden] {
  display: none !important;
}

:root {
  --bg: #f4f1ea;
  --board: #1a4d2e;
  --board-light: #2d6b46;
  --text: #2a2a2a;
  --text-muted: #5a5a5a;
  --accent: #c8554f;
  --chip-bg: #e9e0c9;
  --tile-w: 30px;
  --tile-h: 40px;
  --gap: 3px;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  /* iOS のノッチ / ホームインジケータを避けるための safe-area inset を加味 */
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(12px + env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(12px + env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ヘッダー */
.header {
  border-bottom: 1px solid #d3cdbe;
  padding-bottom: 8px;
}
.header__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.header__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.header__home-btn {
  appearance: none;
  background: transparent;
  border: 1px solid #c8c2af;
  color: #5a5a5a;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.header__home-btn:hover {
  background: #f5f1e6;
  color: #1a4d2e;
  border-color: #2d6b46;
}
.header__sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 8px;
}
.header__meta {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.tags {
  font-size: 11px;
}

/* 状況パネル */
.situation {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.situation__main {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}
.situation__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.chip {
  display: inline-block;
  background: var(--chip-bg);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  color: #6b5b3a;
}

.dora {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed #e2dccb;
}
.dora-label {
  font-size: 11px;
  color: var(--text-muted);
}

.scores {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}
.score-item {
  background: #f9f6ee;
  border-radius: 6px;
  padding: 4px 6px;
  text-align: center;
  font-size: 11px;
}
.score-item--self {
  background: #ffeec8;
  font-weight: 700;
}
.score-label {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
}
.score-value {
  display: block;
  font-feature-settings: "tnum";
  font-size: 12px;
}

/* 卓面 */
.board {
  background: var(--board);
  border-radius: 12px;
  /* padding-bottom を更に抑え、タイル下の「だまし領域」を最小化 */
  padding: 14px 10px 6px;
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--board-light);
}
.prompt {
  margin: 0 0 12px;
  font-size: 12px;
  text-align: center;
  color: #f7f3e7;
  line-height: 1.4;
}
/* Phase 1.5-AB: 実戦補足注記 (テンパイ取り前提を明示) */
.prompt__note {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  color: #c9c0a8;
  line-height: 1.4;
  opacity: 0.85;
}
.hand-area {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.hand {
  /* 多行 (2段) 表示でも全タイルが安定して可視・タップ可能になるよう
     column-gap / row-gap を分離し align-content を明示する */
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--gap);
  row-gap: 8px;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
  background: var(--board-light);
  /* padding-bottom を更に抑え、タイル直下のだまし領域を最小化 */
  padding: 14px 6px 2px;
  border-radius: 8px;
  width: 100%;
  /* min-height で 1 段分は確保。多行時は自然に伸長 */
  min-height: calc(var(--tile-h) + 16px);
}

.melds {
  display: flex;
  gap: 8px;
}
.melds.has-melds {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  width: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.meld-group {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  position: relative;
}
.meld-label {
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: #f7f3e7;
  opacity: 0.7;
  white-space: nowrap;
}
.melds.has-melds {
  padding-bottom: 16px;
}

/* 横向き牌 (鳴き元方向を示す) */
.tile.tile--rotated {
  width: var(--tile-h);  /* 横向きなので幅↔高さを入れ替え */
  height: var(--tile-w);
  /* 他の縦向き牌と下端を揃える */
  align-self: flex-end;
  margin-bottom: 0;
}
.tile.tile--rotated img {
  transform: rotate(-90deg);
  transform-origin: center;
  width: 100%;
  height: 100%;
}
/* 加槓: 横向き牌の上に重ねる */
.tile.tile--added-kan {
  position: absolute;
  margin-left: calc(-1 * var(--tile-h));
  margin-top: calc(-1 * var(--tile-w));
}
/* 暗槓の裏面 */
.tile.tile--back {
  background: #1a3a1a;
}
.tile.tile--back img {
  opacity: 0.85;
}

/* 牌
   - display: inline-flex で中央寄せにし、画像のフィットを安定させる
   - tile 全体をクリック対象にするため img には pointer-events: none
   - transition は短め (80ms) で「もっさり感」を回避
   - 重要: overflow: hidden は外す。これがあると ::before によるヒット領域拡張が
     .tile の枠でクリップされ、padding 領域までクリックが効かなくなる。
     代わりに border-radius は .tile img 側で持つ。 */
.tile {
  width: var(--tile-w);
  height: var(--tile-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  border-radius: 3px;
  background: #fafafa;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  transition:
    transform 80ms ease-out,
    box-shadow 80ms ease-out;
}
.tile img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  border-radius: 3px; /* .tile の overflow:hidden を外した分、img 側で丸める */
  /* object-fit はデフォルト fill (=stretch) のまま。
     contain にすると SVG のアスペクト比差分で .tile 箱内に余白が生まれ、
     ユーザーが「絵の下が反応しない」と感じる原因になるため敢えて指定しない */
}
.tile.tile--red {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.25),
    0 0 0 1.5px #d83a3a;
}
.tile.tile--meld {
  transform: scale(0.92);
}

/* --- Day 2 Step 1: タップ選択・正誤表示 --- */
/* すべての手牌タイルが確実にタップを受け取れるよう明示 */
.tile.tile--concealed {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(255, 200, 100, 0.25);
  touch-action: manipulation; /* iOS Safari でダブルタップズーム抑止、即時反応に */
}
/* === 診断モード (URL に ?debug を付けたとき有効) ===
   - 青い実線枠 = .tile 本体 (絵の領域)
   - 赤い破線枠 + 薄赤背景 = ::before ヒット判定領域 (絵の枠外までクリック可能な範囲)
   この赤い領域の中であればどこを押しても、そのタイルが選択される */
body.debug-hit-area .tile {
  outline: 1px solid rgba(0, 120, 255, 0.7);
  outline-offset: -1px;
}
body.debug-hit-area .tile.tile--concealed::before {
  background: rgba(255, 0, 0, 0.15);
  outline: 1px dashed rgba(255, 0, 0, 0.7);
  outline-offset: -1px;
}

/* タップ判定領域を視覚タイルの外側へ拡張:
   - 下端を 12px 拡げて .hand padding + .board padding 領域までカバー
   - 左右 1px は隣接タイル間 gap の半分弱を取り込む
   - 上方向 4px は title tooltip 干渉を避けつつ少しだけ余裕を持たせる
   - 透明背景で視覚に影響なし。pseudo-element クリックは親 .tile にイベント発火
   - 重要: .tile から overflow: hidden を撤去したのでこの拡張が実際に効く */
.tile.tile--concealed::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -12px;
  left: -1px;
  right: -1px;
  background: transparent;
}
.tile.tile--selectable {
  cursor: pointer;
}
/* :hover / :active で transform を使わない
   理由: PC のマウス操作で hover/active 中にタイルが動くと
   mousedown と mouseup の間に要素位置がずれ、クリックが
   タイル下端で取りこぼされる (牌の上部だけがタップ判定になる症状の原因)。
   視覚効果は box-shadow のリングだけで表現する。 */
@media (hover: hover) {
  .tile.tile--selectable:hover {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.25),
      0 0 0 1.5px rgba(255, 200, 100, 0.7);
  }
}
.tile.tile--selectable:active {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.25),
    0 0 0 2px #ffc864;
}
/* 選択確定状態のみ transform で持ち上げる (small) */
.tile.tile--selected {
  transform: translateY(-5px);
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.3),
    0 0 0 2px #ffc864;
}
.tile.tile--correct {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.25),
    0 0 0 2.5px #3aa757;
}
.tile.tile--correct::after {
  content: "✓";
  position: absolute;
  top: -8px;
  right: -4px;
  background: #3aa757;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  z-index: 2;
}
.tile.tile--incorrect {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.25),
    0 0 0 2.5px #d83a3a;
  opacity: 0.85;
}
.tile.tile--incorrect::after {
  content: "✕";
  position: absolute;
  top: -8px;
  right: -4px;
  background: #d83a3a;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  z-index: 2;
}
/* Phase 1.5-D: 3段階評価の「△ 惜しい」状態 (聴牌するがより広い受け入れの打牌が他にある) */
.tile.tile--partial {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.25),
    0 0 0 2.5px #f9a825;
}
.tile.tile--partial::after {
  content: "△";
  position: absolute;
  top: -8px;
  right: -4px;
  background: #f9a825;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  z-index: 2;
}
.tile {
  position: relative; /* ::after の絶対配置の基準 */
}

/* --- アクションボタン (これを切る / 次の問題へ) --- */
.action {
  display: flex;
  gap: 8px;
}
.btn {
  appearance: none;
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s, transform 0.05s;
}
.btn:active:not(:disabled) {
  transform: scale(0.98);
}
.btn--submit {
  background: #c8554f;
  color: #fff;
}
.btn--submit:disabled {
  background: #d3cdbe;
  color: #8a8470;
  cursor: not-allowed;
}
.btn--submit:not(:disabled):hover {
  background: #b14a44;
}
.btn--next {
  background: #2d6b46;
  color: #fff;
}
.btn--next:hover {
  background: #1a4d2e;
}

/* --- 結果パネル (正解 / 不正解) --- */
.result-panel {
  /* hidden 属性で表示制御 */
}
.result {
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.result--correct {
  border-left: 5px solid #3aa757;
}
.result--incorrect {
  border-left: 5px solid #d83a3a;
}
/* Phase 1.5-D: 「△ 惜しい」 partial 状態 (聴牌したが受け入れの広い別打牌あり) */
.result--partial {
  border-left: 5px solid #f9a825;
}
.result__verdict {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}
.result__verdict--correct {
  color: #2a8245;
}
.result__verdict--incorrect {
  color: #b22f2f;
}
/* Phase 1.5-D: 「△ 惜しい」 verdict 文の色 */
.result__verdict--partial {
  color: #8a5a00;
}
.result__detail {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
}
.result__sep {
  border: none;
  border-top: 1px dashed #d3cdbe;
  margin: 10px 0;
}
.result p {
  margin: 6px 0;
  font-size: 12px;
}
.result .dim {
  color: #8a8470;
  font-size: 11px;
  font-weight: normal;
}
.result .wait-detail {
  list-style: none;
  padding-left: 12px;
  margin: 4px 0 8px;
  font-size: 12px;
}
.result .wait-detail li {
  padding: 2px 0;
  border-left: 2px solid #d3cdbe;
  padding-left: 8px;
  margin: 2px 0;
}
.result .furiten-flag {
  color: #c8554f;
  background: #fff5f3;
  border-radius: 4px;
  padding: 4px 8px;
}

/* === Day 3-A: Step 1.5 リーチ判断画面 === */

/* 不正解時に Step 1.5 の前に出す「正解打牌のリーチ判断を確認しましょう」案内 */
.step1-5__notice {
  margin: 10px 0 6px;
  padding: 8px 10px;
  background: #e3f0fa;
  border-left: 4px solid #5589c6;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #2a4a6e;
}

.step1-5 {
  background: #fff8e1;
  border-left: 4px solid #ffa726;
  padding: 10px 12px;
  border-radius: 6px;
  margin: 10px 0 6px;
}
.step1-5__heading {
  margin: 0 0 6px;
  font-size: 14px;
  color: #6b4900;
}
.step1-5__hint,
.step1-5__warn {
  margin: 4px 0 8px;
  font-size: 12px;
  line-height: 1.5;
}
.step1-5__warn {
  color: #c8554f;
  font-weight: 600;
}
.step1-5__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.step1-5__col {
  background: #fff;
  border: 1px solid #ffd699;
  border-radius: 6px;
  padding: 8px 10px;
}
.step1-5__col--dama {
  border-color: #c8c2af;
}
.step1-5__col-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #6b4900;
}
.step1-5__col--dama .step1-5__col-title {
  color: #5a5a5a;
}
.step1-5__col p {
  margin: 2px 0;
  font-size: 12px;
}
.step1-5__col-warn {
  margin-top: 4px !important;
  color: #c8554f;
  font-weight: 600;
}
/* Phase 1.5-AD: Step 1.5 点数ヒント (details で折りたたみ) */
.step1-5__hints {
  margin: 8px 0 10px;
  background: #fff;
  border: 1px dashed #ffd699;
  border-radius: 6px;
  padding: 0;
}
.step1-5__hints[open] {
  border-style: solid;
}
.step1-5__hints-summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #6b4900;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.step1-5__hints-summary::-webkit-details-marker {
  display: none;
}
.step1-5__hints-summary::before {
  content: "▶";
  font-size: 10px;
  color: #b88a2a;
  transition: transform 0.15s;
  display: inline-block;
}
.step1-5__hints[open] .step1-5__hints-summary::before {
  transform: rotate(90deg);
}
.step1-5__hints-summary:hover {
  background: #fff8e1;
  border-radius: 6px;
}
.step1-5__hints-body {
  padding: 4px 10px 10px;
  border-top: 1px dashed #ffd699;
}
.step1-5__hint-line {
  margin: 6px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #6b4900;
}
.step1-5__hint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.step1-5__hint-block {
  background: #fff8e1;
  border-radius: 4px;
  padding: 6px 8px;
}
.step1-5__hint-block--dama {
  background: #f5f1e6;
}
.step1-5__hint-title {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 700;
  color: #6b4900;
}
.step1-5__hint-block--dama .step1-5__hint-title {
  color: #5a5a5a;
}
.step1-5__hint-block p {
  margin: 2px 0;
  font-size: 12px;
}
.step1-5__hints-note {
  margin: 8px 0 0;
  font-size: 10px;
  font-style: italic;
}

.step1-5__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.step1-5__buttons .btn {
  padding: 14px 8px;
  font-size: 14px;
}
.btn--riichi {
  background: #c8554f;
  color: #fff;
}
.btn--riichi:hover {
  background: #a83a34;
}
.btn--dama {
  background: #5a5a5a;
  color: #fff;
}
.btn--dama:hover {
  background: #404040;
}

/* Step 1.5 選択後 (アドバイス表示) */
.step1-5.step1-5--answered {
  background: #f5f1e6;
  border-left-color: #2d6b46;
}
.step1-5__choice {
  margin: 4px 0 6px;
  font-size: 13px;
}
.step1-5__advice {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 4px;
  background: #f1ede3;
  font-size: 12px;
  line-height: 1.5;
}
.step1-5__advice--good {
  background: #e4f3e9;
  color: #2a5d36;
}
.step1-5__advice--warn {
  background: #fff5f3;
  color: #b22f2f;
}
.step1-5__memo {
  margin-top: 6px;
  font-size: 11px;
}

/* 鳴き手の Step 1.5 自動スキップ表示 */
.meld-skip {
  padding: 10px 12px;
  background: #efeae0;
  border-left: 4px solid #5a5a5a;
  border-radius: 6px;
  margin: 10px 0 6px;
}
.meld-skip__main {
  margin: 0 0 4px;
  font-size: 13px;
}

/* === Day 3-B: Step 2 (待ち確認) / Step 3 (和了シナリオ) === */
.step2 {
  background: #eef5f0;
  border-left: 4px solid #2d6b46;
  padding: 10px 12px;
  border-radius: 6px;
  margin: 10px 0 6px;
}
.step2__heading {
  margin: 0 0 6px;
  font-size: 14px;
  color: #1a4d2e;
}
.step2 p {
  margin: 4px 0;
  font-size: 12px;
}

.step3 {
  background: #f6f0f8;
  border-left: 4px solid #8e5a9b;
  padding: 10px 12px;
  border-radius: 6px;
  margin: 10px 0 6px;
}
.step3__heading {
  margin: 0 0 6px;
  font-size: 14px;
  color: #5e3d6b;
}
/* Phase 1.5-AA: Step 3 コンパクト表示 (Step 4 との重複解消) */
.step3--compact {
  padding: 10px 12px;
}
.step3__summary {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  background: #fff;
  border-radius: 4px;
  padding: 8px 10px;
}
.step3__item {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.step3__label {
  font-weight: 600;
  color: #5e3d6b;
}
.step3__win-tile-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 36px;
  background: #fff;
  border: 1px solid #d4c5da;
  border-radius: 3px;
  padding: 1px;
  vertical-align: middle;
}
.step3__win-tile-mini img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.step3__win-tile-label {
  font-size: 13px;
  color: #2a2a2a;
}
.step3__next-hint {
  margin: 6px 0 0;
  font-size: 11px;
  font-style: italic;
}
.step3__no-win {
  margin: 4px 0;
  color: #8a8470;
  font-size: 12px;
}

/* === Day 4-B: Step 4 点数入力 / 採点結果 === */
.step4 {
  background: #fff5f3;
  border-left: 4px solid #c8554f;
  padding: 12px 14px;
  border-radius: 6px;
  margin: 10px 0 6px;
}
.step4__heading {
  margin: 0 0 6px;
  font-size: 14px;
  color: #832520;
}
.step4__sub {
  margin: 4px 0 10px;
  font-size: 12px;
  line-height: 1.5;
}
.step4__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.step4__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.step4__field label {
  font-size: 11px;
  color: #5a5a5a;
  font-weight: 600;
}
.step4__field select {
  padding: 8px 6px;
  font-size: 14px;
  border: 1px solid #c8c2af;
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
}
.btn--score {
  background: #c8554f;
  color: #fff;
  width: 100%;
}
.btn--score:hover:not(:disabled) {
  background: #a83a34;
}
.btn--score:disabled {
  background: #d3cdbe;
  color: #8a8470;
  cursor: not-allowed;
}

/* 採点後 (緑系に切替) */
.step4.step4--scored {
  background: #f5f1e6;
  border-left-color: #2d6b46;
}
.step4--error {
  background: #fff5f3;
  border-left-color: #c8554f;
  color: #832520;
}

/* 採点サマリー */
.score-summary {
  margin: 6px 0;
  font-size: 14px;
  font-weight: 700;
}
.score-summary--good {
  color: #2a5d36;
}
.score-summary--bad {
  color: #b22f2f;
}

/* 採点結果テーブル */
.score-result {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0;
  font-size: 12px;
}
.score-result th,
.score-result td {
  padding: 6px 8px;
  border-bottom: 1px solid #d3cdbe;
  text-align: left;
}
.score-result th {
  width: 56px;
  font-weight: 600;
  color: #5a5a5a;
}
.score-result__cell--ok {
  color: #2a5d36;
}
.score-result__cell--ng {
  color: #b22f2f;
}

/* 役一覧 (バッジ風) */
.score-level {
  margin: 8px 0;
  padding: 6px 10px;
  background: #fff5e0;
  border-left: 3px solid #f9a825;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #6b4900;
}
.score-yaku-heading {
  margin: 8px 0 4px;
  font-size: 12px;
}
.score-yaku-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.score-yaku-list li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #c8c2af;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
}
.score-yaku-list .yaku-han {
  color: #c8554f;
  font-weight: 600;
  font-size: 11px;
}

/* 内訳文字列 (例: "4翻 20符 — ツモ: 子 1300点 / 親 2600点（合計5200点）") */
.score-summary-ja {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  line-height: 1.5;
}

/* 狭画面では入力を縦並びに */
@media (max-width: 480px) {
  .step4__inputs {
    grid-template-columns: 1fr;
  }
}

/* === Day 5-B: ホーム画面・統計・履歴一覧 === */
.home {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home__hero {
  background: linear-gradient(135deg, #2d6b46 0%, #1a4d2e 100%);
  color: #fff;
  padding: 20px 18px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.home__title {
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.home__lead {
  margin: 0 0 14px;
  font-size: 12px;
  opacity: 0.92;
  line-height: 1.5;
}
.home__start-btn {
  appearance: none;
  background: #fff;
  color: #1a4d2e;
  border: none;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: background 0.1s;
}
.home__start-btn:hover {
  background: #ecf2ee;
}
.home__start-btn:active {
  transform: scale(0.98);
}

/* Phase 1.5-C (改): ランダム練習セクションの説明文・レベル選択 */
.home__hero-section {
  margin: 16px 0 4px;
  font-size: 14px;
  color: #fff;
  opacity: 0.95;
  letter-spacing: 0.04em;
}
.home__hero-desc {
  margin: 0 0 12px;
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.55;
  text-align: left;
}
.home__hero-note {
  margin: 14px 0 0;
  font-size: 11px;
  opacity: 0.82;
  line-height: 1.55;
  text-align: left;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
}

/* レベル選択ボタン (4つグリッド) */
.home__level-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.level-btn {
  appearance: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 10px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.level-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
}
.level-btn--active {
  background: #fff;
  color: #1a4d2e;
  font-weight: 700;
  border-color: #fff;
}
.level-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Phase 1.5-C-Fix 続: bottom nav の非表示は下の「ナビゲーション」セクションに統合済み。
   ここでの重複定義は撤去 (旧定義 .nav { display: grid } の後勝ちを防ぐため、
   かつては必要だったが、今は元定義そのものを display: none に変更済み)。
*/

.home__card {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.home__card-title {
  margin: 0 0 6px;
  font-size: 13px;
  color: #5a5a5a;
  letter-spacing: 0.02em;
}
.home__card p {
  margin: 4px 0;
  font-size: 13px;
}
.home__card--today {
  background: #fff5e0;
}
.home__card--today .home__card-title {
  color: #6b4900;
}
.home__card--stats {
  background: #e7f1ea;
}
.home__card--stats .home__card-title {
  color: #1a4d2e;
}

.home__history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.home__history-item {
  padding: 8px 0;
  border-bottom: 1px solid #ece6cf;
  font-size: 12px;
}
.home__history-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.home__history-time {
  font-size: 11px;
  color: #8a8470;
}
.home__history-id {
  font-weight: 700;
  font-size: 13px;
  color: #1a4d2e;
  margin: 2px 0;
}
.home__history-status {
  font-size: 11px;
  color: #5a5a5a;
  margin: 2px 0;
  line-height: 1.4;
}
.home__history-summary {
  margin-top: 4px;
  padding: 4px 8px;
  background: #f9f7f1;
  border-radius: 3px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #5a5a5a;
  line-height: 1.5;
}

.home__no-history {
  margin: 12px 0;
  text-align: center;
  font-size: 12px;
  color: #8a8470;
  font-style: italic;
}

.home__clear-btn {
  appearance: none;
  background: transparent;
  border: 1px solid #d3cdbe;
  color: #8a8470;
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  margin: 8px auto 0;
  display: block;
  font-family: inherit;
  transition: all 0.15s;
}
.home__clear-btn:hover {
  background: #fff5f3;
  color: #b22f2f;
  border-color: #b22f2f;
}

/* Phase 1.5-C-Cleanup: 旧問題選択UI (.filter-row, .filter-btn, .problem-list,
   .problem-card 系) を撤去。ランダム出題方式への完全切替に伴い、
   タグフィルタ・問題カード一覧・個別問題開始ボタンは廃止された。
   ネタバレ防止のためホーム画面では問題内容を一切出さない方針。

   旧UIに関連する CSS は本コミットで削除済み。Phase 2 で「履歴ビュー」等
   別UIを追加する場合は、新規セレクタ名 (例: .history-card 等) を使うこと。
*/

/* 0件時の練習開始ボタン (disabled 状態を明確に) */
.home__start-btn:disabled {
  background: #d3cdbe;
  color: #8a8470;
  cursor: not-allowed;
}

/* Day 6: バージョン表示 (フッター風) */
.home__version {
  text-align: center;
  font-size: 10px;
  color: #aaa39a;
  margin: 16px 0 4px;
  letter-spacing: 0.04em;
}

/* Phase 1.5-N: 「将来構想を見る」リンク (ホーム下部、目立ちすぎない位置) */
/* Phase 1.5-AE: 「学習ガイドを見る」リンクも同じスタイルを共有 */
.home__vision-link,
.home__guide-link {
  text-align: center;
  margin: 12px 0 4px;
  font-size: 12px;
}
.home__vision-link a,
.home__guide-link a {
  color: #5a6b48;
  text-decoration: none;
  border-bottom: 1px dashed #aab39a;
  padding-bottom: 1px;
}
.home__vision-link a:hover,
.home__vision-link a:active,
.home__guide-link a:hover,
.home__guide-link a:active {
  color: #1a4d2e;
  border-bottom-style: solid;
}
.home__guide-link {
  margin-top: 16px;
  margin-bottom: 2px;
}
.home__vision-link {
  margin-top: 4px;
}

/* Phase 1.5-AE: guide.html (学習ガイドページ) の補助スタイル */
.guide__sub-heading {
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1a4d2e;
  border-bottom: 1px dashed #c8c0a8;
  padding-bottom: 3px;
}
.guide__list {
  margin: 6px 0 12px;
  padding: 0;
}
.guide__list dt {
  font-weight: 600;
  color: #2a2a2a;
  font-size: 13px;
  margin-top: 8px;
}
.guide__list dd {
  margin: 2px 0 6px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #3d3d3d;
}
.guide__han {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  background: #f1ede3;
  color: #5e3d0b;
  border-radius: 3px;
}
.guide__steps {
  margin: 6px 0 12px 0;
  padding-left: 22px;
}
.guide__steps > li {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.55;
}
.guide__steps > li > p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.55;
}

/* === Phase 1.5-N: 将来構想ページ (vision.html) === */
.vision {
  padding: 4px 0 16px;
}
.vision__intro {
  margin: 8px 0 16px;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, #2d6b46 0%, #1a4d2e 100%);
  color: #fff;
  border-radius: 10px;
}
.vision__title {
  margin: 0 0 8px;
  font-size: 18px;
}
.vision__lead {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
}
.vision__note {
  margin: 8px 0 0;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.5;
}
.vision__note.dim {
  color: #e8e8d8;
}
.vision__block {
  margin: 12px 0;
  padding: 12px 14px;
  background: #f6efde;
  border-left: 4px solid #c8a850;
  border-radius: 6px;
}
.vision__block--mild {
  background: #eef4ff;
  border-left-color: #6b8db8;
}
.vision__block--note {
  background: #fff5e6;
  border-left-color: #c8554f;
}
.vision__heading {
  margin: 0 0 8px;
  font-size: 15px;
  color: #1a4d2e;
}
.vision__block--mild .vision__heading {
  color: #1a3d6b;
}
.vision__block--note .vision__heading {
  color: #8a3530;
}
.vision__block p {
  margin: 6px 0;
  font-size: 13px;
  line-height: 1.7;
}
.vision__list {
  margin: 6px 0 4px;
  padding-left: 22px;
}
.vision__list li {
  font-size: 13px;
  line-height: 1.7;
  margin: 4px 0;
}
.vision__back {
  text-align: center;
  margin: 20px 0 8px;
}
.vision__back-link {
  display: inline-block;
  padding: 8px 16px;
  background: #1a4d2e;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
}
.vision__back-link:hover,
.vision__back-link:active {
  background: #2d6b46;
}
.vision__footer {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid #e8e0c8;
}
@media (max-width: 480px) {
  .vision__title {
    font-size: 16px;
  }
  .vision__heading {
    font-size: 14px;
  }
  .vision__block p,
  .vision__list li {
    font-size: 12px;
  }
}

/* === Day 4-C: Step 5 答え合わせ・振り返り === */
/* 全体: Step 4 採点結果より色合いを抑え、「まとめ」感を出す */
.step5 {
  background: #f9f7f1;
  border-left: 4px solid #5a7a8c;
  padding: 12px 14px;
  border-radius: 6px;
  margin: 10px 0 6px;
}
.step5__heading {
  margin: 0 0 8px;
  font-size: 14px;
  color: #2f4d5c;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Day 5-A: 「保存しました」バッジ (LocalStorage 保存成功時に Step 5 見出し横へ) */
.step5__saved {
  display: inline-block;
  font-size: 10px;
  font-weight: normal;
  background: #e4f3e9;
  color: #2a5d36;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #b6dec5;
  letter-spacing: 0.02em;
}

/* 各カード (何切る / リーチ判断 / 待ち確認 / 和了シナリオ / 点数計算) */
.step5__block {
  background: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  border-left: 3px solid #cdc8b5;
}
.step5__block-title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: #5a5a5a;
  letter-spacing: 0.02em;
}
.step5__block-content {
  font-size: 12px;
  line-height: 1.55;
}
.step5__block-content p {
  margin: 3px 0;
}
.step5__block-content em {
  font-style: normal;
  font-weight: 600;
  color: #2f4d5c;
}

/* 「役なし和了不可」のような注意ライン */
.step5__warn {
  margin-top: 4px !important;
  padding: 4px 8px;
  background: #fff5f3;
  border-radius: 3px;
  color: #b22f2f;
  font-size: 11px;
  font-weight: 600;
}

/* 総合コメント (正解度別の色分け) */
.step5__overall {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
}
.step5__overall--good {
  background: #e4f3e9;
  border-left: 3px solid #2a5d36;
  color: #2a5d36;
}
.step5__overall--neutral {
  background: #fdf6e4;
  border-left: 3px solid #c8a444;
  color: #6b4900;
}
.step5__overall--needs-work {
  background: #fce8e6;
  border-left: 3px solid #b22f2f;
  color: #832520;
}

/* 補足: 教育的なヒント (役なし和了不可があるときなど) */
.step5__note {
  margin-top: 6px;
  padding: 8px 12px;
  background: #fffdf3;
  border-left: 3px solid #c8a444;
  border-radius: 4px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: #6b4900;
}

/* Phase 1.5-Y: Step 5 最下部の「次の問題へ」ボタン (スマホで下まで読んだ後、
   そのまま次の問題に進めるようにするための追加導線。
   既存の action エリア #btn-next と動作・スタイルは共有しつつ、
   横幅広めで押しやすく、Step 5 の他要素から少し離して目立たせる) */
.step5__bottom-action {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed #c8c2b0;
  text-align: center;
}
.step5__bottom-next {
  width: 100%;
  max-width: 360px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  /* 色 (background/color) は .btn .btn--next から継承 */
}
.step5__bottom-next:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 狭画面では比較表とボタンを縦並びに */
@media (max-width: 480px) {
  .step1-5__compare,
  .step1-5__buttons {
    grid-template-columns: 1fr;
  }
}

/* デバッグ表示 (Day 1 用の参考解説) */
.debug {
  font-size: 12px;
  color: var(--text-muted);
}
.debug details {
  background: #fff;
  border: 1px dashed #d3cdbe;
  border-radius: 8px;
  padding: 8px 10px;
}
.debug summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}
.debug p {
  margin: 6px 0;
}
.debug .dim {
  color: #8a8470;
  font-size: 11px;
  font-weight: normal;
}
.debug .wait-detail {
  list-style: none;
  padding-left: 12px;
  margin: 4px 0 8px;
  font-size: 12px;
}
.debug .wait-detail li {
  padding: 2px 0;
  border-left: 2px solid #d3cdbe;
  padding-left: 8px;
  margin: 2px 0;
}
.debug .furiten-flag {
  color: #c8554f;
  background: #fff5f3;
  border-radius: 4px;
  padding: 4px 8px;
}
.debug .furiten-flag {
  color: #b3261e;
  background: #ffe5e2;
  border-radius: 4px;
  padding: 4px 6px;
  font-weight: 600;
}

/* Phase 1.5-C-Cleanup: bottom nav (.nav, .nav__btn, .nav__counter) を全削除。
   HTML 側からも nav 要素を物理削除済みのため、関連 CSS も不要。
   練習画面の正規ナビゲーション導線は以下の2つ:
     - Step 5 完了後の「次の問題へ →」(.btn--next, action パネル内)
     - ヘッダー右上の「🏠 ホームへ」(.header__home-btn)
   Phase 2 で nav を復活させる場合は、別名 (例: .practice-nav) で実装すること。 */

/* === Phase 1.5-G: Step 3/4 用の和了形 (winhand) 表示 ===
   - .winhand-wrap: 全体の枠 (タイトル + 牌姿)
   - .winhand: 牌姿の横並び (concealed → 区切り → 和了牌 → 副露)
   - .tile--win: 和了牌の強調 (浮かせる + 枠線)
   - ツモ/ロンで色を変える (.winhand--tsumo / .winhand--ron)
   - 幅が狭ければ flex-wrap で折り返す */
.winhand-wrap {
  margin: 10px 0 12px;
  padding: 10px 10px 12px;
  background: #f6efde;
  border: 1px solid #d9c9a0;
  border-radius: 10px;
}
.winhand__title {
  margin: 0 0 8px;
  font-size: 13px;
  color: #5a4d2a;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.winhand__win-tile-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.winhand--tsumo .winhand__win-tile-tag {
  background: #2d6b46;
}
.winhand {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 8px;
  column-gap: 6px;
}
.winhand__concealed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: flex-end;
}
.winhand__win {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 2px dashed #b8a378;
  position: relative;
}
.winhand__win-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: #fff;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.2;
}
.winhand--tsumo .winhand__win-label {
  color: #2d6b46;
  border-color: #2d6b46;
}
/* 和了牌そのものを浮かせて強調 */
.winhand__win .tile--win {
  transform: translateY(-3px);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: 0 3px 6px rgba(200, 85, 79, 0.3);
}
.winhand--tsumo .winhand__win .tile--win {
  outline-color: #2d6b46;
  box-shadow: 0 3px 6px rgba(45, 107, 70, 0.3);
}
/* 副露ブロック: 手牌+和了牌の右に少し離して並べる */
.winhand__melds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid #c9bd9b;
}
/* スマホ幅では副露ブロックが次の行に行きやすいので、左境界線を控えめに */
@media (max-width: 480px) {
  .winhand-wrap {
    padding: 8px;
  }
  .winhand__melds {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    width: 100%;
  }
}

/* === Phase 1.5-H: 点数計算サポート表示 ===
   - .calc-context: 情報サマリーカード (親/子・リーチ・ドラ)
   - .tile--dora / .tile--aka: ドラ・赤ドラのバッジ付き牌
   - .fu-breakdown: 符の内訳 (現状は合計のみ + 注記)
   - .score-call-name: 実戦の点数の呼び名 */
.calc-context {
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: #eef4ff;
  border: 1px solid #b8cce8;
  border-radius: 8px;
  font-size: 13px;
}
.ctx-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.ctx-row--top {
  font-size: 14px;
}
.ctx-role {
  color: #1a3d6b;
}
.ctx-riichi {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
.ctx-riichi--on {
  background: #c8554f;
  color: #fff;
}
.ctx-riichi--off {
  background: #e6e6e6;
  color: #555;
}
.ctx-riichi--meld {
  background: #d9c9a0;
  color: #5a4d2a;
}
.ctx-riichi--pending {
  background: transparent;
  color: #888;
  font-style: italic;
}
.ctx-riichi-bet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff8dc;
  border: 1px solid #c8a850;
  border-radius: 4px;
  font-size: 12px;
  color: #6b5020;
  font-weight: 600;
}
.ctx-riichi-bet__stick {
  display: inline-block;
  width: 24px;
  height: 6px;
  background: linear-gradient(90deg, #fff 0%, #fff 40%, #c8554f 40%, #c8554f 60%, #fff 60%, #fff 100%);
  border: 1px solid #999;
  border-radius: 2px;
}
.ctx-label {
  color: #5a5a5a;
  font-weight: 600;
}
.ctx-label--small {
  font-size: 12px;
}
.ctx-tiles {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.ctx-tile {
  display: inline-block;
  width: 22px;
  height: 30px;
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #aaa;
  vertical-align: middle;
}
.ctx-tile img {
  width: 100%;
  height: 100%;
  display: block;
}
.ctx-tile--actual {
  border-color: #c8554f;
  box-shadow: 0 0 0 1px #c8554f inset;
}
.ctx-arrow {
  color: #888;
  font-weight: 700;
}
.ctx-dora-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ctx-dora-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}
.ctx-dora-tag {
  display: inline-block;
  padding: 0 6px;
  background: #c8554f;
  color: #fff;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}
.ctx-dora-tag--aka {
  background: #d72d2d;
}
.ctx-dora-total {
  font-weight: 700;
  color: #c8554f;
}

/* タイルへのドラ・赤ドラバッジ。tile (position:relative はベース指定) の右上に配置 */
.tile--dora,
.tile--aka {
  position: relative;
}
.tile__dora-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #c8554f;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  line-height: 1;
  pointer-events: none;
}
.tile__dora-badge--aka {
  background: #d72d2d;
}

/* 符内訳 (Phase 1.5-I: engine fu_details + 切り上げ補完 対応) */
.fu-breakdown {
  margin: 10px 0;
  padding: 10px 12px;
  background: #f5f5f5;
  border-radius: 6px;
  font-size: 13px;
}
.fu-breakdown__heading {
  margin: 0 0 6px;
}
.fu-breakdown__list {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
}
.fu-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px dashed #ddd;
}
.fu-item:last-child {
  border-bottom: none;
}
.fu-item__name {
  flex: 0 0 auto;
  min-width: 140px;
}
.fu-item__name--unknown {
  font-family: monospace;
  color: #888;
}
.fu-item__value {
  font-weight: 700;
  color: #444;
}
.fu-item__note {
  font-size: 11px;
}
.fu-item--roundup {
  background: #fff8dc;
  margin: 4px -4px 0;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #d9c9a0;
  border-bottom: 1px solid #d9c9a0;
}
.fu-item--warn {
  background: #ffe5e2;
  color: #b3261e;
  padding: 4px 8px;
  border-radius: 4px;
}
.fu-breakdown__total {
  margin: 6px 0 0;
  padding-top: 4px;
  border-top: 2px solid #aaa;
  font-size: 14px;
}
.fu-breakdown__notice {
  margin: 4px 0 0;
  font-size: 11px;
}
@media (max-width: 480px) {
  .fu-item__name {
    min-width: 110px;
  }
}

/* 実戦での点数の呼び名 */
.score-call-name {
  margin: 8px 0 4px;
  padding: 6px 10px;
  background: #fff8dc;
  border-left: 4px solid #c8a850;
  border-radius: 4px;
  font-size: 13px;
}
.score-call-name__label {
  color: #6b5020;
  font-weight: 600;
}
/* Phase 1.5-K-Fix: 呼称に地域差・個人差がある旨の注記 (小さめ・薄め) */
.score-call-name__note {
  margin: 2px 0 8px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1.4;
  color: #8a8470;
}

/* スマホ縦持ちで calc-context が窮屈にならないように */
@media (max-width: 480px) {
  .calc-context {
    padding: 8px 10px;
    font-size: 12px;
  }
  .ctx-row {
    gap: 6px;
  }
  .ctx-tile {
    width: 20px;
    height: 27px;
  }
}

/* 小さい画面用の微調整 */
@media (max-width: 360px) {
  :root {
    --tile-w: 26px;
    --tile-h: 35px;
  }
  .app {
    padding: 8px;
  }
}

/* --- 横画面・幅広画面 (タブレット・PC・スマホ横持ち)
   推奨案A: 14牌が自然に1列に並ぶように --tile-w/h/gap を拡大し
   .app の max-width も広げる。flex-wrap は維持するため、もし幅が
   足りなくなれば自動で折り返す (見切れない) --- */
@media (min-width: 600px) {
  :root {
    --tile-w: 34px;
    --tile-h: 45px;
    --gap: 4px;
  }
  .app {
    max-width: 720px;
  }
  /* 14 tiles × 34 + 13 gaps × 4 = 528px。hand padding 12 + app padding 24
     = 564px。720px max-width 内に 1列で収まる */
}

/* タブレット・PC級 */
@media (min-width: 900px) {
  :root {
    --tile-w: 40px;
    --tile-h: 54px;
    --gap: 5px;
  }
  .app {
    max-width: 820px;
  }
}