/*
    ゲームコーナー固有の CSS（GAME-01 Step4-6c）。

    ── 位置づけ ────────────────────────────────────────
    ヘッダー・フッターは本体と共通なので、body の地の色・フォント・枠の装飾は
    本体の共有 CSS が持つ。このファイルは
    **ゲームだけが持つ器（カード・戦績）の上書き**に絞る。読み込み順は最後（後勝ち）。

    ── 🔴 このサイトは 1rem = 10px ──────────────────────────
    `layout201911.mobile/Main.css:81-85` が
        html      { font-size: 62.5%; }   ← 1rem = 10px
        html>body { font-size: 1.6rem; }  ← 本文は 16px
    を持っている。**共有 CSS を読む側に回った時点で rem の意味が変わる**ので、
    1rem=16px のつもりで書いた数字をそのまま置くと**約6割の大きさ**になる
    （Step4-5 で実際にやらかして、ユーザーに「文字が小さい」と指摘された）。
    → **このファイルの rem は全部 10px 基準**。本文相当＝1.6rem、注釈＝1.3rem。

    ── 触らないこと ────────────────────────────────────
    - body / #body_wrap / #header_wrap / #footer_wrap / #main_content_wrap / #left_wrap
      → 本体の共有 CSS の担当。ここで上書きすると本体と姿が変わり、
        「別サイトに見えないようにする」という今回の目的を自分で壊す。
    - * { box-sizing } のような全称セレクタ
      → 本体の CSS は content-box 前提の箇所を持つため、全体に掛けると崩れうる。

    ── 想定している遊ばれ方 ────────────────────────────────
    屋外・車内・スマホ縦・片手。タップ対象は 44px 以上を確保する。
*/

/*
    ── 🎮 8ビット（ファミコン）風・Step7（2026-08-18）─────────────────────
    適用範囲は**ゲームの中身だけ**（`#left_wrap` の内側＝`@RenderBody()`）。
    🔴 ヘッダー・パンくず・フッターは8ビット化しない（ユーザー判断22）。
       これらは `#left_wrap` の**外側**にあるので、下の規則を `.games_*` / `.reversi_*` に
       当てている限り自然に対象外になる。**`#left_wrap` 単体のセレクタは書かない**
       （本体のページも同じ id を持つ＝読む人が誤解する）。

    ── 書体（判断24・2026-08-18 最終）＝**JFドット東雲ゴシック12**（標準／太字）… `--games-font-body`
    経緯＝美咲（8×8）→ 東雲ゴシック12 → 一度ぜんぶ撤去（本体の書体）→ **東雲ゴシック12 に戻した**。
    「美咲は読みにくい」「一度普通の字も見たが、やはりドットの方がゲームらしい」というユーザー判断。
    `wwwroot/content/fonts/games/` に**サブセット済み**（標準 13KB＋太字 12KB＝**25KB**）。
    ライセンス原文は同フォルダの LICENSE.txt。作り方は `docs/tasks/GAME-01/verify/fonts-subset.md`。
    🔴 **`url()` のファイル名には中身の指紋（SHA-256 先頭8桁）が入っている**＝
       `@font-face` には `asp-append-version` が効かない（`AssetVersionTests` は `<link>`/`<script>` しか見ない）。
       フォントを作り直したら名前が変わるので、ここの `url()` も貼り替える。
       見張り＝`GamesCssTests`（`url()` の先が実在／外部ホストを指さない／`@font-face` 2本＋`swap`）。
    🔴 **Google フォントは使えない**＝`GamesShellTests` が `fonts.googleapis.com` を名指しで 0 件チェック
       （設計6＝電波の弱い車内で遊ぶ前提）。自前配信の一択。
    📌 文字は **px で 12 の倍数**を基本にする（12・24・36）。`rem` は使わない（1rem = 10px の罠）。
    📌 サブセット外の漢字は後ろの `sans-serif` で出る＝文言に新しい字を足したら切り直す。
*/

