/* --- コンテナ（外枠）修正版 --- */
body #ykqa-app { 
    max-width: 550px !important; 
    /* ▼ 10px から 20px に変更（飛び出すノイズのための安全地帯） */
    margin: 20px auto !important; 
    padding: 10px 15px !important; 
    background: #fff !important; 
    border-radius: 16px !important; 
    
    border: 6px solid transparent; 
    box-shadow: 0 0 0 6px #111, 0 15px 35px rgba(0,0,0,0.2); 

    font-family: sans-serif !important; 
    color: #333 !important; 
    position: relative !important; 
    transition: box-shadow 0.3s !important; 
    overflow: hidden !important; /* 通常時はしっかり隠す */
}

/* --- 枠内背景画像（通常時 / エクスプロイト使用後） --- */
#ykqa-app::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background-image: var(--ykqa-bg-url, none) !important;
    background-size: cover !important;
    background-position: center top !important; /* 問題切り替え時のズレ防止：上端を固定 */
    background-repeat: no-repeat !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
}
#ykqa-app.ykqa-post-paradox::before {
    background-image: var(--ykqa-bg-post-paradox-url, var(--ykqa-bg-url, none)) !important;
}
/* メインコンテンツのみ position:relative（オーバーレイ・演出は position:absolute のまま） */
#ykqa-app > *:not(.ykqa-get-wrapper):not(.ykqa-awakening-flash):not(.ykqa-awakening-lightning):not(.ykqa-awakening-text):not(.ykqa-miss-popup):not(.ykqa-black-hole):not(.ykqa-shatter-layer):not(.ykqa-bug-text):not(.ykqa-turbo-cutin):not(.ykqa-mode-cutin-image):not([id="ykqa-paradox-overlay"]):not(.ykqa-gameover-overlay) {
    position: relative !important;
    z-index: 1 !important;
}

#ykqa-app.ykqa-urgent-mode-red { box-shadow: 0 0 0 6px #d32f2f, 0 0 20px #ff5252 !important; animation: none !important; }
#ykqa-app.ykqa-urgent-mode-yellow { box-shadow: 0 0 0 6px #ffab00, 0 0 20px #ffea00 !important; animation: none !important; }
#ykqa-app.ykqa-urgent-mode-red.ykqa-urgent-mode-yellow { box-shadow: -3px 0 0 3px #d32f2f, 3px 0 0 3px #ffab00, -8px 0 25px #ff5252, 8px 0 25px #ffea00 !important; animation: none !important; }

/* 通常時のフリーズ設定 */
#ykqa-app.ykqa-freeze-mode, #ykqa-app.ykqa-urgent-mode-red.ykqa-urgent-mode-yellow.ykqa-freeze-mode { box-shadow: 0 0 0 6px #0277bd, 0 0 25px #4fc3f7 !important; animation: none !important; }

/* 先読み待ち中（脆弱+最適などで在庫取得に時間がかかる場合の視覚的フィードバック） */
#ykqa-app.ykqa-stock-loading { opacity: 0.85 !important; pointer-events: none !important; }
#ykqa-app.ykqa-stock-loading::after {
    content: "読み込み中..." !important;
    position: absolute !important; top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(0,0,0,0.7) !important; color: #fff !important;
    padding: 8px 16px !important; border-radius: 8px !important;
    font-size: 0.9em !important; font-weight: bold !important;
    z-index: 9999 !important; white-space: nowrap !important;
}

