:root { --bg: #0f1a14; --card: #17261d; --fg: #e8efe9; --muted: #9db3a4; --accent: #3fbf7f; --err: #ff7a7a; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; }
header { padding: 1rem 1.5rem; border-bottom: 1px solid #2a3d31; }
header h1 { margin: 0 0 .5rem; font-size: 1.3rem; }
nav a { color: var(--accent); margin-right: 1rem; text-decoration: none; }
nav a:hover { text-decoration: underline; }
main { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
.card { background: var(--card); border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
h2 { margin-top: 0; font-size: 1.15rem; }
form { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem 1rem; }
label { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); }
input, select { margin-top: .25rem; padding: .45rem .6rem; border-radius: 6px; border: 1px solid #2f4637; background: #0f1a14; color: var(--fg); font-size: .95rem; }
button { padding: .45rem .8rem; border-radius: 6px; border: 1px solid #2f4637; background: #203528; color: var(--fg); cursor: pointer; }
button.primary { background: var(--accent); color: #062012; font-weight: 600; border: none; grid-column: 1 / -1; justify-self: start; }
.presets { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.result { margin-top: 1rem; }
.hint { color: var(--muted); font-size: .85rem; }
.err { color: var(--err); }
table { border-collapse: collapse; margin: .5rem 0; width: 100%; }
th, td { border: 1px solid #2f4637; padding: .35rem .6rem; text-align: left; vertical-align: top; }
th { background: #1d3125; }
.note a { color: var(--accent); }
.note code { background: #0f1a14; padding: .1rem .3rem; border-radius: 4px; }
.note blockquote { border-left: 3px solid var(--accent); margin: 0; padding-left: 1rem; color: var(--muted); }

/* ---------- visual guide ---------- */
.tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tab { padding: .5rem 1rem; border-radius: 8px 8px 0 0; background: #17261d; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; }
.tab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.stars { color: #ffcc4d; letter-spacing: 2px; }
.tagline { font-size: 1.05rem; font-weight: 600; color: #ffe08a; }

/* playing cards: 4-color deck */
.hand { display: inline-flex; gap: 4px; vertical-align: middle; }
.pc { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 38px; height: 52px; border-radius: 5px; background: #fff; font-family: Georgia, serif; line-height: 1; box-shadow: 0 1px 2px #0008; border: 2px solid transparent; }
.pc b { font-size: 1rem; }
.pc i { font-style: normal; font-size: 1.1rem; }
.pc.s { color: #111; } .pc.h { color: #d0202f; } .pc.d { color: #1a5fd0; } .pc.c { color: #13883c; }
.pc.new { border-color: #ffcc4d; box-shadow: 0 0 8px #ffcc4d; }
.pc.back { background: repeating-linear-gradient(45deg, #7a1f2b, #7a1f2b 4px, #a83242 4px, #a83242 8px); }

.hand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }
.hand-box { border-radius: 8px; padding: .7rem; background: #0f1a14; border-left: 5px solid #555; }
.hand-box .hb-label { font-weight: 600; margin-bottom: .4rem; }
.hand-box .hint { margin-top: .4rem; }
.hand-box.nuts { border-color: #ffcc4d; } .hand-box.draw { border-color: var(--accent); }
.hand-box.snow { border-color: #ff6b6b; } .hand-box.weak { border-color: #ff9f43; } .hand-box.bad { border-color: #666; }

/* example timeline */
.example { margin: 1.2rem 0 2rem; }
.example h3 { margin-bottom: .2rem; }
.pos-badge { padding: .1rem .5rem; border-radius: 4px; font-size: .85rem; }
.timeline { border-left: 3px solid #2f4637; margin-left: .6rem; padding-left: 1rem; }
.step { position: relative; background: #0f1a14; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .6rem; border: 1px solid #2f4637; }
.step::before { content: ""; position: absolute; left: -1.45rem; top: 1rem; width: 12px; height: 12px; border-radius: 50%; background: #2f4637; }
.step.switch { border: 2px solid #ff6b6b; }
.step.switch::before { background: #ff6b6b; }
.step .st { font-weight: 600; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.sw { background: #ff6b6b; color: #fff; border-radius: 4px; padding: 0 .4rem; margin-left: .5rem; font-size: .75rem; }
.step .row { display: flex; align-items: center; gap: .7rem; margin: .25rem 0; flex-wrap: wrap; }
.who { width: 2.5rem; color: var(--muted); font-size: .8rem; }
.act { font-size: .92rem; } .act.vil { color: #c9d6cd; }
.step-note { margin-top: .4rem; font-size: .85rem; background: #2b2a17; border-radius: 6px; padding: .35rem .6rem; color: #ffe9a8; }

.pat { background: #ffcc4d; color: #222; border-radius: 4px; padding: 0 .35rem; font-weight: 700; font-size: .8rem; }

/* position tabs */
.pos-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.2rem; }
.pos-tab { display: flex; flex-direction: column; align-items: center; padding: .7rem; border-radius: 10px; text-decoration: none; color: var(--muted); background: #17261d; border: 2px solid #2f4637; }
.pos-tab b { font-size: 1.5rem; } .pos-tab small { font-size: .8rem; }
.pos-tab.ip.on { background: #1d3a5c; border-color: #4f94e0; color: #fff; }
.pos-tab.oop.on { background: #4a1d1d; border-color: #e05d5d; color: #fff; }

/* verdict + timing track */
.verdict .v-label { color: var(--muted); font-size: .85rem; }
.verdict .v-text { font-size: 1.25rem; font-weight: 700; margin: .3rem 0 1.2rem; color: #ffe08a; }
.track { display: flex; align-items: center; padding-top: 1.6rem; }
.tk { flex: none; text-align: center; font-size: .8rem; color: var(--muted); position: relative; }
.tk.bet span { display: inline-block; padding: .2rem .5rem; border-radius: 999px; background: #0f1a14; }
.tk-line { flex: 1; height: 3px; background: #2f4637; min-width: 10px; }
.tk.pt { cursor: pointer; width: 92px; }
.tk.pt .mark { width: 56px; height: 56px; margin: 0 auto .2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; border: 3px solid; }
.tk.pt span { color: var(--fg); font-weight: 600; }
.here { position: absolute; top: -1.6rem; left: 0; right: 0; color: #ffcc4d; font-weight: 700; font-size: .85rem; }
.best .mark, .lg.best { background: #5c1f24; border-color: #ff6b6b; color: #ff9b9b; }
.good .mark, .lg.good { background: #4a3317; border-color: #ff9f43; color: #ffc078; }
.maybe .mark, .lg.maybe { background: #3d3a1a; border-color: #d6c44a; color: #eadc7a; }
.no .mark, .lg.no { background: #222; border-color: #555; color: #888; }
.lg { padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; border: 1px solid; }
.verdict .legend { margin-top: 1rem; }

/* point cards (D1/D2/D3/RV) */
.points { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.5rem; }
@media (max-width: 1000px) { .points { grid-template-columns: 1fr 1fr; } }
.point { background: var(--card); border-radius: 10px; padding: .9rem; border-top: 6px solid #555; display: flex; flex-direction: column; gap: .4rem; }
.point.best { border-top-color: #ff6b6b; } .point.good { border-top-color: #ff9f43; }
.point.maybe { border-top-color: #d6c44a; } .point.no { border-top-color: #555; opacity: .6; }
.point.is-best { box-shadow: 0 0 0 2px #ffcc4d; }
.p-head { display: flex; gap: .6rem; align-items: center; }
.p-mark { font-size: 2rem; font-weight: 700; width: 2.4rem; text-align: center; }
.point.best .p-mark { color: #ff9b9b; } .point.good .p-mark { color: #ffc078; } .point.maybe .p-mark { color: #eadc7a; } .point.no .p-mark { color: #888; }
.p-title { font-weight: 700; } .p-sub { font-size: .8rem; color: var(--muted); }
.best-tag { background: #ffcc4d; color: #222; border-radius: 4px; font-size: .7rem; padding: 0 .35rem; margin-left: .4rem; }
.p-sec { font-size: .75rem; color: var(--muted); margin-top: .3rem; border-bottom: 1px solid #2f4637; }
.cond { margin: 0; padding-left: 1.1rem; font-size: .85rem; }
.line { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.chip { background: #0f1a14; border: 1px solid #3d5c48; border-radius: 6px; padding: .1rem .45rem; font-size: .8rem; font-weight: 600; }
.to { color: var(--muted); font-size: .8rem; }
.stop { font-size: .8rem; color: #c9d6cd; background: #262626; border-radius: 6px; padding: .3rem .5rem; margin-top: auto; }
.alt { font-size: .8rem; background: #1a2c45; border-radius: 6px; padding: .35rem .5rem; }
.point .pc { width: 30px; height: 42px; } .point .pc b { font-size: .85rem; } .point .pc i { font-size: .9rem; }

details.example { background: #0f1a14; border-radius: 8px; padding: .6rem .8rem; margin: .6rem 0; }
details.example summary { cursor: pointer; font-weight: 600; }
details.example .step { background: #17261d; }
.legend { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tk.pt.rv .mark { border-radius: 12px; }
.tk.pt.rv { width: 130px; }
.rule { background: #3d1a1d; border: 2px solid #ff6b6b; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.2rem; }
.rule b { color: #ffb3b3; font-size: 1.05rem; } .rule div { font-size: .88rem; margin-top: .3rem; }

/* view tabs */
.view-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.2rem; }
.view-tabs a { text-align: center; padding: .6rem; border-radius: 8px; background: #17261d; color: var(--muted); text-decoration: none; font-weight: 600; border: 2px solid #2f4637; }
.view-tabs a.on { background: #3a3417; color: #ffe08a; border-color: #ffcc4d; }

/* after-bluff stepper */
.af { display: flex; flex-direction: column; gap: .5rem; }
.af-step { display: grid; grid-template-columns: 170px 1fr; gap: .8rem; border-radius: 10px; padding: .7rem .9rem; }
.af-step.bet { background: #0f1a14; border: 1px solid #3d5c48; }
.af-step.draw { background: #142235; border: 1px dashed #4f94e0; margin: 0 2rem; }
.af-label { font-weight: 700; display: flex; align-items: center; }
.af-step.draw .af-label { color: #9cc7ff; }
.af-body { display: flex; flex-direction: column; gap: .45rem; font-size: .9rem; }
.af-top { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.start { font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid; }
.start.best { background: #5c1f24; border-color: #ff6b6b; color: #ffb3b3; } .start.good { background: #4a3317; border-color: #ff9f43; color: #ffc078; }
.start.maybe { background: #3d3a1a; border-color: #d6c44a; color: #eadc7a; } .start.no { background: #222; border-color: #555; color: #888; }
.draw-check { display: flex; gap: .5rem; flex-wrap: wrap; }
.dc { padding: .2rem .6rem; border-radius: 6px; font-size: .85rem; }
.dc.go { background: #3d1a1d; color: #ffb3b3; } .dc.stop { background: #262626; color: #bbb; }
.gs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.gs-col { border-radius: 8px; padding: .5rem .6rem; }
.gs-col.go { background: #2e1517; border-left: 4px solid #ff6b6b; } .gs-col.stop { background: #1f1f1f; border-left: 4px solid #777; }
.gs-h { font-weight: 700; margin-bottom: .3rem; }
.gs-row { display: flex; flex-direction: column; padding: .25rem 0; border-top: 1px solid #ffffff12; }
.gs-row:first-of-type { border-top: none; }
.gs-s { color: #c9d6cd; font-size: .85rem; } .gs-a { font-weight: 700; }
.gs-row.go .gs-a { color: #ff9b9b; } .gs-row.stop .gs-a { color: #ddd; }
.gs { align-items: start; } .af-step.bet { align-items: center; }
.gs-col { align-self: start; }
.gs { display: flex; align-items: flex-start; } .gs-col { flex: 1; min-width: 0; }
.gs-col.stop, .dc.stop { margin-top: 0; }

/* scenario (ブラフの台本) */
.sopts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.sopt { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem; border-radius: 8px; text-decoration: none; color: var(--fg); background: #0f1a14; border: 2px solid #2f4637; font-size: .9rem; text-align: center; }
.sopt b { font-size: 1.3rem; } .sopt small { color: #ffcc4d; }
.sopt.on { border-color: #ffcc4d; background: #3a3417; }
.sopt.no { opacity: .5; }
.sc-cond { margin-top: .8rem; background: #0f1a14; border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; }
.sc-cond ul { margin: .3rem 0; }
.sc { display: flex; flex-direction: column; gap: .45rem; }
.sc-step { display: grid; grid-template-columns: 230px 1fr; gap: .8rem; border-radius: 10px; padding: .6rem .8rem; align-items: start; }
.sc-step.bet { background: #0f1a14; border: 1px solid #3d5c48; }
.sc-step.change { background: #142235; border: 1px dashed #4f94e0; }
.sc-step.ph-pre { opacity: .45; padding: .35rem .8rem; }
.sc-step.ph-start { border: 2px solid #ffcc4d; box-shadow: 0 0 10px #ffcc4d55; }
.sc-name { font-weight: 700; display: flex; flex-direction: column; gap: .3rem; }
.sc-step.change .sc-name { color: #9cc7ff; }
.sc-tag { font-size: .72rem; border-radius: 4px; padding: 0 .4rem; width: fit-content; }
.sc-tag.start { background: #ffcc4d; color: #222; } .sc-tag.bluff { background: #ff6b6b; color: #fff; } .sc-tag.prep { background: #555; color: #fff; }
.sc-pre { color: var(--muted); font-size: .9rem; }
.sc-body { display: flex; flex-direction: column; gap: .5rem; }
.sc-row { border-left: 3px solid #3d5c48; padding-left: .7rem; }
.sc-opp { font-size: .85rem; color: var(--muted); }
.sc-me { font-size: 1rem; margin: .1rem 0 .3rem; } .sc-me b { color: #ffe08a; }
.sc-res { display: flex; flex-wrap: wrap; gap: .35rem; }
.res { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; padding: .15rem .55rem .15rem .2rem; border-radius: 6px; margin-right: .2rem; }
.res i { font-style: normal; font-weight: 700; font-size: .72rem; padding: 0 .35rem; border-radius: 4px; }
.res.win { background: #3a3417; } .res.win i { background: #ffcc4d; color: #222; }
.res.go { background: #3d1a1d; } .res.go i { background: #ff6b6b; color: #fff; }
.res.fold { background: #262626; } .res.fold i { background: #777; color: #fff; }
.res.lose { background: #2b1f3d; } .res.lose i { background: #9f7aea; color: #fff; }
.res.skip { background: #1d1d1d; border: 1px dashed #555; } .res.skip i { background: #444; color: #ccc; }

/* フローチャート */
.fc { display: grid; grid-template-columns: 140px minmax(0, 1.15fr) minmax(0, 1.3fr); gap: 0 .8rem; align-items: stretch; }
.fc-colh { text-align: center; font-weight: 700; padding: .4rem; border-radius: 8px 8px 0 0; }
.fc-colh.idle { background: #183424; color: #bfe8cf; } .fc-colh.bluff { background: #4a1d1d; color: #ffb3b3; }
.fc-step { font-weight: 700; padding: .6rem .2rem; display: flex; flex-direction: column; gap: .2rem; }
.fc-step.change { color: #9cc7ff; } .fc-step small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.fc-cell { border-radius: 8px; padding: .6rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.fc-cell.idle { background: #3fbf7f0d; border: 1px solid #2f4637; }
.fc-cell.bluff { background: #ff6b6b0f; border: 1px solid #5a2a2d; }
.fc-cell.change { border-style: dashed; }
.fc-link { text-align: center; color: var(--muted); font-size: 1.1rem; line-height: 1.4; }
.fc-empty { color: #666; font-size: .85rem; margin: auto; }
.fc-box { padding: .35rem .8rem; border-radius: 3px; font-weight: 700; text-align: center; border: 2px solid; }
.fc-box.act { background: #3d1a1d; border-color: #ff6b6b; color: #ffd0d0; }
.fc-box.act.start { background: #3a3417; border-color: #ffcc4d; color: #ffe08a; }
.fc-box.idle { background: #183424; border-color: #3fbf7f; color: #bfe8cf; }
.fc-dec { background: #1a2c45; border: 2px solid #63a4ff; color: #cfe3ff; padding: .3rem .8rem; border-radius: 14px; font-weight: 700; text-align: center; font-size: .88rem; }
.fc-dec .nrate { margin-left: .3rem; font-weight: 400; }
.fc-cond { text-align: left; font-weight: 400; font-size: .8rem; margin: .3rem 0 0; padding-left: 1.1rem; color: #dfe8e2; }
.fc-brs { display: flex; gap: .5rem; width: 100%; }
.fc-br { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; border-top: 2px solid #63a4ff55; padding-top: .3rem; }
.fc-bl { font-size: .8rem; color: #9cc7ff; font-weight: 700; }
.fc-rows { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
.fc-row { display: flex; align-items: center; gap: .35rem; font-size: .85rem; }
.fc-rl { color: #9cc7ff; min-width: 3.5em; text-align: right; } .fc-arrow { color: var(--muted); }
.fc-end { display: inline-block; padding: .15rem .7rem; border-radius: 999px; font-weight: 700; font-size: .82rem; }
.fc-end.win { background: #ffcc4d; color: #222; } .fc-end.fold { background: #555; color: #fff; }
.fc-end.lose { background: #9f7aea; color: #fff; } .fc-end.normal { background: #3fbf7f; color: #062012; }
.fc-down { color: #ff9b9b; font-weight: 700; font-size: .85rem; }
.fc-yes { background: #3a3417; color: #ffe08a; border: 1px solid #ffcc4d; border-radius: 6px; padding: .1rem .5rem; font-weight: 700; }
.fc-sub { width: 100%; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .4rem; border: 1px dashed #5a2a2d; border-radius: 8px; }
.fc-sub.start { border-color: #ffcc4d; }
.fc-subh { font-size: .75rem; color: var(--muted); align-self: flex-start; }
.fc-legend { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.fc-dec.mini, .fc-box.mini { font-size: .78rem; padding: .1rem .6rem; }
.nrate { font-size: .75rem; padding: 0 .45rem; border-radius: 999px; border: 1px solid; }
.nrate.best { border-color: #ff6b6b; color: #ffb3b3; } .nrate.good { border-color: #ff9f43; color: #ffc078; } .nrate.maybe { border-color: #d6c44a; color: #eadc7a; }
.tk.pt { cursor: default; }
.fc-hands { text-align: left; font-weight: 400; margin-top: .45rem; display: flex; flex-direction: column; gap: .25rem; }
.fh-h { font-size: .75rem; font-weight: 700; margin-top: .15rem; }
.fh-h.good { color: #8fe0b0; } .fh-h.bad { color: #aaa; }
.fh { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: #dfe8e2; }
.fh .pc { width: 26px; height: 36px; } .fh .pc b { font-size: .75rem; } .fh .pc i { font-size: .8rem; }
.fh.bad .hand { opacity: .55; filter: grayscale(.6); }
.fh span { flex: 1; }
.fh.bad .hand { opacity: .8; filter: grayscale(.3); }

/* 事例 */
.case { background: #0f1a14; border: 1px solid #3d5c48; border-radius: 10px; padding: .9rem 1rem; margin: 1rem 0; }
.case-h { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem; }
.case-no { color: var(--muted); font-size: .85rem; }
.pos-badge.both { background: #555; }
.case-setup { display: flex; align-items: stretch; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.cs { background: #17261d; border-radius: 8px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .3rem; }
.cs-l { font-size: .78rem; color: #9cc7ff; font-weight: 700; } .cs-t { font-size: .8rem; color: #dfe8e2; max-width: 260px; }
.cs-arrow { align-self: center; color: var(--muted); }
.case-q { margin: .6rem 0; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.case-rows { width: 100%; display: flex; flex-direction: column; gap: .35rem; padding-left: 1rem; border-left: 2px solid #63a4ff55; }
.cr { display: grid; grid-template-columns: 170px 210px 1fr; gap: .7rem; align-items: center; background: #17261d; border-radius: 8px; padding: .45rem .6rem; }
.cr-when { font-weight: 700; color: #cfe3ff; font-size: .88rem; }
.cr-cards .pc { width: 32px; height: 44px; } .cr-cards .pc b { font-size: .85rem; } .cr-cards .pc i { font-size: .9rem; }
.cr-why { font-size: .8rem; color: #c9d6cd; margin-top: .25rem; }
.ck { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; padding: .1rem .55rem .1rem .2rem; border-radius: 6px; }
.ck i { font-style: normal; font-size: .7rem; padding: 0 .35rem; border-radius: 4px; }
.ck.draw { background: #183424; color: #bfe8cf; } .ck.draw i { background: #3fbf7f; color: #062012; }
.ck.bluff { background: #3d1a1d; color: #ffb3b3; } .ck.bluff i { background: #ff6b6b; color: #fff; }
.ck.check { background: #1a2c45; color: #cfe3ff; } .ck.check i { background: #63a4ff; color: #062012; }
.ck.fold { background: #262626; color: #ddd; } .ck.fold i { background: #777; color: #fff; }
.ck.call { background: #2b1f3d; color: #d6c2ff; } .ck.call i { background: #9f7aea; color: #fff; }
.ck.next { background: #3a3417; color: #ffe08a; } .ck.next i { background: #ffcc4d; color: #222; }
.case-note { font-size: .85rem; background: #2b2a17; color: #ffe9a8; border-radius: 6px; padding: .35rem .6rem; margin-top: .4rem; }
@media (max-width: 1000px) { .cr { grid-template-columns: 1fr; } }
.pc.unk { background: #e8e8e8; color: #777; border-style: dashed; border-color: #999; }
.pos-badge { padding: .1rem .5rem; border-radius: 4px; font-size: .85rem; color: #fff; } .pos-badge.ip { background: #2b6cb0; } .pos-badge.oop { background: #9b2c2c; } .pos-badge.both { background: #555; }

/* トレーニング */
.tr-stats { background: var(--card); border-radius: 10px; padding: .6rem 1rem; margin-bottom: .8rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.tr-stats b { color: #ffe08a; font-size: 1.1rem; }
.tr-by { display: flex; gap: .8rem; color: var(--muted); font-size: .85rem; }
.tr-reset { margin-left: auto; font-size: .8rem; }
.tr-filters { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .8rem; font-size: .85rem; color: var(--muted); }
.tr-chip { margin-left: .3rem; padding: .2rem .7rem; border-radius: 999px; font-size: .82rem; }
.tr-chip.on { background: var(--accent); color: #062012; border-color: var(--accent); font-weight: 700; }
.tr-q { border: 2px solid #3d5c48; }
.tr-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.tr-game { background: #ffcc4d; color: #222; font-weight: 700; border-radius: 4px; padding: 0 .5rem; margin-right: .3rem; }
.tr-label { color: var(--muted); font-size: .85rem; }
.tr-track { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; margin-bottom: .8rem; font-size: .75rem; }
.tr-st { padding: .15rem .45rem; border-radius: 4px; background: #0f1a14; color: #6b7d71; border: 1px solid #2f4637; }
.tr-st.change { border-style: dashed; }
.tr-st.past { color: #9db3a4; }
.tr-st.now { background: #ffcc4d; color: #222; font-weight: 700; border-color: #ffcc4d; }
.tr-sep { color: #4a5d50; }
.tr-lines { margin: 0 0 .6rem; padding-left: 1.2rem; font-size: .92rem; }
.tr-opp { background: #1a2c45; border-radius: 6px; padding: .35rem .7rem; margin-bottom: .7rem; display: inline-block; }
.tr-hand { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 .8rem; }
.tr-hand > span { color: var(--muted); font-size: .85rem; }
.tr-hand .pc { width: 52px; height: 72px; } .tr-hand .pc b { font-size: 1.3rem; } .tr-hand .pc i { font-size: 1.4rem; }
.tr-ask { font-size: 1.15rem; font-weight: 700; margin-bottom: .6rem; }
.tr-opts { display: flex; flex-wrap: wrap; gap: .6rem; }
.tr-opt { font-size: 1.05rem; font-weight: 700; padding: .7rem 1.4rem; border-radius: 10px; background: #203528; display: flex; align-items: center; gap: .5rem; }
.tr-opt small { font-size: .7rem; color: var(--muted); border: 1px solid #3d5c48; border-radius: 4px; padding: 0 .3rem; }
.tr-opt:hover:not([disabled]) { background: #2a4a37; }
.tr-opt.right { background: #1f5c3a; border-color: #3fbf7f; }
.tr-opt.wrong { background: #5c1f24; border-color: #ff6b6b; }
.tr-opt.dim { opacity: .4; }
.tr-result { margin-top: 1rem; border-radius: 8px; padding: .8rem 1rem; }
.tr-result.ok { background: #183424; border: 1px solid #3fbf7f; } .tr-result.ng { background: #3d1a1d; border: 1px solid #ff6b6b; }
.tr-verdict { font-size: 1.1rem; margin-bottom: .3rem; }
.tr-why { font-size: .92rem; }
.tr-next { margin-top: .7rem; display: flex; gap: 1rem; align-items: center; }
.tr-next a { color: var(--accent); }
.tr-miss { font-size: .85rem; padding-left: 1.2rem; } .tr-miss li { margin: .25rem 0; }

/* トレーニング：これまでの流れ */
.story { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0 .8rem; }
.sv { display: grid; grid-template-columns: 160px 1fr; gap: .6rem; align-items: center; padding: .4rem .6rem; border-radius: 8px; }
.sv.bet { background: #0f1a14; border: 1px solid #2f4637; }
.sv.change { background: #142235; border: 1px dashed #4f94e0; }
.sv.now { border: 2px solid #ffcc4d; box-shadow: 0 0 8px #ffcc4d44; }
.sv-step { font-size: .8rem; font-weight: 700; color: var(--muted); }
.sv.change .sv-step { color: #9cc7ff; }
.sv-acts { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.sv-act { display: flex; align-items: center; gap: .35rem; font-size: .85rem; }
.sv-who { font-size: .7rem; padding: .05rem .35rem; border-radius: 4px; color: #fff; }
.sv-act.me .sv-who { background: #2b6cb0; } .sv-act.opp .sv-who { background: #9b2c2c; }
.sv-act .pc { width: 24px; height: 34px; } .sv-act .pc b { font-size: .7rem; } .sv-act .pc i { font-size: .75rem; }
.sv-txt { font-weight: 700; }
.sv-you { color: #ffe08a; font-weight: 700; }
.sv-note { font-size: .85rem; color: #ffe9a8; background: #2b2a17; border-radius: 6px; padding: .3rem .6rem; margin-bottom: .6rem; }
.pc.back.new { border-color: #ffcc4d; box-shadow: 0 0 6px #ffcc4d; }

/* =================== スマホ =================== */
.fc-cell::before { display: none; }
@media (max-width: 640px) {
  body { font-size: 15px; }
  header { padding: .6rem .8rem; }
  header h1 { font-size: 1.05rem; margin-bottom: .3rem; }
  nav a { margin-right: .9rem; font-size: .95rem; }
  main { padding: .6rem; }
  .card { padding: .8rem; border-radius: 8px; margin-bottom: 1rem; }
  h2 { font-size: 1rem; }
  table { display: block; overflow-x: auto; }

  /* ガイド：タブ・結論 */
  .tabs { gap: .3rem; } .tab { padding: .4rem .6rem; font-size: .85rem; }
  .pos-tabs { gap: .5rem; margin-bottom: .8rem; } .pos-tab { padding: .5rem; } .pos-tab b { font-size: 1.2rem; } .pos-tab small { font-size: .68rem; text-align: center; }
  .verdict .v-text { font-size: 1rem; margin-bottom: .8rem; }
  .track { overflow-x: auto; padding-bottom: .3rem; }
  .tk.pt { width: 72px; } .tk.pt.rv { width: 88px; } .tk.pt .mark { width: 42px; height: 42px; font-size: 1.2rem; }
  .tk { font-size: .7rem; } .tk-line { min-width: 8px; }
  .rule { padding: .6rem .7rem; } .rule b { font-size: .9rem; } .rule div { font-size: .8rem; }

  /* ガイド：フローチャートを縦1列に */
  .fc { grid-template-columns: 1fr; gap: .4rem; }
  .fc > div:empty, .fc-colh, .fc-link { display: none; }
  .fc-step { padding: .8rem 0 0; flex-direction: row; align-items: baseline; gap: .5rem; border-top: 1px solid #2f4637; }
  .fc-cell::before { display: block; font-size: .72rem; font-weight: 700; align-self: flex-start; padding: 0 .4rem; border-radius: 4px; }
  .fc-cell.idle::before { content: "まだブラフしていない"; background: #183424; color: #bfe8cf; }
  .fc-cell.bluff::before { content: "ブラフ中"; background: #4a1d1d; color: #ffb3b3; }
  .fc-brs { flex-direction: column; }
  .fc-dec { font-size: .82rem; }
  .fh { flex-wrap: wrap; }

  /* ガイド：事例 */
  .case { padding: .7rem; } .case-h { font-size: .95rem; }
  .case-setup { flex-direction: column; } .cs-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 1rem; }
  .cs-t { max-width: none; }
  .case-rows { padding-left: .5rem; }
  .cr { gap: .4rem; }
  .hand-grid { grid-template-columns: 1fr; }

  /* トレーニング */
  .tr-stats { font-size: .85rem; padding: .5rem .7rem; } .tr-by { width: 100%; flex-wrap: wrap; gap: .3rem .8rem; font-size: .78rem; }
  .tr-filters { font-size: .78rem; } .tr-filters > div { overflow-x: auto; white-space: nowrap; padding-bottom: .15rem; }
  .tr-chip { padding: .25rem .6rem; }
  .sv { grid-template-columns: 1fr; gap: .25rem; padding: .4rem .5rem; }
  .sv-acts { gap: .35rem .7rem; }
  .tr-hand { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .tr-hand .pc { width: 48px; height: 66px; } .tr-hand .pc b { font-size: 1.15rem; } .tr-hand .pc i { font-size: 1.25rem; }
  .tr-ask { font-size: 1.05rem; }
  .tr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .tr-opt { justify-content: center; padding: .9rem .5rem; font-size: 1rem; }
  .tr-opt small { display: none; }
  .tr-next { flex-direction: column; align-items: stretch; text-align: center; }
  .tr-next .primary { padding: .8rem; font-size: 1rem; }

  /* 計算ツール */
  form { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tr-filters { min-width: 0; max-width: 100%; }
  .tr-filters > div { max-width: 100%; }
  main, main > section, .card { min-width: 0; max-width: 100%; }
}

/* 行動の種類ごとの色（トレーニングの流れ） */
.sv-txt { padding: .1rem .5rem; border-radius: 6px; }
.sv-txt.k-pat { background: #2b6cb0; color: #fff; font-weight: 800; box-shadow: 0 0 0 2px #63a4ff; }
.sv-txt.k-draw { background: #4a3f12; color: #ffe08a; border: 1px solid #ffcc4d; }
.sv-txt.k-aggr { background: #5c1f24; color: #ffc9c9; }
.sv-txt.k-check { background: #2a2a2a; color: #ccc; }
.sv-txt.k-call { background: #3b2a5c; color: #ddd0ff; }
.sv-txt.k-neutral { background: transparent; }
.hand.patted { position: relative; }
.hand.patted::after { content: "PAT"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .8rem; letter-spacing: .1em; color: #fff; background: #2b6cb0bb; border: 2px solid #63a4ff; border-radius: 5px; transform: rotate(-6deg); }
.tr-opt.k-pat { border-color: #63a4ff; color: #cfe3ff; }
.tr-opt.k-1, .tr-opt.k-2, .tr-opt.k-3 { border-color: #b8962e; color: #ffe08a; }

/* トレーニング：コンパクト表示（PC・スマホ共通） */
.sv-step .short { display: none; }
.tr-stats { gap: .3rem .9rem; }
.tr-score b { font-size: 1.15rem; } .tr-streak small { color: var(--muted); font-size: .75rem; }
.tr-filterbox { margin-bottom: .7rem; }
.tr-filterbox summary { cursor: pointer; color: var(--muted); font-size: .85rem; padding: .3rem 0; }
.tr-filterbox[open] summary { color: var(--accent); }
.tr-verdict small { color: var(--muted); margin-left: .4rem; font-weight: 400; }
.tr-dock { margin-top: .4rem; }

@media (max-width: 640px) {
  /* ヘッダーを1行に */
  header { display: flex; align-items: center; gap: .7rem; padding: .45rem .7rem; }
  header h1 { font-size: .85rem; margin: 0; white-space: nowrap; }
  nav a { margin-right: .55rem; font-size: .85rem; }
  main { padding: .4rem .5rem; }

  .tr-stats { padding: .35rem .6rem; margin-bottom: .4rem; font-size: .8rem; }
  .tr-score b { font-size: 1rem; }
  .tr-by { width: auto; font-size: .7rem; gap: .5rem; }
  .tr-reset { padding: .15rem .5rem; font-size: .72rem; }
  .tr-filterbox { margin-bottom: .4rem; } .tr-filterbox summary { font-size: .78rem; padding: .1rem 0; }

  .tr-q { padding: .55rem .6rem; }
  .tr-head { margin-bottom: .35rem; gap: .4rem; } .tr-game { font-size: .85rem; } .tr-head .pos-badge { font-size: .75rem; }

  /* 流れ：ラウンド名とカードを横1行に */
  .story { gap: .22rem; margin: .2rem 0 .4rem; }
  .sv { grid-template-columns: 66px 1fr; gap: .35rem; padding: .22rem .35rem; border-radius: 6px; }
  .sv-step .full { display: none; } .sv-step .short { display: inline; }
  .sv-step { font-size: .64rem; line-height: 1.2; }
  .sv-acts { gap: .2rem .45rem; }
  .sv-act { gap: .2rem; font-size: .72rem; }
  .sv-who { font-size: .58rem; padding: 0 .22rem; }
  .sv-act .pc { width: 17px; height: 24px; border-width: 1px; border-radius: 3px; } .sv-act .pc b { font-size: .52rem; } .sv-act .pc i { font-size: .55rem; }
  .sv-act .hand { gap: 2px; }
  .sv-txt { font-size: .72rem; padding: .02rem .35rem; }
  .sv-you { font-size: .75rem; }
  .hand.patted::after { font-size: .55rem; }
  .sv-note { font-size: .72rem; padding: .2rem .45rem; margin-bottom: .3rem; }

  .tr-hand { flex-direction: row; align-items: center; gap: .5rem; margin: .2rem 0 .3rem; }
  .tr-hand .pc { width: 44px; height: 60px; } .tr-hand .pc b { font-size: 1.05rem; } .tr-hand .pc i { font-size: 1.1rem; }

  /* 回答欄：画面下に固定 */
  .tr-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
    background: #0f1a14f2; border-top: 2px solid #3d5c48; max-height: 55vh; overflow-y: auto; backdrop-filter: blur(6px); }
  .tr-ask { font-size: .92rem; margin-bottom: .4rem; }
  .tr-opts { gap: .4rem; }
  .tr-opt { padding: .7rem .4rem; font-size: .98rem; }
  .tr-result { margin: 0; padding: .5rem .6rem; }
  .tr-verdict { font-size: .95rem; } .tr-why { font-size: .82rem; }
  .tr-next { margin-top: .5rem; gap: .4rem; }
  .tr-next .primary { padding: .75rem; font-size: 1rem; }
  .tr-next a { font-size: .8rem; }
}

.tr-hand-l { color: var(--muted); font-size: .85rem; }
@media (max-width: 640px) {
  header h1 { display: none; }
  nav a { font-size: .9rem; margin-right: .9rem; }
  .tr-stats { flex-wrap: nowrap; white-space: nowrap; }
  .tr-by { display: none; }
  .tr-reset { margin-left: auto; }
  .tr-hand-l { font-size: .68rem; width: 1.2em; line-height: 1.15; }
}

/* 流れ：左＝相手、右＝あなた */
.sv { grid-template-columns: 150px 1fr 1fr; align-items: center; }
.sv.head { padding-top: 0; padding-bottom: 0; background: none; border: none; }
.sv-h { text-align: center; font-size: .78rem; font-weight: 700; border-radius: 4px; padding: .1rem 0; color: #fff; }
.sv-h.opp { background: #9b2c2c; } .sv-h.me { background: #2b6cb0; }
.sv-col { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; min-width: 0; }
.sv-col.left { border-right: 1px dashed #ffffff22; padding-right: .4rem; }
.sv-item { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.sv-item .pc { width: 24px; height: 34px; } .sv-item .pc b { font-size: .7rem; } .sv-item .pc i { font-size: .75rem; }
@media (max-width: 640px) {
  .sv { grid-template-columns: 50px 1fr 1fr; gap: .3rem; }
  .sv-step { font-size: .6rem; }
  .sv-h { font-size: .7rem; }
  .sv-col { gap: .2rem; }
  .sv-col.left { padding-right: .25rem; }
  .sv-item { gap: .2rem; }
  .sv-item .pc { width: 18px; height: 25px; border-width: 1px; border-radius: 3px; } .sv-item .pc b { font-size: .55rem; } .sv-item .pc i { font-size: .58rem; }
  .sv-item .hand { gap: 2px; }
  .sv-you { font-size: .72rem; }
}
@media (max-width: 640px) { .sv-step { line-height: 1.25; text-align: center; } }
.sv-h small { margin-left: .35rem; font-size: .72rem; font-weight: 700; background: #00000040; border-radius: 3px; padding: 0 .3rem; }