/* 入口4ページの見た目（`/` `/slides` `/tools` `/quiz`）。
   **サイトの顔**なので、ここだけ強くする。

   読み込むのは `templates/element/hub/head.php` を呼んだ画面だけ（`body.hub`）。
   **`deck2.css` には足さない**——`.hero` `.picks` `.games` `.box` は
   スライドや種目の Top でも使っている class なので、
   あちらの見た目を巻き込まないように、ここで `body.hub` に閉じる。
   **種目の Top（`/{slug}`）とスライドは、いままでの明るい見た目のまま。**

   決めごと:
     ・**濃い地。**白地は安く見えるので、紺から黒へ寄せた地の上に置く。
       青は濃い地の上でいちばん映える。
     ・**青だけで作る。**差し色のオレンジはここでは使わない。
       濃さの違う青で、奥行きと区別を付ける。
     ・**画像もグラデーションも使わない**（deck2.css と同じ約束）。
       色は全部べた塗り。段差は面積と余白で作る。アイコンは線の SVG を直に置く。
     ・**字はどれも地との差を 4.5 以上**（小さい字・飾りは 3.0 以上）。
     ・**要素は足さない。**足したのはアイコンだけ（飾り・読み上げない）。 */

body.hub{
  /* **面は3段。**明度（L*）で 7〜9 ずつ離してある。
     近すぎると帯と地の境が消えるので、ここは数字で決めた
     （ヒーロー 2.7 → 地 11.8 → カード 19.3 → ホバー 24.4）。 */
  --h-band:#060919;       /* ヒーローの帯（いちばん濃い） */
  --h-bg:#141C42;         /* ページの地 */
  --h-card:#212A60;       /* カードの地 */
  --h-card2:#2A3474;      /* カードのホバー */
  --h-edge:#39448C;       /* 枠線 */
  --h-edge2:#5262B8;
  --h-text:#E9EDFF;       /* 本文 */
  --h-dim:#B9C3E8;        /* 弱い字 */
  --h-sky:#A8C0FF;        /* 淡い青 */
  --h-azure:#8AA5FF;      /* 明るい青（差し色） */
  --h-blue:#6E8BF5;
  --h-ind:#5064D0;
  /* **唯一の暖色。**濃紺の上では真鍮色がいちばん映える（紺と補色）。
     使うのはスートだけ——ここだけ暖かいので、飾りだと分かる。
     元の差し色（`--acc` #E8963C）より彩度を落として、品を保つ。 */
  --h-brass:#C88A3E;
  /* 族の色の既定。**族で分けていない画面**（/tools・/quiz）の
     カードにも左の帯が要るので、ここで一度決めておく。 */
  --f:var(--h-ind);
  /* 書体（--h-min / --h-en）は `deck2.css` の `:root` に在る。
     **作業画面（水色）も同じものを使う**ので、ここには置かない。 */
  background:var(--h-bg);color:var(--h-text)}

