/* ========================================
   おみくじガチャ演出CSS
   ======================================== */

/* --- 演出ステージ（Phase 1-5） --- */
.omikuji-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.omikuji-bg {
    position: absolute;
    inset: 0;
    background: url('../assets/images/omikuji/omikuji_stage_bg.webp') center/cover no-repeat,
                radial-gradient(ellipse at center, #1a0a2e 0%, #0a0014 100%);
    z-index: 0;
}

/* --- おみくじ筒 --- */
.omikuji-tube-area {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 360px;
}

.omikuji-tube {
    position: relative;
    width: 140px;
    height: 300px;
    background: url('../assets/images/omikuji/omikuji_tube.webp') center/contain no-repeat;
    border: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
}
.omikuji-tube::before {
    content: none;
}

/* おみくじ棒 */
.omikuji-stick {
    position: absolute;
    top: -20px;
    width: 80px;
    height: 400px;
    background: url('../assets/images/omikuji/omikuji_stick.webp') center/contain no-repeat;
    transform-origin: bottom center;
    opacity: 0;
    z-index: 10;
    filter: drop-shadow(0 0 12px var(--stick-color, #FFD700));
}
.omikuji-stick::after {
    content: none;
}

/* --- アニメーション: シェイク --- */
.omikuji-tube.shaking {
    animation: tubeShake 0.15s ease-in-out infinite;
}
@keyframes tubeShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* --- アニメーション: 棒が飛び出す --- */
.omikuji-stick.pulling {
    opacity: 1;
    animation: stickPull 0.8s cubic-bezier(0.2,0.8,0.3,1) forwards;
}
@keyframes stickPull {
    0% { top: 80px; opacity: 0; }
    30% { top: 50px; opacity: 1; }
    100% { top: -420px; opacity: 1; }
}

/* --- カラーフラッシュ --- */
.omikuji-flash {
    position: absolute;
    inset: 0;
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.omikuji-flash.active {
    animation: colorFlash 0.8s ease-out forwards;
}
@keyframes colorFlash {
    0% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* 大吉専用: 光線放射 */
.omikuji-flash.daikichi-flash {
    background: radial-gradient(circle at center, rgba(255,215,0,0.8) 0%, transparent 70%);
}
.omikuji-flash.daikichi-flash.active {
    animation: daikichiBurst 1.2s ease-out forwards;
}
@keyframes daikichiBurst {
    0% { opacity: 1; transform: scale(0.5); }
    50% { opacity: 0.8; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(2); }
}

/* 凶/大凶: 暗転 */
.omikuji-flash.dark-flash {
    background: radial-gradient(circle at center, rgba(50,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
}

/* --- ランク表示 --- */
.omikuji-rank-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.omikuji-rank-display.visible {
    opacity: 1;
    animation: rankBounceIn 0.6s cubic-bezier(0.17,0.67,0.24,1.2) forwards;
}
/* 紋章画像 */
.rank-seal-img {
    width: clamp(160px, 35vw, 280px);
    height: clamp(160px, 35vw, 280px);
    object-fit: contain;
    filter: drop-shadow(0 0 30px var(--rank-color, #FFD700));
    margin-bottom: -20px;
}
.omikuji-rank-text {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(56px, 12vw, 100px);
    font-weight: 700;
    color: var(--rank-color, #FFD700);
    text-shadow: 0 0 40px var(--rank-color, #FFD700), 0 0 80px var(--rank-color, #FFD700);
    letter-spacing: 0.2em;
    position: relative;
    z-index: 2;
}
@keyframes rankBounceIn {
    0% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(0.9); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* --- 復活演出: ヒビ割れオーバーレイ --- */
.omikuji-crack-overlay {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    opacity: 0;
    background: url('../assets/images/omikuji/crack_texture.webp') center/cover no-repeat;
    mix-blend-mode: screen;
}
.omikuji-crack-overlay.cracking {
    animation: crackAppear 0.5s ease-out forwards;
}
@keyframes crackAppear {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* --- 復活演出: 画面揺れ --- */
.omikuji-stage.quaking {
    animation: screenQuake 0.5s ease-in-out;
}
@keyframes screenQuake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-8px, 6px); }
    20% { transform: translate(6px, -8px); }
    30% { transform: translate(-6px, -4px); }
    40% { transform: translate(8px, 4px); }
    50% { transform: translate(-4px, 8px); }
    60% { transform: translate(4px, -6px); }
    70% { transform: translate(-8px, 4px); }
    80% { transform: translate(6px, -4px); }
    90% { transform: translate(-4px, -8px); }
}

/* --- 復活演出: バースト光 --- */
.omikuji-revival-burst {
    position: absolute;
    inset: -20%;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    background: url('../assets/images/omikuji/revival_burst.webp') center/contain no-repeat;
    mix-blend-mode: screen;
}
.omikuji-revival-burst.bursting {
    animation: revivalBurst 1s ease-out forwards;
}
@keyframes revivalBurst {
    0% { opacity: 1; transform: scale(0.2); }
    40% { opacity: 0.9; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(2.5); }
}

/* --- 多段階昇格: 強震え（2段階以上） --- */
.omikuji-stage.quaking-intense {
    animation: screenQuakeIntense 0.6s ease-in-out;
}
@keyframes screenQuakeIntense {
    0%, 100% { transform: translate(0, 0); }
    5%  { transform: translate(-12px, 10px); }
    10% { transform: translate(10px, -12px); }
    15% { transform: translate(-10px, -6px); }
    20% { transform: translate(12px, 6px); }
    25% { transform: translate(-6px, 12px); }
    30% { transform: translate(6px, -10px); }
    35% { transform: translate(-12px, 6px); }
    40% { transform: translate(10px, -6px); }
    45% { transform: translate(-6px, -12px); }
    50% { transform: translate(12px, 10px); }
    55% { transform: translate(-10px, 6px); }
    60% { transform: translate(6px, -12px); }
    65% { transform: translate(-12px, -10px); }
    70% { transform: translate(10px, 12px); }
    75% { transform: translate(-6px, -6px); }
    80% { transform: translate(12px, -10px); }
    85% { transform: translate(-10px, 12px); }
    90% { transform: translate(6px, -6px); }
    95% { transform: translate(-6px, 10px); }
}

/* --- 多段階昇格: 超強震え（4段階・激熱） --- */
.omikuji-stage.quaking-ultra {
    animation: screenQuakeUltra 0.06s infinite alternate !important;
}
@keyframes screenQuakeUltra {
    0%   { transform: translate(-6px, 4px) rotate(-1deg); }
    100% { transform: translate(6px, -4px) rotate(1deg); }
}

/* --- 昇格失敗: crackが萎む演出 --- */
.omikuji-crack-overlay.crack-fizzle {
    animation: crackFizzle 0.6s ease-out forwards;
}
@keyframes crackFizzle {
    0%   { opacity: 1; filter: brightness(1); }
    30%  { opacity: 0.7; filter: brightness(0.5); }
    100% { opacity: 0; filter: brightness(0) grayscale(1); }
}

/* --- 昇格失敗: ランク表示の震え（がっかり） --- */
.omikuji-rank-display.revival-failed-shake {
    animation: failedShake 0.6s ease-in-out;
}
@keyframes failedShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-6px); }
    20% { transform: translateX(5px); }
    30% { transform: translateX(-4px); }
    40% { transform: translateX(3px); }
    50% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    70% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
}

/* --- 結果画面（Phase 6） --- */
.omikuji-result {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.omikuji-result-bg {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: left center;
    z-index: 0;
}
.omikuji-result-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.2) 35%,
        rgba(0,0,0,0.7) 55%,
        rgba(0,0,0,0.85) 100%);
}

.omikuji-result-card {
    position: relative;
    z-index: 5;
    max-width: 440px;
    margin: 20px 20px 20px auto;
    padding: 24px 20px;
    background: rgba(20, 10, 30, 0.88);
    border-radius: 16px;
    border: 2px solid var(--rank-color, #D4AF37);
    box-shadow: 0 0 30px rgba(0,0,0,0.5), 0 0 15px var(--rank-color, rgba(212,175,55,0.3));
    animation: cardFadeIn 0.8s ease-out;
}
@keyframes cardFadeIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.omikuji-result-rank {
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(40px, 10vw, 64px);
    font-weight: 700;
    color: var(--rank-color, #FFD700);
    text-shadow: 0 0 20px var(--rank-color, rgba(255,215,0,0.5));
    margin-bottom: 4px;
    letter-spacing: 0.15em;
}

.omikuji-result-title {
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.2rem;
    color: #e8d8c8;
    margin-bottom: 20px;
    letter-spacing: 0.2em;
}

/* 運勢行 */
.omikuji-fortune-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-start;
}
.fortune-label {
    flex-shrink: 0;
    display: inline-block;
    width: 44px;
    padding: 3px 0;
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1a0a2e;
    background: var(--rank-color, #D4AF37);
    border-radius: 4px;
}
.fortune-text {
    flex: 1;
    font-size: 0.9rem;
    color: #e0d0c0;
    line-height: 1.6;
}

/* ラッキーアイテム行 */
.omikuji-lucky-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 16px 0 12px;
}
.lucky-tag {
    padding: 4px 12px;
    font-size: 0.8rem;
    color: #FFD700;
    background: rgba(212,175,55,0.1);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 20px;
}

/* キャラコメント */
.omikuji-char-comment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}
.omikuji-char-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(212,175,55,0.5);
    flex-shrink: 0;
}
.omikuji-char-bubble {
    flex: 1;
}
.omikuji-char-name {
    display: block;
    font-size: 0.75rem;
    color: #D4AF37;
    margin-bottom: 2px;
    font-weight: 700;
}
.omikuji-char-text {
    font-size: 0.85rem;
    color: #e0d0c0;
    line-height: 1.5;
}

/* ボタン */
.omikuji-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-omikuji-action {
    padding: 12px 24px;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFD700;
    background: linear-gradient(135deg, rgba(60,30,10,0.9), rgba(40,15,5,0.9));
    border: 2px solid #D4AF37;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
}
.btn-omikuji-action:hover {
    box-shadow: 0 0 15px rgba(255,215,0,0.3);
    transform: scale(1.03);
}
.btn-omikuji-home {
    color: #c0b0a0;
    border-color: rgba(192,176,160,0.5);
    background: linear-gradient(135deg, rgba(30,20,10,0.9), rgba(20,10,5,0.9));
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .omikuji-tube-area {
        transform: scale(0.85);
    }
    .omikuji-result-card {
        margin: 16px 14px;
    }
    .btn-omikuji-action {
        padding: 10px 18px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .omikuji-tube-area {
        transform: scale(0.7);
    }
    .rank-seal-img {
        width: 120px;
        height: 120px;
    }
    /* おみくじ結果: 16:9 CG + 不透明結果エリアのスタックレイアウト */
    .omikuji-result {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
    }

    .omikuji-result-bg {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        flex-shrink: 0;
        inset: auto;
        background-position: center;
    }
    .omikuji-result-bg::after {
        background: linear-gradient(180deg, transparent 60%, rgba(20, 10, 30, 0.6) 100%);
    }

    .omikuji-result-card {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        max-width: 100%;
        margin: 0;
        padding: 16px 14px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        background: rgba(20, 10, 30, 0.95);
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--rank-color, #D4AF37);
        box-shadow: none;
        animation: none;
    }

    .omikuji-result-rank {
        font-size: clamp(32px, 9vw, 48px);
    }
    .omikuji-result-title {
        font-size: 1rem;
    }
    .fortune-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* 2列グリッドボタン */
    .omikuji-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .btn-omikuji-action {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.85rem;
    }
    .omikuji-tap-prompt {
        bottom: 60px;
        font-size: 0.95rem;
    }
    .omikuji-celebration-text {
        font-size: 1.1rem;
        bottom: 14%;
    }
}

/* 横向き・低い画面高さ */
@media (max-height: 600px) {
    .omikuji-tube-area {
        transform: scale(0.6);
    }
    .rank-seal-img {
        width: 100px;
        height: 100px;
    }
    .omikuji-rank-text {
        font-size: clamp(36px, 8vw, 56px);
    }
    .omikuji-tap-prompt {
        bottom: 40px;
        font-size: 0.9rem;
    }
}

/* ========================================
   新演出パーツ CSS
   ======================================== */

/* --- 予告オーラ: 背景ゴールデンシマー --- */
.omikuji-bg.golden-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255,215,0,0.15) 0%, transparent 70%);
    animation: goldenShimmer 1.5s ease-in-out infinite alternate;
}
@keyframes goldenShimmer {
    0%   { opacity: 0.3; }
    100% { opacity: 0.8; }
}

/* --- 強シェイク（jackpot用） --- */
.omikuji-tube.shaking-strong {
    animation: tubeShakeStrong 0.12s ease-in-out infinite;
}
@keyframes tubeShakeStrong {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-5deg) translateY(-3px); }
    75% { transform: rotate(5deg) translateY(3px); }
}

