/* =========================================================================
   front.css — フロント（一般ユーザー）スマホ専用デザイン
   コンセプト: "FUKUBUKURO POP" — くじ/トレカの福引き感。
   赤×金（縁起・お祭り）の温かい世界観。管理画面(HOLO VAULT/dark)とは完全に別物。
   PC でも画面中央に固定幅のスマホフレーム(.phone)を表示する。
   制約: ビルド工程なし / Vanilla のみ / フォントは Google Fonts(CDN)。
   ========================================================================= */

:root {
    --phone-width: 430px;
    --phone-radius: 20px;       /* スマホ枠の角丸。演出（perf-overlay）もこれに揃える。 */

    /* フォント（管理画面「デザイン」で差し替え可能。既定は従来値）。 */
    --font-heading: 'Mochiy Pop One', sans-serif;
    --font-body: 'Zen Kaku Gothic New', system-ui, sans-serif;

    /* ブランドカラー: 朱赤 × 金。AIスロップの紫グラデは使わない。 */
    --accent: #ff4d4f;          /* 朱赤（当たり・主要アクション） */
    --accent-deep: #d62b2e;
    --accent-soft: #fff1f0;
    --accent-bright: #ff6063;   /* 基調色より一段明るい色（グラデの上端ハイライト用） */
    /* 影・縁・装飾の半透明用に rgb 三つ組も持つ（rgba(var(--accent-rgb), α)）。
       デザイン設定でブランド色を変えると FrontTheme が両方を上書きする。 */
    --accent-rgb: 255, 77, 79;
    --accent-deep-rgb: 214, 43, 46;
    --gold: #f6b73c;            /* 金（縁起・レアリティ最上位） */
    --gold-deep: #d99211;
    --gold-soft: #fff7e6;

    /* 演出（抽選オーバーレイ）専用カラー — ブランドカラーから独立。
       FrontTheme（front_brand_color）が上書きする --accent 系とは別系統。
       テナントがブランド色を変えても、演出は「脳汁が出る」よう調整したこの
       配色（朱赤×金）を常に保つ。値は既定ブランドと同値でシードしてある。 */
    --perf-hot: #ff4d4f;
    --perf-hot-deep: #d62b2e;
    --perf-hot-bright: #ff6063;
    --perf-hot-rgb: 255, 77, 79;
    --perf-hot-deep-rgb: 214, 43, 46;

    /* 背景: 枠外=温かいダーク、枠内=和紙クリーム。白地ではなく温度を持たせる。 */
    --bg-outer: #241c1a;
    --bg-inner: #fff8f1;
    --card: #ffffff;
    --paper-2: #fdf4e4;         /* 和紙のもう一段濃いクリーム地（アイコン台座など） */

    --text: #2b2422;
    --text-sub: #8a7f79;
    --text-faint: #b6aaa3;
    --line: #efe6dc;
    --line-strong: #e4d8cb;

    --rank-gold: #f6b73c;
    --rank-silver: #b9c0c9;
    --rank-bronze: #c98b5e;

    --nav-h: 64px;

    --shadow-sm: 0 1px 2px rgba(80, 50, 40, .06), 0 2px 6px rgba(80, 50, 40, .05);
    --shadow-md: 0 4px 14px rgba(120, 70, 55, .10), 0 1px 4px rgba(120, 70, 55, .06);
    --shadow-lg: 0 14px 40px rgba(60, 30, 22, .18);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

.front-body {
    font-family: var(--font-body);
    /* 枠外: 温かいダーク + 細かいドットテクスチャで「机に置いた端末」感 */
    background-color: var(--bg-outer);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .045) 1px, transparent 0);
    background-size: 22px 22px;
    color: var(--text);
    /* iOS Safari はアドレスバーの分だけ可視領域が縮むが 100vh はそれを無視（最大値）するため、
       短いページで下部に余白が出てボトムナビが可視下端からずれる。dvh で現在の可視領域に追従させる。 */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* スマホフレーム: 画面中央に固定幅で表示 */
.phone {
    position: relative;
    width: 100%;
    max-width: var(--phone-width);
    /* 可視領域に追従（iOS のアドレスバー伸縮で下部に余白/ナビずれが出ないように）。 */
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-inner);
    display: flex;
    flex-direction: column;
    /* clip は scroll container を作らないため、子の position:sticky（ボトムナビ）が
       ビューポート基準で効く。hidden だと overflow-y が auto に昇格して sticky が
       .phone 内基準になり、ナビが画面下に固定されず末尾に流れてしまう。 */
    overflow-x: clip;
}

@media (min-width: 480px) {
    .front-body { align-items: center; padding: 28px 0; }
    .phone {
        min-height: 860px;
        max-height: calc(100vh - 56px);
        border-radius: var(--phone-radius);
        overflow-y: auto;
        box-shadow: var(--shadow-lg), 0 0 0 8px #18110f, 0 0 0 9px rgba(255, 255, 255, .04);
        scrollbar-width: none;
    }
    .phone::-webkit-scrollbar { width: 0; height: 0; }
}

/* =========================================================================
   PC 向けワイドビュー（.phone--wide・ページ単位オプトイン）
   スマホ枠(430px)ではなく ~800px の縦長カラムで見せる。PC でも「横幅の狭い
   縦長サイト」に見えるのが狙い。演出(perf-overlay)は .phone 枠内に完結するため、
   ワイドは演出のない通常ページ（規約・プライバシー等）専用。
   モバイル/タブレット(<900px)では通常のスマホ枠のまま（オプトインは無効）。
   ========================================================================= */
@media (min-width: 900px) {
    /* 長い文書はページ全体をスクロールさせる（枠内スクロールにしない）。
       align-items:center のままだと縦に長い文書の上端が切れるため上寄せにする。 */
    .front-body--wide {
        align-items: flex-start;
        /* 外側の“机に置いた端末”ダーク地＋ドットはやめ、内側と同じクリーム地に統一。
           カラムと背景を地続きにして「横幅の狭い縦長サイト」に見せる。 */
        background-color: var(--bg-inner);
        background-image: none;
        padding: 0;
    }

    .phone--wide {
        max-width: 800px;
        /* 短いページでも“サイト”らしく画面高さを満たす（枠内固定高さは解除）。 */
        min-height: 100dvh;
        max-height: none;
        /* ヘッダー/フッターの帯を画面幅いっぱいにはみ出させるため、横のクリップも解除。 */
        overflow-x: visible;
        overflow-y: visible;
        /* 背景と同色になったので実機ベゼル枠（角丸・影）は外し、1枚の連続ページに見せる。 */
        border-radius: 0;
        box-shadow: none;
    }

    /* ヘッダー・フッターの“帯（背景）”だけ画面幅いっぱいに広げる。
       中身（ブランド／コイン／ナビ項目）は 800px カラム内に維持するため、
       全幅ぶんの左右パディングを足して内容を中央 800px に収める。 */
    .phone--wide .front-topbar,
    .phone--wide .bottom-nav {
        width: 100vw;
        margin-inline: calc(50% - 50vw);
    }
    .phone--wide .front-topbar { padding-inline: max(16px, calc(50vw - 400px)); }
    .phone--wide .bottom-nav { padding-inline: max(0px, calc(50vw - 400px)); }

    /* 枠が無くなり背景も地続きになったので、本文の左右パディングは最小に。
       長文は 680px 中央寄せ（下記）で読ませる。 */
    .phone--wide .front-main { padding: 40px 20px 64px; }

    /* 長文は読みやすい行長に抑え、枠幅いっぱいには伸ばさない（中央寄せ）。 */
    .phone--wide .legal-doc { max-width: 680px; margin-inline: auto; }
    .phone--wide .legal-doc__title { font-size: 26px; }
    .phone--wide .legal-doc__body { font-size: 14.5px; }
    .phone--wide .legal-doc__prose { font-size: 14.5px; }

    /* オリパ一覧: PC ワイドではカードを 2 枚並びで折り返す（スマホは 1 カラムのまま）。 */
    .phone--wide .oripa-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }

    /* 見出し＋サブ文は縦積み（幅が広いと space-between で見出しとサブ文が左右に離れてしまうため）。
       ※サブ文(p)を持つ list-head だけに限定する。「配送履歴＋新規申請」のようにアクションボタンだけを
         持つ list-head は、本来の「タイトル左・アクション右」(space-between)を保つ。 */
    .phone--wide .list-head:has(p) { flex-direction: column; align-items: flex-start; gap: 0; }

    /* オリパ詳細（/oripa/{id}）: 抽選演出は無い（result.php 側）ためワイド化して安全。 */
    /* ヒーローは 800px 幅だと縦 550px 超で巨大になるため、高さを抑えて横長バナー化する。 */
    .phone--wide .detail-hero { max-height: 360px; }
    /* 抽選バー（sticky フッター CTA）は下部ナビと揃えて画面幅いっぱいに。中身は 800px カラム中央。 */
    .phone--wide .draw-bar {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-inline: max(16px, calc(50vw - 400px));
    }
    /* 目玉景品（順位リスト）は 1 列だと右に余白が空くため 2 列で密度を上げる。 */
    .phone--wide .featured-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* ===== phone--narrow: ワイドの中でもコンテンツ部分だけ更に絞る（オリパ詳細など） =====
       景品サムネ／ヒーローが 800px 幅だと大きくなりすぎるため、中身を 640px に中央寄せ。
       帯（ヘッダー/フッター）と抽選バーは全幅のまま（:where で除外＝特異度を上げない）。 */
    /* :where で除外＝特異度を上げずに、全画面を覆うべき固定オーバーレイ（抽選バー/シート・
       各種モーダル）を 640 キャップの対象外にする（キャップすると幕が中身幅に縮む）。 */
    .phone--wide.phone--narrow .front-main > *:where(:not(.draw-bar):not(.draw-sheet):not(.coin-ask-modal):not(.card-pay-modal)) {
        max-width: 640px;
        margin-inline: auto;
    }
    /* .btn は display:inline-flex のため、上のキャップの margin-inline:auto では中央化されない
       （インラインレベルでは auto マージンが 0 に解決される）。結果、幅100%→640でキャップされた
       全幅ボタンだけ左寄せになり他の中央寄せコンテンツとズレる。ブロック化して中央に揃える。 */
    .phone--wide.phone--narrow .front-main > .btn.btn-block { display: flex; }

    /* コイン購入の案内モーダルはワイド時に画面全体を覆う（幕を全幅に）。
       非ワイドは phone 枠内の position:absolute を維持（既存のスマホ枠内モーダル挙動）。 */
    .phone--wide .coin-ask-modal { position: fixed; }

    /* ボトムシート（抽選確認 draw-sheet・買取/購入確認 buyback-sheet）は
       既定で width:min(100%, --phone-width)=430 に絞られ幕もそこまでしか覆わないため、
       ワイド時は幕を全幅化する（中身パネルは自前 max-width で中央のまま）。 */
    .phone--wide .draw-sheet,
    .phone--wide .buyback-sheet { width: 100%; }

    /* ヒーローはさらに絞って中央配置（バナーが主張しすぎないように）。 */
    .phone--wide.phone--narrow .detail-hero { max-width: 480px; }
    /* コレクション詳細のアイテム画像も同様に中央配置で絞る（cd-hero は front-main 直下でない
       ＝汎用キャップが効かないため margin-inline:auto を明示）。 */
    .phone--wide.phone--narrow .cd-hero { max-width: 480px; margin-inline: auto; }
    /* 保存カードのカード面は 640 幅だと横に間延びするため、実カードらしい幅に抑えて中央配置に
       （card-list は cards-screen 内＝汎用キャップ対象外なので margin-inline:auto を明示）。 */
    .phone--wide.phone--narrow .card-list { max-width: 400px; margin-inline: auto; }
    /* 交換完了の再挑戦バナー・くじ実行(no-JS確認)のヒーローも、詳細ヒーローと同様に中央配置で絞る
       （640 幅だと横に間延びする）。 */
    .phone--wide.phone--narrow .exchange-retry-banner,
    .phone--wide.phone--narrow .draw-hero { max-width: 480px; margin-inline: auto; }
    /* 抽選バーの CTA もコンテンツ幅(640)に合わせる（帯は全幅・中身だけ 640 中央）。 */
    .phone--wide.phone--narrow .draw-bar { padding-inline: max(16px, calc(50vw - 320px)); }
    /* コイン履歴の固定チャージバー(draw-bar 併用)は、背景(帯)を画面幅いっぱいにし、
       中身(ボタン)はコンテンツ幅640中央に寄せる（詳細ページの抽選バーと同じ見せ方）。
       position:fixed なので left/right/width で全幅化し、padding で中身を640に寄せる。
       narrow draw-bar の padding 上書き(特異度3)に勝つよう、同特異度で「後に」置く。 */
    .phone--wide.phone--narrow .coin-buy-bar {
        left: 0;
        right: 0;
        width: auto;
        transform: none;
        margin: 0;
        padding-inline: max(16px, calc(50vw - 320px));
    }

    /* コレクション: 所有カードのグリッド表示を 2→3 列に（リスト表示は 1 列のまま）。 */
    .phone--wide .collection-grid.is-grid { grid-template-columns: repeat(3, 1fr); }
    /* 抽選結果: 獲得景品グリッドも 2→3 列に（単数結果は is-single で中央1枚のまま）。 */
    .phone--wide .result-grid.is-grid:not(.is-single) { grid-template-columns: repeat(3, 1fr); }

    /* 抽選演出(perf-overlay)はワイドでも SP の見た目のまま（縦フレーム）に保つ。
       position:fixed で SP 縦比率(9/16)の枠を画面中央に置き、高さは画面いっぱい・幅は高さ比例で拡大する。
       ※ perf-rays は「親幅の200%の正方形」なので、幅480固定＋縦100%だと縦を覆えず後光の端が見える。
         高さ基準で幅を持たせる(≈720@縦1280)ことで rays が枠を確実に覆う。外側は box-shadow の暗幕。 */
    .phone--wide .perf-overlay {
        position: fixed;
        inset: auto;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        height: 100dvh;
        width: auto;
        aspect-ratio: 9 / 16;
        max-width: 96vw;
        box-shadow: 0 0 0 100vmax rgba(18, 10, 8, .88);
    }
    /* 選択モードの固定アクションバー(コレクション/結果 共用)は、背景(帯)を画面幅いっぱいにし、
       中身はコンテンツ幅760中央に寄せる（コイン履歴バー等と同じ全幅帯の見せ方）。
       position:fixed を left/right/width:auto で全幅化し、padding で中身を760に寄せる。 */
    .phone--wide .collection-action-bar {
        left: 0;
        right: 0;
        width: auto;
        transform: none;
        margin: 0;
        padding-inline: max(16px, calc(50vw - 380px));
        /* 既定の action-bar-in は to{transform:translateX(-50%)} でアニメが transform を上書きし
           全幅化した bar を左へずらす。ワイドは translateX を含まない縦スライドのみに差し替える。 */
        animation-name: action-bar-in-wide;
    }
}

/* ===================== 上部バー ===================== */
.front-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: var(--accent-soft);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
}
.front-topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--text);
}
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 17px;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(var(--accent-deep-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .35);
    transform: rotate(-4deg);
}
.brand-text {
    font-family: var(--font-heading);
    font-size: 18px;
    letter-spacing: .02em;
    color: var(--text);
}
/* マーク画像（テキストロゴ時）。色付きの完結したアイコンを想定し、枠・余白・回転を外して
   角丸の正方形いっぱいに表示する（上下左右の余白をなくす）。 */
.brand-mark--image {
    background: none;
    box-shadow: none;
    transform: none;
    overflow: hidden;
    padding: 0;
}
.brand-mark--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    display: block;
}
/* Sprint 20: 横長の画像ロゴ（image モード）。topbar 高さに収め、はみ出さない。
   画像1枚で完結するため左右の視覚重心が偏らないよう、わずかに上下中央へ寄せる。 */
.front-topbar .brand--image {
    gap: 0;
    align-items: center;
    min-height: 32px;
}
.brand-logo-img {
    display: block;
    height: 30px;
    max-width: 190px;
    width: auto;
    object-fit: contain;
    object-position: left center;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
.user-chip {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 11px;
    box-shadow: var(--shadow-sm);
}
.logout-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-deep);
    text-decoration: none;
}
.logout-link:hover { text-decoration: underline; }

/* 自作コイン硬貨マーク（金グラデ塗り）— 絵文字を排した共通アイコン */
.coin-mark { width: 1em; height: 1em; display: block; }

/* 上部バー：現在のコイン残高チップ（ログイン中の全フロント画面で常時表示）
   金の縁起 pill。中身は [硬貨][残高][＋] で「タップでチャージ」を示す。 */
.coin-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 160px;
    font-size: 13.5px;
    font-weight: 800;
    color: #6b4a05;
    background: linear-gradient(180deg, #fff7df, #ffe6a3);
    border: 1px solid #e6c463;
    border-radius: 999px;
    padding: 4px 7px 4px 6px;
    text-decoration: none;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: transform .14s ease, box-shadow .2s ease, filter .2s ease;
}
.coin-chip:hover { filter: brightness(1.03); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .7); }
.coin-chip:active { transform: scale(.96); }
.coin-chip-icon {
    display: inline-flex;
    width: 19px;
    height: 19px;
    font-size: 19px;
    line-height: 1;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 1px rgba(168, 105, 10, .35));
}
.coin-chip-amount {
    letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
/* 末尾の「＋」: チャージ導線であることを示す小丸 */
.coin-chip-plus {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    background: linear-gradient(150deg, var(--accent), var(--accent-deep));
    box-shadow: 0 1px 3px rgba(var(--accent-deep-rgb), .4), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ===================== メイン ===================== */
.front-main {
    flex: 1;
    padding: 18px 16px;
}
.phone.has-nav .front-main { padding-bottom: calc(var(--nav-h) + 28px); }

/* Flash — 和紙の高札（こうさつ）。朱赤の印と左の罫で「お知らせ」感を出す。 */
.message {
    position: relative;
    padding: 12px 14px 12px 15px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.55;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow: hidden;
}
/* 左端の縁起色の罫 */
.message::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}
/* 先頭の丸印（朱印／祝い）。絵文字ではなく塗りの印にして雑味を消す。 */
.message::before {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    margin-top: 1px;
}

.message.success {
    background: linear-gradient(180deg, #f1faf2, #eaf8ee);
    color: #1c7c3f;
}
.message.success::before { content: "祝"; background: #d8f0dd; color: #1c7c3f; font-family: var(--font-heading); font-size: 11px; }
.message.success::after { background: #2fa860; }

.message.error {
    background:
        radial-gradient(140% 100% at 0 0, #fff6f4, var(--accent-soft) 70%);
    color: var(--accent-deep);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(var(--accent-deep-rgb), .12);
}
/* 朱印風の「！」。和紙地に押された印のニュアンス。 */
.message.error::before {
    content: "！";
    background: var(--accent);
    color: #fff;
    font-family: var(--font-heading);
    box-shadow: 0 2px 6px rgba(var(--accent-deep-rgb), .35), inset 0 0 0 1.5px rgba(255, 255, 255, .35);
}
.message.error::after { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); }

/* ===================== ボトムナビ ===================== */
.bottom-nav {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: var(--nav-h);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(80, 45, 35, .06);
}
.nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    transition: color .18s ease, transform .18s ease;
}
.nav-label { white-space: nowrap; }
.nav-item:active { transform: scale(.94); }
.nav-item.active { color: var(--accent); }
.nav-item.is-soon { opacity: .55; }
.nav-icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
}
.nav-svg { width: 24px; height: 24px; display: block; }
/* アクティブ時、アイコン上に小さな朱点を浮かせる */
.nav-item.active::before {
    content: "";
    position: absolute;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ===================== 共通ボタン ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    border-radius: 14px;
    text-decoration: none;
    font-size: 15px;
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary {
    background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--accent-deep-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover { filter: brightness(1.04); box-shadow: 0 9px 22px rgba(var(--accent-deep-rgb), .4); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(var(--accent-deep-rgb), .3); }
.btn-block { width: 100%; padding: 15px; }
.btn-lg { padding: 15px 22px; font-size: 16px; }
.btn-sm { padding: 8px 15px; font-size: 13px; border-radius: 11px; }
.btn:disabled {
    background: var(--line-strong);
    color: #fff;
    box-shadow: none;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* ===================== フォーム（ログイン/登録） ===================== */
.auth-screen {
    padding: 14px 6px 8px;
    max-width: 360px;
    margin: 0 auto;
}
/* くじ札風の小さな見出しバッジ */
.auth-screen h1 {
    font-family: var(--font-heading);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.25;
    margin: 18px 0 6px;
    color: var(--text);
}
.auth-screen h1::after {
    content: "";
    display: block;
    width: 46px;
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.auth-screen .lead { color: var(--text-sub); font-size: 13px; margin: 0 0 24px; }

.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    margin-bottom: 7px;
    color: var(--text);
    letter-spacing: .01em;
}
.field .input {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--line-strong);
    border-radius: 13px;
    font-size: 15px;
    font-family: inherit;
    background: #fffdfb;
    color: var(--text);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field .input::placeholder { color: var(--text-faint); }
.field .input:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.field .err { color: var(--accent-deep); font-size: 12px; font-weight: 700; margin-top: 5px; }
.auth-screen .field .field-hint {
    display: block;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-faint);
    margin: 6px 2px 0;
}
.field .input.is-invalid { border-color: var(--accent); }
.field .input.is-invalid:focus { box-shadow: 0 0 0 4px var(--accent-soft); }

/* パスワード表示/非表示トグル（目アイコン）。input を相対ラップし、右端にボタンを重ねる。 */
.pw-field { position: relative; display: block; }
.pw-field .pw-input { padding-right: 46px; }
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    border-radius: 0 13px 13px 0;
    transition: color .15s ease, transform .1s ease;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle:active { transform: scale(.9); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pw-toggle[aria-pressed="true"] { color: var(--accent); }

.auth-screen .btn-block { margin-top: 6px; }
.auth-alt {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-sub);
}
.auth-alt a { color: var(--accent-deep); font-weight: 800; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* ===================== 会員登録: 登録方法タブ（Sprint 28） =====================
   福引のくじ箱から札を引くイメージ。和紙クリームの「箱」の中に2枚の札が並び、
   選んだ札だけ朱赤に染まって前に出る。アイコン（封筒/スマホ）でひと目で判別。 */
.signup-method-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    margin: 0 0 22px;
    /* 和紙クリームの一段濃い箱地＋内側の窪み感で「札を入れる箱」を演出 */
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255, 255, 255, .5), transparent 70%),
        #f6ead6;
    border: 1.5px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: inset 0 2px 5px rgba(120, 70, 55, .08);
}
.signup-method-tab {
    flex: 1 1 0;
    appearance: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    padding: 11px 8px 10px;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--text-sub);
    background: transparent;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease,
        border-color .2s ease, transform .12s ease;
}
.signup-method-tab-icon {
    display: flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    transition: color .2s ease, transform .2s ease;
}
.signup-method-tab-icon svg { width: 22px; height: 22px; display: block; }
.signup-method-tab-label { line-height: 1; }
.signup-method-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .55);
}
.signup-method-tab:hover .signup-method-tab-icon { color: var(--accent-deep); }
/* 選ばれた札: 朱赤グラデで前面に。上ハイライト＋落ち影で「浮き上がり」を出す。 */
.signup-method-tab.is-active {
    color: #fff;
    background: linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
    border-color: rgba(150, 35, 30, .35);
    box-shadow:
        0 6px 14px rgba(199, 62, 45, .32),
        inset 0 1px 0 rgba(255, 255, 255, .35);
    transform: translateY(-1px);
}
.signup-method-tab.is-active .signup-method-tab-icon { color: #fff; }
.signup-method-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.signup-method-tab.is-active:focus-visible {
    box-shadow:
        0 6px 14px rgba(199, 62, 45, .32),
        0 0 0 3px var(--gold-soft);
}
.signup-method-note {
    color: var(--text-sub);
    font-size: 12.5px;
    line-height: 1.6;
    margin: 0 0 20px;
}
.signup-method-panel { display: none; }
.signup-method-panel.is-active { display: block; }
/* JS 無効時は両パネルを表示（フォールバック・どちらでも登録可） */
.no-js .signup-method-panel { display: block; }
.signup-code-step { margin-top: 4px; }

/* ----- パネル冒頭の流れ説明: 「コードを送って本人確認」をひと言で。
   封筒/スマホのアイコン付き。和紙クリームの落ち着いた帯で、入力前の地ならし。 ----- */
.signup-panel-intro {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 18px;
    padding: 11px 13px;
    border-radius: 12px;
    background: var(--paper-2);
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.signup-panel-intro-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-deep);
}
.signup-panel-intro[data-variant="phone"] .signup-panel-intro-icon { color: var(--accent); }
.signup-panel-intro-icon svg { width: 20px; height: 20px; display: block; }
.signup-panel-intro-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-sub);
    font-weight: 600;
}

/* 登録パネル内の hint は .auth-screen .field .field-hint で控えめな小書きに揃う */

/* ===================== SMS デモ / 開発用バナー（Sprint 28） =====================
   重要: 当たり=朱赤・金 とは絶対に取り違えさせない。藍鼠（cool slate-indigo）の
   「システム通知」トーンで、福引の縁起色から完全に切り離す。点線枠＋テープ風タグで
   「これは本番ではない／開発用」を明示する。 */
.sms-demo-banner {
    --demo-ink: #2f3b57;
    --demo-line: #8b9bc4;
    --demo-bg: #eef1f8;
    position: relative;
    margin: 0 0 18px;
    padding: 14px 14px 13px;
    background:
        repeating-linear-gradient(135deg,
            rgba(139, 155, 196, .10) 0 9px,
            transparent 9px 18px),
        var(--demo-bg);
    border: 1.5px dashed var(--demo-line);
    border-radius: 13px;
    box-shadow: 0 3px 10px rgba(47, 59, 87, .08);
}
.sms-demo-banner-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 9px;
    padding: 3px 10px 3px 9px;
    border-radius: 999px;
    background: var(--demo-ink);
    color: #eef1f8;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .04em;
}
.sms-demo-banner-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffd45e;
    box-shadow: 0 0 0 2px rgba(255, 212, 94, .3);
}
.sms-demo-banner-text {
    font-size: 12px;
    line-height: 1.65;
    color: var(--demo-ink);
    font-weight: 600;
    margin: 0;
}
.sms-demo-code-label {
    margin: 12px 0 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #5a678a;
    text-transform: none;
}
/* デモコード: 等幅・字間広めの「貼り紙」風カード。金/朱の当たり色は使わず藍鼠で統一。 */
.sms-demo-code {
    margin: 0;
    padding: 10px 12px;
    border-radius: 11px;
    background: #fff;
    border: 1.5px solid var(--demo-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: .26em;
    text-indent: .26em;
    text-align: center;
    color: var(--demo-ink);
    font-variant-numeric: tabular-nums;
}

/* ===================== オリパ一覧 ===================== */
.list-head {
    margin: 2px 2px 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.list-head .section-title { margin: 0; }
.list-head h1 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    color: var(--text);
}
.list-head p { margin: 6px 0 0; color: var(--text-sub); font-size: 13px; }

/* ===== カテゴリ絞り込みバー（横スクロールの角丸チップ）===== */
.cat-filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    /* スマホ枠の左右端まで届かせ、チップが端の下へスクロールする見た目に。 */
    margin: 0 -16px 18px;
    padding: 2px 16px 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none; /* Firefox: スクロールバー非表示 */
}
.cat-filter::-webkit-scrollbar { display: none; } /* WebKit: スクロールバー非表示 */
.cat-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: var(--text-sub);
    background: var(--card);
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.cat-chip:hover { border-color: var(--gold); color: var(--gold-deep); }
.cat-chip:active { transform: scale(.96); }
.cat-chip.is-active {
    color: #fff;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
    border-color: var(--gold-deep);
    box-shadow: 0 2px 7px rgba(217, 146, 17, .32);
}

.oripa-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
/* 1カラムの大カード: 大バナー → 情報 → 大CTA の縦並び。
   福引きの「景品箱」らしく、柔らかい厚みのある立体感を持たせる。 */
.oripa-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-md);
    transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease, border-color .2s ease;
}
.oripa-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--line-strong);
}
.oripa-card:active { transform: translateY(-1px); }

/* 大バナー: カードの主役。16:10 でほどよい高さ。タップで詳細へ。 */
.oripa-card .thumb {
    position: relative;
    display: flex;
    aspect-ratio: 16 / 10;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    /* No-image: 和紙クリーム地 + うっすらサンバースト（福引き感） */
    background:
        radial-gradient(125% 100% at 50% -8%, #fff4d8 0%, transparent 56%),
        linear-gradient(155deg, #fff3e0 0%, #ffe6d0 100%);
    color: var(--gold-deep);
}
/* 画像未設定時、背後にうっすら回る後光（detail-hero と同じ語彙） */
.oripa-card .thumb:not(:has(img))::before {
    content: "";
    position: absolute;
    inset: -28% -10% auto 50%;
    transform: translateX(-50%);
    width: 130%;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgba(246, 183, 60, .14) 0deg 9deg, transparent 9deg 18deg);
    opacity: .55;
    pointer-events: none;
}
.oripa-card .thumb img {
    position: relative;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* 画像の下端を本文へ自然に繋ぐための、ごく薄い内側の影 */
.oripa-card .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 -22px 30px -22px rgba(60, 30, 22, .14);
}
/* No Image プレースホルダ: 星章のマーク */
.oripa-card .thumb span {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--gold-deep);
    opacity: .72;
}
.oripa-card .thumb span::before {
    content: "★";
    font-size: 50px;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 3px 7px rgba(217, 146, 17, .32);
}
/* 完売: サムネを暗くするオーバーレイ＋「完売御礼」スタンプ。is-soldout のときだけ表示。
   .thumb span（No Image プレースホルダ）の★・inline-flex が当たらないよう打ち消す。 */
.oripa-card .thumb .soldout-veil,
.oripa-card .thumb .soldout-stamp { display: none; }
.oripa-card .thumb .soldout-veil::before,
.oripa-card .thumb .soldout-stamp::before { content: none; }
.oripa-card.is-soldout .thumb img { filter: grayscale(.4) brightness(.82); }
.oripa-card.is-soldout .thumb .soldout-veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(24, 16, 12, .55);
    pointer-events: none;
}
.oripa-card.is-soldout .thumb .soldout-stamp {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%) rotate(-7deg);
    padding: 8px 20px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(22px, 7.5vw, 32px);
    letter-spacing: .06em;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    opacity: 1;
    background: rgba(var(--accent-deep-rgb), .64);
    border: 3px solid rgba(255, 255, 255, .92);
    border-radius: 12px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}

.oripa-card .body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.oripa-card .title {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.42;
    margin: 0 0 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text);
}
/* 公開終了の表記（〜M月D日 まで／終了間際バッジ）。共通エレメント oripa_deadline。
   TOP一覧カードと交換完了の再挑戦カードの双方で使う。 */
.oripa-deadline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -6px 0 11px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-sub);
}
.oripa-deadline-date { letter-spacing: .02em; }
.oripa-deadline.is-soon .oripa-deadline-date { color: var(--accent-deep); font-weight: 800; }
.oripa-deadline-badge {
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(var(--accent-deep-rgb), .3);
    animation: deadlinePulse 1.5s ease-in-out infinite;
}
@keyframes deadlinePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
    .oripa-deadline-badge { animation: none; }
}
/* 交換完了の再挑戦カードでは中央寄せの流れに合わせる。 */
.exchange-retry-card .oripa-deadline { margin: 2px 0 10px; justify-content: center; }

/* 価格チップ ＋ 残数 を1行で対比。狭幅でも縦に折り返さず収まるよう nowrap 寄せ。 */
.oripa-card .meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}
/* 価格ピル: 金（コイン）章。「N / 1回」 */
.price-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: linear-gradient(180deg, #fff7df, #ffeec0);
    color: var(--gold-deep);
    font-weight: 800;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    padding: 7px 13px 7px 11px;
    border-radius: 999px;
    border: 1px solid #f0d699;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .7);
    white-space: nowrap;
    flex: 0 0 auto;
}
.price-pill::before {
    content: "";
    align-self: center;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe893, var(--gold) 70%);
    box-shadow: inset 0 0 0 1.5px var(--gold-deep), 0 1px 2px rgba(168, 105, 10, .3);
}
.price-pill small { font-size: 11px; font-weight: 800; opacity: .78; }

/* 残数テキスト（残り X / Y）: 数字の X を大きく朱で。在庫の緊張感を出す。 */
.stock-text {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-sub);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 0;
}
.stock-text .n {
    color: var(--accent);
    font-size: 16px;
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: .01em;
}
.stock-text.sold-out {
    color: #fff;
    background: linear-gradient(150deg, #b6aaa3, #968a82);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: .08em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* 残数プログレスバー: 少し太めで存在感。満たし色は朱赤→金グラデ + ハイライト。 */
.oripa-progress {
    position: relative;
    width: 100%;
    height: 13px;
    border-radius: 999px;
    background: var(--paper-2);
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 1px 3px rgba(120, 70, 55, .12);
    overflow: hidden;
    margin-bottom: 16px;
}
.oripa-progress-fill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: 999px;
        background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 42%, var(--gold) 100%);
    box-shadow: 0 0 8px rgba(246, 183, 60, .35);
    transition: width .45s cubic-bezier(.3, .9, .3, 1);
}
/* 上面のツヤ: 満たし部にガラス質のハイライトを薄く乗せる */
.oripa-progress-fill::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 46%;
    border-radius: 999px 999px 60% 60%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}

/* 大CTA「中身を見る」= 主役。本文末に固定して横幅いっぱい・押しやすい大きさ。 */
.oripa-card .body .btn-block {
    margin-top: auto;
    padding: 16px;
    font-size: 16.5px;
    border-radius: 16px;
    letter-spacing: .02em;
}

/* ===================== 予告（販売開始前）カード・Sprint 37 =====================
   販売中（金CTA・残口プログレス）・完売（グレーCTA）とは別系統の「予告」表情。
   テーマ＝「宵闇の予告」: 祭はまだ始まっていない。提灯に火は入っていない。
   朱赤/金の "祭の最中" に対し、開始前は深い藍（紺青）で「日没前・これから」を表す。
   藍に金の細線を一筋だけ添えて FUKUBUKURO POP の縁起の家系に留める。
   残口/プログレスは出さず、カウントダウン（相対＝大／絶対＝小）で待たせる期待感を作る。 */
