@charset "UTF-8";

/*
 * くたべおみくじ画面のスタイル（redmine #18754）
 *
 * 県確認済みの JS デモ（20260817 版）の <style> を、クラス名に club-omikuji- を付けて移植したもの。
 * 配色（夜空・金・朱・生成り紙）はデモの世界観そのもので、club.css（--club-*）とは意図的に別系統（2026-09-17 に決定）。
 * デモの値は --omikuji-* に置き、club.css は変更しない。
 * テーマの範囲は <main>（.club-game--omikuji .club-main）の中だけ。ヘッダー・フッターは club.css のまま。
 *
 * デモから変えた点: Google Fonts「Kaisei Decol」は読み込まず端末の明朝で代用（外部フォントの方針が未定のため）。
 * body の背景を main に限定。「その他・保存」ボタン無し。抽選ロジックは持たない（API-08 の応答で表示）。
 */

/* ---------------- デモの配色（1_くたべおみくじ_サンプル.html の :root をそのまま） ---------------- */

.club-game--omikuji .club-main {
    --omikuji-night: #0f1b33;        /* 立山の夜空 */
    --omikuji-indigo: #1b2a4a;       /* 深藍 */
    --omikuji-gold: #d9b45f;         /* 金 */
    --omikuji-gold-bright: #efd58a;  /* 金（明） */
    --omikuji-vermilion: #c8453b;    /* 朱（大吉・鳥居） */
    --omikuji-paper: #f3ead3;        /* おみくじの生成り紙 */
    --omikuji-paper-line: #e0d2ae;
    --omikuji-snow: #eaf0f5;         /* 立山残雪 */
    --omikuji-ink: #21304a;

    /* 共用部品（game_common.css）に渡すテーマ変数 */
    --game-theme-surface: var(--omikuji-paper);
    --game-theme-surface-line: var(--omikuji-paper-line);
    --game-theme-text: var(--omikuji-ink);
    --game-theme-text-muted: #9a7b35;
    --game-theme-accent: var(--omikuji-vermilion);
    --game-theme-accent-text: #fff;
    --game-theme-danger: var(--omikuji-vermilion);
    --game-theme-danger-bg: #fbeae8;
    --game-theme-note: var(--omikuji-gold-bright);
    --game-mtn-fill: #0c1729;
    --game-mtn-ridge: #33455f;

    /* デモの body: 夜空の放射グラデーション。ここ（main）までがテーマの範囲 */
    background: radial-gradient(1100px 520px at 50% -8%, #243a63 0%, var(--omikuji-indigo) 42%, var(--omikuji-night) 100%);
    color: var(--omikuji-snow);
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
}

.club-game--omikuji .club-game-sky__mountains {
    opacity: 1;
}

/* ---------------- 見出し ---------------- */

.club-omikuji__header {
    text-align: center;
    margin-bottom: 8px;
}

.club-omikuji__eyebrow {
    margin: 0 0 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .34em;
    color: var(--omikuji-gold);
}

/* タイトルのくたべアイコン。白い丸は背景の飾りで、画像はクリップしない */
.club-omikuji__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin: 2px auto 10px;
    background: #fff;
    border: 2px solid var(--omikuji-gold);
    border-radius: 50%;
}

.club-omikuji__icon {
    display: block;
    width: 116px;
    height: auto;
}

/* デモは "Kaisei Decol"。外部フォントは読み込まず端末の明朝で代用 */
.club-omikuji__title {
    margin: 0;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--omikuji-paper);
}

.club-omikuji__lead {
    margin: 8px 0 0;
    font-size: .8rem;
    line-height: 1.6;
    color: #9fb0cf;
}

.club-omikuji__lead-accent {
    color: var(--omikuji-gold);
}

/* ---------------- 筒と操作部 ---------------- */

.club-omikuji__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    margin-top: 26px;
}

/* 筒の光彩（デモの .tube-svg） */
.club-omikuji__tube {
    filter: drop-shadow(0 0 6px rgba(255, 252, 242, .95)) drop-shadow(0 0 16px rgba(252, 246, 228, .65)) drop-shadow(0 0 34px rgba(246, 232, 196, .45)) drop-shadow(0 14px 28px rgba(0, 0, 0, .45));
    animation: club-omikuji-glow 2.8s ease-in-out infinite;
}

@keyframes club-omikuji-glow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 252, 242, .95)) drop-shadow(0 0 16px rgba(252, 246, 228, .65)) drop-shadow(0 0 34px rgba(246, 232, 196, .45)) drop-shadow(0 14px 28px rgba(0, 0, 0, .45)); }
    50% { filter: drop-shadow(0 0 9px rgba(255, 253, 247, 1)) drop-shadow(0 0 24px rgba(252, 246, 228, .8)) drop-shadow(0 0 48px rgba(246, 232, 196, .6)) drop-shadow(0 14px 28px rgba(0, 0, 0, .45)); }
}

.club-omikuji__tube--shaking {
    animation: club-omikuji-shake .42s cubic-bezier(.36, .07, .19, .97) infinite;
}

@keyframes club-omikuji-shake {
    0%, 100% { transform: rotate(0) translateY(0); }
    20% { transform: rotate(-6deg) translateY(-3px); }
    40% { transform: rotate(5deg) translateY(2px); }
    60% { transform: rotate(-4deg) translateY(-2px); }
    80% { transform: rotate(3deg) translateY(1px); }
}