/* レーザー演出 */
.ykqa-scan-laser { position: absolute !important; left: -10px !important; right: -10px !important; width: auto !important; height: 100px !important; pointer-events: none !important; z-index: 9999 !important; background: linear-gradient( to bottom, transparent 0%, rgba(123, 31, 162, 0.2) 10%, rgba(186, 104, 200, 0.6) 30%, rgba(255, 255, 255, 1) 48%, rgba(255, 255, 255, 1) 52%, rgba(186, 104, 200, 0.6) 70%, rgba(123, 31, 162, 0.2) 90%, transparent 100% ) !important; box-shadow: 0 0 15px #fff, 0 0 30px #e040fb, 0 0 50px rgba(123, 31, 162, 0.8), 0 0 70px rgba(106, 27, 154, 0.5) !important; border: none !important; border-radius: 50% !important; mix-blend-mode: screen !important; opacity: 0; box-sizing: border-box !important; filter: blur(2px) !important; }

.ykqa-status-row { display: flex !important; gap: 10px !important; margin: 0 0 6px 0 !important; align-items: stretch !important; }
.ykqa-status-cell { flex: 1 !important; border-radius: 6px !important; border: 2px solid #e0e0e0 !important; background: #f5f5f5 !important; color: #999 !important; text-align: center !important; font-weight: bold !important; font-size: 0.9em !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 6px 2px !important; line-height: 1.1 !important; transition: all 0.3s !important; }
.ykqa-status-cell.st-limit.active { background: #d32f2f !important; color: #fff !important; border-color: #b71c1c !important; box-shadow: 0 0 8px rgba(211, 47, 47, 0.5) !important; }
.ykqa-status-cell.st-timer { background: #212121 !important; color: #fff !important; border-color: #444 !important; font-size: 1.0em !important; }
.ykqa-status-cell.st-multi.active { background: #ffab00 !important; color: #fff !important; border-color: #ff8f00 !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important; box-shadow: 0 0 15px rgba(255, 143, 0, 0.9) !important; }
#ykqa-app #status-limit.frozen-timer, #ykqa-app #ykqa-header-timer-bar.frozen-timer { background: #0277bd !important; color: #e1f5fe !important; border-color: #00b0ff !important; animation: none !important; box-shadow: none !important; }
/* 枠虹ネオン＋内部凍結の両立：charge-ready と frozen-timer が両方あるとき */
#ykqa-app #ykqa-header-timer-bar.charge-ready.frozen-timer {
    position: relative !important;
    background: transparent !important;   /* ::after の凍結背景を見せる */
    color: #e1f5fe !important;
    border-color: transparent !important;  /* 枠は ::before の虹ネオンに任せる */
    animation: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}
/* 凍結背景を ::after で確実に表示（.st-timer 等の上書きを防ぐ） */
#ykqa-app #ykqa-header-timer-bar.charge-ready.frozen-timer::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: #0277bd !important;
    border-radius: inherit !important;
    z-index: -2 !important;
    pointer-events: none !important;
}
/* 凍結中も ::before の虹枠アニメーションを維持 */
#ykqa-app #ykqa-header-timer-bar.charge-ready.frozen-timer::before {
    animation: ykqa-plasma-border-outer 1.5s linear infinite !important;
}
#ykqa-timer { min-width: 4.5em !important; display: inline-block !important; text-align: center !important; }
.timer-blue { color: #80d4ff !important; } .timer-yellow { color: #ffea00 !important; } .timer-red { color: #ff5252 !important; animation: ykqa-blink 0.5s infinite alternate !important; }
@keyframes ykqa-blink { from { opacity: 1; } to { opacity: 0.3; } }

/* --- 補足メモ（チュートリアル説明欄） --- */
.ykqa-q-note {
    /* ▼ デザイン・サイズは元通り */
    background: #2e7d32 !important;
    color: #fff !important;
    padding: 5px !important;
    border-radius: 4px !important;
    margin-bottom: 5px !important;
    text-align: center !important;
    font-weight: bold !important;
    border: 1px solid #1b5e20 !important;
    font-size: 0.9em !important;
    
    /* ▼ ここが重要：文字のにじみを防ぐため、本体（文字）は一切動かさない */
    position: relative !important;
    z-index: 1 !important;
}

/* ▼ 文字とは無関係な「裏側のパーツ」を作って、それだけを光らせる */
.ykqa-q-note::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0; /* 本体と同じサイズ */
    border-radius: inherit !important;
    z-index: -1 !important; /* 文字の裏側に隠す */
    pointer-events: none !important;
    
    /* ▼ 裏側のパーツだけをゆったり呼吸させる */
    animation: ykqa-note-pulse-bg 2.0s ease-in-out infinite alternate !important;
}

/* ▼ 微弱な光（外側へ柔らかく発光） */
@keyframes ykqa-note-pulse-bg {
    0% {
        box-shadow: none;
    }
    100% {
        box-shadow: 0 0 8px rgba(105, 240, 174, 0.6);
        background: rgba(255, 255, 255, 0.08); /* 背景をほんの少しだけ明るく見せる */
    }
}

.ykqa-q-image { display: block !important; width: auto !important; max-width: 100% !important; max-height: 180px !important; margin: 0 auto 5px auto !important; border-radius: 8px !important; object-fit: contain !important; }
.ykqa-sub-images-grid { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; justify-content: center !important; margin-bottom: 5px !important; }
.ykqa-sub-img { 
    width: auto !important; max-width: 49% !important; height: auto !important; 
    max-height: 180px !important; border-radius: 8px !important; 
    border: 2px solid #ccc !important; object-fit: contain !important; 
    background: #fff !important; 
}
.ykqa-question-area { position: relative; margin: 5px 0 8px 0; }
#ykqa-app h4 { font-size: 1.2em !important; font-weight: 900 !important; line-height: 1.35 !important; color: #2d3748 !important; text-align: center !important; background: #e2e8f0 !important; padding: 12px 10px 8px 10px !important; border-radius: 10px !important; margin: 0 !important; position: relative !important; display: block !important; overflow: hidden !important; z-index: 1 !important; }
.ykqa-q-badge { display: block !important; width: auto !important; margin: -12px -10px 6px -10px !important; padding: 5px 0 !important; background: #111 !important; color: #fff !important; font-size: 1.45rem !important; font-weight: 900 !important; font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif !important; letter-spacing: 1px !important; text-align: center !important; line-height: 1.0 !important; z-index: 10 !important; box-shadow: 0 2px 3px rgba(0,0,0,0.15) !important; }
.ykqa-q-text-body { position: relative !important; z-index: 2 !important; display: block !important; }
div#ykqa-app h4.ykqa-purple-text, #ykqa-app h4.ykqa-purple-text { background: linear-gradient(135deg, #7b1fa2, #4a148c) !important; color: #fff !important; border: 2px solid #6a1b9a !important; padding: 12px 15px 8px 15px !important; }
div#ykqa-app h4.ykqa-purple-text .ykqa-q-badge { background: rgba(255,255,255,0.25) !important; color: #fff !important; margin: -12px -15px 6px -15px !important; }

/* === テキスト回答用ボタン === */
/* 隙間を6pxに統一（marginは親のgapで制御するため0） */
.ykqa-options-area:not(.ykqa-options-grid-img) { display: flex !important; flex-direction: column !important; gap: 6px !important; contain: layout !important; }
.ykqa-options-area:not(.ykqa-options-grid-img) .ykqa-btn { margin: 0 !important; }
.ykqa-btn { display: block !important; width: 100% !important; padding: 10px 12px !important; margin: 0 0 6px 0 !important; background: #f7f9fc !important; border: 2px solid #cbd5e0 !important; border-bottom: 5px solid #a0aec0 !important; border-radius: 10px !important; cursor: pointer !important; text-align: left !important; font-size: 1.05em !important; color: #2d3748 !important; font-weight: bold !important; transition: transform 0.1s ease !important; box-sizing: border-box !important; position: relative !important; overflow: hidden !important; }
.ykqa-btn:hover { transform: translateY(-2px) !important; background: #fff !important; border-color: #a0aec0 !important; border-bottom: 5px solid #718096 !important; }
.ykqa-btn:active, .ykqa-btn.selected { transform: translateY(3px) !important; border-bottom: 2px solid #a0aec0 !important; background: #333 !important; color: #fff !important; border-color: #000 !important; }
.ykqa-btn.selected { border-bottom: 2px solid #000 !important; }

/* === 画像回答用レイアウト === */
.ykqa-options-grid-img { 
    display: flex !important; flex-wrap: wrap !important;
    justify-content: center !important; gap: 10px !important;
    margin-bottom: 6px !important; 
}
.ykqa-img-wrapper, .ykqa-btn, .ykqa-option-btn {
    touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important;
}
#ykqa-app.ykqa-paradox-lock .ykqa-option-btn,
#ykqa-app.ykqa-paradox-lock .ykqa-multi-confirm {
    pointer-events: none !important; cursor: not-allowed !important;
}
.ykqa-img-wrapper {
    background: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important;
    box-shadow: none !important; cursor: pointer !important; position: relative !important;
    flex: 0 0 180px !important; width: 180px !important; height: 180px !important;
    max-width: 48% !important; display: flex !important; justify-content: center !important; align-items: center !important;
    overflow: hidden !important;
}
.ykqa-img-wrapper img {
    display: block !important; width: 100% !important; height: 100% !important; object-fit: contain !important;
    border: 2px solid #ccc !important; border-radius: 12px !important; background: #fff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; transition: transform 0.1s, border-color 0.1s !important;
}
.ykqa-img-wrapper:hover img { transform: translateY(-3px) !important; box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important; border-color: #aaa !important; }
.ykqa-img-wrapper:active img { transform: scale(0.98) !important; }
.ykqa-img-wrapper.selected img { border: 4px solid #000 !important; box-shadow: 0 0 0 2px #fff inset !important; }
.ykqa-img-wrapper.selected::after {
    content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important;
    width: 14px !important; height: 26px !important; border-right: 6px solid #fff !important; border-bottom: 6px solid #fff !important;
    transform: translate(-50%, -65%) rotate(45deg) !important;
    filter: drop-shadow(2px 2px 0px #000) drop-shadow(-1px -1px 0px #000) drop-shadow(1px -1px 0px #000) drop-shadow(-1px 1px 0px #000) !important;
    z-index: 20 !important; pointer-events: none !important;
    animation: ykqa-check-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
@keyframes ykqa-check-pop { 0% { transform: translate(-50%, -65%) rotate(45deg) scale(0); opacity: 0; } 100% { transform: translate(-50%, -65%) rotate(45deg) scale(1); opacity: 1; } }
.ykqa-img-wrapper.selected::before {
    content: '' !important; position: absolute !important; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3) !important; border-radius: 12px !important; z-index: 10 !important; pointer-events: none !important;
}

.ykqa-confirm-btn { background: #333 !important; color: #fff !important; border: 3px solid rgba(255,255,255,0.35) !important; border-bottom: 4px solid #000 !important; text-align: center !important; font-weight: bold !important; margin-top: 6px !important; margin-bottom: 6px !important; opacity: 1 !important; cursor: pointer !important; width: 100% !important; padding: 10px 15px !important; border-radius: 8px !important; transition: all 0.1s !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 12px rgba(255,255,255,0.12) !important; }
.ykqa-confirm-btn:hover:not(:disabled) { background: #000 !important; transform: translateY(-1px) !important; border-color: rgba(255,255,255,0.5) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 0 16px rgba(255,255,255,0.18) !important; } 
.ykqa-confirm-btn:active:not(:disabled) { transform: translateY(3px) !important; border-bottom: 2px solid #000 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important; }
.ykqa-confirm-btn:disabled { background: #f0f0f1 !important; color: #a7aaad !important; border: 1px solid #dcdcde !important; border-bottom: 1px solid #dcdcde !important; cursor: not-allowed !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; }

.ykqa-submit-btn { background:#111 !important; color:#fff !important; border:1px solid #000 !important; text-align:center !important; font-weight:bold !important; margin-top:10px !important; padding: 12px !important; }
.ykqa-submit-btn:hover { background:#333 !important; }
.ykqa-items-area { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; gap: 6px 24px !important; margin-top: 6px !important; border-top: none !important; padding-top: 0 !important; align-items: center !important; overflow: visible !important; width: 100% !important; box-sizing: border-box !important; position: relative !important; }
/* アイコンは2列で幅を均等に。マスコットは別レイヤーで中央にオーバーレイ（重なりOK） */
.ykqa-turbo-mascot { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; z-index: 10001 !important; min-width: 80px !important; overflow: visible !important; }
.ykqa-turbo-mascot-stack { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; position: relative !important; }
.ykqa-mascot-magic-circle { position: absolute !important; left: 50% !important; bottom: 0 !important; width: 60px !important; height: auto !important; object-fit: contain !important; transform: translate(-50%, 2px) !important; z-index: 0 !important; pointer-events: none !important; }
.ykqa-mascot-tap-zone { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 50px !important; height: 100px !important; clip-path: inset(10px 0 6px 0) !important; z-index: 10002 !important; cursor: pointer !important; touch-action: manipulation !important; pointer-events: auto !important; box-sizing: border-box !important; }
.ykqa-turbo-mascot-inner { display: block !important; position: relative !important; width: 100px !important; height: 120px !important; z-index: 2 !important; margin-top: -2px !important; -webkit-animation: ykqa-turbo-float 2.5s ease-in-out infinite !important; animation: ykqa-turbo-float 2.5s ease-in-out infinite !important; }
.ykqa-mascot-static-img { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: auto !important; height: 100px !important; max-height: 120px !important; object-fit: contain !important; z-index: 0 !important; }
.ykqa-turbo-mascot-inner video { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 1 !important; }
/* 復元所持時：動画のアルファに沿ってマスコット自体に虹ネオンオーラ（drop-shadow が透明部分を尊重） */
@keyframes ykqa-mascot-aura-drop-shadow {
    0%   { filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 15px rgba(255,0,0,0.7)); }
    16%  { filter: drop-shadow(0 0 8px #ffff00) drop-shadow(0 0 15px rgba(255,255,0,0.7)); }
    33%  { filter: drop-shadow(0 0 8px #00ff00) drop-shadow(0 0 15px rgba(0,255,0,0.7)); }
    50%  { filter: drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 15px rgba(0,255,255,0.7)); }
    66%  { filter: drop-shadow(0 0 8px #0000ff) drop-shadow(0 0 15px rgba(0,0,255,0.7)); }
    83%  { filter: drop-shadow(0 0 8px #ff00ff) drop-shadow(0 0 15px rgba(255,0,255,0.7)); }
    100% { filter: drop-shadow(0 0 8px #ff0000) drop-shadow(0 0 15px rgba(255,0,0,0.7)); }
}
/* 復元所持時：静止画（ポスター）の周りにオーラのように虹ネオン（drop-shadow が透明部分を尊重） */
.ykqa-turbo-mascot.ykqa-mascot-rollback-neon .ykqa-mascot-static-img {
    -webkit-animation: ykqa-mascot-aura-drop-shadow 1.5s linear infinite !important;
    animation: ykqa-mascot-aura-drop-shadow 1.5s linear infinite !important;
}
/* iOS：ゴースト対策のため楕円＋ハートの虹オーラ（1UP効果） */
@keyframes ykqa-mascot-aura-heart {
    0%   { text-shadow: 0 0 6px #fff, 0 0 12px #ff0000, 0 0 20px rgba(255,0,0,0.9); }
    16%  { text-shadow: 0 0 6px #fff, 0 0 12px #ffff00, 0 0 20px rgba(255,255,0,0.9); }
    33%  { text-shadow: 0 0 6px #fff, 0 0 12px #00ff00, 0 0 20px rgba(0,255,0,0.9); }
    50%  { text-shadow: 0 0 6px #fff, 0 0 12px #00ffff, 0 0 20px rgba(0,255,255,0.9); }
    66%  { text-shadow: 0 0 6px #fff, 0 0 12px #0000ff, 0 0 20px rgba(0,0,255,0.9); }
    83%  { text-shadow: 0 0 6px #fff, 0 0 12px #ff00ff, 0 0 20px rgba(255,0,255,0.9); }
    100% { text-shadow: 0 0 6px #fff, 0 0 12px #ff0000, 0 0 20px rgba(255,0,0,0.9); }
}
@keyframes ykqa-mascot-aura-capsule {
    0%   { box-shadow: 0 0 10px #ff0000, 0 0 24px rgba(255,0,0,0.5); }
    16%  { box-shadow: 0 0 10px #ffff00, 0 0 24px rgba(255,255,0,0.5); }
    33%  { box-shadow: 0 0 10px #00ff00, 0 0 24px rgba(0,255,0,0.5); }
    50%  { box-shadow: 0 0 10px #00ffff, 0 0 24px rgba(0,255,255,0.5); }
    66%  { box-shadow: 0 0 10px #0000ff, 0 0 24px rgba(0,0,255,0.5); }
    83%  { box-shadow: 0 0 10px #ff00ff, 0 0 24px rgba(255,0,255,0.5); }
    100% { box-shadow: 0 0 10px #ff0000, 0 0 24px rgba(255,0,0,0.5); }
}
html.ykqa-is-ios .ykqa-turbo-mascot.ykqa-mascot-rollback-neon .ykqa-mascot-static-img {
    -webkit-animation: none !important;
    animation: none !important;
}
html.ykqa-is-ios .ykqa-turbo-mascot.ykqa-mascot-rollback-neon .ykqa-turbo-mascot-inner {
    position: relative !important;
}
html.ykqa-is-ios .ykqa-turbo-mascot.ykqa-mascot-rollback-neon .ykqa-turbo-mascot-inner::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 64px !important;
    height: 110px !important;
    margin-left: -32px !important;
    margin-top: -55px !important;
    border-radius: 50% !important;
    -webkit-animation: ykqa-mascot-aura-capsule 1.5s linear infinite !important;
    animation: ykqa-mascot-aura-capsule 1.5s linear infinite !important;
    pointer-events: none !important;
    z-index: -1 !important;
}
html.ykqa-is-ios .ykqa-turbo-mascot.ykqa-mascot-rollback-neon .ykqa-turbo-mascot-inner::after {
    content: '♥' !important;
    position: absolute !important;
    left: 50% !important;
    top: calc(58% + 6px) !important;
    transform: translate(-50%, -50%) !important;
    font-size: 10px !important;
    color: #fff !important;
    -webkit-animation: ykqa-mascot-aura-heart 1.5s linear infinite !important;
    animation: ykqa-mascot-aura-heart 1.5s linear infinite !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
html.ykqa-is-ios .ykqa-turbo-mascot.ykqa-mascot-rollback-neon .ykqa-turbo-mascot-inner {
    -webkit-animation: ykqa-turbo-float 2.5s ease-in-out infinite !important;
    animation: ykqa-turbo-float 2.5s ease-in-out infinite !important;
}
.ykqa-turbo-mascot video { width: auto !important; height: 100px !important; max-height: 120px !important; object-fit: contain !important; vertical-align: middle !important; }
@-webkit-keyframes ykqa-turbo-float { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } }
@keyframes ykqa-turbo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ykqa-items-area .ykqa-item-btn { min-width: 0 !important; z-index: 1 !important; position: relative !important; }
.ykqa-item-btn { position: relative !important; width: 100% !important; padding: 6px 2px !important; font-size: 0.85em !important; border-radius: 8px !important; border: 1px solid #ddd !important; background: #f9f9f9 !important; color: #ccc !important; cursor: default !important; text-align: center !important; font-weight:bold !important; box-sizing: border-box !important; transition: all 0.3s !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; line-height: 1.2 !important; }
.yi-title { font-size: 1.1em !important; font-weight: 900 !important; margin-bottom: 1px !important; } .yi-effect { font-size: 0.85em !important; font-weight: normal !important; }
/* ジャッジメント開始画面：スマホでエクスプロイトアイコンを1段表示 */
@media (max-width: 480px) {
    .ykqa-exploit-start-row { flex-wrap: nowrap !important; }
    .ykqa-exploit-start-row .ykqa-item-btn { width: 100% !important; min-width: 0 !important; }
    .ykqa-exploit-start-row .ykqa-item-btn .yi-title { white-space: nowrap !important; font-size: 0.95em !important; }
}
.ykqa-item-btn.active:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 5px 15px rgba(123, 31, 162, 0.4) !important; z-index: 10 !important; }
.ykqa-item-btn.not-owned { background: #eee !important; color: #bbb !important; border: 1px solid #ddd !important; cursor: default !important; }
.ykqa-item-btn.restricted { background: #d1c4e9 !important; color: #fff !important; border: 2px solid #b39ddb !important; cursor: not-allowed !important; position: relative !important; opacity: 0.8 !important; }
.ykqa-item-btn.restricted .lock-icon { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 28px !important; min-width: 28px !important; height: auto !important; flex-shrink: 0 !important; object-fit: contain !important; z-index: 20 !important; filter: drop-shadow(0 0 3px #6a1b9a) !important; }
.ykqa-item-btn.active.spell-half { background: linear-gradient(135deg, #ce93d8, #ba68c8) !important; color: #fff !important; border: 1px solid #9c27b0 !important; cursor: pointer !important; box-shadow: 0 2px 5px rgba(156, 39, 176, 0.4) !important; }
.ykqa-item-btn.active.spell-change { background: linear-gradient(135deg, #ba68c8, #9c27b0) !important; color: #fff !important; border: 1px solid #7b1fa2 !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(123, 31, 162, 0.5) !important; }
.ykqa-item-btn.active.spell-freeze { background: linear-gradient(135deg, #9c27b0, #7b1fa2) !important; color: #fff !important; border: 1px solid #6a1b9a !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(106, 27, 154, 0.5) !important; }
.ykqa-item-btn.active.spell-copy { background: linear-gradient(135deg, #7b1fa2, #4a148c) !important; color: #fff !important; border: 1px solid #4a148c !important; cursor: pointer !important; box-shadow: 0 0 10px rgba(74, 20, 140, 0.6) !important; animation: magicalGlow 2s infinite alternate !important; }
@keyframes magicalGlow { from { box-shadow: 0 0 5px rgba(123, 31, 162, 0.5); } to { box-shadow: 0 0 15px rgba(123, 31, 162, 0.9); } }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
.ykqa-item-btn.shake-error, #ykqa-header-timer-bar.shake-error { animation: shake 0.3s ease-in-out !important; border-color: red !important; }

/* 暴走D: 所持中の呪文のみ南京錠(28px・restrictedと同じ)＋紫グレーアウト（1ターン1回制限のrestrictedに完全一致） */
/* エクスプロイト（タイマーバー）はグレーアウトしない・南京錠のみ中央表示 */
/* active/spell-* より優先させるため、同等以上の詳細度で指定 */
.ykqa-item-btn.ykqa-bug-d-sealed,
.ykqa-item-btn.ykqa-bug-d-sealed.active,
.ykqa-item-btn.ykqa-bug-d-sealed.spell-half,
.ykqa-item-btn.ykqa-bug-d-sealed.spell-change,
.ykqa-item-btn.ykqa-bug-d-sealed.spell-freeze,
.ykqa-item-btn.ykqa-bug-d-sealed.spell-copy {
    background: #d1c4e9 !important;
    color: #fff !important;
    border: 2px solid #b39ddb !important;
    cursor: not-allowed !important;
    position: relative !important;
    opacity: 0.8 !important;
    box-shadow: none !important;
    animation: none !important;
}
#ykqa-header-timer-bar.ykqa-bug-d-sealed,
#ykqa-header-timer-bar.ykqa-bug-d-sealed.charge-ready {
    cursor: not-allowed !important;
    position: relative !important;
    overflow: visible !important;
}
/* 暴走Dの南京錠：選択式(restricted)のlock-iconと完全に同じスタイルを適用 */
.ykqa-item-btn.ykqa-bug-d-sealed .lock-icon.ykqa-bug-d-lock {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 28px !important;
    min-width: 28px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    z-index: 20 !important;
    filter: drop-shadow(0 0 3px #6a1b9a) !important;
}
#ykqa-header-timer-bar.ykqa-bug-d-sealed .lock-icon.ykqa-bug-d-lock {
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    top: 50% !important;
    left: 50% !important;
    margin-top: -9px !important;
    margin-left: -9px !important;
    transform: none !important;
    object-fit: contain !important;
    display: block !important;
}

.ykqa-item-btn.used { background: #e0e0e0 !important; color: #999 !important; border-color: #ccc !important; opacity: 0.8 !important; text-decoration: none !important; }
.ykqa-item-btn.just-got { animation: flashGet 0.5s ease infinite alternate !important; background: #e040fb !important; color: #fff !important; border-color: #d500f9 !important; box-shadow: 0 0 20px #e040fb !important; z-index: 1 !important; }
@keyframes flashGet { 0% { transform: scale(1); filter:brightness(1); } 100% { transform: scale(1.1); filter:brightness(1.5); } }

/* =========================================================================
   チュートリアル 魔法陣＆吸い込み GET演出 (サイバーネオン＆複雑な動き)
   ========================================================================= */

/* 1. 移動とフェードを担当する外枠（絶対にいじらない・吸い込みの要） */
.ykqa-get-wrapper {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    margin: auto !important;
    width: 250px !important; height: 250px !important;
    z-index: 100 !important; pointer-events: none !important; /* マスコット(z-index:10001)の下に表示 */
    
    /* ▼ 吸い込みのための準備 */
    transform: translate(0, 0) scale(1) rotate(0deg) !important;
    opacity: 1 !important;
    filter: blur(0px) !important;
    transition: all 0.7s ease-in-out !important;
}

/* 2. 出現時のポップアップアニメを担当する内枠 */
.ykqa-get-inner {
    position: relative !important;
    width: 100% !important; height: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    animation: ykqa-get-pop 0.4s cubic-bezier(0.25, 1.5, 0.5, 1) forwards !important;
}

/* 3. JSで付与される吸い込み発火クラス */
.ykqa-get-wrapper.suck-into-item {
    transform: translate(var(--tx), var(--ty)) scale(0.1) rotate(360deg) !important;
    opacity: 0 !important;
    filter: blur(2px) !important;
}

/* 4. 魔法陣本体 (クリスタル・ネオンパープル) */
.ykqa-magic-circle {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    margin: auto !important;
    width: 220px !important; height: 220px !important;
    border-radius: 50% !important;
    /* ▼ 繊細で美しい紫の細ライン */
    border: 3px solid #d500f9 !important; 
    /* ▼ 濁りのない、透明感のある紫〜ピンクの美しい発光 */
    box-shadow: 
        0 0 15px #aa00ff, 
        inset 0 0 20px #7b1fa2, 
        0 0 30px #e040fb, 
        0 0 50px rgba(213, 0, 249, 0.4) !important;
    z-index: 1 !important;
    /* さっきの「動く感じが良かった」不規則なサイバースピン！ */
    animation: ykqa-cyber-magic-spin 8s linear infinite !important;
    box-sizing: border-box !important;
}

/* 5. 魔法陣の内側の模様 (ストライプを廃止し、クリアなホログラム仕様へ) */
.ykqa-magic-circle::before, .ykqa-magic-circle::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    margin: auto !important;
    width: 160px !important; height: 160px !important;
    
    /* ▼ 変更：ごちゃつくストライプをやめ、透明感のある美しい紫のガラス風に */
    background: rgba(213, 0, 249, 0.15) !important; 
    border: none !important;
    
    /* 複雑なポリゴン形状はキープ */
    -webkit-clip-path: polygon(
        50% 3%, 63% 33%, 96% 31%, 66% 54%, 75% 87%, 
        53% 72%, 25% 90%, 35% 59%, 7% 38%, 36% 37%
    ) !important;
    clip-path: polygon(
        50% 3%, 63% 33%, 96% 31%, 66% 54%, 75% 87%, 
        53% 72%, 25% 90%, 35% 59%, 7% 38%, 36% 37%
    ) !important;
    
    /* 内側の純粋な紫の光 */
    box-shadow: 0 0 20px #e040fb, inset 0 0 15px #aa00ff !important;
    transform-origin: center !important;
    box-sizing: border-box !important;
}
.ykqa-magic-circle::before { transform: rotate(0deg) !important; }
.ykqa-magic-circle::after { transform: rotate(36deg) !important; }

/* 6. GETの文字デザイン (ピュアな紫発光) */
.ykqa-get-text {
    position: relative !important; z-index: 2 !important;
    font-family: 'Anton', sans-serif !important; font-weight: 400 !important;
    font-size: 5em !important; font-style: italic !important; color: #fff !important;
    /* ▼ 水色を抜き、美しい紫系のグラデーション発光に統一 */
    text-shadow: 
        0 0 10px #e040fb, 
        0 0 20px #d500f9, 
        0 0 30px #aa00ff, 
        0 0 40px #7b1fa2 !important; 
}

/* 7. エクスプロイト取得時：紫GET＋サークルのみかわいいパステル虹の静止画 */
/* パステル虹リング：静止画（conic-gradient） */
.ykqa-paradox-rainbow-ring {
    position: absolute !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    margin: auto !important;
    width: 220px !important; height: 220px !important;
    border-radius: 50% !important;
    background: conic-gradient(from 0deg, #ffb3c1, #ffd9b3, #fff4b3, #b3ffb3, #b3e5ff, #d4b3ff, #ffb3c1) !important;
    -webkit-mask: radial-gradient(circle, transparent 102px, black 102px) !important;
    mask: radial-gradient(circle, transparent 102px, black 102px) !important;
    box-shadow: 0 0 20px rgba(255,179,193,0.5), 0 0 35px rgba(212,179,255,0.4) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}
/* GETテキストは紫のベーススタイルを使用（paradox専用オーバーライドなし） */
body #ykqa-app .ykqa-get-wrapper.ykqa-get-paradox .ykqa-magic-circle {
    border-color: transparent !important;
    box-shadow: none !important;
    animation: ykqa-cyber-magic-spin 8s linear infinite !important;
}
body #ykqa-app .ykqa-get-wrapper.ykqa-get-paradox .ykqa-magic-circle::before,
body #ykqa-app .ykqa-get-wrapper.ykqa-get-paradox .ykqa-magic-circle::after {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.15) !important;
}

/* --- アニメーション定義 --- */
@keyframes ykqa-get-pop {
    0% { opacity: 0; transform: scale(2.5) rotate(-15deg); }
    50% { opacity: 1; transform: scale(0.9) rotate(5deg); }
    75% { transform: scale(1.1) rotate(0deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes ykqa-cyber-magic-spin {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(72deg); }
    25% { transform: rotate(50deg); }
    40% { transform: rotate(144deg); }
    50% { transform: rotate(200deg); }
    70% { transform: rotate(280deg); }
    80% { transform: rotate(250deg); }
    100% { transform: rotate(360deg); }
}

/* --- 元のMissポップアップ --- */
.ykqa-miss-popup { 
    position: absolute !important; 
    top: 55% !important; left: 50% !important; 
    transform: translate(-50%, -50%) !important; 
    background: rgba(0,0,0,0.8) !important; color: #fff !important; font-size: 2em !important; 
    padding: 20px 40px !important; border-radius: 10px !important; z-index: 9999 !important; 
    pointer-events: none !important; font-family: sans-serif !important; 
    width: max-content !important; white-space: nowrap !important; 
}
.ykqa-result { font-size: 1.1em !important; font-weight: bold !important; text-align: center !important; padding: 15px !important; background: rgba(33,33,33,0.95) !important; border-radius: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; white-space: normal !important; line-height: 1.4 !important; width: 90% !important; margin: 0 auto !important; }
.ykqa-result.win, .ykqa-result.win_test { color: #80d4ff !important; }
.ykqa-result.lose, .ykqa-result.lose_test, .ykqa-result.timeout { color: #ff5252 !important; }
.ykqa-result.joined, .ykqa-result.full { color: #ffea00 !important; }
.ykqa-result.error { color: #fff !important; }
.ykqa-notice { font-size: 0.85em; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.5) !important; text-align: center; margin-top: 5px; margin-bottom: 5px; }
.ykqa-multi-tag { display:inline-block; background:#fff; color:#d32f2f; padding:2px 6px; border:2px solid #d32f2f; border-radius:4px; font-size:0.75em; margin-bottom:5px; vertical-align:middle; margin-left:10px; font-weight:bold; }
.ykqa-warning-text { display:block; font-size:0.8em; color:#ffff00; margin-top:2px; font-weight:bold; text-shadow: 1px 1px 2px #000; }
.ykqa-letter-style { padding: 15px !important; border: 2px solid #333 !important; background-color: #fffaf0 !important; border-radius: 4px !important; margin-bottom: 15px !important; box-shadow: 2px 2px 5px rgba(0,0,0,0.1) !important; }
.ykqa-x-share-btn { display: inline-block !important; margin-top: 10px !important; transition: opacity 0.3s !important; cursor: pointer !important; border: none !important; background: none !important; box-shadow: none !important; }
.ykqa-x-share-btn:hover { opacity: 0.8 !important; transform: translateY(-2px) !important; }
.ykqa-x-share-btn img { width: 120px !important; height: 120px !important; border-radius: 4px !important; box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; border: 2px solid #fff !important; }
.ykqa-sns-container { margin-top: 0 !important; }
.ykqa-footer-disclaimer { margin-top: 8px !important; border-top: 1px solid rgba(255,255,255,0.4) !important; padding-top: 5px !important; font-size: 0.65em !important; color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.5) !important; text-align: center !important; line-height: 1.3 !important; }

/* 制限時間バー（エクスプロイトトリガー）：::before で発光を背面に分離し内部侵食を防止 */
#ykqa-header-timer-bar.charge-ready {
    cursor: pointer !important;
    border: 2px solid transparent !important;
    position: relative !important;
    z-index: 100 !important;
    overflow: visible !important;
}
#ykqa-header-timer-bar.charge-ready::before {
    content: "" !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: inherit !important;
    z-index: -1 !important;
    pointer-events: none !important;
    animation: ykqa-plasma-border-outer 1.5s linear infinite !important;
}
#ykqa-header-timer-bar.charge-active { background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) !important; background-size: 200% 200% !important; color: #fff !important; font-weight: 900 !important; text-shadow: 2px 2px 0px #000 !important; border-color: #fff !important; animation: ykqa-rainbow-bg 3s linear infinite !important; box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) !important; }
@keyframes ykqa-rainbow-border { 0% { border-color: #ff0000; box-shadow: 0 0 0 1px #000, 0 0 10px #ff0000; } 20% { border-color: #ffff00; box-shadow: 0 0 0 1px #000, 0 0 10px #ffff00; } 40% { border-color: #00ff00; box-shadow: 0 0 0 1px #000, 0 0 10px #00ff00; } 60% { border-color: #00ffff; box-shadow: 0 0 0 1px #000, 0 0 10px #00ffff; } 80% { border-color: #ff00ff; box-shadow: 0 0 0 1px #000, 0 0 10px #ff00ff; } 100% { border-color: #ff0000; box-shadow: 0 0 0 1px #000, 0 0 10px #ff0000; } }
@keyframes ykqa-rainbow-bg { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes ykqa-pulse-ready { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes ykqa-rainbow-text { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.ykqa-rainbow-txt { background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); background-size: 200% 200%; -webkit-background-clip: text; color: transparent; animation: ykqa-rainbow-text 3s linear infinite; font-weight: 900; font-size: 1.1em; }

.paradox-get-effect {
    background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) !important;
    background-size: 100% 100% !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-shadow: 3px 3px 0px #000 !important;
    border-color: #fff !important;
    box-shadow: 0 0 50px rgba(255, 255, 255, 1), 0 0 80px rgba(255, 0, 255, 1), 0 0 100px rgba(0, 255, 255, 0.8) !important;
    z-index: 9999 !important;
    animation: ykqa-rainbow-bg 0.4s linear infinite, ykqa-paradox-beat 0.6s ease-in-out infinite !important;
}
@keyframes ykqa-paradox-beat {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

#ykqa-paradox-overlay {
    position: absolute !important; top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    background: #000 !important;
    z-index: 99999 !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}
#ykqa-paradox-overlay.active { opacity: 1; pointer-events: none !important; }

.ykqa-paradox-text {
    color: #fff !important; font-family: 'Anton', sans-serif !important; font-weight: 400 !important; font-size: 2.5em !important;
    text-transform: uppercase !important; letter-spacing: 2px !important;
    margin-bottom: 20px !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.8) !important;
    opacity: 0; transform: translateY(20px);
    transition: all 0.5s ease;
}
#ykqa-paradox-overlay.active .ykqa-paradox-text { opacity: 1; transform: translateY(0); }

.ykqa-paradox-counter {
    font-size: 8em !important; font-weight: 400 !important; line-height: 1 !important;
    font-family: 'Anton', sans-serif !important;
    background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: ykqa-rainbow-text 2s linear infinite;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
    transform: scale(0.5); opacity: 0;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s;
}
#ykqa-paradox-overlay.active .ykqa-paradox-counter { transform: scale(1); opacity: 1; }

.ykqa-paradox-plus { font-size: 0.5em !important; vertical-align: super !important; margin-right: 5px !important; -webkit-text-fill-color: #fff !important; }
.ykqa-decimal-small { font-size: 0.35em !important; vertical-align: baseline !important; margin-left: 2px !important; }

@keyframes paradox-beat { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
.ykqa-paradox-beat { animation: paradox-beat 0.3s ease-in-out !important; }

@keyframes ykqa-flash-white { 0% { background: #000; } 50% { background: #fff; } 100% { background: transparent; } }
.ykqa-flash-out { animation: ykqa-flash-white 0.8s ease-out forwards !important; }

/* エクスプロイト取得時。::before で発光を背面に分離。発光ぼかし15pxで統一 */
@-webkit-keyframes ykqa-plasma-border-outer {
    0%   { box-shadow: 0 0 0 3px #ff0000, 0 0 15px #ff0000; }
    16%  { box-shadow: 0 0 0 3px #ffff00, 0 0 15px #ffff00; }
    33%  { box-shadow: 0 0 0 3px #00ff00, 0 0 15px #00ff00; }
    50%  { box-shadow: 0 0 0 3px #00ffff, 0 0 15px #00ffff; }
    66%  { box-shadow: 0 0 0 3px #0000ff, 0 0 15px #0000ff; }
    83%  { box-shadow: 0 0 0 3px #ff00ff, 0 0 15px #ff00ff; }
    100% { box-shadow: 0 0 0 3px #ff0000, 0 0 15px #ff0000; }
}
@keyframes ykqa-plasma-border-outer {
    0%   { box-shadow: 0 0 0 3px #ff0000, 0 0 15px #ff0000; }
    16%  { box-shadow: 0 0 0 3px #ffff00, 0 0 15px #ffff00; }
    33%  { box-shadow: 0 0 0 3px #00ff00, 0 0 15px #00ff00; }
    50%  { box-shadow: 0 0 0 3px #00ffff, 0 0 15px #00ffff; }
    66%  { box-shadow: 0 0 0 3px #0000ff, 0 0 15px #0000ff; }
    83%  { box-shadow: 0 0 0 3px #ff00ff, 0 0 15px #ff00ff; }
    100% { box-shadow: 0 0 0 3px #ff0000, 0 0 15px #ff0000; }
}
.ykqa-item-btn.paradox-active {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid transparent !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
    z-index: 10 !important;
    position: relative !important;
    overflow: visible !important;
}
.ykqa-item-btn.paradox-active::before {
    content: "" !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: inherit !important;
    z-index: -1 !important;
    pointer-events: none !important;
    animation: ykqa-plasma-border-outer 1.5s linear infinite !important;
}

/* --- 覚醒（解放）モードCSS。発光ぼかし15pxで統一 --- */
@keyframes ykqa-plasma-border {
    0%   { box-shadow: 0 0 15px #ff0000, inset 0 0 15px #ff0000; border-color: #ff0000; }
    16%  { box-shadow: 0 0 15px #ffff00, inset 0 0 15px #ffff00; border-color: #ffff00; }
    33%  { box-shadow: 0 0 15px #00ff00, inset 0 0 15px #00ff00; border-color: #00ff00; }
    50%  { box-shadow: 0 0 15px #00ffff, inset 0 0 15px #00ffff; border-color: #00ffff; }
    66%  { box-shadow: 0 0 15px #0000ff, inset 0 0 15px #0000ff; border-color: #0000ff; }
    83%  { box-shadow: 0 0 15px #ff00ff, inset 0 0 15px #ff00ff; border-color: #ff00ff; }
    100% { box-shadow: 0 0 15px #ff0000, inset 0 0 15px #ff0000; border-color: #ff0000; }
}
.ykqa-item-btn.awakening-active {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #ff0000 !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
    animation: ykqa-plasma-border 1.5s linear infinite !important; /* ★1.5秒に統一 */
    cursor: pointer !important;
    z-index: 50 !important;
}
/* --- 覚醒モードCSS (ベースを緑に変更) --- */
.ykqa-awakening-flash {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    background: #fff !important; z-index: 999999 !important;
    pointer-events: none !important; opacity: 0;
    animation: ykqa-awakening-whiteout 0.8s ease-out forwards !important;
}
@keyframes ykqa-awakening-whiteout { 0% { opacity: 0.5; } 100% { opacity: 0; } }

.ykqa-awakening-lightning {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    z-index: 999998 !important; pointer-events: none !important;
    background: transparent !important;
    mix-blend-mode: screen !important;
    animation: ykqa-lightning-flash 1.2s linear forwards !important;
}
/* --- 覚醒モードCSS (解放：赤系) --- */
@keyframes ykqa-lightning-flash {
    0% { background: rgba(255,255,255,0); }
    10%, 30%, 50% { background: linear-gradient(45deg, rgba(255,80,80,0.18) 0%, rgba(255,0,0,0.18) 100%); }
    20%, 40%, 60% { background: rgba(255,255,255,0.4); }
    100% { background: rgba(255,255,255,0); }
}

/* モードカットイン：白文字＋発光のみ色指定。子要素にも継承を強制 */
body #ykqa-app .ykqa-awakening-text,
body #ykqa-app .ykqa-awakening-text * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important; /* グラデーション等の上書きを防ぐ */
}
.ykqa-awakening-text {
    position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    font-size: 4em !important; font-weight: 900 !important;
    /* ★解放の文字オーラを赤系（白文字＋赤発光） */
    text-shadow: 0 0 20px #ff4444, 0 0 40px #ff0000 !important;
    z-index: 999999 !important; pointer-events: none !important;
    font-family: 'Anton', sans-serif !important; font-style: italic !important;
    animation: ykqa-awakening-text-pop 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
@keyframes ykqa-awakening-text-pop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.5) rotate(0deg); opacity: 1; }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

/* --- 大人ターボちゃん（18才）カットイン画像：全面表示→拡大しながらフェードアウト --- */
.ykqa-mode-cutin-image {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    z-index: 999997 !important; pointer-events: none !important; overflow: hidden !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.ykqa-mode-cutin-image img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    animation: ykqa-mode-cutin-zoom-fade 1.5s ease-out forwards !important;
}
@keyframes ykqa-mode-cutin-zoom-fade {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* === 最適モード 追加CSS (緑に変更) === */
.ykqa-awakening-lightning.blue-mode {
    animation: ykqa-lightning-flash-green 1.2s linear forwards !important;
}
/* ★最適の雷を緑系に変更 */
@keyframes ykqa-lightning-flash-green {
    0% { background: rgba(255,255,255,0); }
    10%, 30%, 50% { background: linear-gradient(45deg, rgba(50,205,50,0.18) 0%, rgba(173,255,47,0.18) 100%); }
    20%, 40%, 60% { background: rgba(255,255,255,0.4); }
    100% { background: rgba(255,255,255,0); }
}
/* ★最適の文字オーラを緑系（白文字＋緑発光） */
body #ykqa-app .ykqa-awakening-text.blue-mode,
body #ykqa-app .ykqa-awakening-text.blue-mode * {
    text-shadow: 0 0 20px #32cd32, 0 0 40px #00ff00 !important;
}

/* --- パラドクス強化演出（闇のブラックホール） --- */
@keyframes ykqa-black-hole-grow {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
/* BH演出強化：より大きく禍々しく */
.ykqa-black-hole {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 150px; height: 150px; background: #000; border-radius: 50%;
    box-shadow: 0 0 60px #000, 0 0 120px #330033, 0 0 200px rgba(75, 0, Indigo, 0.8); z-index: 99998;
    animation: ykqa-black-hole-grow 0.6s ease-out forwards;
    border: 4px solid rgba(75,0,130,0.5);
}
.ykqa-sucked {
    transition: all 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(720deg) !important;
    opacity: 0;
    filter: blur(4px);
}

/* --- 画面割れ演出 (Shatter) --- */
.ykqa-shatter-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 100000; pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.ykqa-shatter-left {
    clip-path: polygon(0 0, 70% 0, 30% 20%, 60% 40%, 20% 60%, 50% 80%, 10% 100%, 0 100%);
    transform-origin: left center;
}
.ykqa-shatter-right {
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 10% 100%, 50% 80%, 20% 60%, 60% 40%, 30% 20%);
    transform-origin: right center;
}

/* =========================================================================
   Ver 8.0.0 (継承: 7.7.0): ターボちゃん解析モード & ゼロラグ先読み用
   ========================================================================= */

/* 1. ターボちゃん画像配置 (ヘッダー内右端) */
.ykqa-turbo-char {
    position: absolute !important; bottom: 0 !important; right: 5px !important;
    width: 50px !important; height: auto !important; max-height: 60px !important;
    object-fit: contain !important; z-index: 5 !important;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ykqa-turbo-char.active {
    transform: scale(1.2);
    filter: drop-shadow(0 0 5px #ff00ff);
}

/* 2. カットイン演出 (解析 ANALYSIS) - 白文字＋青発光 */
body #ykqa-app .ykqa-turbo-cutin,
body #ykqa-app .ykqa-turbo-cutin * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 0 20px #2196f3, 0 0 40px #1976d2 !important;
}
.ykqa-turbo-cutin {
    position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    z-index: 999999 !important; pointer-events: none !important;
    font-family: 'Anton', sans-serif !important; line-height: 1 !important;
    font-size: 4em !important; font-weight: 900 !important; font-style: italic !important;
    animation: ykqa-awakening-text-pop 2.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.ykqa-turbo-cutin-main {
    font-weight: 900 !important; font-style: italic !important;
}

.ykqa-turbo-cutin-sub {
    font-size: 0.35em !important; 
    letter-spacing: 2px !important; 
    margin-top: 10px !important;
    font-weight: 900 !important;
}
@keyframes ykqa-turbo-pop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); opacity: 1; }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* ％表示テキスト（共通設定） */
.ykqa-scan-percent {
    position: absolute !important; 
    z-index: 20 !important; 
    pointer-events: none !important;
    font-family: 'Anton', sans-serif !important; 
    font-weight: 900 !important; 
    line-height: 1 !important;
    white-space: nowrap !important;
    mix-blend-mode: normal !important;
}

/* --- [通常回答ボタン用] --- */
.ykqa-btn .ykqa-scan-percent {
    left: auto !important; 
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-50%) !important;
    font-size: 1.4em !important; 
    
    color: transparent !important; 
    -webkit-text-stroke: 1.5px #000 !important; 
    text-shadow: 2px 2px 0px rgba(0,0,0,0.8) !important;
    
    /* ▼ アニメーション名を変更（明るいバージョン） */
    animation: ykqa-scan-text-rainbow-bright 1.5s linear infinite !important;
}

/* --- [画像回答ボタン用] --- */
.ykqa-img-wrapper .ykqa-scan-percent {
    top: auto !important; 
    left: auto !important; 
    transform: none !important;
    bottom: 5px !important;
    right: 5px !important;
    font-size: 1.4em !important; 
    
    color: transparent !important; 
    -webkit-text-stroke: 1.5px #000 !important; 
    text-shadow: 2px 2px 0px rgba(0,0,0,0.8) !important;
    
    /* ▼ アニメーション名を変更（明るいバージョン） */
    animation: ykqa-scan-text-rainbow-bright 1.5s linear infinite !important;
}

/* ▼ 修正：黒枠でガードされているので、遠慮なく純度100%の最強ネオンカラーを投入！ */
@keyframes ykqa-scan-text-rainbow-bright {
    0%   { -webkit-text-fill-color: #ff0000; } /* 純赤 */
    16%  { -webkit-text-fill-color: #ffff00; } /* 純黄 */
    33%  { -webkit-text-fill-color: #00ff00; } /* 純緑 */
    50%  { -webkit-text-fill-color: #00ffff; } /* 純水色 */
    66%  { -webkit-text-fill-color: #0000ff; } /* 純青 */
    83%  { -webkit-text-fill-color: #ff00ff; } /* 純紫 */
    100% { -webkit-text-fill-color: #ff0000; } /* 純赤 */
}

/* =========================================================================
   修正: 解析失敗(0%)の視認性改善（テキスト・画像・虹色アニメを全停止）
   ========================================================================= */

/* 1. テキストボタン用：失敗時は全体を暗くする */
.ykqa-btn.ykqa-analysis-failed {
    opacity: 0.4 !important;
    filter: grayscale(100%) brightness(0.6) !important;
    border-color: #666 !important;
    box-shadow: none !important;
    animation: none !important; 
}

/* 2. 画像ラッパー用：親枠には透過やフィルターをかけない */
.ykqa-img-wrapper.ykqa-analysis-failed {
    border-color: #666 !important;
    box-shadow: none !important;
    animation: none !important;
    background: #222 !important;
}

/* 3. 画像回答の中身（画像）にのみ暗転と透過をかける */
.ykqa-img-wrapper.ykqa-analysis-failed img {
    opacity: 0.35 !important;
    filter: grayscale(100%) brightness(0.5) !important;
}

/* 4. 失敗時（0%）は％テキストの虹色アニメーションを強制停止してグレーアウト */
.ykqa-analysis-failed .ykqa-scan-percent {
    animation: none !important; 
    filter: none !important;
    color: rgba(150, 150, 150, 0.8) !important;
    text-shadow: none !important;
    -webkit-text-stroke: 1px #999 !important;
}

/* =========================================================================
   暴走B: 回答欄1つを4つの〇％で隠すオーバーレイ（解析の〇％演出を流用）
   ※黒塗りは使わず、〇％表示だけで隠す。1桁の時にチラっと見えるのが理想
   ========================================================================= */
.ykqa-bugb-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    z-index: 25 !important;
    pointer-events: none !important;
    background: transparent !important;
}

/* 暴走Bの〇％: 解析と同じ黒枠＋虹ネオン（専用クラスで解析のposition競合を回避） */
.ykqa-bugb-pct {
    font-family: 'Anton', sans-serif !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: transparent !important;
    -webkit-text-stroke: 1.5px #000 !important;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.8) !important;
    animation: ykqa-scan-text-rainbow-bright 1.5s linear infinite !important;
}

/* 画像回答: 上下2段 */
.ykqa-bugb-overlay.ykqa-bugb-overlay-img {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}
.ykqa-bugb-overlay-img .ykqa-bugb-pct-cell {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ykqa-bugb-overlay-img .ykqa-bugb-pct-cell:nth-child(1) {
    top: 0 !important;
    height: calc(50% + 15px) !important;
}
.ykqa-bugb-overlay-img .ykqa-bugb-pct-cell:nth-child(2) {
    bottom: 0 !important;
    height: calc(50% + 15px) !important;
}
.ykqa-bugb-overlay-img .ykqa-bugb-pct {
    font-size: clamp(3.5em, 20vw, 5em) !important;
}

/* テキスト回答: オーバーレイをボタンのパディング内側に収め、回答テキスト領域と完全一致させる */
.ykqa-bugb-overlay-text {
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
.ykqa-bugb-overlay-text .ykqa-bugb-pct-cell {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ykqa-bugb-overlay-text .ykqa-bugb-pct-cell:nth-child(1) { left: 0 !important; }
.ykqa-bugb-overlay-text .ykqa-bugb-pct-cell:nth-child(2) { left: calc(2.8em + 5px) !important; }
.ykqa-bugb-overlay-text .ykqa-bugb-pct-cell:nth-child(3) { left: calc(5.6em + 10px) !important; }
.ykqa-bugb-overlay-text .ykqa-bugb-pct-cell:nth-child(4) { left: calc(8.4em + 15px) !important; }
.ykqa-bugb-overlay-text .ykqa-bugb-pct {
    font-size: 1.4em !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-align: left !important;
}

/* --- [追加] 横長画像用スタイル --- */
.ykqa-wide-image-frame {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 372px !important; /* 360px画像 + padding8px + border4px */
    margin: 0 auto 10px auto !important;
    padding: 4px !important;
    background: #000 !important;
    border: 2px solid #222 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    box-sizing: border-box !important;
}
.ykqa-wide-image-frame .ykqa-q-image-wide {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    max-height: 180px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 4px !important;
    object-fit: contain !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* === 最適モード(ネオン調の中間設定) 眩しさ軽減版 === */
@keyframes ykqa-rainbow-medium-glow {
    /* 変更点：透過度(rgbaの最後の数値)を全体的に大幅に下げて、目に優しい上品な発光にしました */
    0%   { box-shadow: 0 0 0 6px rgba(255, 60, 60, 0.3), 0 0 15px rgba(255, 60, 60, 0.2), inset 0 0 10px rgba(255, 60, 60, 0.1); }
    16%  { box-shadow: 0 0 0 6px rgba(255, 255, 60, 0.3), 0 0 15px rgba(255, 255, 60, 0.2), inset 0 0 10px rgba(255, 255, 60, 0.1); }
    33%  { box-shadow: 0 0 0 6px rgba(80, 255, 120, 0.3), 0 0 15px rgba(80, 255, 120, 0.2), inset 0 0 10px rgba(80, 255, 120, 0.1); }
    50%  { box-shadow: 0 0 0 6px rgba(60, 220, 255, 0.3), 0 0 15px rgba(60, 220, 255, 0.2), inset 0 0 10px rgba(60, 220, 255, 0.1); }
    66%  { box-shadow: 0 0 0 6px rgba(80, 120, 255, 0.3), 0 0 15px rgba(80, 120, 255, 0.2), inset 0 0 10px rgba(80, 120, 255, 0.1); }
    83%  { box-shadow: 0 0 0 6px rgba(220, 60, 255, 0.3), 0 0 15px rgba(220, 60, 255, 0.2), inset 0 0 10px rgba(220, 60, 255, 0.1); }
    100% { box-shadow: 0 0 0 6px rgba(255, 60, 60, 0.3), 0 0 15px rgba(255, 60, 60, 0.2), inset 0 0 10px rgba(255, 60, 60, 0.1); }
}

/* =========================================================================
   【完全版】最適モード(Optimization) パステル虹色・静止枠
   ========================================================================= */

/* --- 最適モード(Optimization) 虹枠（元の border グラデーション方式） --- */
body #ykqa-app.ykqa-optimization-mode {
    border: 6px solid transparent !important;
    border-radius: 16px !important;
    
    background: 
        linear-gradient(#fff, #fff) padding-box, 
        linear-gradient(135deg, 
            rgba(255, 180, 180, 1), 
            rgba(255, 255, 180, 1), 
            rgba(180, 255, 180, 1), 
            rgba(180, 255, 255, 1), 
            rgba(180, 180, 255, 1), 
            rgba(255, 180, 255, 1)
        ) border-box !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.1), 0 0 10px rgba(255,255,255,0.5) !important;
    
    animation: none !important;
    transition: none !important;
}

/* フリーズ時は背景を元に戻す */
body #ykqa-app.ykqa-optimization-mode.ykqa-freeze-mode {
    background: #fff !important;
    border: 6px solid transparent !important;
    box-shadow: 0 0 0 6px #0277bd, 0 0 25px #4fc3f7 !important;
}

/* === 脆弱モード(Yellow) カットイン演出 === */
.ykqa-awakening-lightning.yellow-mode {
    animation: ykqa-lightning-flash-yellow 1.2s linear forwards !important;
}
@keyframes ykqa-lightning-flash-yellow {
    0% { background: rgba(255,255,255,0); }
    10%, 30%, 50% { background: linear-gradient(45deg, rgba(255,235,59,0.2) 0%, rgba(255,193,7,0.2) 100%); }
    20%, 40%, 60% { background: rgba(255,248,220,0.4); }
    100% { background: rgba(255,255,255,0); }
}
/* 脆弱：アイボリー文字＋控えめな黄み発光（復元のゴールドと被らない） */
body #ykqa-app .ykqa-awakening-text.yellow-mode,
body #ykqa-app .ykqa-awakening-text.yellow-mode * {
    color: #fff8dc !important;
    -webkit-text-fill-color: #fff8dc !important;
    text-shadow: 0 0 15px #f0e68c, 0 0 35px #e8dca0 !important;
}

/* =========================================================================
   脆弱モード(Vulnerability) Qバー演出強化（修正版）
   ========================================================================= */

/* 専用のギラギラ虹色アニメーション（borderを使わず影で枠線を作る）。発光ぼかし15pxで統一 */
@keyframes ykqa-vulnerability-q-glow {
    0%   { box-shadow: 0 0 0 3px #ff0000, 0 0 15px #ff0000; }
    16%  { box-shadow: 0 0 0 3px #ffff00, 0 0 15px #ffff00; }
    33%  { box-shadow: 0 0 0 3px #00ff00, 0 0 15px #00ff00; }
    50%  { box-shadow: 0 0 0 3px #00ffff, 0 0 15px #00ffff; }
    66%  { box-shadow: 0 0 0 3px #0000ff, 0 0 15px #0000ff; }
    83%  { box-shadow: 0 0 0 3px #ff00ff, 0 0 15px #ff00ff; }
    100% { box-shadow: 0 0 0 3px #ff0000, 0 0 15px #ff0000; }
}

/* 1. 通常の脆弱モード時：黒背景＋ギラギラ虹色 */
div#ykqa-app.ykqa-vulnerability-mode h4 {
    background: #111 !important;
    color: #fff !important;
    border: none !important; 
    animation: ykqa-vulnerability-q-glow 1.5s linear infinite !important; /* ★1.5sに！ */
}

/* 脆弱時のバッジ（Q1など）の背景を馴染ませる ＆ 矢印の基準位置にする */
div#ykqa-app.ykqa-vulnerability-mode h4 .ykqa-q-badge {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    position: relative !important; /* 矢印追加のために必要 */
}

/* ▼ 変更：Qバッジの両端に「二重下向き矢印」をCSSで作成して配置 */
div#ykqa-app.ykqa-vulnerability-mode h4 .ykqa-q-badge::before,
div#ykqa-app.ykqa-vulnerability-mode h4 .ykqa-q-badge::after {
    content: "▼\A▼" !important; /* \A は改行コード（縦に並べる） */
    white-space: pre !important; /* 改行を有効にする */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0.7em !important; /* 2つ並ぶのでサイズを調整 */
    line-height: 0.8 !important; /* 行間を詰めて二重矢印っぽくする */
    text-align: center !important;
    /* 虹色アニメーションを適用 */
    animation: ykqa-plasma-arrow 1.5s linear infinite !important;
}

/* 位置調整 */
div#ykqa-app.ykqa-vulnerability-mode h4 .ykqa-q-badge::before { left: 12px !important; }
div#ykqa-app.ykqa-vulnerability-mode h4 .ykqa-q-badge::after { right: 12px !important; }

/* ▼「解放」アイコンと同じサイバー虹色のアニメーション */
@keyframes ykqa-plasma-arrow {
    0%   { color: #ff0000; text-shadow: 0 0 8px #ff0000; }
    16%  { color: #ffff00; text-shadow: 0 0 8px #ffff00; }
    33%  { color: #00ff00; text-shadow: 0 0 8px #00ff00; }
    50%  { color: #00ffff; text-shadow: 0 0 8px #00ffff; }
    66%  { color: #0000ff; text-shadow: 0 0 8px #0000ff; }
    83%  { color: #ff00ff; text-shadow: 0 0 8px #ff00ff; }
    100% { color: #ff0000; text-shadow: 0 0 8px #ff0000; }
}

/* 2. 脆弱中に「クローン」を使用した場合の上書き（虹色停止 ＋ 紫優先） */
div#ykqa-app.ykqa-vulnerability-mode h4.ykqa-purple-text {
    animation: none !important; /* 虹色を完全停止 */
    background: linear-gradient(135deg, #7b1fa2, #4a148c) !important;
    border: 2px solid #6a1b9a !important; /* クローン専用の紫枠を復帰 */
    box-shadow: 0 0 10px rgba(123, 31, 162, 0.5) !important; /* 紫のシャドウ */
}

/* =========================================================================
   問題画像（通常・横長）の黒枠装飾
   ========================================================================= */
.ykqa-q-image,
.ykqa-q-image-wide {
    /* 引き締まった黒の枠線 */
    border: 2px solid #222;
    /* わずかに角を丸くして洗練された印象に */
    border-radius: 4px;
    /* ほんのり影を落として立体感（カードっぽさ）を出す */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    
    /* 枠線が画像の内側に食い込んでサイズが変わるのを防ぐ設定 */
    box-sizing: border-box; 
    /* 念のため背景色を黒にして、画像の隙間が目立たないようにする */
    background: #000; 
}

/* =========================================================================
   復元モード (Rollback) 追加CSS (薄いピンクレッド・ハートに変更)
   ========================================================================= */

/* 1. 復元カットイン (ピンクレッド系) */
.ykqa-awakening-lightning.white-mode {
    /* アニメーション名を専用のものに変更 */
    animation: ykqa-lightning-flash-pink 1.2s linear forwards !important;
}

/* ★復元の雷を黄色系に変更 */
@keyframes ykqa-lightning-flash-pink {
    0% { background: rgba(255,255,255,0); }
    10%, 30%, 50% { background: linear-gradient(45deg, rgba(255, 235, 59, 0.18) 0%, rgba(255, 193, 7, 0.18) 100%); }
    20%, 40%, 60% { background: rgba(255,255,255,0.4); }
    100% { background: rgba(255,255,255,0); }
}

/* ★復元の文字オーラを黄色系（白文字＋黄発光） */
body #ykqa-app .ykqa-awakening-text.white-mode,
body #ykqa-app .ykqa-awakening-text.white-mode * {
    text-shadow: 0 0 20px #ffd700, 0 0 40px #ffff00 !important;
}

/* リザルト画面の「再挑戦」ボタン（独立・アニメーション完全動作版） */
#btn-do-rollback.ykqa-rollback-special-btn {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: transform 0.1s ease !important;
    
    /* 黒ベースの見た目 */
    background: #111 !important;
    color: #fff !important;
    
    /* 枠線の太さとスタイルは固定 */
    border-style: solid !important;
    border-top-width: 2px !important;
    border-left-width: 2px !important;
    border-right-width: 2px !important;
    border-bottom-width: 5px !important;
    
    /* ★ここに !important をつけるとアニメーションが止まるため外しています */
    border-color: #ff0000; 
    box-shadow: 0 0 10px #ff0000;
    
    /* 既存の「エクスプロイト」用アニメーションを適用 */
    animation: ykqa-rainbow-border 2s linear infinite;
}

#btn-do-rollback.ykqa-rollback-special-btn:hover {
    transform: translateY(-2px) !important;
}

#btn-do-rollback.ykqa-rollback-special-btn:active {
    transform: translateY(3px) !important;
    border-bottom-width: 2px !important;
}

/* =========================================================================
   【修正版3】暴走モード (BUG) 追加CSS
   ※右側など全方位のノイズバランスを改善
   ========================================================================= */

/* 1. 全体の枠設定（背景画像を隠し、黒ベースに） */
body #ykqa-app.ykqa-bug-mode {
    background: #000 !important; /* 黒くなってザザっ用 */
    border: none !important;
    box-shadow: none !important;
    transform: translateX(1px) !important;
    transition: none !important;
    position: relative !important;
    overflow: visible !important; /* ノイズの解放 */
}

/* 2. 中のクイズコンテンツだけを白黒・高コントラストにする ＆ 中身の保護 */
body #ykqa-app.ykqa-bug-mode #ykqa-q-container {
    filter: grayscale(100%) contrast(1.5) brightness(0.9) !important;
    /* ▼ 追加：親が解放された分、ここでコンテンツのはみ出しをガードする */
    overflow: hidden !important; 
    border-radius: 12px !important; 
}

/* 3. ジャリジャリ動くノイズ枠 (::before) ※背景画像を上書きし、z-index:0で表示 */
body #ykqa-app.ykqa-bug-mode::before {
    content: "" !important;
    position: absolute !important;
    top: -10px !important; left: -10px !important; right: -10px !important; bottom: -10px !important;
    background: #000 !important;
    background-image: none !important; /* 背景画像を完全に隠す */
    z-index: 0 !important; /* 背景画像の上に表示（コンテンツはz-index:1で上） */
    animation: ykqa-bug-border-noise 0.08s steps(3) infinite !important;
}

/* ★右側のノイズも増えるようにポリゴン形状を再調整 */
@keyframes ykqa-bug-border-noise {
    0% {
        clip-path: polygon(
            0% 0%, 100% 0%, 100% 100%, 0% 100%, /* 外枠 */
            3% 3%, 97% 3%, 97% 97%, 3% 97%,     /* 内枠をくり抜く */
            
            /* 上部ノイズ */
            10% 3%, 10% 0%, 15% 0%, 15% 3%,
            70% 3%, 70% 1%, 72% 1%, 72% 3%,
            
            /* 右部ノイズ（増加） */
            97% 15%, 100% 15%, 100% 20%, 97% 20%,
            97% 50%, 99% 50%, 99% 53%, 97% 53%,
            97% 80%, 100% 80%, 100% 85%, 97% 85%,
            
            /* 下部ノイズ */
            60% 97%, 60% 100%, 65% 100%, 65% 97%,
            20% 97%, 20% 99%, 22% 99%, 22% 97%,
            
            /* 左部ノイズ */
            3% 70%, 0% 70%, 0% 75%, 3% 75%,
            3% 30%, 1% 30%, 1% 35%, 3% 35%
        );
    }
    33% {
        clip-path: polygon(
            0% 0%, 100% 0%, 100% 100%, 0% 100%,
            2% 2%, 98% 2%, 98% 98%, 2% 98%,
            
            /* 上部ノイズ */
            30% 2%, 30% 0%, 35% 0%, 35% 2%,
            85% 2%, 85% 1%, 88% 1%, 88% 2%,
            
            /* 右部ノイズ（増加） */
            98% 30%, 100% 30%, 100% 33%, 98% 33%,
            98% 60%, 100% 60%, 100% 65%, 98% 65%,
            98% 90%, 99% 90%, 99% 95%, 98% 95%,
            
            /* 下部ノイズ */
            70% 98%, 70% 100%, 75% 100%, 75% 98%,
            40% 98%, 40% 99%, 43% 99%, 43% 98%,
            
            /* 左部ノイズ */
            2% 50%, 0% 50%, 0% 55%, 2% 55%,
            2% 15%, 1% 15%, 1% 20%, 2% 20%
        );
        background: #222;
    }
    66% {
        clip-path: polygon(
            0% 0%, 100% 0%, 100% 100%, 0% 100%,
            4% 4%, 96% 4%, 96% 96%, 4% 96%,
            
            /* 上部ノイズ */
            60% 4%, 60% 0%, 65% 0%, 65% 4%,
            25% 4%, 25% 2%, 30% 2%, 30% 4%,
            
            /* 右部ノイズ（増加） */
            96% 25%, 100% 25%, 100% 28%, 96% 28%,
            96% 45%, 98% 45%, 98% 50%, 96% 50%,
            96% 75%, 100% 75%, 100% 78%, 96% 78%,
            
            /* 下部ノイズ */
            80% 96%, 80% 100%, 85% 100%, 85% 96%,
            15% 96%, 15% 98%, 18% 98%, 18% 96%,
            
            /* 左部ノイズ */
            4% 85%, 0% 85%, 0% 90%, 4% 90%,
            4% 40%, 2% 40%, 2% 45%, 4% 45%
        );
        background: #111;
    }
}

/* 4. 画面全体の走査線ノイズ */
body #ykqa-app.ykqa-bug-mode::after {
    content: "";
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0.25) 1px, transparent 1px, transparent 2px);
    pointer-events: none; z-index: 999998;
    mix-blend-mode: overlay;
}

/* 5. 「暴走 BUG」のテキストカットイン（他モードと統一＋紫発光） */
.ykqa-bug-text {
    position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;
    z-index: 999999 !important; pointer-events: none !important;
    font-family: 'Anton', sans-serif !important; 
    
    font-size: 4em !important;
    font-weight: 900 !important;
    font-style: italic !important;
    
    color: #fff !important;
    text-shadow: 
        0 0 10px #e040fb,
        0 0 20px #aa00ff,
        0 0 40px #7b1fa2,
        0 0 60px #4a148c,
        0 0 80px #000 !important;
        
    animation: ykqa-bug-text-flicker 0.06s infinite alternate !important;
}

/* 暴走H: ゲーム表示エリア全体の上下逆転（64秒間・スマホ逆向きで認識可能） */
body #ykqa-app.ykqa-bug-h-flip {
    transform: rotate(180deg) !important;
}

/* 文字の明滅アニメーション */
@keyframes ykqa-bug-text-flicker {
    0% { 
        opacity: 1; 
        text-shadow: 0 0 10px #e040fb, 0 0 20px #aa00ff, 0 0 40px #7b1fa2, 0 0 60px #4a148c, 0 0 80px #000;
    }
    100% { 
        opacity: 0.75; 
        text-shadow: 0 0 5px #e040fb, 0 0 10px #aa00ff, 0 0 20px #7b1fa2, 0 0 40px #000; 
        transform: translate(-50%, -50%) skewX(3deg) scale(0.98);
    }
}

/* =========================================================================
   UIの微調整（コンテニューフォント ＆ シェア🔽アニメーション）
   ========================================================================= */

/* コンテニューボタンのフォントを他と合わせる */
#btn-do-rollback.ykqa-rollback-special-btn {
    font-family: inherit !important; /* 絵文字によるフォント崩れを防止 */
    letter-spacing: 2px !important;  /* 少し文字間をあけてカッコよく */
}

/* 🔽アイコンは非表示にする */
.ykqa-share-arrow {
    display: none !important;
}

/* ▼ 代わりにシェアボタン（スーパー渡の画像）自体をフワフワさせる */
.ykqa-x-share-btn { 
    display: inline-block !important; 
    margin-top: 10px !important; 
    cursor: pointer !important; 
    border: none !important; 
    background: none !important; 
    box-shadow: none !important; 
    transition: opacity 0.3s !important;
    /* ゆったりと上下にフワフワ動かす */
    animation: ykqa-bounce-image 2.5s ease-in-out infinite !important;
}

/* ホバー時は少し大きくしてピタッと止める（押しやすくする） */
.ykqa-x-share-btn:hover { 
    opacity: 0.8 !important; 
    transform: scale(1.05) !important; 
    animation: none !important; 
}

.ykqa-x-share-btn img { 
    width: 120px !important; 
    height: 120px !important; 
    border-radius: 4px !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; /* 浮遊感を出すために影を少し濃く */
    border: 2px solid #fff !important; 
}

/* フワフワと浮遊するアニメーション */
@keyframes ykqa-bounce-image {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); } /* 少し上に持ち上がる */
}

/* =========================================================================
   ランプ（早押し・選択式）のアクティブ時「登場演出」＋「継続発光」
   ========================================================================= */
/* タイマーバー用のアニメーション発火クラス */
.ykqa-lamp-pop-anim {
    /* ▼ 1.5s に変更してゆっくりに */
    animation: ykqa-lamp-pop 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ▼ 登場1.5秒 ＋ 1.5秒後から継続発光 無限ループ */
.ykqa-status-cell.st-limit.active {
    animation: 
        ykqa-lamp-pop 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        ykqa-glow-limit 0.8s ease-in-out 1.5s infinite alternate !important;
}

.ykqa-status-cell.st-multi.active {
    animation: 
        ykqa-lamp-pop 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
        ykqa-glow-multi 0.8s ease-in-out 1.5s infinite alternate !important;
}

@keyframes ykqa-lamp-pop {
    0% { transform: scale(1); filter: brightness(1); }
    40% { transform: scale(1.15); filter: brightness(1.6); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* 早押しランプ（赤）の継続発光 */
@keyframes ykqa-glow-limit {
    0% { box-shadow: 0 0 8px rgba(211, 47, 47, 0.8); filter: brightness(1); }
    100% { box-shadow: 0 0 20px rgba(255, 82, 82, 1); filter: brightness(1.4); }
}

/* 選択式ランプ（黄）の継続発光 */
@keyframes ykqa-glow-multi {
    0% { box-shadow: 0 0 15px rgba(255, 143, 0, 0.9); filter: brightness(1); }
    100% { box-shadow: 0 0 25px rgba(255, 234, 0, 1); filter: brightness(1.3); }
}

/* =========================================================================
   最適モード (Optimization) 「早押し」「選択式」無効化演出（🔗ロック版）
   ========================================================================= */

/* 親セル（早押し・選択式）の下準備：脆弱モードと枠線の動きを統一 */
#ykqa-app.ykqa-optimization-mode #status-limit,
#ykqa-app.ykqa-optimization-mode #status-multi {
    position: relative !important;
    overflow: hidden !important;
    border-color: transparent !important; 
    background: #111 !important; 
    animation: ykqa-vulnerability-q-glow 1.5s linear infinite !important; /* ★1.5sに！ */
}

/* 1. 元の文字を完全に隠すための黒いレイヤー */
#ykqa-app.ykqa-optimization-mode #status-limit::before,
#ykqa-app.ykqa-optimization-mode #status-multi::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5 !important;
    background-color: #111 !important; /* 完全に黒で塗りつぶす */
    
    /* 以前の斜めストライプやアニメーションを完全無効化 */
    background-image: none !important;
    animation: none !important;
}

/* 2. ロック感を出す鎖マーク「🔗」（ネオン虹色発光） */
#ykqa-app.ykqa-optimization-mode #status-limit::after,
#ykqa-app.ykqa-optimization-mode #status-multi::after {
    content: "🔗" !important;
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 6 !important;
    
    font-size: 1.5em !important; /* 少し大きめに配置 */
    line-height: 1 !important;
    
    /* 脆弱の矢印「⏬」と同じサイバー虹色アニメーションを適用 */
    animation: ykqa-plasma-arrow 1.5s linear infinite !important;
}

/* ゲームオーバー演出オーバーレイ（12回タップ時）※1080×1920で画面いっぱい表示・body直下でフレーム外 */
.ykqa-gameover-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important; min-width: 100vw !important; min-height: 100vh !important;
    background: #000 !important;
    z-index: 2147483647 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    pointer-events: none !important;
}
.ykqa-gameover-stage { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.ykqa-gameover-video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; object-fit: cover !important; }
.ykqa-gameover-image { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; object-fit: cover !important; }