:root {
    --upcoming: #2f4fb8;        /* 予告の藍（紺青）。販売中の金・完売のグレーと衝突しない系統 */
    --upcoming-deep: #21337f;   /* 宵闇の濃藍 */
    --upcoming-ink: #1a285f;    /* テキスト用のさらに濃い藍墨 */
    --upcoming-soft: #eef1fb;   /* 藍の和紙地（うっすら） */
    --upcoming-line: #cfd7f2;
}
/* 予告カードのサムネ左上に「予告」の角リボン。隅にきっちり留めた斜め帯にする。 */
.oripa-card.is-upcoming .thumb { position: relative; }
/* 高い特異度で .oripa-card .thumb span（display:inline-flex / opacity:.72 / 星::before 等）を上書きする。
   リボンも .thumb 直下の <span> なのでプレースホルダ span のスタイルが漏れる。明示的に打ち消す。 */
.oripa-card.is-upcoming .thumb span.upcoming-ribbon {
    position: absolute;
    display: block;
    flex-direction: row;
    top: 16px;
    left: -40px;
    z-index: 3;
    width: 148px;
    opacity: 1;
    transform: rotate(-45deg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 42%),
        linear-gradient(135deg, #3a5cc8 0%, var(--upcoming) 48%, var(--upcoming-deep) 100%);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .42em;        /* 字間広めで「掲示物」感。padding-left で右ズレを相殺 */
    padding: 6px 0 6px .42em;
    text-align: center;
    box-shadow:
        0 4px 12px rgba(26, 40, 95, .42),
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(0, 0, 0, .18);
}
/* プレースホルダ span の ::before（★）が漏れるので、リボンでは打ち消す。 */
.oripa-card.is-upcoming .thumb span.upcoming-ribbon::before { content: none; }
/* リボン下端の金の一筋。藍に縁起の金を一線だけ通す（祭の家系であることの目印）。 */
.upcoming-ribbon::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--gold) 22%, #ffe7a6 50%, var(--gold) 78%, transparent);
    opacity: .85;
}
/* 予告サムネ全体に夜気のヴェールをごく薄くかける（祭はまだ始まっていない＝光が抑えめ）。
   リボンを置く左上の角だけ少し濃くして、白いリボン文字の可読性も底上げする。 */
.oripa-card.is-upcoming .thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;                  /* リボン(z3)の下・画像の上 */
    pointer-events: none;
    background:
        radial-gradient(90% 70% at 0% 0%, rgba(26, 40, 95, .16), transparent 46%),
        linear-gradient(180deg, rgba(26, 40, 95, .06), transparent 34%);
}
/* meta 行（価格チップのみ）。予告では右に残数を置かないので、価格を主役にゆとりを持たせる。 */
.meta--upcoming { margin-bottom: 13px; }

/* カウントダウン枠（相対＝大きく／絶対＝小さく）。販売中のプログレスバーの位置に置く。
   藍の和紙ストリップ。左端に金の一筋＋小さな「開始まで」見出しで掲示物の体裁にする。 */
.upcoming-countdown {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(47, 79, 184, .07), transparent 60%),
        linear-gradient(180deg, var(--upcoming-soft) 0%, #f6f8ff 100%);
    border: 1px solid var(--upcoming-line);
    border-radius: 14px;
    padding: 11px 14px 12px 16px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* 左端の藍ライン（販売中の進捗の代わりに「待ち」を示す静かな縦線）。 */
.upcoming-countdown::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--upcoming), var(--upcoming-deep));
}
.upcoming-countdown-rel {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.2;
    color: var(--upcoming-ink);
    letter-spacing: .01em;
}
/* 相対時間の頭に砂時計の点（待ち時間のサイン）。明滅で「これから」を静かに伝える。 */
.upcoming-countdown-rel::before {
    content: "";
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--upcoming);
    box-shadow: 0 0 0 3px rgba(47, 79, 184, .16);
    animation: upcomingBlink 1.6s ease-in-out infinite;
}
.upcoming-countdown-abs {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-sub);
    letter-spacing: .01em;
    padding-left: 15px;          /* rel の点・字面に左端を合わせる */
}
@keyframes upcomingBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .3; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
    .upcoming-countdown-rel::before { animation: none; }
}

.empty-note {
    text-align: center;
    color: var(--text-sub);
    padding: 56px 16px;
    font-size: 14px;
}

/* ===================== オリパ詳細 ===================== */
/* 管理者プレビュー時の告知バナー（未公開の確認表示・抽選不可）。 */
.preview-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff5e6;
    border: 1px solid #ffd591;
    color: #8a5a00;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
}
.preview-banner__tag {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e08a00;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}
.preview-banner__text { flex: 1 1 auto; }
.preview-banner strong { font-weight: 800; }

.detail-hero {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
    background:
        radial-gradient(130% 100% at 50% -10%, #fff3d6 0%, transparent 55%),
        linear-gradient(155deg, #fff1de 0%, #ffe3cf 100%);
    color: var(--gold-deep);
}
/* ヒーロー背後のサンバースト（うっすら） */
.detail-hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto 50%;
    transform: translateX(-50%);
    width: 120%;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgba(246, 183, 60, .14) 0deg 9deg, transparent 9deg 18deg);
    opacity: .6;
    pointer-events: none;
}
.detail-hero img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.detail-hero span {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    opacity: .75;
}
.detail-hero span::before {
    content: "★";
    font-size: 46px;
    color: var(--gold);
    text-shadow: 0 3px 8px rgba(217, 146, 17, .3);
}

.detail-title {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.35;
    margin: 0 0 14px;
    color: var(--text);
}

/* ===== SNS シェア（詳細ページ）===== */
.detail-share {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 16px;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-deep);
    background: var(--card);
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.share-btn:hover { border-color: var(--gold); }
.share-btn:active { transform: scale(.96); }
.share-btn .share-ico { width: 16px; height: 16px; }

.share-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    min-width: 204px;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform-origin: top right;
    animation: share-menu-in .16s cubic-bezier(.22, 1, .36, 1) both;
}
.share-menu[hidden] { display: none; }
@keyframes share-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to { opacity: 1; transform: none; }
}
/* 吹き出しの三角（ボタン側を指す）。 */
.share-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 20px;
    width: 11px;
    height: 11px;
    background: var(--card);
    border-left: 1px solid var(--line-strong);
    border-top: 1px solid var(--line-strong);
    transform: rotate(45deg);
}
.share-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 10px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.share-opt:hover { background: var(--paper-2); }
.share-opt:active { background: var(--line); }
.share-opt-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    flex: 0 0 auto;
}
.share-opt-ico svg { width: 15px; height: 15px; }
.share-opt--x .share-opt-ico { background: #000; color: #fff; }
.share-opt--line .share-opt-ico { background: #06c755; color: #fff; }
.share-opt--copy .share-opt-ico {
    background: var(--paper-2);
    color: var(--gold-deep);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}
.share-opt--copy.is-copied .share-opt-ico {
    background: var(--gold);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--gold-deep);
}
.share-opt--copy.is-copied .share-opt-label { color: var(--gold-deep); }

/* 統計2box: 必要コイン（金）／残口（朱） */
.detail-stats {
    display: flex;
    gap: 11px;
    margin: 0 0 16px;
}
.stat-box {
    flex: 1;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 13px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.stat-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.stat-box:first-child::before { background: linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.stat-box:last-child::before { background: linear-gradient(90deg, var(--accent), var(--accent-deep)); }
.stat-box .label { font-size: 11px; color: var(--text-sub); font-weight: 700; }
.stat-box .value {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    margin-top: 3px;
    color: var(--text);
}
.stat-box .value.accent { color: var(--gold-deep); }
.stat-box:last-child .value { color: var(--accent); }
/* Sprint 37: 予告中の「販売開始まで」ボックス。藍系で残口（朱）と区別し、長文も収める。
   「もうすぐ始まる」期待と「まだ引けない」落ち着きを両立させる宵闇トーン。 */
.stat-box--upcoming {
    background:
        radial-gradient(130% 110% at 100% 0%, rgba(47, 79, 184, .06), transparent 58%),
        linear-gradient(180deg, var(--upcoming-soft) 0%, #f7f9ff 100%);
    border-color: var(--upcoming-line);
}
.stat-box--upcoming::before { background: linear-gradient(90deg, var(--upcoming), var(--upcoming-deep)) !important; }
.stat-box--upcoming .label { color: var(--upcoming); }
.stat-box--upcoming .value {
    font-size: 16px;
    line-height: 1.25;
    color: var(--upcoming-ink) !important;
    word-break: keep-all;        /* 「あと3日で開始」を不自然に割らない */
    overflow-wrap: anywhere;     /* それでも溢れるときは収める */
}

/* =========================================================================
   抽選条件の残量バッジ（参加制限）— Sprint 21。
   "本日 残N枚 / 累計 残N枚 / 登録期間" を福引きの「高札（こうさつ）」風の
   和紙ストリップで掲示する。条件付き企画にだけ出る（条件なしは描画されない）。
   的（まと）の入子円アイコン＋残数チップ。色は金（縁起・残量）基調、
   引けない状態（登録期間外）だけ朱赤に転じて「対象外」を即伝える。
   ========================================================================= */
.draw-limit-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -4px 0 16px;
    padding: 11px 13px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, var(--gold-soft) 0%, #fffaf0 100%);
    border: 1px solid #f1dca6;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .8);
    position: relative;
    overflow: hidden;
}
/* 左端に金の縁起ライン。stat-box の上辺ラインと呼応させる */
.draw-limit-note::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
}
.draw-limit-note-ico {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gold-deep);
    background: radial-gradient(circle at 38% 32%, #fff6da 0%, #fbe6b0 70%, #f3d488 100%);
    box-shadow: inset 0 0 0 1px rgba(217, 146, 17, .28), 0 1px 2px rgba(120, 80, 0, .12);
}
.draw-limit-note-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
    flex: 1;
}
/* 残量1件 = チップ。「本日 [12]枚」を 1 つの福引き札に見立てる */
.draw-limit-line {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid #efdcb0;
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.2;
    white-space: nowrap;
}
.draw-limit-cap {
    font-weight: 800;
    font-size: 11px;
    color: var(--gold-deep);
    letter-spacing: .02em;
}
.draw-limit-val {
    font-weight: 700;
    color: var(--text);
    font-size: 12px;
}
.draw-limit-line .n {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 15px;
    color: var(--gold-deep);
    margin-right: 1px;
    letter-spacing: .2px;
}
.draw-limit-line small {
    font-size: 10.5px;
    color: var(--text-faint);
    font-weight: 600;
}
/* 登録期間の注記はチップにせず、軽い添え書きにして残量チップと差をつける */
.draw-limit-line--period {
    background: none;
    border: 0;
    padding: 4px 2px;
    color: var(--text-sub);
}
.draw-limit-line--period small { color: var(--text-sub); }
/* 登録期間外（引けない）: 高札ごと朱赤に転じる。対象外の警告色 */
.draw-limit-note.is-blocked-note {
    background: linear-gradient(180deg, var(--accent-soft) 0%, #fff6f5 100%);
    border-color: rgba(var(--accent-deep-rgb), .22);
}
.draw-limit-note.is-blocked-note::before {
    background: linear-gradient(180deg, var(--accent), var(--accent-deep));
}
.draw-limit-note.is-blocked-note .draw-limit-note-ico {
    color: var(--accent-deep);
    background: radial-gradient(circle at 38% 32%, #ffe9e8 0%, #ffd3d2 72%, #ffbfbe 100%);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-deep-rgb), .25), 0 1px 2px rgba(120, 30, 30, .12);
}
.draw-limit-line.is-blocked {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(var(--accent-deep-rgb), .25);
    color: var(--accent-deep);
    font-weight: 800;
    font-size: 12.5px;
    white-space: normal;
}

.section-title {
    font-size: 15px;
    font-weight: 900;
    margin: 22px 0 12px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(var(--accent), var(--accent-deep));
}
.detail-desc {
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
    background: #fffdfb;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 15px;
}

/* 目玉景品 = 当たり一覧。ランク章でレアリティを演出。 */
.featured-list { display: flex; flex-direction: column; gap: 10px; }
.featured-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 12px 10px 10px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .2s ease;
}
.featured-item:hover { transform: translateX(2px); box-shadow: var(--shadow-md); }
.featured-item .rank {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--text-faint);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* レアリティ配色: 1=金, 2=銀, 3=銅, それ以降は控えめ */
.featured-item:nth-child(1) .rank {
    background: linear-gradient(150deg, #ffd86b, var(--gold-deep));
    box-shadow: 0 2px 6px rgba(217, 146, 17, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.featured-item:nth-child(2) .rank {
    background: linear-gradient(150deg, #e6ebf0, #9aa4b0);
    box-shadow: 0 2px 6px rgba(154, 164, 176, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.featured-item:nth-child(3) .rank {
    background: linear-gradient(150deg, #e6a877, var(--rank-bronze));
    box-shadow: 0 2px 6px rgba(201, 139, 94, .4), inset 0 1px 0 rgba(255, 255, 255, .4);
}
/* 上位3つは左に色帯を足してさらに目立たせる */
.featured-item:nth-child(-n+3) { border-color: var(--line-strong); }
.featured-item:nth-child(1) { background: linear-gradient(100deg, var(--gold-soft) 0%, #fff 36%); }
.featured-item:nth-child(2) { background: linear-gradient(100deg, #f4f6f9 0%, #fff 36%); }
.featured-item:nth-child(3) { background: linear-gradient(100deg, #fdf0e6 0%, #fff 36%); }

.featured-item .ft-thumb {
    width: 50px;
    height: 50px;
    border-radius: 11px;
    background:
        linear-gradient(155deg, #fff3e0, #ffe8d6);
    flex: 0 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    box-shadow: inset 0 0 0 1px rgba(217, 146, 17, .15);
}
.featured-item .ft-thumb::after { content: "★"; font-size: 18px; }
.featured-item .ft-thumb:has(img)::after { content: none; }
.featured-item .ft-thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-item .ft-body { flex: 1; min-width: 0; }
.featured-item .ft-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.featured-item .ft-coin {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--gold-deep);
    white-space: nowrap;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.featured-item .ft-coin::before {
    content: "";
    width: 12px; height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe07a, var(--gold) 70%);
    box-shadow: inset 0 0 0 1.5px var(--gold-deep);
    flex: 0 0 auto;
}

/* ===================== 下部固定「くじを引く」バー ===================== */
.draw-bar {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin: 24px -16px -18px;
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(80, 45, 35, .08);
}
/* ナビがある画面では、固定ナビの上に重ならないよう持ち上げる */
.phone.has-nav .draw-bar {
    bottom: var(--nav-h);
    margin-bottom: calc(-1 * (var(--nav-h) + 28px));
}
.draw-bar .btn { font-size: 16.5px; }
.draw-bar.sold-out .btn { pointer-events: none; }
/* Sprint 37: 予告中の詳細フッター。抽選 UI の代わりにカウントダウン＋開始日時を出す。
   一覧のカウントダウン枠と同じ語彙（藍の点・相対大／絶対小）でページ内を一貫させる。 */
.draw-bar--upcoming .upcoming-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-bottom: 11px;
    padding: 9px 14px;
    border-radius: 13px;
    background: linear-gradient(180deg, var(--upcoming-soft) 0%, #f7f9ff 100%);
    border: 1px solid var(--upcoming-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.draw-bar--upcoming .upcoming-cta-rel {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 16px;
    color: var(--upcoming-ink);
    letter-spacing: .01em;
}
.draw-bar--upcoming .upcoming-cta-rel::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--upcoming);
    box-shadow: 0 0 0 3px rgba(47, 79, 184, .16);
    animation: upcomingBlink 1.6s ease-in-out infinite;
}
.draw-bar--upcoming .upcoming-cta-abs {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-sub);
}
.draw-bar--upcoming .btn { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .draw-bar--upcoming .upcoming-cta-rel::before { animation: none; }
}

/* =========================================================================
   Sprint 5 — くじ実行 / 抽選演出 / 抽選結果
   抽選体験の核。「引く高揚感」と当たりの格を、rank(0/1/2)で段階的に演出する。
   FUKUBUKURO POP（朱赤×金・和紙クリーム・Mochiy Pop One）を踏襲。
   演出オーバーレイは position:absolute で .phone フレーム内に完結させる。
   ========================================================================= */

/* --- 追加ボタンバリアント --- */
.btn-gold {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffe08a 0%, var(--gold) 42%, var(--gold-deep) 100%);
    color: #3a2700;
    box-shadow: 0 8px 20px rgba(217, 146, 17, .38), inset 0 1px 0 rgba(255, 255, 255, .55);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
/* 金箔のきらめきが横切る（コイン還元の魅力を訴求） */
.btn-gold::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -30%;
    width: 40%;
    height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: rotate(8deg);
    animation: goldSheen 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes goldSheen {
    0%, 60% { left: -30%; }
    100% { left: 130%; }
}
.btn-gold:hover { filter: brightness(1.05); box-shadow: 0 11px 26px rgba(217, 146, 17, .46), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-gold:active { transform: translateY(1px); }
/* 完売の「中身を見る」: 販売中(金・きらめき)と区別する、動きのないフラットなグレー。
   リンクとしては機能する（中身は確認できる）が、購買訴求の演出はしない。 */
.btn-soldout {
    background: #d9d4cc;
    color: #6f6a61;
    box-shadow: none;
    text-shadow: none;
}
.btn-soldout::after { content: none; }   /* きらめきを出さない */
.btn-soldout:hover { filter: none; box-shadow: none; }
.btn-soldout:active { transform: none; }
/* 予告 CTA「中身を見る」: 販売中(金・引ける)・完売(グレー)と区別する藍系（Sprint 37）。
   一覧では押せる（詳細へ遷移）＝深い藍に奥行きを持たせ、金のきらめきは出さない。
   「引ける（金）」と誤認させないトーン。リンクとしては機能する。 */
.btn-upcoming {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #3f60c9 0%, var(--upcoming) 46%, var(--upcoming-deep) 100%);
    color: #fff;
    box-shadow: 0 9px 22px rgba(26, 40, 95, .34), inset 0 1px 0 rgba(255, 255, 255, .26);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .14);
    transition: filter .18s ease, box-shadow .2s ease, transform .12s ease;
}
/* 金箔のきらめき（btn-gold）の代わりに、藍を横切る "宵の光" を一筋だけ。控えめ。 */
.btn-upcoming::after {
    content: "";
    position: absolute;
    top: -60%; left: -30%;
    width: 34%; height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: rotate(8deg);
    animation: goldSheen 4.2s ease-in-out infinite;
    pointer-events: none;
}
.btn-upcoming:hover {
    filter: brightness(1.06);
    box-shadow: 0 12px 28px rgba(26, 40, 95, .42), inset 0 1px 0 rgba(255, 255, 255, .26);
}
.btn-upcoming:active { transform: translateY(1px); }
/* 詳細フッターの予告 CTA は disabled（「販売開始前です」）。
   押せないことを質感で伝える: 藍墨を抑えた "灯りの入っていない" 落ち着き。
   動かない・光らない・浮かない。鍵マークを添えて「まだ開かない」を示す。 */
.btn-upcoming:disabled {
    opacity: 1;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 7px, transparent 7px 14px),
        linear-gradient(180deg, #5163a0 0%, #3f4f87 100%);
    color: #e9ecf8;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 2px 6px rgba(0, 0, 0, .18);
    text-shadow: none;
    cursor: not-allowed;
    letter-spacing: .04em;
}
.btn-upcoming:disabled::after { content: none; }    /* 押せない側は光らせない */
.btn-upcoming:disabled::before {
    content: "";
    display: inline-block;
    width: 13px; height: 13px;
    margin: -2px 8px -1px 0;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5Zm3 8H9V7a3 3 0 0 1 6 0v3Z"/></svg>');
    mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5Zm3 8H9V7a3 3 0 0 1 6 0v3Z"/></svg>');
    opacity: .9;
}
.btn-outline {
    background: #fff;
    color: var(--accent-deep);
    border: 1.5px solid var(--accent);
}
.btn-outline:hover { background: var(--accent-soft); }
.btn-ghost {
    background: transparent;
    color: var(--text-sub);
    border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: #fff; }

/* --- くじ実行画面 --- */
.back-link {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--text-sub);
    font-size: 13px;
    text-decoration: none;
}
.back-link:hover { color: var(--accent-deep); }

.draw-hero {
    position: relative;
    height: 168px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background:
        radial-gradient(120% 100% at 50% -10%, #fff4dc 0%, transparent 55%),
        linear-gradient(150deg, #fff1de 0%, #ffe3cf 100%);
    color: var(--gold-deep);
}
/* ヒーロー背後のサンバースト（福引き感・「引く前」の期待を煽る） */
.draw-hero::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto 50%;
    transform: translateX(-50%);
    width: 150%;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgba(246, 183, 60, .16) 0deg 8deg, transparent 8deg 16deg);
    animation: heroSpin 28s linear infinite;
    pointer-events: none;
}
.draw-hero img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.draw-hero span {
    position: relative;
    font-family: var(--font-heading);
    color: var(--accent);
    font-size: 30px;
    letter-spacing: 3px;
    text-shadow: 0 2px 6px rgba(var(--accent-deep-rgb), .18);
}
/* 「今だけ」タグ（朱の小旗） */
.draw-hero .draw-hero-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: var(--font-heading);
    font-size: 11px;
    color: #fff;
    background: linear-gradient(150deg, var(--accent), var(--accent-deep));
    padding: 4px 12px 4px 11px;
    border-radius: 8px 8px 8px 2px;
    box-shadow: 0 3px 8px rgba(var(--accent-deep-rgb), .35);
    transform: rotate(-3deg);
}
@keyframes heroSpin { to { transform: translateX(-50%) rotate(360deg); } }

.draw-exec-title {
    font-family: var(--font-heading);
    font-size: 20px;
    margin: 18px 0 16px;
    line-height: 1.45;
}

/* コイン明細カード = ご祈祷の「お札」風。右上に朱の落款。 */
.draw-coin-card {
    position: relative;
    background:
        linear-gradient(180deg, #fffdf9, #fff8f1);
    border-radius: 16px;
    padding: 16px 18px 18px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--line);
    overflow: hidden;
}
.draw-coin-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold) 60%, var(--gold-deep));
}
.coin-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
}
.coin-row .coin-label { color: var(--text-sub); font-size: 14px; font-weight: 600; }
.coin-row .coin-value { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.coin-row .coin-value.accent { color: var(--accent-deep); }
.coin-row .coin-value.negative { color: var(--accent-deep); }
.coin-divider { border-top: 1.5px dashed var(--line-strong); padding: 0; margin: 5px 0; }
.coin-row-total .coin-label { color: var(--text); font-weight: 800; }
.coin-row-total .coin-value {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
}

/* 残口: 朱のチップで在庫の緊張感を出す */
.draw-stock-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 2px 4px;
    font-size: 14px;
}
.draw-stock-label { color: var(--text-sub); font-weight: 700; }
.draw-stock-note strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent-deep);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 15px;
}
.draw-stock-note strong::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    animation: stockBlink 1.6s ease-in-out infinite;
}
.draw-stock-note.is-sold strong { color: var(--text-faint); }
.draw-stock-note.is-sold strong::before { background: var(--text-faint); box-shadow: none; animation: none; }
@keyframes stockBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.draw-block-msg {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(var(--accent-deep-rgb), .2);
}

.draw-action { margin-top: 24px; }
/* 「くじを引く」= 体験の入口。大きく・押したくなる質感 + 微鼓動 */
.btn-draw {
    flex-direction: column;
    gap: 2px;
    padding: 16px 22px;
    border-radius: 18px;
    letter-spacing: .02em;
    background: linear-gradient(160deg, var(--accent-bright) 0%, var(--accent) 45%, var(--accent-deep) 100%);
    box-shadow: 0 10px 24px rgba(var(--accent-deep-rgb), .36), inset 0 1px 0 rgba(255, 255, 255, .28);
    animation: drawPulse 2.4s ease-in-out infinite;
}
.btn-draw:not(:disabled):hover { animation-play-state: paused; }
.btn-draw .draw-btn-main {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 400;
}
.btn-draw .draw-btn-sub {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    opacity: .92;
}
.btn-draw .draw-btn-sub::before {
    content: "";
    width: 11px; height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 70%);
    box-shadow: inset 0 0 0 1.5px var(--gold-deep);
}
.btn-draw:disabled { animation: none; }
@keyframes drawPulse {
    0%, 92%, 100% { transform: scale(1); box-shadow: 0 10px 24px rgba(var(--accent-deep-rgb), .36), inset 0 1px 0 rgba(255, 255, 255, .28); }
    96% { transform: scale(1.018); box-shadow: 0 14px 30px rgba(var(--accent-deep-rgb), .46), inset 0 1px 0 rgba(255, 255, 255, .28); }
}
.draw-caution { margin-top: 12px; color: var(--text-faint); font-size: 12.5px; text-align: center; }

/* =========================================================================
   抽選演出オーバーレイ — .phone フレーム内に完結（position:absolute）
   ========================================================================= */
.perf-overlay {
    position: absolute;   /* .phone(position:relative) に収まる。viewport全面にしない。 */
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 42%, #43261f 0%, #1d1310 70%, #140c0a 100%);
    transition: opacity .35s ease;
    /* タップ連打中の不快な挙動を抑止: テキスト選択（「?」の反転）・長押しメニュー・
       ダブルタップによる画面拡大を無効化（manipulation は通常のタップは許可）。 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* 子要素にも touch-action を明示する。iOS Safari はダブルタップズーム判定で
   「実際にタップされた要素」を見るため、親 .perf-overlay だけでは不十分。
   カセット演出（capsule/cardflip）は大きな子要素（カプセル/カード）が主タップ対象で、
   子に touch-action が無いと連打でズームが復活する。manipulation で確実に抑止する。 */
.perf-overlay * { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
@media (min-width: 480px) {
    /* フレームの角丸に合わせて演出も角丸クリップ（--phone-radius で .phone と揃える） */
    .perf-overlay { border-radius: var(--phone-radius); }
}
.perf-overlay.done { opacity: 0; }

/* 後光（rays）: 当たりほど強く回る。リーチ段階で加速する（フェーズクラスで段階制御）。 */
.perf-rays {
    position: absolute;
    top: 50%; left: 50%;
    width: 200%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg, rgba(246, 183, 60, .12) 0deg 7deg, transparent 7deg 14deg);
    opacity: 0;
    animation: raysSpin 16s linear infinite;
    pointer-events: none;
    transition: opacity .6s ease, animation-duration .6s ease;
}
.perf-overlay[data-rank="0"] .perf-rays { opacity: .22; }
.perf-overlay[data-rank="1"] .perf-rays { opacity: .42; animation-duration: 11s; }
.perf-overlay[data-rank="2"] .perf-rays { opacity: .6; animation-duration: 8s; }
/* ため中はゆっくり → ヒート → リーチで段階的に加速・明度上昇 */
.perf-overlay:has(.perf-stage.heat) .perf-rays { opacity: .65; animation-duration: 6s; }
.perf-overlay:has(.perf-stage.reach) .perf-rays {
    opacity: .85;
    animation-duration: 3.5s;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, .26) 0deg 6deg, transparent 6deg 12deg);
}
.perf-overlay[data-rank="2"]:has(.perf-stage.reach3) .perf-rays {
    opacity: 1;
    animation-duration: 1.8s;
    background: repeating-conic-gradient(from 0deg, rgba(255, 230, 150, .4) 0deg 5deg, transparent 5deg 10deg);
}
@keyframes raysSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 中心グロー: 段階が進むほど脈動が速く・強くなる。 */
.perf-spark {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 46%, rgba(246, 183, 60, .22), transparent 58%);
    animation: perfPulse 1.4s ease-in-out infinite;
    pointer-events: none;
    transition: background .5s ease;
}
.perf-overlay:has(.perf-stage.heat) .perf-spark { animation-duration: .9s; }
.perf-overlay:has(.perf-stage.reach) .perf-spark { animation-duration: .55s; background: radial-gradient(circle at 50% 46%, rgba(255, 210, 90, .4), transparent 60%); }
.perf-overlay[data-rank="2"]:has(.perf-stage.reach3) .perf-spark { animation-duration: .35s; background: radial-gradient(circle at 50% 46%, rgba(255, 235, 160, .55), transparent 64%); }

/* 色転換オーバーレイ: リーチ突入時に画面全体の色温度を一瞬変えて「段階が変わった」を伝える。 */
.perf-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(var(--perf-hot-rgb), .0), rgba(var(--perf-hot-deep-rgb), .35) 90%);
}
.perf-overlay[data-rank="1"]:has(.perf-stage.reach)::after { animation: phaseShiftRed 1.2s ease-out; }
.perf-overlay[data-rank="2"]:has(.perf-stage.reach)::after { animation: phaseShiftRed 1.4s ease-out; }
.perf-overlay[data-rank="2"]:has(.perf-stage.reach3)::after {
    background: radial-gradient(circle at 50% 50%, rgba(255, 220, 120, 0), rgba(214, 146, 17, .42) 90%);
    animation: phaseShiftGold 1.2s ease-out;
}
@keyframes phaseShiftRed  { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes phaseShiftGold { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: .25; } }

/* 閃光（クライマックスで一瞬光る。当たりのみ） */
.perf-flash {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: radial-gradient(circle at 50% 46%, #fff 0%, rgba(255, 244, 210, .6) 30%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}
/* JS が stage に .climax を付与 → 当たり(rank1/2)のみ一瞬閃光。rank0 は光らせない。 */
.perf-overlay[data-rank="1"]:has(.perf-stage.climax) .perf-flash { animation: flashOnce .55s ease-out; }
.perf-overlay[data-rank="2"]:has(.perf-stage.climax) .perf-flash { animation: flashBig .7s ease-out; }
@keyframes flashOnce { 0% { opacity: 0; } 30% { opacity: .7; } 100% { opacity: 0; } }
@keyframes flashBig { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* リーチバナー: 斜めに走り込む「リーチ！」テキスト。JS が .show を付与/除去。 */
.perf-reach-banner {
    position: absolute;
    left: 50%; top: 38%;
    z-index: 4;
    transform: translate(-50%, -50%) rotate(-7deg) scale(.4);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}
.perf-reach-banner span {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 40px;
    letter-spacing: .04em;
    color: #fff;
    padding: 6px 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--perf-hot) 0%, var(--perf-hot-deep) 100%);
    border: 3px solid #ffe08a;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(var(--perf-hot-rgb), .6);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.perf-reach-banner.show { animation: reachIn .5s cubic-bezier(.2, 1.7, .4, 1) forwards; }
.perf-overlay[data-rank="2"] .perf-reach-banner span {
    font-size: 46px;
    background: linear-gradient(135deg, #ffd34d 0%, var(--gold-deep) 100%);
    border-color: #fff;
    color: var(--perf-hot-deep);
    box-shadow: 0 8px 36px rgba(0, 0, 0, .55), 0 0 34px rgba(246, 183, 60, .85);
}
.perf-overlay[data-rank="2"] .perf-reach-banner.show { animation: reachInBig .55s cubic-bezier(.2, 1.7, .4, 1) forwards; }
@keyframes reachIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(.4); }
    60%  { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1.12); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
}
@keyframes reachInBig {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(.3); }
    50%  { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1.25); }
    70%  { transform: translate(-50%, -50%) rotate(-5deg) scale(.95); }
    100% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1.06); }
}

/* チャンスアップ「飛行機」演出（プラセボ・見た目のみ・rank2 リーチ時 30% で発火）。
   オーバーレイ上端から 1/4（top:25%）を、画面外→画面外へ左から右へ横切る。
   z-index は演出文字(reach=4, stage=2)より背面〜中間。カード/スキップ/ミュートは邪魔しない。 */
.perf-plane {
    position: absolute;
    top: 15%;
    left: -34%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 7px 16px rgba(58, 22, 14, .4));
}
.perf-plane[hidden] { display: none; }
/* 横断（左右移動）は外側、機体の離陸ゆらぎ（上下＋傾き）は内側 .perf-plane-svg で
   担当して合成する。これで横断速度を変えずに自然な飛行の揺れだけを足せる。 */
.perf-plane.fly { animation: planeCross 1.6s linear forwards; }
.perf-plane-svg {
    display: block;
    transform-origin: 50% 50%;
}
.perf-plane.fly .perf-plane-svg { animation: planeBob 1.3s ease-in-out infinite; }
/* DOM順は [横断幕, 機体] = 横断幕が左（後方）・機体が右（進行方向の先頭）。 */
.perf-plane-banner {
    position: relative;
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1;
    letter-spacing: .14em;
    color: var(--perf-hot-deep);
    background: linear-gradient(135deg, #fff2c4 0%, #ffe08a 45%, var(--gold) 100%);
    border: 2px solid #fff;
    border-radius: 7px;
    padding: 4px 11px 4px 13px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(58, 22, 14, .32), inset 0 1px 0 rgba(255, 255, 255, .65);
    transform-origin: right center;
    /* 旗の縁取り（金のステッチ風）を内側に */
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.perf-plane.fly .perf-plane-banner { animation: bannerFlutter 0.7s ease-in-out infinite; }
.perf-plane-banner-star {
    font-style: normal;
    margin-left: 5px;
    color: var(--perf-hot);
    font-size: 12px;
    vertical-align: 1px;
}
/* 旗の右端に機体へ繋がる紐（テープ）の三角ノッチ */
.perf-plane-banner-tab {
    position: absolute;
    top: 50%;
    right: -7px;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid var(--gold);
}
/* プロペラ回転（軸 126,30 を中心に高速スピン） */
.perf-plane.fly .perf-plane-prop {
    transform-origin: 126px 30px;
    transform-box: fill-box;
    animation: propSpin 0.12s linear infinite;
}
.perf-plane-prop { transform-origin: 126px 30px; transform-box: fill-box; }
/* 雲のふわっと浮き沈み */
.perf-plane.fly .perf-plane-cloud { animation: cloudDrift 1.6s ease-in-out infinite; }
.perf-plane-trail { stroke-dasharray: 6 8; }
.perf-plane.fly .perf-plane-trail { animation: trailDash 0.5s linear infinite; }

/* left:-34% → left:134%（% はオーバーレイ幅基準）で画面外→画面外を横断。等速。 */
@keyframes planeCross {
    0%   { left: -34%; }
    100% { left: 134%; }
}
/* 離陸感: ゆっくり上下しながら機首をわずかに上げ下げ。 */
@keyframes planeBob {
    0%   { transform: translateY(2px) rotate(1.2deg); }
    35%  { transform: translateY(-6px) rotate(-1.6deg); }
    70%  { transform: translateY(-2px) rotate(0.6deg); }
    100% { transform: translateY(2px) rotate(1.2deg); }
}
@keyframes propSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes bannerFlutter {
    0%, 100% { transform: skewY(-2deg) scaleY(1); }
    50%      { transform: skewY(2.5deg) scaleY(0.96); }
}
@keyframes cloudDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.85; }
    50%      { transform: translate(-2px, 2px); opacity: 1; }
}
@keyframes trailDash {
    to { stroke-dashoffset: -14; }
}

