@charset "UTF-8";

/*
 * ゲーム画面（おみくじ・寿司スロット）共用のスタイル（redmine #18754）
 *
 * 【テーマの境目】
 * 各ゲームの世界観（おみくじ＝夜空と立山、スロット＝夕焼けと寿司屋）は県確認済みの JS デモ（20260817 版）が正本で、
 * 色は club.css（--club-*）とは意図的に別系統にしている（2026-09-17 に決定）。
 * テーマを当てる範囲は本文領域 <main class="club-main"> の中だけ（body_class「club-game--omikuji / --slot」で限定）。
 * ヘッダー・フッター・ドロワーなど共通部品は club.css のまま触らない。club.css 自体も変更しない。
 *
 * 本ファイルは共用の「部品の形」だけを持ち、色は各ゲームの CSS が設定するテーマ変数（--game-theme-*）から取る。
 * デモに無い表示（プレイ済み・利用不可・エラー・非会員向け誘導）もこの変数で各ゲームの世界観に馴染ませる。
 *
 * テーマ変数（各ゲームの CSS が .club-game--omikuji / .club-game--slot の <main> に設定する）
 *   --game-theme-surface       札・カードの面
 *   --game-theme-surface-line  札・カードの罫
 *   --game-theme-text          面の上の文字
 *   --game-theme-text-muted    面の上の補助文字
 *   --game-theme-accent        強調（見出し・リンク・ボタン）
 *   --game-theme-accent-text   強調色の上の文字
 *   --game-theme-danger        エラー枠の文字・枠
 *   --game-theme-danger-bg     エラー枠の面
 *   --game-theme-note          背景の上の補助文字（ヒント・ロック文）
 *   --game-mtn-fill / --game-mtn-ridge  立山シルエット
 * SNS 共有ボタンの X（黒）と LINE（緑）はサービスのブランド色で、デモと同じ値を固定で持つ。
 */

/* ---------------- ページの器（<main> の中だけ） ---------------- */

/*
 * ゲーム画面では <main> をテーマの背景で塗る（デモは body 全体を塗るが、ヘッダー・フッターを崩さないため main に限定）。
 * club.css の .club-main は max-width 1280 / padding 16 なので、背景を端まで伸ばすためにここで打ち消し、
 * 幅の制限は内側の .club-game-page に持たせる。
 */
.club-game .club-main {
    position: relative;
    max-width: none;
    padding: 0;
    overflow: hidden;
}

/* 星・立山シルエットの層（クリックを通す） */
.club-game-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.club-game-sky__star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #cdd9ee;
    opacity: 0;
    animation: club-game-twinkle 4s infinite ease-in-out;
}

@keyframes club-game-twinkle {
    0%, 100% { opacity: .15; }
    50% { opacity: .8; }
}

.club-game-sky__mountains {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 907 / 255;
    max-height: 240px;
}

.club-game-page {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 20px 120px;
    box-sizing: border-box;
}

.club-game-page__back {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--game-theme-note);
    text-decoration: none;
}

.club-game-page__back:hover,
.club-game-page__back:focus-visible {
    text-decoration: underline;
}

/* ---------------- 状態枠（locked / unavailable / error。デモに無い表示） ---------------- */

.club-game-state__box {
    margin: 16px auto 0;
    max-width: 420px;
    padding: 12px 16px;
    border: 1px solid var(--game-theme-surface-line);
    border-radius: 8px;
    background: var(--game-theme-surface);
    color: var(--game-theme-text);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

.club-game-state__box[hidden] {
    display: none;
}

.club-game-state__box--locked {
    border-color: var(--game-theme-accent);
    color: var(--game-theme-accent);
    font-weight: 700;
}

.club-game-state__box--unavailable {
    opacity: .85;
}

.club-game-state__box--error {
    background: var(--game-theme-danger-bg);
    border-color: var(--game-theme-danger);
    color: var(--game-theme-danger);
}

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

.club-game-state__reload {
    margin-top: 10px;
    padding: 9px 18px;
    background: var(--game-theme-surface);
    border: 1.5px solid var(--game-theme-danger);
    border-radius: 999px;
    color: var(--game-theme-danger);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* ---------------- 非会員向けの会員登録誘導（デモに無い表示） ---------------- */

.club-game-guest {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--game-theme-surface);
    border: 1.5px dashed var(--game-theme-accent);
    border-radius: 10px;
    color: var(--game-theme-text);
}

.club-game-guest[hidden] {
    display: none;
}

.club-game-guest__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.7;
    color: var(--game-theme-accent);
}

.club-game-guest__points {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.7;
}

.club-game-guest__points[hidden] {
    display: none;
}

.club-game-guest__list {
    margin: 0 0 12px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.7;
}

.club-game-guest__button {
    display: block;
    padding: 12px 20px;
    background: var(--game-theme-accent);
    border-radius: 999px;
    color: var(--game-theme-accent-text);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.club-game-guest__button:hover,
.club-game-guest__button:focus-visible {
    filter: brightness(1.08);
}

/* ---------------- SNS 共有（デモの .share を移植） ---------------- */

.club-game-share {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--game-theme-surface-line);
    text-align: center;
}

.club-game-share[hidden] {
    display: none;
}

.club-game-share__title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    line-height: 1.7;
    color: var(--game-theme-text-muted);
}

.club-game-share__preview {
    width: 260px;
    max-width: 88%;
    margin: 0 auto 14px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(40, 25, 5, .22);
}

.club-game-share__preview svg {
    display: block;
    width: 100%;
    height: auto;
}

.club-game-share__buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* ボタンの間隔は flex gap ではなく margin で付ける（iOS 14.0〜14.4 の Safari 対策。main.css と同じ） */
.club-game-share__buttons > * + * {
    margin-left: 10px;
}

.club-game-share__button {
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    cursor: pointer;
    transition: transform .15s;
}

.club-game-share__button:hover {
    transform: translateY(-1px);
}

/* サービスのブランド色（デモと同じ値） */
.club-game-share__button--x {
    background: #111;
}

.club-game-share__button--line {
    background: #06c755;
}

/* ---------------- 動きの抑制 ---------------- */

@media (prefers-reduced-motion: reduce) {
    .club-game .club-main * {
        animation: none !important;
        transition: none !important;
    }

    .club-game-sky__star {
        opacity: .4;
    }
}