/* --- 動的シェイク（連打で強度変化） --- */
.omikuji-tube.shaking {
    animation: tubeShakeDynamic 0.15s ease-in-out infinite;
}
@keyframes tubeShakeDynamic {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(calc(-1 * var(--shake-amp, 3deg))); }
    75% { transform: rotate(var(--shake-amp, 3deg)); }
}

/* --- 連打プロンプト --- */
.omikuji-tap-prompt {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 35;
    font-family: 'Noto Serif JP', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #FFD700;
    text-shadow: 0 0 15px rgba(255,215,0,0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    white-space: nowrap;
}
.omikuji-tap-prompt.visible {
    opacity: 1;
    animation: tapPromptPulse 0.8s ease-in-out infinite;
}
@keyframes tapPromptPulse {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* --- タップリップル --- */
.tap-ripple {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,215,0,0.4);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    animation: tapRippleExpand 0.5s ease-out forwards;
}
@keyframes tapRippleExpand {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* --- 棒アニメーション追加バリエーション --- */
.omikuji-stick.pulling-slow {
    opacity: 1;
    animation: stickPullSlow 1s cubic-bezier(0.4, 0.2, 0.6, 0.4) forwards;
}
@keyframes stickPullSlow {
    0%   { top: 80px; opacity: 0; }
    40%  { top: 40px; opacity: 1; }
    100% { top: -50px; opacity: 1; }
}

.omikuji-stick.pulling-pause {
    opacity: 1;
    top: -50px;
}

.omikuji-stick.pulling-fast {
    opacity: 1;
    animation: stickPullFast 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes stickPullFast {
    0%   { top: -50px; }
    100% { top: -420px; }
}

.omikuji-stick.pulling-burst {
    opacity: 1;
    animation: stickPullBurst 0.35s cubic-bezier(0, 0.8, 0.2, 1) forwards;
}
@keyframes stickPullBurst {
    0%   { top: -50px; transform: scaleY(1); }
    30%  { transform: scaleY(1.3); }
    100% { top: -440px; transform: scaleY(1); }
}

/* --- スピードライン --- */
.omikuji-speedlines {
    position: absolute;
    inset: -50%;
    z-index: 12;
    pointer-events: none;
    opacity: 0;
    background: url('../assets/images/omikuji/speedlines.webp') center/cover no-repeat;
    mix-blend-mode: screen;
    transition: opacity 0.3s;
}
.omikuji-speedlines.active {
    opacity: 1;
    animation: speedLinesRotate 3s linear infinite;
}
.omikuji-speedlines.active.fast {
    animation: speedLinesRotate 1.5s linear infinite;
}
@keyframes speedLinesRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- 神託/天啓演出: 暗転オーバーレイ --- */
.omikuji-reach-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}
.omikuji-reach-overlay.active {
    opacity: 1;
}

/* --- 神託/天啓テキスト --- */
.omikuji-reach-text {
    position: absolute;
    inset: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Serif JP', serif;
    font-weight: 900;
    letter-spacing: 0.2em;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
}
/* 神託/天啓テキスト画像 */
.reach-text-img {
    max-width: 80vw;
    max-height: 30vh;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(255,215,0,0.8)) drop-shadow(0 0 60px rgba(255,215,0,0.4));
}
.reach-text-img.super {
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)) drop-shadow(0 0 40px rgba(139,0,255,0.4));
}
.omikuji-reach-text.reach-in {
    font-size: clamp(48px, 12vw, 96px);
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,215,0,0.4);
    animation: reachTextIn 1.2s cubic-bezier(0.17,0.67,0.24,1.2) forwards;
}
.omikuji-reach-text.super-reach-in {
    font-size: clamp(40px, 10vw, 80px);
    color: #FFD700;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.5));
    animation: reachTextIn 1s cubic-bezier(0.17,0.67,0.24,1.2) forwards;
}
@keyframes reachTextIn {
    0%   { opacity: 0; transform: scale(3); }
    40%  { opacity: 1; transform: scale(0.9); }
    60%  { transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes rainbowTextScroll {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* --- キャラカットイン --- */
.omikuji-cutin {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}
.omikuji-cutin.active {
    opacity: 1;
}

.omikuji-cutin-lines {
    position: absolute;
    inset: -20%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(255,255,255,0.05) 20px,
        rgba(255,255,255,0.05) 22px
    );
    animation: cutinLinesScroll 0.3s linear infinite;
    opacity: 0;
}
.omikuji-cutin.active .omikuji-cutin-lines {
    opacity: 1;
}
@keyframes cutinLinesScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(42px); }
}

