/* tools.css — 計算ツール（/tools/…）だけで使う。

   **deck2.css には足さない。** あちらは 485枚の原稿が寄りかかっている CSS で、
   計算機のために class を増やすと、原稿側の見た目に影響が出うる（掟2）。
   ここで足すのは「.calc の中」と「tl- で始まるもの」だけにしてある。
   色と字は deck2.css の :root の変数をそのまま使う（別の色を持たない）。

   注意: コメントの中で ** の直後にスラッシュを書かないこと（掟3）。 */

/* ---------- /tools の一覧: 種類の下に並べる種目のボタン ---------- */
.kindbox{margin:0 0 12px}
.gbtns{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;
  padding:11px 0 0;border-top:1px solid var(--line)}
.gbtns .btn{font-size:12px;padding:5px 12px;text-decoration:none}
.gbtns .btn.off{opacity:.4;cursor:default;background:var(--tint);
  border-style:dashed}
.gbtns .btn.off:hover{border-color:var(--line);color:inherit;
  background:var(--tint)}

/* **`hidden` は自分で効かせる。**`display` を書いた要素に `hidden` を付けても、
   作者の CSS がブラウザの `[hidden]{display:none}` に勝ってしまい、出っぱなしに
   なる。クイズのモーダルで実際に起きた（閉じられない白い画面）。
   `display` を書く CSS には、必ずこの1行を置く。 */
[hidden]{display:none !important}

/* ---------- 上の余白 ----------
   計算ツールは**入力を先に見せたい**ので、読み物のページより上を詰める。
   この CSS は /tools/… だけが読むので、スライドや一覧には影響しない。 */
.stage{padding-top:8px}
.hubwrap{padding-top:0}
.hero{padding:16px 22px}
.hero h1{font-size:22px;margin-top:6px}
.hero p{margin-top:9px;line-height:1.75}
.hubwrap > .sect:first-of-type{margin-top:18px}

/* 札を押すたびにページが読み直されるので、**位置を保つ**ための目印。
   固定の上バー（--bar）のぶんだけ下げて、隠れないようにする。 */
#potential,#odds{scroll-margin-top:calc(var(--bar) + 10px)}
/* 道具の見出し。**2つが並んでいることを見た目でも言う** */
.sect#potential,.sect#odds{font-size:13px;letter-spacing:.04em;
  color:var(--navy);font-weight:700;margin:30px 0 6px;
  padding:0 0 6px;border-bottom:2px solid var(--navy)}
.sect#odds{color:var(--acc-ink);border-bottom-color:var(--acc)}
.tocbtns{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.tocbtns .btn{text-align:left;padding:8px 14px;text-decoration:none;
  line-height:1.5}
.tocbtns .btn b{display:block;font-size:13px;color:var(--navy)}
.tocbtns .btn i{display:block;font-style:normal;font-size:11px;
  color:var(--ink3)}
.calc .dhead .cap{font-size:10px;color:var(--ink3)}

/* ---------- 入力 ---------- */
/* 並びは「中央に手札5枚 / 右上に52枚 / 5枚の下に Dead Card」。 */
.calc{border:1px solid var(--line);border-radius:8px;background:var(--paper);
  padding:18px 20px;margin:14px 0;box-shadow:0 2px 10px rgba(30,39,97,.05)}
.calc .lbl{display:block;font-size:12px;font-weight:700;color:var(--navy2);
  letter-spacing:.04em;margin:0 0 10px}
.calc .hint{font-size:11px;color:var(--ink3);margin:6px 0 0;line-height:1.7}
.calc .deal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;
  align-items:start}

/* 中央 — 手札5枚 */
.calc .mine{min-width:0}
/* **1枚目から最後まで横一列、大きさは全部同じ。**
   札と空の枠は同じ `--sw` で作るので、埋まっていても空でも幅が動かない。 */
.calc .slots{display:flex;flex-wrap:nowrap;justify-content:center;
  align-items:flex-start;gap:10px;margin:0 0 6px;--sw:64px}
.calc .slot{flex:0 0 var(--sw);text-align:center;text-decoration:none;
  color:inherit;border-radius:8px;padding:4px 0;min-width:0}
.calc .slot .pic{display:block;line-height:0;margin:0 auto}
.calc .slot .card{--w:var(--sw)}
.calc .slot .hole{display:inline-block;width:var(--sw);
  height:calc(var(--sw) * 66 / 50);border-radius:calc(var(--sw) * .08);
  border:2px dashed var(--line3);background:var(--tint);box-sizing:border-box}
