:root {
    --color-bg-white: #ffffff;
    --color-phone-bg: #fdfdfb;
    --color-dark: #1a1a1a;
    --color-primary: #ffd83d; /* カジュアルな元気イエロー */
    --color-primary-hover: #ffcc00;
    --color-accent: #ff6b6b; /* ポップな赤 */
    --font-casual: 'Kiwi Maru', 'Yusei Magic', 'Hiragino Kaku Gothic ProN', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--color-bg-white); /* 周りの余白は白背景 */
    color: var(--color-dark);
    font-family: var(--font-casual);
    overflow-x: hidden;
    overflow-y: auto !important; /* スマホ実機で全体の縦スクロールを100%解放 */
    height: auto !important;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 縦長スクロール時に上から自然に配置するため上詰めに変更 */
}

/* スマホ優先のフレーム構成 */
.phone-frame {
    position: relative;
    width: 100%;
    max-width: 450px; /* スマートフォンサイズ */
    min-height: 100vh;
    height: auto !important; /* 縦幅の固定を解除し、内容量に応じて自然に伸びる設計へ */
    background-color: var(--color-phone-bg);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); /* 滑らかな高級シャドウ */
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    overflow-x: hidden;
    overflow-y: visible !important; /* 実機でのスクロールロックを完全解除 */
}

#app {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 100vh;
}

/* 画面共通スタイル */
.screen {
    display: none; /* 非表示時はドキュメントフローから完全に除外し、実機でのスクロール干渉を完全解決 */
    width: 100%;
    min-height: 100vh;
    height: auto !important;
    position: relative; /* 重ね合わせ(absolute)をやめ、通常の自然なスクロールフローに乗せる */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    background-color: var(--color-phone-bg);
}

.screen.active {
    display: flex; /* アクティブな画面だけを画面上に実体化して表示 */
    flex-direction: column;
    opacity: 1;
    pointer-events: all;
    z-index: 10;
}

/* ==========================================
   画面 1: TOP画面 (縦フィットレイアウト)
   ========================================== */
.top-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%; /* 100%の高さを確保しつつ */
    height: auto !important; /* 超えた分は下に自動で伸ばす */
    justify-content: flex-start; /* 上詰めにして、下にスクロールさせやすくする */
    align-items: center;
    background-color: var(--color-phone-bg);
    padding: 15px 0 40px 0; /* 最下部に十分な余白を設定 */
    gap: 20px; /* 各要素の間に適切な間隔を設定 */
}

.top-image-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* スクロール時に縮小されるのを防ぐ */
}

.top-kami-img {
    width: 100%;
    height: auto; /* 高さを自動にして、アスペクト比を完璧に維持 */
    display: block;
}

.top-action-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    flex-shrink: 0; /* スクロール時に縮小されるのを防ぐ */
}

.bottom-image-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* スクロール時に縮小されるのを防ぐ */
}

.top-bottom-img {
    width: 100%;
    height: auto; /* 高さを自動にして、アスペクト比を完璧に維持 */
    display: block;
}

/* ポップでカジュアルな「ひけ！」ボタン */
.btn-pull {
    font-family: var(--font-casual);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-dark);
    background-color: var(--color-primary);
    padding: 15px 60px;
    border: 4px solid var(--color-dark);
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 4px 6px 0 var(--color-dark); /* パキッとしたコミック風の影 */
    transform: rotate(-1deg);
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    outline: none;
    position: relative;
    overflow: hidden;
}

.btn-pull::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: rotate(45deg);
    transition: none;
    opacity: 0;
}

.btn-pull:hover {
    background-color: var(--color-primary-hover);
    transform: scale(1.05) rotate(1deg) translateY(-2px);
    box-shadow: 6px 8px 0 var(--color-dark);
}

.btn-pull:active {
    transform: scale(0.95) rotate(-2deg) translateY(4px);
    box-shadow: 0 2px 0 var(--color-dark);
}

/* ==========================================
   画面 2: 選択画面
   ========================================== */
.selection-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 30px 20px;
    gap: 25px;
}

.sub-title {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 5px;
    border-bottom: 3px dashed var(--color-primary);
    padding-bottom: 5px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 85px);
    grid-gap: 15px;
    justify-content: center;
    margin: 10px 0;
}

