body { font-family: 'Helvetica Neue', Arial, sans-serif; text-align: center; background: #fdfcf0; padding: 20px; overflow-x: hidden; }

/* カードのスタイル */
.card-container { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-top: 50px; }
.card {
    width: 100px; height: 160px; background: #d43f33; color: white;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; cursor: pointer; font-size: 24px;
    transition: transform 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 2px solid #b32d22;
}
.card:hover { transform: translateY(-15px) rotate(2deg); background: #e74c3c; }

/* --- 全画面アニメーション用のオーバーレイ --- */
#animation-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: none; /* 初期は非表示 */
    flex-direction: column; align-items: center; justify-content: center;
    z-index: 1000;
}

/* 紙吹雪の破片 */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background-color: #f00;
    top: -20px;
    z-index: 2000;
    pointer-events: none; /* クリックを邪魔しない */
    animation: fall linear forwards;
}

@keyframes fall {
    to {
        transform: translateY(100vh) rotate(720deg);
    }
}

/* 大吉専用のテキストアニメーション */
.luck-rank.special {
    color: #ffca28; /* ゴールド */
    text-shadow: 0 0 15px rgba(255, 202, 40, 0.8);
    font-size: 80px;
    animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* 画面を暗くするオーバーレイ */
.dark-mode {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 50; /* 結果表示より下、背景より上 */
    pointer-events: none;
    animation: fadeIn 2s forwards;
}

/* どんよりした雲 */
.cloud {
    position: absolute;
    font-size: 100px;
    filter: grayscale(1) brightness(0.5);
    opacity: 0.8;
    z-index: 60;
    pointer-events: none;
    animation: drift linear infinite;
}

@keyframes drift {
    from { transform: translateX(-150px); }
    to { transform: translateX(110vw); }
}

/* 凶のテキストスタイル */
.luck-rank.bad {
    color: #4834d4; /* 深い青紫 */
    text-shadow: 0 0 10px #000;
    animation: shake 0.2s infinite; /* 小刻みに震える */
}

/* ぐるぐる回るおみくじ筒のイメージ（CSSアニメ） */
.shaking-box {
    font-size: 80px;
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

/* 結果エリア */
#result-area { display: none; margin-top: 50px; animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.luck-rank { font-size: 48px; color: #d43f33; margin-bottom: 10px; }
.btn-retry { margin-top: 30px; padding: 12px 30px; background: #333; color: #fff; border: none; border-radius: 25px; cursor: pointer; }