/* ====================================================
   fortune.css — ページ専用スタイル (Light Pastel Theme)
==================================================== */

/* ── 背景：body は白、薄紫は #fortune-page 内だけに閉じ込める ── */
body#lower {
    background-color: var(--clr-white);
}

/* ── フロート型ヘッダーとの統合
   占いページは没入感を優先。パンくずは省き、淡い空背景をピル下まで上げる。
   ヘッダーの白いカプセル本体（.site-header の半透明ピル）は据え置き。 */
body.is-fortune .breadcrumb {
    display: none;
}
body.is-fortune #fortune-page {
    padding-top: calc(var(--header-h) + 24px);
}
@media (max-width: 767px) {
    body.is-fortune #fortune-page { padding-top: 0; }
}

#fortune-page {
    position: relative;
    overflow: hidden;
    background-color: var(--color-accent-blue-soft);
    background-image: url('../img/bg.webp');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

/* ── 波区切り ────────────────────────────── */
.fortune-wave-divider {
    position: relative;
    height: 80px;
    width: 100%;
    margin-top: -80px;
    z-index: 2;
    pointer-events: none;
}
.fortune-wave-divider::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath d='M0,56 C240,74 480,74 720,56 C960,38 1200,38 1440,56 L1440,80 L0,80 Z' fill='rgba(183%2C166%2C230%2C0.18)'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1440px 80px;
    animation: wave-tile 18s linear infinite;
    animation-delay: -7s;
}
.fortune-wave-divider::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath d='M0,52 C240,26 480,26 720,52 C960,76 1200,76 1440,52 L1440,80 L0,80 Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1440px 80px;
    animation: wave-tile 11s linear infinite;
}

/* ── 白背景エリア（結果以降） ──────────────── */
.fortune-lower-section {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 1.25rem var(--sp-lg);
    text-align: center;
    min-height: 40px; /* 診断前でも波直下の白背景が存在するよう確保 */
}
/* 占い済みバナー：常に非表示 */
#already-done-note { display: none !important; }

/* 戻るボタンエリアも白に */
.lower-back-wrap {
    background: var(--clr-white);
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--sp-md);
    padding-bottom: var(--sp-md);
}

/* ── 魔法陣ラインアート（背景） ────────────── */
.magic-circle-bg {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    width: max(1000px, 130vw);
    height: max(1000px, 130vw);
    opacity: 0.28;
    pointer-events: none;
    z-index: 0;
}
.mc-bg-l1 { transform-origin: 300px 300px; animation: mcBgCW  150s linear infinite; will-change: transform; }
.mc-bg-l2 { transform-origin: 300px 300px; animation: mcBgCCW  75s linear infinite; will-change: transform; }
@keyframes mcBgCW  { to { transform: rotate(360deg); } }
@keyframes mcBgCCW { to { transform: rotate(-360deg); } }

/* PC では魔法陣の線を細く（インラインの stroke-width を CSS で半分に上書き）。
   SP は元のしっかりした線幅のまま（小さく表示されるので細すぎるとほぼ消える）。 */
@media (min-width: 768px) {
    .magic-circle-bg [stroke-width="0.35"] { stroke-width: 0.18; }
    .magic-circle-bg [stroke-width="0.4"]  { stroke-width: 0.2; }
    .magic-circle-bg [stroke-width="0.7"]  { stroke-width: 0.35; }
    .magic-circle-bg [stroke-width="1.0"]  { stroke-width: 0.5; }
    .magic-circle-bg [stroke-width="1.4"]  { stroke-width: 0.7; }
    .magic-circle-bg [stroke-width="2.0"]  { stroke-width: 1.0; }
}

