@charset "UTF-8";

/*
 * 寿司スロット画面のスタイル（redmine #18754）
 *
 * 県確認済みの JS デモ（20260817 版）の <style> を、クラス名に club-slot- を付けて移植したもの。
 * 配色（夕焼け・木目・紺・朱・生成り）はデモの世界観そのもので、club.css（--club-*）とは意図的に別系統（2026-09-17 に決定）。
 * デモの値は --slot-* に置き、club.css は変更しない。
 * テーマの範囲は <main>（.club-game--slot .club-main）の中だけ。ヘッダー・フッターは club.css のまま。
 *
 * デモから変えた点: Google Fonts「Kaisei Decol」は読み込まず端末の明朝で代用。body の背景を main に限定。
 * レバーは <button>（キーボード操作・disabled のため）。「その他・保存」ボタン無し。抽選ロジックは持たない。
 */

/* ---------------- デモの配色（2_寿司スロット_サンプル.html の :root をそのまま） ---------------- */

.club-game--slot .club-main {
    --slot-kon: #20405e;
    --slot-kon-dark: #16304a;
    --slot-shu: #d0432f;
    --slot-shu-light: #e3674f;
    --slot-kinari: #f5ecd7;
    --slot-wood: #c69b63;
    --slot-wood-dark: #9c7440;
    --slot-wood-deep: #7a5526;
    --slot-sumi: #2b2018;

    /* 共用部品（game_common.css）に渡すテーマ変数 */
    --game-theme-surface: #fffdf6;
    --game-theme-surface-line: #d8cdb6;
    --game-theme-text: var(--slot-sumi);
    --game-theme-text-muted: #9a7b35;
    --game-theme-accent: var(--slot-shu);
    --game-theme-accent-text: #fff;
    --game-theme-danger: var(--slot-shu);
    --game-theme-danger-bg: #fdeeea;
    --game-theme-note: var(--slot-wood-deep);
    --game-mtn-fill: #0c1729;
    --game-mtn-ridge: #33455f;

    /* デモの body::before: 夕焼け空。ここ（main）までがテーマの範囲 */
    background:
        radial-gradient(80% 36% at 50% 92%, rgba(255, 214, 140, .55) 0%, transparent 65%),
        linear-gradient(180deg, #d98a63 0%, #e8a678 30%, #f2bd90 62%, #f8d0a4 78%, #fbe2c2 100%);
    color: var(--slot-sumi);
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Hiragino Sans", "Yu Gothic", serif;
    user-select: none;
}

/* 立山シルエット（夕景）は薄く */
.club-game--slot .club-game-sky__mountains {
    opacity: .32;
}

/*
 * 大将（220px）＋間隔 14px＋台（340px）＋レバー（36px）= 610px を PC で横に並べるため、共用の 560px より広くする。
 * デモの「台の中心を暖簾の中心に揃える -99px」を左端が切れずに当てるには内容幅 610 + 99×2 = 808px が要るので、
 * 器は 850px（左右 padding 20px を引いて 810px）にし、補正は 850px 以上の画面でだけ当てる（下のメディアクエリ）。
 * 660〜849px は横並びのまま補正なし（stage 全体を中央に置く）、659px 以下は縦積み
 */
.club-game--slot .club-game-page {
    max-width: 850px;
    padding-top: 0;
}

.club-game--slot .club-game-page__back {
    margin-top: 12px;
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ---------------- 暖簾（見出し） ---------------- */

.club-slot__noren-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.club-slot__noren {
    position: relative;
    width: 320px;
    max-width: 90vw;
    padding: 18px 10px 26px;
    background: linear-gradient(180deg, var(--slot-kon) 0%, var(--slot-kon-dark) 100%);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
    color: var(--slot-kinari);
    text-align: center;
}

/* 暖簾の竿 */
.club-slot__noren::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -14px;
    right: -14px;
    height: 8px;
    background: linear-gradient(180deg, var(--slot-wood), var(--slot-wood-dark));
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

/* 暖簾の切れ目 */
.club-slot__noren::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background:
        linear-gradient(90deg, transparent 32%, var(--slot-kinari) 32% 33%, transparent 33%),
        linear-gradient(90deg, transparent 66%, var(--slot-kinari) 66% 67%, transparent 67%);
    opacity: .18;
}

/* デモは "Kaisei Decol"。外部フォントは読み込まず端末の明朝で代用 */
.club-slot__title {
    margin: 0;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 6px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

.club-slot__stamp {
    display: inline-block;
    margin-top: 10px;
    padding: 2px 10px;
    border: 2px solid var(--slot-shu-light);
    border-radius: 6px;
    color: var(--slot-shu-light);
    font-size: 13px;
    font-weight: 700;
    transform: rotate(-4deg);
}

/* デモに無い説明文（会員: 1 日 1 回／非会員: 会員は 1pt） */
.club-slot__lead {
    margin: 10px 0 0;
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 12px;
    line-height: 1.7;
    color: var(--slot-kinari);
    opacity: .9;
}

.club-slot__lead-accent {
    color: var(--slot-shu-light);
    font-weight: 700;
}

/* ---------------- 大将＋スロット台 ---------------- */

/* 大将（左）＋スロット（右）の横並び。狭い画面では縦積み */
.club-slot__stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.club-slot__stage > * + * {
    margin-left: 14px;
}

/* PC（横並びで左に 99px の余裕がある幅）: スロット本体の中心を暖簾の中心に揃える（デモと同じ -99px） */
@media (min-width: 850px) {
    .club-slot__stage {
        transform: translateX(-99px);
    }
}

.club-slot__taisho-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-end;
    width: 220px;
    flex-shrink: 0;
}

/* 吹き出し（朱）。しっぽは大将（下）へ向ける */
.club-slot__balloon {
    position: relative;
    width: max-content;
    max-width: min(340px, 88vw);
    margin: 0 0 14px;
    padding: 11px 16px;
    background: var(--slot-shu);
    border-radius: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .18);
    color: #fff;
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    animation: club-slot-float 2.4s ease-in-out infinite;
}