.perf-stage { position: relative; z-index: 2; text-align: center; padding: 0 24px; }

/* カード: 表裏のあるめくり演出（3D flip）。ためは穏やか、段階が進むほど揺れが激しく。 */
.perf-card {
    position: relative;
    width: 138px;
    height: 192px;
    margin: 0 auto 24px;
    transform-style: preserve-3d;
    animation: perfFloat 1.6s ease-in-out infinite;
    transition: filter .4s ease;
}
.perf-overlay[data-rank="2"] .perf-card { animation: perfFloat 1.3s ease-in-out infinite; }
.perf-overlay[data-rank="1"] .perf-card { animation: perfFloat 1.4s ease-in-out infinite; }
/* ヒート → リーチ → 確変 で揺れを段階的に強める＋発光 */
.perf-stage.heat .perf-card { animation: perfFloat .9s ease-in-out infinite; }
.perf-stage.reach .perf-card { animation: perfShake .5s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255, 210, 90, .7)); }
.perf-stage.reach2 .perf-card { animation: perfShake .38s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(255, 220, 110, .85)); }
.perf-stage.reach3 .perf-card { animation: perfShake .26s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(255, 235, 150, 1)); }
.perf-card.flip { animation: none; filter: none; transform: rotateY(180deg) scale(1.06); transition: transform .55s cubic-bezier(.5, 1.6, .5, 1); }
.perf-card-face {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .55);
}
/* 裏面: 既定は「？」カード（画像未登録時のフォールバック） */
.perf-card-back {
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px),
        linear-gradient(140deg, #ff6b6e, #ff3f42);
    border: 2px solid rgba(255,224,138,.55);
    overflow: hidden;
}
.perf-card-back .perf-q {
    font-family: var(--font-heading);
    font-size: 60px;
    color: #fff7e6;
    text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
/* 企画ごとに登録された抽選待ち画像がある場合 */
.perf-card-back.has-image {
    background: #1a2540 center / cover no-repeat;
    border: none;
}
.perf-card-back.has-image .perf-q { display: none; }
/* 表面（めくった先）: 金の星 */
.perf-card-front {
    transform: rotateY(180deg);
    background: linear-gradient(145deg, #fff4d2, #ffe08a 55%, var(--gold));
    border: 2px solid #fff;
}
.perf-card-front .perf-card-rank {
    font-size: 64px;
    color: var(--gold-deep);
    text-shadow: 0 3px 10px rgba(217, 146, 17, .4);
    animation: rankPop .5s ease;
}
.perf-overlay[data-rank="0"] .perf-card-front { background: linear-gradient(145deg, #fff, #f1eae2); }
.perf-overlay[data-rank="0"] .perf-card-front .perf-card-rank { color: var(--text-faint); }
.perf-overlay[data-rank="1"] .perf-card-front { background: linear-gradient(145deg, #fff1f0, #ffb3b4); }
.perf-overlay[data-rank="1"] .perf-card-front .perf-card-rank { color: var(--perf-hot-deep); }
@keyframes rankPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.perf-text {
    color: #fff7e6;
    font-size: 15.5px;
    font-weight: 700;
    min-height: 22px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    transition: color .35s ease, transform .35s ease;
}
.perf-overlay[data-rank="2"] .perf-text { color: #ffe9a8; font-size: 16.5px; }
/* リーチ以降はテキストを煽る: 色を金〜朱に振り、わずかに鼓動させる。 */
.perf-stage.reach .perf-text { color: #ffd96b; animation: textThrob .5s ease-in-out infinite; }
.perf-stage.reach2 .perf-text,
.perf-stage.reach3 .perf-text { color: #ffe9a8; animation: textThrob .34s ease-in-out infinite; }
@keyframes textThrob { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* スキップボタン（演出オーバーレイ左上。ミュート＝右上 と被らない隅）。
   開始後に hidden 解除＝ふわっと滑り込む。ミュート(右上)と同じ和紙×墨トーンで統一。
   タップ位置エフェクトより前面（z-index）。 */
.perf-skip-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px 13px 8px 14px;
    border: 1px solid rgba(255, 233, 168, .32);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(58, 42, 38, .5), rgba(30, 22, 20, .5));
    color: rgba(255, 244, 222, .82);
    font-family: 'Mochiy Pop One', 'Hiragino Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
    /* 出現アニメ: 少し左上から滑り込んでフェードイン（押せると気づける動き）。 */
    animation: perfSkipIn .42s cubic-bezier(.2, .9, .3, 1.2) both;
}
.perf-skip-btn[hidden] { display: none; }
.perf-skip-btn svg { display: block; opacity: .9; }
.perf-skip-btn-label { display: inline-block; }
.perf-skip-btn:hover {
    transform: translateY(-1px) scale(1.04);
    color: #fff7e6;
    border-color: rgba(255, 233, 168, .65);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35), 0 0 0 4px rgba(246, 183, 60, .14);
}
.perf-skip-btn:active { transform: scale(.94); }
.perf-skip-btn:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(246, 183, 60, .42);
}
@keyframes perfSkipIn {
    0%   { opacity: 0; transform: translate(-8px, -6px) scale(.86); }
    100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* タップエフェクト層（座標基準でパーティクルを生成。overlay 内に収まる＝はみ出さない）。 */
.perf-tap-fx {
    position: absolute;
    inset: 0;
    z-index: 5;             /* ボタン(6,7)より背面、演出レイヤより前面 */
    overflow: hidden;
    pointer-events: none;   /* タップを透過＝ボタン/開始判定を邪魔しない */
}
.perf-tap-fx-burst {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
/* 押した瞬間に弾ける光のリング（手応え）。 */
.perf-tap-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid rgba(255, 224, 138, .9);
    box-shadow: 0 0 12px rgba(246, 183, 60, .7);
    transform: scale(.2);
    opacity: 0;
    animation: tapRingPop .5s cubic-bezier(.15, .8, .3, 1) forwards;
}
.perf-tap-fx-burst i {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 17px;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 0 9px rgba(246, 183, 60, .85), 0 1px 2px rgba(0, 0, 0, .35);
    transform: translate(-50%, -50%);
    animation: tapFxFly var(--dur, .82s) cubic-bezier(.18, .72, .28, 1) forwards;
    will-change: transform, opacity;
}
/* 色バリエーション: 金 / 朱 / きらめき(白金)。JS が is-gold/is-accent/is-spark を付与。 */
.perf-tap-fx-burst i.is-gold   { color: #ffd86b; text-shadow: 0 0 10px rgba(246, 183, 60, .9), 0 1px 2px rgba(0,0,0,.35); }
.perf-tap-fx-burst i.is-accent { color: var(--perf-hot-bright); text-shadow: 0 0 10px rgba(var(--perf-hot-rgb), .8), 0 1px 2px rgba(0,0,0,.35); }
.perf-tap-fx-burst i.is-spark  { color: #fff7e6; text-shadow: 0 0 12px rgba(255, 230, 150, .95), 0 1px 2px rgba(0,0,0,.3); }
/* rank2 はひと回り大きく光らせる（豪華さの強弱。結果は不変）。 */
.perf-tap-fx.rank-2 .perf-tap-fx-burst i { font-size: 19px; }
.perf-tap-fx.rank-2 .perf-tap-ring { border-color: #fff; box-shadow: 0 0 16px rgba(255, 230, 150, .9); }
.perf-tap-fx.rank-0 .perf-tap-fx-burst i { font-size: 15px; }
@keyframes tapFxFly {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); }
    16%  { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--scl, 1) * 1.15)) rotate(calc(var(--rot, 0deg) * .3)); }
    100% {
        opacity: 0;
        transform:
            translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -30px)))
            scale(calc(var(--scl, 1) * .9))
            rotate(var(--rot, 0deg));
    }
}
@keyframes tapRingPop {
    0%   { opacity: .9; transform: scale(.2); }
    70%  { opacity: .35; }
    100% { opacity: 0; transform: scale(2.6); }
}

/* "確率アップ風" 煽りフロート文字（断定表現なし＝お祭りトーン）。
   提灯のような金縁取り＋墨影で、和のお祭り感を出す。出現位置は JS で散らす。 */
.perf-hype-float {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    font-family: 'Mochiy Pop One', 'Hiragino Sans', sans-serif;
    font-size: 23px;
    font-weight: 700;
    color: #fff7e6;
    white-space: nowrap;
    pointer-events: none;
    /* 金の縁取り（多重 text-shadow）＋外側のグロー＋墨の落ち影。 */
    text-shadow:
        -1px -1px 0 var(--gold-deep), 1px -1px 0 var(--gold-deep),
        -1px  1px 0 var(--gold-deep), 1px  1px 0 var(--gold-deep),
        0 0 16px rgba(246, 183, 60, .85),
        0 3px 7px rgba(120, 30, 10, .5);
    animation: hypeFloat 1.25s cubic-bezier(.2, .9, .3, 1) forwards;
    will-change: transform, opacity;
}
@keyframes hypeFloat {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(var(--tilt, -6deg)); }
    20%  { opacity: 1; transform: translate(-50%, -66%) scale(1.18) rotate(var(--tilt, -6deg)); }
    36%  { transform: translate(-50%, -78%) scale(.98) rotate(var(--tilt, -6deg)); }
    100% { opacity: 0; transform: translate(-50%, -168%) scale(1.02) rotate(var(--tilt, -6deg)); }
}
/* ゲージ満タン時の「MAX！」だけは一段大きく・朱金で派手に。 */
.perf-hype-float.is-max {
    font-size: 30px;
    letter-spacing: .02em;
    color: #fff;
    text-shadow:
        -1.5px -1.5px 0 var(--perf-hot-deep), 1.5px -1.5px 0 var(--perf-hot-deep),
        -1.5px  1.5px 0 var(--perf-hot-deep), 1.5px  1.5px 0 var(--perf-hot-deep),
        0 0 22px rgba(var(--perf-hot-rgb), .95),
        0 0 38px rgba(246, 183, 60, .7),
        0 4px 9px rgba(120, 20, 10, .55);
}

/* タップで溜まる"見た目だけの"ゲージ（満タンでも結果は変わらない＝プラセボ）。 */
.perf-hype {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 5;
    width: min(78%, 280px);
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.perf-hype.show { opacity: 1; }
.perf-gauge {
    position: relative;
    height: 11px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,247,230,.06)),
        rgba(40, 28, 24, .45);
    border: 1px solid rgba(255, 233, 168, .34);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
    overflow: hidden;
}
.perf-gauge-fill {
    position: relative;
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background:
        linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 38%, #ffb347 72%, var(--gold) 100%);
    box-shadow: 0 0 12px rgba(246, 183, 60, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: width .16s cubic-bezier(.3, .9, .4, 1);
}
/* 流れるハイライト（バーが"生きている"質感）。 */
.perf-gauge-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
    background-size: 60% 100%;
    background-repeat: no-repeat;
    animation: gaugeSheen 1.4s linear infinite;
    mix-blend-mode: screen;
}
@keyframes gaugeSheen {
    0%   { background-position: -60% 0; }
    100% { background-position: 160% 0; }
}
/* 満タン到達: バーが弾けて光る＋ゲージ全体がひと脈動（見た目のみ・結果不変）。 */
.perf-hype.is-full .perf-gauge {
    animation: gaugeFullPulse .55s ease-out;
    border-color: rgba(255, 224, 138, .9);
}
.perf-hype.is-full .perf-gauge-fill {
    box-shadow: 0 0 22px rgba(255, 224, 138, .95), 0 0 8px rgba(var(--perf-hot-rgb), .7), inset 0 1px 0 rgba(255,255,255,.5);
}
.perf-hype.is-full .perf-gauge-label { color: #ffe9a8; }
@keyframes gaugeFullPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.perf-gauge-label {
    display: inline-block;
    margin-top: 7px;
    padding: 2px 12px;
    border-radius: 999px;
    background: rgba(40, 28, 24, .4);
    color: rgba(255, 247, 230, .88);
    font-family: 'Mochiy Pop One', 'Hiragino Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    transition: color .3s ease;
}

/* 効果音ミュートトグル（演出オーバーレイ右上に小さく常駐） */
.perf-mute {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 233, 168, .28);
    border-radius: 50%;
    background: rgba(36, 28, 26, .42);
    color: rgba(255, 244, 222, .82);
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.perf-mute:hover {
    transform: scale(1.08);
    color: #fff;
    border-color: rgba(255, 233, 168, .6);
    box-shadow: 0 0 0 4px rgba(246, 183, 60, .14);
}
.perf-mute:active { transform: scale(.94); }
.perf-mute:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(246, 183, 60, .4);
}
.perf-mute svg { display: block; }
/* グリッド重ねでアイコンを切替（aria-pressed=true=ミュート時は off アイコン） */
.perf-mute .perf-mute-on,
.perf-mute .perf-mute-off { grid-area: 1 / 1; }
.perf-mute .perf-mute-off { display: none; color: var(--text-faint); }
.perf-mute[aria-pressed="true"] {
    color: rgba(214, 200, 190, .7);
    border-color: rgba(255, 233, 168, .18);
}
.perf-mute[aria-pressed="true"] .perf-mute-on { display: none; }
.perf-mute[aria-pressed="true"] .perf-mute-off { display: block; }