/* ── ヒーローグロー（見出し背後の白楕円） ─── */
.hero-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(700px, 110vw);
    height: 640px;
    background: radial-gradient(ellipse 55% 48% at 50% 38%,
        rgba(255,255,255,.92) 0%,
        rgba(255,255,255,.60) 30%,
        rgba(255,255,255,.20) 55%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* ── 装飾スパークル（ライト版） ─────────────── */
.fortune-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.fortune-deco-star {
    position: absolute;
    background: var(--clr-purple);
    clip-path: polygon(50% 0%,55% 43%,100% 50%,55% 57%,50% 100%,45% 57%,0% 50%,45% 43%);
}
@keyframes fortune-deco-pulse {
    0%, 100% { opacity: 0.25; }
    50%       { opacity: 0.85; }
}
.fortune-deco-star:nth-child(1) { width:16px; height:16px; animation: fortune-deco-pulse 3.2s 0.0s ease-in-out infinite; }
.fortune-deco-star:nth-child(2) { width:10px; height:10px; animation: fortune-deco-pulse 4.1s 0.5s ease-in-out infinite; }
.fortune-deco-star:nth-child(3) { width:20px; height:20px; animation: fortune-deco-pulse 2.8s 1.0s ease-in-out infinite; }
.fortune-deco-star:nth-child(4) { width: 8px; height: 8px; animation: fortune-deco-pulse 3.7s 1.5s ease-in-out infinite; }
.fortune-deco-star:nth-child(5) { width:14px; height:14px; animation: fortune-deco-pulse 3.0s 2.0s ease-in-out infinite; }
.fortune-deco-star:nth-child(6) { width:18px; height:18px; animation: fortune-deco-pulse 4.5s 0.3s ease-in-out infinite; }

/* ── ヒーロー ─────────────────────────────────── */
.fortune-hero {
    position: relative;
    z-index: 1;
    padding: 1.25rem 1rem 0;
    text-align: center;
}
/* h1ラッパーは見た目をimg任せに（既存と同等の表示を維持） */
.fortune-hero-title {
    display: contents;
    margin: 0;
    padding: 0;
}
.fortune-hero-logo {
    width: min(560px, 92vw);
    height: auto;
    display: block;
    margin: 0 auto;
}
.fortune-date-badge {
    display: inline-block;
    margin-top: .25rem;
    padding: .3rem .9rem;
    background: rgba(180,140,80,.1);
    border: 1px solid rgba(180,140,80,.25);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: #8a6040;
    letter-spacing: .06em;
}

/* ── メインラッパー ───────────────────────────── */
.fortune-wrap {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
    padding: .75rem 1.25rem 5.5rem; /* 波divider(80px) が内容に重ならないよう確保 */
    text-align: center;
}

/* ── ファンカードシーン ───────────────────────── */
.fan-scene {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 220px;
    margin: 0 auto 1rem;
    overflow: visible;
}
.fan-scene.is-hidden {
    opacity: 0;
    transform: scale(.9);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}
.fan-cards {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 228px;
    height: 100%;
}
.fan-card {
    position: absolute;
    bottom: 0;
    width: 82px;
    aspect-ratio: 990 / 1502;
    transform-origin: 50% 100%;
    cursor: pointer;
    /* filter: drop-shadow はシャッフル中に毎フレームCPUで再計算されてカクつく原因。
     * 形状が矩形+角丸なので box-shadow で同じ見た目を再現できる（GPU合成と相性良）。 */
    border-radius: var(--r-sm);
    box-shadow: 0 4px 14px rgba(100,70,30,.18);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s ease;
}
.fan-card img { width:100%; height:100%; object-fit:fill; display:block; border-radius: var(--r-sm); }
.fan-card[data-i="0"] { left:  0px; transform: rotate(-20deg); z-index:1; }
.fan-card[data-i="2"] { left: 73px; transform: rotate(0deg);   z-index:3; }
.fan-card[data-i="4"] { left:146px; transform: rotate(20deg);  z-index:1; }
.fan-card[data-i="0"]:hover { transform: rotate(-20deg) translateY(-14px); box-shadow: 0 10px 22px rgba(100,70,30,.30); }
.fan-card[data-i="2"]:hover { transform: rotate(0deg)   translateY(-14px); box-shadow: 0 10px 22px rgba(100,70,30,.30); }
.fan-card[data-i="4"]:hover { transform: rotate(20deg)  translateY(-14px); box-shadow: 0 10px 22px rgba(100,70,30,.30); }

.fan-hint {
    font-size: var(--fs-xs);
    color: var(--clr-purple);
    letter-spacing: .04em;
    margin-bottom: 1.5rem;
    min-height: 1.2em;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ── シャッフル演出 ── */
.fan-scene.is-stacked .fan-card {
    width: 140px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
    transition: none;
}
.fan-scene.is-stacked .fan-card[data-i="0"] { transform: rotate(-4deg); }
.fan-scene.is-stacked .fan-card[data-i="2"] { transform: rotate(0deg);  z-index: 5; }
.fan-scene.is-stacked .fan-card[data-i="4"] { transform: rotate(4deg); }

@keyframes shuffle-l {
    0%   { transform: rotate(-3deg)  translateX(0)     translateY(0); }
    18%  { transform: rotate(-34deg) translateX(-58px) translateY(-30px); }
    36%  { transform: rotate(14deg)  translateX(44px)  translateY(-14px); }
    54%  { transform: rotate(-28deg) translateX(-50px) translateY(-24px); }
    70%  { transform: rotate(9deg)   translateX(32px)  translateY(-8px); }
    86%  { transform: rotate(-5deg)  translateX(-16px) translateY(-3px); }
    100% { transform: rotate(-3deg)  translateX(0)     translateY(0); }
}
@keyframes shuffle-c {
    0%   { transform: rotate(0deg)   translateX(0)     translateY(0); }
    14%  { transform: rotate(24deg)  translateX(54px)  translateY(-34px); }
    34%  { transform: rotate(-20deg) translateX(-46px) translateY(-18px); }
    52%  { transform: rotate(28deg)  translateX(58px)  translateY(-22px); }
    68%  { transform: rotate(-13deg) translateX(-30px) translateY(-7px); }
    84%  { transform: rotate(5deg)   translateX(18px)  translateY(-2px); }
    100% { transform: rotate(0deg)   translateX(0)     translateY(0); }
}
@keyframes shuffle-r {
    0%   { transform: rotate(3deg)   translateX(0)     translateY(0); }
    20%  { transform: rotate(30deg)  translateX(60px)  translateY(-28px); }
    38%  { transform: rotate(-24deg) translateX(-48px) translateY(-16px); }
    56%  { transform: rotate(34deg)  translateX(64px)  translateY(-20px); }
    72%  { transform: rotate(-10deg) translateX(-34px) translateY(-6px); }
    87%  { transform: rotate(8deg)   translateX(20px)  translateY(-3px); }
    100% { transform: rotate(3deg)   translateX(0)     translateY(0); }
}

/* シャッフル / ファン展開中はGPUレイヤーを事前確保してカクつきを防ぐ */
.fan-scene.is-shuffling .fan-card,
.fan-scene.is-fanned .fan-card {
    will-change: transform;
}

.fan-scene.is-shuffling .fan-card[data-i="0"] {
    animation: shuffle-l 1.6s cubic-bezier(.4,0,.2,1) forwards;
    pointer-events: none;
}
.fan-scene.is-shuffling .fan-card[data-i="2"] {
    animation: shuffle-c 1.6s 0.06s cubic-bezier(.4,0,.2,1) forwards;
    pointer-events: none;
}
.fan-scene.is-shuffling .fan-card[data-i="4"] {
    animation: shuffle-r 1.6s 0.12s cubic-bezier(.4,0,.2,1) forwards;
    pointer-events: none;
}

.fan-scene.is-fanned .fan-card {
    width: 140px;
    transition: left 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1);
}
/* 140px カード × 3枚: 44px間隔でファン配置 */
.fan-scene.is-fanned .fan-card[data-i="0"] { left:  0px; transform: rotate(-20deg); }
.fan-scene.is-fanned .fan-card[data-i="2"] { left: 44px; transform: rotate(0deg); }
.fan-scene.is-fanned .fan-card[data-i="4"] { left: 88px; transform: rotate(20deg); }

/* ── 結果カード（クリック後） ──────────────────── */
.card-reveal-stage {
    perspective: 900px;
    margin: 0 auto 2rem;
    width: clamp(130px, 36vw, 165px);
    aspect-ratio: 990 / 1502;
    display: none;
}
.card-reveal-stage.is-visible { display: block; }
.card-reveal-inner {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(.4,0,.2,1);
}
.card-reveal-inner.is-flipped { transform: rotateY(180deg); }
.card-reveal-front,
.card-reveal-back {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    border-radius: var(--r-sm);
    box-shadow: 0 12px 50px rgba(126,87,194,.12), 0 0 0 1px rgba(179,157,219,.15);
}
.card-reveal-front { background: var(--clr-purple-light); }
.card-reveal-back  { transform: rotateY(180deg); background: var(--clr-purple-light); }
.card-reveal-front img,
.card-reveal-back  img { width:100%; height:100%; object-fit:fill; display:block; }

/* ── ボタンエリア ────────────────────────────── */
.fortune-btn-area {
    position: relative;
    text-align: center;
    margin-bottom: .25rem;
    padding: .5rem 0;
}

/* ── 占うボタン ── BUTTON SYSTEM (style.css) が適用される（ラベンダー単色）。
   個別調整のみ：選択待ちの呼吸アニメと、無効状態。シャイン演出は撤去。 */
.fortune-btn::after { content: none; }
.fortune-btn:active { transform: translateY(-1px); }
.fortune-btn:disabled {
    background: #A8AED0;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    opacity: .65;
}

/* ── カード選択待ち：呼吸エフェクト（影だけ薄く拡縮） ── */
@keyframes btn-breathe {
    0%, 100% { transform: scale(1);    box-shadow: 0 4px 20px rgba(88, 96, 168, 0.22); }
    50%       { transform: scale(1.02); box-shadow: 0 8px 28px rgba(88, 96, 168, 0.30); }
}
.fortune-btn.is-selecting {
    opacity: 1;
    cursor: default;
    /* PCで「カードをタップ／クリックして選んでください」が折り返さないよう nowrap。 */
    white-space: nowrap;
    letter-spacing: .08em;
    animation: btn-breathe 2.2s ease-in-out infinite;
}

@media (max-width: 767px) {
    .fortune-btn {
        font-size: var(--fs-sm);
        padding: .85rem 2rem;
        letter-spacing: .08em;
    }
    .fortune-btn.is-selecting {
        font-size: var(--fs-xs);
        padding: .85rem 2rem;
        letter-spacing: .04em;
        gap: .4rem;
        /* SPは画面幅が狭いので折り返し許容に戻す */
        white-space: normal;
    }
}

.fortune-btn-sub {
    font-size: var(--fs-xs);
    color: var(--clr-purple);
    margin-top: .5rem;
    margin-bottom: 1.5rem;
    letter-spacing: .04em;
}

/* ── 占い済みバナー ────────────────────────── */
.fortune-done-note {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: .5rem 1.25rem;
    background: rgba(249,168,37,.1);
    border: 1px solid rgba(249,168,37,.18);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    color: #c8850a;
    letter-spacing: .04em;
}

/* ── ローディング ───────────────────────────── */
@keyframes starSpin { to { transform: rotate(360deg); } }
.fortune-loading {
    display: none;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    color: var(--clr-purple);
    font-size: var(--fs-base);
}
.fortune-loading.is-active { display: flex; }
.fortune-loading i { animation: starSpin .8s linear infinite; }

/* ── 結果エリア ───────────────────────────────── */
.fortune-result {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}
.fortune-result.is-visible { display: block; opacity: 1; transform: translateY(0); }
.fortune-result-card {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(179,157,219,.11);
    border-radius: var(--r-md);
    padding: 1.5rem;
    backdrop-filter: blur(8px);
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 20px rgba(126,87,194,.04);
    text-align: left;
}
.fortune-result-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .65rem;
    flex-wrap: wrap;
}
.fortune-position-badge {
    display: inline-block;
    padding: .18rem .7rem;
    border-radius: var(--r-md);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .06em;
    flex-shrink: 0;
}
.fortune-position-badge.upright {
    background: rgba(249,168,37,.15);
    color: #b87c00;
    border: 1px solid rgba(249,168,37,.20);
}
.fortune-position-badge.reversed {
    background: rgba(180,80,120,.1);
    color: #a0305a;
    border: 1px solid rgba(180,80,120,.15);
}
.fortune-char-name {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--clr-purple);
    letter-spacing: .08em;
}
.fortune-char-subtitle {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1.55;
    margin-bottom: 1.2rem;
    letter-spacing: .01em;
}
.fortune-result-divider {
    height: 1px;
    background: rgba(179,157,219,.28);
    margin-bottom: 1.1rem;
}
.fortune-text-label {
    font-size: var(--fs-2xs);
    color: var(--clr-purple);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 .65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.fortune-text { font-size: var(--fs-base); line-height: 1.9; color: #4a4060; white-space: pre-line; }

/* NOTE: 以前ここに .pg-share* のスタイルが残っていたが、占いページのHTMLは
   .fortune-share* を使うため未使用デッドコードだった。下部の .fortune-share に集約。 */

.fortune-reset-note { margin-top:1.5rem; font-size:var(--fs-sm); color:var(--clr-purple); letter-spacing:.04em; }

/* ── mindas.カード占いについて ────────────────── */
.fortune-about-box {
    margin-top: 2.5rem;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(179,157,219,.11);
    border-radius: var(--r-md);
    padding: 1.5rem 1.75rem 1.25rem;
    text-align: center;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(126,87,194,.03);
}
.fortune-about-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--clr-purple);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}
.fortune-about-title i { color: var(--clr-purple); font-size: var(--fs-md); }
.fortune-about-text { font-size: var(--fs-sm); color: var(--clr-purple); line-height: 1.9; }
.fortune-about-bottom {
    margin-top: .9rem;
    font-size: var(--fs-2xs);
    color: var(--clr-purple-light);
    letter-spacing: .06em;
}