/* 下手うま・カジュアルカードのスタイリング (裏面) */
.card {
    --gap: 15px;
    width: 85px;
    height: 125px;
    background-color: #fffdec;
    border: 4px solid var(--color-dark);
    /* 不均等な角丸で手書き感を演出 */
    border-radius: 18px 14px 20px 16px / 16px 20px 14px 18px;
    cursor: pointer;
    box-shadow: 3px 4px 0 var(--color-dark);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    overflow: hidden;
}

/* カジュアルカードの中身デザイン */
.card::before {
    content: '?';
    font-family: var(--font-casual);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-accent);
    transform: rotate(-10deg);
}

.card:hover {
    transform: translateY(-6px) scale(1.05) rotate(3deg);
    box-shadow: 5px 8px 0 var(--color-dark);
}

.card:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 1px 2px 0 var(--color-dark);
}

/* シャッフルアニメーション中 */
.card.tarot-shuffling {
    animation: tarotKurukuru 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    z-index: calc(10 + var(--i));
}

.card.tarot-shuffling-fast {
    animation: tarotKurukuruFast 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    z-index: calc(10 + var(--i));
}

@keyframes tarotKurukuru {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    20% {
        /* 中央に集まる */
        transform: translate(calc(var(--dx) * (100% + var(--gap))), calc(var(--dy) * (100% + var(--gap)))) scale(0.85) rotate(0deg);
    }
    40% {
        /* ファン状に広がる */
        transform: translate(calc(var(--dx) * (100% + var(--gap))), calc(var(--dy) * (100% + var(--gap)))) scale(0.85) rotate(calc(-45deg + (var(--i) * 12deg))) translateY(-30px);
    }
    70% {
        /* 高速回転 */
        transform: translate(calc(var(--dx) * (100% + var(--gap))), calc(var(--dy) * (100% + var(--gap)))) scale(0.85) rotate(calc(360deg - 45deg + (var(--i) * 12deg))) translateY(-30px);
    }
    85% {
        /* もう一度中央に集まる */
        transform: translate(calc(var(--dx) * (100% + var(--gap))), calc(var(--dy) * (100% + var(--gap)))) scale(0.85) rotate(360deg);
    }
    100% {
        /* グリッドに配られる */
        transform: translate(0, 0) scale(1) rotate(360deg);
    }
}

@keyframes tarotKurukuruFast {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    20% {
        transform: translate(calc(var(--dx) * (100% + var(--gap))), calc(var(--dy) * (100% + var(--gap)))) scale(0.85) rotate(0deg);
    }
    60% {
        transform: translate(calc(var(--dx) * (100% + var(--gap))), calc(var(--dy) * (100% + var(--gap)))) scale(0.85) rotate(360deg);
    }
    80% {
        transform: translate(calc(var(--dx) * (100% + var(--gap))), calc(var(--dy) * (100% + var(--gap)))) scale(0.85) rotate(540deg);
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(720deg);
    }
}

.selection-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
}

/* 汎用カジュアルボタン */
.btn.casual {
    font-family: var(--font-casual);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-dark);
    background-color: var(--color-bg-white);
    padding: 10px 30px;
    border: 3px solid var(--color-dark);
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--color-dark);
    transition: all 0.15s ease;
    outline: none;
}

.btn.casual:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 var(--color-dark);
    background-color: #fdfdfd;
}

.btn.casual:active {
    transform: translateY(2px);
    box-shadow: 1px 1px 0 var(--color-dark);
}

.btn.casual.outline {
    background-color: var(--color-primary);
}

.btn.casual.outline:hover {
    background-color: var(--color-primary-hover);
}

.btn.casual.text-only {
    border: none;
    box-shadow: none;
    font-size: 0.95rem;
    opacity: 0.7;
    background: transparent;
}

.btn.casual.text-only:hover {
    transform: none;
    opacity: 1;
}

/* ==========================================
   画面 3: アニメーション画面 (シャッフル演出)
   ========================================== */
#screen-animation {
    background-color: #fffdf6; /* やさしい黄色の背景 */
    z-index: 20;
}

.animation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 宙に浮く大きなカジュアルカード */
.card-back.large {
    width: 140px;
    height: 210px;
    background-color: #fffdec;
    border: 5px solid var(--color-dark);
    border-radius: 24px 20px 26px 22px / 22px 26px 20px 24px;
    box-shadow: 6px 8px 0 var(--color-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 3;
    animation: floatCard 2.5s infinite ease-in-out alternate;
}

.inner-design {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quest-mark {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--color-accent);
    transform: rotate(-10deg);
    animation: pulseQuest 1s infinite alternate;
}

.glow-ring {
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 216, 61, 0.4) 0%, transparent 70%);
    animation: pulseGlow 2s infinite alternate;
    z-index: 1;
}