a.slot:hover{background:var(--tint2)}
a.slot:hover .card{box-shadow:0 0 0 3px var(--acc)}

/* **いま選んでいる枠。**札が入っていても空でも、同じだけ目立たせる
   （前は空の枠にしか色が付かず、埋まった枠を選んでも分からなかった）。
   **輪は1本だけ。**枠とカードの両方に付けると二重に見えて太る。 */
.calc .slot.on{background:var(--acc-bg)}
.calc .slot.on .card,.calc .slot.on .hole{
  box-shadow:0 0 0 2px var(--acc);border-color:var(--acc)}
.calc .slot.on .hole{border-style:solid;background:var(--paper)}
.calc .slot.on .pn{color:var(--acc-ink);font-weight:700}
.calc .slot.off .pic{opacity:.42}
.calc .pn{display:block;margin:7px 0 0;font-size:10px;color:var(--ink3);
  white-space:nowrap}
a.slot .pn{color:var(--acc-ink)}
.calc select{font:inherit;font-size:13px;width:100%;padding:5px 4px;
  border:1px solid var(--line);border-radius:4px;background:#fff;
  color:var(--ink);text-align:center}
.calc select:focus{outline:2px solid var(--line3);outline-offset:1px}
.calc.js .slot select{display:none}
.calc .chg{display:block;margin:7px 0 0;font-size:11px;color:var(--ink2);
  cursor:pointer;user-select:none}
.calc .chg input{vertical-align:-2px;margin-right:4px;accent-color:var(--acc)}

/* 5枚の下 — Dead Card */
.calc .deadbox{margin:16px 0 0;padding:13px 14px;border:1px solid var(--line);
  border-left:4px solid var(--ink3);border-radius:6px;background:var(--tint)}
.calc .deadbox .lbl{color:var(--ink2);margin:0}
.calc .dchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:9px 0}
.calc .dchip{background:none;border:0;padding:0;line-height:0;cursor:pointer;
  border-radius:4px}
.calc .dchip:hover{opacity:.55}
.calc input[type=text]{font:inherit;font-size:13px;padding:5px 8px;
  border:1px solid var(--line);border-radius:4px;background:#fff;
  color:var(--ink);width:100%;max-width:18em}
.calc .dform{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.calc .dform .btn{padding:5px 14px;font-size:12px}
a.dchip{display:inline-block}

/* 右上 — 52枚デッキ */
.calc .deck{border:1px solid var(--line);border-radius:8px;background:var(--tint);
  padding:12px 13px}
/* **デッキの幅は13枚ぶんで決め打つ。**
   `.deal` の右列は `auto`＝中身の最大幅で決まるので、ここに長い文章を
   置くと「1行で収めたい幅」を要求して、左の手札側（`1fr`）を 0 まで潰す。
   13枚 × 30px + すき間 4px × 12 + 内側の余白 26px + 枠線 2px = 466px。
   詰め切りだと 1px の丸めで札がはみ出すので、少し広く取る。 */
.calc .deck{width:480px;max-width:100%;box-sizing:border-box}
.calc .deck .hint{max-width:100%}
.calc .dhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0 0 10px}
.calc .dhead b{font-size:13px;color:var(--navy)}
.calc .pmode{display:flex;gap:6px;margin-left:auto}
.calc .pmode .btn{padding:4px 11px;font-size:11px}
.calc .pgrid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px;
  justify-items:center}
.calc .pk{background:none;border:0;padding:0;line-height:0;border-radius:4px;
  cursor:pointer;transition:transform .08s}
.calc .pk{display:inline-block}
.calc a.pk:hover{transform:translateY(-3px)}
.calc .pk.off{opacity:.28;cursor:default}
.calc .pk:focus-visible{outline:2px solid var(--navy2);outline-offset:2px}
/* すでに使っている札。**押しても入らないことを見た目で言う** */
.calc .pk.inhand .card{box-shadow:0 0 0 2px var(--navy)}
.calc .pk.indead{opacity:.32}
.calc .pk.indead .card{box-shadow:0 0 0 2px var(--ink3)}

.calc .acts{display:flex;align-items:center;justify-content:center;gap:16px;
  margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--tint3)}