/* 紙吹雪（当たりのみ表示） */
.perf-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.perf-confetti i {
    position: absolute;
    top: -12%;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    opacity: 0;
}
.perf-overlay[data-rank="0"] .perf-confetti { display: none; }
.perf-overlay:has(.perf-stage.climax) .perf-confetti i { animation: confFall 1.4s ease-in forwards; }
.perf-confetti i:nth-child(1)  { left: 8%;  background: var(--gold);       animation-delay: .02s; }
.perf-confetti i:nth-child(2)  { left: 16%; background: var(--perf-hot);     animation-delay: .12s; }
.perf-confetti i:nth-child(3)  { left: 24%; background: #ffe08a;           animation-delay: .05s; }
.perf-confetti i:nth-child(4)  { left: 32%; background: var(--gold-deep);  animation-delay: .18s; }
.perf-confetti i:nth-child(5)  { left: 40%; background: var(--perf-hot);     animation-delay: .09s; }
.perf-confetti i:nth-child(6)  { left: 48%; background: var(--gold);       animation-delay: .22s; }
.perf-confetti i:nth-child(7)  { left: 56%; background: #ff9a3c;           animation-delay: .03s; }
.perf-confetti i:nth-child(8)  { left: 64%; background: var(--perf-hot-deep);animation-delay: .15s; }
.perf-confetti i:nth-child(9)  { left: 72%; background: #ffe08a;           animation-delay: .07s; }
.perf-confetti i:nth-child(10) { left: 80%; background: var(--gold);       animation-delay: .2s; }
.perf-confetti i:nth-child(11) { left: 88%; background: var(--perf-hot);     animation-delay: .1s; }
.perf-confetti i:nth-child(12) { left: 92%; background: var(--gold-deep);  animation-delay: .25s; }
.perf-confetti i:nth-child(13) { left: 12%; background: #ff9a3c;           animation-delay: .28s; }
.perf-confetti i:nth-child(14) { left: 68%; background: #ffe08a;           animation-delay: .14s; }
/* rank2 は紙吹雪を強める（長く・多く見せる） */
.perf-overlay[data-rank="2"]:has(.perf-stage.climax) .perf-confetti i { animation-duration: 1.8s; }

@keyframes perfPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes perfFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes perfShake { 0%, 100% { transform: translateY(0) rotate(-4deg) scale(1.05); } 50% { transform: translateY(-7px) rotate(4deg) scale(1.1); } }
@keyframes confFall {
    0%   { opacity: 0; transform: translateY(0) rotate(0); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(640px) rotate(540deg); }
}

/* reduce-motion 配慮: 大きな動きは止める（演出の意味＝rank別の見た目は色で残す） */
@media (prefers-reduced-motion: reduce) {
    .perf-card, .perf-rays, .perf-spark, .draw-hero::before, .btn-draw, .btn-gold::after, .draw-stock-note strong::before { animation: none !important; }
    .perf-confetti { display: none; }
    .perf-card.flip { transition: none; }
    /* リーチ煽りの過剰な揺れ・鼓動を抑える（リーチ自体の"色"は残す）。 */
    .perf-stage.reach .perf-card, .perf-stage.reach2 .perf-card, .perf-stage.reach3 .perf-card,
    .perf-stage.heat .perf-card,
    .perf-stage.reach .perf-text, .perf-stage.reach2 .perf-text, .perf-stage.reach3 .perf-text { animation: none !important; }
    .perf-flash { animation: none !important; }
    .perf-overlay::after { animation: none !important; }
    /* リーチバナーはフェードのみ（飛び込み無し）で意味を残す。 */
    .perf-reach-banner.show { animation: none !important; opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
    /* タップエフェクト・煽り文字・ゲージは抑制（JS 側でも生成を止めるが二重防御）。 */
    .perf-tap-fx-burst, .perf-tap-fx-burst i, .perf-tap-ring, .perf-hype-float { animation: none !important; display: none !important; }
    .perf-hype { display: none !important; }
    .perf-gauge-fill::after, .perf-hype.is-full .perf-gauge { animation: none !important; }
    .perf-skip-btn { animation: none !important; }
    /* 飛行機チャンスアップ: 横断はせず、上から1/4の高さに控えめに一瞬だけ現れて消す。
       回転/はためき/上下ゆらぎ/トレイルは全て止め、飛行機の"形"だけで意味を伝える。 */
    .perf-plane.fly { animation: planeFade 1.6s ease both !important; left: 50% !important; transform: translateX(-50%); }
    .perf-plane.fly .perf-plane-svg,
    .perf-plane.fly .perf-plane-prop,
    .perf-plane.fly .perf-plane-cloud,
    .perf-plane.fly .perf-plane-banner,
    .perf-plane.fly .perf-plane-trail { animation: none !important; }
    /* 静止だと回転体のプロペラが片寄って見えるので水平に固定して安定させる。 */
    .perf-plane .perf-plane-prop { transform: rotate(45deg); }
}
@keyframes planeFade {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* =========================================================================
   抽選演出「カプセル（capsule）」
   共有の chrome（perf-overlay / rays / spark / flash / reach-banner / perf-text /
   perf-stage のフェーズクラス）は classic と同じ基底を再利用。中身だけ差し替える。
   ガチャカプセルが落ちてきて「溜め」ながら帯電 → リーチ → 砕けて開く。
   ========================================================================= */
.perf-capsule-stage { perspective: 760px; }
.perf-capsule {
    position: relative;
    width: 156px;
    height: 156px;
    margin: 0 auto 22px;
    transform-style: preserve-3d;
}
/* アイドル中（タップ待ち）はゆったり上下。is-idle は共通の殻が付与。 */
.perf-capsule-overlay.is-idle .perf-capsule { animation: perf-tap-bob 1.7s ease-in-out infinite; }

/* 落下シュート（上からの導線・落ちる瞬間だけ淡く光る） */
.perf-capsule-chute {
    position: absolute;
    left: 50%; bottom: 64%;
    width: 8px; height: 60vh;
    transform: translateX(-50%);
    background: linear-gradient(to top, rgba(var(--perf-hot-rgb), .28), transparent 72%);
    opacity: 0;
    pointer-events: none;
}
.perf-capsule.drop .perf-capsule-chute { animation: capsuleChute .9s ease-out; }
@keyframes capsuleChute { 0% { opacity: .8; } 100% { opacity: 0; } }

/* 背後のオーラ（帯電が進むほど強く脈動） */
.perf-capsule-glow {
    position: absolute;
    left: 50%; top: 50%;
    width: 220px; height: 220px;
    transform: translate(-50%, -50%) scale(.7);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 138, .5), rgba(var(--perf-hot-rgb), .22) 46%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease, transform .5s ease;
}
.perf-capsule-shadow {
    position: absolute;
    left: 50%; bottom: -14px;
    width: 108px; height: 18px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* カプセル本体（球体を上下半球に分割） */
.perf-capsule-body {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.perf-capsule-half {
    position: absolute;
    left: 0;
    width: 156px;
    height: 78px;
    z-index: 3;
    box-shadow: inset 0 0 18px rgba(0,0,0,.18);
    backface-visibility: hidden;
}
.perf-capsule-half.top {
    top: 0;
    border-radius: 78px 78px 0 0;
    background:
        radial-gradient(120% 150% at 32% 12%, rgba(255,255,255,.55), transparent 46%),
        linear-gradient(160deg, var(--perf-hot-bright, #ff5a5a), var(--perf-hot), var(--perf-hot-deep));
    transform-origin: 50% 100%;
    box-shadow: inset 0 6px 16px rgba(255,255,255,.28), inset 0 -2px 10px rgba(0,0,0,.28);
}
.perf-capsule-half.bottom {
    bottom: 0;
    border-radius: 0 0 78px 78px;
    background:
        radial-gradient(120% 150% at 32% 92%, rgba(255,255,255,.5), transparent 48%),
        linear-gradient(20deg, #efe6da, #fffaf2);
    transform-origin: 50% 0%;
}
.perf-capsule-shine {
    position: absolute;
    left: 24px; top: 14px;
    width: 40px; height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    filter: blur(2px);
    transform: rotate(-18deg);
}
/* ひねりリング（継ぎ目）。帯電で発光する。 */
.perf-capsule-seam {
    position: absolute;
    left: -3px; top: calc(50% - 7px);
    width: 162px; height: 14px;
    z-index: 4;
    border-radius: 8px;
    background: linear-gradient(#d9cdbb, #b7a994 48%, #d9cdbb);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(0,0,0,.3), 0 0 0 rgba(255,224,138,0);
    transition: box-shadow .4s ease;
}

/* 中身（当たりの光／待ち画像）。半球の背後に隠れていて、割れると前面へ。 */
.perf-capsule-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 92px; height: 92px;
    z-index: 1;
    transform: translate(-50%, -50%) scale(.6);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 42%, #fff7df, #ffd86b 52%, #f6b73c 78%);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 rgba(255,224,138,0);
    opacity: .9;
    transition: transform .5s cubic-bezier(.5,1.6,.5,1), box-shadow .5s ease, opacity .4s ease;
}
.perf-capsule-core .perf-q {
    font-size: 30px;
    font-weight: 800;
    color: #c9881a;
    text-shadow: 0 1px 2px rgba(255,255,255,.6);
}
.perf-capsule-core.has-image .perf-q { display: none; }

/* 割れた瞬間の光条（climax / reveal で開く）。 */
.perf-capsule-burst {
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 4px;
    z-index: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.perf-capsule-burst i {
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 96px;
    transform-origin: 50% 0;
    transform: translate(-50%, 0) rotate(var(--a)) scaleY(0);
    background: linear-gradient(to bottom, rgba(255,240,200,.95), transparent);
    opacity: 0;
}

/* ===== フェーズ進行（溜め → 帯電 → リーチ → クライマックス）===== */
/* オーラ。 */
.perf-capsule-stage.heat   .perf-capsule-glow { opacity: .5; transform: translate(-50%, -50%) scale(.85); }
.perf-capsule-stage.charge .perf-capsule-glow { opacity: .8; transform: translate(-50%, -50%) scale(1); animation: capsuleGlowPulse 1.1s ease-in-out infinite; }
.perf-capsule-stage.charge2 .perf-capsule-glow { opacity: .95; transform: translate(-50%, -50%) scale(1.08); animation-duration: .7s; }
.perf-capsule-stage.reach  .perf-capsule-glow,
.perf-capsule-stage.reach2 .perf-capsule-glow,
.perf-capsule-stage.reach3 .perf-capsule-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.18); animation: capsuleGlowPulse .45s ease-in-out infinite; }
@keyframes capsuleGlowPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }

/* 継ぎ目の発光。 */
.perf-capsule-stage.charge  .perf-capsule-seam { box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 10px 2px rgba(255,224,138,.7); }
.perf-capsule-stage.charge2 .perf-capsule-seam { box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 16px 4px rgba(255,224,138,.9); }
.perf-capsule-stage.reach   .perf-capsule-seam,
.perf-capsule-stage.reach2  .perf-capsule-seam,
.perf-capsule-stage.reach3  .perf-capsule-seam { box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 0 22px 6px rgba(255,236,170,1); }

/* 中身の光漏れ（段階が進むほど強く滲む）。 */
.perf-capsule-stage.charge2 .perf-capsule-core { box-shadow: 0 0 22px 4px rgba(255,224,138,.55); }
.perf-capsule-stage.reach   .perf-capsule-core,
.perf-capsule-stage.reach2  .perf-capsule-core,
.perf-capsule-stage.reach3  .perf-capsule-core { box-shadow: 0 0 34px 8px rgba(255,236,170,.8); }

/* カプセルの揺れ（rattle）。段階が進むほど速く・激しく。 */
/* settle: ハズレや序盤の淡い揺れ（glow なし）。heat 以降が来たら上書きされる（後勝ち）。 */
.perf-capsule-stage.settle  .perf-capsule-body { animation: capsuleRattle .85s ease-in-out infinite; }
.perf-capsule-stage.heat    .perf-capsule-body { animation: capsuleRattle .6s ease-in-out infinite; }
.perf-capsule-stage.charge  .perf-capsule-body { animation: capsuleRattle .44s ease-in-out infinite; }
.perf-capsule-stage.charge2 .perf-capsule-body { animation: capsuleRattle .32s ease-in-out infinite; }
.perf-capsule-stage.hush    .perf-capsule-body { animation: capsuleRattle .9s ease-in-out infinite; }  /* ため: 一瞬おとなしく */
.perf-capsule-stage.reach   .perf-capsule-body { animation: capsuleShake .24s ease-in-out infinite; }
.perf-capsule-stage.reach2  .perf-capsule-body { animation: capsuleShake .18s ease-in-out infinite; }
.perf-capsule-stage.reach3  .perf-capsule-body { animation: capsuleShake .12s ease-in-out infinite; }
@keyframes capsuleRattle {
    0%, 100% { transform: translateX(0) rotate(-2.5deg); }
    50%      { transform: translateX(0) rotate(2.5deg); }
}
@keyframes capsuleShake {
    0%, 100% { transform: translate(-3px, 0) rotate(-5deg); }
    25%      { transform: translate(3px, -2px) rotate(5deg); }
    50%      { transform: translate(-2px, 1px) rotate(-4deg); }
    75%      { transform: translate(3px, -1px) rotate(4deg); }
}

/* 落下（タップ開始で発火）。上から落ちて2回バウンド。 */
.perf-capsule.drop .perf-capsule-body { animation: capsuleDrop .95s cubic-bezier(.3, .7, .4, 1); }
@keyframes capsuleDrop {
    0%   { transform: translateY(-280px); }
    55%  { transform: translateY(0); }
    70%  { transform: translateY(-34px); }
    85%  { transform: translateY(0); }
    93%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* タップのナッジ（演出中のタップで軽く弾む・結果に非影響）。外側に当てて rattle と両立。 */
.perf-capsule.nudge { animation: capsuleNudge .42s ease-out; }
@keyframes capsuleNudge {
    0% { transform: scale(1); }
    30% { transform: scale(1.07) rotate(-3deg); }
    60% { transform: scale(.98) rotate(2deg); }
    100% { transform: scale(1); }
}

/* ===== クライマックス: 砕けて開く ===== */
.perf-capsule.open .perf-capsule-body { animation: none; }
.perf-capsule.open .perf-capsule-half.top {
    transform: translateY(-134px) rotate(-18deg);
    opacity: 0;
    transition: transform .5s cubic-bezier(.4, .9, .3, 1.2), opacity .5s ease;
}
.perf-capsule.open .perf-capsule-half.bottom {
    transform: translateY(116px) rotate(8deg);
    opacity: 0;
    transition: transform .5s cubic-bezier(.4, .9, .3, 1.2), opacity .5s ease;
}
.perf-capsule.open .perf-capsule-seam {
    opacity: 0;
    transition: opacity .25s ease;
}
.perf-capsule.open .perf-capsule-core {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 1;
    box-shadow: 0 0 60px 18px rgba(255,240,200,.95);
}
/* ハズレ（rank0）は控えめに開く（光は弱め）。 */
.perf-capsule-overlay[data-rank="0"] .perf-capsule.open .perf-capsule-core {
    box-shadow: 0 0 26px 8px rgba(255,236,200,.5);
}
.perf-capsule.open .perf-capsule-burst i {
    opacity: 1;
    transform: translate(-50%, 0) rotate(var(--a)) scaleY(1);
    transition: transform .55s cubic-bezier(.2, .8, .25, 1), opacity .7s ease;
}
.perf-capsule-overlay[data-rank="0"] .perf-capsule-burst { display: none; }

/* reduce-motion: 大きな動きは止め、開いた状態だけを最小フェードで見せる（即 reveal は JS 側）。 */
@media (prefers-reduced-motion: reduce) {
    .perf-capsule-body,
    .perf-capsule-glow,
    .perf-capsule.drop .perf-capsule-body,
    .perf-capsule.nudge,
    .perf-capsule-stage.heat .perf-capsule-body,
    .perf-capsule-stage.charge .perf-capsule-body,
    .perf-capsule-stage.charge2 .perf-capsule-body,
    .perf-capsule-stage.reach .perf-capsule-body,
    .perf-capsule-stage.reach2 .perf-capsule-body,
    .perf-capsule-stage.reach3 .perf-capsule-body { animation: none !important; }
    .perf-capsule.open .perf-capsule-half,
    .perf-capsule.open .perf-capsule-core,
    .perf-capsule.open .perf-capsule-burst i { transition: none !important; }
    .perf-capsule-overlay.is-idle .perf-capsule { animation: none !important; }
}

/* =========================================================================
   抽選演出「カードめくり（cardflip）」
   裏向きカードを煽る（チラ見せ）→ 最後にフリップして表を見せる。
   揺れ＝外側ラッパー(.perf-cardflip)、フリップ/チラ見せ＝内側カード(.perf-cardflip-card)に
   分離して transform の競合を避ける。共有 chrome とフェーズclassは classic と同じ基底を再利用。
   ========================================================================= */
.perf-cardflip-stage { perspective: 900px; }
.perf-cardflip {
    position: relative;
    width: 126px;
    height: 178px;
    margin: 0 auto 24px;
    transform-style: preserve-3d;
}
.perf-cardflip-overlay.is-idle .perf-cardflip { animation: perf-tap-bob 1.7s ease-in-out infinite; }
.perf-cardflip.in { animation: cardflipIn .55s cubic-bezier(.3, .9, .3, 1.1) both; }
@keyframes cardflipIn {
    0%   { opacity: 0; transform: translateY(-26px) scale(.86); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 背後オーラ（帯電が進むほど強く脈動）。 */
.perf-cardflip-glow {
    position: absolute;
    left: 50%; top: 50%;
    width: 220px; height: 220px;
    transform: translate(-50%, -50%) scale(.7);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 138, .5), rgba(var(--perf-hot-rgb), .22) 46%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease, transform .5s ease;
}
.perf-cardflip-shadow {
    position: absolute;
    left: 50%; bottom: -20px;
    width: 96px; height: 16px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* フリップするカード本体。 */
.perf-cardflip-card {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform .6s cubic-bezier(.5, 1.5, .5, 1);
}
.perf-cardflip-face {
    position: absolute;
    inset: 0;
    border-radius: 13px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
/* 裏面（最初に見える面・rotateY 0）。 */
.perf-cardflip-face.back {
    background:
        radial-gradient(120% 90% at 50% 18%, rgba(255,255,255,.22), transparent 50%),
        linear-gradient(150deg, var(--perf-hot-deep), var(--perf-hot) 55%, var(--perf-hot-bright, #ff5a5a));
    border: 3px solid rgba(255,255,255,.2);
    display: grid;
    place-items: center;
}
.perf-cardflip-emblem {
    font-size: 40px;
    color: rgba(255,255,255,.9);
    text-shadow: 0 2px 6px rgba(0,0,0,.4);
    transform: rotate(0deg);
}
.perf-cardflip-sheen {
    position: absolute;
    top: -40%; left: -60%;
    width: 60%; height: 180%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: rotate(18deg);
    pointer-events: none;
}
/* 表面（フリップで見える面・rotateY 180）。 */
.perf-cardflip-face.front {
    transform: rotateY(180deg);
    background: linear-gradient(145deg, #fff, #f1eae2);
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    border: 3px solid rgba(255,255,255,.6);
}
.perf-cardflip-rank { font-size: 46px; color: var(--text-faint); }
.perf-cardflip-overlay[data-rank="1"] .perf-cardflip-face.front { background: linear-gradient(145deg, #fff1f0, #ffb3b4); }
.perf-cardflip-overlay[data-rank="1"] .perf-cardflip-rank { color: var(--perf-hot-deep); }
.perf-cardflip-overlay[data-rank="2"] .perf-cardflip-face.front { background: linear-gradient(145deg, #fff7df, #ffd86b); }
.perf-cardflip-overlay[data-rank="2"] .perf-cardflip-rank { color: #c9881a; }
.perf-cardflip-face.front.has-image .perf-cardflip-rank { display: none; }

/* ===== フェーズ進行 ===== */
/* オーラ。 */
.perf-cardflip-stage.heat   .perf-cardflip-glow { opacity: .5; transform: translate(-50%, -50%) scale(.85); }
.perf-cardflip-stage.charge .perf-cardflip-glow { opacity: .85; transform: translate(-50%, -50%) scale(1.02); animation: capsuleGlowPulse .8s ease-in-out infinite; }
.perf-cardflip-stage.reach  .perf-cardflip-glow,
.perf-cardflip-stage.reach2 .perf-cardflip-glow,
.perf-cardflip-stage.reach3 .perf-cardflip-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.16); animation: capsuleGlowPulse .45s ease-in-out infinite; }

/* カードの縁取り発光（リーチで強く）。 */
.perf-cardflip-stage.charge  .perf-cardflip-face { box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 14px 2px rgba(255,224,138,.6); }
.perf-cardflip-stage.reach   .perf-cardflip-face,
.perf-cardflip-stage.reach2  .perf-cardflip-face,
.perf-cardflip-stage.reach3  .perf-cardflip-face { box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 26px 6px rgba(255,236,170,.95); }

/* 揺れ（外側ラッパー）。段階が進むほど速く激しく。 */
/* calm: ハズレの淡い揺れ（glow なし）。heat 以降が来たら上書きされる（後勝ち）。 */
.perf-cardflip-stage.calm    .perf-cardflip { animation: cardflipSway 1.15s ease-in-out infinite; }
.perf-cardflip-stage.heat    .perf-cardflip { animation: cardflipSway .9s ease-in-out infinite; }
.perf-cardflip-stage.charge  .perf-cardflip { animation: cardflipSway .6s ease-in-out infinite; }
.perf-cardflip-stage.hush    .perf-cardflip { animation: cardflipSway 1.2s ease-in-out infinite; }
.perf-cardflip-stage.reach   .perf-cardflip { animation: cardflipShake .26s ease-in-out infinite; }
.perf-cardflip-stage.reach2  .perf-cardflip { animation: cardflipShake .2s ease-in-out infinite; }
.perf-cardflip-stage.reach3  .perf-cardflip { animation: cardflipShake .13s ease-in-out infinite; }
.perf-cardflip-stage.climax  .perf-cardflip { animation: none; }
@keyframes cardflipSway {
    0%, 100% { transform: translateY(0) rotate(-1.6deg); }
    50%      { transform: translateY(-4px) rotate(1.6deg); }
}
@keyframes cardflipShake {
    0%, 100% { transform: translate(-3px, 0) rotate(-3deg); }
    25%      { transform: translate(3px, -2px) rotate(3deg); }
    50%      { transform: translate(-2px, 1px) rotate(-2deg); }
    75%      { transform: translate(3px, -1px) rotate(2deg); }
}

/* チラ見せ（内側カードの一発フリップ煽り。結果に非影響）。 */
.perf-cardflip-card.peek     { animation: cardflipPeek .56s ease-in-out; }
.perf-cardflip-card.peek-big { animation: cardflipPeekBig .76s ease-in-out; }
@keyframes cardflipPeek {
    0%   { transform: rotateY(0deg); }
    50%  { transform: rotateY(-46deg) scale(1.04); }
    100% { transform: rotateY(0deg); }
}
@keyframes cardflipPeekBig {
    0%   { transform: rotateY(0deg); }
    45%  { transform: rotateY(-78deg) translateY(-6px) scale(1.07); }
    70%  { transform: rotateY(-30deg); }
    100% { transform: rotateY(0deg); }
}

/* 本めくり（クライマックス／reveal）。表面が見える。 */
.perf-cardflip-card.flip {
    transform: rotateY(180deg) scale(1.06);
}

/* reduce-motion: 大きな動きは止め、最後はフリップ結果（表）だけ最小で見せる（即 reveal は JS 側）。 */
@media (prefers-reduced-motion: reduce) {
    .perf-cardflip,
    .perf-cardflip.in,
    .perf-cardflip-glow,
    .perf-cardflip-overlay.is-idle .perf-cardflip,
    .perf-cardflip-stage.heat .perf-cardflip,
    .perf-cardflip-stage.charge .perf-cardflip,
    .perf-cardflip-stage.reach .perf-cardflip,
    .perf-cardflip-stage.reach2 .perf-cardflip,
    .perf-cardflip-stage.reach3 .perf-cardflip { animation: none !important; }
    .perf-cardflip-card { transition: none !important; }
    .perf-cardflip-card.peek,
    .perf-cardflip-card.peek-big { animation: none !important; }
}

/* =========================================================================
   抽選結果
   ========================================================================= */
.result-body { text-align: center; }
.result-body.show { animation: resultIn .5s cubic-bezier(.2, .8, .25, 1); }
/* ★transform は使わない: result-body 内に position:fixed のアクションバーがあり、
   transform を持つ祖先は fixed の基準になってしまうため、アニメ中だけバーが中央に
   寄って終了時に下部へジャンプする「ズレ」が起きる。フェードのみにして防ぐ。 */
@keyframes resultIn { from { opacity: 0; } to { opacity: 1; } }

.result-badge {
    display: inline-block;
    margin: 4px auto 16px;
    padding: 8px 24px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 18px;
    color: #fff;
    background: var(--text-sub);
    box-shadow: 0 4px 12px rgba(120, 100, 90, .25);
}
.result-badge.rank-1 {
    background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
    box-shadow: 0 5px 16px rgba(var(--accent-deep-rgb), .35);
}
.result-badge.rank-2 {
    color: #4a3100;
    background: linear-gradient(135deg, #ffe7a0, var(--gold) 55%, var(--gold-deep));
    box-shadow: 0 6px 20px rgba(217, 146, 17, .45);
    animation: badgeJump .6s ease;
}
@keyframes badgeJump { 0% { transform: scale(.6) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* 結果カード: rank2 は金枠＋光彩で「格」を伝える */
.result-card {
    position: relative;
    background: var(--card);
    border-radius: 20px;
    padding: 24px 18px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
    overflow: hidden;
}
.result-card.rank-1 { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-md); }
.result-card.rank-2 {
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 4px var(--gold-soft), 0 16px 44px rgba(217, 146, 17, .28);
}
/* rank2 のカード背後に金の後光（静的・控えめ＝結果はじっくり見せる） */
.result-card.rank-2::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto 50%;
    transform: translateX(-50%);
    width: 160%;
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, rgba(246, 183, 60, .1) 0deg 8deg, transparent 8deg 16deg);
    pointer-events: none;
}

.result-img {
    position: relative;
    width: 176px;
    height: 238px;
    margin: 0 auto 16px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(155deg, #fff3e0, #ffe8d6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(120, 70, 55, .16);
}
.result-card.rank-2 .result-img { box-shadow: 0 0 0 2px #fff, 0 10px 28px rgba(217, 146, 17, .3); }
.result-img img { width: 100%; height: 100%; object-fit: cover; }
.result-img-ph { color: var(--gold-deep); font-size: 12px; font-weight: 800; letter-spacing: .12em; opacity: .55; }

.result-name {
    position: relative;
    font-family: var(--font-heading);
    font-size: 20px;
    margin: 0 0 12px;
    line-height: 1.4;
}
.result-buyback {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--text-sub);
}
.result-buyback-label { font-size: 13px; font-weight: 700; }
.result-buyback strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent-deep);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}
.result-buyback strong::before {
    content: "";
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 70%);
    box-shadow: inset 0 0 0 2px var(--gold-deep);
}
.result-card.rank-2 .result-buyback strong { color: var(--gold-deep); }

.result-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 11px; }
.result-kept-note {
    color: var(--text-sub);
    font-size: 14px;
    margin: 0 0 6px;
    padding: 10px 14px;
    background: #fffdf9;
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* =========================================================================
   Sprint 13: 抽選結果 複数結果対応・選択式UI（result-grid / result-card / 固定バー）
   単数・複数共通。Collection 選択モードの作法を流用し result 用に独立クラス化。
   FUKUBUKURO POP テーマ（朱赤×金・和紙クリーム）。.phone 枠内に収める。
   ========================================================================= */
.result-body { text-align: left; }

.result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 2px 0 14px;
}
.result-head-titles { min-width: 0; }
.result-eyebrow {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--gold-deep);
    text-transform: none;
    margin: 0 0 3px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--gold-soft);
    border: 1px solid rgba(217, 146, 17, .22);
}
.result-title {
    font-family: var(--font-heading);
    font-size: 22px;
    margin: 0;
    line-height: 1.2;
}
.result-sub { margin: 5px 0 0; font-size: 13px; color: var(--text-sub); font-weight: 700; }
.result-sub strong {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 17px;
    color: var(--accent-deep);
    margin-right: 1px;
    font-variant-numeric: tabular-nums;
}
.result-rank-badge { margin: 6px 0 0; font-size: 15px; padding: 5px 16px; }
.result-later {
    flex: none;
    align-self: center;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-sub);
    background: #fffdf9;
    border: 1px solid var(--line-strong);
    text-decoration: none;
}
.result-later:active { transform: scale(.96); }

/* --- 表示切替 / 並び替えトグル ---
   2グループを別の視覚言語で差別化する（同じ赤ピルが2行並ぶ「AIスロップ」を回避）:
   ・表示切替 = アイコンのみのコンパクトなセグメント（墨色の選択状態）
   ・並び替え = 言葉のピル（朱赤の選択状態）
   横一列で左に表示切替・右に並び替えを置き、役割を空間で分ける。 */
.result-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.result-seg {
    display: inline-flex;
    background: #fff4e8;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.result-seg-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 800;
    padding: 7px 13px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .16s ease, background .2s ease, box-shadow .2s ease;
}

/* 表示切替: アイコンセグメント。選択は墨色（情報の「モード」なので彩度を抑える） */
.result-seg-view .result-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
}
.result-seg-view .result-seg-btn svg { display: block; }
.result-seg-view .result-seg-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, #5a4636, var(--text));
    box-shadow: 0 2px 7px rgba(60, 35, 18, .28);
}

/* 並び替え: 言葉のピル。選択は朱赤（ユーザーの能動的な絞り込み） */
.result-seg-sort .result-seg-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    box-shadow: 0 2px 8px rgba(var(--accent-deep-rgb), .3);
}

/* --- 結果グリッド / リスト --- */
.result-grid.is-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* 固定アクションバー＋ボトムナビ分の下クリアランス（最終行が隠れないように）。 */
    margin-bottom: calc(var(--nav-h) + 132px);
}
.result-grid.is-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: calc(var(--nav-h) + 132px);
}

/* 単数結果（演出後/直接アクセス）は1枚を主役として中央に大きく見せる。
   2カラムの片側だけ埋まる「寂しさ」を避け、当選の格を立てる。
   リスト表示に切り替えたときは通常の横並びに戻す（.is-list が優先）。 */
.result-grid.is-single.is-grid {
    display: flex;
    justify-content: center;
    /* 単数は固定バーに「もう一度引く」を常設するぶん、下クリアランスを増やす。 */
    margin-bottom: calc(var(--nav-h) + 188px);
}
/* 「もう一度引く」: 交換/発送ボタンの下に置く控えめな再挑戦導線（手詰まり時の逃げ道）。 */
.result-action-bar .result-action-again { margin: 2px 0 0; }
.result-grid.is-single.is-grid .result-card {
    width: min(248px, 80%);
    padding: 14px;
    /* 可視領域（上部バー＋ヘッダ＋固定アクションバー＋ナビを除く）に必ず収め、
       カード下部（コイン額）が固定バーに隠れて見切れるのを防ぐ。
       サムネは flex で伸縮し、名前・コインは常に見える。 */
    display: flex;
    flex-direction: column;
    height: calc(100vh - 430px);
    height: calc(100dvh - 430px);
    min-height: 200px;
    max-height: 440px;
    box-sizing: border-box;
}
/* 単数のサムネは比率固定をやめ、カード内の残り高さに伸縮させる（縦が足りなければ縮む）。 */
.result-grid.is-single.is-grid .result-thumb {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
    width: 100%;
    margin-bottom: 10px;
}
.result-grid.is-single.is-grid .result-card-name,
.result-grid.is-single.is-grid .result-card-coin { flex: 0 0 auto; }
.result-grid.is-single.is-grid .result-card-name { font-size: 15px; }
.result-grid.is-single.is-grid .result-card-coin strong { font-size: 20px; }

/* result 用カード（Collection の選択UI作法を流用しつつ独立クラス）。
   旧 .result-card（単一大カード）と区別するため、必ず .result-grid 配下で上書きする。 */
.result-grid .result-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.result-grid .result-card.rank-1 { border-color: var(--accent-soft); }
.result-grid .result-card.rank-2 { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-soft), var(--shadow-sm); }
.result-grid .result-card.is-selectable:active { transform: scale(.97); }
.result-grid .result-card.is-disabled {
    opacity: .55;
    cursor: default;
    filter: saturate(.6);
}
/* 「選択段階で互いに排他」: 同時選択できない区分のカードを一時的にロック（グレーアウト）。
   選択を外すと解除される（一方通行で固まらない）。Designer が磨き込む。 */
.result-grid .result-card.is-locked,
.collection-grid .collection-card.is-locked {
    opacity: .4;
    filter: grayscale(.7) saturate(.5);
    cursor: not-allowed;
    pointer-events: none;
}

/* リスト表示は横並び（サムネ左・情報右） */
.result-grid.is-list .result-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.result-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(155deg, #fff3e0, #ffe8d6);
    display: flex;
    align-items: center;
    justify-content: center;
    /* カード画像は縦横比を保って全体表示する（はみ出し/見切れ防止）。余白に少し余裕を持たせる。 */
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.result-grid.is-list .result-thumb {
    width: 64px;
    aspect-ratio: 3 / 4;
    flex: none;
    margin-bottom: 0;
}
/* 縦横比を維持して全体を表示（cover だとカードが見切れるため contain）。 */
.result-thumb img { width: 100%; height: 100%; object-fit: contain; }
.result-thumb-ph { color: var(--gold-deep); font-size: 10px; font-weight: 800; letter-spacing: .1em; opacity: .55; }
.result-status-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: rgba(70, 50, 40, .82);
}
.result-status-badge.status-bought_back { background: rgba(160, 110, 20, .9); }
.result-status-badge.status-shipping_requested { background: rgba(40, 110, 150, .9); }
.result-status-badge.status-shipped { background: rgba(70, 120, 70, .9); }

.result-card-body { min-width: 0; }
.result-grid.is-list .result-card-body { flex: 1 1 auto; }
.result-card-name {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.result-card-coin {
    margin: 0;
    font-size: 12px;
    color: var(--text-sub);
    font-weight: 700;
}
.result-card-coin strong {
    color: var(--accent-deep);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* 選択チェック（黄枠ハイライト） */
.result-check {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--line-strong);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(60, 35, 18, .2);
}
.result-check svg { opacity: 0; transform: scale(.5); transition: opacity .14s ease, transform .14s cubic-bezier(.34, 1.56, .64, 1); }
.result-card.is-checked {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold), 0 8px 20px rgba(217, 146, 17, .3);
}
.result-card.is-checked .result-check {
    background: var(--gold);
    border-color: var(--gold-deep);
}
.result-card.is-checked .result-check svg { opacity: 1; transform: scale(1); }

/* --- 結果用 固定アクションバー（collection-action-bar を流用し result 用に拡張）--- */
.result-action-bar .result-action-secondary {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.result-action-bar .result-action-secondary .btn { flex: 1 1 0; }
.result-action-bar .result-action-main {
    display: flex;
    gap: 10px;
}
.result-action-bar .result-action-main .btn { flex: 1 1 0; margin: 0; }
/* 無効状態は「まだ使えない」を控えめに伝える（ベタ塗りグレーの圧迫感を避ける）。 */
.result-action-bar .result-action-main .btn-gold:disabled {
    background: #f3e6cf;
    color: #b69a6a;
    box-shadow: none;
}
.result-action-bar .result-action-main .btn-gold:disabled::after { display: none; }
.result-action-bar .result-action-main .btn-outline:disabled {
    background: #fffdf9;
    color: #c9b29a;
    border-color: var(--line-strong);
    box-shadow: none;
}
.result-ship-note {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent-deep);
    text-align: center;
    line-height: 1.45;
    padding: 7px 12px;
    border-radius: 11px;
    background: linear-gradient(180deg, #fff6ee, var(--accent-soft));
    border: 1px solid rgba(var(--accent-deep-rgb), .16);
}
/* なぜ選べないか（排他/閾値）を伝える注記アイコン。CSS のみで素朴に。 */
.result-ship-note::before {
    content: "!";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 15px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(var(--accent-deep-rgb), .35);
}
.result-ship-note[hidden] { display: none; }

/* 全件選択不可（交換済等）の案内 */
.result-allgone {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 16px;
}
.result-allgone-note {
    margin: 0;
    text-align: center;
    color: var(--text-sub);
    font-size: 14px;
    font-weight: 700;
    padding: 12px;
    background: #fffdf9;
    border: 1px solid var(--line);
    border-radius: 12px;
}

/* 交換確認シートの残高 before→after 表示 */
.buyback-sheet-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 6px;
    font-weight: 800;
}
.buyback-sheet-balance[hidden] { display: none; }
.buyback-sheet-balance-label { font-size: 12px; color: var(--text-sub); }
.buyback-sheet-balance-flow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}
.buyback-sheet-balance-before { color: var(--text-sub); }
.buyback-sheet-balance-arrow { color: var(--gold-deep); }
.buyback-sheet-balance-after { color: var(--accent-deep); font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
    .result-grid .result-card { transition: none; }
    .result-check, .result-check svg { transition: none; }
}

/* =========================================================================
   Sprint 6: コイン購入 / コイン履歴 / コレクション一覧・詳細
   designer 磨き込み: FUKUBUKURO POP（朱赤×金・和紙クリーム・Mochiy Pop One）を踏襲し、
   「おトク感／福引き感／レアリティの格」を視覚に落とし込む。
   機能・DOM・テンプレ変数・買取postLink は不可侵。クラス付与とCSSのみ。
   ========================================================================= */

/* --- 残高バナー（購入・履歴で共用）: 金の縁起札風。コイン硬貨アイコンを左肩に。 --- */
.balance-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 18px;
    padding: 15px 18px 15px 56px;
    border-radius: 18px;
    color: #3a2700;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .55), transparent 55%),
        linear-gradient(135deg, #ffe9b0 0%, var(--gold) 60%, var(--gold-deep) 100%);
    border: 1px solid rgba(217, 146, 17, .6);
    box-shadow: 0 8px 20px rgba(217, 146, 17, .28), inset 0 1px 0 rgba(255, 255, 255, .6);
    overflow: hidden;
}
/* 左肩のコイン硬貨マーク（円）。 */
.balance-banner::before {
    content: "¥";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--gold-deep);
    background: #fff8e6;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .12), inset 0 0 0 2px rgba(217, 146, 17, .55);
}
.balance-banner-label {
    color: #6b4a05;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}
.balance-banner-amount {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    color: #3a2700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.balance-banner-amount small { font-size: 12px; font-weight: 800; color: #6b4a05; margin-left: 2px; }

/* --- コインプラン: お得感の階段。ボーナス率が高いほど豪華に。 --- */
.plan-list { display: flex; flex-direction: column; gap: 12px; }
.plan-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
/* 左端にボーナス有無を示すアクセントの帯。 */
.plan-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--line-strong);
}
.plan-card.has-bonus::before { background: linear-gradient(var(--gold), var(--gold-deep)); }
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* おトク No.1 プラン: 金枠＋クリーム地で「これが一番おトク」を一目で。 */
.plan-card.is-best {
    border-color: var(--gold);
    background: linear-gradient(180deg, var(--gold-soft), #fff 70%);
    box-shadow: 0 8px 22px rgba(217, 146, 17, .22), inset 0 1px 0 rgba(255, 255, 255, .7);
    padding-top: 26px;
}
.plan-card.is-best::before { display: none; }
.plan-flag {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 4px 14px 5px 12px;
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    border-radius: 18px 0 14px 0;
    box-shadow: 0 3px 8px rgba(var(--accent-deep-rgb), .3);
    letter-spacing: .02em;
}
.plan-flag::before { content: "★ "; }

.plan-info { min-width: 0; }
.plan-name { margin: 0 0 5px; font-weight: 900; font-size: 14px; color: var(--text); }
.plan-coins { margin: 0; font-size: 13px; color: var(--text-sub); }
.plan-coin-amount {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    color: var(--accent-deep);
    line-height: 1;
}
.plan-bonus {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    color: var(--gold-deep);
    background: var(--gold-soft);
    border: 1px solid rgba(217, 146, 17, .35);
    font-weight: 900;
    font-size: 11px;
    white-space: nowrap;
}
.plan-total { margin: 5px 0 0; font-size: 12px; font-weight: 800; color: var(--gold-deep); }
.plan-total::before { content: "🎁 "; font-size: 11px; }
.plan-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.plan-price { font-size: 16px; font-weight: 900; color: var(--text); }
.plan-buy form { margin: 0; }
.plan-buy .btn { padding: 9px 16px; border-radius: 12px; font-size: 13.5px; white-space: nowrap; }
.mock-note { margin: 16px 2px 0; font-size: 12px; color: var(--text-faint); text-align: center; }
.page-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }

/* --- コイン履歴: 増減方向を色面で即読。type バッジは役割で配色を区別。 --- */
.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.history-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 12px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
/* 左端の細い色帯で増減方向を示す（プラス=緑 / マイナス=朱）。 */
.history-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}
.history-item.is-in::before { background: #2fa45b; }
.history-item.is-out::before { background: var(--accent); }
.history-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.history-text { min-width: 0; }
.history-memo {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 165px;
}
.history-when { margin: 3px 0 0; font-size: 11px; color: var(--text-faint); }
.history-amounts { text-align: right; flex: none; }
.history-delta {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1;
    padding: 1px 8px;
    border-radius: 9px;
}
.history-delta.is-plus { color: #1c7c3f; background: rgba(47, 164, 91, .12); }
.history-delta.is-minus { color: var(--accent-deep); background: var(--accent-soft); }
.history-balance { display: block; font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* type バッジ（履歴）: 役割ごとに色を分け、一目で purchase/draw/buyback を区別。 */
.tx-badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 6px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    /* 未定義 type でも崩れないよう無難な既定色を持たせる（既知 type は下で上書き）。 */
    background: linear-gradient(135deg, #9c918a, var(--text-sub));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tx-purchase { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #3a2700; }
.tx-draw { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.tx-buyback { background: linear-gradient(135deg, #34b06a, #1c7c3f); }
.tx-refund, .tx-adjustment { background: linear-gradient(135deg, #9c918a, var(--text-sub)); }
/* その他カテゴリの type（ボーナス系・失効・未定義）は無難な既定色。 */
.tx-signup_bonus, .tx-email_verify_bonus, .tx-sms_verify_bonus { background: linear-gradient(135deg, #6aa6d8, #3d78ab); }
.tx-expire { background: linear-gradient(135deg, #b0a49c, #7d6f66); }

/* --- 履歴の絞り込みチップ（すべて/購入/抽選/その他）＋「さらに表示」 --- */
.history-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.history-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    color: var(--text-sub);
    background: #fff;
    border: 1px solid var(--line-strong);
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.history-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.history-chip:active { transform: scale(.96); }
.history-chip.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    border-color: var(--accent-deep);
    box-shadow: 0 4px 10px rgba(var(--accent-deep-rgb), .28);
}
.history-more { margin: 14px 0 0; }
.history-more-btn[hidden] { display: none; }
.history-more-btn.is-loading { opacity: .6; pointer-events: none; }
.history-more-btn.is-loading::after { content: " …"; }

/* --- コレクション一覧: 福引きで「引き当てた」感。横スクロールしないチップ群。 --- */
.collection-filters { margin: 0 0 18px; display: flex; flex-direction: column; gap: 12px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    color: var(--text-sub);
    background: #fff;
    border: 1px solid var(--line-strong);
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.chip:active { transform: scale(.96); }
.chip.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    border-color: var(--accent-deep);
    box-shadow: 0 4px 10px rgba(var(--accent-deep-rgb), .28);
}
/* --- コレクション 表示切替 / 並び替えトグル（Sprint 18） ---
   result.php の .result-controls / .result-seg 作法を踏襲しつつ .collection-* で衝突回避。
   ・表示切替 = アイコンのみのコンパクトなセグメント（墨色の選択状態）
   ・並び替え = 言葉のピル（朱赤の選択状態） */
.collection-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    /* 種別チップ群（何を見るか）と表示/並び（どう見るか）を視覚的に切り分ける、控えめな点線の仕切り。 */
    padding-top: 13px;
    border-top: 1px dashed var(--line-strong);
}
.collection-seg {
    display: inline-flex;
    background: #fff4e8;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.collection-seg-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 800;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .16s ease, background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.collection-seg-btn:not(.is-active):hover { color: var(--text); }
.collection-seg-btn:active { transform: scale(.95); }
/* 表示切替: アイコンセグメント。選択は墨色（情報の「モード」なので彩度を抑える） */
.collection-seg-view .collection-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
}
.collection-seg-view .collection-seg-btn svg { display: block; }
.collection-seg-view .collection-seg-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, #5a4636, var(--text));
    box-shadow: 0 2px 7px rgba(60, 35, 18, .28);
}
/* 並び替え: 言葉のピル。選択は朱赤（ユーザーの能動的な並べ替え） */
.collection-seg-sort .collection-seg-btn.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    box-shadow: 0 2px 8px rgba(var(--accent-deep-rgb), .3);
}

.collection-grid.is-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
/* リスト表示: 1 カラムの横並びカード（サムネ左・本文右）。
   行は「サムネ｜名前＋状態｜交換コイン」の三段構えで、無駄な縦余白を作らず
   一覧として素早く走査できる密度に整える。 */
.collection-grid.is-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.collection-grid.is-list .collection-card {
    flex-direction: row;
    align-items: stretch;
    border-radius: 14px;
}
.collection-grid.is-list .collection-thumb {
    width: 66px;
    flex: none;
    aspect-ratio: 1 / 1;
    align-self: stretch;
    /* 背景の縁起ラインはリストでは控えめに（行が並ぶと過剰になるため）。 */
}
.collection-grid.is-list .collection-thumb::before { opacity: .4; }
.collection-grid.is-list .collection-thumb img { object-fit: contain; }
/* NO IMAGE マークもリストでは一回り小さく。 */
.collection-grid.is-list .collection-thumb span:not(.type-badge):not(.dispo-badge) { width: 38px; height: 38px; border-radius: 11px; }
.collection-grid.is-list .collection-thumb span:not(.type-badge):not(.dispo-badge)::after { font-size: 17px; }
.collection-grid.is-list .collection-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 9px 13px 9px 12px;
}
.collection-grid.is-list .collection-name {
    margin: 0;
    white-space: normal;
    /* 名前は最大 2 行でクランプ（長い景品名で行高がばらつくのを防ぐ）。 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.32;
    font-size: 13.5px;
}
.collection-grid.is-list .collection-meta { justify-content: flex-start; gap: 9px; flex-wrap: wrap; }
/* リスト表示では種別バッジをサムネ上に小さく、本文側でも重ならないようにする。 */
.collection-grid.is-list .type-badge { top: 4px; left: 4px; padding: 2px 7px; font-size: 9px; }
.collection-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.collection-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.collection-card:active { transform: scale(.98); }
.collection-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 50% 38%, #fffdf8, #fff2e2 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* 放射状の縁起ライン（控えめ）で福引きの当たり感を背景に。 */
.collection-thumb::before {
    content: "";
    position: absolute;
    inset: -25%;
    background:
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(246, 183, 60, .10) 0deg 7deg,
            transparent 7deg 14deg);
    opacity: .7;
    pointer-events: none;
}
.collection-thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
/* NO IMAGE プレースホルダ: そっけない文字でなくトレカ裏面風のマークに。 */
.collection-thumb span:not(.type-badge):not(.dispo-badge) {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    text-indent: 0;
    background: linear-gradient(150deg, var(--accent), var(--accent-deep));
    box-shadow: 0 4px 12px rgba(var(--accent-deep-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .35);
    transform: rotate(-5deg);
}
.collection-thumb span:not(.type-badge):not(.dispo-badge) { font-size: 0; }
.collection-thumb span:not(.type-badge):not(.dispo-badge)::after { content: "?"; font-size: 24px; }
.type-badge {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}
.type-card { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.type-box { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #3a2700; }
.type-pack { background: linear-gradient(135deg, #7e9fc0, #5f80a3); }
.collection-body { padding: 11px 12px 13px; }
.collection-name {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.collection-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* 交換コイン: result.php のコイン額の作法（Mochiy Pop の数字・等幅）に寄せ、
   絵文字でなく金色のコインマークを自前で描いて世界観を統一する。 */
.collection-buyback {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    color: var(--gold-deep);
    white-space: nowrap;
}
.collection-buyback::before {
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 55%, var(--gold-deep));
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), 0 1px 2px rgba(193, 130, 15, .35);
    flex: none;
}
.collection-buyback .coin-amount {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* ===== まとめ買取: 選択モード・チェック・固定アクションバー（Sprint 9）===== */
/* 一覧上部の「まとめて買取」トグル */
.collection-toolbar { margin-top: 12px; }
.collection-toolbar .btn { font-weight: 800; }

/* カードのチェックマーク（選択モード時のみ表示） */
.collection-card { position: relative; }
.collection-check {
    position: absolute;
    z-index: 4;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    /* 未選択: 白丸でなく和紙クリーム地＋金寄りの淡いリング。世界観(朱×金)に馴染ませる。 */
    background: rgba(255, 252, 245, .92);
    border: 1.5px solid rgba(217, 146, 17, .45);
    box-shadow: 0 2px 5px rgba(80, 50, 20, .16), inset 0 0 0 2px rgba(255, 255, 255, .6);
    /* タップ判定を実寸より広げる（指で押しやすく） */
    transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
/* 当たり判定を一回り広げる透明ヒットエリア */
.collection-check::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
}
.collection-check svg { opacity: 0; transform: scale(.5); transition: opacity .14s ease, transform .14s cubic-bezier(.34, 1.56, .64, 1); }
/* 選択モード中は固定アクションバー（collection-action-bar）が下部を覆うため、最終行が
   バー＋ナビの上までスクロールできるようグリッド下に余白を確保する（結果ページの
   .result-grid と同じ考え方。バー未表示の通常時は余白なし）。バー高さ（注記の有無で可変）の
   最大想定＋ナビ分を固定で見込む。 */
.collection-grid.select-mode { margin-bottom: calc(var(--nav-h) + 180px); }
/* 選択モード中: 選択可能カードにチェック枠を出す（ふわっと出現） */
.collection-grid.select-mode .collection-card.is-selectable .collection-check {
    display: flex;
    animation: collection-check-in .22s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes collection-check-in {
    from { opacity: 0; transform: scale(.4); }
    to   { opacity: 1; transform: scale(1); }
}
/* 選択モード中はホバー浮きを抑え、押下感だけ残す */
.collection-grid.select-mode .collection-card { transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
/* タップ後にスマホで :hover が貼り付く（sticky hover）と、選択済みカードの金リング
   （is-checked の box-shadow / border-color）をこのホバー規則が上書きして消してしまい、
   いま選んだカードにリングが出ず、次を選ぶと前のカードにだけリングが残って見える。
   選択済み（is-checked）はホバー上書きの対象から除外し、リングを必ず維持する。 */
.collection-grid.select-mode .collection-card:not(.is-checked):hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
.collection-grid.select-mode .collection-card.is-selectable:active { transform: scale(.97); }
/* 選択不可カード（owned 以外）は選択モード中、上品にトーンを落として無効化 */
.collection-grid.select-mode .collection-card:not(.is-selectable) {
    opacity: .42;
    filter: grayscale(.35);
    cursor: default;
}
/* 選択済みカード: 金トーンの暖かい光彩で「選んだ」感を出す */
.collection-card.is-checked {
    border-color: var(--gold);
    box-shadow:
        0 0 0 2.5px var(--gold),
        0 0 16px rgba(246, 183, 60, .55),
        var(--shadow-md);
    animation: collection-card-pop .26s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes collection-card-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}
/* 選択済みは選択不可カードの dim より前面に置く */
.collection-grid.select-mode .collection-card.is-checked { z-index: 2; }
.collection-card.is-checked .collection-check {
    background: linear-gradient(150deg, var(--gold), var(--gold-deep));
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 2px 8px rgba(217, 146, 17, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.collection-card.is-checked .collection-check svg { opacity: 1; transform: scale(1); }

/* 固定アクションバー: 一覧が長い(約8000px)ため sticky/absolute では最上部で
   画面外に出てしまう。viewport 固定の position:fixed にし、PC では .phone 枠
   (--phone-width) 内に中央クランプして枠外へはみ出さないようにする。 */
.bulk-buyback-form { display: contents; }
.collection-action-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* PC でもスマホ枠幅を超えない。モバイルは画面幅いっぱい。 */
    width: min(100%, var(--phone-width));
    z-index: 30;
    padding: 13px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    /* 和紙クリームのガラス。背面の福引き感をうっすら透かす */
    background: linear-gradient(to top, rgba(255, 247, 238, .99), rgba(255, 248, 241, .94));
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -8px 26px rgba(60, 35, 18, .16);
    display: flex;
    flex-direction: column;
    gap: 11px;
    animation: action-bar-in .26s cubic-bezier(.16, 1, .3, 1) both;
}
/* 金の極細トップライン（縁起のアクセント） */
.collection-action-bar::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(246, 183, 60, .8), transparent);
    pointer-events: none;
}
@keyframes action-bar-in {
    /* base の translateX(-50%) を維持したまま下からせり上げる（中央センタリングを崩さない） */
    from { transform: translateX(-50%) translateY(100%); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
/* ワイド（全幅帯・left:0/right:0）用: translateX を含まず縦スライドのみ。
   （base の action-bar-in は to で translateX(-50%) を残すため、全幅 bar だと左へずれる） */
@keyframes action-bar-in-wide {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
/* ボトムナビがある画面ではナビの上に積む */
.phone.has-nav .collection-action-bar { bottom: var(--nav-h); }
.collection-action-bar[hidden] { display: none; }
.action-bar-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
}
.action-bar-count {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}
.action-bar-count strong { font-size: 18px; color: var(--text); }
/* 合計コインは「戻ってくる報酬」として金トーンで強調する */
.action-bar-coin {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 10px 4px;
    border-radius: 999px;
    background: var(--gold-soft);
    border: 1px solid rgba(217, 146, 17, .28);
    color: var(--gold-deep);
}
.action-bar-coin strong {
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: 1;
    color: var(--gold-deep);
}
.action-bar-buttons { display: flex; align-items: center; gap: 10px; }
.action-bar-buttons .btn-sm { flex: 0 0 auto; white-space: nowrap; }
.action-bar-buttons .js-bulk-buyback { flex: 1 1 auto; padding: 14px; }
.action-bar-buttons .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* =========================================================================
   コレクション 2 アクション固定バー（Sprint 17・交換／発送）
   結果画面(result-action-bar)とトーンを揃えつつ、コレクション固有の
   「交換＝買取コイン付きのみ / 発送＝所有全件」という対象の非対称を、
   ボタン内の 2 段ラベル（主ラベル＋対象サブラベル）で直感的に見せる。
   FUKUBUKURO POP（朱赤×金・和紙クリーム）。collection-* で衝突回避。
   ========================================================================= */
.collection-action-bar-dual .collection-action-secondary {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.collection-action-bar-dual .collection-action-secondary .btn { flex: 1 1 0; }

.collection-action-bar-dual .collection-action-main {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.collection-action-bar-dual .collection-action-main .btn {
    flex: 1 1 0;
    margin: 0;
    min-width: 0;                 /* 狭幅で flex 子がはみ出さない */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 1.18;
    padding: 11px 9px 10px;
    border-radius: 15px;
}
/* 主ラベル: 太字で「何をする操作か」を一目で。 */
.collection-action-bar-dual .action-btn-label {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .01em;
}
/* 対象サブラベル: 「交換対象 N 点 / N コイン」を 1 行の status 行として
   見せる。数字は等幅にしてカチッと揃え、狭幅では字間を詰めて折返さない。 */
.collection-action-bar-dual .action-btn-sub {
    display: block;
    max-width: 100%;
    font-size: clamp(9.5px, 2.7vw, 11px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    padding: 2px 9px 1px;
    border-radius: 999px;
}
/* 交換ボタンのサブラベル: 「戻ってくるコイン」を想起させる金トーンの台座。
   濃い金字 × ごく薄い白の半透明ピルで、金ボタン上でも視認性を確保。 */
.collection-action-bar-dual .btn-gold .action-btn-sub {
    color: #5a3d00;
    background: rgba(255, 255, 255, .42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
/* 発送ボタンのサブラベル: 主役(交換)に譲り、朱赤の淡い台座で控えめに。 */
.collection-action-bar-dual .btn-outline .action-btn-sub {
    color: var(--accent-deep);
    background: var(--accent-soft);
}

/* 無効状態は「まだ使えない」を控えめに伝える（ベタ塗りグレーの圧迫感を避ける）。 */
.collection-action-bar-dual .collection-action-main .btn-gold:disabled {
    background: #f3e6cf;
    color: #b69a6a;
    box-shadow: none;
}
.collection-action-bar-dual .collection-action-main .btn-gold:disabled::after { display: none; }
.collection-action-bar-dual .collection-action-main .btn-gold:disabled .action-btn-sub {
    color: #ab8d5e;
    background: rgba(255, 255, 255, .35);
    box-shadow: none;
}
.collection-action-bar-dual .collection-action-main .btn-outline:disabled {
    background: #fffdf9;
    color: #c9b29a;
    border-color: var(--line-strong);
    box-shadow: none;
}
.collection-action-bar-dual .collection-action-main .btn-outline:disabled .action-btn-sub {
    color: #c2ab93;
    background: #faf4ec;
}

/* --- 注記行（閾値未満 / 送料あり のときだけ JS が表示）--- */
/* 「足りない理由」を叱責ではなく案内として見せる: 和紙クリームの情報チップに
   ⓘ アイコンを添え、出現時はふわっとスライドイン。 */
.collection-ship-note {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent-deep);
    text-align: center;
    line-height: 1.45;
    padding: 7px 12px;
    border-radius: 11px;
    background: linear-gradient(180deg, #fff6ee, var(--accent-soft));
    border: 1px solid rgba(var(--accent-deep-rgb), .16);
    animation: collection-note-in .24s cubic-bezier(.16, 1, .3, 1) both;
}
/* ⓘ の擬似アイコン（ストックアイコンを使わず CSS で素朴に作る） */
.collection-ship-note::before {
    content: "!";
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 15px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(var(--accent-deep-rgb), .35);
}
@keyframes collection-note-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.collection-ship-note[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .collection-ship-note { animation: none; }
}

/* 状態バッジ（一覧・詳細で共用） */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-owned { background: var(--accent-soft); color: var(--accent-deep); }
.status-shipping_requested { background: #fff7e6; color: var(--gold-deep); }

/* 配送ステータス（履歴）: 申請受付→朱赤 / 準備中→金 / 発送済→新緑 / キャンセル→灰 */
.status-pending { background: var(--accent-soft); color: var(--accent-deep); }
.status-preparing { background: var(--gold-soft); color: var(--gold-deep); }
.status-shipped { background: #e7f6ec; color: #1f8a4c; }
.status-cancelled { background: #f1ece8; color: var(--text-sub); }

/* 空状態: 福引きの「これから引こう」を演出。 */
.empty-note { line-height: 1.7; }

/* --- コレクション詳細 --- */
.detail-back { margin: 0 0 12px; }
.collection-detail { padding-bottom: 8px; }
.cd-hero {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 35%, #fffdf8, #fff0de 72%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(217, 146, 17, .18);
}
/* 当たりの後光（放射）。 */
.cd-hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        repeating-conic-gradient(from 0deg at 50% 45%,
            rgba(246, 183, 60, .12) 0deg 8deg,
            transparent 8deg 16deg);
    pointer-events: none;
}
.cd-hero img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.cd-hero-ph {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 20px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0;
    background: linear-gradient(150deg, var(--accent), var(--accent-deep));
    box-shadow: 0 8px 20px rgba(var(--accent-deep-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .35);
    transform: rotate(-5deg);
}
.cd-hero-ph::after { content: "?"; font-size: 36px; }
.cd-status { position: absolute; z-index: 2; top: 12px; right: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.cd-name {
    font-family: var(--font-heading);
    margin: 18px 0 14px;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text);
}
.cd-specs { margin: 0; display: flex; flex-direction: column; gap: 1px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.cd-spec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    background: var(--card);
}
.cd-spec + .cd-spec { border-top: 1px solid var(--line); }
.cd-spec dt { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-sub); }
.cd-spec dd { margin: 0; font-size: 14px; font-weight: 800; color: var(--text); text-align: right; }
/* 買取コインの行は金で強調（このアイテムの価値）。 */
.cd-spec:last-child { background: var(--gold-soft); }
.cd-spec dd.cd-buyback {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 17px;
    color: var(--gold-deep);
}
.cd-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.cd-actions .btn-gold { padding: 17px; font-size: 16.5px; border-radius: 16px; }

/* 配送導線「準備中」: ボタン枠だが押せない雰囲気＋タグで明示。 */
.cd-actions .btn.is-soon {
    background: #fffdf9;
    border: 1.5px dashed var(--line-strong);
    color: var(--text-sub);
    box-shadow: none;
    cursor: default;
    gap: 9px;
}
.cd-actions .btn.is-soon:hover { background: #fffdf9; filter: none; transform: none; }
.cd-actions .soon-label { font-weight: 800; }
.cd-actions .soon-tag {
    font-size: 11px;
    font-weight: 900;
    color: var(--gold-deep);
    background: var(--gold-soft);
    border: 1px solid rgba(217, 146, 17, .4);
    border-radius: 999px;
    padding: 2px 9px;
}
.cd-note {
    margin: 0;
    padding: 13px 15px;
    font-size: 13px;
    color: var(--text-sub);
    background: #fffdf9;
    border: 1px solid var(--line);
    border-radius: 13px;
}
/* 配送申請の確認画面: 注記が上の住所表・下のボタンと密着するため上下に余白を入れる
   （.cd-note は他画面でも使う共用クラスのため .ship-form 内にスコープ）。 */
.ship-form .cd-note { margin: 16px 0; }

/* 発送期限（自動交換）の案内。放っておくと景品がコインに変わるため、
   通常でも目に留まる濃さにし、残りわずか（3日以下・超過）は警告色で強調する。 */
.cd-deadline {
    margin: 10px 0 0;
    padding: 13px 15px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-main);
    background: #fff8ec;
    border: 1px solid #f0d9b0;
    border-radius: 13px;
}
.cd-deadline strong { font-weight: 700; }
.cd-deadline.is-urgent {
    color: #7a3510;
    background: #fff1e8;
    border-color: #f0b894;
}

/* =========================================================================
   Sprint 7: 配送申請・配送履歴
   FUKUBUKURO POP を踏襲。「当たった景品を、手元へ届ける」高揚感を残しつつ、
   フォームは迷わない素直さで。見出しは Mochiy Pop One、選択は朱赤×金で祝う。
   ========================================================================= */

/* セクション小見出し: 金の小さな丸印 + ポップ書体で福引きの章立て感 */
.ship-subhead {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: var(--text);
    margin: 24px 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ship-subhead::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe6a8, var(--gold) 60%, var(--gold-deep));
    box-shadow: 0 1px 3px rgba(217, 146, 17, .4);
    flex: 0 0 auto;
}

/* 配送先住所 編集画面のリード文。マップピンを添えて「住所登録」の文脈を一目で示す。
   和紙クリームの薄地カードに収め、本文との段差を作る。 */
.addr-lead {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-sub);
    margin: 0 0 18px;
    padding: 12px 14px 12px 12px;
    background: linear-gradient(180deg, var(--gold-soft), #fffdf8);
    border: 1px solid rgba(217, 146, 17, .22);
    border-radius: 14px;
}
.addr-lead-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--accent);
    background: var(--card);
    border: 1px solid rgba(217, 146, 17, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.addr-lead-icon .addr-pin-icon { width: 18px; height: 18px; display: block; }
.addr-lead-text { flex: 1 1 auto; padding-top: 1px; }

/* 配送先住所カード: 入力欄をひとつの「会員票」にまとめ、アプリ全体のカード言語にそろえる。
   .ship-form を継ぐが、住所登録の文脈に合わせてカード化＋必須/任意の二段構成にする。 */
.addr-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 4px 16px 18px;
    box-shadow: var(--shadow-sm);
}
/* カード内では最初の小見出しの上余白を詰める（カード上端と密着しすぎない程度に） */
.addr-card .ship-subhead:first-child { margin-top: 16px; }

/* 任意セクションの小見出し: 必須ブロックと視覚的に切り分ける。
   上に細い区切り線を引き「ここから先は任意」を明示。点は金のまま統一。 */
.addr-subhead-opt {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--line-strong);
}
.addr-opt-note {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-sub);
    background: var(--bg-inner);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 2px 9px;
    margin-left: 2px;
}

/* 任意項目ラベルのチップ: 必須(.req=朱赤)と対になる控えめなニュートラルトーン。
   必須/任意の差が「色」で一瞬で伝わるようにする。 */
.ship-form .field .opt {
    display: inline-block;
    color: var(--text-sub);
    background: var(--bg-inner);
    font-size: 10.5px;
    font-weight: 800;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0 7px;
    margin-left: 6px;
    vertical-align: 1px;
}

/* 保存ボタン領域: カードの外に少し離して置き、固定ボトムナビとの間に余白を確保。
   末尾の補足は控えめなトーンで安心感を添える。 */
.addr-submit {
    margin-top: 18px;
    padding-bottom: 8px;
}
.addr-submit-note {
    margin: 12px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.5;
}

/* ----- フォーム ----- */
.ship-form .field { margin-bottom: 14px; }
.ship-form .field label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-sub);
    margin-bottom: 6px;
}
.ship-form .field .req {
    display: inline-block;
    color: var(--accent-deep);
    background: var(--accent-soft);
    font-size: 10.5px;
    font-weight: 900;
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: 1px;
}
.ship-form .field input {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    border: 1.5px solid var(--line-strong);
    border-radius: 13px;
    background: var(--card);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.ship-form .field input::placeholder { color: var(--text-faint); }
.ship-form .field input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-soft);
}
.ship-form .field input.has-error {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.ship-form .field input.has-error:focus { box-shadow: 0 0 0 4px var(--accent-soft); }

.field-error {
    display: block;
    color: var(--accent-deep);
    font-size: 12.5px;
    font-weight: 800;
    margin: 6px 0 2px;
}

/* 入力ヒント: プレースホルダ「例: …」を補強する一行注記。控えめに、ラベルと入力の間ではなく
   入力の直下に置いて「この欄に何を書くか」を最後に念押しする。 */
.ship-form .field .field-hint {
    display: block;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-faint);
    margin: 5px 2px 0;
}

/* ===== 住所ブロック（市区町村・町域 ＋ 番地・号 を1つの住所として括る） =====
   2欄が縦に並ぶと別項目に見えるため、福袋の口を結ぶリボンに見立てた「背」を左に立てて
   1ブロックだと一目で分かるようにする。番地は自動補完の着地点なので少しだけ強調する。 */
.addr-block {
    position: relative;
    margin: 4px 0 14px;
    padding: 14px 14px 12px 16px;
    background:
        linear-gradient(180deg, var(--gold-soft) 0%, #fffdf8 42%, var(--card) 100%);
    border: 1px solid rgba(217, 146, 17, .26);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* 左の「リボンの背」。金→朱赤の縦グラデで福袋トーンに寄せる。 */
.addr-block::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 55%, var(--accent) 100%);
}
/* ブロック見出しタグ「住所」。リボンに掛けた小さな札。 */
.addr-block-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-heading);
    font-size: 11px;
    color: var(--gold-deep);
    background: var(--card);
    border: 1px solid rgba(217, 146, 17, .32);
    border-radius: 999px;
    padding: 2px 11px 3px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(217, 146, 17, .12);
}
.addr-block-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe6a8, var(--gold) 60%, var(--gold-deep));
}
/* ブロック内の最後の欄は下マージンを詰めてカード内に収める。 */
.addr-block .field:last-child { margin-bottom: 0; }

/* 番地欄: 自動補完後にフォーカスが着地する欄。入力導線を明快にするため、
   ラベルに「つづき」の連結記号を添え、フォーカス時のリングを一段強める。 */
.addr-block .field-banchi {
    position: relative;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(217, 146, 17, .32);
}
/* 上の欄からつながる「⌞」風コネクタ。市区町村→番地の続きであることを示す。 */
.addr-block .field-banchi::before {
    content: "つづき";
    position: absolute;
    top: -8px;
    left: 0;
    font-family: var(--font-heading);
    font-size: 9.5px;
    letter-spacing: .04em;
    color: var(--gold-deep);
    background: #fffdf8;
    padding: 0 6px;
}
/* 番地 input は通常時もほのかに金で縁取り、補完の着地点だと予感させる。 */
.addr-block .field-banchi input {
    border-color: rgba(217, 146, 17, .5);
    background: linear-gradient(180deg, var(--gold-soft), var(--card) 70%);
}
.addr-block .field-banchi input:focus {
    border-color: var(--gold-deep);
    box-shadow: 0 0 0 4px var(--gold-soft), 0 1px 4px rgba(217, 146, 17, .2);
}
/* JS の focus() で着地したとき、一度だけ脈打って「ここに入力」を知らせる。 */
.addr-block .field-banchi input:focus {
    animation: banchi-land .9s ease-out 1;
}
@keyframes banchi-land {
    0%   { box-shadow: 0 0 0 0 rgba(246, 183, 60, .55), 0 1px 4px rgba(217, 146, 17, .2); }
    100% { box-shadow: 0 0 0 4px var(--gold-soft), 0 1px 4px rgba(217, 146, 17, .2); }
}
/* エラー時は朱赤を優先（has-error が金の上書きに勝つように個別指定）。 */
.addr-block .field-banchi input.has-error {
    border-color: var(--accent);
    background: var(--accent-soft);
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .addr-block .field-banchi input:focus { animation: none; }
}

/* 確認・管理詳細の住所行ペアリング: 市区町村→番地を一続きに見せる。 */
.cd-spec-banchi dd,
.detail-row-banchi dd { letter-spacing: .01em; }

/* ===== 郵便番号 → 住所 自動補完（postal-autofill.js が生成） ===== */
/* 郵便番号欄 + 「住所を自動入力」ボタンの横並び。input は伸び、ボタンは付随。 */
.postal-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.postal-row input { flex: 1 1 auto; min-width: 0; }
.postal-autofill-btn {
    flex: 0 0 auto;
    padding: 0 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border: 1.5px solid rgba(var(--accent-deep-rgb), .22);
    border-radius: 13px;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}
.postal-autofill-btn:hover { filter: brightness(.98); }
.postal-autofill-btn:active { filter: brightness(.95); }
.postal-autofill-btn:disabled { opacity: .55; cursor: default; }
/* 注記（検索中／該当なし／失敗）。既存の小注記トーンに合わせた控えめな表示。 */
.postal-note {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin: 6px 0 2px;
    color: var(--text-sub);
}
.postal-note.is-loading { color: var(--text-sub); }
.postal-note.is-error { color: var(--accent-deep); }
/* 上部のまとめエラー: 朱赤の注意トーン + ⚠ 印で視線を集める */
.form-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-soft);
    border: 1.5px solid rgba(var(--accent-deep-rgb), .28);
    color: var(--accent-deep);
    padding: 12px 14px;
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 16px;
}
.form-alert::before { content: "⚠"; font-size: 15px; line-height: 1; }

/* ----- 景品を選ぶ（チェックカード）----- */
.ship-choose {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ship-choose-item {
    position: relative;
    border: 1.5px solid var(--line);
    border-radius: 15px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: border-color .16s, box-shadow .16s, transform .12s;
}
.ship-choose-item:active { transform: scale(.99); }
/* 選択時: 金縁 + 和紙クリームの薄地で「これを送る」を祝福する。
   .is-checked はサーバ再描画時、:has() はクリック直後の即時反映（JS不要）。 */
.ship-choose-item.is-checked,
.ship-choose-item:has(input[type="checkbox"]:checked) {
    border-color: var(--gold);
    background: linear-gradient(180deg, var(--gold-soft), var(--card) 70%);
    box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-md);
}
/* 選択時の右上に金のリボン的チェック印 */
.ship-choose-item.is-checked::after,
.ship-choose-item:has(input[type="checkbox"]:checked)::after {
    content: "✓";
    position: absolute;
    top: -8px;
    right: -7px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(150deg, var(--gold), var(--gold-deep));
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(217, 146, 17, .45);
}
.ship-choose-item label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    cursor: pointer;
}
.ship-choose-item input[type="checkbox"] {
    width: 21px;
    height: 21px;
    accent-color: var(--gold-deep);
    flex: 0 0 auto;
    cursor: pointer;
}
.ship-choose-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ship-choose-meta {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-faint);
}

/* ----- サムネ（選択・確認・履歴で共用）----- */
.ship-thumb {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 11px;
    flex: 0 0 auto;
    background: var(--bg-inner);
    box-shadow: inset 0 0 0 1px rgba(217, 146, 17, .12);
}
.ship-thumb-ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 16px;
    background: #fffdf9;
    border: 1px dashed var(--line-strong);
}
.ship-item-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ----- 確認画面の景品リスト ----- */
.ship-items {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ship-items .ship-item {
    display: flex;
    align-items: center;
    gap: 11px;
}
/* 確認時は枠付きで「これを送る一覧」を確定感のあるカードに */
.ship-items.confirm .ship-item {
    padding: 9px 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: var(--shadow-sm);
}

.ship-form-back { margin-top: 10px; }

/* ----- 配送履歴 ----- */
.ship-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.ship-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 15px 16px 14px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
/* 左端に細い朱赤の帯（伝票感） */
.ship-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(var(--accent), var(--accent-deep));
}
.ship-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.ship-id {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 400;
    color: var(--text);
}
.ship-card-when {
    font-size: 12px;
    color: var(--text-faint);
    margin-bottom: 12px;
}
/* 履歴カード内のアイテム行 */
.ship-card .ship-items { margin-bottom: 0; }
.ship-card-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed var(--line-strong);
    font-size: 12px;
    font-weight: 900;
    color: var(--gold-deep);
}
.ship-card-foot::before { content: "🎁"; font-size: 12px; }

/* =========================================================================
   アカウント（マイページ）
   アカウント情報カード ＋ メニューリスト（一番下にログアウト）。
   FUKUBUKURO POP（朱赤×金・和紙クリーム）を踏襲。最低限のスタイルで designer が磨く前提。
   ========================================================================= */
/* --- アカウント情報カード: 上に朱→金の縁起帯を引き、福引きの「会員札」感を出す --- */
.account-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 247, 224, .9), transparent 55%),
        var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px 16px 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.account-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent) 60%, var(--accent-deep));
}
.account-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 22px;
    color: #fff;
    background: linear-gradient(140deg, var(--accent-bright) 0%, var(--accent) 45%, var(--accent-deep) 100%);
    box-shadow: 0 5px 13px rgba(var(--accent-deep-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .4);
    transform: rotate(-4deg);
}
.account-info { flex: 1 1 auto; min-width: 0; }
.account-name {
    font-weight: 900;
    font-size: 16px;
    color: var(--text);
    margin: 0 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-email {
    font-size: 12px;
    color: var(--text-sub);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 残高: 縁起の金チップにまとめ、コイン硬貨マークを添える */
.account-balance {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: 7px 11px;
    border-radius: 13px;
    background: linear-gradient(180deg, var(--gold-soft), #fff2cf);
    border: 1px solid rgba(217, 146, 17, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.account-balance-label {
    font-size: 10px;
    font-weight: 800;
    color: #9a7016;
    letter-spacing: .02em;
}
.account-balance-amount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 400;
    color: #6b4a05;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.account-balance-coin {
    display: inline-flex;
    width: 16px;
    height: 16px;
    font-size: 16px;
    filter: drop-shadow(0 1px 1px rgba(168, 105, 10, .35));
}

/* --- メニューリスト: 行ごとに線アイコンを台座に乗せ、ナビと同じ世界観で統一 --- */
.account-menu {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.account-menu-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 15px;
    text-decoration: none;
    color: var(--text);
    border-top: 1px solid var(--line);
    transition: background .16s ease;
}
.account-menu-item:first-child { border-top: none; }
.account-menu-item:hover { background: #fffdf8; }
.account-menu-item:active { background: var(--accent-soft); }
/* アイコン台座: 和紙クリーム地 + 細枠。中の線アイコンは朱赤で温度を持たせる。 */
.account-menu-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--accent);
    background: var(--paper-2);
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.account-menu-icon .acct-svg { width: 22px; height: 22px; display: block; }
/* コイン系の行は金トーンに振って役割を色で示す */
.account-menu-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-menu-label { font-weight: 800; font-size: 14.5px; line-height: 1.2; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.account-menu-sub { font-size: 11.5px; color: var(--text-sub); }

/* 配送先住所メニューの登録状況バッジ（登録済み=金トーン / 未登録=控えめ）。
   先頭に状態ドットを置き、色だけでなく形でも「済/未」を一目で伝える。 */
.account-menu-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    letter-spacing: .02em;
    vertical-align: middle;
}
.account-menu-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.account-menu-badge.badge-on {
    color: #8a5a00;
    background: var(--gold-soft);
    border: 1px solid rgba(214, 162, 56, .45);
}
.account-menu-badge.badge-on::before {
    background: radial-gradient(circle at 35% 30%, #ffe6a8, var(--gold) 60%, var(--gold-deep));
    box-shadow: 0 0 0 2px rgba(246, 183, 60, .22);
}
.account-menu-badge.badge-off {
    color: #666;
    background: #efefef;
    border: 1px solid rgba(var(--accent-deep-rgb), .22);
}
.account-menu-badge.badge-off::before {
    background: #999;
}
.account-menu-arrow {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--text-faint);
    transition: transform .16s ease, color .16s ease;
}
.account-menu-arrow svg { width: 18px; height: 18px; display: block; }
.account-menu-item:hover .account-menu-arrow { color: var(--accent); transform: translateX(2px); }

/* ログアウト: 区切りを強めて「危険でない離脱」を朱で明示 */
.account-menu-logout { border-top: 6px solid var(--bg-inner); }
.account-menu-logout .account-menu-label { color: var(--accent-deep); }
.account-menu-logout .account-menu-icon {
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-color: rgba(var(--accent-deep-rgb), .22);
}
.account-menu-logout:hover { background: var(--accent-soft); }

/* --- コイン履歴の下部固定バー: 文脈に沿った金のチャージ CTA --- */
.coin-buy-bar {
    text-align: center;
    /* draw-bar 由来の position:sticky だと履歴が短いとき下端に張り付かず末尾に浮くため、
       常に画面下端へ固定する（draw-bar の背景/罫/影/padding は流用し、位置だけ上書き）。 */
    position: fixed;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100%, var(--phone-width));
    margin: 0;
    z-index: 15;
}
/* ボトムナビがある画面ではナビの上に固定する（draw-bar の負マージンは打ち消す）。 */
.phone.has-nav .coin-buy-bar { bottom: var(--nav-h); margin-bottom: 0; }
/* 固定したチャージバーのぶん、最後の履歴が隠れないよう履歴領域の下に余白を足す。 */
.history-region { padding-bottom: 84px; }
.coin-buy-cta {
    gap: 11px;
    padding: 13px 18px;
    border-radius: 16px;
}
.coin-buy-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    color: var(--accent-deep);
    flex: 0 0 auto;
}
.coin-buy-icon svg { width: 26px; height: 26px; display: block; }
.coin-buy-text { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.coin-buy-main { font-family: var(--font-heading); font-size: 16px; font-weight: 400; }
.coin-buy-sub { font-size: 11px; font-weight: 800; color: #6b4a05; opacity: .85; }

/* 抽選演出: タップ待ち状態の誘導アニメ（自動再生不可のためタップで開始） */
.perf-overlay.is-idle .perf-text { animation: perf-tap-pulse 1.1s ease-in-out infinite; }
.perf-overlay.is-idle .perf-card { animation: perf-tap-bob 1.6s ease-in-out infinite; }
@keyframes perf-tap-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes perf-tap-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) {
    .perf-overlay.is-idle .perf-text,
    .perf-overlay.is-idle .perf-card { animation: none; }
}

/* =========================================================================
   買取確認ボトムシート — ビューポート固定（position:fixed）
   ネイティブ confirm を置換。朱赤×金・和紙クリームの福袋トーンで世界観を統一。
   ※以前は .phone 内 absolute＋JSスクロール補正だったが、.phone が
     スクロールコンテナでなくなった（overflow-x:clip）ため、長いページで
     シートが画面外に出る不具合があった。アクションバーと同じく fixed＋
     PC枠中央クランプにして、スクロール位置に関わらず可視域に固定する。
   ========================================================================= */
.buyback-sheet {
    position: fixed;          /* ビューポート基準。スクロールしても可視域に固定。 */
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);          /* PC でもスマホ枠の中央に重ねる。 */
    width: min(100%, var(--phone-width));  /* PC 枠外へ広がらない。 */
    z-index: 80;              /* perf-overlay(60) より前面。ボトムナビ(20) も覆う。 */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.buyback-sheet[hidden] { display: none; }

/* 背面のうす暗幕。タップで閉じる。フェードのみ。 */
.buyback-sheet-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 100%, rgba(40, 18, 14, .42), rgba(20, 10, 8, .62));
    opacity: 0;
    transition: opacity .26s ease;
    cursor: pointer;
}
.buyback-sheet.is-open .buyback-sheet-scrim { opacity: 1; }

/* 立ち上がるパネル本体（和紙クリーム地）。下から競り上がる。 */
.buyback-sheet-panel {
    position: relative;
    width: 100%;
    max-width: var(--phone-width);
    box-sizing: border-box;
    padding: 30px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(140% 120% at 50% -10%, #fff 0%, var(--bg-inner) 38%, var(--paper-2) 100%);
    border-top: 3px solid var(--accent);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -18px 44px rgba(60, 28, 20, .34), 0 -1px 0 rgba(255, 255, 255, .6) inset;
    transform: translateY(112%);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    text-align: center;
}
@media (min-width: 480px) {
    /* フレームの角丸内に収まるよう、左右下も少しだけ寄せる */
    .buyback-sheet-panel { border-radius: 26px 26px 30px 30px; }
}
.buyback-sheet.is-open .buyback-sheet-panel { transform: translateY(0); }

/* 上端の和紙折り目を思わせる細い金の点線（装飾。意味のあるブランド表現） */
.buyback-sheet-panel::before {
    content: "";
    position: absolute;
    left: 22px; right: 22px; top: 13px;
    height: 0;
    border-top: 1.5px dotted var(--gold-deep);
    opacity: .35;
}

/* つまみ（grip）。下端からの引き出しを示す。 */
.buyback-sheet-grip {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
}

/* 朱印（はんこ）風の丸シール。「買取」を捺したような縁起モチーフ。 */
.buyback-sheet-seal {
    width: 62px;
    height: 62px;
    margin: 4px auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 38% 32%, var(--accent-bright) 0%, var(--accent) 46%, var(--accent-deep) 100%);
    box-shadow:
        0 6px 16px rgba(var(--accent-deep-rgb), .4),
        0 0 0 2px var(--bg-inner),
        0 0 0 3.5px rgba(var(--accent-deep-rgb), .55),
        inset 0 1px 0 rgba(255, 255, 255, .35);
    position: relative;
    animation: buyback-seal-pop .4s cubic-bezier(.2, 1.4, .4, 1) .12s both;
}
.buyback-sheet-seal-text {
    font-family: var(--font-heading);
    font-size: 21px;
    line-height: 1;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(120, 20, 18, .5);
    /* 縦書きで「買取」を二文字。判子らしさを強調。 */
    writing-mode: vertical-rl;
    text-orientation: upright;
    transform: translateX(1px);
}
@keyframes buyback-seal-pop {
    0%   { opacity: 0; transform: scale(.4) rotate(-12deg); }
    100% { opacity: 1; transform: scale(1) rotate(-6deg); }
}

.buyback-sheet-eyebrow {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: var(--gold-deep);
}
.buyback-sheet-item {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 19px;
    line-height: 1.4;
    color: var(--text);
    word-break: break-word;
}
.buyback-sheet-desc {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--text-sub);
    font-weight: 700;
}
.buyback-sheet-coin {
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1;
    color: var(--gold-deep);
    margin-right: 3px;
    vertical-align: -1px;
}
.buyback-sheet-coin-unit { color: var(--text-sub); }

/* 「今後は確認しない」チェック。カスタム朱赤チェックボックス。 */
.buyback-sheet-skip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 auto 18px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid var(--line);
    cursor: pointer;
    user-select: none;
}
.buyback-sheet-skip input { position: absolute; opacity: 0; width: 0; height: 0; }
.buyback-sheet-skip-box {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    border-radius: 7px;
    border: 1.5px solid var(--line-strong);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.buyback-sheet-skip-box svg { opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease; }
.buyback-sheet-skip input:checked + .buyback-sheet-skip-box {
    background: linear-gradient(150deg, var(--accent), var(--accent-deep));
    border-color: var(--accent-deep);
}
.buyback-sheet-skip input:checked + .buyback-sheet-skip-box svg { opacity: 1; transform: scale(1); }
.buyback-sheet-skip input:focus-visible + .buyback-sheet-skip-box {
    box-shadow: 0 0 0 4px var(--accent-soft);
    border-color: var(--accent);
}
.buyback-sheet-skip-label { font-size: 13px; font-weight: 700; color: var(--text-sub); }

.buyback-sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.buyback-sheet-actions .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--gold-soft), 0 8px 20px rgba(217, 146, 17, .38); }
.buyback-sheet-actions .btn-outline:focus-visible { box-shadow: 0 0 0 4px var(--accent-soft); }
.buyback-sheet-actions .btn:disabled { opacity: .6; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    .buyback-sheet-scrim,
    .buyback-sheet-panel { transition: none; }
    .buyback-sheet-seal { animation: none; transform: rotate(-6deg); }
    /* reduce-motion でも金箔きらめきは目立つので止める（シート内のみ） */
    .buyback-sheet .btn-gold::after { animation: none; }
    /* まとめ買取（Sprint 9）: 選択モード・チェック・アクションバーの動きを止める */
    .collection-grid.select-mode .collection-card.is-selectable .collection-check,
    .collection-card.is-checked,
    .collection-action-bar { animation: none !important; }
    .collection-check,
    .collection-check svg { transition: none; }
}

/* =========================================================================
   Sprint 12 — ドロー確認ボトムシート（view.php 専用）
   買取確認シート(.buyback-sheet)と同方式: position:fixed＋PC枠中央クランプ＋
   下から競り上がる。スクロール不要で画面内に収まるコンパクトな確認。
   FUKUBUKURO POP（朱赤×金・和紙クリーム）。最終磨きは designer。
   ========================================================================= */
.draw-sheet {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, var(--phone-width));
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.draw-sheet[hidden] { display: none; }

.draw-sheet-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 100%, rgba(40, 18, 14, .42), rgba(20, 10, 8, .62));
    opacity: 0;
    transition: opacity .26s ease;
    cursor: pointer;
}
.draw-sheet.is-open .draw-sheet-scrim { opacity: 1; }

.draw-sheet-panel {
    position: relative;
    width: 100%;
    max-width: var(--phone-width);
    box-sizing: border-box;
    padding: 26px 22px calc(20px + env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(140% 120% at 50% -10%, #fff 0%, var(--bg-inner) 38%, var(--paper-2) 100%);
    /* 引く前のワクワク＝金の縁取り（買取シートの朱赤帯と対になる）。 */
    border-top: 3px solid var(--gold);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -18px 44px rgba(60, 28, 20, .34), 0 -1px 0 rgba(255, 255, 255, .6) inset;
    transform: translateY(112%);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    text-align: center;
}
@media (min-width: 480px) {
    .draw-sheet-panel { border-radius: 26px 26px 30px 30px; }
}
.draw-sheet.is-open .draw-sheet-panel { transform: translateY(0); }

/* 上端の和紙折り目を思わせる金の点線（買取シートと同じブランド表現）。 */
.draw-sheet-panel::before {
    content: "";
    position: absolute;
    left: 22px; right: 22px; top: 13px;
    height: 0;
    border-top: 1.5px dotted var(--gold-deep);
    opacity: .35;
}

.draw-sheet-grip {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--line-strong);
}

/* 金の朱印（福）。買取シートの朱赤シールと対のモチーフ。引く前の縁起・高揚を金で。 */
.draw-sheet-seal {
    width: 60px;
    height: 60px;
    margin: 6px auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 38% 32%, #ffe7a3 0%, var(--gold) 46%, var(--gold-deep) 100%);
    box-shadow:
        0 6px 16px rgba(217, 146, 17, .42),
        0 0 0 2px var(--bg-inner),
        0 0 0 3.5px rgba(217, 146, 17, .5),
        inset 0 1px 0 rgba(255, 255, 255, .5);
    position: relative;
    animation: draw-seal-pop .42s cubic-bezier(.2, 1.4, .4, 1) .1s both;
}
.draw-sheet-seal-text {
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: 1;
    color: #4a3000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
    transform: translateY(1px);
}
@keyframes draw-seal-pop {
    0%   { opacity: 0; transform: scale(.4) rotate(10deg); }
    100% { opacity: 1; transform: scale(1) rotate(-5deg); }
}

.draw-sheet-eyebrow {
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--gold-deep);
}
.draw-sheet-name {
    margin: 0 0 18px;
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1.4;
    color: var(--text);
    word-break: break-word;
}

/* =========================================================================
   連数セグメント（1回 / 10連 / 100連）— Sprint 15。
   確認シート内で連数を選ぶ。選択中は金で強調、引けない連はグレーで無効化。
   ========================================================================= */
.draw-count-seg {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    align-items: stretch;
}
.draw-count-btn {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 13px 4px 11px;
    border-radius: 14px;
    border: 1.5px solid var(--line-strong);
    background: rgba(255, 255, 255, .72);
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
    transition: background .16s, border-color .16s, box-shadow .16s, transform .08s, color .16s;
    -webkit-appearance: none;
    appearance: none;
}
.draw-count-btn:active { transform: translateY(1px); }
/* 連数が増えるほど高揚を上げる序列。10連は淡い金、100連はさらに華やかな金の地。 */
.draw-count-btn.is-tier-mid:not(.is-disabled):not(.is-active) {
    background: linear-gradient(180deg, rgba(255,247,224,.9) 0%, rgba(255,243,207,.78) 100%);
    border-color: #ecd9a6;
}
.draw-count-btn.is-tier-max:not(.is-disabled):not(.is-active) {
    background: linear-gradient(180deg, rgba(255,243,207,.95) 0%, rgba(255,228,156,.7) 100%);
    border-color: var(--gold);
}
.draw-count-num {
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: 1.05;
    letter-spacing: .5px;
}
.draw-count-btn.is-tier-max .draw-count-num { color: var(--gold-deep); }
.draw-count-cost {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-sub);
    letter-spacing: .2px;
}
.draw-count-cost::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 3px;
    border-radius: 50%;
    vertical-align: -1px;
    background: radial-gradient(circle at 36% 32%, #fff6da 0%, #f4c64e 55%, #b9820f 100%);
    box-shadow: inset 0 0 0 1px rgba(120, 80, 0, .3);
}
.draw-count-btn.is-active {
    border-color: var(--gold-deep);
    background: linear-gradient(180deg, #fff3cf 0%, #ffd97f 100%);
    box-shadow:
        0 6px 16px rgba(217, 146, 17, .34),
        0 0 0 1px rgba(217, 146, 17, .35),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    transform: translateY(-1px);
}
.draw-count-btn.is-active .draw-count-num { color: #6a4400; }
.draw-count-btn.is-active .draw-count-cost { color: var(--gold-deep); }
/* 選択中の連に小さな金のチェックを右上へ。「いまこの連を引く」が一目で分かる。 */
.draw-count-btn.is-active::after {
    content: "✓";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    color: #5a3a00;
    background: radial-gradient(circle at 38% 32%, #fff0bd 0%, var(--gold) 58%, var(--gold-deep) 100%);
    box-shadow: 0 1px 2px rgba(120, 80, 0, .4), inset 0 0 0 1px rgba(255,255,255,.5);
    animation: draw-count-check .26s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes draw-count-check {
    0% { opacity: 0; transform: scale(.3); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .draw-count-btn.is-active::after { animation: none; }
}
.draw-count-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--gold-soft);
}
.draw-count-btn.is-disabled,
.draw-count-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    color: var(--text-faint);
    background: rgba(138, 127, 121, .07);
    border-color: var(--line-strong);
    border-style: dashed;
    box-shadow: none;
    transform: none;
}
.draw-count-btn.is-disabled .draw-count-num,
.draw-count-btn:disabled .draw-count-num { color: var(--text-faint); }
.draw-count-btn.is-disabled .draw-count-cost,
.draw-count-btn:disabled .draw-count-cost { color: var(--text-faint); }
/* 無効連の金貨ドットは色を抜いて「いま選べない」を上品に伝える。 */
.draw-count-btn.is-disabled .draw-count-cost::before,
.draw-count-btn:disabled .draw-count-cost::before {
    background: #d9cfc6;
    box-shadow: inset 0 0 0 1px rgba(120, 80, 0, .12);
}

/* コイン明細の行レイアウト。和紙地のうえに薄い区切り線で 4 行を並べる。 */
.draw-sheet-rows {
    margin: 0 0 14px;
    padding: 4px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .62);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    text-align: left;
}
.draw-sheet-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}
.draw-sheet-row:last-child { border-bottom: 0; }
.draw-sheet-row dt {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-sub);
}
.draw-sheet-row dd {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 18px;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
}
.draw-sheet-row dd.is-cost { color: var(--accent-deep); }
.draw-sheet-row dd.is-negative { color: var(--accent-deep); }
/* 実行後の残高＝合計行。上に濃い区切りを引いて「会計の合計」感を出し、金で強調。 */
.draw-sheet-row.is-total {
    padding-top: 11px;
    border-top: 1.5px solid var(--line-strong);
    border-bottom: 0;
}
.draw-sheet-row.is-total dt { color: var(--text); font-weight: 800; }
.draw-sheet-row.is-total dd { color: var(--gold-deep); font-size: 23px; }
/* 残高不足（負数）は金より朱赤を優先（不足を一目で）。is-total より後＆同特異度で上書き。 */
.draw-sheet-row.is-total dd.is-negative { color: var(--accent-deep); }