.animation-text {
    margin-top: 40px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-dark);
    z-index: 3;
}

@keyframes floatCard {
    0% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(-20px) rotate(4deg); }
}

@keyframes pulseQuest {
    0% { transform: rotate(-10deg) scale(0.95); }
    100% { transform: rotate(-5deg) scale(1.05); }
}

@keyframes pulseGlow {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0.9; }
}

/* ==========================================
   画面 4: 結果画面 (カード画像直接表示)
   ========================================== */
#screen-result {
    z-index: 30;
    background-color: var(--color-phone-bg);
}

.result-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 上詰めにし、スクロールを自然にする */
    min-height: 100%; /* 高さを100%確保しつつ */
    height: auto !important; /* コンテンツが超えたら下に自動で伸びる */
    padding: 20px 10px 40px 10px; /* 最下部に十分な余白を設定 */
    gap: 20px;
}

/* カード画像をスマホ画面内で最大表示するラッパー */
#result-card-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    flex-shrink: 0; /* スクロール時に縮小されるのを防ぐ */
}

#result-card-image {
    width: 90%; /* スマホ左右に適度な余白を残して広げる */
    max-width: 320px; /* 横幅が大きくなりすぎないように上品に制限 */
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    border: 3px solid var(--color-dark);
    box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: scale(0.95);
}

.screen.active #result-card-image {
    animation: popInCard 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popInCard {
    0% {
        opacity: 0;
        transform: scale(0.95) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.result-ui-overlay {
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn.casual.primary {
    background-color: var(--color-primary);
    width: 80%;
    max-width: 300px;
    padding: 14px 20px;
    font-size: 1.2rem;
    border-radius: 18px;
    border: 4px solid var(--color-dark);
    box-shadow: 4px 4px 0 var(--color-dark);
}

.btn.casual.primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 5px 5px 0 var(--color-dark);
}

.btn.casual.primary:active {
    transform: translateY(2px);
    box-shadow: 1px 1px 0 var(--color-dark);
}

/* ==========================================
   トランジション用のフラッシュエフェクト
   ========================================== */
.flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity 0.4s ease;
}

.flash-overlay.flashing {
    opacity: 1;
    transition: none;
}

/* ==========================================
   神意乱入システム（モザイク、激震、黒背景、SSRレインボー）
   ========================================== */

/* 1. 乱入状態 (人影・メタル・SSR等は白背景) */
.phone-frame.intrusion-active {
    background-color: #ffffff !important;
    transition: background-color 0.5s ease;
}

/* 乱入時は親要素であるbody全体のスクロールで自然に最下部まで見せるため、子要素でのoverflow指定を解除してバブリングを保証 */
.phone-frame.intrusion-active #screen-result {
    background-color: #ffffff !important;
}

/* 通常モンスターのみ黒背景にするクラス */
.phone-frame.intrusion-active.bg-black,
.phone-frame.intrusion-active.bg-black #screen-result {
    background-color: #000000 !important;
}

/* 乱入時は結果コンテナ全体の高さ配分をスクロール仕様に変更 */
.phone-frame.intrusion-active .result-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* 子要素を左右横幅いっぱいに引き伸ばす */
    justify-content: flex-start !important; /* 上から順に流れるように配置 */
    height: auto !important; /* 高さ制限を外してスクロールさせる */
    min-height: 100%;
    padding: 0 0 60px 0 !important; /* 最下部に十分な余白を設定 */
    gap: 0px !important;
}

.phone-frame.intrusion-active #result-card-wrapper {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    display: block !important;
}

.phone-frame.intrusion-active #result-card-image {
    width: 100% !important;
    max-width: none !important; /* 通常画像の制限(320px)を解除し、スマホ幅いっぱいに拡大表示 */
    height: auto !important;
    max-height: none !important; /* 画面高さいっぱいに制限なく広げる */
    object-fit: unset !important; /* contain による縮小を完全に解除 */
    border: none !important; /* 境界線をなくしてスマホ画面全体に没入させる */
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block !important;
}

