/* quiz.css — /quiz/… だけで使う。

   **tools.css とも deck2.css とも混ぜない。**計算ツールとクイズは
   別の画面なので、片方を直したときにもう片方が動く形にしない。
   色と字は deck2.css の :root の変数をそのまま使う（別の色を持たない）。

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

/* ---------- 遊んでいる間はスクロールさせない ----------
   10問のタイムアタックなので、**1問ぶんが必ず1画面に収まる**ようにする。

   高さの単位は **`svh`（`dvh` ではない）。**
   `dvh` は「いまの見えている高さ」なので、**スマホで入力欄を触って
   キーボードが出ると縮み、卓ごと画面全体が小さくなる**（そう言われた）。
   `svh` はブラウザの UI が出ている時の高さで固定なので、キーボードが
   出入りしても値が変わらない。アドレスバーが引っ込んだ時に下がすこし
   余るが、**入力のたびに画面が縮むよりはるかにまし。** */
.qpage{padding-bottom:0}
/* **キーボードが出たら、その分だけ縮める。**
   `--vvh` は「いま見えている高さ」を JS が入れる（`visualViewport`）。
   これが無い環境では `100svh` のまま。上のバーから入力行までを
   **常に見せる**ため、縮むのは卓（下の `--fixed` 以外）だけ。

   `min-height` を素の 420px にすると**縮めなくなる**ので、
   見えている高さを超えないようにしておく。 */
.qpage .play{display:flex;flex-direction:column;gap:8px;
  /* **使える高さは1か所で決める。**あちこちで計算すると、
     キーボードが出たときに食い違って**はみ出す**（実際そうなった）。 */
  --avail:calc(var(--vvh, 100svh) - var(--bar) - 18px);
  height:var(--avail);
  /* **下限も使える高さを超えない。**超えるとページがスクロールできてしまい、
     ブラウザが入力欄を見せようと画面をずらして、卓が上に切れる。 */
  min-height:min(420px, var(--avail))}
/* **卓の形は変えない。**高さで伸び縮みさせると縦長になって気持ち悪い。
   16:9 のまま置き、**幅の方を画面の高さから決める**
   （deck2.css の紙（--sw）と同じやり方）。`--fixed` は卓以外が使う高さ。 */
/* **卓以外が使う高さ。**ここが足りないと、卓が大きく取られて中身が
   箱からはみ出し、**下の「© MIXGAMES Strategy」に重なる**（2026-09-29）。
   規則から数えるとこうなる（16px 基準）:

     上の帯 42 ＋ 1行のアクション歴 25 ＋ 入力行 41
     ＋ テンキー 176 ＋ 案内 26 ＋ すきま 8×5 = 40  → 350
     （アクション歴が2行に折れると 367）

   **372px** にして、2行に折れても収まるようにする。
   （キーボードが出ているときは別値。下の `.qpage.kb` を見る） */
.qpage .play{--fixed:372px;overflow:hidden}
.qpage .play .felt{flex:0 0 auto;margin-top:0;margin-bottom:0;
  /* **卓の高さ = 使える高さ − 卓以外**。ここで `--vvh` を直に引くと、
     上のバーのぶん（42px）だけ卓が大きくなり、キーボードが出たときに
     はみ出す。`--avail` と同じ物差しで測る。 */
  width:min(620px, 100%, calc((var(--avail) - var(--fixed)) * 16 / 9))}
/* 履歴は**詰まったら縮んでよい**（卓と入力行の方が大事） */
/* 前のストリートのぶんも入るので、少し高くとる（詰まったら縮む） */
.qpage .play .qacts{flex:0 1 auto;margin-top:0;max-height:5em;overflow:hidden}
.qpage .play .qin{flex:0 0 auto;margin-top:0}
.qpage .play .pad{flex:0 0 auto;margin-top:0}
/* **案内は最後に縮む。**数え違いが在っても、下の行に重なるより
   案内が切れる方がまし（`overflow:hidden` が受け止める）。 */
.qpage .play .padhint{flex:0 1 auto;min-height:0;overflow:hidden}
/* 結果を出しているときは、いつもどおり縦に伸ばす */
.qpage [data-result]{padding-bottom:32px}

/* ---------- 常時出るヘッダー ---------- */
/* **卓とブラインドは常に目立たせる。**額を間違えると全部ずれるので、
   淡い字で置かない。濃い地に白抜き、ブラインドは金色で出す。 */
.qbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px 12px;
  border-radius:8px;background:linear-gradient(180deg,#2B3A7A 0%,#1E2761 100%);
  padding:8px 14px;margin:0;flex:0 0 auto;
  box-shadow:0 2px 10px rgba(30,39,97,.28)}
.qbar .tbl{font-size:13px;font-weight:800;color:#fff;letter-spacing:.04em;
  white-space:nowrap}