.draw-sheet-reason {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--accent-soft);
    border: 1px solid rgba(var(--accent-deep-rgb), .18);
    color: var(--accent-deep);
    font-size: 13.5px;
    font-weight: 800;
}
.draw-sheet-reason[hidden] { display: none; }

.draw-sheet-form { margin: 0; }
.draw-sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.draw-sheet-actions .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--gold-soft), 0 8px 20px rgba(217, 146, 17, .38); }
.draw-sheet-actions .btn-outline:focus-visible { box-shadow: 0 0 0 4px var(--accent-soft); }
.draw-sheet-actions .btn:disabled { opacity: .6; cursor: not-allowed; }

/* 「引く」ボタンにコイン文脈を併記。ラベル＝大、コスト＝小さく下に。金貨アイコン付き。 */
.draw-sheet-confirm-btn {
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
    padding-top: 11px;
    padding-bottom: 11px;
}
.draw-confirm-label {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1px;
}
.draw-confirm-cost {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
    opacity: .82;
}
/* コスト前に金貨の丸を inline で添える（◉ は隠し、CSS で安定した丸を描く）。 */
.draw-confirm-cost::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 4px;
    border-radius: 50%;
    vertical-align: -1px;
    background: radial-gradient(circle at 36% 32%, #fff6da 0%, #f4c64e 55%, #b9820f 100%);
    box-shadow: inset 0 0 0 1px rgba(120, 80, 0, .3);
}
/* 抽選中…等のテキスト差し替え時（JSが textContent を上書き）でも崩れないよう中央寄せを維持。 */
.draw-sheet-confirm-btn:disabled { flex-direction: row; }