.omikuji-cutin-img {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
}

/* キャラ別カットインアニメーション */
.omikuji-cutin.active[data-char="chisa"] .omikuji-cutin-img {
    animation: cutinChisa 2s ease-out forwards;
}
@keyframes cutinChisa {
    0%   { opacity: 0; transform: translateX(100%); }
    20%  { opacity: 1; transform: translateX(0); }
    70%  { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

.omikuji-cutin.active[data-char="yogami"] .omikuji-cutin-img {
    animation: cutinYogami 2s ease-out forwards;
}
@keyframes cutinYogami {
    0%   { opacity: 0; transform: scale(1.5); }
    10%  { opacity: 1; transform: scale(1); }
    70%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

.omikuji-cutin.active[data-char="suzune"] .omikuji-cutin-img {
    animation: cutinSuzune 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes cutinSuzune {
    0%   { opacity: 0; transform: translateX(-100%); }
    25%  { opacity: 1; transform: translateX(0); }
    35%  { opacity: 1; transform: translateX(-2%); }
    65%  { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(100%); }
}

/* --- カットインタイプ別強化 --- */

/* excited: 興奮カットイン（天啓時） - より大きく、バウンス付き */
.omikuji-cutin.cutin-excited .omikuji-cutin-lines {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 15px,
        rgba(255,215,0,0.08) 15px,
        rgba(255,215,0,0.08) 17px
    );
    animation: cutinLinesScroll 0.2s linear infinite;
}
.omikuji-cutin.cutin-excited .omikuji-cutin-img {
    filter: drop-shadow(0 0 20px rgba(255,215,0,0.6));
}

/* chisa excited: ふわっと上から降りて静かに祈る */
.omikuji-cutin.cutin-excited.active[data-char="chisa"] .omikuji-cutin-img {
    animation: cutinChisaExcited 2.2s ease-out forwards;
}
@keyframes cutinChisaExcited {
    0%   { opacity: 0; transform: translateY(-80px) scale(0.8); }
    15%  { opacity: 1; transform: translateY(0) scale(1.05); }
    25%  { transform: translateY(-10px) scale(1); }
    70%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-30px) scale(1.1); }
}

/* yogami excited: 魔法陣展開風ズームイン */
.omikuji-cutin.cutin-excited.active[data-char="yogami"] .omikuji-cutin-img {
    animation: cutinYogamiExcited 2.2s ease-out forwards;
}
@keyframes cutinYogamiExcited {
    0%   { opacity: 0; transform: scale(2.5) rotate(10deg); }
    10%  { opacity: 1; transform: scale(1) rotate(0deg); }
    20%  { transform: scale(1.08); }
    30%  { transform: scale(0.98); }
    70%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.7) rotate(-5deg); }
}