.qbar .bl{font-size:14px;font-weight:800;color:#2A1E05;background:#FFD26E;
  border-radius:999px;padding:2px 12px;white-space:nowrap;
  font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.qbar .bl i{font-style:normal;font-size:10px;font-weight:700;opacity:.7;
  margin-right:5px}
/* **タイマーは右上（バーの右端）。**スタートと同時に数え上がる。
   幅が動くと隣が揺れるので、桁を揃えて最小幅を決めておく。 */
.qbar .clk{font-size:16px;font-weight:800;color:#fff;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  min-width:3.2em;text-align:right}
.qbar .prog{margin-left:auto;font-size:14px;font-weight:800;color:#1E2761;
  font-variant-numeric:tabular-nums;background:#fff;
  border-radius:999px;padding:3px 14px;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* ---------- 卓 ---------- */
.felt{position:relative;margin:14px auto 0;border-radius:130px/90px;
  background:radial-gradient(ellipse at 50% 45%,#1f5c3f 0%,#17452f 70%,#123726 100%);
  border:7px solid #6b4a2a;box-shadow:inset 0 0 40px rgba(0,0,0,.45);
  aspect-ratio:16/9;max-width:620px;margin-left:auto;margin-right:auto}
.felt .mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:#fff}
.felt .potbox{display:flex;flex-direction:column;align-items:center;gap:2px}
.felt .potlbl{font-size:10px;letter-spacing:.18em;color:#bcd8c7}
.felt .potval{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.felt .board{display:flex;gap:5px;margin-top:2px;min-height:26px;
  align-items:center}
.felt .bc{background:#fff;color:#1D1D1B;border-radius:4px;padding:3px 7px;
  font-size:13px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.felt .bc.r{color:#CE141F}
.felt .cap{color:#bcd8c7;font-size:11px}
/* 席。**枠の大きさは全員同じ**（中身で伸び縮みさせない）。
   出したチップは**枠の外**に出し、卓の中心側に置く。
   問題として出されている席は**枠に色を付ける**（文字では書かない）。 */
/* 席は**位置を固定する。**チップが出たり消えたりしても枠は動かさない
   （枠と一緒に並べると、チップのぶんだけ枠がずれて気持ち悪い）。
   枠を置きたい点に `.seatwrap` を中央合わせで置き、**チップは枠の外へ
   絶対配置**する——UTG は右、BB は左、他は下。

   枠の大きさは全員同じ（`--sw` / `--sh`）。中身では伸び縮みしない。 */
.felt{--sw:66px;--sh:32px}
.seatwrap{position:absolute;transform:translate(-50%,-50%);
  width:var(--sw);height:var(--sh)}
.seat{position:absolute;inset:0;box-sizing:border-box;display:flex;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.15);
  border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.seat b{font-size:11px;font-weight:700;color:var(--navy);letter-spacing:.04em}
/* 問題として出されている席は**赤で囲う**（文字では書かない）。 */
.seat.me{background:#FFF1EF;border:2px solid #E23A2E;
  box-shadow:0 0 0 3px rgba(226,58,46,.35),0 2px 6px rgba(0,0,0,.3)}
.seat.me b{color:#B4261C}
/* **もう降りている席は薄暗く。**枠の大きさも位置も変えない
   （動くと「まだ居る席」との違いが読み取りにくくなる）。 */
.seat.out{opacity:.32}
.qacts li.out{opacity:.45}
/* 前のストリートは**1行にまとめて薄く**。いまの手番と混ざらないように */
.qacts li.prev{opacity:.6;font-size:11px}

/* チップ。**枠の外に絶対で置く**ので、出ても枠は動かない。
   卓の上で読めるよう、透けない明るい地に濃い字。 */
.chip{position:absolute;font-size:12px;font-weight:800;color:#2A1E05;
  background:#FFD26E;border:1px solid rgba(0,0,0,.4);border-radius:999px;
  padding:2px 10px;white-space:nowrap;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 5px rgba(0,0,0,.45);
  left:50%;top:calc(100% + 6px);transform:translateX(-50%)}
/* **オールインの印。**チップの下に小さく。位置はチップに付いて回るので、
   右（UTG）でも左（BB）でも下（他）でも、必ずチップの真下に出る。 */
.chip i.ai{position:absolute;left:50%;top:calc(100% + 3px);
  transform:translateX(-50%);font-style:normal;font-size:9px;font-weight:800;
  letter-spacing:.06em;color:#B4261C;background:#fff;
  border:1px solid rgba(0,0,0,.35);border-radius:999px;padding:0 5px;
  box-shadow:0 1px 4px rgba(0,0,0,.4)}
/* **桁が多い札は一回り小さく**（`w1` = 8文字〜 / `w2` = 10文字〜）。
   数字は省略しない——足して上限を出すテストなので、桁はそのまま残す。
   大きいブラインド（3000/6000 以上）で `$1,160,000` のような札が出る。 */
.chip.w1{font-size:11px;padding:2px 8px;letter-spacing:-.01em}
.chip.w2{font-size:10px;padding:2px 7px;letter-spacing:-.02em}
.felt .potval.w1{font-size:21px;letter-spacing:-.01em}
.felt .potval.w2{font-size:18px;letter-spacing:-.02em}

.seatwrap.s0 .chip{left:calc(100% + 7px);top:50%;
  transform:translateY(-50%)}                    /* UTG → 右 */
.seatwrap.s5 .chip{left:auto;right:calc(100% + 7px);top:50%;
  transform:translateY(-50%)}                    /* BB  → 左 */

/* **ディーラー目線。**下の真ん中はディーラーの側なので空ける。
   左から順に UTG → HJ → CO → BTN → SB → BB の馬蹄形に並べる
   （left% が s0 から s5 まで必ず増えていく＝左から右に読める）。
   チップは卓の中心側へ——上の席は下に、下の席は上に出す。 */
.seatwrap.s0{left:9%;top:66%}  .seatwrap.s1{left:19%;top:24%}
.seatwrap.s2{left:41%;top:8%}  .seatwrap.s3{left:59%;top:8%}
.seatwrap.s4{left:81%;top:24%} .seatwrap.s5{left:91%;top:66%}

.felt .dealer{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.42)}

.qacts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:5px;justify-content:center}
.qacts li{font-size:12px;color:var(--ink4);background:var(--tint);
  border:1px solid var(--line);border-radius:4px;padding:4px 9px}
.qacts li b{color:var(--navy);margin-right:5px}

/* ---------- 入力とテンキー ---------- */
/* **問い・答え・決定で1行。**縦に積むものを減らすほど、
   キーボードが出たときに残る場所が増える。
   問いだけが伸び縮みし（`min-width:0`）、答えと決定は動かない。 */
.qin{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:16px 0 0}
.qin .ask{flex:1 1 auto;min-width:0;font-size:15px;color:var(--navy);
  font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* $ と入力欄はひと続きに見せる（枠の中に $ を入れる） */
.qin .amt{flex:0 0 auto;display:flex;align-items:center;gap:4px;
  padding:4px 10px;border:2px solid var(--line3);border-radius:8px;
  background:#fff}
.qin .amt:focus-within{border-color:var(--acc);
  box-shadow:0 0 0 2px rgba(232,150,60,.35)}
.qin .cur{font-size:18px;font-weight:800;color:var(--ink3)}
/* **16px を下回らない。**下回ると iOS が触った瞬間に画面を拡大する */
.qin input{font:inherit;font-size:22px;font-weight:800;text-align:right;
  font-variant-numeric:tabular-nums;width:5.2em;padding:2px 0;border:0;
  background:transparent;color:var(--ink)}
.qin input:focus{outline:0}
.qin .go{flex:0 0 auto;font:inherit;font-size:15px;font-weight:800;color:#fff;
  background:var(--navy);border:0;border-radius:8px;padding:10px 16px;
  cursor:pointer;white-space:nowrap}
.qin .go:hover{background:var(--navy2)}
.qin .go:active{transform:translateY(1px)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  max-width:300px;margin:0 auto;width:100%}
.pad button{font:inherit;font-size:18px;font-weight:700;padding:9px 0;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.pad button:hover{background:var(--tint2);border-color:var(--navy2)}
.pad button.sub{font-size:14px;color:var(--ink2)}
.pad button.go{grid-column:span 3;background:var(--navy);border-color:var(--navy);
  color:#fff;font-size:15px;padding:11px 0}
.pad button.go:hover{background:var(--navy2)}
/* 遊ぶ画面の案内も**濃い字で**（表紙のものと揃える） */
.padhint{text-align:center;font-size:11px;color:var(--ink);margin:8px 0 0}

/* **触って使う端末では、テンキーごと出さない。**
   入力欄を触れば OS のキーボードが出るので、こちらの数字は要らない
   （出すと画面が二重に埋まる）。**決定は入力行に在る**ので、
   ここを消しても送る手段は残る——iOS の数字キーボードには改行キーが無い。

   テンキーが消えたぶん、卓以外が使う高さ（`--fixed`）も小さくなる
   ＝ **卓が大きく出せる。** */
@media (pointer: coarse) {
  .qpage .play{--fixed:200px}
  .pad,.padhint{display:none}
}

/* **キーボードが出ている間は履歴を畳む。**（JS が `kb` を付ける）
   見えている高さが半分近くまで減るので、そのままだと卓が数十pxまで
   潰れて何も読めない。いちばん惜しくないもの（前のアクションの並び）を
   引っ込めて、卓の取り分を残す。 */
.qpage.kb .play{--fixed:118px}
.qpage.kb .qacts{display:none}

/* ---------- 結果一覧 ---------- */
.qres{list-style:none;margin:12px 0 0;padding:0}
.qres li{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:9px 10px;border-bottom:1px solid var(--tint3)}
.qres li:last-child{border-bottom:0}
.qres .n{width:2em;color:var(--ink3);font-size:13px;
  font-variant-numeric:tabular-nums}
.qres .mk{font-size:18px;font-weight:800;width:1.4em;text-align:center}
.qres li.ok .mk{color:var(--pos)} .qres li.ng .mk{color:var(--neg)}
.qres .ya{font-size:13px;color:var(--ink4);font-variant-numeric:tabular-nums}
.qres .see{margin-left:auto;font-size:12px;padding:4px 12px}
.qscore{font-size:18px;font-weight:800;color:var(--navy);margin:0 0 4px}

/* クイズのページは上も詰める（1画面に収めるため） */
.qpage{padding-top:0}

/* ---------- 解説 ---------- */
/* **`hidden` は自分で効かせる。**`display` を書いた要素に `hidden` を付けても、
   作者の CSS がブラウザの `[hidden]{display:none}` に勝ってしまい、
   出っぱなしになる（実際そうなって、閉じられない白い画面が出た）。 */
[hidden]{display:none !important}
.qmodal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:16px;background:rgba(20,26,50,.55)}
/* **「閉じる」を巻き込んで送らない。**中身ごとスクロールさせると、
   スマホでは解説の途中で切れて、閉じるところまで辿り着けない。
   中身だけ送り、ボタンは下に置いたままにする（正誤判定の画面と同じ形）。

   高さは **`svh`。**`vh` は「ブラウザの UI が引っ込んだ時の高さ」なので、
   アドレスバーが出ていると**下がそのぶん画面の外に出る**——
   そこで「見切れる」が起きていた。 */
.qmodal .inner{display:flex;flex-direction:column;
  background:var(--paper);border-radius:10px;max-width:560px;
  width:100%;max-height:min(100%, 90svh);overflow:hidden;padding:18px 20px;
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.qmodal .exp{flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior:contain}
/* 解説の中身は **`.exp` に付ける**。同じものを2か所で出すため——
   結果一覧から開くモーダルと、プラクティスの正誤判定画面。 */
.exp .mhead{font-size:12px;color:var(--ink3);margin:0 0 10px}
.exp .big{font-size:16px;color:var(--navy);margin:12px 0}
.exp .big b{font-size:24px;font-weight:800}
.exp .big .cap{display:block;font-size:12px;color:var(--ink3);margin-top:3px}
.exp .big .mk{font-size:20px;font-weight:800;margin-right:8px}
.exp .big.ok .mk{color:var(--pos)} .exp .big.ng .mk{color:var(--neg)}
.exp .why{margin:12px 0 0;padding-left:1.3em;font-size:13px;
  color:var(--ink4);line-height:1.9}
.qmodal .close{flex:0 0 auto;display:block;margin:14px 0 0}

/* **続きがあることを見せる。**スマホでは、切れているのか終わっているのか
   分からないまま止まって「見切れている」と見える。

   地を `local`（中身と一緒に動く）で敷き、影を `scroll`（枠に貼り付く）で
   重ねると、**送れる端にだけ影が出る**。JS を使わずに済む。 */
.qmodal .exp,.judge .jbody{
  background:
    linear-gradient(var(--paper),rgba(255,255,255,0)) 0 0/100% 22px no-repeat local,
    linear-gradient(rgba(255,255,255,0),var(--paper)) 0 100%/100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0,rgba(30,39,97,.17),rgba(30,39,97,0))
      0 0/100% 9px no-repeat,
    radial-gradient(farthest-side at 50% 100%,rgba(30,39,97,.17),rgba(30,39,97,0))
      0 100%/100% 9px no-repeat,
    var(--paper)}

/* ---------- 正誤判定の画面（プラクティス） ---------- */
/* **1問1答。**答えるたびにここへ来て、［次問題へ］で次に進む。
   解説が長くても押せるように、**ボタンは下に固定し、中身だけ送る。** */
.qpage .judge{display:flex;flex-direction:column;gap:10px;
  height:calc(100svh - var(--bar) - 18px);min-height:420px}
.judge .jmark{flex:0 0 auto;display:flex;align-items:center;gap:14px;
  border-radius:10px;padding:12px 18px;font-size:19px;font-weight:800}
.judge .jmark i{font-style:normal;font-size:30px;line-height:1}
.judge .jmark .sub{margin-left:auto;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums}
.judge .jmark.ok{background:#EAF5EC;color:var(--pos);
  border:2px solid var(--pos)}
.judge .jmark.ng{background:#FBEDEA;color:var(--neg);
  border:2px solid var(--neg)}
.judge .jbody{flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.judge .next{flex:0 0 auto;font-size:18px;font-weight:800;color:#fff;
  letter-spacing:.04em;background:linear-gradient(180deg,#2B3A7A 0%,#1E2761 100%);
  border:0;border-radius:999px;padding:15px 0;cursor:pointer;
  box-shadow:0 3px 12px rgba(30,39,97,.3)}
.judge .next:hover{filter:brightness(1.12)}
.judge .next:active{transform:translateY(1px)}

/* JS が無いときは遊べない。**その旨だけ出す** */
.qns{margin:12px 0 0}

@media (max-width:640px){
  .qpage .play{gap:6px}
  .felt{border-radius:90px/70px;border-width:5px}
  .pad button{font-size:17px;padding:8px 0}
  .qbar{padding:7px 10px;gap:6px}
  .qbar .tbl{font-size:12px} .qbar .bl{font-size:13px;padding:2px 9px}
  .qbar .prog{font-size:13px;padding:2px 10px}
  .qbar .clk{font-size:15px}
  .felt{--sw:54px;--sh:28px}
  .seat b{font-size:10px} .chip{font-size:11px;padding:1px 8px}
  .chip.w1{font-size:10px;padding:1px 6px}
  .chip.w2{font-size:9px;padding:1px 5px}
  .chip i.ai{font-size:8px;padding:0 4px}
  /* 1行に収める。**問いを縮め、答えと決定は縮めない**
     （押すところが小さくなる方が困る）。 */
  .qin{gap:6px}
  .qin .ask{font-size:13px}
  .qin .amt{padding:3px 8px}
  .qin input{font-size:20px;width:4.6em}
  .qin .go{font-size:14px;padding:9px 13px}
  .pad{max-width:100%}
}
/* 狭い画面では**解説そのものを詰める**。字と余白を落とすと、
   送らずに読める量がそのぶん増える。 */
@media (max-width:640px){
  .qmodal{padding:10px}
  .qmodal .inner{padding:14px 15px}
  .exp .mhead{font-size:11px;margin:0 0 6px}
  .exp .big{font-size:15px;margin:9px 0}
  .exp .big b{font-size:21px}
  .exp .big .mk{font-size:18px;margin-right:6px}
  .exp .why{font-size:12px;line-height:1.75;margin-top:9px;padding-left:1.2em}
  .exp table.t th,.exp table.t td{padding:6px 7px;font-size:12px}
  .exp .qacts li{font-size:12px}
  .judge{gap:8px}
  .judge .jmark{font-size:17px;padding:10px 14px}
  .judge .jmark i{font-size:25px}
  .judge .jmark .sub{font-size:12px}
  .judge .jbody{padding:12px 13px}
  .judge .next{font-size:17px;padding:13px 0}
}

@media (max-width:380px){
  .qin .ask{font-size:12px}
  .qin input{font-size:18px;width:4.2em}
  .qin .go{padding:9px 11px}
}

/* ---------- モードを選ぶ（/quiz/{slug}） ---------- */
/* **左がタイムアタック、右がプラクティス。**並びは PHP 側の順のまま。
   狭い画面では縦に積む（横に潰すと字が読めない）。 */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 0}
.modes .m{display:block;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.modes .m:hover{border-color:var(--navy);box-shadow:0 3px 12px rgba(30,39,97,.16)}
.modes .m b{display:block;font-size:17px;font-weight:800;color:var(--navy)}
.modes .m .en{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--ink3);margin-top:2px}
.modes .m p{margin:9px 0 0;font-size:13px;line-height:1.75;color:var(--ink4)}
.modes .m ul{margin:11px 0 0;padding:0;list-style:none;display:flex;
  flex-wrap:wrap;gap:6px}
.modes .m li{font-size:11px;font-weight:700;color:var(--navy);
  background:var(--tint2);border-radius:999px;padding:3px 10px}
@media (max-width:560px){.modes{grid-template-columns:1fr}}
/* ランダム出題の入口。**モードの箱の下に小さく添える。** */
/* ブラインドを選ぶ列。**モードごとに1行。** */
.lvrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0}
.lvrow .lvname{font-size:12px;font-weight:700;color:var(--navy);
  min-width:11em}
.lvrow .btn{font-size:12px;padding:5px 11px;text-decoration:none;
  font-variant-numeric:tabular-nums}
@media (max-width:560px){.lvrow .lvname{min-width:100%}}

/* ---------- 問題の一覧（/quiz/{slug}/list） ---------- */
/* **紙を広くする。**列が多いので、ふつうの幅だと横に振ることになる。
   `--stage` は紙の幅の上限（deck2.css）。ここだけ広げる——
   `100vw` は使わない（縦スクロールバーのぶんだけはみ出して、
   かえって横に振れてしまう）。 */
body.wideq{--stage:1900px}
.tscroll table.t.qlist{min-width:0}
/* 一覧は字と余白を詰める。**入る列を増やすため。** */
.qlist{font-size:13px}
.qlist th,.qlist td{padding:6px 7px}
.qlist td{vertical-align:top}
.qlist .ttl{text-align:left;font-weight:700;color:var(--ink);
  word-break:break-word}
.qlist .sub{display:block;font-size:11px;font-weight:400;color:var(--ink3)}
/* 解かれ方は3つを1つの升に */
.qlist .solved{white-space:nowrap}
.qlist .solved b{font-size:13px;font-weight:800}
.qlist .solved b.pos{color:var(--pos)} .qlist .solved b.neg{color:var(--neg)}
.qlist .solved .sub{font-size:10px}
.qlist .tg{display:inline-block;margin-top:3px;font-size:10px;font-weight:700;
  color:var(--navy);background:var(--tint2);border-radius:999px;padding:1px 8px}
.gbtns .btn.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- 問題を直す（/quiz/{slug}/edit） ---------- */
.qform{display:grid;gap:12px;margin:14px 0 0;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.qform label{display:grid;grid-template-columns:8em 1fr;gap:4px 14px;
  align-items:center}
.qform label span{font-size:13px;font-weight:700;color:var(--navy)}
.qform input,.qform select{font:inherit;font-size:14px;padding:8px 10px;
  border:1px solid var(--line3);border-radius:8px;background:#fff;
  color:var(--ink);width:100%}
.qform input:focus,.qform select:focus{outline:2px solid var(--acc);
  outline-offset:1px}
.qform label i{grid-column:2;font-style:normal;font-size:11px;color:var(--ink3);
  line-height:1.6}
.qform .acts{grid-column:1/-1;display:flex;gap:10px;margin-top:4px}
.qform .btn{font:inherit;font-size:15px;font-weight:800;cursor:pointer;
  border-radius:999px;padding:11px 28px;border:1px solid var(--line)}
.qform .btn.go{background:var(--navy);border-color:var(--navy);color:#fff}
.qform .btn.go:hover{background:var(--navy2)}
.qform .btn.del{background:#fff;color:var(--neg);border-color:var(--neg)}
.qform .btn[disabled]{opacity:.45;cursor:not-allowed}
.qlist .ed{font-size:11px;padding:3px 10px;text-decoration:none}
/* **下書き（足りないものがある問題）は薄く。**出題には回らない。 */
.qlist tr.draft,.qlist tr.draft td{background:var(--tint3)}
.qlist tr.draft td{color:var(--ink3)}
.qlist tr.draft .lbl,.qlist tr.draft .ttl{color:var(--ink3);font-weight:700}
.qlist .miss{text-align:left;color:var(--ink3);font-size:12px}
.qlist .miss b{color:var(--neg)}
.qlist .none{color:var(--ink3);font-weight:400}
.sect .dcount{margin-left:10px;font-size:12px;font-weight:700;color:var(--ink3)}
/* **足す入口。**一覧でいちばん押すものなので、ここだけ濃く出す。 */
.btn.add{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.add:hover{background:var(--navy2);border-color:var(--navy2)}
.btn.add b{color:#fff}
.btn.add i{color:rgba(255,255,255,.75)}
.sect .btn.add.sm{float:right;font-size:12px;font-weight:700;padding:5px 14px;
  text-decoration:none;border-radius:999px;margin-top:-2px}
/* まとめて貼り付ける画面。**貼る所は広くとる。** */
.qform label.wide{grid-template-columns:1fr}
.qform label.wide span{margin-bottom:2px}
.qform textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.6;padding:10px 12px;width:100%;
  border:1px solid var(--line3);border-radius:8px;background:#fff;
  color:var(--ink);resize:vertical}
.qform textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
.qform .pair{display:flex;gap:8px}
/* AI にそのまま渡す文。**折り返さずに読ませる。** */
.tell{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  line-height:1.75;background:var(--tint);border:1px solid var(--line);
  border-radius:8px;padding:12px 14px;margin:10px 0 0;overflow-x:auto;
  white-space:pre;color:var(--ink)}
@media (max-width:560px){
  .qform label{grid-template-columns:1fr}
  .qform label i{grid-column:1}
}

/* ---------- 表紙（タイムアタック） ---------- */
/* **押したら始まる、という区切り。**ここもスクロールさせない
   （遊ぶ画面と同じ高さの決め方）。 */
/* **表紙は白い紙の上に。**ページの地（`--bg`）は薄い青で、
   その上だと小さい字がどうしても沈む。**ここだけ白にする**
   ——サイト全体の色は触らない（掟3・スライドと共有しない）。 */
.qpage .cover{display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:12px;text-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:20px 18px;box-shadow:0 2px 12px rgba(30,39,97,.07);
  height:calc(100svh - var(--bar) - 18px);min-height:420px;
  /* **入りきらないときは送れるように。**紙にしてから、窓が低いと
     下の1行（`Enter` の案内）が切れて見えなくなっていた。
     切るくらいなら送る——中身は減らさない。 */
  overflow-y:auto;overscroll-behavior:contain}
/* **薄い地に薄い字を置かない。**橙のままだと 2.2:1 しか無く読めなかった。 */
.qpage .cover .ckicker{font-size:12px;font-weight:800;letter-spacing:.16em;
  color:var(--acc-ink)}
.qpage .cover h1{margin:0;font-size:30px;font-weight:800;color:var(--navy);
  line-height:1.25}
/* **本文は一番濃い字で。**`--ink4` は 6.9:1 で基準は満たすが、
   13px の中央寄せだと薄く見えた（そう言われた）。字も1つ大きくする。 */
.qpage .cover .clead{margin:0;max-width:34em;font-size:14px;line-height:1.8;
  color:var(--ink)}
/* **この回だけのもの。**卓は毎回変わるので、表紙でいちばん大きく出す。 */
/* 表紙が白になったので、この箱は**薄く色を敷いて**浮かせる */
.cnow{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--tint2);border:2px solid var(--navy);border-radius:14px;
  padding:14px 30px;box-shadow:0 3px 14px rgba(30,39,97,.16)}
.cnow .clbl{font-size:12px;font-weight:700;color:var(--ink4)}
.cnow .cbl{font-size:34px;font-weight:800;color:var(--navy);line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* **場にある最小のチップ。**ブラインドのすぐ下に小さく添える
   （この倍数でしか出せないので、上限もここに合わせて切り下がる）。 */
.cnow .cchip{font-size:12px;color:#5E6D83;margin-top:1px}
.cnow .cchip b{color:var(--ink4);font-weight:700;
  font-variant-numeric:tabular-nums}
.cnow .cwarn{font-size:12px;color:var(--ink4);margin-top:3px}
.cnow .cwarn b{color:var(--acc-ink)}

/* **いつも同じ決まり。**毎回読むものではないので、下に小さく。
   ただし**実線ではっきり囲う**——薄い線だと表に見えない。 */
/* **`collapse` にしない。**升の線と外枠がぶつかると、太さが同じときは
   **升の方が勝つ**ので、薄い線で囲われたように見える（枠が無いと言われた）。
   `separate` なら外枠は外枠として引かれ、角丸も効く。 */
.cond{border-collapse:separate;border-spacing:0;margin:2px 0 0;
  background:transparent;border:2px solid var(--ink2);border-radius:10px;
  overflow:hidden;font-size:12px;text-align:left}
.cond th,.cond td{padding:4px 11px;border-bottom:1px solid var(--line)}
.cond tr:last-child th,.cond tr:last-child td{border-bottom:0}
.cond th{font-weight:700;color:var(--ink);white-space:nowrap;
  background:var(--tint);width:1%;border-right:1px solid var(--line)}
.cond td{color:var(--ink);font-weight:700}
.start{font-size:20px;font-weight:800;color:#fff;letter-spacing:.06em;
  background:linear-gradient(180deg,#2B3A7A 0%,#1E2761 100%);
  border:0;border-radius:999px;padding:16px 64px;cursor:pointer;
  box-shadow:0 4px 14px rgba(30,39,97,.35)}
.start:hover{filter:brightness(1.12)}
.start:active{transform:translateY(1px)}
/* **一番濃い字で、1行に収める。**
   幅で折り返させない（`nowrap`）かわりに、**狭い画面では字を縮める**
   ——`clamp` の真ん中が画面の幅に連れて小さくなる。 */
.qpage .cover .chint{margin:2px 0 0;line-height:1.7;color:var(--ink);
  font-size:clamp(9px, 2.7vw, 12px);white-space:nowrap}
/* **太字も同じ黒。**`deck2.css` の `b,strong{color:var(--navy)}` が
   当たって、`Enter` だけ紺で浮いていた（「全部黒に」と言われた所）。 */
.qpage .cover .chint b,.padhint b{color:inherit}
@media (max-width:560px){
  /* 狭い画面は左右の余白を削って、1行ぶんの幅を稼ぐ */
  .qpage .cover{padding:16px 10px}
  .qpage .cover h1{font-size:24px}
  .cnow{padding:11px 22px}
  .cnow .cbl{font-size:28px}
  .start{font-size:18px;padding:15px 52px}
}

/* 出す問題をしぼる（/quiz/{種目}）。**押すと選び、もう一度で外れる。**
   状態は URL に持つので、選んだ形のまま人に渡せる。 */
.pickrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0}
.pickrow .pname{flex:0 0 8.5em;font-size:11px;font-weight:700;color:var(--navy2)}
.pickrow .btn{padding:4px 10px;font-size:11px;text-decoration:none}
.pickrow .btn .n{font-size:9px;color:var(--ink3);margin-left:3px;
  font-variant-numeric:tabular-nums}
.pickrow .btn.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pickrow .btn.on .n{color:#C8CEE6}
@media (max-width:640px){
  .pickrow{gap:5px}
  .pickrow .pname{flex:0 0 100%;margin-bottom:2px}
}

/* **上の2つを主役に。**押せばそのまま始まる（問題も卓もランダム）。 */
.modes .m .go{display:inline-block;margin:12px 0 0;padding:6px 14px;
  border:1px solid var(--navy);border-radius:5px;background:var(--navy);
  color:#fff;font-size:12px;font-weight:700}
.modes .m:hover .go{background:var(--navy2);border-color:var(--navy2)}

/* 条件をえらんだあとの「はじめる」。あたる問題数を左に並べる。 */
.startrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line2)}
.startrow .hit{font-size:12px;color:var(--ink4)}
.startrow .hit b{color:var(--navy)}
.startrow .hit.none b{color:var(--acc-ink)}
.startrow .btn.go{margin-left:auto;padding:7px 15px;font-size:12px;
  font-weight:700;text-decoration:none;border-color:var(--navy);
  background:var(--navy);color:#fff}
.startrow .btn.go:hover{background:var(--navy2);border-color:var(--navy2)}
@media (max-width:640px){
  .startrow .btn.go{margin-left:0;width:100%;text-align:center}
}

/* 札を持たないモードのボタン（いまは「タイムアタックモード２」）。
   **上の2つと同じ重さで並べない**——まだ試している最中の遊び方なので、
   札ではなく1行のボタンで、下に小さく置く。 */
.m2row{margin:10px 0 0;text-align:center}
.m2row .btn.m2{display:inline-block;text-decoration:none;font-size:12px;
  font-weight:700;padding:8px 18px;border-radius:999px;
  border:1px dashed var(--navy3);color:var(--navy);background:var(--paper)}
.m2row .btn.m2:hover{border-style:solid;border-color:var(--navy);
  background:var(--tint2)}

/* ---------- ブラインドの列だけ升目に並べる（2026-09-27） ----------
   12卓を1列に流すと、画面の幅しだいで折り返しがずれて、**どこで大きく
   なるのか**が読めなかった。升目にすると縦もそろう——`1500/3000` の
   真下が `2000/4000`。**ランダムは列の外**（卓ではなく「選ばない」）。

   列は `max-content`。**同じ列のいちばん広い札に合わせる**ので、
   上下の札の左端がそろう（`1fr` にすると全部同じ幅になって間延びする）。 */
.pickrow.bl{align-items:flex-start}
.bgrid{display:grid;grid-template-columns:repeat(8,max-content);gap:6px}
/* 升目の中では札が列の幅いっぱいに伸びるので、字は真ん中に置く。 */
.bgrid .btn{text-align:center}
/* **入る列数は幅から数えて決めた**（札1つ最大 81px + すきま 6px。
   640px までは見出しが同じ行に居るので、そのぶんを引いて数える）。
   320〜1300px のどこでも、升目が箱からはみ出さないところで切っている。 */
@media (max-width:920px){
  .bgrid{grid-template-columns:repeat(6,max-content)}
}
@media (max-width:760px){
  .bgrid{grid-template-columns:repeat(4,max-content)}
}
@media (max-width:640px){
  .bgrid{gap:5px}
}
@media (max-width:420px){
  .bgrid{grid-template-columns:repeat(3,max-content)}
}
@media (max-width:360px){
  .bgrid .btn{padding:4px 7px}
}

/* しぼる列の添え書き（「いくつでも選べます」）。**札の並びの後ろに小さく。** */
.pickrow .pnote{font-size:10px;color:var(--ink3);margin-left:4px;white-space:nowrap}

/* 一覧の並べ替え（`/quiz/{種目}/list`）。**押せる見出しだと分かる程度に。** */
.qlist th a.sortlink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line3)}
.qlist th a.sortlink:hover{color:var(--navy);border-bottom-color:var(--navy2)}
.qlist th a.sortlink.on{color:var(--navy);font-weight:700;border-bottom-style:solid}

/* 表紙の説明。**2行を箇条書きで**（始める直前に読むものだけ）。 */
ul.clead{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;
  justify-items:center}
ul.clead li{position:relative;padding-left:16px;text-align:left}
ul.clead li::before{content:"";position:absolute;left:2px;top:.9em;
  transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--navy3)}

/* 遊び方の札の説明。**1行ずつ点を打つ**（続けて書くと読み飛ばされる）。 */
/* 説明の行。**地を塗らずに下線で区切る**（札と同じ色を敷くと、
   押せるものに見える）。点は**1行目の字の真ん中**に置く
   ——`line-height` の半分が字の中心なので、そこへ寄せて上下の中央で合わせる。 */
.modes .m ul.mlead{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0}
.modes .m ul.mlead li{position:relative;padding:6px 0 6px 15px;font-size:13px;
  line-height:1.7;color:var(--ink4);background:none;border-radius:0;
  border-bottom:1px solid var(--tint3);font-weight:400;letter-spacing:0}
.modes .m ul.mlead li:last-child{border-bottom:0}
.modes .m ul.mlead li::before{content:"";position:absolute;left:2px;
  top:calc(6px + .85em);transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--navy3)}

/* ---------- スマホで重なるところを直す（2026-09-26） ----------
   実機で3つ出た。**どれも「狭いと物が近づく」**のが原因。 */

/* ① 表紙の上が切れる。**中央ぞろえの箱は、はみ出すと上が掴めなくなる**
   （`justify-content:center` + スクロールの組み合わせ。よく知られた挙動）。
   両端に伸びる空の箱を置いて、収まるときだけ中央に寄るようにする。 */
.qpage .cover{justify-content:flex-start}
.qpage .cover::before,
.qpage .cover::after{content:"";flex:0 0 auto;margin-block:auto}

@media (max-width:640px){
  /* 表紙の中身を一回り小さく（入りきれば、そもそもはみ出さない）。 */
  .qpage .cover{padding:14px 14px;gap:9px;min-height:0}
  .qpage .cover h1{font-size:23px}
  .qpage .cover .ckicker{font-size:11px}
  .qpage .cover ul.clead{font-size:13px;gap:5px}
  .cnow{padding:10px 18px}
  .cnow .cbl{font-size:27px}
  .cnow .clbl,.cnow .cwarn{font-size:11px}
  .qpage .cover .chint{font-size:11px}
  .qpage .cover .cond th,.qpage .cover .cond td{font-size:11px;padding:3px 6px}

  /* ② 上の2席（CO / BTN）のチップが、真ん中の「POT」に重なる。
     **席を外へ寄せて**、チップが中央の列に入らないようにする。 */
  .seatwrap.s2{left:34%} .seatwrap.s3{left:66%}
  /* 真ん中も小さく。額が大きいほど横に伸びて、チップに近づく。 */
  .felt .potval{font-size:18px}
  .felt .potval.w1{font-size:16px} .felt .potval.w2{font-size:14px}
  .felt .potlbl{font-size:9px;letter-spacing:.14em}
  /* **真ん中の固まりを少し上へ。**左右の席（上から66%）のチップと
     高さが重なるのを、横だけでなく縦でも外す。 */
  .felt .mid{gap:3px;padding-bottom:20px}

  /* ③ ボードの札が、左右の席（UTG / BB）のチップに重なる。
     **札をうんと小さく**する——ターンやリバーで枚数が増えると横に伸びるため。
     あわせて左右の席も外へ寄せ、チップとボードの間を空ける。 */
  .felt .board{gap:3px;min-height:18px}
  .felt .bc{font-size:10px;padding:1px 4px;border-radius:3px}
  .felt .cap{font-size:10px}
  .seatwrap.s0{left:8%} .seatwrap.s5{left:92%}
}

/* もっと狭い画面（iPhone SE など）。**札はさらに小さく。** */
@media (max-width:400px){
  .felt .bc{font-size:9px;padding:1px 3px}
  .felt .board{gap:2px}
  .felt .potval{font-size:16px}
  .seatwrap.s2{left:32%} .seatwrap.s3{left:68%}
  .seatwrap.s0{left:7%} .seatwrap.s5{left:93%}
  /* チップも一回り小さく（幅が縮むぶん、ボードとの間が空く）。 */
  .chip{font-size:10px;padding:1px 6px}
  .chip.w1{font-size:9px;padding:1px 5px}
  .chip.w2{font-size:8.5px;padding:1px 4px}
  .felt .mid{padding-bottom:26px}
  .qpage .cover h1{font-size:21px}
  .felt .potval.w1{font-size:15px} .felt .potval.w2{font-size:13px}
  .cnow .cbl{font-size:24px}
}

/* 結果の2行（タイムアタック）。**見出しと値を縦にそろえる。** */
.qscore .rrow{display:flex;align-items:baseline;gap:12px}
.qscore .rrow i{flex:0 0 auto;font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.18em;color:var(--ink3)}
.qscore .rrow b{font-size:20px;font-weight:800;color:var(--navy);
  font-variant-numeric:tabular-nums}
.qscore{display:grid;gap:4px}

/* X へ出す口（まだ押せない）。 */
.sharerow{display:flex;align-items:center;gap:10px;margin:12px 0 0}
.sharerow .xpost{background:#111;border-color:#111;color:#fff;font-weight:700;
  padding:9px 22px;border-radius:8px;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease}
.sharerow .xpost:hover{background:#000;border-color:#000;color:#fff;
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.sharerow .hint{font-size:11px;color:var(--ink3)}

/* ---------- 結果の札 ----------
   **1枚の白い面にまとめる。**結果・タイム・X への口までが1つの塊。
   全問正解のときだけ金色にして、少しだけ派手にする（`perfect`）。 */
.rcard{position:relative;background:var(--paper);border-radius:15px;
  padding:18px 20px;margin:0;
  border-left:4px solid var(--navy);
  box-shadow:0 10px 30px rgba(15,32,62,.055),0 1px 2px rgba(15,32,62,.04)}
.rcard .qscore{margin:0}
.rcard .sharerow{margin-top:14px;padding-top:14px;
  border-top:1px solid var(--tint3)}
/* 見出しと値を縦にそろえる（`結　果` と `タイム` で幅が違うため）。 */
.qscore{display:grid;gap:6px}
.qscore .rrow{display:grid;grid-template-columns:4.6em 1fr;align-items:baseline;
  gap:10px}

/* **全問正解。**金の縁と、右上の小さな札。派手にするのはここだけ。 */
.rcard.perfect{border-left-color:#C88A3E;
  box-shadow:0 0 0 2px #E8CE9C,0 14px 34px rgba(200,138,62,.20)}
.rcard.perfect .rrow b{color:#8A5A14}
/* 見出しの金は、白の上で 3.8 しか無かった。色みを保って暗くする。 */
.rcard.perfect .rrow i{color:#8F6529}
.rcard.perfect::after{content:"PERFECT";position:absolute;right:16px;top:14px;
  font-size:10px;font-weight:800;letter-spacing:.18em;color:#8A5A14;
  background:#FBF2E2;border:1px solid #E8CE9C;border-radius:999px;
  padding:3px 10px}
@media (max-width:640px){
  .rcard{padding:14px 15px}
  .rcard.perfect::after{right:12px;top:11px;font-size:9px;padding:2px 8px}
  .qscore .rrow{grid-template-columns:4.2em 1fr;gap:8px}
  .qscore .rrow b{font-size:18px}
}

/* 作業用の道（dev2 だけ）。**読者向けの案内と見分けが付くように。** */
.devonly{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line3);
  color:var(--ink3)}

/* ---------- タイムアタックモード２の表紙（2026-09-27） ----------
   **中身はタイムアタックと同じ。**画面だけポップにしたもの。
   使う色は**卓の緑とチップの黄**——この画面に元から在る2色なので、
   派手にしてもサイト全体の色は増えない（入口や作業画面には掛からない）。 */
.qpage.pop .cover{
  background:radial-gradient(ellipse at 50% 16%,#27754E 0%,#1A5437 46%,
    #123726 100%);
  border:0;border-radius:22px;gap:14px;
  box-shadow:0 18px 46px rgba(6,26,16,.34),inset 0 0 70px rgba(0,0,0,.26)}
/* 題は**丸い書体**（`Fredoka`。この画面でだけ読む）。落ちてこなかった
   ときは端末のゴシックに戻る——形は変わるが読めなくはならない。 */
.qpage.pop .cover h1{margin:0;color:#fff;line-height:1.15;
  font-family:"Fredoka","Hiragino Maru Gothic ProN",var(--sans);
  font-weight:600;font-size:clamp(28px,7.4vw,48px);letter-spacing:.005em;
  text-shadow:0 3px 0 rgba(0,0,0,.26),0 6px 16px rgba(4,20,12,.35)}

/* 影の人と吹き出し。**誰でもない人**が「ポット！」と言っている。 */
.qpage.pop .pfig{width:min(290px,74%);line-height:0}
.qpage.pop .pfig svg{width:100%;height:auto;display:block}
.qpage.pop .pfig .bub{fill:#fff;stroke:#0C2618;stroke-width:3;
  stroke-linejoin:round}
.qpage.pop .pfig .btx{fill:#12331F;font-family:var(--sans);font-size:30px;
  font-weight:800;letter-spacing:.02em}
.qpage.pop .pfig .sil{fill:#0C2618}

/* **卓はいちばん大きく。**10問ぜんぶに効く数字なので、表紙で最初に
   目に入る大きさにする。黄色い枠で囲って、額そのものを太く。 */
.qpage.pop .pbl{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:10px 26px;border-radius:16px;
  background:rgba(4,20,12,.34);border:2px solid #FFD26E;
  box-shadow:0 6px 18px rgba(4,20,12,.32)}
.qpage.pop .pbl-lbl{font-size:12px;font-weight:700;color:#CFE6D8;
  letter-spacing:.06em}
.qpage.pop .pbl-val{font-size:clamp(30px,8.4vw,46px);font-weight:800;
  color:#FFD26E;line-height:1.1;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.qpage.pop .pbl-chip{font-size:11.5px;color:#CFE6D8}
.qpage.pop .pbl-chip b{color:#EAF3EC;font-weight:700;
  font-variant-numeric:tabular-nums}

/* 知っておいてもらうこと。**行ごとに薄く敷いて**、点は黄色。 */
.qpage.pop .plist{list-style:none;margin:0;padding:0;display:grid;gap:7px;
  width:min(420px,100%);text-align:left}
.qpage.pop .plist li{position:relative;padding:9px 12px 9px 30px;
  background:rgba(255,255,255,.10);border-radius:10px;
  color:#EAF3EC;font-size:14px;line-height:1.6}
.qpage.pop .plist li::before{content:"";position:absolute;left:12px;
  top:calc(9px + .8em);transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:#FFD26E}
.qpage.pop .plist b{color:#FFE2A3;font-weight:800;
  font-variant-numeric:tabular-nums}

/* スタートは**チップの黄**。この画面でいちばん押したくなる色。 */
.qpage.pop .start.pstart{background:#FFD26E;border:0;color:#2A1E05;
  border-radius:999px;box-shadow:0 6px 0 #C79A32,0 12px 22px rgba(6,26,16,.36);
  padding:16px 58px;font-weight:800}
.qpage.pop .start.pstart:hover{background:#FFDB88}
.qpage.pop .start.pstart:active{transform:translateY(3px);
  box-shadow:0 3px 0 #C79A32,0 6px 14px rgba(6,26,16,.32)}
/* **窓が低いときは絵を小さく。**表紙は送れる作りだが、始める前の画面が
   スクロールするのは落ち着かない（横向きのスマホ・小さい窓）。 */
@media (max-height:620px){
  .qpage.pop .cover{gap:9px;padding:14px 12px}
  .qpage.pop .cover h1{font-size:clamp(23px,5.6vw,30px)}
  .qpage.pop .pfig{width:min(180px,52%)}
  .qpage.pop .plist li{padding:7px 10px 7px 26px;font-size:13px}
  .qpage.pop .start.pstart{padding:13px 44px}
}
/* **横向きのスマホは2列に組む。**縦に積むと窓（330px ほど）に入らず、
   始める前の画面が送りになる。左に題と卓、右に知らせる行とスタート。
   **絵は出さない**——横向きで場所を食うのは絵で、意味は言葉が持っている。
   （縦向きはそのまま。絵が出るのは縦のときだけ） */
@media (max-height:480px) and (orientation:landscape){
  .qpage.pop .cover{
    display:grid;justify-content:center;align-content:center;
    grid-template-columns:auto auto;gap:6px 22px;padding:10px 16px;
    grid-template-areas:"ttl list" "bl  go"}
  .qpage.pop .cover h1{grid-area:ttl;font-size:24px}
  .qpage.pop .pfig{display:none}
  .qpage.pop .pbl{grid-area:bl;padding:7px 18px}
  .qpage.pop .pbl-val{font-size:26px}
  .qpage.pop .pbl-lbl,.qpage.pop .pbl-chip{font-size:10.5px}
  .qpage.pop .plist{grid-area:list;align-self:center;gap:5px;
    width:min(340px,42vw)}
  .qpage.pop .plist li{font-size:11.5px;padding:6px 9px 6px 24px}
  .qpage.pop .plist li::before{left:9px;width:7px;height:7px}
  .qpage.pop .start.pstart{grid-area:go;align-self:center;justify-self:center;
    padding:12px 34px;font-size:16px}
}
@media (max-width:560px){
  .qpage.pop .cover{padding:16px 12px;gap:11px}
  .qpage.pop .pfig{width:min(240px,68%)}
  .qpage.pop .plist li{font-size:13px;padding:8px 10px 8px 28px}
  .qpage.pop .start.pstart{padding:15px 48px}
}

/* ---------- タイムアタックモード２の卓（2026-09-27） ----------
   **数字は1つも変えない。**変えるのは色と丸みと影だけ——大きさ・余白・
   位置には触らないので、卓の高さの計算（`--avail` / `--fixed`）と、
   スマホで重なりを外した位置決めはそのまま効く。
   掛かるのは `.qpage.pop`（`time2`）だけ。ふだんの卓は動かない。 */

/* 上のバー。**濃紺をやめて卓の色に寄せる。** */
.qpage.pop .qbar{
  background:linear-gradient(180deg,#1E6142 0%,#123A27 100%);
  border-radius:14px;box-shadow:0 3px 12px rgba(4,20,12,.34),
    inset 0 1px 0 rgba(255,255,255,.14)}
.qpage.pop .qbar .clk{color:#FFE2A3}
/* **Q 3 / 10 は白い錠剤に濃い字。**地は白のままなので、字だけ薄くすると
   読めなくなる（緑に合わせて薄くして、白い錠剤の上で消えていた）。 */
.qpage.pop .qbar .prog{color:#123A27;background:#fff;font-weight:800}

/* 卓。**縁を太く見せる**（枠の太さは変えずに、内側の線で厚みを出す）。 */
.qpage.pop .felt{
  /* **真ん中を明るくしすぎない。**ここに POT の字が乗るので、
     明るくするほど字が読めなくなる（`#2A8259` だと 2.95 しか無かった）。 */
  background:radial-gradient(ellipse at 50% 42%,#26794F 0%,#1A5437 68%,
    #103324 100%);
  border-color:#7A5430;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.10),
    inset 0 0 44px rgba(0,0,0,.42),0 10px 26px rgba(4,20,12,.34)}

/* ポット。**金色で大きく**（額そのものは触らない）。 */
.qpage.pop .felt .potlbl{color:#E2F6EC;font-weight:800}
/* 「プリフロップ」の一行も、明るくした地に合わせて白寄りに。 */
.qpage.pop .felt .cap{color:#E2F6EC}
.qpage.pop .felt .potval{color:#FFD26E;text-shadow:0 2px 0 rgba(0,0,0,.35)}

/* ボードの札は**角を丸く**して、白を少し温かく。 */
.qpage.pop .felt .bc{border-radius:6px;
  background:linear-gradient(180deg,#fff 0%,#F2F6FA 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.38)}

/* 席は**丸い札**に。問われている席は赤く光らせる（色の意味は変えない）。 */
.qpage.pop .seat{border-radius:999px;border-color:rgba(0,0,0,.22);
  background:linear-gradient(180deg,#fff 0%,#EFF3F8 100%);
  box-shadow:0 3px 7px rgba(0,0,0,.36)}
.qpage.pop .seat b{color:#16214F}
.qpage.pop .seat.me{background:linear-gradient(180deg,#FFF3F0 0%,#FFE3DE 100%);
  box-shadow:0 0 0 4px rgba(226,58,46,.30),0 3px 8px rgba(0,0,0,.36)}
@media (prefers-reduced-motion:no-preference){
  .qpage.pop .seat.me{animation:popme 1.5s ease-in-out infinite}
}
@keyframes popme{
  0%,100%{box-shadow:0 0 0 4px rgba(226,58,46,.30),0 3px 8px rgba(0,0,0,.36)}
  50%{box-shadow:0 0 0 7px rgba(226,58,46,.18),0 3px 8px rgba(0,0,0,.36)}
}

/* チップは**本物のチップらしく**（内側に白い輪）。額は触らない。 */
.qpage.pop .chip{
  background:radial-gradient(circle at 50% 30%,#FFE3A6 0%,#FFD26E 60%,
    #E9B85C 100%);
  border-color:rgba(0,0,0,.45);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 3px 6px rgba(0,0,0,.45)}

/* 問いは**吹き出し**に（表紙の「ポット！」と同じ形）。 */
.qpage.pop .qin .ask{color:#123A27;font-weight:800}
.qpage.pop .qin .amt{border-color:#1E6142;border-radius:12px}
.qpage.pop .qin .amt:focus-within{border-color:#E8963C;
  box-shadow:0 0 0 3px rgba(232,150,60,.30)}
.qpage.pop .qin .go{background:#FFD26E;color:#2A1E05;border-radius:999px;
  box-shadow:0 3px 0 #C79A32}
.qpage.pop .qin .go:hover{background:#FFDB88}
.qpage.pop .qin .go:active{transform:translateY(2px);box-shadow:0 1px 0 #C79A32}

/* テンキーも丸く。**押した感じ**を影の厚みで出す。 */
.qpage.pop .pad button{border-radius:12px;border-color:#CBD8E4;
  box-shadow:0 2px 0 #D7E0EA}
.qpage.pop .pad button:active{transform:translateY(2px);box-shadow:none}
.qpage.pop .pad button.go{background:#1E6142;border-color:#1E6142;
  box-shadow:0 3px 0 #123A27}
.qpage.pop .pad button.go:hover{background:#25764F}

/* ---------- タイムアタックモード２の結果（2026-09-28） ----------
   **1枚の板にまとめて、卓と同じ緑に乗せる。**遊び終わった直後の画面なので、
   ここだけは大きく派手にしてよい（ふだんのタイムアタックは白いまま）。 */
.qpage.pop [data-result]{
  /* **卓より一段暗く。**上に字がたくさん乗るので、明るくすると
     見出しや番号が読めなくなる（頭を `#26794F` にしたら 3.3 まで落ちた）。 */
  background:radial-gradient(ellipse at 50% 0%,#1E6142 0%,#143F2B 55%,
    #0C2A1C 100%);
  border-radius:22px;padding:18px 16px 20px;
  box-shadow:0 18px 46px rgba(6,26,16,.34),inset 0 0 70px rgba(0,0,0,.22)}
/* **`hidden` は効かせ直す。**`display` を書く側は必ずこれを添える
   （`deck2.css` の約束・検算が見ている）。 */
.qpage.pop [data-result][hidden]{display:none}

/* 「結果」は**金の帯**に。 */
.qpage.pop [data-result] .sect{
  margin:0 0 12px;text-align:center;font-size:13px;letter-spacing:.3em;
  font-weight:800;color:#2A1E05;background:#FFD26E;border-radius:999px;
  padding:5px 0;box-shadow:0 3px 0 #C79A32}

/* 点と時間。**数字をうんと大きく。** */
.qpage.pop .rcard{background:rgba(255,255,255,.10);border-left:0;
  border-radius:16px;padding:16px 16px 14px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16)}
.qpage.pop .rcard .qscore .rrow{grid-template-columns:4.2em 1fr;
  align-items:center}
.qpage.pop .rcard .rrow i{color:#FFE9BF;letter-spacing:.22em}
.qpage.pop .rcard .rrow b{color:#fff;font-size:clamp(24px,6.6vw,34px);
  line-height:1.15;text-shadow:0 2px 0 rgba(0,0,0,.28)}
.qpage.pop .rcard .sharerow{border-top-color:rgba(255,255,255,.18)}
.qpage.pop .rcard .xpost{border-radius:999px;box-shadow:0 3px 0 #000}

/* **全問正解は金一色。**ここだけ地ごと変える。 */
.qpage.pop .rcard.perfect{
  background:linear-gradient(180deg,#FFE3A6 0%,#FFD26E 62%,#F0BE58 100%);
  box-shadow:inset 0 0 0 2px #fff,0 10px 26px rgba(201,150,40,.45)}
.qpage.pop .rcard.perfect .rrow i{color:#7A5310}
.qpage.pop .rcard.perfect .rrow b{color:#2A1E05;text-shadow:0 2px 0 #FFF0C9}
.qpage.pop .rcard.perfect::after{font-size:12px;letter-spacing:.24em;
  color:#2A1E05;background:#fff;border-color:#C79A32;padding:3px 12px;
  box-shadow:0 2px 0 #C79A32}
.qpage.pop .rcard.perfect .sharerow{border-top-color:rgba(42,30,5,.22)}

/* 1問ずつの結果。**行ごとに丸く敷く。** */
.qpage.pop .qres{margin-top:14px;display:grid;gap:7px}
.qpage.pop .qres li{border-bottom:0;border-radius:12px;padding:9px 12px;
  background:rgba(255,255,255,.10)}
.qpage.pop .qres .n{color:#DCEFE4}
.qpage.pop .qres .ya{color:#F1F8F3}
.qpage.pop .qres li.ok .mk{color:#A6F0BE}
.qpage.pop .qres li.ng .mk{color:#FFB8AF}
.qpage.pop .qres .see{background:rgba(255,255,255,.90);border-color:transparent;
  color:#123A27;font-weight:700;border-radius:999px}
.qpage.pop .qres .see:hover{background:#fff;color:#0C2618}

/* もう一度 / モードを選ぶ。**押せる形を大きく。** */
.qpage.pop [data-result] .acts{justify-content:center;gap:12px;
  margin-top:16px}
.qpage.pop [data-result] .acts .btn{border-radius:999px;font-size:14px;
  font-weight:800;padding:12px 26px;background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.35);color:#fff}
.qpage.pop [data-result] .acts .btn:hover{background:rgba(255,255,255,.2);
  border-color:#fff;color:#fff}
.qpage.pop [data-result] .acts .btn.go{background:#FFD26E;border-color:#FFD26E;
  color:#2A1E05;box-shadow:0 4px 0 #C79A32}
.qpage.pop [data-result] .acts .btn.go:hover{background:#FFDB88;
  border-color:#FFDB88;color:#2A1E05}
.qpage.pop [data-result] .acts .btn.go:active{transform:translateY(3px);
  box-shadow:0 1px 0 #C79A32}

/* 卓の下の1行（ポップな画面だけ）。**卓と同じ幅に収める。**
   言葉は1文字に詰めてあるので、6人ぶん並んでも1〜2行で収まる。
   札（`qacts`）は出さない——同じことを2か所に置かない。 */
.qpage.pop .play .qacts{display:none}
.qpage.pop .play .qacts[hidden]{display:none}
.qline{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:2px 9px;width:min(620px,100%);margin:8px auto 0;
  font-size:11.5px;line-height:1.5;color:#3A4150;
  font-variant-numeric:tabular-nums}
/* **1人ぶんで1つの楕円**（`UTG c 600`）。区切りの記号は要らない
   ——枠が塊を作る。**白い地に黒い字でそろえる**：何をしたかで色を
   変えていたが、卓の下に7つ8つ並ぶと色の方が目に付いて、肝心の
   「誰がいくら」が読みにくかった。
   **枠線は地との差 3.0 以上**にする。地（薄い水色）と白はほとんど
   差が付かない（1.16）ので、線が見えないと塊も見えない。 */
.qline span{white-space:nowrap;border-radius:999px;padding:1px 9px;
  background:#fff;border:1px solid #6E88A6;color:#1D1D1B}
.qline span b{font-weight:800;margin-right:2px}
/* 降りた席は**字だけ薄く**（地は白のまま・枠線もそのまま）。
   透かし（`opacity`）でまとめて薄くすると**枠線まで消える**（1.9 まで
   落ちた）ので、色で薄くする。 */
.qline .af{color:#5E6D83}
/* いま問われている席。**枠を太くするだけ**——塗り分けない。 */
.qline .now{border-width:2px;border-color:#1D1D1B;padding:1px 10px}
/* 前のストリートは楕円にせず薄く（いまの手番と混ぜない）。 */
.qline .pv{color:#5E6D83;background:none;border:0;padding:1px 2px}
.qline .pv i{font-style:normal;font-weight:700;margin-right:3px}
.qline em{font-style:normal;font-size:9px;font-weight:800;margin-left:3px;
  color:#1D1D1B;letter-spacing:.04em}
@media (max-width:560px){
  .qline{font-size:10.5px;gap:1px 7px;margin-top:6px}
}

/* 問題の id（**dev2 だけ**）。上の帯の右端、時計の手前に小さく。
   `devonly` は「作業用」の印で、本番では要素ごと出ない。 */
.qbar .qid{font-size:10.5px;font-weight:700;letter-spacing:.04em;
  color:#C8CEE6;background:rgba(255,255,255,.10);border-radius:999px;
  padding:1px 8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.qpage.pop .qbar .qid{color:#CFE6D8;background:rgba(255,255,255,.14)}
/* **狭い画面の帯は場所が無い。**id を足したぶん、いちばん要らないものから
   落とす——「6人卓」（いつも6人）と「BLINDS」の字（金の錠剤で分かる）。
   帯の高さ（`--bar` = 42px）は変えない。折り返すと卓の高さの計算が崩れる。 */
@media (max-width:480px){
  .qbar .tbl{display:none}
  .qbar .bl i{display:none}
  .qbar .bl{font-size:12px;padding:2px 8px}
  .qbar .prog{font-size:12px;padding:2px 8px}
  .qbar .clk{font-size:14px;min-width:2.9em}
  .qbar .qid{font-size:10px;padding:1px 6px}
}