.club-slot__balloon::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 0;
    border-width: 11px 9px 0;
    border-style: solid;
    border-color: var(--slot-shu) transparent;
    transform: translateX(-50%);
}

@keyframes club-slot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.club-slot__taisho {
    display: block;
    width: 140px;
    height: auto;
}

.club-slot__machine-block {
    display: flex;
    align-items: flex-end;
}

/* 木目のスロット台 */
.club-slot__machine {
    width: 340px;
    max-width: 86vw;
    padding: 22px 24px 26px;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .04) 0 2px, transparent 2px 9px),
        linear-gradient(135deg, var(--slot-wood) 0%, var(--slot-wood-dark) 100%);
    border: 8px solid var(--slot-wood-deep);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(80, 50, 20, .4), inset 0 2px 4px rgba(255, 255, 255, .25);
    box-sizing: border-box;
    text-align: center;
}

/* 「寿司といえば、富山」ブランドプレート */
.club-slot__brand {
    display: inline-block;
    margin-bottom: 12px;
    padding: 7px 16px 5px;
    background: var(--slot-kinari);
    border: 2px solid var(--slot-wood-deep);
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
}

.club-slot__brand img {
    display: block;
    width: 168px;
    height: auto;
}

.club-slot__kanban {
    display: inline-block;
    margin-bottom: 16px;
    padding: 3px 16px;
    background: var(--slot-kinari);
    border: 2px solid var(--slot-wood-deep);
    border-radius: 4px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
    color: var(--slot-kon);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
}

.club-slot__reels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 13px;
    background: var(--slot-sumi);
    border: 2px solid var(--slot-wood-deep);
    border-radius: 10px;
    box-shadow: inset 0 5px 22px rgba(0, 0, 0, .8);
    overflow: hidden;
}

.club-slot__reel-window {
    position: relative;
    width: 86px;
    height: 86px;
    background: #fff;
    border: 3px solid var(--slot-shu);
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
    box-sizing: content-box;
    overflow: hidden;
}

.club-slot__reel-strip {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* 1 周分の高さ（絵柄の数 × 86px）。JS が data-slot-strip に設定する */
    --club-slot-loop: -344px;
}

.club-slot__reel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 86px;
}

.club-slot__reel-item img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.club-slot__reel-strip--spinning {
    animation: club-slot-spin .15s linear infinite;
}

@keyframes club-slot-spin {
    0% { transform: translateY(0); }
    100% { transform: translateY(var(--club-slot-loop)); }
}

.club-slot__reel-strip--stopping {
    transition: transform .6s cubic-bezier(.25, 1, .5, 1);
}