/* 上のバーも地に合わせる。**白い帯が残ると、そこだけ浮く。** */
body.hub .appbar{
  background:rgba(6,9,25,.9);border-bottom:1px solid #232C63}
body.hub .brand{border-right-color:#1A2250}
body.hub .brand .mark{color:#fff}
body.hub .brand .crumb{color:var(--h-sky)}
body.hub .appbar{border-bottom-color:#232C63}

/* ---------- ヒーロー。**画面いっぱいの濃紺の帯**（背は低く） ----------
   帯を広げるのに幅は変えない（`100vw` は縦スクロールバーのぶんだけ
   はみ出して、横スクロールが出る）。**影で外へ塗り、はみ出しを切る。**
   左右の余白は入れない——**題と下のカードの左端をそろえる**ため
   （包み `.hubwrap` の中に居るので、そのままで揃う）。 */
body.hub .hubwrap{padding-top:0}
body.hub .hero{
  position:relative;margin:-20px 0 0;border:0;border-radius:0;
  background:var(--h-band);color:#fff;padding:40px 0 38px;
  box-shadow:0 0 0 100vmax var(--h-band);clip-path:inset(0 -100vmax)}
/* 右の端にスートを並べる。**ここがポーカーの資料だと一目で分かる。**
   地に沈めると何も見えなかったので、真鍮色で置く。 */
body.hub .hero::after{
  content:"♠ ♦ ♣ ♥";position:absolute;right:4px;top:50%;
  transform:translateY(-50%);font-size:46px;letter-spacing:.14em;
  color:var(--h-brass);line-height:1;pointer-events:none}
body.hub .hero .kicker{
  font-family:var(--h-en);color:var(--h-sky);letter-spacing:.34em;
  font-size:11px;font-weight:700;margin:0}
body.hub .hero .kicker::before{
  content:"♠";margin-right:9px;letter-spacing:0;color:var(--h-brass)}
body.hub .hero h1{
  font-family:var(--h-min);color:#fff;font-size:clamp(28px,4.2vw,44px);
  line-height:1.3;letter-spacing:.04em;margin:12px 0 0;font-weight:600}
/* 見出しの下の棒は**3色**。色を重ねずに、影で隣にもう2本置く。 */
body.hub .hero h1::after{
  width:52px;height:5px;border-radius:3px;background:var(--h-azure);
  box-shadow:62px 0 0 0 var(--h-blue),124px 0 0 0 var(--h-ind);margin:18px 0 0}
body.hub .hero p{
  color:#C6D0F4;font-size:14px;line-height:1.95;margin:18px 0 0;max-width:34em}
body.hub .hero p b{color:#fff}
body.hub .hero p + p{margin-top:9px}
/* ヒーローの中のリンク。**濃紺の上では、もとの紺（`--navy2`）は沈んで見えない。** */
body.hub .hero a{
  color:var(--h-sky);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:#4A5AA8}
body.hub .hero a:hover{color:#fff;text-decoration-color:#A8C0FF}

/* ---------- 見出し（コンテンツから選ぶ / 種目から選ぶ） ---------- */
body.hub .choose{
  font-family:var(--h-min);font-weight:600;margin:42px 0 16px;font-size:19px;
  color:var(--h-text);letter-spacing:.08em}
body.hub .choose::before{
  width:6px;height:21px;border-radius:3px;background:var(--h-azure)}
body.hub .choose::after{background:#2B3572}

/* ---------- コンテンツの3つ。**同じ重さ**で、青の濃さだけ変える ---------- */
body.hub .picks{gap:16px;margin:0}
body.hub .picks{grid-auto-rows:1fr}
body.hub .pick{
  display:flex;flex-direction:column;
  position:relative;background:var(--h-card);border:1px solid var(--h-edge);
  border-top:1px solid var(--h-edge);border-radius:14px;
  padding:24px 22px 22px;box-shadow:none;color:var(--h-text);
  transition:transform .14s,box-shadow .14s,border-color .14s,background .14s}
/* 上の縁の色だけ3つで変える（主従は付けない）。 */
body.hub .pick::before{
  content:"";position:absolute;left:22px;right:22px;top:0;height:3px;
  border-radius:0 0 3px 3px;background:var(--h-ind)}
body.hub .pick:nth-child(2)::before{background:var(--h-blue)}
body.hub .pick:nth-child(3)::before{background:var(--h-azure)}
body.hub .pick:hover{
  transform:translateY(-3px);border-color:var(--h-edge2);background:var(--h-card2);
  box-shadow:0 14px 34px rgba(0,0,0,.45)}
body.hub .pick b{font-size:20px;color:#fff;letter-spacing:.01em}
body.hub .pick .en{
  font-family:var(--h-en);margin:6px 0 0;font-size:11px;letter-spacing:.24em;
  font-weight:700;color:var(--h-azure)}
body.hub .pick p{margin:14px 0 0;font-size:13px;color:var(--h-dim);line-height:1.95}
body.hub .pick p b{font-size:inherit;color:var(--h-sky)}
/* アイコンは右上。**飾りなので、字の邪魔をしない大きさに。** */
body.hub .pick .ic{
  position:absolute;right:20px;top:18px;width:30px;height:30px;
  color:var(--h-ind)}
body.hub .pick:nth-child(2) .ic{color:var(--h-blue)}
body.hub .pick:nth-child(3) .ic{color:var(--h-azure)}
body.hub .pick:hover .ic{color:#fff}
body.hub .ic svg{width:100%;height:100%;display:block}
/* **カードの中は地の色で塗る。**線だけだと重なった札が透けて、
   何枚あるのか読めない（扇がいちばん分かりにくかった）。
   塗りはカードの地に追従させるので、ホバーで色が変わってもずれない。 */
body.hub .pick,body.hub .game{--h-fill:var(--h-card)}
body.hub .pick:hover,body.hub .game:hover{--h-fill:var(--h-card2)}
body.hub .game.soon{--h-fill:#131A40}
body.hub .ic svg rect{fill:var(--h-fill)}

/* ---------- 種目。**族ごとに青を変える**（隣り合う族を見分けるため） ---------- */
body.hub .fam{margin:22px 0 0;--f:#6E8BF5}
body.hub .fam.f1{--f:#8AA5FF}
body.hub .fam.f2{--f:#A8C0FF}
body.hub .fam.f3{--f:#8490D6}
body.hub .fam .sect{
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--h-text);
  margin:0 0 11px}
body.hub .fam .sect::before{
  content:"";flex:none;width:18px;height:3px;border-radius:2px;background:var(--f)}
body.hub .fam .sect::after{content:"";flex:1;height:1px;background:#2B3572}
/* **どの札も同じ大きさにする。**行の高さを `1fr` でそろえ（いちばん高い行に
   合わせる）、カードの中は縦に積んで、**札（スライド／ツール／テスト）を
   下端にそろえる**。題や英名が2行になっても、札の位置は動かない。 */
body.hub .games{
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:11px;
  grid-auto-rows:1fr}
body.hub .game{
  display:flex;flex-direction:column;
  position:relative;background:var(--h-card);border:1px solid var(--h-edge);
  border-top:1px solid var(--h-edge);border-left:3px solid var(--f);
  border-radius:10px;padding:12px 44px 10px 15px;box-shadow:none;
  color:var(--h-text);
  transition:transform .14s,box-shadow .14s,border-color .14s,background .14s}
body.hub .game:hover{
  transform:translateY(-2px);border-color:var(--h-edge2);border-left-color:var(--f);
  background:var(--h-card2);box-shadow:0 12px 28px rgba(0,0,0,.45)}
/* 種目名はほとんど欧文なので、こちらもグロテスクで揃える。 */
/* 種目名は**カードの主役**。少し大きくして、下に族の色の線を1本引く。
   （カードの幅は変えない。上下の余白を詰めて、高さもほぼ据え置き） */
body.hub .game b{
  font-family:var(--h-en);font-size:16.5px;font-weight:700;color:#fff;
  letter-spacing:.01em;line-height:1.3;
  padding-bottom:6px;border-bottom:1.5px solid var(--f)}
body.hub .game .en{
  font-family:var(--h-en);margin-top:7px;font-size:10px;letter-spacing:.1em;
  color:#A2AEDC}
body.hub .game .chips{margin-top:auto;padding-top:9px;gap:5px}
body.hub .game .chips span{
  font-size:10px;font-weight:700;letter-spacing:.06em;
  background:#2E3A7C;color:#BFCEFF;border:0;border-radius:999px;padding:3px 9px}
/* 族のアイコンは右上。**同じ族は同じ印**なので、並びが読みやすくなる。 */
body.hub .game .ic{
  position:absolute;right:12px;top:11px;width:20px;height:20px;color:var(--f);
  opacity:.85}
body.hub .game:hover .ic{opacity:1}
/* ヒーローの帯のチップ（種目Top の「ドロー系」「スライド全35枚」…）。
   素の見た目は**明るい地の前提**（白に近い地・灰の字）なので、
   紺の上では浮く。**カードのチップと同じ作り**にそろえる。 */
body.hub .hchips{margin-top:16px;gap:5px}
body.hub .hchips span{
  font-size:10px;font-weight:700;letter-spacing:.06em;
  background:#2E3A7C;color:#BFCEFF;border:0;border-radius:999px;padding:3px 9px}

/* まだ何も無い種目。**押せないことが見て分かる**程度に落とす。 */
body.hub .game.soon{
  background:#131A40;border-color:#232C63;border-left-color:#39448C;
  box-shadow:none}
body.hub .game.soon:hover{transform:none;box-shadow:none}
body.hub .game.soon b{color:#8E99C6;border-bottom-color:#2A3266}
body.hub .game.soon .chips span{background:#1B2350;color:#8E99C6}
body.hub .game.soon .ic{color:#454F92;opacity:1}

/* ---------- 下の注記 ---------- */
body.hub .note{
  margin:38px 0 0;padding:16px 20px;background:#1A2352;
  border-left:3px solid var(--h-ind);border-radius:0 8px 8px 0;
  color:var(--h-dim);font-size:12px;line-height:1.95}
body.hub .copy{
  font-family:var(--h-en);margin:28px 0 0;color:#98A3CC;font-size:10px;
  letter-spacing:.14em}

@media (max-width:760px){
  body.hub .hero{padding:30px 0 28px;margin-top:-20px}
  body.hub .hero::after{display:none}
  body.hub .hero h1{font-size:27px}
  body.hub .hero p{font-size:13px;margin-top:14px}
  body.hub .choose{margin:32px 0 12px;font-size:16px}
  body.hub .picks{gap:11px}
  body.hub .pick{padding:18px 16px 16px}
  body.hub .pick b{font-size:17px}
  body.hub .pick .ic{width:24px;height:24px;right:16px;top:15px}
  /* 種目は**横に3つ**。ここでは名前も英名もそのまま出す
     （760px なら1枚 237px あるので、机の上と同じ見え方でよい）。 */
  body.hub .games{grid-template-columns:repeat(3,1fr)}
}

/* ---------- スマホ。**種目のカードは名前と、在るものだけ** ----------
   1列だと13種目で延々と縦に伸びる。**横に2つ**にして、指で一望できる幅に畳む。

   **3つは試してやめた。**1枚 104px（360px の端末）では、長い名前が
   9px 台でないと1行に入らない。縮めても読めず、長いものだけ2枠に広げると
   並びに穴が空いて気持ち悪い。**2つなら全種目そのまま1行**に入る
   （一番長い `NL 2-7 Single Draw` が 8.95em、320px でも 115px 取れる）。

   消すのは**英語の正式名**（`.en`）と**族のアイコン**（`.ic`）の2つ。
   出すのは**名前と、在るコンテンツ**だけ。族は左の縦線の色が持っている
   （`border-left:3px solid var(--f)`）ので、アイコンを消しても並びは読める。
   右の余白 44px はアイコンの居場所だったので、消したぶん詰める。 */
@media (max-width:620px){
  body.hub .games{grid-template-columns:repeat(2,1fr);gap:8px}
  body.hub .game{padding:10px 10px 9px 11px}
  body.hub .game .en,
  body.hub .game .ic{display:none}
  /* 名前は**必ず1行**。320px では 12px でないと入らず、390px なら 13.7px
     使える。幅に合わせて 12〜14px（実測の手順は docs/design.md）。
     万一これでも入らない名前が来たら、折り返さずに「…」で切る。 */
  body.hub .game b{font-size:clamp(12px,3.5vw,14px);line-height:1.35;
    letter-spacing:0;padding-bottom:5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* チップは**3つ横に並ぶ寸法**で組む。いまは最大2つだが、スライド・ツール・
     テストが全部そろう種目が出たときに2段へ落ちると、`grid-auto-rows:1fr` で
     **全カードが背伸びする**。カタカナは全角なので
     スライド4em + ツール3em + テスト3em = 10em、字間込みで 10.2em。
     9px・左右5px・間3px で 127.8px、360px の端末（字の幅 135px）に
     **7.2px 余る**（9.5px・6px・4px では 5.9px はみ出していた）。
     320px だけはどう詰めても入らない（7.7px の字が要る）ので折り返す。 */
  body.hub .game .chips{padding-top:8px;gap:3px}
  body.hub .game .chips span{font-size:9px;padding:2px 5px;letter-spacing:.02em}
}

/* ---------- /tools と /quiz にしか無いもの ----------
   注記の箱（`.box`）・種目のボタン（`.gbtns .btn`）・紹介文（`.desc`）。
   もとの明るい見た目は `deck2.css` と `tools.css` に在るので、
   **後ろから当て直す**（`body.hub` が付くぶん、こちらが勝つ）。 */
body.hub .box{
  background:var(--h-card);border:1px solid var(--h-edge);
  border-left:3px solid var(--h-ind);border-radius:12px;
  padding:18px 20px;margin:0 0 12px;color:var(--h-text)}
body.hub .box.key{background:var(--h-card);border-left-color:var(--h-azure)}
body.hub .box .lbl{
  font-family:var(--h-en);font-size:13px;font-weight:700;letter-spacing:.06em;
  color:#fff;margin:0 0 7px}
body.hub .box p{color:var(--h-dim);font-size:13px;line-height:1.95}
body.hub .box p b{color:var(--h-sky)}
body.hub .box code,body.hub .note code{
  font-family:var(--h-en);background:#2E3A7C;color:#BFCEFF;
  border-radius:4px;padding:1px 6px;font-size:12px}

/* 種目のボタン。**丸いピルにそろえる。** */
body.hub .gbtns{gap:7px;margin:14px 0 0}
body.hub .gbtns .btn{
  font-family:var(--h-en);background:#2A3470;border:1px solid var(--h-edge);
  border-radius:999px;color:#BFCEFF;font-size:12px;font-weight:500;
  padding:5px 13px}
body.hub .gbtns .btn:hover{
  background:var(--h-ind);border-color:var(--h-edge2);color:#fff}
body.hub .gbtns .btn.off{
  background:#161E48;border-color:#232C63;color:#7A85B4;opacity:1}
body.hub .gbtns .btn.off:hover{
  background:#161E48;border-color:#232C63;color:#7A85B4}

/* 押せる箱（/tools の「フロップ・ターン・リバーの種類」）。 */
body.hub a.box.golink{color:var(--h-text)}
body.hub a.box.golink:hover{
  border-color:var(--h-edge2);background:var(--h-card2);
  box-shadow:0 12px 28px rgba(0,0,0,.45)}
body.hub a.box.golink .more{font-family:var(--h-en);color:var(--h-azure)}

/* 道具のカードには紹介文が付く（種目の一覧には無い）。 */
body.hub .game .desc{color:var(--h-dim);font-size:12px;line-height:1.9;margin:10px 0 0}
body.hub .game .chips .share{
  font-family:var(--h-en);margin-left:auto;background:transparent;
  border:1px solid var(--h-edge);color:#A2AEDC;border-radius:999px;padding:3px 9px}
body.hub .game .chips .share:hover{border-color:var(--h-edge2);color:var(--h-sky)}

/* 族で分けていない見出し（出すもの / よく使われるもの / 置き場所）。 */
body.hub .sect{
  font-family:var(--h-en);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:#A2AEDC;margin:34px 0 12px}
body.hub .fam .sect{
  font-family:var(--h-min);font-size:13px;letter-spacing:.14em;
  color:var(--h-text);margin:0 0 11px}
body.hub .note a{color:var(--h-sky)}