/* ── 性格診断誘導バナー ───────────────────────── */
.fortune-diagnosis-promo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fff6f8 0%, #f3efff 100%);
    border: 1px solid rgba(244,143,177,.12);
    border-radius: var(--r-md);
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(244,143,177,.06);
    transition: transform .25s cubic-bezier(.25,.46,.45,.94), box-shadow .25s;
    overflow: hidden;
    position: relative;
}
.fortune-diagnosis-promo:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(244,143,177,.11);
}
.fortune-diagnosis-promo__cards {
    flex-shrink: 0;
    position: relative;
    width: 80px;
    height: 108px;
}
.fdp-card {
    position: absolute;
    width: 52px;
    border-radius: var(--r-xs);
    box-shadow: 0 3px 10px rgba(36,54,95,.18);
    object-fit: cover;
    aspect-ratio: 427 / 790;
}
.fdp-card--l { left: 0;    top: 8px;  transform: rotate(-12deg); z-index: 1; }
.fdp-card--c { left: 14px; top: 0;    transform: rotate(0deg);   z-index: 3; }
.fdp-card--r { left: 28px; top: 8px;  transform: rotate(12deg);  z-index: 2; }
.fortune-diagnosis-promo__body {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.fdp-eyebrow {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--clr-pink);
    letter-spacing: .1em;
    margin-bottom: .3rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.fdp-heading {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1.45;
    margin-bottom: .35rem;
}
.fdp-sub {
    font-size: var(--fs-xs);
    color: var(--clr-purple);
    line-height: 1.6;
    margin-bottom: .75rem;
}
.fdp-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--clr-white);
    background: linear-gradient(135deg, var(--clr-pink) 0%, #ce7aaa 100%);
    padding: .4rem 1rem;
    border-radius: var(--r-full);
    letter-spacing: .06em;
    box-shadow: 0 3px 12px rgba(244,143,177,.20);
    transition: filter .2s;
}
.fortune-diagnosis-promo:hover .fdp-btn { filter: brightness(1.08); }