/* =========================================================================
   結果画面「もう一度引く」: gold(コイン交換) と ghost の中間。
   ＝うっすら朱赤に色づいた塗り＋細枠。塗りがあるぶん outline より存在感を持ち、
   gold のような華やかさ（光沢・影）は持たないことで序列 gold > もう一度引く を保つ。
   ========================================================================= */
.btn-draw-again {
    margin-top: 2px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    border: 1.5px solid rgba(var(--accent-deep-rgb), .35);
    box-shadow: none;
}
.btn-draw-again:hover {
    background: #ffe4e3;
    border-color: var(--accent);
}
.btn-draw-again:active { transform: translateY(1px); }
.btn-draw-again::before {
    /* 福引きらしい小さな札マーク。控えめに先頭へ。 */
    content: "↻";
    font-size: 15px;
    font-weight: 900;
    margin-right: 2px;
    opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
    .draw-sheet-scrim,
    .draw-sheet-panel { transition: none; }
    .draw-sheet-seal { animation: none; transform: rotate(-5deg); }
    .draw-sheet .btn-gold::after { animation: none; }
}


/* =====================================================================
   コイン交換完了画面（Sprint 14）— .exchange-done
   コンセプト「当たり札」: 福引きの当たり券を引いた高揚感。獲得コインを
   ご褒美として金で大きく見せ、紙吹雪と金印で祝う。冷たい成功緑は使わず、
   朱赤×金の世界観に成功表現を溶け込ませる（増加分は金、残高は深緑のさりげない確証）。
   FUKUBUKURO POP テーマ。.phone 枠内に収める。reduced-motion 対応。
   ===================================================================== */
.exchange-done {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 2px;
}

/* ① ヘッダー: 中央タイトル＋右「閉じる」。左右スペーサーでタイトルを中央固定。 */
.exchange-done-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}
.exchange-done-head-spacer { display: block; }
.exchange-done-title {
    grid-column: 2;
    margin: 0;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: .08em;
    position: relative;
    padding-bottom: 7px;
}
/* タイトル下に朱→金の小さな水引ライン（福引きの装飾）。 */
.exchange-done-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
}
.exchange-done-close {
    grid-column: 3;
    justify-self: end;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-sub);
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.exchange-done-close:hover,
.exchange-done-close:focus-visible {
    color: var(--accent-deep);
    background: var(--accent-soft);
    border-color: #f7d3d3;
    outline: none;
}

/* ====================== ② 交換結果カード ====================== */
.exchange-result-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 13px 16px 14px;
    text-align: center;
    /* 和紙クリームの上品な台地。上方に金のほのかな後光。 */
    background:
        radial-gradient(120% 80% at 50% -10%, var(--gold-soft) 0%, transparent 58%),
        var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
/* 上端の金帯（縁起・お祝い）。 */
.exchange-result-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--gold-deep), #ffe08a 50%, var(--gold-deep));
}

/* --- 金の紙吹雪（CSS のみ・カード上部からふわっと落ちる） --- */
.exchange-confetti {
    position: absolute;
    left: 0; right: 0; top: 5px;
    height: 72px;
    pointer-events: none;
    overflow: hidden;
}
.exchange-confetti span {
    position: absolute;
    top: -14px;
    width: 7px;
    height: 10px;
    border-radius: 1.5px;
    opacity: 0;
    animation: exchangeConfetti 2.6s cubic-bezier(.35, .15, .4, 1) forwards;
}
.exchange-confetti span:nth-child(1)  { left: 8%;  background: var(--gold);       transform: rotate(12deg);  animation-delay: .02s; }
.exchange-confetti span:nth-child(2)  { left: 20%; background: var(--accent);     transform: rotate(-18deg); animation-delay: .18s; }
.exchange-confetti span:nth-child(3)  { left: 32%; background: var(--gold-deep);  transform: rotate(28deg);  animation-delay: .30s; }
.exchange-confetti span:nth-child(4)  { left: 44%; background: #ffe08a;           transform: rotate(-8deg);  animation-delay: .10s; }
.exchange-confetti span:nth-child(5)  { left: 52%; background: var(--accent);     transform: rotate(20deg);  animation-delay: .42s; }
.exchange-confetti span:nth-child(6)  { left: 60%; background: var(--gold);       transform: rotate(-24deg); animation-delay: .06s; }
.exchange-confetti span:nth-child(7)  { left: 70%; background: var(--gold-deep);  transform: rotate(14deg);  animation-delay: .34s; }
.exchange-confetti span:nth-child(8)  { left: 80%; background: #ffd86b;           transform: rotate(-16deg); animation-delay: .22s; }
.exchange-confetti span:nth-child(9)  { left: 88%; background: var(--accent);     transform: rotate(24deg);  animation-delay: .14s; }
.exchange-confetti span:nth-child(10) { left: 95%; background: var(--gold);       transform: rotate(-10deg); animation-delay: .38s; }
@keyframes exchangeConfetti {
    0%   { opacity: 0;   transform: translateY(-14px) rotate(0deg); }
    12%  { opacity: 1; }
    100% { opacity: 0;   transform: translateY(118px) rotate(220deg); }
}

/* --- 金印（当たり札のスタンプ）。ポンと押された演出。 --- */
/* 見出し（1行・コンパクト）。 */
.exchange-result-title {
    margin: 0 0 2px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: .02em;
}

/* --- 獲得コイン（+N コイン獲得）。コンパクトに金で見せる。 --- */
.exchange-result-gain {
    margin: 0 0 3px;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    animation: exchangeGainPop .45s .1s cubic-bezier(.2, 1.4, .4, 1) both;
}
.exchange-result-gain-plus {
    font-family: var(--font-heading);
    font-size: 20px;
    color: var(--gold-deep);
    line-height: 1;
}
.exchange-result-gain-num {
    font-family: var(--font-heading);
    font-size: 30px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(168deg, #ffd35e 0%, var(--gold) 38%, var(--gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 3px rgba(217, 146, 17, .3));
}
.exchange-result-gain-unit {
    font-size: 12px;
    font-weight: 800;
    color: var(--gold-deep);
    margin-left: 2px;
}
@keyframes exchangeGainPop {
    0%   { opacity: 0; transform: scale(.7) translateY(4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- 残高 before→after を1行でコンパクトに。after は深緑で「増えた」確証。 --- */
.exchange-balance {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.exchange-balance-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-sub);
    letter-spacing: .06em;
    align-self: center;
}
.exchange-balance-before {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-faint);
    text-decoration: line-through;
    text-decoration-color: rgba(182, 170, 163, .65);
}
/* 矢印を CSS で描く（→）。金で「進んだ」流れを示す。 */
.exchange-balance-arrow {
    position: relative;
    width: 20px;
    height: 10px;
    flex: 0 0 auto;
    align-self: center;
}
.exchange-balance-arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 15px;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-deep));
    transform: translateY(-50%);
}
.exchange-balance-arrow::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 2.5px solid var(--gold-deep);
    border-right: 2.5px solid var(--gold-deep);
    transform: translateY(-50%) rotate(45deg);
}
.exchange-balance-after {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 400;
    color: #1b8a4f;            /* 深緑: 増加した残高の落ち着いた確証 */
}

/* ====================== ③ 再挑戦カード ====================== */
.exchange-retry-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px 18px 20px;
    box-shadow: var(--shadow-md);
}
.exchange-retry-eyebrow {
    margin: 0 0 2px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .28em;
    color: var(--gold-deep);
    text-indent: .28em;
}
.exchange-retry-title {
    margin: 0 0 15px;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 400;
    color: var(--text);
    letter-spacing: .02em;
}
.exchange-retry-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #f3ece2;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), var(--shadow-sm);
    margin-bottom: 14px;
}
.exchange-retry-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 画像なしのプレースホルダ: べた塗りではなく、お祭り提灯のような朱→金の斜めグラデ＋光沢。 */
.exchange-retry-banner.is-placeholder {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 14px, transparent 14px 28px),
        radial-gradient(120% 140% at 80% -10%, rgba(255, 255, 255, .25), transparent 50%),
        linear-gradient(150deg, var(--accent) 0%, var(--accent-deep) 100%);
}
.exchange-retry-banner-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .92);
    font-family: var(--font-heading);
    font-size: 28px;
    letter-spacing: .16em;
    text-indent: .16em;
    text-shadow: 0 2px 6px rgba(120, 20, 20, .3);
}
.exchange-retry-name {
    margin: 0 0 12px;
    font-size: 15.5px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.4;
}
.exchange-retry-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 11px;
}

/* 1回ガチャが引けない理由（完売／残高不足）。 */
.exchange-retry-reason {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border: 1px solid #f7d3d3;
    border-radius: 11px;
    padding: 9px 12px;
}
.exchange-retry-reason::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    flex: 0 0 auto;
}

/* --- 3ボタン（1回ガチャ＝主役 / 10連・100連＝準備中で無効） --- */
.exchange-gacha-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.exchange-gacha-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.2;
    text-decoration: none;
}
.exchange-gacha-label {
    font-size: inherit;
}
/* 主役の 1回ガチャ: 大きく・厚め。連続利用のテンポを出す。 */
.exchange-gacha-main {
    padding: 16px;
    border-radius: 16px;
}
/* 引けない（残高不足／完売）時は金箔きらめきを止め、無効感を素直に出す。 */
.exchange-gacha-main:disabled::after { display: none; }
.exchange-gacha-main .exchange-gacha-label {
    font-size: 17px;
    letter-spacing: .03em;
}
.exchange-gacha-cost {
    font-size: 11.5px;
    font-weight: 800;
    opacity: .8;
    letter-spacing: .02em;
}
.exchange-gacha-multi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.exchange-gacha-multi .exchange-gacha-form,
.exchange-gacha-multi > .exchange-gacha-btn { min-width: 0; }
.exchange-gacha-multi .exchange-gacha-btn {
    padding: 13px 10px;
    border-radius: 14px;
    overflow: hidden;
}
.exchange-gacha-multi .exchange-gacha-label {
    font-size: 14px;
}
/* 連数の序列を再挑戦カードでも表す。10連=淡い金、100連=一段華やかな金。
   主役（1回ガチャ＝金ベタ塗り）は上回らないよう、塗りは控えめにして枠＋地で差をつける。 */
.exchange-gacha-multi .exchange-gacha-btn.is-tier-mid:not(.is-locked) {
    border-color: #ecd9a6;
    background: linear-gradient(180deg, var(--gold-soft) 0%, rgba(255,243,207,.65) 100%);
    color: var(--gold-deep);
}
.exchange-gacha-multi .exchange-gacha-btn.is-tier-max:not(.is-locked) {
    border-color: var(--gold);
    background: linear-gradient(180deg, #fff6e2 0%, rgba(255,228,156,.72) 100%);
    color: var(--gold-deep);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 10px rgba(217,146,17,.16);
}
.exchange-gacha-multi .exchange-gacha-btn.is-tier-mid:not(.is-locked):hover,
.exchange-gacha-multi .exchange-gacha-btn.is-tier-max:not(.is-locked):hover {
    border-color: var(--gold-deep);
    filter: brightness(1.02);
}
.exchange-gacha-multi .exchange-gacha-cost {
    color: var(--text-sub);
}
.exchange-gacha-multi .exchange-gacha-btn.is-tier-mid:not(.is-locked) .exchange-gacha-cost,
.exchange-gacha-multi .exchange-gacha-btn.is-tier-max:not(.is-locked) .exchange-gacha-cost {
    color: var(--gold-deep);
    opacity: .85;
}
/* 準備中ボタン: 上品にロック。鍵アイコン＋淡い灰トーンで「まだ押せない」を静かに伝える。 */
.exchange-gacha-btn.is-soon {
    color: var(--text-faint);
    border: 1.5px dashed var(--line-strong);
    background: var(--paper-2);
    cursor: not-allowed;
}
.exchange-gacha-btn.is-soon .exchange-gacha-label::before {
    content: "🔒";
    font-size: 11px;
    margin-right: 4px;
    filter: grayscale(1) opacity(.55);
}
.exchange-gacha-soon {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-faint);
    background: rgba(182, 170, 163, .2);
    border-radius: 999px;
    padding: 1px 9px;
    letter-spacing: .08em;
}

/* --- Sprint 15: 連数ガチャは form で POST する。レイアウトは form を透過させてボタンが直接並ぶように。 --- */
.exchange-gacha-form { margin: 0; display: contents; }
/* 引けない連（在庫/残高不足）はグレーで無効化し、理由を小さく添える。
   塗り・金箔を止め、破線枠＋淡い灰地で「いま選べない」を静かに伝える。 */
.exchange-gacha-btn.is-locked {
    color: var(--text-faint) !important;
    border: 1.5px dashed var(--line-strong) !important;
    background: rgba(138, 127, 121, .07) !important;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none !important;
    filter: none !important;
}
.exchange-gacha-btn.is-locked .exchange-gacha-cost { color: var(--text-faint) !important; opacity: 1 !important; }
.exchange-gacha-btn.is-locked .exchange-gacha-label::before {
    content: "🔒";
    font-size: 11px;
    margin-right: 4px;
    filter: grayscale(1) opacity(.55);
}
/* 送信中（連打防止で無効化）: 1回/10連/100連すべてを明確にグレーアウトする。
   金箔・枠線スタイルを打ち消し、押下ボタン/未押下ボタンとも無効と分かる見た目にする。 */
.exchange-gacha-btn.is-submitting {
    color: var(--text-faint) !important;
    background: rgba(138, 127, 121, .12) !important;
    border: 1.5px solid var(--line-strong) !important;
    box-shadow: none !important;
    filter: none !important;
    cursor: progress;
    opacity: .85;
}
.exchange-gacha-btn.is-submitting .exchange-gacha-label,
.exchange-gacha-btn.is-submitting .exchange-gacha-cost {
    color: var(--text-faint) !important;
    -webkit-text-fill-color: var(--text-faint) !important;
}
.exchange-gacha-reason {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    color: var(--accent-deep);
    background: var(--accent-soft);
    letter-spacing: .02em;
    line-height: 1.35;
    max-width: 100%;
}

/* 代表企画なし時のフォールバック。 */
.exchange-retry-card--empty {
    text-align: center;
    padding: 26px 18px;
}
.exchange-retry-empty-note {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-sub);
}

@media (prefers-reduced-motion: reduce) {
    .exchange-done-close { transition: none; }
    .exchange-confetti { display: none; }
    .exchange-result-gain { animation: none; }
}

/* =========================================================================
   アカウント情報編集（Sprint 24）。
   FUKUBUKURO POP — マイページの account-card / 住所画面の addr-card と同じ
   「会員票カード」言語にそろえる。ユーザー名＝赤の口、メール＝金の口で、
   2枚のカードを役割で色分けし、本人確認(認証)を一目で促す。
   ========================================================================= */
.profile-card {
    position: relative;
    background:
        radial-gradient(130% 90% at 100% 0%, rgba(255, 247, 224, .55), transparent 58%),
        var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 6px 16px 18px;
    margin: 14px 0;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
/* カード上端の縁起ストライプ。役割でアクセントを振り分ける（赤=名前 / 金=メール）。 */
.profile-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}
.profile-card--name::before {
    background: linear-gradient(90deg, var(--accent), #ff8a5c 75%, var(--gold));
}
.profile-card--email::before {
    background: linear-gradient(90deg, var(--gold), var(--gold-deep) 60%, #b9790a);
}
.profile-card .ship-subhead:first-child { margin-top: 16px; }
.profile-form { margin-top: 12px; }

/* ----- カード内の入力欄: .ship-form と同じ作法を profile-form にも与える ----- */
.profile-form .field { margin-bottom: 14px; }
.profile-form .field label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-sub);
    margin-bottom: 6px;
}
.profile-form .field .req {
    display: inline-block;
    color: var(--accent-deep);
    background: var(--accent-soft);
    font-size: 10.5px;
    font-weight: 900;
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: 1px;
}
.profile-form .field input {
    width: 100%;
    padding: 13px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    border: 1.5px solid var(--line-strong);
    border-radius: 13px;
    background: #fffdfb;
    box-sizing: border-box;
    transition: border-color .16s, box-shadow .16s, background .16s;
}
.profile-form .field input::placeholder { color: var(--text-faint); }
.profile-form .field input:focus {
    outline: none;
    border-color: var(--gold);
    background: #fff;
    box-shadow: 0 0 0 4px var(--gold-soft);
}
.profile-form .field.has-error input,
.profile-form .field input.has-error {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.profile-form .field.has-error input:focus { box-shadow: 0 0 0 4px var(--accent-soft); }
.profile-form .field .field-hint {
    display: block;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-faint);
    margin: 6px 2px 0;
}
.profile-form .field .field-error {
    display: block;
    color: var(--accent-deep);
    font-size: 12.5px;
    font-weight: 800;
    margin: 6px 0 2px;
}
.profile-form .btn-block { margin-top: 4px; }

/* ----- メールアドレス行（現在値＋認証バッジ） ----- */
.profile-email-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-inner);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin: 10px 0 6px;
}
.profile-card--email.is-verified .profile-email-row {
    background: linear-gradient(180deg, var(--gold-soft), #fffdf6);
    border-color: rgba(217, 146, 17, .28);
}
.profile-email-value {
    font-weight: 800;
    font-size: 14px;
    word-break: break-all;
    color: var(--text);
    line-height: 1.45;
}
.profile-email-row .account-menu-badge { flex: 0 0 auto; }

.profile-hint {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-sub);
    margin: 4px 0 12px;
}

/* ----- 認証 CTA: 未認証ユーザーへの推奨アクション（現アドレスのまま認証）。
   金の盾アイコン＋一言で「本人確認」の文脈を作り、gold ボタンで主行動に。 ----- */
.profile-verify-cta {
    margin-top: 12px;
    padding: 14px 14px 16px;
    border-radius: 16px;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(255, 247, 224, .9), transparent 60%),
        var(--gold-soft);
    border: 1px solid rgba(217, 146, 17, .3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.profile-verify-cta-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 13px;
}
.profile-verify-cta-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--gold-deep);
    background: var(--card);
    border: 1px solid rgba(217, 146, 17, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 6px rgba(217, 146, 17, .14);
}
.profile-verify-cta-icon svg { width: 22px; height: 22px; display: block; }
.profile-verify-cta-text { flex: 1 1 auto; min-width: 0; }
.profile-verify-cta-title {
    margin: 1px 0 3px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    color: #6b4a05;
    line-height: 1.3;
}
.profile-verify-cta-sub {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #8a6a2a;
}
.profile-verify-current { margin: 0; }
.profile-verify-current.profile-form { margin-top: 0; }

/* ----- 変更ブロック: 推奨ではない「別アドレスへ変更」。点線で区切り、控えめな
   outline ボタンに格下げして、認証(主)と変更(従)の優先度を視覚化する。 ----- */
.profile-change-block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--line-strong);
}
.profile-subhead {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--text);
}
.profile-subhead-mark {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--text-faint);
}
.profile-subhead-mark svg { width: 18px; height: 18px; display: block; }

/* ----- コード入力ステップ: 金系の囲みで「コードを送りました」感を演出。
   送信完了バナー＋大きな6桁入力で、いま何をすべきかを迷わせない。 ----- */
.profile-code-step {
    position: relative;
    margin-top: 10px;
    padding: 16px 16px 14px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(255, 224, 138, .35), transparent 60%),
        var(--gold-soft);
    border: 1.5px solid rgba(217, 146, 17, .38);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(217, 146, 17, .12), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.profile-code-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 8px;
    margin-bottom: 11px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid rgba(217, 146, 17, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 400;
    color: #6b4a05;
}
.profile-code-banner-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-deep);
}
.profile-code-banner-icon svg { width: 20px; height: 20px; display: block; }
.profile-code-lead {
    font-size: 12.5px;
    line-height: 1.75;
    color: #6e5223;
    margin: 0 0 14px;
}
.profile-code-lead strong {
    font-weight: 900;
    color: #4f3a13;
    word-break: break-all;
}
.profile-code-step .profile-form { margin-top: 0; }
.profile-code-step .field label {
    color: #7a5a1c;
}
/* 6桁コード欄: 大きく・字間広め・等幅数字。中央寄せで「コードを打つ」体験に集中。 */
.profile-code-input,
.profile-form .field input.profile-code-input {
    font-size: 30px;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-align: center;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    padding: 14px 10px;
    border-radius: 14px;
    border-width: 2px;
    color: var(--gold-deep);
    background: #fffdf6;
}
.profile-form .field input.profile-code-input::placeholder {
    color: rgba(217, 146, 17, .35);
    font-weight: 900;
    letter-spacing: 0.42em;
}
.profile-form .field input.profile-code-input:focus {
    border-color: var(--gold-deep);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(246, 183, 60, .3);
}
.profile-code-resend { margin-top: 14px; }
.profile-code-resend-note {
    font-size: 11.5px;
    line-height: 1.5;
    color: #9a7a3a;
    margin: 0;
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    .profile-code-step { animation: profileCodeIn .35s ease both; }
}
@keyframes profileCodeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----- やり直し導線（手詰まり解消）: 主＝gold（認証する）の下に、困ったとき用の
   セクションを区切り線で明確に分離。「別アドレスに送り直す」＝副(outline)、
   「やめて最初からやり直す」＝最も控えめ(btn-text) の3段の視覚序列を作る。 ----- */
.profile-code-redo {
    position: relative;
    margin-top: 18px;
    padding-top: 18px;
    /* 金地のステップ内に置く、和紙クリームの一段落ち着いた「相談所」ブロック。 */
    padding: 16px 14px 14px;
    border-radius: 13px;
    background: rgba(255, 253, 246, .72);
    border: 1px solid rgba(217, 146, 17, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* 上に細い破線の区切りを引いて、コード入力（主導線）からの分節を明示する。 */
.profile-code-redo::before {
    content: "困ったときは";
    display: block;
    margin: -2px 0 12px;
    padding-bottom: 11px;
    border-bottom: 1.5px dashed rgba(217, 146, 17, .32);
    font-family: var(--font-heading);
    font-size: 11.5px;
    color: #a47b2a;
    letter-spacing: .02em;
}
.profile-code-redo-lead {
    font-size: 12px;
    line-height: 1.7;
    color: #7a5e2c;
    margin: 0 0 14px;
}
.profile-redo-block { margin-bottom: 4px; }
.profile-redo-subhead {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 400;
    color: #6e5223;
    margin: 0 0 9px;
}
.profile-code-redo .field label { color: #7a5a1c; }
.profile-code-redo .btn-outline { margin-top: 2px; }

/* 「やめて最初からやり直す」: 最も控えめな副々アクション。素のグレーUAボタンを排除し、
   背景透明・サブ文字色・細い破線下線で「最後の手段」らしい弱い存在感に。 */
.btn-text {
    background: transparent;
    color: var(--text-sub);
    border: none;
    font-weight: 700;
    font-size: 13px;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(138, 127, 121, .5);
    box-shadow: none;
}
.btn-text:hover {
    color: var(--accent-deep);
    text-decoration-color: var(--accent);
}
.btn-text:active { transform: translateY(1px); }
.btn-text:focus-visible {
    outline: none;
    border-radius: 11px;
    box-shadow: 0 0 0 3px rgba(var(--accent-deep-rgb), .18);
}
/* キャンセルフォームはタップ領域を確保しつつ、redo セクションの末尾に余白で分節。 */
.profile-code-cancel { margin-top: 14px; }
.profile-code-cancel .btn-text.btn-block { padding: 13px 15px; }

/* ----- 固定ボトムナビへの潜り込み回避: コード入力ステップ末尾（=キャンセルボタン）が
   .phone.has-nav のナビバー下に隠れないよう、ステップ自体に十分な下部クリアランスを確保。
   既存の .front-main(nav-h+28px) に加え、囲みブロックの影/角丸ぶんを上乗せする。 ----- */
.phone.has-nav .profile-code-step { margin-bottom: calc(var(--nav-h) + 16px); }

/* =========================================================================
   Sprint 32: 処分区分（disposition）バッジ ＆ 互いに排他ロック
   FUKUBUKURO POP（朱赤×金・和紙）。区分は「ご褒美の格」ではなく「捌き方の制約」なので、
   レアリティの朱赤/金とは別の語彙で見せる:
     ・発送のみ … 配送=藍鼠（伝票・郵送の色）。現物が手元に届く。
     ・交換のみ … 金（コインの色）。コインに替わる。
   both はバッジ無し（既存通り・最も自由なので装飾しない）。
   ========================================================================= */

/* 共通: サムネ内に貼る小さな「制約札」。一角だけ角を立てて荷札/付箋の質感に。 */
.dispo-badge {
    position: absolute;
    z-index: 3;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 7px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.1;
    color: #fff;
    white-space: nowrap;
    /* 札らしく一角だけ角ばらせる（左上を尖らせ、他は丸める）。 */
    border-radius: 4px 10px 10px 10px;
    box-shadow: 0 2px 6px rgba(40, 24, 16, .26), inset 0 1px 0 rgba(255, 255, 255, .28);
}
/* 区分を示す自前ピクト（ストックアイコン不使用・CSS のみ）。 */
.dispo-badge::before {
    content: "";
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/* 発送のみ: 藍鼠グラデ。ピクト=送り箱（ダンボール）。 */
.dispo-ship {
    background: linear-gradient(150deg, #5b7da6 0%, #3a5b86 100%);
}
.dispo-ship::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 12 4l9 4.5v7L12 20l-9-4.5z'/%3E%3Cpath d='M3 8.5 12 13l9-4.5'/%3E%3Cpath d='M12 13v7'/%3E%3C/svg%3E");
}
/* 交換のみ: 金グラデ。ピクト=コイン（円に¥）。文字は読みやすいよう焦茶に。 */
.dispo-exchange {
    background: linear-gradient(150deg, #ffd778 0%, var(--gold) 48%, var(--gold-deep) 100%);
    color: #4a3208;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.dispo-exchange::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a3208' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 8v8M9 9.5l3 2.5 3-2.5M9.5 13h5M9.5 15h5'/%3E%3C/svg%3E");
}

/* コレクション一覧カードのサムネに重ねる（type-badge は左上・dispo は右下で衝突回避）。 */
.collection-thumb .dispo-badge { right: 7px; bottom: 7px; }
/* リスト表示はサムネが小さいので、札を文字なしのチップに圧縮して潰れを防ぐ。 */
.collection-grid.is-list .dispo-badge {
    right: 3px;
    bottom: 3px;
    padding: 3px;
    font-size: 0;
    border-radius: 4px 7px 7px 7px;
}
.collection-grid.is-list .dispo-badge::before { width: 10px; height: 10px; }

/* 結果カードのサムネ: status-badge が左下なので dispo は右下に置いて棲み分け。 */
.result-thumb .dispo-badge { right: 6px; bottom: 6px; }
.result-grid.is-list .result-thumb .dispo-badge {
    padding: 3px;
    font-size: 0;
    border-radius: 4px 7px 7px 7px;
}
.result-grid.is-list .result-thumb .dispo-badge::before { width: 10px; height: 10px; }

/* 詳細(view.php): 見出し直下の区分ラベル。札＋なぜ制限されるかを一行で。 */
.cd-dispo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 0;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.4;
}
.cd-dispo .dispo-badge {
    position: static;
    box-shadow: 0 1px 4px rgba(40, 24, 16, .2), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.cd-dispo--ship {
    color: #34507a;
    background: linear-gradient(180deg, #f3f7fc, #e9f0f8);
    border: 1px solid rgba(58, 91, 134, .2);
}
.cd-dispo--exchange {
    color: var(--gold-deep);
    background: linear-gradient(180deg, #fffaf0, var(--gold-soft));
    border: 1px solid rgba(217, 146, 17, .25);
}

/* -------------------------------------------------------------------------
   互いに排他ロック（is-locked）の磨き込み。
   旧: opacity .4 + grayscale のみ（なぜ選べないか分からず、ただ薄いだけ）。
   新: 彩度を残しつつ封をした見た目に。斜めのハッチ＋小さな鍵の封印で
       「いま選べない（一時的）」を伝える。pointer-events:none は維持。
   ------------------------------------------------------------------------- */
.result-grid .result-card.is-locked,
.collection-grid .collection-card.is-locked {
    opacity: .58;            /* 真っ白に飛ばさず、何の景品かは見えるトーン */
    filter: grayscale(.55) saturate(.65) brightness(.98);
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}
/* 封印の斜めハッチ（薄く・うるさくなりすぎない） */
.result-grid .result-card.is-locked::after,
.collection-grid .collection-card.is-locked::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background:
        repeating-linear-gradient(135deg,
            rgba(70, 50, 40, .07) 0 7px,
            rgba(70, 50, 40, 0) 7px 16px);
    pointer-events: none;
}
/* 鍵の封印（中央上寄り）。CSS のみで素朴に。 */
.result-grid .result-card.is-locked .result-thumb::after,
.collection-grid .collection-card.is-locked .collection-thumb::after {
    content: "";
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        rgba(43, 36, 34, .82)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")
        center / 17px no-repeat;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3), inset 0 0 0 1.5px rgba(255, 255, 255, .25);
}
@media (prefers-reduced-motion: reduce) {
    .result-grid .result-card.is-locked,
    .collection-grid .collection-card.is-locked { transition: none; }
}

/* =========================================================================
   Sprint 33 — 店舗購入の案内（buy 画面）
   FUKUBUKURO POP。プラン(朱赤×金カード)とは別レイヤーの「補足」として、
   暖色の和紙便箋トーンで控えめに。決済CTAと取り違えないよう、ボタンを置かず
   金の点線枠＋暖簾アイコンで「店頭でのお支払い」という別経路だと直感させる。
   active プラン0件のときはこの便箋が画面の主役になるので、単体でも様になる density。
   ========================================================================= */
.store-notice {
    position: relative;
    margin: 18px 0 0;
    padding: 16px 18px 17px;
    border-radius: 16px;
    color: var(--text);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(246, 183, 60, .1), transparent 60%),
        var(--paper-2);
    border: 1px solid rgba(217, 146, 17, .32);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* 便箋らしさ: 上辺に金の点線ステッチを一本走らせる（CTAカードとの差別化）。 */
.store-notice::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 8px;
    height: 0;
    border-top: 1px dashed rgba(217, 146, 17, .4);
}
.store-notice__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 9px;
}
.store-notice__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--gold-deep);
    background:
        linear-gradient(180deg, #fffaf0, var(--gold-soft));
    border: 1px solid rgba(217, 146, 17, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.store-notice__icon svg { display: block; }
.store-notice__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.3;
    color: var(--accent-deep);
}
.store-notice__body {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text-sub);
    /* 改行(nl2br)が読みやすいよう、行間を広めに＋本文だけ少しインデント。 */
    padding-left: 2px;
}

/* 会員ID（店員に伝える番号）を目立つ札で常時表示。 */
.store-notice__id-card {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 12px;
    margin: 0 0 11px;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    border: 1px dashed rgba(217, 146, 17, .55);
}
.store-notice__id-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent-deep);
}
.store-notice__id-value {
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: .02em;
    color: var(--accent);
}
.store-notice__id-hint {
    flex: 1 1 100%;
    font-size: 11.5px;
    color: var(--text-sub);
}
/* 案内文中の {member_id}/{member_name} 置換箇所の強調。 */
.store-notice__ph {
    font-weight: 700;
    color: var(--accent-deep);
    background: rgba(246, 183, 60, .22);
    padding: 0 4px;
    border-radius: 5px;
    white-space: nowrap;
}