/* 振ると出る棒。初期はクリップの外（穴の中）。せり上がりながら少し傾く */
.club-omikuji__stick {
    opacity: 0;
    transition: transform .5s ease, opacity .2s ease;
}

.club-omikuji__stick--out {
    opacity: 1;
    transform: translateY(-96px);
}

.club-omikuji__stick-tilt {
    transform-box: fill-box;
    transform-origin: 50% 76%;
    transition: transform .85s ease-out;
}

.club-omikuji__stick--out .club-omikuji__stick-tilt {
    transform: rotate(10deg);
}

.club-omikuji__hint {
    min-height: 1.2em;
    margin: 18px 0 0;
    font-size: .82rem;
    color: #b6c4de;
}

/* 金色のボタン（デモの .btn） */
.club-omikuji__draw {
    appearance: none;
    margin-top: 22px;
    padding: 15px 40px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--omikuji-gold-bright), var(--omikuji-gold));
    box-shadow: 0 8px 20px rgba(217, 180, 95, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
    color: #2a1d08;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .14em;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}

.club-omikuji__draw:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(217, 180, 95, .45);
}

.club-omikuji__draw:active {
    transform: translateY(1px);
}

.club-omikuji__draw:disabled {
    opacity: .4;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.club-omikuji__draw:focus-visible {
    outline: 3px solid var(--omikuji-snow);
    outline-offset: 3px;
}

/* ---------------- 結果札（おみくじ紙） ---------------- */

.club-omikuji__slip {
    max-width: 420px;
    margin: 30px auto 0;
    background: var(--omikuji-paper);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .5);
    color: var(--omikuji-ink);
    transform-origin: top center;
}

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

.club-omikuji__slip--show {
    animation: club-omikuji-unfurl .6s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes club-omikuji-unfurl {
    from { opacity: 0; transform: scaleY(.04) translateY(-20px); }
    to { opacity: 1; transform: scaleY(1) translateY(0); }
}

.club-omikuji__slip-top {
    padding: 14px 10px 12px;
    background: linear-gradient(180deg, #22324d, #16243c);
    border-bottom: 3px solid var(--omikuji-gold);
    color: var(--omikuji-paper);
    text-align: center;
}

.club-omikuji__shrine {
    font-size: .7rem;
    letter-spacing: .3em;
    color: var(--omikuji-gold-bright);
}

.club-omikuji__slip-body {
    position: relative;
    padding: 20px 24px 8px;
}

.club-omikuji__fortune-row {
    display: flex;
    align-items: center;
}

.club-omikuji__kutabe {
    flex: 0 0 160px;
    width: 160px;
    height: auto;
    margin-right: 16px;
}

.club-omikuji__fortune-main {
    flex: 1;
    text-align: center;
}

.club-omikuji__fortune-label {
    font-size: .7rem;
    letter-spacing: .3em;
    color: #9a7b35;
}

.club-omikuji__fortune {
    margin: 2px 0 0;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 3.1rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .04em;
}

/* 表示色区分（運勢マスタの tone。デモの .f-* と同じ値） */
.club-omikuji__fortune--daikichi { color: var(--omikuji-vermilion); }
.club-omikuji__fortune--good { color: #1f7a4d; }
.club-omikuji__fortune--mid { color: #9a7b35; }
.club-omikuji__fortune--kyo { color: #5a6473; }

.club-omikuji__point {
    margin: 14px 0 0;
    text-align: center;
}

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

.club-omikuji__point--on {
    animation: club-omikuji-pop .5s ease both;
}

@keyframes club-omikuji-pop {
    0% { transform: scale(.6); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.club-omikuji__point-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    background: linear-gradient(180deg, var(--omikuji-gold-bright), var(--omikuji-gold));
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(217, 180, 95, .4);
    color: #2a1d08;
    font-family: "Yu Mincho", serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.club-omikuji__point-note {
    margin: 7px 0 0;
    font-size: .7rem;
    color: #9a7b35;
}

.club-omikuji__message {
    margin: 16px 4px 4px;
    padding-top: 14px;
    border-top: 1px dashed var(--omikuji-paper-line);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: .92rem;
    line-height: 1.85;
}

/* ラッキー 3 欄（演出。デモの .minilucky） */
.club-omikuji__lucky {
    display: flex;
    margin: 14px 0 18px;
}

.club-omikuji__lucky > * + * {
    margin-left: 10px;
}

.club-omikuji__lucky-item {
    flex: 1;
    padding: 9px 4px;
    background: #fff;
    border: 1px solid var(--omikuji-paper-line);
    border-radius: 8px;
    text-align: center;
}

.club-omikuji__lucky-key {
    display: block;
    font-size: .62rem;
    letter-spacing: .16em;
    color: #9a7b35;
}

.club-omikuji__lucky-value {
    display: block;
    margin-top: 3px;
    font-family: "Yu Mincho", serif;
    font-size: .98rem;
    font-weight: 700;
    color: var(--omikuji-ink);
}

/* 札の中の共用部品は札の色に合わせる（余白を札の下端まで） */
.club-omikuji__slip .club-game-share {
    margin-bottom: 18px;
}

/* ---------------- スマートフォン幅 ---------------- */

@media (max-width: 480px) {
    .club-omikuji__kutabe {
        flex-basis: 110px;
        width: 110px;
        margin-right: 10px;
    }

    .club-omikuji__fortune {
        font-size: 2.6rem;
    }

    .club-omikuji__slip-body {
        padding: 16px 14px 8px;
    }
}