:root {
  --felt: #157046;
  --felt-dark: #0a3a24;
  --bg: #1a1d21;
  --panel: #23272e;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --accent: #f0b429;
  --border: #3a3f47;
  --hero: #ef4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  padding: 16px;
}

.app { max-width: 640px; margin: 0 auto; }

header { text-align: center; margin-bottom: 16px; }
header h1 { font-size: 1.4rem; color: var(--accent); }
.progress { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }

.card-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}

.meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tag {
  background: var(--felt-dark);
  color: #cfe9d8;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ===== ポーカーテーブル（楕円）＋座席 ===== */
.table-area {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 40px auto 44px;   /* 上下の余白＝はみ出すヒーロー席（UTG/BTN）のぶん */
  aspect-ratio: 10 / 7;
  overflow: visible;
}
.felt {
  position: absolute;
  inset: 14% 7%;             /* 楕円のフェルト面（外周に座席を置く余白） */
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--felt), var(--felt-dark));
  border: 6px solid #5a3b22; /* テーブルの木枠 */
  box-shadow: inset 0 0 30px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.4);
}
.felt-center {
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.street-label {
  display: block;
  font-size: 0.7rem;
  color: #bfe3cd;
  letter-spacing: 0.05em;
}
.pot-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 2px;
}

/* ボード（コミュニティカード） */
.board { display: flex; justify-content: center; gap: 3px; margin: 5px 0; }
.board .card {
  width: 26px; height: 36px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.board .card .rank { font-size: 0.85rem; }
.board .card .suit { font-size: 0.7rem; }

/* 履歴パネル */
.history {
  background: #1c2026;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 8px;
}
.hist-title { font-size: 0.8rem; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.hist-row { display: flex; gap: 8px; font-size: 0.82rem; padding: 2px 0; }
.hist-street { min-width: 118px; color: var(--muted); flex-shrink: 0; }
.hist-text { color: var(--text); }

/* ターン/リバーの出題ボタン */
.mode-btn.mode-postflop:not(.active) {
  border-color: #6d5acf;
  color: #cbb8ff;
}

/* 座席 */
.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 60px;
  text-align: center;
}
.seat-pos {
  display: inline-block;
  min-width: 42px;
  padding: 3px 9px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #2c313a;
  border: 2px solid var(--border);
  border-radius: 999px;
  color: #cdd2d8;
}
.dealer-btn {
  position: absolute;
  top: -8px; right: 2px;
  width: 20px; height: 20px;
  font-size: 0.7rem; font-weight: 800;
  color: #1a1d21; background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* 自分（ヒーロー）の座席を赤枠で強調 */
.seat.hero {
  width: 90px;
  padding: 7px 4px;
  border: 2px solid var(--hero);
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.12);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
  z-index: 3;
}
.seat.hero .seat-pos {
  background: #3a1620;
  border-color: var(--hero);
  color: #fff;
}
.seat-cards {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}
.you-tag {
  display: inline-block;
  margin-top: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: var(--hero);
  padding: 1px 9px;
  border-radius: 999px;
}

/* レイザー（相手がレイズした席）の強調 */
.seat.raiser .seat-pos {
  background: #4a2c00;
  border-color: var(--accent);
  color: #ffe7a8;
}
.raiser-tag {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #1a1d21;
  background: var(--accent);
  padding: 1px 7px;
  border-radius: 999px;
}

/* フォールドした席（赤文字で Fold） */
.seat.folded { opacity: 0.6; }
.seat.folded .seat-pos {
  background: #23272e;
  border-color: #2a2e35;
  color: var(--muted);
}
.fold-tag {
  display: block;
  margin-top: 3px;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--hero);
}