/* プラン0件＋案内のみのとき、案内を孤立させず「ここから先は店頭で」と感じさせる。
   直前の空メッセージ(.empty-note)の下端余白を詰めて、便箋に視線が続くように。 */
.empty-note + .store-notice { margin-top: 4px; }

/* ============== マイページ最下部の規約・表記セクション ==============
   フッターは廃止し、マイページ(/account)の最下部に別セクションとして法務リンクを置く。
   FUKUBUKURO POP の派手さは抑え、アプリの設定画面のような落ち着いたリスト行に。 */
.account-legal {
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.account-legal-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--text-faint);
}
.account-legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--paper-2);
}
.account-legal-links li + li { border-top: 1px solid var(--line); }
.account-legal-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 15px;
    color: var(--text-sub);
    font-size: 13.5px;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.account-legal-links a::after {
    content: "›";
    color: var(--text-faint);
    font-size: 16px;
    line-height: 1;
}
.account-legal-links a:hover,
.account-legal-links a:focus-visible {
    background: var(--accent-soft);
    color: var(--accent-deep);
    outline: none;
}
.account-legal-copy {
    margin: 14px 0 0;
    text-align: center;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--text-faint);
}

/* ===================== 法務ページ（Sprint 35）=====================
   特商法・古物商・利用規約・プライバシーの共通ドキュメントレイアウト。
   FUKUBUKURO POP の派手さより「可読性最優先」。十分な行間・見出し階層・読みやすい定型表。
   ブランドの朱赤×金は“一筆だけ”差し、本文は和紙地に落ち着いたインクで読ませる。
   .phone（スマホ枠）内で表が窮屈にならず、長文・改行が読みやすいこと。 */
.legal-doc {
    color: var(--text);
    padding-top: 4px;
}
.legal-doc__head {
    position: relative;
    margin-bottom: 22px;
    padding: 18px 0 16px;
    border-bottom: 1px solid var(--line-strong);
}
/* 見出し上の朱赤×金の細い帯。法務文書でもブランドと地続きにする最小の装飾。 */
.legal-doc__head::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
}
.legal-doc__eyebrow {
    display: inline-block;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-deep);
    font-weight: 700;
}
.legal-doc__title {
    margin: 8px 0 0;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: .01em;
    color: var(--text);
}
.legal-doc__updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--line);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-sub);
}
.legal-doc__updated::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--gold-deep);
}
.legal-doc__body {
    font-size: 14px;
    line-height: 1.85;          /* 可読性のため行間を広めに */
    color: var(--text);
}
/* 利用規約・プライバシーの長文本文（Sprint 36 / Designer 構造化）。
   element('legal_prose') が置換済み安全HTMLを段落・見出しブロックへ再構成する。
   条見出し（第N条 / 数字.）を「立てて」長文に呼吸を与える。
   本文は和紙地に落ち着いたインクで読ませ、見出しだけ朱赤×金を一筆差す。 */
.legal-doc__prose {
    font-size: 13.5px;
    line-height: 1.92;
    color: var(--text);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 通常段落（前文・本文）。 */
.legal-prose__p {
    margin: 0;
    color: var(--text);
}
/* 前文（条より前の導入）。ひとまわり落ち着いた色で“まえがき”感を出す。 */
.legal-prose__p--lead {
    color: var(--text-sub);
    font-size: 13px;
    line-height: 1.95;
}

/* 条セクション（第N条 / 数字.）。見出し＋本文をひとまとまりに。
   セクション間に十分な余白を取り、長文を“章立て”として読ませる。 */
.legal-prose__section {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
/* 前文直後の最初のセクションは罫線を弱めて、導入から本編への段差を自然に。 */
.legal-prose__p--lead + .legal-prose__section {
    margin-top: 22px;
}
.legal-prose__section .legal-prose__p {
    /* 見出しを立てたぶん、本文との間も少し空けて段差をはっきりさせる。 */
    margin-top: 11px;
}

/* 条見出し（第N条（適用）/ 1. 取得する情報）。
   行頭に朱赤×金の細い縦バーを擬似要素で添え、太字＋やや大きめで立てる。
   レターでなく“条文”の硬さを保ちつつ、本文より一段濃いインクで。 */
.legal-prose__heading {
    position: relative;
    margin: 0;
    padding-left: 14px;
    /* 本文(13.5px)との差を広げて見出しを立てる（メリハリ）。 */
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .01em;
    color: var(--text);
}
.legal-prose__heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent), var(--gold));
}

/* 【お問い合わせ】等の括弧見出しブロック。条より軽い小見出し扱い。 */
.legal-prose__section--bracket {
    margin-top: 28px;
}
.legal-prose__bracket-title {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--accent-deep);
}

/* ===== 簡易マークダウン（箇条書き・番号リスト・太字／Sprint 37） =====
   法務本文・特商法/古物商の複数行値で共通利用する。落ち着いた FUKUBUKURO POP のトーン。
   生成タグは <ul class="legal-md__ul"> / <ol class="legal-md__ol"> / <li> / <strong>。 */
.legal-md__ul,
.legal-md__ol {
    margin: 10px 0;
    padding-left: 1.5em;
}
.legal-md__ul {
    list-style: none;
}
.legal-md__ul > li {
    position: relative;
    padding-left: .2em;
}
/* 箇条書きのマーカーは朱赤×金のトーンに合わせた小さな菱形/ドット。 */
.legal-md__ul > li::before {
    content: "";
    position: absolute;
    left: -.9em;
    top: .72em;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent), var(--gold));
}
.legal-md__ol {
    list-style: decimal;
}
.legal-md__ol > li::marker {
    color: var(--accent-deep);
    font-weight: 700;
}
.legal-md__ul > li,
.legal-md__ol > li {
    margin: 4px 0;
    line-height: 1.78;
}
.legal-md__ul > li:first-child,
.legal-md__ol > li:first-child {
    margin-top: 0;
}
.legal-md__ul > li:last-child,
.legal-md__ol > li:last-child {
    margin-bottom: 0;
}
/* 段落（簡易マークダウンの空行区切り）。空行を「フルの空行」にせず控えめな段落マージンで表す。 */
.legal-md__p {
    margin: 0 0 .6em;
}
.legal-md__p:first-child { margin-top: 0; }
.legal-md__p:last-child { margin-bottom: 0; }

/* インライン太字。本文インクより一段濃く、わずかに字間を締めて視認性を上げる。 */
.legal-doc__prose strong,
.legal-table__value strong {
    font-weight: 800;
    color: var(--text);
}
/* 複数行値（特商法/古物商）内のリストは、pre-wrap 下でも余白が暴れないよう微調整。 */
.legal-table__value.is-rich {
    white-space: normal;        /* リスト/太字を含むためブロック整形に委ねる */
}
.legal-table__value.is-rich .legal-md__ul,
.legal-table__value.is-rich .legal-md__ol {
    margin: 8px 0;
}
.legal-table__value.is-rich .legal-md__ul:first-child,
.legal-table__value.is-rich .legal-md__ol:first-child {
    margin-top: 2px;
}

/* 冒頭の前提注記【ご利用前の注意】。控えめな囲みで“注意書き”と一目で分かるように。
   本文より前に置かれるため、border-top の章立てとは独立した別ブロック。 */
.legal-prose__caution {
    display: block;
    margin: 0 0 22px;
    padding: 13px 15px 14px;
    border: 1px solid var(--gold-deep);
    border-radius: 12px;
    background:
        linear-gradient(180deg, var(--gold-soft), var(--card));
    box-shadow: var(--shadow-sm);
}
.legal-prose__caution-label {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--gold-deep);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
}
.legal-prose__caution-text {
    display: block;
    font-size: 12px;
    line-height: 1.78;
    color: #7a5a16;
}
.legal-doc__lead {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--text-sub);
}
.legal-doc__note {
    margin: 24px 0 0;
    padding: 14px 16px 14px 18px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-sub);
}

/* 定型表（項目名：値）。dl をカード状の罫線テーブルで表現。
   スマホ幅では2カラムだが、ごく狭い端末(<360px)では積み重ねに切り替える（下部 media）。 */
.legal-table {
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}
/* スマホ枠(.phone・最大430px)が常態のため、左ラベル列を使わず「見出し＋本文」の
   縦積みにする。th 相当の固定幅列の余白をなくし、項目名を小見出し、値を本文として読ませる。 */
.legal-table__row {
    display: block;
    padding: 13px 15px 14px;
}
.legal-table__row + .legal-table__row {
    border-top: 1px solid var(--line);
}
.legal-table__label {
    display: block;
    margin: 0 0 4px;
    padding: 0;
    background: none;
    border: none;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-sub);
    line-height: 1.5;
    letter-spacing: .04em;
}
.legal-table__value {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text);
    word-break: break-word;
    overflow-wrap: anywhere;
}
.legal-table__value.is-multiline {
    white-space: pre-wrap;       /* textarea 値の改行を保持 */
}
.legal-table__value.is-unset {
    color: var(--text-faint);
}
/* 未設定は赤エラーにせず、控えめなグレーのタグで「空欄」を可視化する。 */
.legal-unset {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--paper-2);
    border: 1px solid var(--line-strong);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-faint);
    line-height: 1.7;
}

/* 「準備中」プレースホルダ（/terms・/privacy の Sprint 35 仮表示）。
   福袋の“仕込み中”をイメージした和紙のカード。生気のないダッシュ枠は避ける。 */
.legal-doc__placeholder {
    position: relative;
    text-align: center;
    padding: 40px 22px 36px;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background:
        radial-gradient(120% 80% at 50% -10%, var(--gold-soft), transparent 60%),
        var(--card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.legal-doc__placeholder::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
}
.legal-doc__placeholder-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}
.legal-doc__placeholder-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.legal-doc__placeholder-title {
    margin: 16px 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}
.legal-doc__placeholder-text {
    margin: 0 auto;
    max-width: 30em;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-sub);
}


/* =========================================================================
   会員パスキー（WebAuthn）UI（フロント）
   ========================================================================= */
.auth-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    color: var(--text-faint, #9b8c7d);
    font-size: 12px;
}
.auth-or::before, .auth-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--line, #efe3d6);
}
/* パスキーボタン（アクセントの枠線・ログインの主ボタンと差別化） */
.btn-passkey {
    border: 1.5px solid var(--accent);
    background: var(--accent-soft, #fff1f0);
    color: var(--accent-deep, #d62b2e);
    font-weight: 800;
    cursor: pointer;
}
.btn-passkey:hover:not(:disabled) { background: #ffe3e1; }
.btn-passkey:disabled { opacity: .5; cursor: not-allowed; }
.passkey-feedback {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.passkey-feedback.is-ok { color: var(--accent-deep, #d62b2e); background: var(--accent-soft, #fff1f0); border: 1px solid var(--accent); }
.passkey-feedback.is-error { color: #b3261e; background: #fff0ef; border: 1px solid #f3b9b6; }
.passkey-card {
    background: #fff;
    border: 1px solid var(--line, #efe3d6);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(60, 35, 18, .06);
}
.passkey-registered-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.passkey-registered-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    font-size: 22px;
    background: var(--accent-soft, #fff1f0);
    border-radius: 12px;
}
.passkey-registered-name { margin: 0; font-weight: 800; font-size: 15px; color: var(--text, #3c2312); }
.passkey-registered-meta { margin: 2px 0 0; font-size: 12px; color: var(--text-soft, #8a7a6a); }

/* =========================================================================
   コイン購入: 「お店の人に伝えてください」案内ポップアップ（決済未実装の間）
   ========================================================================= */
.coin-ask-modal {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}
.coin-ask-modal[hidden] { display: none; }
.coin-ask-scrim {
    position: absolute;
    inset: 0;
    background: rgba(36, 28, 26, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .2s ease;
}
.coin-ask-modal.is-open .coin-ask-scrim { opacity: 1; }
.coin-ask-panel {
    position: relative;
    width: min(92%, 340px);
    background: var(--card);
    border-radius: var(--phone-radius);
    padding: 26px 22px 22px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(36, 28, 26, .35);
    transform: translateY(10px) scale(.98);
    opacity: 0;
    transition: transform .2s cubic-bezier(.2, 1, .3, 1), opacity .2s ease;
}
.coin-ask-modal.is-open .coin-ask-panel { transform: translateY(0) scale(1); opacity: 1; }
.coin-ask-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-faint);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.coin-ask-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 50%;
    color: var(--accent-deep);
    background: rgba(246, 183, 60, .18);
}
.coin-ask-title {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text);
}
.coin-ask-body {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-sub);
}
.coin-ask-id-card {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 10px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--paper-2);
    border: 1px dashed rgba(217, 146, 17, .55);
}
.coin-ask-id-label { font-size: 12px; color: var(--text-sub); font-weight: 700; }
.coin-ask-id-value {
    font-family: var(--font-heading);
    font-size: 26px;
    line-height: 1.05;
    color: var(--accent);
}
.coin-ask-id-hint { flex: 1 1 100%; font-size: 11.5px; color: var(--text-sub); }
@media (prefers-reduced-motion: reduce) {
    .coin-ask-scrim, .coin-ask-panel { transition: none; }
}

/* =========================================================================
   ホーム画面に追加の案内モーダル（初回ログイン以降・スマホのみ・JS制御）
   ========================================================================= */
.home-hint {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
}
.home-hint[hidden] { display: none; }
.home-hint-scrim {
    position: absolute;
    inset: 0;
    background: rgba(36, 28, 26, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .2s ease;
}
.home-hint.is-open .home-hint-scrim { opacity: 1; }
.home-hint-panel {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--card);
    border-radius: 20px;
    padding: 24px 22px 20px;
    text-align: center;
    box-shadow: 0 -8px 40px rgba(36, 28, 26, .35);
    transform: translateY(16px);
    opacity: 0;
    transition: transform .24s cubic-bezier(.2, 1, .3, 1), opacity .2s ease;
}
.home-hint.is-open .home-hint-panel { transform: translateY(0); opacity: 1; }
.home-hint-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-faint);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.home-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 16px;
    color: var(--accent-deep);
    background: rgba(var(--accent-rgb), .12);
}
.home-hint-title {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 18px;
    color: var(--text);
}
.home-hint-lead {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-sub);
}
.home-hint-steps {
    text-align: left;
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.home-hint-os {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-deep);
    letter-spacing: .02em;
}
.home-hint-steps ol {
    margin: 0;
    padding-left: 1.3em;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.home-hint-steps li {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
}
.home-hint-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    margin: 0 1px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--line-strong);
    color: var(--accent-deep);
    font-size: 14px;
}
.home-hint-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.home-hint-never {
    border: none;
    background: transparent;
    color: var(--text-faint);
    font-size: 12.5px;
    padding: 6px 8px;
    cursor: pointer;
    text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
    .home-hint-scrim, .home-hint-panel { transition: none; }
}

/* =========================================================================
   会員登録: 発送先住所ブロック（require_address_on_signup=ON）
   ========================================================================= */
.signup-address {
    margin: 18px 0 6px;
    padding: 16px 14px 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper-2);
}
.signup-address-head {
    margin: 0 0 4px;
    font-weight: 800;
    font-size: 14.5px;
    color: var(--text);
}
.signup-address-head .req {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    padding: 2px 7px;
    border-radius: 999px;
    vertical-align: middle;
}
.signup-address-note {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-sub);
}
.signup-address .opt {
    margin-left: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-sub);
}

/* =========================================================================
   画像拡大ライトボックス（オリパ詳細の目玉景品サムネ等・.js-zoom）
   ========================================================================= */
.ft-thumb.js-zoom { cursor: zoom-in; }
.ft-thumb.js-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.img-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.img-lightbox[hidden] { display: none; }
.img-lightbox-scrim {
    position: absolute;
    inset: 0;
    background: rgba(20, 14, 12, .86);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .2s ease;
    cursor: zoom-out;
}
.img-lightbox.is-open .img-lightbox-scrim { opacity: 1; }
.img-lightbox-body {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transform: scale(.96);
    opacity: 0;
    transition: transform .2s cubic-bezier(.2, 1, .3, 1), opacity .2s ease;
}
.img-lightbox.is-open .img-lightbox-body { transform: scale(1); opacity: 1; }
.img-lightbox-body img {
    max-width: 100%;
    max-height: 72vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    background: var(--card);
}
.img-lightbox-caption {
    margin: 0;
    max-width: 100%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    word-break: break-word;
}
.img-lightbox-caption[hidden] { display: none; }
.img-lightbox-close {
    position: absolute;
    top: -14px;
    right: -10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
/* スライダー: 同じ当たり枠内の前後ナビ（複数枚のときのみ表示）。 */
.img-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: background .15s ease;
}
.img-lightbox-nav:hover { background: rgba(255, 255, 255, .28); }
.img-lightbox-nav:active { background: rgba(255, 255, 255, .36); }
.img-lightbox-nav[hidden] { display: none; }
.img-lightbox-nav--prev { left: 12px; }
.img-lightbox-nav--next { right: 12px; }
/* 現在位置カウンター（n / 総数）。 */
.img-lightbox-counter {
    margin: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
}
.img-lightbox-counter[hidden] { display: none; }
/* スライド切替アニメ（フリック/矢印で方向を出す）。 */
@keyframes lb-slide-right {
    from { transform: translateX(7%); opacity: .35; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes lb-slide-left {
    from { transform: translateX(-7%); opacity: .35; }
    to { transform: translateX(0); opacity: 1; }
}
.img-lightbox-body img.slide-from-right { animation: lb-slide-right .22s ease; }
.img-lightbox-body img.slide-from-left { animation: lb-slide-left .22s ease; }
@media (prefers-reduced-motion: reduce) {
    .img-lightbox-scrim, .img-lightbox-body { transition: none; }
    .img-lightbox-body img.slide-from-right,
    .img-lightbox-body img.slide-from-left { animation: none; }
}

/* =========================================================================
   オリパ詳細: 当たり等級グループ表示（prize_rank 設定時・サムネのみ）
   ========================================================================= */
.prize-rank { margin: 0 0 22px; }
/* 目玉景品の等級見出し（バナー）。
   「メタリックなネームプレート」: 明るい金属地（金/銀/銅）に斜めのシーン光を重ね、
   数字は濃色のエングレーブ風（下=明ハイライト / 上=濃い陰刻）で必ずくっきり読ませる。
   等級が上ほど暖色・高彩度・強い光沢で格上に見せる（金 > 銀 > 銅 > 鈍色）。
   幅60%・中央・角丸5px・枠なし は固定仕様。 */
.prize-rank-title {
    position: relative;
    display: flex;
    align-items: center;          /* 数字と「等」を同じ光学中心に揃え、上下余白を均等に見せる */
    justify-content: center;
    gap: 4px;
    width: 60%;
    box-sizing: border-box;
    margin: 0 auto 12px;
    padding: 9px 14px;            /* 上下対称。下記 num の line-height:1 と center 揃えで実寸も均等化 */
    border: none;
    border-radius: 5px;
    overflow: hidden;            /* 斜めシーン光（::before）をプレート内に収める */
    background: linear-gradient(160deg, #e9e2d6 0%, #cfc6b8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        inset 0 -2px 3px rgba(0, 0, 0, .12),
        0 3px 7px rgba(43, 36, 34, .22);
    font-family: var(--font-heading);
    line-height: 1;
    letter-spacing: .02em;
}
/* 斜めの金属シーン（ハイライトの帯）。各等級で色味を継承。 */
.prize-rank-title::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -10%;
    width: 55%;
    height: 180%;
    transform: rotate(20deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
.prize-rank-num {
    position: relative;
    z-index: 1;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}
.prize-rank-unit {
    position: relative;
    z-index: 1;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    align-self: center;          /* baseline 由来の下寄りズレを解消 */
    transform: translateY(.04em);/* 漢字の視覚中心を数字に合わせる微調整 */
}

/* === 1等：ゴールド（最も明るく・暖かく・強い光沢） === */
.prize-rank-title--t1 {
    color: #6e4a05;
    background:
        linear-gradient(160deg, #fff6d4 0%, #fbdd7e 30%, #f4c23a 55%, #e0a01b 80%, #fbe08a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        inset 0 -2px 4px rgba(140, 92, 4, .35),
        0 4px 10px rgba(216, 146, 17, .4);
}
.prize-rank-title--t1 .prize-rank-num {
    font-size: 38px;
    color: #7a4f02;
    /* 明るい金地に陰刻：下に白ハイライト・上に濃褐色の彫り込み。 */
    text-shadow:
        0 1px 0 rgba(255, 252, 220, .9),
        0 -1px 0 rgba(110, 70, 4, .35),
        0 2px 3px rgba(120, 78, 6, .35);
}
/* 1等の左右の★。::after はシーン光に使うため、左=::before、右=unit の ::after で配置。 */
.prize-rank-title--t1::before {
    content: '★';
    position: relative;
    z-index: 1;
    font-size: 14px;
    color: #b97e0c;
    margin-right: 6px;
    text-shadow: 0 1px 0 rgba(255, 252, 220, .85);
}
.prize-rank-title--t1 .prize-rank-unit::after {
    content: '★';
    position: relative;
    z-index: 1;
    font-size: 14px;
    color: #b97e0c;
    margin-left: 6px;
    text-shadow: 0 1px 0 rgba(255, 252, 220, .85);
}

/* === 2等：シルバー === */
.prize-rank-title--t2 {
    color: #4b525c;
    background:
        linear-gradient(160deg, #ffffff 0%, #e6eaef 30%, #c7ced8 55%, #aab2be 80%, #eef1f5 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -2px 4px rgba(90, 98, 110, .3),
        0 4px 9px rgba(120, 130, 145, .32);
}
.prize-rank-title--t2 .prize-rank-num {
    font-size: 33px;
    color: #5a626d;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .9),
        0 -1px 0 rgba(70, 78, 90, .3),
        0 2px 3px rgba(80, 90, 104, .3);
}

/* === 3等：ブロンズ === */
.prize-rank-title--t3 {
    color: #6e3f1f;
    background:
        linear-gradient(160deg, #f7dcc0 0%, #e0aa78 30%, #cb8a52 55%, #ad6c39 80%, #ecc59c 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 232, .7),
        inset 0 -2px 4px rgba(110, 63, 31, .3),
        0 4px 8px rgba(173, 108, 57, .3);
}
.prize-rank-title--t3 .prize-rank-num {
    font-size: 29px;
    color: #79431f;
    text-shadow:
        0 1px 0 rgba(255, 244, 230, .8),
        0 -1px 0 rgba(95, 53, 26, .3),
        0 2px 3px rgba(110, 63, 31, .3);
}

/* === 4等以降：燻し（控えめなニュートラル金属） === */
.prize-rank-title--t4 {
    color: #4a423d;
    background:
        linear-gradient(160deg, #efe9e2 0%, #d9d0c6 35%, #bfb4a8 70%, #e7e0d8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        inset 0 -2px 3px rgba(74, 66, 61, .2),
        0 3px 7px rgba(120, 110, 102, .25);
}
.prize-rank-title--t4 .prize-rank-num {
    color: #57504a;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .7),
        0 2px 3px rgba(90, 82, 76, .25);
}

/* 等級ごとのカラム数（1等=2 / 2等=3 / 3等以降=4）。 */
.prize-grid { display: grid; gap: 10px; }
.prize-grid--cols2 { grid-template-columns: repeat(2, 1fr); }
.prize-grid--cols3 { grid-template-columns: repeat(3, 1fr); }
.prize-grid--cols4 { grid-template-columns: repeat(4, 1fr); }

/* 半端（列で割った余り）は上部に中央寄せ。サムネ幅はグリッドのセル幅に合わせる（gap 10px）。 */
.prize-row { display: flex; justify-content: center; gap: 10px; }
.prize-row--center { margin-bottom: 10px; }
.prize-row > .prize-thumb { flex: 0 0 auto; }
.prize-row--cols2 > .prize-thumb { width: calc((100% - 10px) / 2); }
.prize-row--cols3 > .prize-thumb { width: calc((100% - 20px) / 3); }
.prize-row--cols4 > .prize-thumb { width: calc((100% - 30px) / 4); }

.prize-thumb {
    position: relative;
    display: block;
    aspect-ratio: 5 / 7;
    border-radius: 10px;
    overflow: hidden;
    background: var(--paper-2);
    box-shadow: var(--shadow-sm);
}
/* 鑑定リボン: サムネ右上に等級(PSA 10 等)を金リボンで表示。既存の金バッジと同トーン。 */
.prize-ribbon {
    position: absolute;
    top: 7px;
    right: 0;
    z-index: 2;
    padding: 3px 7px 3px 8px;
    font-family: var(--font-heading);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .01em;
    color: #4a3208;
    white-space: nowrap;
    background: linear-gradient(150deg, #ffe19a 0%, var(--gold) 50%, var(--gold-deep) 100%);
    border-radius: 4px 0 0 4px;
    box-shadow: 0 2px 6px rgba(40, 24, 16, .3), inset 0 1px 0 rgba(255, 255, 255, .4);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
/* 右下に小さな折り返しを足してリボンらしさを出す。 */
.prize-ribbon::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    border: 4px solid transparent;
    border-top-color: var(--gold-deep);
    border-right-color: var(--gold-deep);
}
/* 数量バッジ（同一アイテムが複数あるとき「×N」）。黒地・白文字でサムネ左下に。 */
.prize-qty {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 2;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    letter-spacing: .02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.prize-thumb.js-zoom { cursor: zoom-in; }
.prize-thumb.js-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prize-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prize-thumb-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 700;
}
/* カードには枠を付けない（見出しの枠で格を出す）。1等だけ少し浮かせて存在感を残す。 */
.prize-rank--1 .prize-thumb { box-shadow: 0 6px 18px rgba(217, 146, 17, .22); }

/* 「発送のみ」の景品が含まれる企画の注意書き（既存の発送のみバッジと同トーン＝藍鼠）。 */
.ship-only-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: -4px 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #eef3f9;
    border: 1px solid #d4e0ee;
    color: #2f4d70;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
}
.ship-only-note .dispo-badge {
    position: static;
    flex: 0 0 auto;
}
.ship-only-note__text { flex: 1 1 auto; }

/* 目玉景品の最下部「その他」（ハズレ枠の内容）。等級プレートとは別のニュートラルな見出し＋本文。 */
.prize-other { margin: 18px 0 0; }
.prize-other-title {
    width: 60%;
    box-sizing: border-box;
    margin: 0 auto 12px;
    padding: 15px 14px;          /* ○等の見出しと同等の高さ感。上下パディングを大きめに */
    border-radius: 5px;
    background: linear-gradient(180deg, #6f6f77, #4c4c53);
    color: #f4f2ef;
    font-family: var(--font-heading);
    font-size: 24px;            /* ○等（数字 26px）とほぼ同じ大きさ */
    font-weight: 800;
    text-align: center;
    letter-spacing: .04em;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.prize-other-body {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.7;
    word-break: break-word;
}

/* =========================================================================
   店頭キオスクモード（Sprint 41）
   - キオスクバー: プレイ中も常時見える「終了する」＋端末名（ビューポート上部固定）。
   - 承認ページ（スマホ側）: 店舗名・端末名の確認と承認ボタン。
   ========================================================================= */

/* キオスクセッション中はバーの高さぶんだけ全体を下げる（.phone と重ねない）。
   バー高（横64px）＋視覚的な余白ぶん確保し、コンテンツがバー直下に張り付かないようにする。 */
.front-body.is-kiosk { padding-top: 80px; }

.kiosk-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 4px;
    background-color: #241c1a;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, 0)),
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0);
    background-size: 100% 100%, 22px 22px;
    box-shadow: 0 6px 18px rgba(20, 8, 5, .35);
}
/* 屋台の天幕リボン（待受画面の紅白幕とおそろいの帯） */
.kiosk-bar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: repeating-linear-gradient(-45deg,
        var(--gold) 0 10px,
        var(--accent) 10px 20px);
}
.kiosk-bar-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
}
.kiosk-bar-badge {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(160deg, var(--gold), var(--gold-deep));
    color: #3d2c07;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.kiosk-bar-device {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, .85);
}
.kiosk-bar-exit-form { margin: 0; flex: 0 0 auto; }
.kiosk-bar-exit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 28px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep));
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), .45), inset 0 -2px 0 rgba(0, 0, 0, .15);
    transition: transform .15s ease, filter .15s ease;
}
.kiosk-bar-exit:hover { filter: brightness(1.07); transform: translateY(-1px); }
.kiosk-bar-exit:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.kiosk-bar-exit:active { transform: translateY(1px); }
.kiosk-bar-warn {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    padding: 8px 16px;
    background: var(--gold-soft);
    color: var(--gold-deep);
    border-bottom: 1px solid var(--gold);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

/* 縦置きキオスクモニター（1080×1920 等）: 立ち見距離でも読めるようバーを一回り大きく。
   横置き（1920×1080）のプレイ画面には影響しない。 */
@media (orientation: portrait) and (min-width: 860px) {
    .front-body.is-kiosk { padding-top: 108px; }
    .kiosk-bar { height: 88px; padding: 0 28px 6px; }
    .kiosk-bar-info { gap: 14px; }
    .kiosk-bar-badge { font-size: 15px; padding: 7px 16px; }
    .kiosk-bar-device { font-size: 18px; }
    .kiosk-bar-exit { min-height: 60px; padding: 14px 40px; font-size: 20px; gap: 10px; }
    .kiosk-bar-exit svg { width: 24px; height: 24px; }
    .kiosk-bar-warn { top: 88px; padding: 12px 16px; font-size: 16px; }
}

/* =========================================================================
   キオスク大画面（フルHDモニター）のプレイ画面スケーリング（Sprint 41 後追い）
   ──────────────────────────────────────────────────────────────────────
   問題: プレイ画面はスマホ枠 .phone（幅 430px）を流用しているため、フルHD縦
   (1080×1920) だと「幅 430px・高さ 1860px 級の細長い枠」になって間延びする。
   方針: キオスクセッション時（body.is-kiosk）かつ大画面のときだけ、.phone 全体を
   zoom で等倍拡大して「店頭サイズのスマホ枠」に見せる。幅を広げると内部（430px
   前提で作り込んだカード・ボトムナビ・演出オーバーレイ）が崩れるが、zoom なら
   フォント・カード・position:absolute の演出オーバーレイまで一緒に拡大され、
   角丸クリップ（--phone-radius）も維持されるため崩れない。
   .phone は @media(min-width:480px) で「固定高さのスクロールコンテナ＋角丸＋影」
   になっており、その枠モデル（sticky なボトムナビ／くじを引くバーが枠下端に固定）
   を保ったまま拡大する。zoom は Android WebView / Chrome 前提なので使用可。
   通常セッション（非キオスク）の front には一切影響しない（body.is-kiosk に閉じる）。
   height は zoom 後の実寸がビューポート内に収まるよう「/zoom」で逆算する。
   ========================================================================= */

/* 横置き（1920×1080）: 高さが 1080px しかないので拡大率は控えめ（1.4倍）。
   実寸高さ = (可視高 − バー約64px − 上下余白) を zoom で割った値に固定する。 */
@media (orientation: landscape) and (min-width: 1400px) and (min-height: 900px) {
    .front-body.is-kiosk .phone {
        zoom: 1.4;
        /* 拡大後にビューポート内へ収める。max/min-height は 480px クエリの値を上書き。 */
        min-height: 0;
        height: calc((100vh - 104px) / 1.4);
        height: calc((100dvh - 104px) / 1.4);
        max-height: calc((100vh - 104px) / 1.4);
        max-height: calc((100dvh - 104px) / 1.4);
        margin: 0 auto;
    }
}

/* 縦置き（1080×1920）: 高さに余裕があるので大きめ（1.7倍）に拡大し、間延びを解消。
   実寸高さ = (可視高 − バー88px − 上下余白) を zoom で割った値に固定する。 */
@media (orientation: portrait) and (min-width: 900px) and (min-height: 1400px) {
    .front-body.is-kiosk .phone {
        zoom: 1.7;
        min-height: 0;
        height: calc((100vh - 150px) / 1.7);
        height: calc((100dvh - 150px) / 1.7);
        max-height: calc((100vh - 150px) / 1.7);
        max-height: calc((100dvh - 150px) / 1.7);
        margin: 0 auto;
    }
}

/* 残高チップ（キオスクではリンクにしない・静的表示） */
.coin-chip--static { cursor: default; }

/* ===== 承認ページ（スマホ側） ===== */
.kiosk-approve { text-align: center; }
.kiosk-approve-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-deep);
    margin-bottom: 4px;
}
.kiosk-approve-icon--done { background: #e9f9ef; color: #1f9d55; }
.kiosk-approve-icon--error { background: var(--gold-soft); color: var(--gold-deep); }
/* ログイン先の端末 = 半券チケット。どの店のどの端末かが一目で分かる主役情報。 */
.kiosk-approve-target {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 16px 0 20px;
    padding: 16px 26px;
    border-radius: 14px;
    background: var(--paper-2);
    border: 2px dashed rgba(var(--accent-deep-rgb), .38);
}
/* 半券のパンチ穴 */
.kiosk-approve-target::before,
.kiosk-approve-target::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-inner);
    border: 2px dashed rgba(var(--accent-deep-rgb), .38);
    transform: translateY(-50%);
}
.kiosk-approve-target::before { left: -10px; }
.kiosk-approve-target::after { right: -10px; }
.kiosk-approve-target-label {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-sub);
    letter-spacing: .08em;
}
.kiosk-approve-target-name {
    font-family: var(--font-heading);
    font-size: 19px;
    color: var(--accent-deep);
    word-break: break-word;
}
.kiosk-approve-note {
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-sub);
    text-align: left;
}