/* ── 広告エリア ───────────────────────────────── */
.fortune-ad-area {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    background: rgba(255,255,255,.45);
    border: 1px dashed rgba(179,157,219,.18);
    border-radius: var(--r-sm);
    overflow: hidden;
}

/* ── キラキラ演出 ─────────────────────────────── */
.sparkle-container { position:fixed; inset:0; pointer-events:none; z-index:999; overflow:hidden; }
@keyframes sparkleFall {
    0%   { opacity:1; transform:translateY(-20px) scale(1) rotate(0deg); }
    100% { opacity:0; transform:translateY(100vh) scale(.3) rotate(720deg); }
}
.sparkle-particle {
    position: absolute; width: 8px; height: 8px; background: var(--clr-purple);
    clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
    animation: sparkleFall 1.5s ease-in forwards;
}

/* ── レスポンシブ ────────────────────────────── */
@media (min-width: 640px) {
    .fan-scene { max-width: 500px; height: 280px; }
    .fan-cards { width: 276px; }
    .fan-card  { width: 98px; }
    .fan-card[data-i="0"] { left:  0px; }
    .fan-card[data-i="2"] { left: 89px; }
    .fan-card[data-i="4"] { left:178px; }
    .fan-card[data-i="0"]:hover { transform: rotate(-20deg) translateY(-16px); }
    .fan-card[data-i="2"]:hover { transform: rotate(0deg)   translateY(-16px); }
    .fan-card[data-i="4"]:hover { transform: rotate(20deg)  translateY(-16px); }
    .card-reveal-stage { width: clamp(160px, 28vw, 210px); }
}

/* ── シェアエリア ────────────────────────────── */
.fortune-share {
    text-align: center;
    margin: var(--sp-sm) 0;
}
.fortune-share-label {
    font-family: var(--font-en);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--clr-text-muted);
    letter-spacing: 0.12em;
    margin-bottom: 12px;
    font-family: var(--font-en);
}
.fortune-share-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.fortune-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--clr-white);
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: opacity var(--tr), transform var(--tr), box-shadow var(--tr);
}
.fortune-share-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.fortune-share-btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.fortune-share-btn--x       { background: #000; }
.fortune-share-btn--threads { background: #101010; }
.fortune-share-btn--line    { background: #06C755; }
.fortune-share-btn--native  { background: linear-gradient(135deg, var(--clr-brand), var(--clr-pink)); }
.fortune-share-btn--native:hover { opacity: 1; }