/* style.css — ポーカー思考トレーナーの見た目（スマホ縦 375px を基準。明暗は prefers-color-scheme） */
:root {
  --bg: #f4f5f7; --panel: #ffffff; --text: #1d2125; --muted: #6b7280; --line: #d9dde3;
  --accent: #1f6feb; --accent-text: #fff; --danger: #c62828;
  --felt: #1f7a4a; --felt-edge: #145334; --seat-bg: rgba(255,255,255,.94); --seat-text: #1d2125;
  --c-raise: #d9534f; --c-call: #3b82d6; --c-fold: #eceef1;
  --ok: #1b8a3a; --tri: #c77700; --x: #c62828; --na: #8a8f98;
  --pos: #1b8a3a; --neg: #c62828;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121416; --panel: #1d2024; --text: #e7e9ec; --muted: #9aa1ab; --line: #343a41;
    --accent: #3b8cff; --felt: #1a5e3b; --felt-edge: #0f3a24; --seat-bg: rgba(29,32,36,.94); --seat-text: #e7e9ec;
    --c-fold: #33373c; --ok: #3fbf62; --tri: #e9a23b; --x: #ef5350; --pos: #3fbf62; --neg: #ef5350;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; overflow-x: hidden; }
main { max-width: 640px; margin: 0 auto; padding: 8px 12px 48px; }
h3 { margin: 0 0 8px; font-size: 17px; }
h4 { margin: 12px 0 4px; font-size: 14px; color: var(--muted); }
.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 12px; margin: 6px 0; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* ── 見出し（たためるリボン） ── */
.hdr { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.hdr-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 0; max-width: 640px; margin: 0 auto; }
.title { font-size: 15px; margin: 0; }
.ribbon-toggle { border: 0; background: none; color: var(--muted); font-size: 16px; min-width: 44px; min-height: 36px; }
.tabs { display: flex; gap: 2px; max-width: 640px; margin: 0 auto; padding: 4px 6px 0; overflow-x: auto; }
.tabs button { flex: 1 0 auto; border: 0; background: none; color: var(--muted); font-size: 14px; padding: 10px 8px; min-height: 44px; border-bottom: 3px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.ribbon-bar { display: none; width: 100%; border: 0; background: var(--panel); color: var(--text); font-size: 14px; padding: 8px 12px; min-height: 40px; text-align: left; }
.hdr.collapsed .hdr-top, .hdr.collapsed .tabs { display: none; }
.hdr.collapsed .ribbon-bar { display: block; }
.hdr.collapsed.picking .tabs { display: flex; }
.hdr.collapsed.picking .hdr-top { display: flex; }

/* ── 共通部品 ── */
.card-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 10px 0; }
.btn { font: inherit; font-size: 15px; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
.btn.sm { min-height: 40px; padding: 6px 10px; font-size: 14px; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.wide { display: block; width: 100%; margin-top: 10px; }
.btn:disabled { opacity: .75; cursor: default; }
.btn.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.link { border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; padding: 6px 0; min-height: 36px; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; align-items: center; }
.chip { font: inherit; font-size: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 6px 12px; min-height: 38px; cursor: pointer; }
.chip.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.lbl { font-size: 12px; color: var(--muted); margin-right: 4px; }
.inp { font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); width: 100%; min-height: 44px; }
.inp.num { width: 6.5em; }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 10px 0; padding: 8px 10px; }
legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
.rad { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.rad input { width: 20px; height: 20px; }
.lbl-row { display: flex; align-items: center; gap: 8px; }
.lbl-row .inp { width: auto; }
.sbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; margin: 6px 0; }
.sbar .btn { margin-left: auto; }
.tbl-s { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-s th, .tbl-s td { border-bottom: 1px solid var(--line); padding: 5px 4px; text-align: right; }
.tbl-s th:first-child, .tbl-s td:first-child { text-align: left; }

/* ── カード ── */
.card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; vertical-align: middle; background: #fff; color: #16181b; border: 1px solid #b9bec6; border-radius: 5px; margin: 0 1px; font-weight: 700; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.card b { font-size: 1em; letter-spacing: -.04em; }
.card i { font-style: normal; font-size: 1.05em; margin-top: 1px; }
.card.sz-s { width: 24px; height: 34px; font-size: 12px; border-radius: 4px; }
.card.sz-m { width: 32px; height: 45px; font-size: 15px; }
.card.sz-l { width: 40px; height: 56px; font-size: 19px; }
.card.s-h, .card.s-d { color: #d01818; }
.four-color .card.s-d { color: #1660d0; }
.four-color .card.s-c { color: #0f8a2c; }
.card.down { background: repeating-linear-gradient(45deg, #2f5fa8 0 4px, #24508f 4px 8px); border-color: #1b3c6b; }
.card.slot { background: transparent; border: 1px dashed rgba(255,255,255,.35); box-shadow: none; }

/* ── 卓（縦長スマホに収まる楕円） ── */
.tbl { position: relative; width: 100%; max-width: 480px; height: 396px; margin: 4px auto; }
.felt { position: absolute; inset: 40px 5% 56px; border-radius: 48% / 42%; background: radial-gradient(ellipse at center, #26935a 0%, var(--felt) 60%, var(--felt-edge) 100%); border: 6px solid #5b3a1e; }
.center { position: absolute; left: 50%; top: 138px; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.pot { color: #fff; font-size: 13px; margin-bottom: 3px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.board { display: flex; gap: 3px; justify-content: center; }
.seat { position: absolute; width: 94px; background: var(--seat-bg); color: var(--seat-text); border: 2px solid transparent; border-radius: 9px; padding: 2px 3px 3px; text-align: center; font-size: 12px; line-height: 1.3; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.seat.hero { width: 150px; }
.seat.acting { border-color: #f5c400; }
.seat.won { border-color: var(--ok); }
.seat.folded { opacity: .55; }
.seat.pos-0 { left: 50%; bottom: 0; transform: translateX(-50%); }
.seat.pos-1 { left: 0; bottom: 92px; }
.seat.pos-2 { left: 0; top: 44px; }
.seat.pos-3 { left: 50%; top: 0; transform: translateX(-50%); }
.seat.pos-4 { right: 0; top: 44px; }
.seat.pos-5 { right: 0; bottom: 92px; }
.s-head { display: flex; gap: 4px; align-items: center; justify-content: center; }
.pbadge { font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 4px; background: #5f6670; color: #fff; }
.pbadge.btn-pos { background: #f5c400; color: #222; }
.nm { font-weight: 700; }
.s-type { font-size: 11px; color: var(--muted); }
.s-cards { min-height: 36px; display: flex; justify-content: center; align-items: center; }
.seat.hero .s-cards { min-height: 58px; }
.s-stack { font-variant-numeric: tabular-nums; }
.s-bet { display: inline-block; font-size: 11px; font-weight: 700; background: #ffe082; color: #3a2d00; border-radius: 999px; padding: 0 6px; }
.s-win { font-weight: 700; color: var(--ok); }
.st { display: block; font-size: 11px; color: var(--muted); }
.st.think { color: var(--accent); font-weight: 700; }
.st.allin { color: var(--danger); font-weight: 700; }

/* ── 操作 ── */
.ctrl { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin: 6px 0; }
.ctrl-main { display: flex; gap: 8px; }
.ctrl-main .btn { flex: 1; }
.btn.act { min-height: 52px; font-size: 16px; font-weight: 700; }
.btn.fold { color: var(--x); }
.btn.call, .btn.check { color: var(--ok); }
.btn.raise { width: 100%; margin-top: 8px; color: var(--c-raise); }
.qs { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin-top: 8px; }
.qs .btn { font-size: 13px; white-space: nowrap; display: flex; flex-direction: column; align-items: center; padding: 4px; line-height: 1.2; }
.qs small { font-size: 11px; color: var(--muted); }
.custom { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.custom input[type=range] { flex: 1; height: 36px; }
.wait { padding: 12px; text-align: center; font-size: 14px; }

.grade-strip:empty { display: none; }
.grade { display: flex; gap: 8px; align-items: flex-start; border-radius: 10px; padding: 6px 10px; margin: 6px 0; background: var(--panel); border: 1px solid var(--line); border-left-width: 5px; font-size: 14px; }
.grade .mk { font-size: 20px; font-weight: 700; line-height: 1.2; }
.grade small { color: var(--muted); margin-left: 4px; }
.mk-ok { border-left-color: var(--ok); } .mk-ok .mk, .mk.mk-ok { color: var(--ok); }
.mk-tri { border-left-color: var(--tri); } .mk-tri .mk, .mk.mk-tri { color: var(--tri); }
.mk-x { border-left-color: var(--x); } .mk-x .mk, .mk.mk-x { color: var(--x); }
.mk-na { border-left-color: var(--na); } .mk-na .mk, .mk.mk-na { color: var(--na); }
span.mk { font-weight: 700; }

.coach { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0; font-size: 14px; }
.coach-head { margin-bottom: 4px; }
.inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 4px 0; }
.inputs div { display: flex; flex-direction: column; }
.inputs dt { font-size: 11px; color: var(--muted); }
.inputs dd { margin: 0; font-weight: 700; }
.coach ol, .coach ul { margin: 2px 0; padding-left: 1.3em; }
.rec { font-size: 17px; font-weight: 700; margin: 8px 0 2px; color: var(--accent); }
.rec small { font-size: 12px; color: var(--muted); font-weight: 400; }
.cand-t { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.cand-t td { padding: 4px; border-bottom: 1px solid var(--line); }
.cand-t td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cand-t tr.top td { font-weight: 700; }
.hint-btns { display: flex; gap: 8px; margin-top: 8px; }
.hint-btns .btn { flex: 1; }

.alog { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; margin: 6px 0; }
.alog h4 { margin: 0 0 2px; }
.alog ol { list-style: none; margin: 0; padding: 0; max-height: 9.5em; overflow-y: auto; font-size: 13px; }
.alog li.deal { color: var(--muted); font-weight: 700; }
.alog li.me { color: var(--accent); }

.result .hres { font-size: 17px; margin: 0 0 4px; }
.result ul, .result ol { padding-left: 1.2em; margin: 4px 0; }
.sd li { margin: 3px 0; }
.review li { margin: 4px 0; }

/* ── 場面ガイド ── */
.intro p { margin: 0; font-size: 14px; }
.routine { margin: 0; padding-left: 1.4em; font-size: 14px; }
.sit { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; }
.sit summary { padding: 10px 12px; cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.sit summary::-webkit-details-marker { display: none; }
.sit .st { display: inline; font-size: 15px; font-weight: 700; color: var(--text); }
.sit .one { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.ph { font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--line); color: var(--text); }
.sit-body { padding: 0 12px 12px; font-size: 14px; }
.sit-body ol, .sit-body ul { padding-left: 1.3em; margin: 2px 0; }
.sit-body li { margin: 4px 0; }
.why { display: block; color: var(--muted); font-size: 13px; }
.src { font-size: 12px; color: var(--muted); }
.chart-title { font-weight: 700; margin: 8px 0 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.sw.raise { background: var(--c-raise); } .sw.call { background: var(--c-call); } .sw.fold { background: var(--c-fold); border: 1px solid var(--line); }
.rgrid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.rc { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--text); overflow: hidden; letter-spacing: -.03em; }
.rc.on { color: #fff; font-weight: 700; }

/* ── ドリル・記録・用語 ── */
.prompt { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.ctx { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; margin-bottom: 6px; }
.drow { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.others { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0; }
.oh { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0; }
.btn.choice { min-height: 50px; }
.btn.choice.right { border-color: var(--ok); color: var(--ok); font-weight: 700; }
.btn.choice.wrong { border-color: var(--x); color: var(--x); }
.btn.choice.dim { opacity: .5; }
.explain { padding-left: 1.2em; font-size: 14px; }
.hint1 ol { padding-left: 1.3em; }
.big { font-size: 18px; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.stats3 div { background: var(--bg); border-radius: 10px; padding: 6px; text-align: center; display: flex; flex-direction: column; }
.stats3 span { font-size: 12px; color: var(--muted); }
.stats3 b { font-size: 20px; }
.targets { padding-left: 1.2em; font-size: 13px; }
.leaks { padding-left: 1.3em; }
.leaks li { margin: 6px 0; }
.leaks .muted { display: block; font-size: 12px; }
.hrow { border-bottom: 1px solid var(--line); }
.hrow summary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 0; font-size: 13px; cursor: pointer; }
.hrow .pb { font-weight: 700; }
.hdet { font-size: 13px; padding: 0 0 8px; }
.hdet ol { padding-left: 1.3em; margin: 2px 0; }
.gloss dt { font-weight: 700; margin-top: 10px; }
.gloss dt small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.gloss dd { margin: 2px 0 0; font-size: 14px; }

@media (min-width: 560px) {
  .tbl { height: 420px; }
  .seat { width: 110px; }
  .seat.hero { width: 170px; }
}
.sbar { gap: 8px; font-size: 12px; flex-wrap: nowrap; white-space: nowrap; }
.sbar .btn.sm { min-height: 34px; padding: 2px 10px; font-size: 13px; }
.sit { scroll-margin-top: 110px; }