/* suzune excited: 左右から跳ねてくる */
.omikuji-cutin.cutin-excited.active[data-char="suzune"] .omikuji-cutin-img {
    animation: cutinSuzuneExcited 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes cutinSuzuneExcited {
    0%   { opacity: 0; transform: translateX(-100%) rotate(-15deg); }
    20%  { opacity: 1; transform: translateX(0) rotate(5deg); }
    30%  { transform: translateX(-2%) rotate(-3deg); }
    40%  { transform: translateX(0) rotate(0deg); }
    70%  { opacity: 1; transform: translateX(0) rotate(0deg); }
    100% { opacity: 0; transform: translateX(100%) rotate(10deg); }
}

/* special: 特別カットイン（jackpot時） - 最大演出 */
.omikuji-cutin.cutin-special {
    background: radial-gradient(circle at center, rgba(255,215,0,0.15) 0%, transparent 60%);
}
.omikuji-cutin.cutin-special .omikuji-cutin-lines {
    background: repeating-linear-gradient(
        60deg,
        transparent,
        transparent 12px,
        rgba(255,215,0,0.12) 12px,
        rgba(255,215,0,0.12) 14px
    );
    animation: cutinLinesScroll 0.15s linear infinite;
}
.omikuji-cutin.cutin-special .omikuji-cutin-img {
    filter: drop-shadow(0 0 30px rgba(255,215,0,0.8)) drop-shadow(0 0 60px rgba(255,215,0,0.3));
}

/* chisa special: 中央で光に包まれて現れる */
.omikuji-cutin.cutin-special.active[data-char="chisa"] .omikuji-cutin-img {
    animation: cutinChisaSpecial 2.5s ease-out forwards;
}
@keyframes cutinChisaSpecial {
    0%   { opacity: 0; transform: scale(0.3); filter: brightness(3) drop-shadow(0 0 60px rgba(255,183,197,0.8)); }
    15%  { opacity: 1; transform: scale(1.15); filter: brightness(1.5) drop-shadow(0 0 40px rgba(255,183,197,0.6)); }
    30%  { transform: scale(1); filter: brightness(1) drop-shadow(0 0 30px rgba(255,183,197,0.5)); }
    75%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.2); filter: brightness(2); }
}