.calc .acts .btn{padding:8px 26px;font-size:13px}
.calc .clear{font-size:12px;color:var(--ink3)}

/* ---------- Odds Calculator（Potential とは別の箱） ---------- */
.calc.odds{border-left:4px solid var(--acc)}
.calc .orow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:9px 0;border-bottom:1px solid var(--tint3)}
.calc .orow:last-of-type{border-bottom:0}
.calc .orow > .lbl{margin:0;min-width:9em;flex:0 0 auto}
.calc .odds .pmode{margin-left:0}
.calc.odds .mine{flex:1 1 auto}
.calc.odds .orow{padding:8px 0}
.calc .odds .btn i{font-style:normal;font-size:10px;color:var(--ink3);
  margin-left:5px}
.calc .odds .btn.on i{color:#fff;opacity:.75}
/* 自分と相手の席。**7枠を横一列・大きさは同じ**（空でも幅が動かない） */
.calc .seatrow{align-items:center}
.calc .seatrow.on{background:var(--acc-bg);border-radius:6px;
  margin:0 -8px;padding-left:8px;padding-right:8px}
.calc .seatrow .lbl{color:var(--navy2)}
.calc .seatrow.on .lbl{color:var(--acc-ink)}
.calc .seatrow .lbl i{display:block;font-style:normal;font-size:10px;
  font-weight:400;color:var(--ink3)}
.calc .seat7{display:flex;flex-wrap:nowrap;gap:4px;--sw:40px;min-width:0}
.calc .seat7 .sl{flex:0 0 var(--sw);line-height:0;border-radius:5px;
  text-decoration:none}
.calc .seat7 .card{--w:var(--sw)}
.calc .seat7 .hole{display:inline-block;width:var(--sw);
  height:calc(var(--sw) * 66 / 50);border-radius:calc(var(--sw) * .08);
  border:2px dashed var(--line3);background:var(--tint);box-sizing:border-box}
.calc a.sl:hover .card{box-shadow:0 0 0 3px var(--acc)}
.calc .btn.pick{margin-left:auto;padding:5px 12px;font-size:11px;
  white-space:nowrap}
/* 見出しも四角も**押せば行き先になる** */
.calc a.seatname{text-decoration:none;border-radius:4px;padding:2px 4px;
  margin-left:-4px}
.calc a.seatname:hover{background:var(--tint2)}
.calc .seatrow.on a.seatname{background:var(--acc-bg)}
.calc a.sl.empty .hole{transition:border-color .08s, background .08s}
.calc a.sl.empty:hover .hole{border-color:var(--acc);background:var(--acc-bg)}
.calc .seatrow.on .sl.empty .hole{border-color:var(--acc)}
.calc .here{margin-left:auto;font-size:11px;font-weight:700;
  color:var(--acc-ink);white-space:nowrap}
.calc .here.off{font-weight:400;color:var(--ink3);opacity:.55}
.calc .seatrow:hover .here.off{opacity:1}
.calc .odds .pmode .hint{margin-left:6px}
.calc .odds .acts{justify-content:flex-end;gap:14px}
.calc .odds .acts .hint{margin-right:auto}
.calc .btn.go{background:var(--navy);border-color:var(--navy);color:#fff;
  font-weight:700}
.calc .btn.go:hover{background:var(--navy2);border-color:var(--navy2);color:#fff}
.calc .pk.inopp .card{box-shadow:0 0 0 2px var(--acc)}

/* ---------- ハイの役10通りの色（スタッド） ---------- */
/* **強い役ほど濃い。**帯（background）と円（fill）で同じ値を使う。
   6色しかない seg0〜seg5 では足りないのでここで持つ。 */
.hc0{background:#1E2761} .hc1{background:#26306E} .hc2{background:#2B3A7A}
.hc3{background:#3A4A94} .hc4{background:#4A5BA8} .hc5{background:#6070B8}
.hc6{background:#7E8BC6} .hc7{background:#9BA5D2} .hc8{background:#B4BDDF}
.hc9{background:#DDE2ED}
/* ラズは14区分（5-low〜K-low の9つ + ペア以上の5つ）。**濃さは同じ流れ**で足す */
.hc10{background:#C6CDE6} .hc11{background:#D3D8EB} .hc12{background:#E6E9F2}
.hc13{background:#F1F3F8}
.pie .hc0{fill:#1E2761} .pie .hc1{fill:#26306E} .pie .hc2{fill:#2B3A7A}
.pie .hc3{fill:#3A4A94} .pie .hc4{fill:#4A5BA8} .pie .hc5{fill:#6070B8}
.pie .hc6{fill:#7E8BC6} .pie .hc7{fill:#9BA5D2} .pie .hc8{fill:#B4BDDF}
.pie .hc9{fill:#DDE2ED}
.pie .hc10{fill:#C6CDE6} .pie .hc11{fill:#D3D8EB} .pie .hc12{fill:#E6E9F2}
.pie .hc13{fill:#F1F3F8}

/* ---------- クイズ（/quiz/…） ---------- */
.quizbox{border-left:4px solid var(--navy)}
.quizbox .qhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  padding:0 0 10px;border-bottom:1px solid var(--tint3)}
.quizbox .qn{font-size:13px;font-weight:700;color:var(--navy)}
.quizbox .qlines{margin:14px 0 0;padding:0 0 0 1.1em;font-size:14px;
  color:var(--ink);line-height:2}
.quizbox .qask{margin:14px 0 0;font-size:15px;color:var(--navy)}
.quizbox .qchoices{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.quizbox .qc{min-width:6.5em;text-align:center;padding:12px 18px;
  font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;
  text-decoration:none}
.quizbox .qc i{display:block;font-style:normal;font-size:10px;font-weight:400;
  margin-top:3px}
.quizbox .qc.done{cursor:default;opacity:.55}
.quizbox .qc.ok{opacity:1;background:#F1F6F1;border-color:var(--pos);
  color:var(--pos)}
.quizbox .qc.ng{opacity:1;background:var(--acc-bg);border-color:var(--acc-line);
  color:var(--acc-ink)}
.quizbox .qans{margin:16px 0 0}
.quizbox .acts{justify-content:flex-end}

/* ---------- ハイローの左右2カラム ---------- */
/* **ハイとローは別物なので並べて読ませる。**狭くなったら縦に落とす。 */
.hilo{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px;margin:6px 0 0;
  align-items:start}
.hilo .col{min-width:0}
.hilo .col .sect{margin-top:14px;padding-bottom:5px;
  border-bottom:2px solid var(--navy);color:var(--navy);font-size:12px;
  font-weight:700}
.hilo .col:last-child .sect{border-bottom-color:var(--acc);color:var(--acc-ink)}
.hilo .col .hint{margin:8px 0 2px}
.hilo .col .pie{max-width:190px}
.hilo .col table.t{font-size:13px}
.hilo .col .tscroll table.t{min-width:0}
.sub2{font-size:10px;letter-spacing:.12em;color:var(--ink3);margin:18px 0 4px}
@media (max-width:900px){
  .hilo{grid-template-columns:1fr;gap:0}
}

/* ---------- 円グラフ ---------- */
/* SVG に background は効かないので、deck2.css の seg0〜seg5 と
   **同じ色**を fill として持たせる。片方だけ変えないこと。 */
.pie{max-width:240px;margin:4px auto 2px;display:block}
.pie .seg0{fill:#1E285F} .pie .seg1{fill:#5E6DC3} .pie .seg2{fill:#8C96CE}
.pie .seg3{fill:#AEB4D7} .pie .seg4{fill:#C9CCE1} .pie .seg5{fill:#E0E1EB}
.pie path{stroke:var(--paper);stroke-width:1.5}
.pie .v{font-size:26px;font-weight:700;fill:var(--navy);
  font-family:inherit;font-variant-numeric:tabular-nums}
.pie .s{font-size:11px;fill:var(--ink3);font-family:inherit}
.piewrap{margin:12px 0}
.piewrap .legend{justify-content:center}

/* ---------- 結果の見出し（何枚引いて、何通り数えたか） ---------- */
.tl-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  margin:12px 0 4px}
.tl-head b{font-size:15px;color:var(--navy);font-weight:700}
.tl-head span{font-size:12px;color:var(--ink3)}
.tl-now{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:10px 0}
.tl-now .v{font-size:14px;color:var(--ink4)}
.tl-now .v b{color:var(--navy);font-size:15px}

@media (max-width:1000px){
  /* 52枚を右に置けなくなったら、手札の下へ回す */
  .calc .deal{grid-template-columns:minmax(0,1fr)}
  .calc .deck{order:2;width:auto}
}
@media (max-width:820px){
  .calc .slots{--sw:min(64px, calc((100vw - 90px) / 7))}
}
@media (max-width:640px){
  .calc{padding:13px}
  .calc .seat7{--sw:min(34px, calc((100vw - 120px) / 7));gap:2px}
  .calc .btn.pick{margin-left:0}
  .calc .orow > .lbl{min-width:0}
  .calc .slots{gap:4px;--sw:min(56px, calc((100vw - 70px) / 7))}
  .calc .chg{font-size:10px}
  .calc .pgrid{gap:2px}
  .calc .pk .card{--w:22px}
  .calc .acts{flex-wrap:wrap}
}

/* ---------- 均衡（/tools/{slug}/equilibrium） ----------
   **左が盤面、右がアクション**（画面の分け方は GTO Wizard を参考に、
   配色と割り付けはこちらのもの）。

   色の意味:
     **打つ = 暖色**。額が大きいほど濃く（順番そのものが意味を持つ）
     **チェック = 寒色**。打たないぶんは上に残る
   升の塗りがそのまま頻度なので、**数字を読まなくても形が分かる**。 */
.eqwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;
  margin:14px 0 0;align-items:start}
@media (max-width:900px){.eqwrap{grid-template-columns:1fr}}

/* 額の色（小 → 大で濃く）。チェックだけ寒色 */
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:6px;vertical-align:-1px}
.s0{background:#FFD79A} .s1{background:#FBB45C} .s2{background:#F08A3C}
.s3{background:#DD5F2B} .s4{background:#B93A22} .s5{background:#8A1C18}
.sw.chk{background:#5C7FA8}
.f.s0{background:#FFD79A} .f.s1{background:#FBB45C} .f.s2{background:#F08A3C}
.f.s3{background:#DD5F2B} .f.s4{background:#B93A22} .f.s5{background:#8A1C18}
.in.s0{background:#FFD79A} .in.s1{background:#FBB45C} .in.s2{background:#F08A3C}
.in.s3{background:#DD5F2B} .in.s4{background:#B93A22} .in.s5{background:#8A1C18}
.in.chk{background:#5C7FA8}

/* 盤面。**暗い地**にして、塗りを浮かせる */
.eqboard,.eqpanel{background:#1B2030;border:1px solid #2C3346;border-radius:12px;
  color:#E8ECF4}
.eqboard{padding:12px;overflow:visible}
.eqhead{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.eqhead .t{font-size:14px;font-weight:800}
.eqhead .n{font-size:11px;color:#9AA6BE}
/* **区分ごとに1行。**正方形に詰めると 37 が中途半端で読みにくい。
   「7ロー 2種」「8ロー 3種」と横に並べる方が、何がどれだけ在るか見える。 */
.grow{display:flex;align-items:flex-start;gap:10px;margin:0 0 7px}
.grow .gname{flex:0 0 5.6em;padding-top:18px;font-size:12px;font-weight:800;
  color:#C8D2E6;text-align:right;line-height:1.3}
.grow .gname i{display:block;font-style:normal;font-size:10px;font-weight:700;
  color:#8894AE}
.cells{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 auto;min-width:0}
.cells .cell{flex:0 0 78px}
@media (max-width:640px){
  .grow{gap:6px}
  .grow .gname{flex:0 0 4.2em;font-size:11px}
  .cells .cell{flex:0 0 62px}
}
/* **升は切り取らない**——当てたときに出す内訳が外へ出られるように。
   塗りの方だけ丸く切る。 */
.cell{position:relative;display:block;height:60px;border-radius:6px;
  text-decoration:none;background:#5C7FA8;border:2px solid transparent}
.cell .fill{border-radius:4px;overflow:hidden}
.cell:hover{border-color:#E8ECF4}
.cell.on{border-color:#7FE08A}
/* 塗りは**下から積む**（打つぶん）。残りが地＝チェック */
.cell .fill{position:absolute;inset:0;display:flex;flex-direction:column-reverse}
.cell .f{display:block;width:100%}
.cell .lab{position:absolute;left:6px;top:5px;font-size:13px;font-weight:800;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);
  font-variant-numeric:tabular-nums}
.cell .num{position:absolute;right:5px;bottom:4px;font-size:11px;font-weight:700;
  color:#fff;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.cell.bluff .lab{font-style:italic}
.cell .f.off{opacity:.2}

/* **当てると出る内訳。**押すと読み込み直しになるので、その場で見せる。
   JS は使わない（この環境では画面の動きを機械で確かめられないため）。 */
.cell .pop{display:none;position:absolute;z-index:20;left:-2px;top:calc(100% + 5px);
  width:190px;padding:8px 10px 9px;border-radius:8px;
  background:#0F1320;border:1px solid #3A4260;
  box-shadow:0 8px 22px rgba(0,0,0,.45)}
.cell:hover .pop,.cell:focus .pop,.cell.on .pop{display:block}
.cell .ph2{display:block;font-size:12px;font-weight:800;color:#fff;
  margin:0 0 6px;padding-bottom:5px;border-bottom:1px solid #2C3346}
.cell .ph2 i{display:block;font-style:normal;font-size:10px;font-weight:600;
  color:#9AA6BE;margin-top:2px}
.cell .pr{display:flex;align-items:center;font-size:11px;font-weight:700;
  color:#C8D2E6;line-height:1.9;white-space:nowrap}
.cell .pr b{margin-left:auto;font-size:12px;color:#fff;
  font-variant-numeric:tabular-nums}
.cell .pr.zero{opacity:.35}
.cell .pr.chkrow{margin-top:4px;padding-top:4px;border-top:1px solid #2C3346}
/* 右端の升は左へ出す（画面の外に逃げないように） */
.cells .cell:nth-last-child(-n+2) .pop{left:auto;right:-2px}
.eqfoot{margin:10px 0 0;font-size:11px;line-height:1.7;color:#9AA6BE}
.eqfoot b{color:#E8ECF4}

/* 右のパネル */
.eqside{display:flex;flex-direction:column;gap:12px}
.eqpanel{padding:12px 14px}
.ph{font-size:13px;font-weight:800;margin:0 0 10px;
  border-bottom:1px solid #2C3346;padding-bottom:7px}
.ph .sub{float:right;font-size:11px;font-weight:700;color:#9AA6BE}
.act{position:relative;display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:6px;text-decoration:none;color:#E8ECF4;
  margin-bottom:3px;overflow:hidden}
.act .bar{position:absolute;inset:0;z-index:0}
.act .in{display:block;height:100%;opacity:.3}
.act .nm,.act .pc{position:relative;z-index:1;font-size:12px;font-weight:700}
.act .pc{margin-left:auto;font-variant-numeric:tabular-nums;font-size:14px;
  font-weight:800}
.act:hover{background:#242B3D}
.act.on{outline:2px solid #7FE08A;outline-offset:-2px}
.act.flat{cursor:default}
.pf{margin:9px 0 0;font-size:11px;line-height:1.7;color:#9AA6BE}
.pf b{color:#E8ECF4}
table.t.hd{width:100%;font-size:12px;background:transparent;color:#E8ECF4}
table.t.hd td{padding:4px 6px;border-bottom:1px solid #2C3346;color:#E8ECF4}
table.t.hd tr.zero td{opacity:.4}
table.t.hd tr.chkrow td{border-bottom:0}
table.t.hd .lbl{text-align:left;white-space:nowrap}
table.t.hd .dim{color:#9AA6BE}

/* 解いてある場面の前提。**実線で囲って、表として読ませる。** */
.spot{border-collapse:separate;border-spacing:0;margin:10px 0 0;
  border:2px solid var(--ink2);border-radius:10px;overflow:hidden;
  font-size:13px;text-align:left;background:var(--paper)}
.spot th,.spot td{padding:6px 12px;border-bottom:1px solid var(--line)}
.spot tr:last-child th,.spot tr:last-child td{border-bottom:0}
.spot th{font-weight:700;color:var(--ink);white-space:nowrap;width:1%;
  background:var(--tint);border-right:1px solid var(--line)}
.spot td{color:var(--ink)}

/* アクション歴。**横に並べ、回で区切る。**
   交換とベットは別の回なので、ひと続きに見えると
   「いつ何が起きたか」が読めない。 */
.rounds{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:10px 0 0}
.rounds .gap{display:flex;align-items:center;color:var(--ink3);font-size:15px;
  font-weight:800}
.round{border:2px solid var(--line);border-radius:10px;background:var(--paper);
  padding:8px 10px 9px}
.rname{font-size:11px;font-weight:800;color:var(--ink4);letter-spacing:.04em;
  margin:0 0 6px}
.rsteps{display:flex;gap:8px}
.step{min-width:6.4em;border:1px solid var(--line);border-radius:7px;
  padding:5px 9px;background:var(--tint)}
.step .who{display:block;font-size:10px;font-weight:700;color:var(--ink4);
  white-space:nowrap}
.step .what{display:block;margin-top:2px;font-size:14px;font-weight:800;
  color:var(--ink);white-space:nowrap}
.step.now{border-color:var(--navy);border-width:2px;background:var(--tint2)}
.step.now .what{color:#B93A22}
@media (max-width:640px){
  .rounds{gap:6px}
  .step{min-width:5.4em;padding:4px 7px}
  .step .what{font-size:13px}
}
.note2{margin:8px 0 0;font-size:12px;line-height:1.7;color:var(--ink)}

/* 交換の回数のタブ（/tools/badugi）。1回は厳密・2回目からは近似。
   リンクで切り替えるので JS が無くても動く（選んでいるものに aria-current）。 */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0}
.tab{display:block;min-width:6.6em;padding:7px 14px;text-align:center;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);
  text-decoration:none}
.tab b{display:block;font-size:13px;color:var(--navy)}
.tab i{display:block;margin-top:1px;font-style:normal;font-size:10px;
  color:var(--ink3)}
.tab:hover{background:var(--tint)}
.tab.on{padding:6px 13px;border-width:2px;border-color:var(--navy);
  background:var(--tint2)}
.tab.on i{color:var(--ink2)}

/* 2回目以降に残すハイカード。これを決めないと引いた先が決まらない。 */
.policy{margin:14px 0 0;padding:10px 12px;border:1px solid var(--line);
  border-radius:7px;background:var(--tint)}
.policy .caps{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 0}
.policy .caps label{display:block;font-size:12px;color:var(--ink4)}
.policy .caps label span{display:block;margin-bottom:3px}
.policy .caps select{font:inherit;font-size:13px;padding:5px 6px;
  border:1px solid var(--line2);border-radius:5px;background:var(--paper)}

/* 近似の誤差（±）。数字そのものより控えめに置く。 */
.pm{font-size:10px;color:var(--ink3);white-space:nowrap}

/* Dead Card も手札と同じ枠。**枠を選んでから、右のデッキの札を押す。**
   どこへ入るかはモードではなく「いまどの枠を選んでいるか」で決まる。 */
.calc .dslots{display:flex;flex-wrap:wrap;gap:9px;margin:9px 0}
.calc .dslot{position:relative;line-height:0}
.calc .dslot .pic{display:block;background:none;border:0;padding:0;
  line-height:0;cursor:pointer;border-radius:5px}
.calc .dslot .hole{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:58px;box-sizing:border-box;border:1px dashed var(--line2);
  border-radius:4px;background:var(--paper);color:var(--ink3);
  font-size:17px;line-height:1}
.calc .dslot.on .pic{outline:2px solid var(--acc);outline-offset:2px}
.calc .dslot.on .hole{border-style:solid;border-color:var(--acc);
  background:var(--acc-bg);color:var(--acc-ink)}
.calc .dslot .x{position:absolute;top:-7px;right:-7px;width:19px;height:19px;
  padding:0;border:1px solid var(--line2);border-radius:50%;
  background:var(--paper);color:var(--ink3);font-size:12px;line-height:1;
  cursor:pointer}
.calc .dslot .x:hover{border-color:var(--acc);color:var(--acc-ink)}

/* いま押したらどこへ入るか。**盤ごと見た目を変えて取り違えを防ぐ。** */
.calc .deck .dnow{font-size:11px;color:var(--ink3);margin-left:auto}
.calc .deck .dnow b{color:var(--navy)}
.calc .deck .dnow .mdead{display:none}
.calc .deck.dmode .dnow .mhand{display:none}
.calc .deck.dmode .dnow .mdead{display:inline;color:var(--acc-ink)}
.calc .deck.dmode{background:var(--tint2)}

/* 手札に入っている札は Dead にできない。**黙って無視せず × を出す。** */
.calc .deck.dmode .pk.inhand{cursor:not-allowed;position:relative}
.calc .deck.dmode .pk.inhand::after{content:"×";position:absolute;
  inset:0;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:var(--acc-ink)}

/* **すでに選んである札は薄く。**手札は紺・Dead は灰の枠で見分ける。 */
.calc .pk.inhand,.calc .pk.indead{opacity:.3}
.calc a.pk.inhand:hover,.calc a.pk.indead:hover{transform:none}

/* Dead Card の枠は**リンクでも同じ形**にする（`/tools/stud` などは
   JS を使わず、リンクだけで枠を選ぶ）。 */
.calc .dslot .pic{display:block;line-height:0}
.calc a.dslot{display:block;text-decoration:none}
.calc a.dslot.on .pic{outline:2px solid var(--acc);outline-offset:2px;
  border-radius:5px}
.calc .dslot a.x{display:flex;align-items:center;justify-content:center;
  text-decoration:none}
/* 空の手札枠もリンクになった（押すと手札に入れる側へ戻る）。 */
.calc a.slot.empty{cursor:pointer}
.calc a.slot.empty:hover .hole{border-color:var(--navy2)}

/* 盤の型の出やすさ。**一覧では表題だけ**にして、中身は /tools/board へ。 */
a.box.golink{display:block;text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s}
a.box.golink:hover{border-color:var(--navy);box-shadow:0 1px 6px rgba(30,40,95,.12)}
a.box.golink .more{display:inline-block;margin-top:6px;font-size:12px;
  font-weight:700;color:var(--navy)}
a.box.golink:hover .more{text-decoration:underline}

/* /tools/board の表。棒は右端に伸ばす。 */
.kindbox table.t{margin:8px 0 0}
.kindbox table.t td{padding:6px 8px;font-size:13px}
.kindbox table.t td.lbl{white-space:nowrap;font-weight:700}
.kindbox .foot{margin:8px 0 0;font-size:12px;color:var(--ink3)}

/* 盤の型の軸（Hi / Lo）。**箱より上の段**なので、はっきり大きく見せる。
   軸は増えていく（スート系 → ペア系 → 連結系）ので、
   「どの軸の話か」が一目で分かることを優先する。 */
.axis{display:flex;align-items:center;gap:12px;margin:34px 0 12px;
  font-size:22px;font-weight:800;color:var(--navy);letter-spacing:.06em}
.axis i{flex:none;font-style:normal;font-size:12px;font-weight:400;
  color:var(--ink3);letter-spacing:0}
.axis::after{content:"";flex:1;height:2px;border-radius:1px;background:var(--line)}
@media (max-width:640px){
  .axis{font-size:19px;margin:26px 0 10px}
}

/* 箱の中の小見出し（1つの箱に2つの表を置くとき）。 */
.kindbox .sub{margin:16px 0 6px;padding-top:12px;border-top:1px solid var(--line2);
  font-size:12px;font-weight:700;color:var(--navy)}

/* 横に長い表は**その中だけ**で流す（ページ全体を横に出さない）。 */
.twrap{overflow-x:auto;margin:8px 0 0}
/* 持ち方 × 行き先の表。**見出しの真下に割合**が来るように、
   見出しも中身も中央で揃える（数字は等幅）。左の1列だけ左揃え。 */
.kindbox .grid{margin:0;min-width:560px;border-collapse:collapse}
.kindbox .grid th,.kindbox .grid td{padding:7px 10px;text-align:center;white-space:nowrap;
  border-left:1px solid var(--line2)}
.kindbox .grid th:first-child,
.kindbox .grid td:first-child{text-align:left;border-left:0}
.kindbox .grid thead th{border-bottom:2px solid var(--line);vertical-align:bottom}
.kindbox .grid th b{display:block;font-size:11.5px;color:var(--navy);
  letter-spacing:.01em}
.kindbox .grid th i{display:block;margin-top:2px;font-style:normal;
  font-size:10px;
  font-weight:400;color:var(--ink3)}
.kindbox .grid th.lbl b{color:var(--ink3);font-size:11px}
.kindbox .grid tbody tr{border-top:1px solid var(--line2)}
.kindbox .grid tbody tr:nth-child(even){background:var(--tint2)}
.kindbox .grid td b{display:block;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums}
.kindbox .grid td i{display:block;margin-top:1px;font-style:normal;
  font-size:10px;
  color:var(--ink3);font-variant-numeric:tabular-nums}
.kindbox .grid td:first-child b{font-size:12.5px}
.kindbox .grid td:first-child i{color:var(--ink3);font-size:10px}
.kindbox .grid td.zero b,
.kindbox .grid td.zero i{color:var(--ink3);font-weight:400;opacity:.55}