@charset "UTF-8";

#pacha-roulette-container { 
    text-align: center; max-width: 400px; margin: 20px auto; padding: 18px; 
    border-radius: 24px;
    box-shadow: 0 0px 15px rgba(72,90,132,0.2); 
    background: #fff;    
    text-align: center;
    border: none;
    transition: background-color 1.2s ease-out; 
    position: relative; 
    overflow: hidden; 
}
#roulette-display { position: relative; width: 300px; height: 300px; margin: 20px auto; }

/* ★★★ 盤面の立体感と高級感強化＆リッチゴールドカラー ★★★ */
#roulette-wheel { 
    position: relative; width: 100%; height: 100%; border-radius: 50%; 
    background: conic-gradient(
        #5B7C99 0% 33.3%,   /* 濃いブルー（元のパターン2） */
        #8FA7C4 33.3% 66.6%, /* 少し薄いブルー */
        #DCE7F2 66.6% 100%   /* ほぼ白のブルー */
    );

    /* 多重シャドウで立体感を出す */
    box-shadow: 
        0 0 0 10px rgba(0, 0, 0, 0.1), /* 外側の薄い影 */
        inset 0 0 20px rgba(0, 0, 0, 0.5), /* 内側の濃い影 */
        inset 0 0 10px rgba(255, 255, 255, 0.5); /* 内側のハイライト */
    
    /* 【修正】回転時間を4sから8sに変更 */
    transition: transform 8s cubic-bezier(0.1, 0.7, 0.4, 1), box-shadow 0.3s ease-out;
    transform: rotate(0deg); 
}

/* ★★★ ポインターデザインの強化 ★★★ */
#roulette-pointer { 
    position: absolute; top: -15px; left: calc(50% - 15px); width: 0; height: 0; 
    border-left: 15px solid transparent; border-right: 15px solid transparent; 
    border-bottom: 30px solid #D9534F; /* 鮮やかな赤に変更 */
    z-index: 10;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); /* 濃い影を追加 */
}
#roulette-start-button { padding: 10px 30px; font-size: 1.2em; cursor: pointer; margin-top: 15px; }
#roulette-start-button:disabled { background-color: #ccc; cursor: not-allowed; }
.coupon-code-display { font-size: 1.5em; font-weight: bold; color: #d9534f; margin: 15px 0; border: 2px dashed #d9534f; padding: 10px; display: inline-block; user-select: text; }
.pacha-result-box.win { border: 2px solid #aeb8c2; padding: 20px; background: #F0F2F5; margin-top: 20px; }
.pacha-result-box.miss { border: 2px solid #aeb8c2; padding: 20px; background: #F0F2F5; margin-top: 20px; }

/* ★★★ 演出強化 CSS ★★★ */

/* 1. ポインターの揺れアニメーション */
@keyframes pointerVibrate {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-2px) rotate(-1deg); }
    50% { transform: translateX(0) rotate(0deg); }
    75% { transform: translateX(2px) rotate(1deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

/* 回転中、ポインターにアニメーションを適用 */
#roulette-wheel.is-spinning #roulette-pointer {
    animation: pointerVibrate 0.1s infinite;
}

/* 2. 紙吹雪コンテナ */
#confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

/* 3. 紙吹雪の基本スタイルとアニメーション */
.confetti {
    position: absolute;
    width: 8px;
    height: 12px;
    opacity: 0;
    animation: fall 3s ease-in forwards;
    transform: rotate(0deg);
}

@keyframes fall {
    0% {
        opacity: 1;
        transform: translateY(-100%) rotate(0deg);
    }
    100% {
        opacity: 0.8;
        transform: translateY(100vh) rotate(1080deg); 
    }
}

/* 4. 光る/フラッシュアニメーション */
.is-spinning {
    animation: glowPulse 1s infinite alternate;
}
@keyframes glowPulse {
    /* 盤面の立体感を維持しつつ光る */
    from {box-shadow: 
        0 0 0 10px rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.5), 
        0 0 15px 2px rgba(255, 215, 0, 0.4); /* リッチゴールドをベースに光る */
    } 
    to {box-shadow: 
        0 0 0 10px rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.5), 
        0 0 30px 8px rgba(255, 215, 0, 0.8); /* リッチゴールドをベースに強く光る */
    }
}

.flash {
    animation: flashBg 1.2s ease-out;
}
@keyframes flashBg {
    0% {background-color: rgba(255, 255, 255, 0.9);} 
    50% {background-color: rgba(255, 255, 255, 0.5);} 
    100% {background-color: transparent;}
}

/* 当選時の金色の光はそのまま */
.won-wheel {
    box-shadow: 
        0 0 0 10px rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.5), 
        0 0 25px 8px rgba(255,165,0,0.8) !important; 
}