/* yogami special: 運命開示の威圧的登場 */
.omikuji-cutin.cutin-special.active[data-char="yogami"] .omikuji-cutin-img {
    animation: cutinYogamiSpecial 2.5s ease-out forwards;
}
@keyframes cutinYogamiSpecial {
    0%   { opacity: 0; transform: scale(3) rotate(15deg); filter: brightness(0.3); }
    8%   { opacity: 1; transform: scale(0.9) rotate(-2deg); filter: brightness(1.8); }
    16%  { transform: scale(1.05) rotate(0deg); filter: brightness(1); }
    75%  { opacity: 1; transform: scale(1); }
    85%  { opacity: 1; transform: scale(1.05); filter: brightness(1.5); }
    100% { opacity: 0; transform: scale(0.5); filter: brightness(3); }
}

/* suzune special: 全力で飛び込んでくる */
.omikuji-cutin.cutin-special.active[data-char="suzune"] .omikuji-cutin-img {
    animation: cutinSuzuneSpecial 2.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes cutinSuzuneSpecial {
    0%   { opacity: 0; transform: translateX(-120%) rotate(-25deg) scale(1.3); }
    15%  { opacity: 1; transform: translateX(0) rotate(8deg) scale(1.1); }
    25%  { transform: translateX(-2%) rotate(-5deg) scale(1); }
    35%  { transform: translateX(2%) rotate(3deg) scale(1.05); }
    45%  { transform: translateX(0) rotate(0deg) scale(1); }
    75%  { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translateX(120%) rotate(15deg) scale(1.2); }
}

/* --- お祝い演出 (celebration) --- */
.omikuji-celebration {
    position: absolute;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
}
.omikuji-celebration.active {
    opacity: 1;
    background: linear-gradient(
        135deg,
        rgba(255,0,0,0.1),
        rgba(255,127,0,0.1),
        rgba(255,255,0,0.1),
        rgba(0,255,0,0.1),
        rgba(0,0,255,0.1),
        rgba(139,0,255,0.1)
    );
    background-size: 400% 400%;
    animation: rainbowBg 2s ease infinite;
}
@keyframes rainbowBg {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.omikuji-stage.celebrating {
    animation: celebrationShake 0.5s ease-in-out infinite;
}
@keyframes celebrationShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 2px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-2px, -1px); }
}