/* トランプ（基本サイズ。座席内では小さめに上書き） */
.card {
  width: 38px; height: 54px;
  background: #fff; color: #111;
  border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.card .rank { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.card .suit { font-size: 0.95rem; line-height: 1; }
.card.red { color: #d22; }

/* 裏向きカード（レイザーの手札アイコン） */
.card.back {
  width: 22px;
  height: 31px;
  background:
    repeating-linear-gradient(45deg, #7f1d1d 0 4px, #9b1c1c 4px 8px);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.table-caption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 10px;
}
.red-dot {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid var(--hero);
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  vertical-align: -2px;
  margin-right: 4px;
}

.situation {
  text-align: center;
  color: #e8f3ec;
  margin-top: 14px;
}

.question { font-size: 1.15rem; margin: 16px 0 14px; }

.options { display: grid; gap: 10px; }
.option {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  text-align: left;
  background: #2c313a;
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.option:hover { background: #353b45; }
.option.disabled { cursor: default; opacity: 0.9; }
.option.correct { border-color: #45c777; background: rgba(46, 125, 50, 0.35); }
.option.wrong   { border-color: #ef5350; background: rgba(198, 40, 40, 0.30); }

.explanation {
  margin-top: 18px;
  background: #1c2026;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
}
.explanation h3 { font-size: 1rem; margin: 14px 0 6px; color: var(--accent); }
.explanation ul { padding-left: 18px; }
.explanation li { margin-bottom: 8px; }
.verdict { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.correct-text { color: #45c777; }
.wrong-text { color: #ef5350; }
.summary { font-weight: 600; }
.danger-note {
  font-size: 0.85rem;
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid #ef5350;
  background: rgba(239, 83, 80, 0.08);
  border-radius: 4px;
}

/* ===== ハンドレンジ表 ===== */
.chart-block { margin-top: 18px; }
.chart-help { font-size: 0.82rem; color: var(--muted); margin-bottom: 4px; }
.chart-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.range-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 1px;
  max-width: 420px;
  margin: 0 auto;
}
.cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  border-radius: 2px;
  color: #0d0f12;
  overflow: hidden;
}
.cell.raise    { background: #3fb568; }
.cell.threebet { background: #e6584e; color: #fff; }
.cell.call     { background: #4a90d9; color: #fff; }
.cell.fold     { background: #2c313a; color: #6b7178; }
/* ポストフロップの強さ区分 */
.cell.value    { background: #3fb568; }
.cell.draw     { background: #4a90d9; color: #fff; }
.cell.medium   { background: #d9a441; color: #1a1d21; }
.cell.weak     { background: #2c313a; color: #6b7178; }
.cell.outrange { background: #16181b; color: #363b42; }
.cell.hero {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 6px 1px var(--accent);
  position: relative;
  z-index: 1;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--muted);
}
.lg { display: inline-flex; align-items: center; gap: 5px; }
.lg::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.lg.raise::before    { background: #3fb568; }
.lg.threebet::before { background: #e6584e; }
.lg.call::before     { background: #4a90d9; }
.lg.fold::before     { background: #2c313a; }
.lg.hero::before     { background: transparent; border: 2px solid var(--accent); }
.lg.pf-value::before  { background: #3fb568; }
.lg.pf-draw::before   { background: #4a90d9; }
.lg.pf-medium::before { background: #d9a441; }
.lg.pf-weak::before   { background: #2c313a; }

/* ===== GTO頻度バー ===== */
.freq-block { margin-top: 16px; }
.freq-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.freq-row.chosen { background: rgba(240, 180, 41, 0.12); }
.freq-label { flex: 0 0 40%; font-size: 0.82rem; }
.you-mark { color: var(--accent); font-weight: 700; font-size: 0.72rem; }
.freq-track {
  flex: 1;
  height: 16px;
  background: #2c313a;
  border-radius: 8px;
  overflow: hidden;
}
.freq-bar { height: 100%; border-radius: 8px; }
.freq-bar.bar-bet   { background: #3fb568; }
.freq-bar.bar-check { background: #6b7178; }
.freq-bar.bar-call  { background: #4a90d9; }
.freq-bar.bar-fold  { background: #e6584e; }
.freq-bar.bar-allin { background: #b3261e; }
.freq-val { flex: 0 0 40px; text-align: right; font-weight: 700; font-size: 0.85rem; }
.freq-note { font-size: 0.75rem; color: var(--muted); margin-top: 8px; }
.polar-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 10px;
  padding: 7px 10px;
  border-left: 3px solid var(--accent);
  background: rgba(240, 180, 41, 0.08);
  border-radius: 4px;
  line-height: 1.55;
}
.gto-note {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 10px;
  padding: 8px 11px;
  border-left: 3px solid #3d7cb8;
  background: rgba(61, 124, 184, 0.08);
  border-radius: 4px;
  line-height: 1.6;
}
.gto-note b { color: var(--text); }

/* ポストフロップで選んだボタン */
.option.chosen { border-color: var(--accent); background: rgba(240, 180, 41, 0.18); }

/* ===== ターン・リバー戦略 ===== */
.postflop-block { margin-top: 18px; }
.postflop-block p { margin-bottom: 6px; }
.postflop-block .note,
.postflop-block .ref { font-size: 0.8rem; color: var(--muted); }

.next-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--accent);
  color: #1a1d21;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.next-btn:hover { filter: brightness(1.05); }

footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 20px;
}
.footer-links { margin-top: 10px; }
.footer-links a {
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  line-height: 1.5;
}
.footer-links a:hover { border-color: var(--accent); }

.hidden { display: none; }

/* ===== ポジション選択バー ===== */
.mode-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}
.mode-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-right: 2px;
}
.mode-btn {
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  background: #2c313a;
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.mode-btn:hover { background: #353b45; }
.mode-btn.active {
  background: var(--accent);
  color: #1a1d21;
  border-color: var(--accent);
}

/* ===== ゲームモード選択バー（キャッシュ / MTT）===== */
.game-mode-bar { margin-bottom: 10px; }
#mode-bar { margin-bottom: 8px; }   /* 出題ポジション行は下のスタートバーと近づける */
.game-btn {
  padding: 7px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  background: #2c313a;
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.game-btn:hover { background: #353b45; }
.game-btn.active {
  background: var(--accent);
  color: #1a1d21;
  border-color: var(--accent);
}
/* MTTボタンは未選択時に色味を変えて区別しやすく */
.game-btn.game-mtt:not(.active) {
  border-color: #e08a3c;
  color: #f4c08a;
}

/* ===== 出題スタートバー（複数選択して開始）===== */
.start-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.start-quiz-btn {
  padding: 9px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  background: var(--felt);
  color: #fff;
  border: 2px solid var(--felt);
  border-radius: 999px;
  cursor: pointer;
}
.start-quiz-btn:hover { filter: brightness(1.08); }
.start-hint { font-size: 0.78rem; color: var(--muted); }

/* ===== スコア表示 ===== */
.score {
  margin-left: 10px;
  color: var(--accent);
  font-weight: 700;
}

/* ===== 結果画面 ===== */
.result-title {
  text-align: center;
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 12px;
}
.result-score {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
}
.result-msg {
  text-align: center;
  color: #cfe9d8;
  margin: 8px 0 18px;
}
.review-list { margin-bottom: 8px; }
.review-list h3 {
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 10px;
}
.all-correct {
  text-align: center;
  color: #45c777;
  font-weight: 700;
  padding: 10px 0;
}
.review-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #1c2026;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 0.92rem;
}
.review-pos {
  min-width: 44px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: #3a1620;
  border: 1px solid var(--hero);
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 0.8rem;
}
.review-hand { font-weight: 700; letter-spacing: 0.03em; }
.review-arrow { color: var(--muted); }
.review-ans { color: #45c777; font-weight: 600; }
.retry-all-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  background: #2c313a;
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
}
.retry-all-btn:hover { background: #353b45; }

/* ===== 苦手モードボタン ===== */
.mode-btn.mode-weak:not(.active) {
  border-color: #e6584e;
  color: #ffb3ad;
}

/* ===== ヘッズアップモードボタン ===== */
.mode-btn.mode-hu:not(.active) {
  border-color: #2bb3a3;
  color: #8fe6db;
}

/* ===== MTT 出題タブのグループ色分け ===== */
.mode-btn.mode-pf:not(.active)      { border-color: #5aa469; color: #a9e0b4; }  /* プッシュ/フォールド */
.mode-btn.mode-pf-hu:not(.active)   { border-color: #3fae8f; color: #93e6cf; }  /* 同・ヘッズアップ */
.mode-btn.mode-open:not(.active)    { border-color: #e08a3c; color: #f4c08a; }  /* オープン40BB */
.mode-btn.mode-open-hu:not(.active) { border-color: #d6a14e; color: #f0d49a; }  /* 同・ヘッズアップ */

/* MTT 出題タブのグループ区切りラベル（押せない見出し。flexで改行させて段組み化）*/
.mode-divider {
  flex-basis: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  margin: 6px 0 -2px;
  padding-left: 2px;
  letter-spacing: 0.02em;
}

/* ===== 通算成績（結果画面）===== */
.lifetime-stats {
  margin: 18px 0 4px;
  background: #1c2026;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.lifetime-stats h3 { font-size: 0.98rem; color: var(--accent); margin-bottom: 4px; }
.lt-help, .lt-empty { font-size: 0.78rem; color: var(--muted); margin-bottom: 10px; }
.lt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lt-label { flex: 0 0 52px; font-size: 0.82rem; font-weight: 700; }
.lt-track {
  flex: 1;
  height: 14px;
  background: #2c313a;
  border-radius: 7px;
  overflow: hidden;
}
.lt-bar { height: 100%; border-radius: 7px; }
.lt-bar.lt-low  { background: #e6584e; }
.lt-bar.lt-mid  { background: #d9a441; }
.lt-bar.lt-high { background: #3fb568; }
.lt-val { flex: 0 0 96px; text-align: right; font-weight: 700; font-size: 0.82rem; }
.lt-sub { color: var(--muted); font-weight: 400; font-size: 0.74rem; }

/* 通算成績リセットボタン */
.reset-stats-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  font-size: 0.85rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.reset-stats-btn:hover { background: #2c313a; color: var(--text); }

@media (max-width: 480px) {
  header h1 { font-size: 1.2rem; }
  .card-panel { padding: 16px 12px; }
  .table-area { aspect-ratio: 10 / 8; }   /* スマホは縦長にして座席の余裕を確保 */
  .seat { width: 52px; }
  .seat-pos { min-width: 36px; padding: 2px 7px; font-size: 0.72rem; }
  .seat.hero { width: 80px; }
  .card { width: 32px; height: 46px; }
  .card .rank { font-size: 0.95rem; }
  .card .suit { font-size: 0.8rem; }
}

/* ===== 応援（サポーター / 投げ銭）ボックス ===== */
.support-box {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px;
  text-align: center;
}
.support-title { font-size: 1rem; color: var(--accent); margin-bottom: 6px; }
.support-lead {
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.6;
}
.support-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.support-btn {
  display: inline-block;
  padding: 11px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
}
.support-btn.premium { background: var(--accent); color: #1a1d21; }
.support-btn.tip { background: transparent; color: var(--accent); border-color: var(--accent); }
.support-btn:hover { filter: brightness(1.08); }

/* ===== 選択肢の番号ヒント（キーボード 1〜9 に対応）===== */
.option { display: flex; align-items: center; gap: 12px; }
.opt-key {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: #1c2026;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.opt-label { flex: 1; }

/* ===== 連続学習日数（ストリーク）===== */
.streak-line {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 16px;
}
.streak-item {
  font-size: 0.85rem;
  color: #cfe9d8;
  background: #1c2026;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
}
.streak-item strong { color: var(--accent); font-size: 1rem; }

/* ===== 学習データの書き出し／読み込み ===== */
.data-io {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.data-io-btn {
  flex: 1 1 140px;
  min-width: 0;
  padding: 11px;
  font-size: 0.85rem;
  font-weight: 700;
  background: #2c313a;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.data-io-btn:hover { background: #353b45; }
.data-io-msg { margin-top: 8px; font-size: 0.8rem; text-align: center; }
.data-io-msg.io-ok  { color: #45c777; }
.data-io-msg.io-err { color: #ef5350; }
.data-io-help {
  margin-top: 6px;
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

/* ===== アカウント（クラウド同期・ログイン）バー ===== */
.account-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #1c2026;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.82rem;
}
.acct-lead, .acct-status { color: var(--muted); }
.acct-status strong { color: var(--accent); }
.acct-input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--text);
  background: #2c313a;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.acct-btn {
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  background: #2c313a;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.acct-btn.primary { background: var(--accent); color: #1a1d21; border-color: var(--accent); }
.acct-btn:hover { filter: brightness(1.08); }
.acct-msg { flex-basis: 100%; color: var(--muted); font-size: 0.78rem; }

/* vs3BET の「このモデルの前提」注記（2026-08-10）。
   計算した数字と、線引きの前提を見た目で区別するため小さく灰色にする。 */
.model-note {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
}
/* 出題タブ：vs3BET はプリフロップ系なのでポストフロップとは色を分ける */
.mode-btn.mode-vs3bet:not(.active) { border-color: #7c5cff; color: #9b86ff; }

/* vs3BET で「勝率だけの判断」とGTOが食い違う問題の強調（2026-08-11）。
   この7問がこのカテゴリの山場なので、目で見て分かるようにする。 */
.conflict-note { display: block; margin: 6px 0; color: var(--accent, #e8b04b); }

/* 4人卓モードのボタン（2026-08-11）。キャッシュ／MTTと見分けがつく色にする。 */
.game-btn.game-four:not(.active) { border-color: #3fa9a0; color: #5fd0c6; }
.game-btn.game-four.active { background: #3fa9a0; border-color: #3fa9a0; color: #08201f; }

/* 3BETポットのSPR表示（2026-08-11）。ポットに対する残りの浅さが打ち方を決めるので目立たせる。 */
.spr-note { color: var(--accent, #e8b04b); }

/* ===== はじめての人向けの学習コース（5ステップ）===== */
.course-bar {
  background: #1e2229;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.course-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.course-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
}
.course-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.course-toggle:hover { background: #2c313a; }
.course-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.course-bar.collapsed .course-steps { display: none; }

.course-step {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: #2c313a;
  border: 2px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.course-step:hover { background: #353b45; }
.course-step-no {
  flex: 0 0 auto;
  width: 26px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
}
.course-step-body { display: flex; flex-direction: column; line-height: 1.4; }
.course-step-title { font-size: 0.9rem; font-weight: 700; }
.course-step-n {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: 6px;
}
.course-step-desc { font-size: 0.75rem; color: var(--muted); }

/* 次にやるステップ＝目立たせる */
.course-step.next { border-color: var(--accent); }
.course-step.next .course-step-no { color: var(--accent); }
/* 修了したステップ＝緑のチェックにして落ち着かせる */
.course-step.done { border-color: #3f7d55; opacity: 0.72; }
.course-step.done .course-step-no { color: #6fcf8b; }

/* ===== 結果画面：次のステップへの導線 ===== */
.course-next {
  background: #1e2229;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0;
}
.course-next-msg { font-size: 0.85rem; }
.course-next-btn {
  margin-top: 8px;
  padding: 9px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  background: var(--felt);
  color: #fff;
  border: 2px solid var(--felt);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.course-next-btn:hover { background: #1b8a56; }

/* スマホでは説明文は「次にやるステップ」だけ出す（コース欄が縦に伸びすぎないように） */
@media (max-width: 480px) {
  .course-step-desc { display: none; }
  .course-step.next .course-step-desc { display: block; }
  .course-step { padding: 7px 10px; }
}

/* スマホでは出題ポジションのボタンを一回り小さくして、1行に多く収める */
@media (max-width: 480px) {
  #mode-bar { gap: 5px; }
  #mode-bar .mode-btn {
    padding: 5px 9px;
    font-size: 0.78rem;
  }
  .mode-divider { margin: 4px 0 -2px; }
}

/* 日本語ラベルと英字ラベルで高さがズレるので、ボタンの高さを揃える */
.mode-btn, .game-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}