.club-slot__message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    color: var(--slot-kinari);
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.3;
    text-align: center;
}

.club-slot__message--hit {
    color: #ffe08a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    animation: club-slot-pulse .5s infinite alternate;
}

/* デモに無い注意文（会員で付与未完了のとき）。台の中に出す */
.club-slot__point-pending {
    margin: 4px 0 0;
    color: var(--slot-kinari);
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 11px;
    line-height: 1.6;
    opacity: .9;
}

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

@keyframes club-slot-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.12); }
}

/* ---------------- レバー ---------------- */

.club-slot__lever {
    position: relative;
    width: 40px;
    height: 190px;
    margin-left: -4px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    align-self: flex-end;
}

.club-slot__lever:disabled {
    cursor: default;
    opacity: .45;
}

.club-slot__lever:focus-visible {
    outline: 3px solid var(--slot-shu-light);
    outline-offset: 3px;
    border-radius: 8px;
}

.club-slot__lever-base {
    position: absolute;
    bottom: 24px;
    left: 4px;
    width: 32px;
    height: 42px;
    background: var(--slot-wood-deep);
    border-radius: 5px;
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, .2);
}

.club-slot__lever-shaft {
    position: absolute;
    bottom: 44px;
    left: 14px;
    width: 11px;
    height: 112px;
    background: linear-gradient(to right, #cdb084, #fff7e6, #b5915c);
    border-radius: 6px;
    transform-origin: bottom center;
    transition: transform .2s ease-in-out;
}

.club-slot__lever-ball {
    position: absolute;
    top: -20px;
    left: -9px;
    width: 28px;
    height: 28px;
    background: radial-gradient(circle at 30% 30%, var(--slot-shu-light), #a8311f);
    border-radius: 50%;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .3);
}

.club-slot__lever--pulled .club-slot__lever-shaft {
    transform: rotateX(60deg) scaleY(.5);
}

/* ---------------- 当たり時のネタ紹介（富山 PR。デモの .pr-card） ---------------- */

.club-slot__pr {
    display: flex;
    align-items: center;
    width: 340px;
    max-width: 92vw;
    margin: 24px auto 0;
    padding: 12px 14px;
    background: #fffdf6;
    border: 2px solid var(--slot-wood-dark);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(80, 50, 20, .18);
    box-sizing: border-box;
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}

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

.club-slot__pr-image {
    flex: none;
    width: 88px;
    height: 64px;
    margin-right: 12px;
    background: #fff;
    border: 1px solid #eadfc4;
    border-radius: 8px;
    object-fit: cover;
}

.club-slot__pr-eyebrow {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: #9a7b35;
}

.club-slot__pr-title {
    margin: 1px 0 4px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--slot-shu);
}

.club-slot__pr-text {
    margin: 0;
    font-size: .76rem;
    line-height: 1.65;
    color: var(--slot-sumi);
}

.club-slot__pr-link {
    display: inline-block;
    margin-top: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: #1b6db5;
    text-decoration: underline;
}

.club-slot__pr-link:hover {
    opacity: .75;
}

/* 共用部品（状態枠・誘導・共有）はゴシックで、幅を台に揃える */
.club-game--slot .club-game-state__box,
.club-game--slot .club-game-guest,
.club-game--slot .club-game-share {
    width: 340px;
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}

.club-game--slot .club-game-share {
    border-top-color: #c9b07e;
}

/* ---------------- スマートフォン幅（縦積み。デモと同じ 659px 以下） ---------------- */

@media (max-width: 659px) {
    /* 縦積みを明示する（幅の都合で横に収まる場合でも縦にする） */
    .club-slot__stage {
        flex-direction: column;
        align-items: center;
    }

    .club-slot__stage > * + * {
        margin-left: 0;
    }

    /* 横並び用の align-self: flex-end は縦積みでは右寄せになるので中央に戻す */
    .club-slot__taisho-block {
        align-self: center;
        margin-bottom: 14px;
    }

    /* 台本体だけで中央配置。レバー幅 36px を負マージンで打ち消し、レバーは右にはみ出す（デモと同じ） */
    .club-slot__machine-block {
        margin-right: -36px;
    }

    .club-slot__machine {
        max-width: calc(100vw - 80px);
    }

    .club-slot__reel-item img {
        max-width: 90%;
    }
}