/* --- お祝いテキスト --- */
.omikuji-celebration-text {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    text-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        0 0 20px rgba(255, 215, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.6s ease-in;
    pointer-events: none;
    z-index: 56;
    letter-spacing: 0.05em;
}

/* ========================================
   カットイン演出スタイルバリエーション
   ======================================== */

/* --- scene: 背景付きシーンカットイン（全画面フェード） --- */
.omikuji-cutin.cutin-style-scene .omikuji-cutin-lines {
    opacity: 0 !important;
}
.omikuji-cutin.cutin-style-scene .omikuji-cutin-img {
    /* base class already handles width/height/object-fit/position */
}
.omikuji-cutin.cutin-style-scene.active .omikuji-cutin-img {
    animation: cutinSceneFadeIn 2.2s ease-out forwards !important;
}
@keyframes cutinSceneFadeIn {
    0%   { opacity: 0; transform: scale(1.15); }
    12%  { opacity: 1; transform: scale(1.08); }
    75%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.98); }
}

/* --- zoom: 中央からズームイン＋回転 --- */
.omikuji-cutin.cutin-style-zoom.active .omikuji-cutin-img {
    animation: cutinZoomIn 2s ease-out forwards !important;
}
@keyframes cutinZoomIn {
    0%   { opacity: 0; transform: scale(0.1) rotate(180deg); }
    20%  { opacity: 1; transform: scale(1.2) rotate(-10deg); }
    35%  { transform: scale(0.95) rotate(5deg); }
    50%  { transform: scale(1.05) rotate(-2deg); }
    70%  { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(1.5) rotate(10deg); }
}