/* 乱入時の「もう一度ひく」ボタンの押し出しエリア */
.phone-frame.intrusion-active .result-ui-overlay {
    margin-top: 50px !important; /* 画像の下に大きく間隔を空けて、画面外に押し出す */
    margin-bottom: 20px !important;
    flex: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* 黒背景時の「もう一度ひく」ボタン（白い光沢と赤のスタイリッシュ仕様） */
.phone-frame.intrusion-active.bg-black .btn.casual.primary {
    background-color: var(--color-accent) !important; /* ポップな赤 */
    color: #ffffff !important;
    border: 4px solid #ffffff !important;
    box-shadow: 4px 4px 0 #ffffff !important;
}

.phone-frame.intrusion-active.bg-black .btn.casual.primary:hover {
    background-color: #ff4747 !important;
    transform: translateY(-2px);
    box-shadow: 6px 6px 0 #ffffff !important;
}

.phone-frame.intrusion-active.bg-black .btn.casual.primary:active {
    transform: translateY(2px);
    box-shadow: 1px 1px 0 #ffffff !important;
}

/* 2. モザイク / グリッチエフェクト */
.mosaic-distortion {
    animation: mosaicIn 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes mosaicIn {
    0% {
        filter: blur(0px) contrast(100%);
        transform: scale(1);
    }
    15% {
        filter: blur(8px) contrast(150%) brightness(1.2);
        transform: scale(1.03) translate(2px, -2px);
    }
    30% {
        filter: blur(15px) contrast(300%) hue-rotate(90deg);
        transform: scale(0.97) translate(-3px, 3px);
    }
    45% {
        filter: blur(2px) contrast(80%) brightness(0.5) invert(0.8);
        transform: scale(1.05) rotate(1deg);
    }
    60% {
        filter: blur(25px) contrast(400%) saturate(5) hue-rotate(180deg);
        transform: scale(0.95);
    }
    75% {
        filter: blur(12px) contrast(200%) brightness(1.5);
        transform: scale(1.02) translate(3px, 1px);
    }
    90% {
        filter: blur(4px) contrast(120%) brightness(0.8);
        transform: scale(0.98);
    }
    100% {
        filter: blur(0px) contrast(100%);
        transform: scale(1);
    }
}

/* 3. 激震 (激しい画面揺れ) */
.shake-heavy {
    animation: shakeHeavyAnim 0.6s infinite;
}

@keyframes shakeHeavyAnim {
    0% { transform: translate(3px, 2px) rotate(0deg); }
    10% { transform: translate(-2px, -3px) rotate(-1.5deg); }
    20% { transform: translate(-4px, 1px) rotate(1.5deg); }
    30% { transform: translate(1px, 4px) rotate(0deg); }
    40% { transform: translate(3px, -2px) rotate(2deg); }
    50% { transform: translate(-2px, 3px) rotate(-2deg); }
    60% { transform: translate(-4px, 2px) rotate(0deg); }
    70% { transform: translate(3px, 2px) rotate(-1.5deg); }
    80% { transform: translate(-2px, -2px) rotate(1.5deg); }
    90% { transform: translate(3px, 3px) rotate(0deg); }
    100% { transform: translate(2px, -3px) rotate(-1deg); }
}

/* 4. グリッチ・警告ノイズレイヤー */
.intrusion-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#intrusion-noise-overlay.active {
    opacity: 0.25;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 2px,
        transparent 2px,
        transparent 4px
    );
    animation: scanlines 0.2s infinite linear;
}

@keyframes scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 20px; }
}

/* 5. 激レアSSR レインボー＆ゴールド演出 */
#ssr-rainbow-overlay.active {
    opacity: 0.35;
    background: conic-gradient(
        from 0deg,
        #ff3b30,
        #ff9500,
        #ffcc00,
        #4cd964,
        #5ac8fa,
        #007aff,
        #5856d6,
        #ff3b30
    );
    mix-blend-mode: color-dodge;
    animation: rotateRainbow 3s infinite linear;
}

@keyframes rotateRainbow {
    0% { transform: rotate(0deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1.2); }
}

/* SSRテキストカットイン */
.ssr-cutin {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-family: var(--font-casual);
    font-size: 2.8rem;
    font-weight: 900;
    color: #ffd83d;
    text-shadow: 
        0 0 10px rgba(255, 216, 61, 0.8),
        -3px -3px 0 #000,  
         3px -3px 0 #000,
        -3px  3px 0 #000,
         3px  3px 0 #000;
    z-index: 110;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.ssr-cutin.active {
    animation: ssrCutinAnim 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes ssrCutinAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(-15deg);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    }
    25% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    75% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -30%) scale(1.3) rotate(10deg);
    }
}