@font-face {
    font-family: "GamesDot12";
    src: url("../../../fonts/games/jfdot-shinonome12.c6ee1b55.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GamesDot12";
    src: url("../../../fonts/games/jfdot-shinonome12b.ada2af32.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/*
    🎨 パレット（絞る＝8ビットらしさの半分はここ）。
       墨・紙・緑（盤）・黄（注目）・空色（リンク／フォーカス）・赤（取り返しのつかない操作）・灰。
    📌 変数は `:root` に置く＝ゲームの CSS 2本（このファイルと `games/reversi/Main.css`）で共有。
       名前に `games-` を付けて本体の変数と衝突させない。
*/
:root {
    --games-ink: #1a1a1a;
    --games-paper: #fff;
    --games-grey: #d8d8d8;
    --games-grey-dark: #6c6c6c;
    --games-green: #1e9c4c;
    --games-green-dark: #0b5c26;
    --games-green-light: #5ce07a;
    --games-yellow: #f8d830;
    --games-sky: #3cbcfc;
    --games-red: #e4404c;
    /*
        📌 影は「浮いている＝押せる」の合図にだけ使う（2026-08-18 ユーザー要望「クドい」で控えめに）。
           枠 2px・影 3px が基本。盤とポップアップだけ一段太い。
    */
    --games-font-body: "GamesDot12", sans-serif;
    --games-line: 2px;
    --games-shadow: 3px 3px 0 var(--games-ink);
}

/* ---- 見出し（ページの h1＝ゲームの中身の一部） ---- */

#games_title,
#reversi_title {
    margin: 8px 0 20px;
    font-family: var(--games-font-body);
    font-weight: bold;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--games-ink);
}

/* ---- リード ---- */

.games_lead {
    margin: 0 0 20px;
    font-family: var(--games-font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--games-ink);
}

/* ---- ゲームカード ---- */

/*
    🃏 棚＝grid（Step9・2026-08-19）。ゲームが増えたら**横に並んで**折り返す。
       393px（Pixel 4a）で 2 列・PC の本文幅で 3〜4 列。列数は CSS に書かない
       （`auto-fill` が幅から決める）＝**ゲームを足しても CSS は触らない**。
    📌 1本しか無い期間は左に 1 枚だけ並ぶ（「これから増える棚」に見える・ユーザー判断で許容）。
*/
.games_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

/*
    🕹️ カード＝角丸ゼロ・直線の枠・**ぼかさない影**（`--games-shadow`）。
       押すと影の分だけ沈む（`:active`）＝物理ボタンの手触り。
    🃏 中身は**画像 → タイトル → 「遊ぶ」**の縦積み。カード全体が 1 本の `<a>`。
    🔴 **ホバーで札全体を反転しない**（Step9 で撤去）＝画像は反転しないので浮いて見える。
       代わりに「遊ぶ」の飾りだけ反転させる（押し場所を教える）。
    🔴 `box-sizing: border-box`＝枠 2px を幅の内側に収める（`.reversi_actions` で踏んだ罠と同じ）。
*/
.games_card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0;
    background: var(--games-paper);
    border: var(--games-line) solid var(--games-ink);
    border-radius: 0;
    box-shadow: var(--games-shadow);
    text-decoration: none;
    color: var(--games-ink);
    font-family: var(--games-font-body);
}

.games_card:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

.games_card:focus-visible {
    outline: 3px solid var(--games-sky);
    outline-offset: 2px;
}

/* 準備中のカードは押せないので、押せそうに見せない（影も落とさない） */
.games_card.is_preparing {
    background: #f0f0f0;
    color: var(--games-grey-dark);
    border-color: var(--games-grey-dark);
    box-shadow: none;
}

/*
    🖼️ 画像＝正方形（1:1）に固定して `object-fit: cover`。
    🔴 `aspect-ratio` が無いと画像の縦横比で札の高さが揃わない。
    📌 `width`/`height` 属性（640）はビュー側＝CLS 対策。表示幅は CSS が勝つ。
*/
.games_card_img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-bottom: var(--games-line) solid var(--games-ink);
}

.games_card_head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 8px 4px;
}

.games_card_head h2 {
    margin: 0;
    font-family: var(--games-font-body);
    font-weight: bold;
    font-size: 18px;
    line-height: 1.25;
    text-align: center;
}

.games_badge {
    padding: 2px 8px;
    border: var(--games-line) solid currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--games-red);
    font-family: var(--games-font-body);
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
}

/*
    ▶ 「遊ぶ」＝**飾り**（`<span>`）。ボタンに見せるが押し場所を教えるだけで、リンクはカード全体。
       カードにホバー／フォーカスした時だけ反転して「ここが入口」と示す。
    📌 `margin-top: auto`＝タイトルの行数が違う札が並んでも「遊ぶ」の位置を下端で揃える。
*/
.games_card_cta {
    display: block;
    box-sizing: border-box;
    margin: auto 12px 12px;
    padding: 6px 8px;
    border: var(--games-line) solid var(--games-ink);
    background: var(--games-paper);
    color: var(--games-ink);
    font-family: var(--games-font-body);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.games_card:hover .games_card_cta,
.games_card:focus-visible .games_card_cta {
    background: var(--games-ink);
    color: var(--games-paper);
}

/*
    🖥️ PC（768px 以上）は一段大きく（2026-08-18 ユーザー要望）。ドットなので 12 の倍数で上げる。
*/
@media (min-width: 768px) {
    #games_title,
    #reversi_title { font-size: 36px; }

    .games_lead { font-size: 20px; }
    /* 棚＝PC は 1 枚を大きく（本文幅 1170px で 4 列・約 280px。160px のままだと 6 列の豆札になる） */
    .games_list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
    .games_card_head h2 { font-size: 24px; }
    .games_card_head { padding: 16px 12px 8px; }
    .games_card_cta { margin: auto 16px 16px; padding: 8px 12px; font-size: 16px; }
    .games_badge { font-size: 16px; }
}

/*
    ---- 印刷 ----
    幅で出し分ける設計は「紙」という 4 つ目の幅を持つ（A4 = 793.7px）。
    操作用の部品だけ落として本文が読める形にしておく。
*/
@media print {
    }