/* --- multi: 複数ポーズ高速切り替え --- */
.omikuji-cutin.cutin-style-multi.active .omikuji-cutin-img {
    animation: cutinMultiFlash 0.2s ease-in-out infinite alternate !important;
    opacity: 1 !important;
}
@keyframes cutinMultiFlash {
    0%   { filter: brightness(1); transform: scale(1); }
    100% { filter: brightness(1.4); transform: scale(1.05); }
}
.omikuji-cutin.cutin-style-multi .omikuji-cutin-lines {
    background: repeating-linear-gradient(
        30deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.15) 8px,
        rgba(255,255,255,0.15) 10px
    ) !important;
    animation: cutinLinesScroll 0.1s linear infinite !important;
}

/* ========================================
   神託演出バリエーション
   ======================================== */

/* --- 神託: rise（画面下から上昇） --- */
.omikuji-reach-text.reach-rise {
    font-size: clamp(48px, 12vw, 96px);
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,215,0,0.4);
    animation: reachRise 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes reachRise {
    0%   { opacity: 0; transform: translateY(100vh); }
    30%  { opacity: 1; }
    60%  { transform: translateY(-5%); }
    80%  { transform: translateY(2%); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- 神託: spin（回転しながら登場） --- */
.omikuji-reach-text.reach-spin {
    font-size: clamp(48px, 12vw, 96px);
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,215,0,0.4);
    animation: reachSpin 1.2s cubic-bezier(0.17, 0.67, 0.24, 1.2) forwards;
}
@keyframes reachSpin {
    0%   { opacity: 0; transform: scale(0) rotate(-720deg); }
    50%  { opacity: 1; transform: scale(1.2) rotate(15deg); }
    70%  { transform: scale(0.95) rotate(-5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- 神託: shockwave（衝撃波リング付き） --- */
.omikuji-reach-text.reach-shockwave {
    font-size: clamp(48px, 12vw, 96px);
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,215,0,0.4);
    animation: reachShockwave 1.3s ease-out forwards;
}
.omikuji-reach-text.reach-shockwave::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid rgba(255,215,0,0.8);
    transform: translate(-50%, -50%) scale(0);
    animation: shockwaveRing 1s ease-out forwards;
}
@keyframes reachShockwave {
    0%   { opacity: 0; transform: scale(0.5); }
    20%  { opacity: 1; transform: scale(1.3); }
    40%  { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes shockwaveRing {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 4px; }
    100% { transform: translate(-50%, -50%) scale(40); opacity: 0; border-width: 1px; }
}

/* ========================================
   天啓演出バリエーション
   ======================================== */

/* --- 天啓: rise（画面下から金色軌跡で上昇） --- */
.omikuji-reach-text.super-reach-rise {
    font-size: clamp(40px, 10vw, 80px);
    color: #FFD700;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.5));
    animation: superReachRise 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes superReachRise {
    0%   { opacity: 0; transform: translateY(80vh) scale(0.8); }
    40%  { opacity: 1; transform: translateY(-5%) scale(1.1); }
    60%  { transform: translateY(2%) scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- 天啓: goldfire（金炎エフェクト） --- */
.omikuji-reach-text.super-reach-goldfire {
    font-size: clamp(40px, 10vw, 80px);
    color: #FFD700;
    animation: superReachGoldfire 1.5s ease-out forwards;
}
.omikuji-reach-text.super-reach-goldfire .reach-text-img {
    filter: drop-shadow(0 0 20px rgba(255,215,0,0.9))
            drop-shadow(0 0 40px rgba(255,180,0,0.6))
            drop-shadow(0 0 80px rgba(255,140,0,0.3));
    animation: goldFirePulse 0.3s ease-in-out infinite alternate;
}
@keyframes superReachGoldfire {
    0%   { opacity: 0; transform: scale(0.3); }
    15%  { opacity: 1; transform: scale(1.5); }
    30%  { transform: scale(0.9); }
    50%  { transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes goldFirePulse {
    0%   { filter: drop-shadow(0 0 20px rgba(255,215,0,0.9)) drop-shadow(0 0 40px rgba(255,180,0,0.6)); }
    100% { filter: drop-shadow(0 0 35px rgba(255,215,0,1)) drop-shadow(0 0 60px rgba(255,140,0,0.8)); }
}

/* --- 天啓: split（横引き伸ばし→収束） --- */
.omikuji-reach-text.super-reach-split {
    font-size: clamp(40px, 10vw, 80px);
    color: #FFD700;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.5));
    animation: superReachSplit 1.4s cubic-bezier(0.17, 0.67, 0.24, 1.2) forwards;
}
@keyframes superReachSplit {
    0%   { opacity: 0; transform: scaleX(5) scaleY(0.1); }
    20%  { opacity: 1; transform: scaleX(1.3) scaleY(0.8); }
    40%  { transform: scaleX(0.9) scaleY(1.1); }
    60%  { transform: scaleX(1.05) scaleY(0.97); }
    100% { opacity: 1; transform: scale(1); }
}

/* ========================================
   デバッグログパネル
   ======================================== */
.omikuji-debug-section {
    margin-top: 16px;
    padding: 0 10px;
}
.btn-debug-toggle {
    display: block;
    width: 100%;
    padding: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}
.btn-debug-toggle:hover {
    background: rgba(255,255,255,0.1);
    color: #aaa;
}
.omikuji-debug-panel {
    margin-top: 8px;
    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 12px;
    position: relative;
}
.omikuji-debug-log {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #c0c0c0;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}
.omikuji-debug-log .log-header { color: #FFD700; font-weight: bold; }
.omikuji-debug-log .log-ok { color: #5FAD56; }
.omikuji-debug-log .log-warn { color: #E6A817; }
.omikuji-debug-log .log-err { color: #E63946; }
.omikuji-debug-log .log-dim { color: #666; }
.btn-debug-copy {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    background: rgba(212,175,55,0.15);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 6px;
    color: #D4AF37;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}
.btn-debug-copy:hover {
    background: rgba(212,175,55,0.25);
}
.btn-debug-copy.copied {
    background: rgba(95,173,86,0.2);
    border-color: rgba(95,173,86,0.5);
    color: #5FAD56;
}