@charset "UTF-8";

/*
 * ゲーム画面（P-19）の器とリンクカードのスタイル（redmine #18754）
 *
 * 下流のゲーム spec（game-omikuji-slot / game-quiz / game-bingo）は本ファイルを変更しない。
 * カードは design の骨格（club-game-card 〜 club-game-card__description）を写し、独自のクラス名を作らない。
 * 修飾子（club-game-card--omikuji / --slot / --quiz / --bingo）にはスタイルを持たせない（識別用の目印）。
 *
 * 色・余白は共通 CSS（public/css/club.css）の --club-* 変数だけを使う。
 * 状態色（エラー・成功・注意・無効）は下の --game-* を使う。
 */

/*
 * 【ゲーム用に暫定で置いた状態色】
 *
 * 共通 CSS（club.css）にはエラー・成功・注意・無効の色が無いため、ゲーム画面で使う分をここに定義する。
 *
 * ■ 値の出典
 * Figma「P-14_追加色の提案」（node 1:12525）。同ノートに「CSS 変数化する前提」「既存の
 * --line #e4e9f2、--pri #1667e0 と同じ彩度帯」とあり、club.css の --club-border #e4e9f2 /
 * --club-primary #1667e0 と調和する彩度帯に揃えてある。ダークの値は「P-14_F9」の注釈
 * （node 1:12872〜1:12874）。個々の色の採取元は下の各定義の行コメントに書いた。
 *
 * ■ 接頭辞を --club-* にしない理由
 * club.css の正式な変数と区別して、暫定であることを分かるようにするため。
 * 後で共通へ昇格させるときは、この定義を club.css へ移し --club-* に付け替える。
 * 暫定分は grep -- '--game-' で漏れなく拾える。
 */
:root {
    /* エラー: P-14 の必須バッジ 1:12556、F5 のエラー枠の注釈 1:12855「文字 #d93b3b、面 #fdecec、枠 #d93b3b」 */
    --game-danger: #d93b3b;
    --game-danger-bg: #fdecec;
    /* 成功: P-14 の画面では未使用（追加色の提案のみ）。ゲーム画面で使うためここで採用した */
    --game-success: #1f9d6b;
    --game-success-bg: #e8f7f0;
    /* 注意: サマリー枠（未達）1:12643、注意事項枠 1:12670 */
    --game-warning: #b07d00;
    --game-warning-bg: #fff8e6;
    /* 無効: 選択不可行 1:12622、無効ボタン 1:12677 */
    --game-disabled-text: #6b7787;
    --game-disabled-bg: #f1f3f7;
    /* テーブル見出し面: 見出し行 1:12589、ラベルセル 1:12570 */
    --game-table-head-bg: #f7f9fd;
    /* 選択状態の面: 選択カード 1:12558、選択行 1:12596、「選択可」バッジ 1:12603 */
    --game-selected-bg: #eef4fe;
}

/* テーマ切替（🎨）のダーク。club.css と同じ属性セレクタで切り替える */
[data-theme="dark"] {
    --game-danger: #ff7b7b;
    --game-danger-bg: #3a2026;
    --game-success: #45c99a;
    --game-success-bg: #16302a;
    --game-warning: #ffc35a;
    --game-warning-bg: #33291a;
    --game-disabled-text: #9aa9bd;
    --game-disabled-bg: #222a3a;
    --game-table-head-bg: #222a3a;
    --game-selected-bg: #1e2b45;
}

/* ---------------- 器 ---------------- */

.club-game-main {
    padding: 8px 0 24px;
}

.club-game-main__title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .2px;
}

/* カードの並び。スマホは 1 列、タブレット以上は 2 列（Grid の gap は iOS 12 から使えるのでフォールバック不要） */
.club-game-main__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 600px) {
    .club-game-main__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------- カード ---------------- */

.club-game-card {
    margin: 0;
}

/* 修飾子（--omikuji / --slot / --quiz / --bingo）はスタイルを持たない */

/*
 * カード全体をリンクにする。見た目は共通のカード（白面・角丸 18・影）。
 * 子要素の間隔は flex の gap ではなく margin で付ける。iOS 14.0〜14.4 の Safari は Grid の gap に対応済みで
 * Flexbox の gap だけ未対応のため、@supports (gap) では判別できない（WebKit ブログ Safari 14.1 の記載）
 */
.club-game-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 24px;
    box-sizing: border-box;
    background: var(--club-surface);
    border: 1px solid var(--club-border);
    border-radius: 18px;
    box-shadow: var(--club-shadow);
    color: inherit;
    text-decoration: none;
}

.club-game-card__link > * + * {
    margin-top: 8px;
}

.club-game-card__link:hover,
.club-game-card__link:focus-visible {
    border-color: var(--club-primary);
    color: var(--club-primary);
}

.club-game-card__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* 表題とバッジの横間隔（flex gap を使わない理由は .club-game-card__link のコメント参照） */
.club-game-card__header > * + * {
    margin-left: 8px;
}

.club-game-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.7;
}

/* 「会員限定」バッジ（クイズ・ビンゴだけ） */
.club-game-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--club-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
}

.club-game-card__description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--club-text-muted);
}

/* ---------------- 印刷 ---------------- */

@media print {
    .club-game-card__link {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}