/* ===== キオスクでの結果/コレクション画面の案内 ===== */
.kiosk-restrict-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--gold-soft);
    border: 1px solid var(--gold);
    color: #7a5a10;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}
/* スマホの絵文字ではなく共通のスマホアイコン（擬似要素の SVG マスク） */
.kiosk-restrict-note::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><rect x="7" y="2" width="10" height="20" rx="2.5"/><path d="M11 18.5h2"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><rect x="7" y="2" width="10" height="20" rx="2.5"/><path d="M11 18.5h2"/></svg>') center / contain no-repeat;
}

/* ===== 店頭モニターでログイン（マイページのコード発行画面・Sprint 41） ===== */
.kiosk-issued-card {
    position: relative;
    margin: 6px 0 16px;
    padding: 22px 16px 18px;
    border-radius: 16px;
    background: var(--card);
    border: 2px solid var(--gold);
    box-shadow: var(--shadow-md);
    text-align: center;
    overflow: hidden;
}
/* のし紙風の帯（キオスク待受のQRカードとおそろい） */
.kiosk-issued-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    height: 6px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
}
.kiosk-issued-card--hidden { border-style: dashed; }
.kiosk-issued-card--hidden::before { content: none; }
.kiosk-issued-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--text-sub);
}
.kiosk-issued-code {
    margin: 0 0 10px;
    font-family: var(--font-heading);
    font-size: 44px;
    letter-spacing: .18em;
    color: var(--accent-deep);
    text-shadow: 0 2px 0 rgba(var(--accent-deep-rgb), .12);
}
.kiosk-issued-code.is-expired {
    font-size: 24px;
    color: var(--text-faint);
    letter-spacing: .04em;
    text-shadow: none;
}
.kiosk-issued-timer { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--text); }
.kiosk-issued-timer strong { color: var(--accent-deep); font-size: 18px; }
/* 残り時間バー（カウントダウンと連動して縮む） */
.kiosk-issued-progress {
    height: 8px;
    margin: 0 8px 12px;
    border-radius: 999px;
    background: var(--paper-2);
    overflow: hidden;
}
.kiosk-issued-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--accent));
    transition: width 1s linear;
}

.kiosk-code-help {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.kiosk-code-help-title { margin: 0 0 8px; font-size: 13px; font-weight: 900; color: var(--text); }
.kiosk-code-help-list {
    margin: 0 0 8px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--text);
}

/* ============================================================
   アプリ内カード決済モーダル（Univapay / Sprint 43）
   FUKUBUKURO POP。下から競り上がる「福引きレシート」の会計モーメント。
   お金→コインの変換を一目で。金の残高は当たりのように主役化する。
   ============================================================ */
.card-pay-modal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.card-pay-modal[hidden] { display: none; }
.card-pay-scrim {
    position: absolute;
    inset: 0;
    background: rgba(36, 28, 26, .58);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s ease;
}
.card-pay-modal.is-open .card-pay-scrim { opacity: 1; }
.card-pay-panel {
    position: relative;
    width: 100%;
    max-width: var(--phone-width, 430px);
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(120% 60% at 50% 0%, #fff 0%, var(--bg-inner) 46%, var(--paper-2) 100%);
    border-radius: 24px 24px 0 0;
    border-top: 3px solid var(--gold);
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(36, 28, 26, .34);
    transform: translateY(28px);
    opacity: 0;
    transition: transform .26s cubic-bezier(.2, 1, .3, 1), opacity .22s ease;
}
.card-pay-modal.is-open .card-pay-panel { transform: translateY(0); opacity: 1; }
/* 上部のつまみ（ボトムシート感）。 */
.card-pay-grip {
    display: block;
    width: 42px;
    height: 4px;
    margin: -6px auto 12px;
    border-radius: 999px;
    background: rgba(217, 146, 17, .5);
}
.card-pay-close {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(43, 36, 34, .06);
    color: var(--text-sub);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.card-pay-close:hover { background: var(--accent-soft); color: var(--accent-deep); }

.card-pay-head { text-align: center; margin: 0 0 16px; }
.card-pay-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 4px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border: 1px solid rgba(var(--accent-deep-rgb), .18);
}
.card-pay-eyebrow svg { display: block; }
.card-pay-title {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 400;
    margin: 0;
    color: var(--text);
    line-height: 1.25;
}

/* --- 福引きレシート: お金→コインの会計を明快に。 --- */
.card-pay-summary {
    position: relative;
    margin: 0 0 18px;
    padding: 14px 16px 6px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(120, 70, 55, .09), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.card-pay-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    font-size: 14px;
}
.card-pay-row dt { color: var(--text-sub); margin: 0; font-weight: 700; }
.card-pay-row dd { margin: 0; font-weight: 800; color: var(--text); }
.card-pay-yen { font-family: var(--font-heading); font-weight: 400; font-size: 18px; }
.card-pay-yen .card-pay-cur { font-size: 13px; margin-right: 1px; }
.card-pay-row--grant dd { display: flex; align-items: baseline; gap: 4px; }
.card-pay-row--grant strong {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 20px;
    color: var(--accent-deep);
    line-height: 1;
}
.card-pay-row--grant small { font-size: 11px; font-weight: 800; color: var(--text-sub); }

/* 残高 before→after: 「当たり」のように金色で主役化する。 */
.card-pay-after {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 8px -6px 0;
    padding: 12px 12px 13px;
    border-radius: 13px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .5), transparent 60%),
        linear-gradient(135deg, #fff3cf 0%, var(--gold-soft) 100%);
    border: 1px solid rgba(217, 146, 17, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
/* 上端のミシン目でレシートの切り取り感。 */
.card-pay-after::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: -1px;
    height: 1px;
    background-image: radial-gradient(circle, rgba(217, 146, 17, .5) 1px, transparent 1.5px);
    background-size: 7px 1px;
    background-repeat: repeat-x;
}
.card-pay-after__label { font-size: 12px; font-weight: 800; color: #6b4a05; letter-spacing: .01em; }
.card-pay-after__flow {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: #6b4a05;
}
.card-pay-after__before { font-size: 15px; font-weight: 800; opacity: .75; }
.card-pay-after__arrow { color: var(--gold-deep); align-self: center; }
.card-pay-after__value {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    color: #3a2700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.card-pay-after__unit { font-size: 12px; font-weight: 800; color: #6b4a05; }

/* --- お支払い方法（保存カード / 新規）。ワンタッチの手軽さ。 --- */
.card-pay-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--text-sub);
    margin: 16px 0 9px;
}
.card-pay-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 40px 12px 13px;
    margin-bottom: 9px;
    background: var(--card);
    border: 1.5px solid var(--line-strong);
    border-radius: 14px;
    cursor: pointer;
    font-size: 14px;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.card-pay-option:last-child { margin-bottom: 0; }
/* ネイティブの radio は隠し、右肩のカスタムチェックで表現。 */
.card-pay-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.card-pay-option__body { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.card-pay-option__brand {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 24px;
    border-radius: 6px;
    color: var(--gold-deep);
    background: var(--gold-soft);
    border: 1px solid rgba(217, 146, 17, .4);
    font-size: 16px;
    font-weight: 900;
}
.card-pay-option__label {
    font-weight: 800;
    color: var(--text);
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-pay-option__tag {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border: 1px solid rgba(var(--accent-deep-rgb), .2);
}
.card-pay-option--new .card-pay-option__brand {
    color: var(--text-sub);
    background: var(--paper-2);
    border-style: dashed;
}
.card-pay-option__tick {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    background: #fff;
    transition: border-color .16s ease, background .16s ease;
}
.card-pay-option:has(input:checked) {
    border-color: var(--gold-deep);
    background: linear-gradient(180deg, var(--gold-soft), #fff 80%);
    box-shadow: 0 4px 14px rgba(217, 146, 17, .2);
}
.card-pay-option:has(input:checked) .card-pay-option__tick {
    border-color: var(--gold-deep);
    background:
        var(--gold-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.card-pay-option:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--gold-soft); }

/* --- 新規カード入力（ウィジェット）。保存カード選択肢と同じカード枠で囲み、入力欄を見やすく。 --- */
.card-pay-checkout {
    min-height: 48px;
    padding: 13px;
    background: var(--card);
    border: 1.5px solid var(--line-strong);
    border-radius: 14px;
}
.card-pay-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.6;
    margin: 10px 0 0;
    padding: 9px 11px;
    border-radius: 11px;
    color: var(--text-sub);
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.card-pay-note svg { flex: none; margin-top: 2px; color: var(--gold-deep); }

/* --- エラー: 冷たくなく・不安にさせないトーン + 再試行を促す。 --- */
.card-pay-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 13px;
    color: var(--accent-deep);
    background: var(--accent-soft);
    border: 1px solid rgba(var(--accent-deep-rgb), .28);
}
.card-pay-error[hidden] { display: none; }
.card-pay-error::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: var(--accent-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v5'/%3E%3Cpath d='M12 16.5h.01'/%3E%3C/svg%3E") center / 12px no-repeat;
    border-radius: 50%;
}

.card-pay-submit { margin-top: 18px; }
/* 処理中（JS が disabled + 「処理中…」に変える）。落ち着かせつつ待たせる。 */
.card-pay-submit:disabled {
    background: linear-gradient(160deg, #f4d98f, #d9a94a);
    color: #6b4a05;
    cursor: progress;
    opacity: .92;
}
.card-pay-submit:disabled::after { display: none; }

.card-pay-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 11px 0 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-faint);
}
.card-pay-secure svg { color: #2fa860; }

/* フォームはモーダル内の可視ブロック（ウィジェット・購入ボタンを内包）。
   モーダル自体の開閉で可視性を制御するため、フォームを display:none にはしない。 */
.card-pay-form { display: block; }

@media (prefers-reduced-motion: reduce) {
    .card-pay-scrim, .card-pay-panel { transition: none; }
}

/* ============================================================
   マイページ 保存カード管理（Sprint 43）
   下4桁のみ＝安全に見える「物理カード」表現。削除の分かりやすさ。
   ============================================================ */
.cards-screen { padding-top: 2px; }
.card-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.saved-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* カード「面」: 実カードを思わせるが、下4桁のみで安心。 */
.saved-card__face {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 14px 12px;
    padding: 16px 18px;
    border-radius: 16px;
    color: #fff5df;
    background:
        radial-gradient(130% 120% at 0% 0%, rgba(255, 255, 255, .16), transparent 55%),
        linear-gradient(135deg, #4a2f22 0%, #2b1c15 60%, #1c120d 100%);
    border: 1px solid rgba(246, 183, 60, .35);
    box-shadow: 0 10px 26px rgba(28, 18, 13, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
    overflow: hidden;
}
.saved-card__face::after {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 183, 60, .22), transparent 70%);
    pointer-events: none;
}
.saved-card__brand {
    grid-column: 1;
    grid-row: 1;
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: .06em;
    color: var(--gold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.saved-card__chip {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 30px;
    height: 22px;
    border-radius: 5px;
    background: linear-gradient(135deg, #f6d98c, #d9a94a);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.saved-card__chip::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background:
        linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .18) 55%, transparent 55%),
        linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .18) 55%, transparent 55%);
}
.saved-card__number {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 17px;
    letter-spacing: .04em;
}
.saved-card__dots { color: rgba(255, 245, 223, .6); font-size: 13px; letter-spacing: .12em; }
.saved-card__last4 { color: #fff5df; }
.saved-card__exp {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: end;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(255, 245, 223, .85);
}
.saved-card__exp-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(255, 245, 223, .5);
    text-transform: uppercase;
}
.saved-card__delete {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    color: var(--text-sub);
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.saved-card__delete::before {
    content: "";
    width: 13px;
    height: 13px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M6 6v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M6 6v14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.saved-card__delete:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }

.cards-empty {
    text-align: center;
    padding: 36px 22px;
    border-radius: 18px;
    background: var(--paper-2);
    border: 1px dashed var(--line-strong);
}
.cards-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    border-radius: 50%;
    color: var(--gold-deep);
    background: var(--card);
    box-shadow: inset 0 0 0 1px rgba(217, 146, 17, .3);
}
.cards-empty__title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 15px; color: var(--text); }
.cards-empty__hint { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-sub); }

.cards-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.6;
    margin: 0 2px;
    color: var(--text-sub);
}
.cards-note svg { flex: none; margin-top: 2px; color: var(--gold-deep); }

/* =========================================================================
   Sprint 48: ラストワン賞（🏆）ショーケース＋一覧バッジ
   ユーザー向けフロント（スマホ専用）。目玉景品グリッドとは別枠の特別感を出しつつ、
   フロントの世界観（金＝レアリティ最上位）に馴染ませる。available/owned 両対応。
   ========================================================================= */

/* ----- 詳細: ラストワン賞ショーケース -----
   コンセプト「封緘された特別賞」。最後の1枚を引いた人だけが開ける宝箱として、
   金の後光・箔の走光・封蝋の重みで、通常の目玉景品グリッドとは別格の枠に仕立てる。
   available=これから狙える高揚 / owned=誰かが引き当てた余韻、の2状態を描き分ける。 */
.lastone-showcase {
    position: relative;
    margin: 24px 0 6px;
    padding: 16px 16px 15px;
    border-radius: 20px;
    border: 1.5px solid transparent;
    /* 二重背景トリック: 内側の和紙クリーム地 + 外周に金箔グラデの縁取り。 */
    background:
        radial-gradient(125% 120% at 84% -12%, #fffdf6 0, #fff8e9 42%, #fff5df 100%) padding-box,
        linear-gradient(135deg, #ffe490, var(--gold) 30%, var(--gold-deep) 60%, #ffe490 100%) border-box;
    box-shadow:
        0 12px 30px rgba(217, 146, 17, .2),
        0 2px 8px rgba(217, 146, 17, .12),
        inset 0 0 0 1px rgba(255, 255, 255, .7);
    overflow: hidden;
    isolation: isolate;
}
/* 見出しの奥から差す金の後光（斜め上・右）。available だけ淡く脈打つ。 */
.lastone-showcase::before {
    content: "";
    position: absolute;
    top: -46px;
    left: 8px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 110, .55) 0, rgba(255, 214, 110, 0) 68%);
    z-index: -1;
    animation: lastoneHalo 3.4s ease-in-out infinite;
}
/* 箔の走光: カード表面を斜めに横切る細いハイライト（ゆっくり一往復）。 */
.lastone-showcase::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .55) 46%, rgba(255, 246, 214, .3) 52%, transparent 66%);
    background-size: 240% 100%;
    background-position: 130% 0;
    animation: lastoneSheen 5.5s ease-in-out 1.2s infinite;
}
@keyframes lastoneHalo {
    0%, 100% { opacity: .75; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes lastoneSheen {
    0%, 62%, 100% { background-position: 130% 0; }
    82%           { background-position: -30% 0; }
}
.lastone-showcase__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}
.lastone-showcase__crown {
    font-size: 21px;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(217, 146, 17, .5));
    animation: lastoneCrown 3.4s ease-in-out infinite;
    transform-origin: 50% 90%;
}
@keyframes lastoneCrown {
    0%, 88%, 100% { transform: rotate(0); }
    92%           { transform: rotate(-8deg); }
    96%           { transform: rotate(6deg); }
}
.lastone-showcase__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--gold-deep);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* 見出し脇の「ラストワン＝1点限り」を伝える小さな注記リボン。 */
.lastone-showcase__title::after {
    content: "1点限定";
    margin-left: 8px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--gold-deep);
    background: rgba(255, 224, 122, .5);
    border: 1px solid rgba(217, 146, 17, .45);
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: middle;
    white-space: nowrap;
}
.lastone-showcase__state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    color: #7a5606;
    background: linear-gradient(180deg, #fff5d8, #ffe8ad);
    border: 1px solid rgba(217, 146, 17, .55);
    border-radius: 999px;
    padding: 3px 10px 3px 8px;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.lastone-showcase__state::before {
    content: "✓";
    font-size: 10px;
    font-weight: 900;
    color: var(--gold-deep);
}
.lastone-showcase__body {
    display: flex;
    align-items: center;
    gap: 14px;
}
.lastone-showcase__thumb {
    position: relative;
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(155deg, #fff3d6, #ffe4a4);
    box-shadow:
        0 6px 16px rgba(217, 146, 17, .34),
        inset 0 0 0 1.5px rgba(217, 146, 17, .3),
        inset 0 0 0 3px rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s cubic-bezier(.2, .8, .3, 1);
}
.lastone-showcase__thumb.js-zoom:hover { transform: translateY(-2px) scale(1.02); }
.lastone-showcase__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lastone-showcase__noimg {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .08em;
    color: var(--gold-deep);
    opacity: .75;
}
.lastone-showcase__thumb.js-zoom { cursor: zoom-in; }
.lastone-showcase__thumb.js-zoom:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.lastone-showcase__info { flex: 1; min-width: 0; }
.lastone-showcase__name {
    margin: 0 0 7px;
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.lastone-showcase__coin {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 900;
    color: var(--gold-deep);
    background: rgba(255, 236, 179, .5);
    border-radius: 999px;
    padding: 3px 11px 3px 5px;
}
.lastone-showcase__coin::before {
    content: "";
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe89a, var(--gold) 68%);
    box-shadow: inset 0 0 0 1.5px var(--gold-deep), 0 1px 2px rgba(217, 146, 17, .4);
    flex: 0 0 auto;
}
.lastone-showcase__coin-n { font-size: 17px; font-variant-numeric: tabular-nums; }
.lastone-showcase__coin-unit { font-size: 11.5px; font-weight: 800; }
/* 鑑定グレードバッジ（Sprint 53）: PSA10 等をそのまま出す小さめピル。
   濃色地＋金縁で遠目でも読める。コインの代わりにラストワン情報欄へ置く。
   未設定なら PHP 側でこの要素自体を出さない。designer が後で磨けるよう素直な作り。 */
.grade-badge {
    display: inline-block;
    margin: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2a1a06, #140c02);
    border: 1.5px solid var(--gold, #ffd23f);
    color: var(--gold, #ffe89a);
    font-weight: 900;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .04em;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 0 6px rgba(255, 210, 63, .18);
}
.lastone-showcase__note {
    margin: 13px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 247, 224, .7);
    border: 1px dashed rgba(217, 146, 17, .4);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.55;
    color: #8a6a2e;
}
.lastone-showcase__note::before {
    content: "🎯";
    margin-right: 6px;
    font-size: 12px;
}
/* owned（完売後・獲得済み）はトーンを鎮め「引き当てられた後の余韻」を出す。
   後光・箔の走光を止め、彩度を落として静かな金にする。 */
.lastone-showcase.is-owned {
    background:
        radial-gradient(125% 120% at 84% -12%, #fdfbf5 0, #f8f2e6 100%) padding-box,
        linear-gradient(135deg, #e7d3a4, #cbb279 60%, #e7d3a4 100%) border-box;
    box-shadow: 0 8px 20px rgba(120, 96, 48, .14), inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.lastone-showcase.is-owned::before,
.lastone-showcase.is-owned::after { display: none; }
.lastone-showcase.is-owned .lastone-showcase__crown { filter: grayscale(.35) drop-shadow(0 1px 2px rgba(120, 96, 48, .3)); animation: none; }
.lastone-showcase.is-owned .lastone-showcase__title { color: #8a7146; }
.lastone-showcase.is-owned .lastone-showcase__thumb { filter: saturate(.7) brightness(.98); }
.lastone-showcase.is-owned .lastone-showcase__note { color: #7d6c4e; }

/* ===== 抽選結果画面: 🏆 ラストワン賞 獲得！ 特別タイル（Sprint 54） =====
   最後の1口を引き当てた本人の「引いた瞬間」にだけ出る獲得バナー。オリパ詳細の
   ラストワンショーケース（.lastone-showcase）と同じ金箔の世界観を土台にしつつ、
   こちらは “獲得＝トロフィー開帳” の高揚を一段強く演出する:
     ・王冠が跳ねて着地（pop → idle sway）
     ・背後から金の後光＋放射
     ・箔の走光が入場時に一度大きく走る
     ・控えめな紙吹雪がひとしきり降る
     ・見出し／賞の内容／注記が時間差で立ち上がる
   通常結果カード（朱赤基調）と混ざらないよう、賞タイルは徹底して金一色に寄せる。
   演出は全て prefers-reduced-motion で無効化し、静止した上質な金箔タイルとして成立させる。 */
.lastone-win {
    position: relative;
    margin: 0 0 20px;
    padding: 17px 17px 15px;
    border-radius: 20px;
    text-align: left;
    border: 1.5px solid transparent;
    /* 二重背景トリック: 内側の和紙クリーム地 + 外周に金箔グラデの縁取り（showcase と統一）。 */
    background:
        radial-gradient(128% 122% at 82% -14%, #fffefa 0, #fff7e4 44%, #ffefcf 100%) padding-box,
        linear-gradient(135deg, #ffe9a0, var(--gold, #f6b73c) 26%, var(--gold-deep, #d99211) 54%, #b9760a 72%, #ffe9a0 100%) border-box;
    box-shadow:
        0 16px 36px rgba(191, 128, 12, .26),
        0 3px 10px rgba(191, 128, 12, .14),
        inset 0 0 0 1px rgba(255, 255, 255, .72),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    overflow: hidden;
    isolation: isolate;
    animation: lastoneWinIn .62s cubic-bezier(.16, 1.02, .29, 1) both;
}
@keyframes lastoneWinIn {
    0%   { opacity: 0; transform: translateY(14px) scale(.955); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* 背後の後光＋放射。入場時に一度ぶわっと広がり、その後は淡く脈打つ。
   conic の細い金線で “おめでとう” の放射感を出しつつ、radial の光でにじませる。 */
.lastone-win::before {
    content: "";
    position: absolute;
    top: -70px;
    left: -18px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    z-index: -2;
    background:
        conic-gradient(from -18deg at 50% 50%,
            rgba(255, 214, 110, 0) 0deg, rgba(255, 210, 96, .5) 8deg, rgba(255, 214, 110, 0) 16deg,
            rgba(255, 214, 110, 0) 30deg, rgba(255, 210, 96, .42) 38deg, rgba(255, 214, 110, 0) 46deg,
            rgba(255, 214, 110, 0) 60deg, rgba(255, 210, 96, .5) 68deg, rgba(255, 214, 110, 0) 76deg,
            rgba(255, 214, 110, 0) 90deg, rgba(255, 210, 96, .42) 98deg, rgba(255, 214, 110, 0) 106deg,
            rgba(255, 214, 110, 0) 120deg, rgba(255, 210, 96, .5) 128deg, rgba(255, 214, 110, 0) 136deg,
            rgba(255, 214, 110, 0) 360deg),
        radial-gradient(circle, rgba(255, 219, 128, .6) 0, rgba(255, 219, 128, 0) 66%);
    animation: lastoneWinBurst 1s cubic-bezier(.1, .8, .3, 1) both, lastoneWinHalo 3.6s ease-in-out 1s infinite;
}
@keyframes lastoneWinBurst {
    0%   { opacity: 0; transform: scale(.5) rotate(-24deg); }
    55%  { opacity: 1; transform: scale(1.06) rotate(4deg); }
    100% { opacity: .85; transform: scale(1) rotate(0); }
}
@keyframes lastoneWinHalo {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
}
/* 箔の走光: 表面を斜めに横切る白いハイライト。入場直後に一度大きく走らせる。 */
.lastone-win::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(102deg, transparent 30%, rgba(255, 255, 255, .62) 46%, rgba(255, 247, 218, .32) 53%, transparent 68%);
    background-size: 240% 100%;
    background-position: 130% 0;
    animation: lastoneWinSheen 4.6s ease-in-out .5s infinite;
}
@keyframes lastoneWinSheen {
    0%       { background-position: 130% 0; }
    26%      { background-position: -34% 0; }
    52%, 100% { background-position: -34% 0; }
}
.lastone-win__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
    animation: lastoneWinRise .5s cubic-bezier(.2, .8, .25, 1) .08s both;
}
/* 控えめな紙吹雪: 単一擬似要素に box-shadow で複数の紙片を持たせ、上から一度だけ降らせる。
   マークアップを増やさずに “ぱらぱら” を足す。金・朱の縁起色のみで安っぽくしない。 */
.lastone-win__head::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--gold, #f6b73c);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    box-shadow:
        22px -2px 0 -1px var(--gold-deep, #d99211),
        62px 1px 0 0 var(--accent, #ff4d4f),
        104px -3px 0 -1px var(--gold, #f6b73c),
        150px 0 0 0 #ffd76a,
        196px -2px 0 -1px var(--accent-deep, #d62b2e),
        238px 1px 0 0 var(--gold-deep, #d99211),
        282px -3px 0 -1px #ffd76a;
    animation: lastoneWinConfetti 1.15s cubic-bezier(.4, .1, .7, 1) .12s 1 forwards;
}
@keyframes lastoneWinConfetti {
    0%   { opacity: 0; transform: translateY(-6px) rotate(0); }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(64px) rotate(150deg); }
}
.lastone-win__crown {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 3px 4px rgba(191, 128, 12, .55));
    transform-origin: 50% 92%;
    animation: lastoneWinCrownPop .7s cubic-bezier(.15, 1.3, .4, 1) .1s both, lastoneWinCrownSway 3.6s ease-in-out 1.1s infinite;
}
@keyframes lastoneWinCrownPop {
    0%   { opacity: 0; transform: translateY(-8px) scale(.4) rotate(-14deg); }
    55%  { opacity: 1; transform: translateY(0) scale(1.18) rotate(6deg); }
    75%  { transform: scale(.94) rotate(-3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes lastoneWinCrownSway {
    0%, 86%, 100% { transform: rotate(0); }
    90%           { transform: rotate(-9deg); }
    94%           { transform: rotate(7deg); }
}
.lastone-win__headtext { min-width: 0; }
.lastone-win__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .2em;
    text-indent: .2em;
    color: var(--gold-deep, #d99211);
}
/* eyebrow の前後に金のヘアラインを添えて “刻印” 感を出す。 */
.lastone-win__eyebrow::after {
    content: "";
    width: 22px;
    height: 1.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-deep, #d99211), rgba(217, 146, 17, 0));
}
.lastone-win__title {
    margin: 3px 0 0;
    font-family: var(--font-heading, inherit);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .045em;
    line-height: 1.12;
    color: #7a4a06;
    background: linear-gradient(176deg, #b9770c 0%, #6d4405 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35));
}
.lastone-win__body {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    animation: lastoneWinRise .5s cubic-bezier(.2, .8, .25, 1) .16s both;
}
.lastone-win__thumb {
    position: relative;
    width: 92px;
    height: 92px;
    flex: 0 0 auto;
    border-radius: 17px;
    overflow: hidden;
    background: linear-gradient(155deg, #fff3d6, #ffe4a4);
    box-shadow:
        0 8px 18px rgba(191, 128, 12, .34),
        inset 0 0 0 1.5px rgba(217, 146, 17, .34),
        inset 0 0 0 3.5px rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* サムネ上辺のガラス反射で “飾られた1枚” の質感を足す。 */
.lastone-win__thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(158deg, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, 0) 34%);
    z-index: 1;
}
.lastone-win__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lastone-win__noimg {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .1em;
    color: var(--gold-deep, #d99211);
    opacity: .72;
}
.lastone-win__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.lastone-win__name {
    margin: 0;
    font-size: 15.5px;
    font-weight: 900;
    line-height: 1.34;
    color: #3a2a08;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* 交換コインは showcase と同じメダリオン付きピルで読みやすく（金貨の起き上がり）。 */
.lastone-win__coin {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 800;
    color: #8a6a2e;
    background: rgba(255, 234, 173, .62);
    border: 1px solid rgba(217, 146, 17, .3);
    border-radius: 999px;
    padding: 3px 12px 3px 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    max-width: 100%;
}
.lastone-win__coin::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe89a, var(--gold, #f6b73c) 66%);
    box-shadow: inset 0 0 0 1.5px var(--gold-deep, #d99211), 0 1px 2px rgba(191, 128, 12, .45);
}
.lastone-win__coin strong {
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: var(--gold-deep, #d99211);
    letter-spacing: -.01em;
}
/* グレードバッジ（.grade-badge 済み）はコインと横並びにならず情報行として据わる。 */
.lastone-win__grade { align-self: flex-start; }
.lastone-win__note {
    position: relative;
    margin: 14px 0 0;
    padding: 10px 13px 10px 34px;
    border-radius: 13px;
    background: rgba(255, 247, 224, .74);
    border: 1px dashed rgba(217, 146, 17, .42);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    color: #8a6a2e;
    animation: lastoneWinRise .5s cubic-bezier(.2, .8, .25, 1) .24s both;
}
.lastone-win__note::before {
    content: "🏆";
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(191, 128, 12, .4));
}
@keyframes lastoneWinRise {
    0%   { opacity: 0; transform: translateY(7px); }
    100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .lastone-win,
    .lastone-win__head,
    .lastone-win__body,
    .lastone-win__note { animation: none; }
    .lastone-win::before {
        animation: none;
        opacity: .85;
        transform: none;
    }
    .lastone-win::after { animation: none; background-position: -34% 0; }
    .lastone-win__head::before { animation: none; opacity: 0; }
    .lastone-win__crown { animation: none; }
}

/* ----- 一覧: ラストワン賞ありバッジ（サムネ右上・小さな箔章） -----
   ⚠ .oripa-card .thumb span（No Image プレースホルダ）が flex-direction:column ＋ ::before の★ を
   全 span に当てるため、バッジではそれを明示的に打ち消す（列組み・星漏れ・opacity低下の防止）。 */
.oripa-card .thumb span.lastone-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 4;                     /* 完売 veil(z2)/stamp(z3) より前面で常に読める */
    display: inline-flex;
    flex-direction: row;            /* ← 列組みの打ち消し（親 span 規則の上書き） */
    align-items: center;
    gap: 4px;
    width: auto;
    padding: 4px 9px 4px 7px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1;
    color: #6b4a06;
    opacity: 1;                     /* ← 親 span の opacity:.72 打ち消し */
    background: linear-gradient(150deg, #fff0b8, #ffd869 55%, var(--gold) 100%);
    border: 1px solid rgba(217, 146, 17, .65);
    box-shadow:
        0 2px 7px rgba(217, 146, 17, .4),
        inset 0 1px 0 rgba(255, 255, 255, .7);
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
/* 親 span 規則（.oripa-card .thumb span）の ::before（★ 50px）・列組み・opacity 低下は、
   バッジ本体だけでなく内側の __ico span にも当たる。両方まとめて打ち消す。 */
.oripa-card .thumb span.lastone-badge::before,
.oripa-card .thumb span.lastone-badge .lastone-badge__ico::before { content: none; }
.oripa-card .thumb span.lastone-badge .lastone-badge__ico {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0;
    opacity: 1;
    color: inherit;
    filter: drop-shadow(0 1px 1px rgba(217, 146, 17, .45));
}
/* 完売カードでは箔章をわずかに明るく浮かせ、暗転 veil の上でも埋もれないようにする。 */
.oripa-card.is-soldout .thumb span.lastone-badge {
    box-shadow:
        0 2px 9px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}
/* 予告カードは左上に斜めリボン、ラストワン章は右上。互いに重ならない。 */

@media (prefers-reduced-motion: reduce) {
    .lastone-showcase { transition: none; }
    .lastone-showcase::before,
    .lastone-showcase::after,
    .lastone-showcase__crown { animation: none; }
    .lastone-showcase__thumb { transition: none; }
}