/* 6. 「試練が発生」真っ黒警告オーバーレイ */
.intrusion-alert-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 150; /* 常に最前面に配置 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.intrusion-alert-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.alert-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.alert-glitch-text {
    font-family: var(--font-casual);
    font-size: 2.6rem;
    font-weight: 900;
    color: #ff3b30; /* ポップな赤 */
    text-shadow: 
        0 0 15px rgba(255, 59, 48, 0.9),
        -2px -2px 0 #fff,  
         2px -2px 0 #fff,
        -2px  2px 0 #fff,
         2px  2px 0 #fff; /* 白い極太縁線 */
    letter-spacing: 5px;
    animation: alertGlitchBlink 0.15s infinite alternate ease-in-out;
    white-space: nowrap;
}

@keyframes alertGlitchBlink {
    0% {
        opacity: 0.3;
        transform: scale(0.96) rotate(-2deg);
        filter: hue-rotate(0deg);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.04) rotate(1deg) translate(2px, -1px);
    }
    100% {
        opacity: 1;
        transform: scale(1.02) rotate(-1deg);
        filter: hue-rotate(15deg);
    }
}

/* 7. 分岐型アドベンチャー＆神託OS統合スタイル */
.adventure-ui-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
    margin-top: 15px;
    margin-bottom: 25px;
    align-items: center;
    box-sizing: border-box;
}

/* 選択肢ボタンの共通デザイン */
.btn-choice {
    width: 100%;
    max-width: 280px;
    padding: 14px;
    font-family: var(--font-casual);
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 8px;
    border: 3px solid #ffffff;
    cursor: pointer;
    text-align: center;
    box-shadow: 4px 4px 0px #ffffff;
    transition: all 0.15s ease;
    user-select: none;
}

/* 会ってみる・ついていく・戦うなどの積極的アクション用 (赤/光沢) */
.btn-choice.action {
    background-color: var(--color-accent); /* 赤 */
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 4px 4px 0px #ffffff;
}

.btn-choice.action:hover {
    background-color: #ff4747;
    transform: translateY(-2px);
    box-shadow: 6px 6px 0px #ffffff;
}

.btn-choice.action:active {
    transform: translateY(2px);
    box-shadow: 1px 1px 0px #ffffff;
}

/* 戻る・逃げるなどの回避的アクション用 (白/黒) */
.btn-choice.cancel {
    background-color: #222222;
    color: #ffffff;
    border-color: #888888;
    box-shadow: 4px 4px 0px #888888;
}

.btn-choice.cancel:hover {
    background-color: #333333;
    transform: translateY(-2px);
    box-shadow: 6px 6px 0px #888888;
}

.btn-choice.cancel:active {
    transform: translateY(2px);
    box-shadow: 1px 1px 0px #888888;
}

/* 神託OS YES/NO占い誘導ボタンエリア */
.oracle-trigger-area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 25px;
    flex-shrink: 0;
}

.btn-mini-oracle {
    background: #000000;
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-family: var(--font-casual);
    font-weight: 900;
    cursor: pointer;
    border-radius: 4px;
    letter-spacing: 1px;
    box-shadow: 3px 3px 0px #ffffff;
    transition: all 0.2s;
}

.btn-mini-oracle:hover {
    background: #ff3b30;
    color: #ffffff;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px #ffffff;
}

.btn-mini-oracle:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #ffffff;
}

/* 乱入なし（通常）画面での誘導ボタン：白背景用 */
.phone-frame:not(.intrusion-active) .btn-mini-oracle {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    box-shadow: 3px 3px 0px #000000;
}
.phone-frame:not(.intrusion-active) .btn-mini-oracle:hover {
    background: #000000;
    color: #ffffff;
    box-shadow: 4px 4px 0px #000000;
}

/* 神託OS iframe 埋め込み全画面コンテナ */
.oracle-iframe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 500; /* 全画面カードの最前面 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
}

.oracle-iframe-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.oracle-iframe-overlay iframe {
    width: 100%;
    flex: 1;
    border: none;
}

.btn-close-oracle {
    background-color: #111111;
    color: #ff3b30;
    border: none;
    border-bottom: 2px solid #222222;
    padding: 14px;
    font-size: 1rem;
    font-family: var(--font-casual);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.btn-close-oracle:hover {
    background-color: #ff3b30;
    color: #ffffff;
}

/* アドベンチャー進行中は通常のリトライボタンエリアを完全に非表示化 */
.phone-frame.adventure-active .result-ui-overlay {
    display: none !important;
}

/* 神託OS起動中は元の画面のスクロールを完全に抑止 */
.phone-frame.oracle-active #screen-result {
    overflow-y: hidden !important;
}