/* Badugi のスライドだけの化粧（`body.deck-badugi`）。

   **原稿には触らない**（掟2）。DB に入っている HTML の class に当てて、
   見た目だけを替える。この1枚を消せば元の見た目に戻る。
   **他の11種目は今まで通り**——読むのは `/badugi/…` だけ。

   入口4ページ（`hub.css`）と同じ言葉づかいにそろえてある:
     ・題は明朝（Shippori Mincho）、欧文はグロテスク（Space Grotesk）
     ・色は青の濃さで段を作る。**暖色はスートだけ**（真鍮 #C88A3E）
     ・画像もグラデーションも使わない */

body.deck-badugi{
  --b-band:#060919;       /* 表紙の地（いちばん濃い） */
  --b-ind:#5064D0;
  --b-blue:#6E8BF5;
  --b-azure:#8AA5FF;
  --b-sky:#A8C0FF;
  --b-gold:#C6A667;       /* 上品な金。**唯一の暖色**（スートと表紙の線） */
  --b-min:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",
          "Noto Serif JP",serif;
  --b-en:"Space Grotesk","Helvetica Neue",Arial,var(--sans);
  /* **紙を真っ白にしない。**#fff は画面では光って安く見える。
     青みをほんの少し（R248 G250 B254・チャンネル差 6）入れて和らげる。
     色が付いて見える手前で止めてある。
     **地も同じだけ落とす**——紙だけ暗くすると、紙が地に沈んで浮かなくなる
     （明度差 5.2 → 5.3 で元のまま）。 */
  --paper:#F8FAFE;
  --bg:#E6EBF4;
  /* **小さい注記の灰**。もとの #77808F は白地で比 3.99 しかなく、
     読みにくかった（この種目に限らず、もとからそう）。
     色みは保ったまま、4.5 を超えるところまで落とす。 */
  --ink3:#6B7482}
/* 上のバーも紙に合わせる（真っ白のままだと、そこだけ光る）。 */
body.deck-badugi .appbar{background:rgba(248,250,254,.93)}

/* ---------- どの紙にも同じ印。**右上の隅にスート4つ** ----------
   紙の余白（上 40px）の中に置くので、章名や `page 1 / 84` とは重ならない。
   **読み上げない**（`::after` なので、そもそも文章に入らない）。 */
body.deck-badugi .paper::after{
  content:"♠ ♦ ♣ ♥";position:absolute;top:13px;right:18px;
  font-size:13px;letter-spacing:.22em;line-height:1;
  color:#C7D0E8;pointer-events:none}
body.deck-badugi .paper.navy::after{color:var(--b-gold)}
/* 章名の札も青でそろえる（もとは薄い水色の札）。 */
body.deck-badugi .eyebrow .tag{
  font-family:var(--b-en);letter-spacing:.06em}
body.deck-badugi .eyebrow .num{font-family:var(--b-en)}

/* ---------- 表紙 ----------
   **余白を大胆に取る。**題を左に大きく置き、札は右にグラフィックとして立てる。
   章の札と下の案内は「スライドの外枠」なので、目立たせない。 */
body.deck-badugi .paper.navy{
  background:var(--b-band);border-color:var(--b-band);
  box-shadow:0 10px 34px rgba(0,0,0,.4);padding:34px 60px}
/* 外枠（章の札・ページ番号）。**枠を外して字だけにする。** */
body.deck-badugi .paper.navy .eyebrow{color:#5C688F}
body.deck-badugi .paper.navy .eyebrow .tag{
  background:none;border:0;padding:0;color:#5C688F;font-size:10px;
  letter-spacing:.16em}
body.deck-badugi .paper.navy .eyebrow .num{color:#4B5680;font-size:10px}
body.deck-badugi .paper.navy::after{color:var(--b-gold);opacity:.75}

body.deck-badugi .cover{background:none;padding:0;margin:0}
/* **左に文字・右に札。**中の div はそのまま（原稿は触らない）ので、
   並べ替えは grid の置き場所だけで決める。 */
body.deck-badugi .cover > div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:56px;width:100%}
body.deck-badugi .cover .kicker{
  grid-column:1;grid-row:1;
  font-family:var(--b-en);color:#7E8BB8;letter-spacing:.34em;
  font-size:10px;font-weight:700;margin:0}
body.deck-badugi .cover .kicker::before{
  content:"♠";margin-right:9px;letter-spacing:0;color:var(--b-gold)}
/* 題は1語（`Badugi`）。**明朝の欧文**で、字間を少し開けて大きく置く。 */
body.deck-badugi .cover h1{
  grid-column:1;grid-row:2;
  font-family:var(--b-min);font-weight:600;font-size:74px;line-height:1.1;
  letter-spacing:.05em;margin:16px 0 0}
/* 題の下は**金の細い線1本**だけ。派手にしない。 */
body.deck-badugi .cover h1::after{
  width:88px;height:2px;border-radius:0;background:var(--b-gold);
  box-shadow:none;margin:26px 0 0}
body.deck-badugi .cover .sub{
  grid-column:1;grid-row:3;
  color:#96A2C8;font-size:12.5px;line-height:2.1;margin:22px 0 0;
  letter-spacing:.04em}
/* 英語の副題だけ金で、字間を広く。
   **`.sub` の最初の子**がそれ（原稿の1行目）。class を増やしていないのは、
   原稿が Python 側の画面とも共有で、**向こうの CSS に無い class は
   `test_strategy.py` が弾く**ため。折らない名前なので `.nb` が正しい。 */
body.deck-badugi .cover .sub > .nb:first-child{
  font-family:var(--b-en);color:var(--b-gold);font-size:13px;
  letter-spacing:.28em;font-weight:500}
body.deck-badugi .cover .sub b{color:#C6D0F4;font-weight:600}
/* 札は**右に大きく**。重なりを浅くして4枚とも見せる。 */
body.deck-badugi .cover .handrow{
  grid-column:2;grid-row:1 / span 3;justify-content:flex-end !important;
  margin:0 !important;align-self:center}
body.deck-badugi .cover .hand{margin:0}
body.deck-badugi .cover .hand .card{--w:104px;border-color:#B9C0CC;
  box-shadow:0 14px 30px rgba(0,0,0,.45)}
body.deck-badugi .cover .hand .card + .card{margin-left:calc(var(--w) * -.34)}
/* 下の案内。**外枠あつかい**で、いちばん小さく沈める。 */
body.deck-badugi .cover .hint{
  grid-column:1 / -1;grid-row:4;
  font-family:var(--b-en);color:#4B5680;font-size:10px;letter-spacing:.08em;
  margin:34px 0 0}

@media (max-width:760px){
  body.deck-badugi .paper.navy{padding:26px 26px}
  body.deck-badugi .cover > div{grid-template-columns:1fr;column-gap:0}
  body.deck-badugi .cover h1{font-size:40px;margin-top:12px}
  body.deck-badugi .cover .handrow{
    grid-column:1;grid-row:4;justify-content:flex-start !important;margin:20px 0 0 !important}
  body.deck-badugi .cover .hand .card{--w:58px}
  body.deck-badugi .cover .hint{grid-row:5;margin-top:18px}
}

/* ---------- 中身 ---------- */
/* 見出しは明朝。**本文はそのまま**（読みやすさを崩さない）。 */
body.deck-badugi .pbody h1{
  font-family:var(--b-min);font-weight:600;letter-spacing:.04em}
/* 箱の左の帯と札を、入口4ページと同じ青にそろえる。 */
body.deck-badugi .pbody .box .lbl{font-family:var(--b-en);letter-spacing:.06em}