:root {
            --bg-deep: #0a0010;
            --bg-mid: #12001e;
            --purple-main: #7b2fff;
            --purple-glow: #a855f7;
            --purple-soft: #c084fc;
            --gold: #f0c060;
            --gold-soft: #fde68a;
            --text-primary: #f3e8ff;
            --text-secondary: #c4b5d4;
            --text-muted: #a896be;
            --chat-user-bg: rgba(123,47,255,0.25);
            --chat-ai-bg: rgba(30,0,50,0.7);
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html {
            overflow-x: hidden;
            max-width: 100%;
            overscroll-behavior-x: none;
            height: -webkit-fill-available;
        }
        body {
            background: var(--bg-deep);
            color: var(--text-primary);
            font-family: 'Noto Serif JP', serif;
            min-height: 100vh;
            min-height: -webkit-fill-available;
            height: 100dvh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            overflow-x: hidden;
            max-width: 100%;
            overscroll-behavior: none;
            touch-action: pan-y;
        }

        /* ===== 上部バー ===== */
        .top-bar {
            position: relative;
            z-index: 10;
            background: rgba(10,0,20,0.92);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(168,85,247,0.2);
            padding: max(10px, env(safe-area-inset-top, 10px)) 12px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            flex-shrink: 0;
            width: 100%;
            overflow: hidden;
        }

        /* キャラ情報 */
        .char-info {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .char-avatar {
            width: 38px; height: 38px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center top;
            border: 1.5px solid rgba(168,85,247,0.5);
            flex-shrink: 0;
        }
        /* ソラ専用：全身写真のため顔が中央に来るよう調整 */
        .char-avatar[src*="sora2"],
        .msg-avatar[src*="sora2"] {
            object-position: center 8%;
        }
        .char-avatar-placeholder {
            width: 38px; height: 38px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2d0050, #1a0030);
            border: 1.5px solid rgba(168,85,247,0.5);
            flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 16px;
        }
        .char-name-wrap { min-width: 0; }
        .char-name {
            font-size: 14px; font-weight: 700;
            color: var(--text-primary); letter-spacing: 1px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .char-role {
            font-size: 11px; color: var(--text-secondary);
            letter-spacing: 1px; margin-top: 1px;
        }

        /* ④ 残り回数表示 */
        .add-plan-btn {
            margin-top: 4px;
            background: none;
            border: 1px solid rgba(240,192,96,0.4);
            border-radius: 20px;
            color: var(--gold);
            font-size: 9px;
            letter-spacing: 1px;
            padding: 2px 8px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .add-plan-btn:hover { background: rgba(240,192,96,0.1); }
        /* 残り回数確認モーダル：大きな数字 */
        .credit-info-count {
            font-size: 54px;
            font-weight: 700;
            color: var(--gold);
            line-height: 1.1;
            margin: 8px 0 4px;
            letter-spacing: 2px;
            text-shadow: 0 0 24px rgba(240,192,96,0.5);
        }
        .remaining-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
        }
        .remaining-label {
            font-size: 10px;
            letter-spacing: 2px;
            color: var(--gold);
            margin-bottom: 2px;
        }
        .remaining-count {
            font-family: 'Cinzel', serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--gold-soft);
            letter-spacing: 1px;
            line-height: 1;
            min-width: 2ch;
            text-align: center;
            transition: color 0.3s;
        }
        .remaining-count.warning { color: #f87171; animation: countPulse 1s ease infinite; }
        @keyframes countPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
        .remaining-sub {
            font-size: 11px; color: var(--text-secondary);
            letter-spacing: 1px; margin-top: 3px;
            text-align: center;
        }

        /* ⑤ キャラ切替ボタン */
        .switch-btn {
            background: rgba(123,47,255,0.15);
            border: 1px solid rgba(168,85,247,0.3);
            border-radius: 20px;
            padding: 6px 10px;
            font-size: 10px;
            color: var(--purple-soft);
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            flex-shrink: 0;
            font-family: 'Noto Serif JP', serif;
        }
        .switch-btn:hover { background: rgba(123,47,255,0.3); border-color: var(--purple-glow); color: #fff; }

        /* ===== チャットエリア ===== */
        .chat-area {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: none;
            touch-action: pan-y;
            padding: 16px 16px max(220px, calc(env(safe-area-inset-bottom) + 200px));
            display: flex;
            flex-direction: column;
            gap: 14px;
            scroll-behavior: smooth;
            /* iOSでフレックス子要素が収縮しないよう保証 */
            min-height: 0;
            width: 100%;
        }
        .chat-area::-webkit-scrollbar { width: 3px; }
        .chat-area::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius: 3px; }

        /* メッセージ */
        .msg { display: flex; gap: 8px; min-width: 0; max-width: 80%; }
        .msg.user { align-self: flex-end; flex-direction: row-reverse; margin-right: 4px; }
        .msg.ai { align-self: flex-start; }

        .msg-avatar {
            width: 30px; height: 30px; border-radius: 50%;
            object-fit: cover; object-position: center top;
            flex-shrink: 0; align-self: flex-end;
            border: 1px solid rgba(168,85,247,0.4);
        }
        .msg-avatar-placeholder {
            width: 30px; height: 30px; border-radius: 50%;
            background: linear-gradient(135deg, #2d0050, #1a0030);
            flex-shrink: 0; align-self: flex-end;
            border: 1px solid rgba(168,85,247,0.4);
            display: flex; align-items: center; justify-content: center;
            font-size: 13px;
        }

        .msg-bubble {
            min-width: 0;
            max-width: 100%;
            padding: 12px 16px;
            border-radius: 18px;
            font-size: 14px;
            line-height: 1.8;
            letter-spacing: 0.3px;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .msg.ai .msg-bubble {
            background: var(--chat-ai-bg);
            border: 1px solid rgba(168,85,247,0.2);
            border-bottom-left-radius: 4px;
            color: var(--text-primary);
        }
        .msg.user .msg-bubble {
            background: var(--chat-user-bg);
            border: 1px solid rgba(168,85,247,0.35);
            border-bottom-right-radius: 4px;
            color: var(--text-primary);
            font-size: 13px;
        }

        /* タイピング中 */
        .typing-indicator {
            display: flex; gap: 5px; align-items: center;
            padding: 10px 16px 6px;
        }
        .typing-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--purple-soft);
            animation: typingBounce 1.2s ease infinite;
        }
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
        @keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }
        /* タイピングインジケーター コンテナのフェード */
        .typing-bubble {
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 0.45s ease, transform 0.45s ease;
        }
        .typing-bubble.typing-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .typing-label {
            font-size: 13px;
            color: var(--text-secondary);
            letter-spacing: 0.5px;
            padding: 4px 16px 10px;
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        .typing-label.fade-out { opacity: 0; }
        .typing-label.fade-in  { opacity: 1; }

        /* システムメッセージ */
        .sys-msg {
            text-align: center;
            font-size: 11px;
            color: var(--text-secondary);
            letter-spacing: 1px;
            padding: 4px 0;
        }

        /* ここから再開ボタン */
        .resume-here-wrap {
            text-align: center;
            padding: 14px 0 8px;
        }
        .resume-here-btn {
            background: rgba(123, 47, 255, 0.18);
            border: 1px solid rgba(240, 192, 96, 0.6);
            border-radius: 24px;
            color: var(--gold-soft);
            font-family: 'Noto Serif JP', serif;
            font-size: 14px;
            letter-spacing: 2px;
            padding: 11px 28px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .resume-here-btn:hover {
            background: rgba(123, 47, 255, 0.38);
            border-color: var(--gold);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(123, 47, 255, 0.35);
        }

        /* ===== 入力エリア ===== */
        .input-area {
            position: fixed;
            left: 0; right: 0; bottom: 0;
            background: rgba(10,0,20,0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-top: 1px solid rgba(168,85,247,0.15);
            padding: 10px 16px;
            padding-bottom: max(10px, env(safe-area-inset-bottom));
            z-index: 100;
            box-sizing: border-box;
        }
        .input-wrap {
            display: flex;
            gap: 10px;
            align-items: flex-end;
            max-width: 700px;
            margin: 0 auto;
        }
        .input-box {
            flex: 1;
            background: rgba(30,0,50,0.7);
            border: 1px solid rgba(168,85,247,0.3);
            border-radius: 24px;
            padding: 12px 18px;
            color: var(--text-primary);
            font-size: 16px;
            font-family: 'Noto Serif JP', serif;
            resize: none;
            outline: none;
            max-height: 120px;
            min-height: 46px;
            line-height: 1.6;
            transition: border-color 0.2s;
        }
        .input-box:focus { border-color: rgba(168,85,247,0.6); }
        .input-box::placeholder { color: var(--text-muted); }

        .send-btn {
            width: 46px; height: 46px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--purple-main), var(--purple-glow));
            border: none;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 15px rgba(123,47,255,0.4);
        }
        .send-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(123,47,255,0.6); }
        .send-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
        .send-btn svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; }

        /* ===== ⑤ キャラ切替モーダル ===== */
        .modal-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.75);
            backdrop-filter: blur(6px);
            z-index: 100;
            display: flex; align-items: flex-end; justify-content: center;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s;
        }
        .modal-overlay.active { opacity: 1; pointer-events: all; }

        .switch-modal {
            background: linear-gradient(180deg, #1a0030, #0a0018);
            border: 1px solid rgba(168,85,247,0.3);
            border-bottom: none;
            border-radius: 24px 24px 0 0;
            padding: 28px 20px 40px;
            width: 100%; max-width: 500px;
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
        }
        .modal-overlay.active .switch-modal { transform: translateY(0); }

        .modal-msg {
            text-align: center;
            font-size: 15px;
            color: var(--text-primary);
            letter-spacing: 1px;
            line-height: 1.8;
            margin-bottom: 6px;
        }
        .modal-sub {
            text-align: center;
            font-size: 12px;
            color: var(--text-secondary);
            letter-spacing: 1px;
            margin-bottom: 24px;
        }
        .modal-chars {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 16px;
        }
        .modal-char-btn {
            background: rgba(30,0,50,0.7);
            border-radius: 14px;
            padding: 12px 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid rgba(168,85,247,0.2);
            font-family: 'Noto Serif JP', serif;
        }
        .modal-char-btn:hover { background: rgba(123,47,255,0.2); border-color: rgba(168,85,247,0.5); }
        .modal-char-btn.current { border-color: var(--gold); opacity: 0.5; cursor: not-allowed; }
        .modal-char-btn.current:hover { background: rgba(30,0,50,0.7); }
        .modal-char-name { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: 1px; }
        .modal-char-role { font-size: 11px; color: var(--text-secondary); margin-top: 3px; letter-spacing: 1px; }

        .modal-cancel {
            width: 100%;
            background: transparent;
            border: 1px solid rgba(168,85,247,0.3);
            border-radius: 30px;
            padding: 12px;
            color: var(--text-secondary);
            font-size: 13px;
            letter-spacing: 2px;
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Noto Serif JP', serif;
        }
        .modal-cancel:hover { border-color: rgba(168,85,247,0.5); color: var(--text-primary); }

        /* ===== 課金モーダル ===== */
        .paywall-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(10px);
            z-index: 200;
            display: flex; align-items: flex-end; justify-content: center;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s;
        }
        .paywall-overlay.active { opacity: 1; pointer-events: all; }

        .paywall-sheet {
            background: linear-gradient(180deg, #1a0030, #0a0018);
            border: 1px solid rgba(240,192,96,0.3);
            border-bottom: none;
            border-radius: 28px 28px 0 0;
            padding: 32px 20px 48px;
            width: 100%; max-width: 500px;
            max-height: 88vh;
            overflow-y: auto;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
        }
        .paywall-overlay.active .paywall-sheet { transform: translateY(0); }

        .paywall-icon { text-align: center; font-size: 36px; margin-bottom: 12px; }
        .paywall-title {
            text-align: center; font-size: 18px; font-weight: 700;
            color: var(--text-primary); letter-spacing: 2px; margin-bottom: 6px;
        }
        .paywall-sub {
            text-align: center; font-size: 13px; color: var(--text-secondary);
            letter-spacing: 1px; line-height: 1.8; margin-bottom: 24px;
        }

        .plans { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
        .plan-btn {
            display: flex; align-items: center; justify-content: space-between;
            background: rgba(30,0,50,0.7);
            border: 1px solid rgba(168,85,247,0.25);
            border-radius: 16px; padding: 16px 20px;
            cursor: pointer; transition: all 0.2s;
            font-family: 'Noto Serif JP', serif;
        }
        .plan-btn:hover { background: rgba(123,47,255,0.2); border-color: rgba(168,85,247,0.5); }
        .plan-btn.recommended {
            border-color: var(--gold);
            background: rgba(240,192,96,0.08);
            position: relative;
        }
        .plan-recommend-badge {
            position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
            background: linear-gradient(135deg, var(--gold), #f97316);
            color: #1a0a00; font-size: 9px; font-weight: 700;
            padding: 3px 12px; border-radius: 20px; letter-spacing: 2px;
            white-space: nowrap;
        }

        /* ===== 初回特別プラン ===== */
        .first-special {
            border: 1.5px solid rgba(240,192,96,0.85) !important;
            background: linear-gradient(135deg, rgba(60,30,0,0.65), rgba(30,10,0,0.85)) !important;
            position: relative; overflow: hidden;
            animation: firstSpecialGlow 2.8s ease-in-out infinite;
        }
        @keyframes firstSpecialGlow {
            0%,100% { box-shadow: 0 0 10px rgba(240,192,96,0.25), 0 0 0 0 rgba(240,192,96,0); }
            50%      { box-shadow: 0 0 22px rgba(240,192,96,0.50), 0 0 0 3px rgba(240,192,96,0.08); }
        }
        .first-special-ribbon {
            position: absolute; top: 0; left: 0; right: 0;
            background: linear-gradient(135deg, rgba(240,192,96,0.22), rgba(240,140,0,0.18));
            border-bottom: 1px solid rgba(240,192,96,0.3);
            text-align: center; font-size: 9px; letter-spacing: 2.5px;
            color: var(--gold); padding: 5px 0; font-weight: 700;
        }
        .first-special .plan-info { margin-top: 22px; }
        .first-special-name { color: var(--gold-soft) !important; font-size: 15px !important; }
        .first-special-note {
            font-size: 11px; color: rgba(253,230,138,0.75);
            margin-top: 5px; letter-spacing: 1px;
        }
        .plan-price-wrap { text-align: right; line-height: 1.2; }
        .plan-price-original {
            font-size: 12px; color: var(--text-secondary);
            text-decoration: line-through; letter-spacing: 0;
        }
        .first-price { color: var(--gold) !important; font-size: 22px !important; }
        .plan-info { text-align: left; }
        .plan-name { font-size: 14px; color: var(--text-primary); letter-spacing: 1px; }
        .plan-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
        .plan-price { font-size: 20px; font-weight: 700; color: var(--gold-soft); letter-spacing: 1px; }

        .paywall-cancel {
            width: 100%; background: transparent;
            border: 1px solid rgba(168,85,247,0.25);
            border-radius: 30px; padding: 12px;
            color: var(--text-secondary); font-size: 13px; letter-spacing: 2px;
            cursor: pointer; transition: all 0.2s;
            font-family: 'Noto Serif JP', serif;
        }
        .paywall-cancel:hover { border-color: rgba(168,85,247,0.45); color: var(--text-primary); }
        /* ===== メール復元バナー ===== */
        .restore-banner {
            background: rgba(240,192,96,0.08);
            border: 1px solid rgba(240,192,96,0.3);
            border-radius: 14px;
            padding: 14px 16px;
            margin-bottom: 12px;
            flex-shrink: 0;
        }
        .restore-banner-text {
            font-size: 12px; color: var(--gold); letter-spacing: 1px;
            margin-bottom: 10px; line-height: 1.6;
        }
        .restore-banner-row {
            display: flex; gap: 8px; margin-bottom: 8px;
        }
        .restore-email-input {
            flex: 1; background: rgba(30,0,50,0.7);
            border: 1px solid rgba(240,192,96,0.3);
            border-radius: 8px; padding: 9px 12px;
            color: var(--text-primary); font-size: 13px;
            font-family: inherit; outline: none;
            -webkit-appearance: none;
        }
        .restore-email-input:focus { border-color: var(--gold); }
        .restore-email-input::placeholder { color: var(--text-muted); font-size: 12px; }
        .restore-btn {
            padding: 9px 16px; background: rgba(240,192,96,0.2);
            border: 1px solid rgba(240,192,96,0.4);
            border-radius: 8px; color: var(--gold);
            font-size: 12px; letter-spacing: 1px; cursor: pointer;
            font-family: inherit; white-space: nowrap; transition: background 0.2s;
        }
        .restore-btn:hover { background: rgba(240,192,96,0.3); }
        .restore-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .restore-feedback { font-size: 11px; min-height: 16px; margin-top: 2px; }
        .restore-feedback.ok { color: #80e0a0; }
        .restore-feedback.err { color: #f5a0a0; }
        .restore-dismiss {
            background: none; border: none; color: var(--text-muted);
            font-size: 11px; cursor: pointer; margin-top: 6px;
            font-family: inherit; padding: 0; letter-spacing: 1px;
        }
        .restore-dismiss:hover { color: var(--text-secondary); }
        /* ===== 履歴区切り ===== */
        .history-divider {
            display: flex; align-items: center; gap: 12px;
            margin: 16px 8px; color: var(--text-secondary); font-size: 12px; letter-spacing: 2px;
        }
        .history-divider::before, .history-divider::after {
            content: ''; flex: 1; border-top: 1px solid rgba(168,85,247,0.2);
        }

        /* ===== イントロアニメーション ===== */
        #introOverlay {
            position: absolute; inset: 0; z-index: 100;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: radial-gradient(ellipse at 50% 40%, #1e0040 0%, #0a0010 65%);
            opacity: 0; transition: opacity 0.5s ease;
            pointer-events: none; overflow: hidden;
        }
        #introOverlay.visible { opacity: 1; pointer-events: auto; }
        #introOverlay.hiding { opacity: 0; }

        /* ===== 花音 総合判定後 アウトロオーバーレイ ===== */
        #kaonOutroOverlay {
            position: fixed; inset: 0; z-index: 9500;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: radial-gradient(ellipse at 50% 38%, #2a0040 0%, #0a0018 70%);
            opacity: 0; transition: opacity 0.8s ease;
            pointer-events: none; overflow: hidden;
            text-align: center; padding: 32px 28px;
        }
        #kaonOutroOverlay.visible { opacity: 1; pointer-events: auto; }
        #kaonOutroOverlay.hiding  { opacity: 0; }
        #kaonOutroOverlay::before {
            content: '';
            position: absolute; inset: 0; pointer-events: none;
            background-image:
                radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,180,220,0.6) 0%, transparent 100%),
                radial-gradient(1px 1px   at 80% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),
                radial-gradient(2px 2px   at 40% 75%, rgba(255,150,200,0.5) 0%, transparent 100%),
                radial-gradient(1px 1px   at 85% 60%, rgba(255,255,255,0.35) 0%, transparent 100%),
                radial-gradient(1.5px 1.5px at 10% 85%, rgba(255,180,220,0.45) 0%, transparent 100%),
                radial-gradient(1px 1px   at 65% 35%, rgba(255,150,200,0.4) 0%, transparent 100%);
            animation: introStarPulse 3.5s ease-in-out infinite alternate;
        }
        .kaon-outro-img {
            width: 140px; height: 140px; border-radius: 50%;
            object-fit: cover; object-position: center top;
            border: 2px solid rgba(244,114,182,0.7);
            box-shadow: 0 0 0 1px rgba(244,114,182,0.25), 0 0 24px rgba(244,114,182,0.5), 0 0 56px rgba(200,80,160,0.2);
            margin-bottom: 28px;
            animation: introOrbEnter 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
        }
        .kaon-outro-msg {
            font-family: 'Noto Serif JP', serif;
            font-size: 15px; color: rgba(255,220,240,0.95);
            line-height: 2; letter-spacing: 0.5px;
            max-width: 320px;
            animation: introSlideUp 0.6s ease 0.5s both;
        }
        .kaon-outro-msg strong {
            color: #f9a8d4;
        }

        /* 背景パーティクル（CSS only・軽量） */
        #introOverlay::before {
            content: '';
            position: absolute; inset: 0; pointer-events: none;
            background-image:
                radial-gradient(1.5px 1.5px at 18% 25%, rgba(200,150,255,0.7) 0%, transparent 100%),
                radial-gradient(1px 1px   at 75% 18%, rgba(255,255,255,0.5) 0%, transparent 100%),
                radial-gradient(2px 2px   at 42% 72%, rgba(200,150,255,0.6) 0%, transparent 100%),
                radial-gradient(1px 1px   at 88% 55%, rgba(255,255,255,0.4) 0%, transparent 100%),
                radial-gradient(1.5px 1.5px at 12% 80%, rgba(255,255,255,0.5) 0%, transparent 100%),
                radial-gradient(1px 1px   at 60% 38%, rgba(200,150,255,0.4) 0%, transparent 100%),
                radial-gradient(2px 2px   at 30% 55%, rgba(255,255,255,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px   at 92% 82%, rgba(200,150,255,0.5) 0%, transparent 100%),
                radial-gradient(1.5px 1.5px at 55% 90%, rgba(255,255,255,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px   at 5%  45%, rgba(200,150,255,0.4) 0%, transparent 100%);
            animation: introStarPulse 4s ease-in-out infinite alternate;
        }
        @keyframes introStarPulse { 0% { opacity: 0.4; } 100% { opacity: 1; } }

        /* 底部グロー光源 */
        #introOverlay::after {
            content: '';
            position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
            width: 280px; height: 180px; border-radius: 50%;
            background: radial-gradient(ellipse, rgba(123,47,255,0.25) 0%, transparent 70%);
            pointer-events: none;
            animation: introBaseGlow 3s ease-in-out infinite alternate;
        }
        @keyframes introBaseGlow { 0% { opacity: 0.5; } 100% { opacity: 1; } }

        /* アバターラッパー */
        .intro-orb-wrap {
            position: relative; width: 172px; height: 172px;
            margin-bottom: 28px;
            animation: introOrbEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
        }
        @keyframes introOrbEnter {
            from { opacity: 0; transform: scale(0.6); }
            to   { opacity: 1; transform: scale(1); }
        }

        /* 外側回転リング（GPU: rotate） */
        .intro-ring-outer {
            position: absolute; inset: -12px; border-radius: 50%;
            border: 2px solid transparent;
            border-top-color: rgba(192,132,252,0.9);
            border-right-color: rgba(168,85,247,0.5);
            border-bottom-color: rgba(168,85,247,0.1);
            animation: introSpinCW 2.4s linear infinite;
            will-change: transform;
        }
        /* 内側逆回転リング */
        .intro-ring-inner {
            position: absolute; inset: -5px; border-radius: 50%;
            border: 1.5px solid transparent;
            border-top-color: rgba(240,200,255,0.4);
            border-left-color: rgba(192,132,252,0.3);
            animation: introSpinCCW 3.6s linear infinite;
            will-change: transform;
        }
        @keyframes introSpinCW  { to { transform: rotate(360deg);  } }
        @keyframes introSpinCCW { to { transform: rotate(-360deg); } }

        /* グロー層 */
        .intro-orb-glow {
            position: absolute; inset: -18px; border-radius: 50%;
            background: radial-gradient(circle, rgba(168,85,247,0.45) 0%, transparent 68%);
            animation: introGlowPulse 2.2s ease-in-out infinite;
            will-change: transform, opacity;
        }
        @keyframes introGlowPulse {
            0%,100% { transform: scale(1);    opacity: 0.6; }
            50%      { transform: scale(1.18); opacity: 1;   }
        }

        /* アバター本体 */
        .intro-orb-img {
            width: 172px; height: 172px; border-radius: 50%; display: block;
            object-fit: cover; object-position: center top;
            border: 2px solid rgba(192,132,252,0.7);
            box-shadow:
                0 0 0 1px rgba(168,85,247,0.3),
                0 0 20px rgba(168,85,247,0.55),
                0 0 50px rgba(168,85,247,0.2);
            position: relative; z-index: 1;
            image-rendering: -webkit-optimize-contrast;
        }

        /* キャラ名 */
        .intro-name {
            font-family: 'Noto Serif JP', serif;
            font-size: 20px; color: #e9d5ff;
            letter-spacing: 6px; margin-bottom: 8px;
            animation: introSlideUp 0.55s ease 0.45s both;
        }
        /* 職称ライン */
        .intro-role {
            font-size: 10px; color: rgba(192,132,252,0.88);
            letter-spacing: 3px; text-transform: uppercase;
            margin-bottom: 14px;
            animation: introSlideUp 0.55s ease 0.6s both;
        }
        @keyframes introSlideUp {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0);    }
        }

        /* ラベルテキスト */
        .intro-label {
            font-size: 13px; color: rgba(210,160,255,0.9);
            letter-spacing: 2px; font-style: italic;
            text-align: center; padding: 0 24px;
            animation: introSlideUp 0.5s ease 0.75s both;
        }

        /* 待機ステージ：introLabel のテキスト切り替え用 */
        .intro-label {
            min-height: 2em;
            transition: opacity 0.55s ease, transform 0.55s ease, color 0.55s ease, text-shadow 0.55s ease;
        }
        .intro-label.stage-fade-out {
            opacity: 0;
            transform: translateY(-8px) scale(0.95);
            color: rgba(192,132,252,0.2);
            text-shadow: none;
        }
        .intro-label.stage-fade-in {
            opacity: 1;
            transform: translateY(0) scale(1);
            color: rgba(240,200,255,1);
            text-shadow: 0 0 14px rgba(200,130,255,0.9), 0 0 30px rgba(168,85,247,0.5);
        }

        /* ドット */
        .intro-dots {
            display: flex; gap: 8px; margin-top: 22px;
            animation: introSlideUp 0.4s ease 0.95s both;
        }
        .intro-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--purple-soft);
            animation: typingBounce 1.2s ease infinite;
        }
        .intro-dot:nth-child(2) { animation-delay: 0.2s; }
        .intro-dot:nth-child(3) { animation-delay: 0.4s; }

        /* ===== ログイン（購入済みユーザー向け） ===== */
        .login-divider {
            display:flex; align-items:center; gap:12px;
            margin:16px 0 14px; color:var(--text-secondary); font-size:12px;
        }
        .login-divider::before, .login-divider::after {
            content:''; flex:1; border-top:1px solid rgba(168,85,247,0.15);
        }
        .login-restore-title {
            font-size:12px; color:var(--text-secondary); letter-spacing:2px; text-align:center; margin-bottom:4px;
        }
        .login-restore-desc {
            font-size:12px; color:var(--text-secondary); text-align:center; margin-bottom:12px; line-height:1.6;
        }
        .login-email-input {
            width:100%; background:rgba(30,0,50,0.7); border:1px solid rgba(168,85,247,0.25);
            border-radius:10px; padding:11px 14px; color:var(--text); font-size:14px;
            font-family:inherit; outline:none; margin-bottom:8px; transition:border-color 0.2s;
            -webkit-appearance:none;
        }
        .login-email-input:focus { border-color:var(--purple-soft); }
        .login-email-input::placeholder { color:var(--text-muted); }
        .login-send-btn {
            width:100%; background:rgba(123,47,255,0.15);
            border:1px solid rgba(168,85,247,0.4); border-radius:10px; padding:11px;
            color:var(--purple-soft); font-size:13px; letter-spacing:1px;
            cursor:pointer; font-family:inherit; transition:all 0.2s; margin-bottom:0;
        }
        .login-send-btn:hover { background:rgba(123,47,255,0.25); }
        .login-send-btn:disabled { opacity:0.5; cursor:not-allowed; }
        .login-feedback { font-size:12px; text-align:center; min-height:18px; margin-top:6px; line-height:1.5; }
        .login-feedback.ok { color:#80e0a0; }
        .login-feedback.err { color:#f5a0a0; }

        /* 星背景 */
        .starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

        /* ===== タロットカード ===== */
        /* 守護神の声バブル */
        /* 守護神メッセージ：縦並びレイアウト */
        .deity-voice-msg {
            flex-direction: column !important;
            align-items: center !important;
            margin: 12px 8px !important;
            gap: 0 !important;
            animation: deityMsgAppear 1.4s ease both;
        }
        @keyframes deityMsgAppear {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .deity-avatar {
            width: min(110px, 28vw);
            height: min(110px, 28vw);
            border-radius: 12px;
            object-fit: contain;
            object-position: center top;
            background: rgba(20,10,0,0.6);
            border: 2px solid rgba(240,192,96,0.6);
            box-shadow: 0 0 20px rgba(240,192,96,0.5);
            cursor: pointer;
            flex-shrink: 0;
            margin-bottom: 8px;
            transition: box-shadow 0.3s;
            animation: deityAvatarAppear 1.6s ease both;
        }
        @keyframes deityAvatarAppear {
            0%   { opacity: 0; box-shadow: 0 0 0 rgba(240,192,96,0); }
            60%  { opacity: 1; box-shadow: 0 0 40px rgba(240,192,96,0.7); }
            100% { opacity: 1; box-shadow: 0 0 20px rgba(240,192,96,0.5); }
        }
        .deity-avatar:hover { box-shadow: 0 0 36px rgba(240,192,96,0.8); }
        .deity-bubble {
            background: linear-gradient(135deg, rgba(60,30,0,0.85), rgba(40,20,0,0.9));
            border: 1px solid rgba(240,192,96,0.35);
            border-radius: 12px;
            padding: 12px 16px;
            color: #fef3c7;
            font-size: 14px;
            line-height: 1.8;
            width: min(320px, 88vw);
            box-shadow: 0 0 18px rgba(240,192,96,0.15);
            animation: deityFadeIn 1.0s ease;
            font-style: italic;
            text-align: center;
        }
        @keyframes deityFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
        /* タイプライターカーソル */
        .tw-cursor {
            display: inline;
            color: rgba(240,192,96,0.9);
            animation: twBlink 0.7s step-end infinite;
        }
        @keyframes twBlink {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0; }
        }
        .deity-name-tag {
            font-size: 10px; letter-spacing: 2px; color: var(--gold);
            margin-bottom: 6px;
        }

        /* 守護神召喚アニメーション オーバーレイ */
        .guardian-call-overlay {
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(8, 4, 18, 0.97);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 0;
            opacity: 0; transition: opacity 0.7s ease;
            pointer-events: none;
        }
        .guardian-call-overlay.gco-in  { opacity: 1; pointer-events: auto; }
        .guardian-call-overlay.gco-out { opacity: 0; }

        .gco-kaede-img {
            width: min(72px, 18vw); height: min(72px, 18vw);
            border-radius: 50%; object-fit: cover; object-position: top;
            border: 2px solid rgba(200,160,255,0.4);
            box-shadow: 0 0 16px rgba(180,120,255,0.3);
            margin-bottom: 14px;
            opacity: 0; transform: scale(0.85);
            transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
        }
        .gco-kaede-img.gco-show { opacity: 1; transform: scale(1); }

        .gco-kaede-text {
            color: #e9d5ff; font-size: 13px; letter-spacing: 1px;
            margin-bottom: 28px;
            opacity: 0; transition: opacity 0.6s ease 0.6s;
        }
        .gco-kaede-text.gco-show { opacity: 1; }

        .gco-deity-img {
            width: 0; height: 0; opacity: 0;
            border-radius: 14px; object-fit: contain; object-position: top;
            background: rgba(20,10,0,0.5);
            border: 2px solid rgba(240,192,96,0);
            box-shadow: 0 0 0 rgba(240,192,96,0);
            transition: width 0.8s ease, height 0.8s ease, opacity 0.8s ease,
                        border-color 0.8s ease 0.4s, box-shadow 0.8s ease 0.4s;
        }
        .gco-deity-img.gco-show {
            width: min(150px, 38vw); height: min(150px, 38vw); opacity: 1;
            border-color: rgba(240,192,96,0.5);
            box-shadow: 0 0 28px rgba(240,192,96,0.4);
        }

        .gco-deity-name {
            color: var(--gold, #f0c060); font-size: 15px; letter-spacing: 3px;
            margin-top: 12px;
            opacity: 0; transition: opacity 0.6s ease;
        }
        .gco-deity-name.gco-show { opacity: 1; }

        .gco-ready-text {
            color: #fef3c7; font-size: 12px; letter-spacing: 1px;
            margin-top: 20px;
            opacity: 0; transition: opacity 0.6s ease;
        }
        .gco-ready-text.gco-show { opacity: 1; }

        /* ご先祖様の言葉（性別・登場順ごとに異なる色） */
        .ancestor-m1 { color: #93c5fd; font-style: italic; }  /* 男性のご先祖様 */
        .ancestor-f1 { color: #f9a8d4; font-style: italic; }  /* 女性のご先祖様 */
        .ancestor-m2 { color: #67e8f9; font-style: italic; }  /* もう一人の男性のご先祖様 */
        .ancestor-f2 { color: #c4b5fd; font-style: italic; }  /* もう一人の女性のご先祖様 */
        .ancestor-voice { color: #f9a8d4; font-style: italic; } /* 旧フォールバック */
        /* 話者ラベル（「男性のご先祖様」など） */
        .ancestor-speaker {
            display: block;
            font-size: 0.68rem;
            letter-spacing: 0.12em;
            font-style: normal;
            opacity: 0.75;
            margin-top: 10px;
            margin-bottom: 1px;
        }
        .ancestor-speaker::before { content: '— '; }
        .ancestor-speaker::after  { content: ' —'; }
        .ancestor-speaker-m { color: #93c5fd; }
        .ancestor-speaker-f { color: #f9a8d4; }

        /* 守護神選出時の大きな画像演出 */
        .deity-reveal-card {
            text-align: center;
            padding: 32px 16px 20px;
        }
        .deity-reveal-img {
            width: min(220px, 82%);
            height: min(220px, 82vw);
            border-radius: 16px;
            object-fit: contain;
            background: rgba(20,10,0,0.5);
            border: 2px solid rgba(240,192,96,0.7);
            box-shadow: 0 0 40px rgba(240,192,96,0.5);
            cursor: pointer;
            display: block;
            margin: 0 auto;
            transition: box-shadow 0.3s;
            animation: deityImgFadeIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes deityImgFadeIn {
            0%   { opacity: 0; transform: scale(0.82) translateY(12px); }
            55%  { opacity: 1; transform: scale(1.04) translateY(-2px); }
            100% { opacity: 1; transform: scale(1)    translateY(0); }
        }
        .deity-reveal-img:hover { box-shadow: 0 0 60px rgba(240,192,96,0.85); }
        .deity-reveal-name {
            color: var(--gold);
            font-family: 'Noto Serif JP', serif;
            font-size: 18px;
            letter-spacing: 4px;
            margin-top: 14px;
            opacity: 0;
            animation: deityTextFadeIn 0.7s ease 1.4s forwards;
        }
        .deity-reveal-attr {
            font-size: 12px;
            color: var(--text-muted);
            letter-spacing: 2px;
            margin-top: 4px;
            opacity: 0;
            animation: deityTextFadeIn 0.7s ease 1.7s forwards;
        }
        @keyframes deityTextFadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* 守護神ライトボックス */
        .deity-lightbox {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.92);
            z-index: 2000;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            animation: fadeIn 0.25s ease;
        }
        .deity-lightbox img {
            max-width: 88vw; max-height: 65vh;
            border-radius: 16px;
            border: 3px solid rgba(240,192,96,0.6);
            box-shadow: 0 0 60px rgba(240,192,96,0.4);
            object-fit: contain;
        }
        .deity-lightbox-name {
            color: var(--gold);
            font-family: 'Noto Serif JP', serif;
            font-size: 18px;
            letter-spacing: 4px;
            margin-top: 20px;
        }
        .deity-lightbox-close {
            margin-top: 24px;
            background: none;
            border: 1px solid rgba(240,192,96,0.5);
            border-radius: 50px;
            color: var(--gold);
            font-size: 14px;
            letter-spacing: 2px;
            padding: 10px 32px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .deity-lightbox-close:hover { background: rgba(240,192,96,0.15); }

        /* 守護神交信ボタン */
        .guardian-btn {
            display: block;
            margin-top: 14px;
            background: linear-gradient(135deg, #92400e, #b45309);
            border: 1px solid rgba(217,119,6,0.5);
            border-radius: 24px;
            padding: 10px 24px;
            color: #fef3c7;
            font-size: 12px;
            letter-spacing: 2px;
            cursor: pointer;
            font-family: 'Noto Serif JP', serif;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 16px rgba(217,119,6,0.35);
        }
        .guardian-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(217,119,6,0.55); }
        .guardian-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .guardian-cancel-btn {
            display: block;
            margin-top: 8px;
            background: transparent;
            border: 1px solid rgba(180,130,100,0.4);
            color: rgba(200,170,140,0.75);
            font-size: 0.8rem;
            padding: 6px 18px;
            border-radius: 20px;
            cursor: pointer;
            letter-spacing: 0.08em;
            transition: background 0.2s, color 0.2s;
        }
        .guardian-cancel-btn:hover { background: rgba(180,130,100,0.15); color: rgba(220,190,160,1); }
        .guardian-reveal-msg {
            border-left: 2px solid rgba(217,119,6,0.5);
            padding-left: 10px;
            margin-top: 8px;
            animation: guardianFade 1.2s ease;
        }
        @keyframes guardianFade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

        /* ===== 守護神召喚中 待機アニメーション（チャット内）===== */
        /* バブル内インラインオーブ（呼び出し文と同時表示） */
        .guardian-call-orb-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-top: 14px;
        }
        .guardian-call-orb-wrap .guardian-waiting-orb {
            width: 42px;
            height: 42px;
        }
        .guardian-waiting {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 28px 16px 20px;
            gap: 14px;
            animation: gwFadeIn 0.6s ease;
        }
        @keyframes gwFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .guardian-waiting-orb {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: radial-gradient(circle at 38% 32%, rgba(230,200,255,0.95), rgba(90,50,190,0.55));
            box-shadow: 0 0 22px rgba(180,130,255,0.75), 0 0 50px rgba(100,55,210,0.4);
            animation: gwOrbPulse 2.4s ease-in-out infinite;
        }
        @keyframes gwOrbPulse {
            0%, 100% { transform: scale(1);    box-shadow: 0 0 22px rgba(180,130,255,0.75), 0 0 50px rgba(100,55,210,0.4); }
            50%       { transform: scale(1.18); box-shadow: 0 0 36px rgba(210,170,255,1),    0 0 80px rgba(120,65,230,0.65); }
        }
        .guardian-waiting-stars {
            display: flex;
            gap: 10px;
        }
        .guardian-waiting-stars span {
            font-size: 0.75rem;
            color: rgba(200,165,255,0.6);
            animation: gwStarBlink 2.4s ease-in-out infinite;
        }
        .guardian-waiting-stars span:nth-child(2) { animation-delay: 0.4s; }
        .guardian-waiting-stars span:nth-child(3) { animation-delay: 0.8s; }
        @keyframes gwStarBlink {
            0%, 100% { opacity: 0.25; transform: scale(0.85); }
            50%       { opacity: 1;    transform: scale(1.15); }
        }
        .guardian-waiting-text {
            color: rgba(200,168,255,0.72);
            font-size: 0.8rem;
            letter-spacing: 0.14em;
            animation: gwTextPulse 2.4s ease-in-out infinite;
            transition: opacity 0.45s ease;
        }
        /* フェーズ切り替え時の一瞬フェードアウト */
        .guardian-waiting-text.gw-text-fade { opacity: 0 !important; }
        @keyframes gwTextPulse {
            0%, 100% { opacity: 0.4; }
            50%       { opacity: 0.95; }
        }

        /* 待機中の漢字ルーン演出 */
        .guardian-waiting-runes {
            display: flex;
            gap: 16px;
        }
        .guardian-waiting-runes span {
            color: rgba(220,180,255,0.45);
            font-size: 1rem;
            font-family: 'Noto Serif JP', serif;
            letter-spacing: 2px;
            animation: gwRuneFloat 5s ease-in-out infinite;
        }
        .guardian-waiting-runes span:nth-child(1) { animation-duration: 4.8s; animation-delay: 0s; }
        .guardian-waiting-runes span:nth-child(2) { animation-duration: 6.2s; animation-delay: -2.1s; }
        .guardian-waiting-runes span:nth-child(3) { animation-duration: 5.5s; animation-delay: -1.3s; }
        @keyframes gwRuneFloat {
            0%   { opacity: 0.15; transform: translateY(0)   scale(0.9); }
            30%  { opacity: 0.65; transform: translateY(-4px) scale(1.05); }
            60%  { opacity: 0.25; transform: translateY(2px)  scale(0.95); }
            100% { opacity: 0.15; transform: translateY(0)   scale(0.9); }
        }

        /* 守護神バブル：交信中アニメーション */
        .deity-connecting-wrap {
            text-align: center;
            padding: 6px 0 4px;
        }
        .deity-connecting-orbs {
            display: flex;
            justify-content: center;
            gap: 14px;
            margin-bottom: 8px;
        }
        .deity-connecting-orbs span {
            color: rgba(240,192,96,0.8);
            font-size: 1rem;
            animation: deityConnPulse 1.6s ease-in-out infinite;
        }
        .deity-connecting-orbs span:nth-child(1) { animation-delay: 0s; }
        .deity-connecting-orbs span:nth-child(2) { animation-delay: 0.53s; }
        .deity-connecting-orbs span:nth-child(3) { animation-delay: 1.06s; }
        @keyframes deityConnPulse {
            0%, 100% { opacity: 0.12; transform: scale(0.65); }
            50%       { opacity: 1;    transform: scale(1.35); }
        }
        .deity-connecting-text {
            color: rgba(240,192,96,0.55);
            font-size: 0.72rem;
            letter-spacing: 0.18em;
            transition: opacity 0.35s ease;
            animation: deityConnTextPulse 2.4s ease-in-out infinite;
        }
        @keyframes deityConnTextPulse {
            0%, 100% { opacity: 0.3; }
            50%       { opacity: 0.9; }
        }

        /* ===== 生年月日入力フォーム（守護神儀式用） ===== */
        .birth-input-form {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            margin: 8px 0 8px 44px;
            background: rgba(20,5,40,0.75);
            border: 1px solid rgba(217,119,6,0.4);
            border-radius: 12px;
            animation: guardianFade 0.6s ease;
        }
        .birth-date-input {
            flex: 1;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(217,119,6,0.35);
            border-radius: 8px;
            color: var(--text-main);
            padding: 8px 12px;
            font-family: 'Noto Serif JP', serif;
            font-size: 14px;
        }
        .birth-date-input::-webkit-calendar-picker-indicator { filter: invert(0.8) sepia(1) hue-rotate(0deg); }
        .birth-date-submit-btn {
            background: linear-gradient(135deg, rgba(217,119,6,0.7), rgba(240,192,96,0.5));
            border: 1px solid rgba(240,192,96,0.5);
            border-radius: 8px;
            color: var(--gold);
            padding: 8px 14px;
            font-size: 13px;
            font-family: 'Noto Serif JP', serif;
            cursor: pointer;
            white-space: nowrap;
        }

        /* ===== クイックリプライボタン ===== */
        .quick-replies-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            padding: 4px 16px 8px;
            align-self: center;
            width: 100%;
            max-width: 480px;
        }
        .quick-reply-btn {
            background: rgba(123, 47, 255, 0.15);
            border: 1px solid rgba(240, 192, 96, 0.5);
            border-radius: 20px;
            color: var(--gold-soft);
            font-family: 'Noto Serif JP', serif;
            font-size: 13px;
            padding: 8px 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }
        .quick-reply-btn:hover {
            background: rgba(123, 47, 255, 0.35);
            border-color: var(--gold);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(123, 47, 255, 0.3);
        }
        .quick-reply-kaon-reading {
            background: linear-gradient(135deg, rgba(124,45,146,0.6), rgba(219,39,119,0.6) 55%, rgba(245,158,11,0.5));
            border-color: rgba(244, 114, 182, 0.7);
            color: #fff;
            font-weight: 600;
            box-shadow: 0 4px 16px rgba(219,39,119,0.3);
        }
        .quick-reply-kaon-reading:hover {
            background: linear-gradient(135deg, rgba(124,45,146,0.85), rgba(219,39,119,0.85) 55%, rgba(245,158,11,0.75));
            box-shadow: 0 6px 20px rgba(219,39,119,0.5);
            transform: translateY(-2px);
        }
        .quick-reply-custom {
            display: block;
            width: 100%;
            text-align: center;
            background: rgba(196, 181, 212, 0.08);
            border: 1.5px solid rgba(196, 181, 212, 0.5);
            border-radius: 10px;
            color: rgba(243, 232, 255, 0.9);
            font-size: 13px;
            padding: 10px 16px;
            margin-bottom: 8px;
            letter-spacing: 0.8px;
            animation: customBtnPulse 1.6s ease-in-out infinite;
        }
        .quick-reply-custom:hover {
            background: rgba(196, 181, 212, 0.18);
            border-color: rgba(220, 200, 255, 1);
            color: #fff;
            animation: none;
            box-shadow: 0 0 16px rgba(196, 181, 212, 0.5);
            transform: translateY(-2px);
        }
        @keyframes customBtnPulse {
            0%, 100% {
                opacity: 0.5;
                border-color: rgba(196, 181, 212, 0.3);
                box-shadow: none;
                background: rgba(196, 181, 212, 0.05);
            }
            50% {
                opacity: 1;
                border-color: rgba(220, 200, 255, 0.95);
                box-shadow: 0 0 16px rgba(196, 181, 212, 0.65), 0 0 32px rgba(196, 181, 212, 0.25), inset 0 0 12px rgba(196, 181, 212, 0.12);
                background: rgba(196, 181, 212, 0.14);
            }
        }

        /* ソラ：連続ボタン使用時のタイピング誘導ヒント */
        .sora-typing-hint {
            font-size: 12px;
            color: rgba(196, 181, 212, 0.7);
            text-align: center;
            padding: 6px 16px;
            margin: 4px auto 2px;
            font-style: italic;
            letter-spacing: 0.3px;
            opacity: 1;
            transition: opacity 1s ease;
        }
        .sora-typing-hint-fade {
            opacity: 0;
        }

        .tarot-draw-btn {
            display: block;
            margin-top: 12px;
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            border: 1px solid rgba(139,92,246,0.6);
            border-radius: 24px;
            padding: 10px 24px;
            color: #f3e8ff;
            font-size: 12px;
            letter-spacing: 2px;
            cursor: pointer;
            font-family: 'Noto Serif JP', serif;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 4px 16px rgba(124,58,237,0.4);
        }
        .tarot-draw-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,0.6); }
        .tarot-draw-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .kaon-reading-btn {
            background: linear-gradient(135deg, #7c2d92, #db2777 55%, #f59e0b);
            border-color: rgba(244, 114, 182, 0.65);
            box-shadow: 0 6px 24px rgba(219,39,119,0.35);
        }
        .kaon-reading-btn:hover { box-shadow: 0 10px 28px rgba(219,39,119,0.5); }
        .kaon-reading-btn:disabled { opacity: 0.85; }
        .kaon-reading-ritual {
            align-self: center;
            width: min(100%, 520px);
            margin: 4px auto 8px;
            padding: 18px 20px;
            border-radius: 24px;
            border: 1px solid rgba(244, 114, 182, 0.28);
            background:
                radial-gradient(circle at top, rgba(244,114,182,0.22), transparent 50%),
                linear-gradient(180deg, rgba(45,0,64,0.95), rgba(20,0,38,0.95));
            box-shadow: 0 20px 40px rgba(0,0,0,0.28), inset 0 0 40px rgba(244,114,182,0.08);
            position: relative;
            overflow: hidden;
            animation: kaonRitualFadeIn 0.7s ease both;
            isolation: isolate;
        }
        .kaon-reading-ritual.kaon-stage-1 {
            background:
                radial-gradient(circle at top, rgba(125, 211, 252, 0.18), transparent 42%),
                radial-gradient(circle at 80% 18%, rgba(244,114,182,0.20), transparent 32%),
                linear-gradient(180deg, rgba(22,18,68,0.96), rgba(12,0,34,0.96));
        }
        .kaon-reading-ritual.kaon-stage-2 {
            background:
                radial-gradient(circle at top, rgba(196,181,253,0.18), transparent 44%),
                radial-gradient(circle at 82% 18%, rgba(253,224,71,0.16), transparent 30%),
                linear-gradient(180deg, rgba(45,0,64,0.96), rgba(17,0,34,0.96));
        }
        .kaon-reading-ritual.kaon-stage-3 {
            background:
                radial-gradient(circle at top, rgba(251,191,36,0.18), transparent 42%),
                radial-gradient(circle at 82% 18%, rgba(244,114,182,0.18), transparent 32%),
                linear-gradient(180deg, rgba(48,10,38,0.96), rgba(22,0,24,0.96));
        }
        .kaon-reading-ritual::before,
        .kaon-reading-ritual::after {
            content: "";
            position: absolute;
            inset: auto;
            border-radius: 50%;
            pointer-events: none;
        }
        .kaon-reading-ritual::before {
            width: 180px; height: 180px;
            top: -70px; right: -40px;
            background: radial-gradient(circle, rgba(253,230,138,0.2), transparent 65%);
            animation: kaonOrbPulse 4s ease-in-out infinite;
        }
        .kaon-reading-ritual::after {
            width: 140px; height: 140px;
            bottom: -50px; left: -25px;
            background: radial-gradient(circle, rgba(192,132,252,0.14), transparent 65%);
            animation: kaonOrbPulse 5s ease-in-out infinite reverse;
        }
        .kaon-reading-ritual-core {
            width: 110px; height: 110px;
            margin: 0 auto 14px;
            position: relative;
        }
        .kaon-reading-stars {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .kaon-reading-stars i {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(255,255,255,0.75);
            box-shadow: 0 0 12px rgba(255,255,255,0.35);
            animation: kaonStarFloat 3.8s ease-in-out infinite;
        }
        .kaon-reading-stars i:nth-child(1) { top: 12%; left: 18%; animation-delay: 0s; }
        .kaon-reading-stars i:nth-child(2) { top: 22%; right: 16%; animation-delay: 0.6s; }
        .kaon-reading-stars i:nth-child(3) { top: 58%; left: 12%; animation-delay: 1.2s; }
        .kaon-reading-stars i:nth-child(4) { top: 70%; right: 20%; animation-delay: 1.8s; }
        .kaon-reading-stars i:nth-child(5) { top: 38%; left: 50%; animation-delay: 2.2s; }
        .kaon-reading-stars i:nth-child(6) { top: 82%; left: 44%; animation-delay: 2.8s; }
        .kaon-reading-veil {
            position: absolute;
            inset: auto 12% 14px 12%;
            height: 42px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
            filter: blur(10px);
            opacity: 0.85;
            animation: kaonVeilShift 4.2s ease-in-out infinite;
            pointer-events: none;
        }
        .kaon-reading-aurora {
            position: absolute;
            inset: -8% -14%;
            pointer-events: none;
            opacity: 0.55;
            mix-blend-mode: screen;
            filter: blur(22px);
            animation: kaonAuroraShift 9s ease-in-out infinite;
        }
        .kaon-reading-aurora::before,
        .kaon-reading-aurora::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
        }
        .kaon-reading-aurora::before {
            background: radial-gradient(circle at 26% 24%, rgba(125,211,252,0.26), transparent 34%),
                        radial-gradient(circle at 72% 30%, rgba(244,114,182,0.24), transparent 30%),
                        radial-gradient(circle at 52% 76%, rgba(196,181,253,0.22), transparent 34%);
            animation: kaonAuroraPulse 7s ease-in-out infinite;
        }
        .kaon-reading-aurora::after {
            background: conic-gradient(from 120deg, rgba(251,191,36,0.14), rgba(244,114,182,0.10), rgba(125,211,252,0.16), rgba(251,191,36,0.14));
            animation: kaonHueOrbit 14s linear infinite;
            opacity: 0.7;
        }
        .kaon-reading-runes {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }
        .kaon-reading-runes span {
            position: absolute;
            color: rgba(253,230,138,0.46);
            font-size: 14px;
            letter-spacing: 1px;
            text-shadow: 0 0 14px rgba(253,230,138,0.22);
            animation: kaonRuneDrift 6.8s ease-in-out infinite;
        }
        .kaon-reading-runes span:nth-child(1) { top: 14%; left: 12%; animation-delay: 0s; }
        .kaon-reading-runes span:nth-child(2) { top: 20%; right: 13%; animation-delay: 1.4s; }
        .kaon-reading-runes span:nth-child(3) { bottom: 18%; left: 18%; animation-delay: 2.6s; }
        .kaon-reading-runes span:nth-child(4) { bottom: 12%; right: 20%; animation-delay: 3.8s; }
        .kaon-reading-ring,
        .kaon-reading-ring::before,
        .kaon-reading-ring::after {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1px solid rgba(253, 230, 138, 0.35);
            content: "";
        }
        .kaon-reading-ring {
            animation: kaonRotate 10s linear infinite;
        }
        .kaon-reading-ring::before {
            inset: 10px;
            border-color: rgba(244, 114, 182, 0.45);
            animation: kaonRotateReverse 7s linear infinite;
        }
        .kaon-reading-ring::after {
            inset: 22px;
            border-color: rgba(192, 132, 252, 0.35);
            animation: kaonRotate 5.5s linear infinite;
        }
        .kaon-reading-glyph {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gold-soft);
            font-family: 'Cinzel', serif;
            font-size: 28px;
            letter-spacing: 4px;
            text-shadow: 0 0 18px rgba(253,230,138,0.35);
            animation: kaonGlyphGlow 2.8s ease-in-out infinite;
        }
        .kaon-reading-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            margin: 0 auto 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(253,230,138,0.25);
            color: var(--gold-soft);
            font-size: 16px;
            box-shadow: inset 0 0 16px rgba(255,255,255,0.04);
            animation: kaonGlyphGlow 3.2s ease-in-out infinite;
        }
        .kaon-reading-stage-body {
            position: relative;
            z-index: 1;
        }
        .kaon-reading-stage-body > * {
            opacity: 0;
            animation: kaonStageLineIn 0.55s ease forwards;
        }
        .kaon-reading-stage-body > *:nth-child(1) { animation-delay: 0.05s; }
        .kaon-reading-stage-body > *:nth-child(2) { animation-delay: 0.12s; }
        .kaon-reading-stage-body > *:nth-child(3) { animation-delay: 0.2s; }
        .kaon-reading-stage-body > *:nth-child(4) { animation-delay: 0.3s; }
        .kaon-reading-stage-body > *:nth-child(5) { animation-delay: 0.4s; }
        .kaon-reading-ritual.is-switching .kaon-reading-stage-body > * {
            animation: kaonStageLineOut 0.22s ease forwards;
        }
        .kaon-reading-ritual.is-dismissing {
            animation: kaonRitualFadeOut 0.28s ease forwards;
        }
        .kaon-reading-label {
            text-align: center;
            font-size: 12px;
            letter-spacing: 4px;
            color: #f9a8d4;
            margin-bottom: 8px;
        }
        .kaon-reading-copy {
            text-align: center;
            color: var(--text-secondary);
            font-size: 13px;
            line-height: 1.9;
        }
        .kaon-reading-status {
            margin-top: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            color: rgba(245, 225, 255, 0.82);
            font-size: 11px;
            letter-spacing: 2px;
            text-align: center;
            animation: kaonStatusGlow 2.8s ease-in-out infinite;
        }
        .kaon-reading-status-dots {
            display: inline-flex;
            gap: 4px;
        }
        .kaon-reading-status-dots span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(253,230,138,0.78);
            box-shadow: 0 0 10px rgba(253,230,138,0.28);
            animation: kaonStatusDot 1.4s ease-in-out infinite;
        }
        .kaon-reading-status-dots span:nth-child(2) { animation-delay: 0.18s; }
        .kaon-reading-status-dots span:nth-child(3) { animation-delay: 0.36s; }
        .kaon-reading-hint {
            max-height: 0;
            overflow: hidden;
            margin-top: 0;
            color: rgba(253,230,138,0.82);
            font-size: 11px;
            text-align: center;
            letter-spacing: 1px;
            opacity: 0;
            transform: translateY(6px);
            transition: max-height 0.35s ease, margin-top 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
        }
        .kaon-reading-ritual.is-delayed .kaon-reading-hint {
            max-height: 36px;
            margin-top: 10px;
            opacity: 1;
            transform: translateY(0);
        }
        .kaon-reading-escalation {
            max-height: 0;
            overflow: hidden;
            margin-top: 0;
            color: rgba(255,215,160,0.88);
            font-size: 11px;
            text-align: center;
            letter-spacing: 1px;
            opacity: 0;
            transform: translateY(8px);
            transition: max-height 0.4s ease, margin-top 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
        }
        .kaon-reading-ritual.is-long-wait .kaon-reading-escalation {
            max-height: 42px;
            margin-top: 8px;
            opacity: 1;
            transform: translateY(0);
        }
        .kaon-reading-ritual.is-long-wait .kaon-reading-ring {
            animation-duration: 4.5s;
        }
        .kaon-reading-ritual.is-long-wait .kaon-reading-ring::before {
            animation-duration: 3.4s;
        }
        .kaon-reading-ritual.is-long-wait .kaon-reading-ring::after {
            animation-duration: 2.6s;
        }
        .kaon-reading-ritual.is-long-wait .kaon-reading-aurora {
            opacity: 0.82;
            animation-duration: 4.8s;
        }
        .kaon-reading-ritual.is-long-wait .kaon-reading-stars i {
            animation-duration: 1.8s;
        }
        .kaon-reading-ritual.is-long-wait .kaon-reading-status {
            color: rgba(255,236,196,0.96);
        }
        .kaon-reading-bubble {
            background:
                linear-gradient(180deg, rgba(45,0,64,0.96), rgba(18,0,34,0.96)) !important;
            border-color: rgba(244,114,182,0.28) !important;
            box-shadow: 0 12px 36px rgba(0,0,0,0.2), inset 0 0 24px rgba(244,114,182,0.05);
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }
        .kaon-reading-bubble.kaon-reading-pending {
            display: none !important;
        }
        .kaon-afterglow-bubble {
            background: linear-gradient(180deg, rgba(74,18,66,0.96), rgba(28,0,28,0.96)) !important;
            border-color: rgba(244,114,182,0.34) !important;
            box-shadow: 0 14px 34px rgba(0,0,0,0.22), inset 0 0 26px rgba(244,114,182,0.07);
            position: relative;
            overflow: hidden;
            animation: kaonAfterglowIn 0.55s ease both;
        }
        .kaon-afterglow-bubble::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 28%, transparent 50%);
            transform: translateX(-120%);
            animation: kaonBubbleShimmer 6s ease-in-out infinite;
            pointer-events: none;
        }
        .kaon-reading-bubble::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.05) 26%, transparent 50%);
            transform: translateX(-120%);
            animation: kaonBubbleShimmer 5.4s ease-in-out infinite;
            pointer-events: none;
        }
        .kaon-reading-bubble::after {
            content: "";
            position: absolute;
            inset: -20% -8%;
            background: radial-gradient(circle at 18% 20%, rgba(255,255,255,0.06), transparent 22%),
                        radial-gradient(circle at 82% 18%, rgba(255,255,255,0.05), transparent 20%),
                        radial-gradient(circle at 50% 100%, rgba(244,114,182,0.08), transparent 30%);
            opacity: 0.7;
            filter: blur(12px);
            pointer-events: none;
            animation: kaonBubbleAura 8.4s ease-in-out infinite;
        }
        .kaon-reading-bubble.kaon-stage-1 {
            background: linear-gradient(180deg, rgba(18,20,72,0.97), rgba(18,0,38,0.96)) !important;
            border-color: rgba(125,211,252,0.28) !important;
            box-shadow: 0 14px 40px rgba(0,0,0,0.24), inset 0 0 28px rgba(125,211,252,0.05);
        }
        .kaon-reading-bubble.kaon-stage-2 {
            background: linear-gradient(180deg, rgba(53,14,84,0.97), rgba(22,0,42,0.96)) !important;
            border-color: rgba(196,181,253,0.30) !important;
            box-shadow: 0 14px 40px rgba(0,0,0,0.24), inset 0 0 28px rgba(196,181,253,0.05);
        }
        .kaon-reading-bubble.kaon-stage-3 {
            background: linear-gradient(180deg, rgba(68,18,48,0.97), rgba(28,0,24,0.96)) !important;
            border-color: rgba(251,191,36,0.28) !important;
            box-shadow: 0 14px 40px rgba(0,0,0,0.24), inset 0 0 28px rgba(251,191,36,0.06);
        }
        .kaon-reading-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            padding: 6px 14px;
            border-radius: 999px;
            border: 1px solid rgba(244,114,182,0.32);
            background: linear-gradient(90deg, rgba(244,114,182,0.10), rgba(125,211,252,0.09), rgba(244,114,182,0.10));
            background-size: 220% 100%;
            color: #f9a8d4;
            font-size: 11px;
            letter-spacing: 3px;
            animation: kaonTitleDrift 4.6s ease-in-out infinite, kaonTitleGlow 8s linear infinite;
        }
        .kaon-reading-title::before,
        .kaon-reading-title::after {
            content: '✦';
            color: var(--gold-soft);
        }
        .kaon-reading-title-icon {
            color: var(--gold-soft);
            font-size: 13px;
        }
        .kaon-reading-section {
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid rgba(244,114,182,0.14);
            animation: kaonSectionRise 0.7s ease both;
        }
        .kaon-reading-section:first-of-type {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }
        .kaon-reading-section h4 {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            color: var(--gold-soft);
            font-size: 12px;
            letter-spacing: 3px;
            font-weight: 700;
        }
        .kaon-reading-section-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid rgba(253,230,138,0.25);
            background: rgba(255,255,255,0.04);
            color: #fde68a;
            font-size: 12px;
            box-shadow: inset 0 0 12px rgba(255,255,255,0.04);
            animation: kaonMarkPulse 3.6s ease-in-out infinite;
        }
        .kaon-reading-section p {
            margin: 0;
            color: var(--text-primary);
            line-height: 1.95;
        }
        .kaon-reading-finale {
            margin-top: 16px;
            padding: 14px 16px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(244,114,182,0.12), rgba(192,132,252,0.12));
            border: 1px solid rgba(244,114,182,0.2);
        }
        @keyframes kaonRitualFadeIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes kaonRotate { to { transform: rotate(360deg); } }
        @keyframes kaonRotateReverse { to { transform: rotate(-360deg); } }
        @keyframes kaonOrbPulse { 0%,100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.12); } }
        @keyframes kaonGlyphGlow { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
        @keyframes kaonStarFloat { 0%,100% { opacity: 0.25; transform: translateY(0) scale(0.8); } 50% { opacity: 1; transform: translateY(-8px) scale(1.15); } }
        @keyframes kaonVeilShift { 0%,100% { opacity: 0.4; transform: translateX(-8px); } 50% { opacity: 0.95; transform: translateX(8px); } }
        @keyframes kaonBubbleShimmer { 0%,100% { transform: translateX(-120%); opacity: 0; } 18%,56% { opacity: 1; } 70% { transform: translateX(130%); opacity: 0; } }
        @keyframes kaonSectionRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes kaonTitleDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
        @keyframes kaonAuroraShift { 0%,100% { transform: translateX(-1%) translateY(0) scale(1); } 50% { transform: translateX(2%) translateY(-2%) scale(1.05); } }
        @keyframes kaonAuroraPulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.92; } }
        @keyframes kaonHueOrbit { to { transform: rotate(360deg); } }
        @keyframes kaonRuneDrift { 0%,100% { opacity: 0.18; transform: translateY(0) scale(0.92); } 50% { opacity: 0.8; transform: translateY(-10px) scale(1.08); } }
        @keyframes kaonBubbleAura { 0%,100% { opacity: 0.38; transform: translateY(0) scale(1); } 50% { opacity: 0.82; transform: translateY(-6px) scale(1.04); } }
        @keyframes kaonTitleGlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
        @keyframes kaonMarkPulse { 0%,100% { box-shadow: inset 0 0 12px rgba(255,255,255,0.04), 0 0 0 rgba(253,230,138,0); } 50% { box-shadow: inset 0 0 16px rgba(255,255,255,0.10), 0 0 18px rgba(253,230,138,0.16); } }
        @keyframes kaonStatusDot { 0%,100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
        @keyframes kaonStatusGlow { 0%,100% { opacity: 0.72; } 50% { opacity: 1; } }
        @keyframes kaonStageLineIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
        @keyframes kaonStageLineOut { from { opacity: 1; transform: translateY(0); filter: blur(0); } to { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }
        @keyframes kaonRitualFadeOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(0.985); } }
        @keyframes kaonAfterglowIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

        .tarot-reveal {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 0 4px;
        }
        .tarot-card-flip {
            width: 120px;
            height: 204px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(168,85,247,0.3);
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.6s ease;
        }
        .tarot-card-flip.flipped { opacity: 1; }
        .tarot-card-flip:hover { filter: brightness(1.1); }
        .tarot-card-label {
            margin-top: 10px;
            font-size: 12px; color: var(--gold-soft);
            letter-spacing: 2px; text-align: center;
            opacity: 0; transition: opacity 0.6s ease 0.9s;
        }
        .tarot-card-label.show { opacity: 1; }

        /* タロットカード：クリックで拡大ヒント */
        .tarot-zoom-hint {
            font-size: 11px;
            font-weight: 500;
            color: #ffffff;
            letter-spacing: 1px;
            text-align: center;
            margin-top: 5px;
            text-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 16px rgba(180,120,255,0.6);
        }
        .tarot-card-flip { cursor: pointer; }
        .tarot-card-flip:hover .tarot-card-inner { filter: brightness(1.1); }

        /* タロットカード拡大オーバーレイ */
        .tarot-zoom-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.92);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease;
            padding: 16px;
            box-sizing: border-box;
            overflow: hidden;
        }
        .tarot-zoom-img {
            /* スマホ：画面幅の80%、高さはアドレスバーを除いた残り領域に収める */
            /* PC/iPad：スマホ相当サイズに制限（280px） */
            width: auto;
            height: auto;
            max-width: min(80vw, 280px);
            /* dvh：アドレスバー表示中の実際の高さを基準（iOS/Android対応） */
            max-height: calc(100vh - 130px);
            max-height: calc(100dvh - 130px);
            border-radius: 12px;
            box-shadow: 0 0 48px rgba(168,85,247,0.45), 0 0 12px rgba(0,0,0,0.8);
            object-fit: contain;
            display: block;
            flex-shrink: 1;
        }
        .tarot-zoom-name {
            color: var(--gold-soft);
            font-size: 12px;
            letter-spacing: 3px;
            margin-top: 10px;
            text-align: center;
            flex-shrink: 0;
        }
        .tarot-zoom-close {
            margin-top: 12px;
            padding: 9px 32px;
            background: transparent;
            border: 1px solid rgba(168,85,247,0.5);
            color: rgba(200,160,255,0.9);
            border-radius: 24px;
            font-size: 13px;
            letter-spacing: 2px;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s;
            flex-shrink: 0;
        }
        .tarot-zoom-close:active { background: rgba(168,85,247,0.15); }

        /* ===== タロット解説バブル ===== */
        .tarot-explain-bubble {
            background: linear-gradient(135deg, rgba(30,10,60,0.95) 0%, rgba(50,15,80,0.95) 100%);
            border: 1px solid rgba(168,85,247,0.5);
            box-shadow: 0 0 20px rgba(168,85,247,0.2), inset 0 0 12px rgba(168,85,247,0.07);
            border-radius: 4px 16px 16px 16px;
            line-height: 1.8;
        }

        /* ===== Squareカードフォーム ===== */
        .square-form-wrap {
            margin-bottom: 16px;
        }
        .square-form-label {
            font-size: 11px; letter-spacing: 2px; color: var(--gold);
            margin-bottom: 8px; display: block;
        }
        #card-container {
            min-height: 48px;
            border-radius: 12px;
            overflow: hidden;
        }
        #card-container iframe {
            border-radius: 12px !important;
        }
        .square-pay-btn {
            width: 100%;
            background: linear-gradient(135deg, var(--gold), #f97316);
            border: none; border-radius: 50px;
            padding: 16px; color: #1a0a00;
            font-size: 15px; font-weight: 700; letter-spacing: 2px;
            cursor: pointer; font-family: 'Noto Serif JP', serif;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 6px 24px rgba(240,192,96,0.4);
            margin-top: 12px;
        }
        .square-pay-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(240,192,96,0.6); }
        .square-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .square-error {
            color: #f87171; font-size: 12px; text-align: center;
            margin-top: 8px; letter-spacing: 1px;
        }
        .paywall-loading {
            text-align: center; padding: 20px;
            font-size: 13px; color: var(--text-secondary); letter-spacing: 2px;
        }

        /* ===== 引き継ぎリンク ===== */
        .transfer-link-wrap {
            text-align: center;
            padding: 6px 0 0;
        }
        .transfer-link {
            font-size: 12px; color: var(--text-secondary); letter-spacing: 1px;
            text-decoration: none; cursor: pointer; border: none; background: none;
            font-family: 'Noto Serif JP', serif;
            transition: color 0.2s;
        }
        .transfer-link:hover { color: var(--text-primary); }

        /* ===== 引き継ぎ・メールモーダル ===== */
        .transfer-overlay {
            position: fixed; inset: 0;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(8px);
            z-index: 300;
            display: flex; align-items: center; justify-content: center;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s;
            padding: 20px;
        }
        .transfer-overlay.active { opacity: 1; pointer-events: all; }
        .transfer-sheet {
            background: linear-gradient(180deg, #1a0030, #0a0018);
            border: 1px solid rgba(168,85,247,0.3);
            border-radius: 24px;
            padding: 32px 24px;
            width: 100%; max-width: 440px;
        }
        .transfer-title {
            text-align: center; font-size: 18px; font-weight: 700;
            color: var(--text-primary); letter-spacing: 2px; margin-bottom: 8px;
        }
        .transfer-sub {
            text-align: center; font-size: 13px; color: var(--text-secondary);
            letter-spacing: 1px; line-height: 1.8; margin-bottom: 24px;
        }
        .transfer-input {
            width: 100%;
            background: rgba(30,0,50,0.7);
            border: 1px solid rgba(168,85,247,0.3);
            border-radius: 12px;
            padding: 12px 16px;
            color: var(--text-primary);
            font-size: 14px;
            font-family: 'Noto Serif JP', serif;
            outline: none;
            margin-bottom: 12px;
            box-sizing: border-box;
        }
        .transfer-input:focus { border-color: rgba(168,85,247,0.7); }
        .transfer-input::placeholder { color: var(--text-muted); }
        .transfer-btn {
            width: 100%;
            background: linear-gradient(135deg, var(--purple-main), var(--purple-glow));
            border: none; border-radius: 50px;
            padding: 14px; color: #fff;
            font-size: 14px; font-weight: 700; letter-spacing: 2px;
            cursor: pointer; font-family: 'Noto Serif JP', serif;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 6px 24px rgba(123,47,255,0.4);
        }
        .transfer-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(123,47,255,0.6); }
        .transfer-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
        .transfer-msg {
            text-align: center; font-size: 13px; margin-top: 10px;
            min-height: 20px; letter-spacing: 1px;
        }
        .transfer-msg.ok { color: var(--gold-soft); }
        .transfer-msg.err { color: #f87171; }
        .transfer-cancel {
            display: block; width: 100%; margin-top: 12px;
            background: transparent; border: 1px solid rgba(168,85,247,0.15);
            border-radius: 30px; padding: 10px; color: var(--text-muted);
            font-size: 11px; letter-spacing: 2px; cursor: pointer;
            font-family: 'Noto Serif JP', serif; transition: all 0.2s;
        }
        .transfer-cancel:hover { border-color: rgba(168,85,247,0.3); color: var(--text-secondary); }

        /* ===== 引き継ぎ成功バナー ===== */
        .restored-banner {
            position: fixed; top: 0; left: 0; right: 0; z-index: 500;
            background: linear-gradient(135deg, #7b2fff, #a855f7);
            color: #fff; text-align: center; padding: 14px;
            font-size: 14px; letter-spacing: 2px;
            animation: bannerSlide 0.4s ease;
        }
        @keyframes bannerSlide { from{transform:translateY(-100%)} to{transform:translateY(0)} }

        /* ===== 花音 総合鑑定 フルスクリーンモーダル ===== */
        #kaonReadingModal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 9000;
            background: #06000f;
            color: #f3e8ff;
            font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
        }
        #kaonReadingModal.is-open {
            display: flex;
            flex-direction: column;
            animation: krmFadeIn 0.5s ease both;
        }
        @keyframes krmFadeIn { from{opacity:0} to{opacity:1} }
        .krm-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
        }
        .krm-star {
            position: absolute;
            border-radius: 50%;
            background: #fff;
            opacity: 0;
            animation: krmTwinkle 3s ease-in-out infinite;
        }
        @keyframes krmTwinkle { 0%,100%{opacity:0} 50%{opacity:0.7} }
        .krm-aurora {
            position: absolute;
            inset: -20%;
            pointer-events: none;
            opacity: 0.28;
            filter: blur(35px);
            background:
                radial-gradient(circle at 28% 22%, rgba(125,211,252,0.3), transparent 35%),
                radial-gradient(circle at 72% 30%, rgba(244,114,182,0.3), transparent 30%),
                radial-gradient(circle at 50% 80%, rgba(196,181,253,0.25), transparent 35%);
            animation: krmAurora 14s ease-in-out infinite;
            transition: background 2.5s ease;
        }
        @keyframes krmAurora {
            0%   { transform:scale(1)    rotate(0deg)  translate(0,0);    opacity:0.20; }
            25%  { transform:scale(1.10) rotate(5deg)  translate(2%,1%);  opacity:0.38; }
            50%  { transform:scale(1.20) rotate(10deg) translate(-2%,2%); opacity:0.52; }
            75%  { transform:scale(1.08) rotate(4deg)  translate(1%,-1%); opacity:0.34; }
            100% { transform:scale(1)    rotate(0deg)  translate(0,0);    opacity:0.20; }
        }
        /* ステージごとのオーロラカラー */
        #kaonReadingModal[data-krm-stage="2"] .krm-aurora {
            background:
                radial-gradient(circle at 28% 22%, rgba(56,189,248,0.38), transparent 35%),
                radial-gradient(circle at 72% 30%, rgba(99,102,241,0.30), transparent 30%),
                radial-gradient(circle at 50% 80%, rgba(125,211,252,0.26), transparent 35%);
        }
        #kaonReadingModal[data-krm-stage="3"] .krm-aurora {
            background:
                radial-gradient(circle at 28% 22%, rgba(251,191,36,0.38), transparent 35%),
                radial-gradient(circle at 72% 30%, rgba(251,146,60,0.26), transparent 30%),
                radial-gradient(circle at 50% 80%, rgba(240,192,96,0.22), transparent 35%);
        }
        .krm-inner {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            height: 100dvh;
            max-width: 700px;
            margin: 0 auto;
            width: 100%;
        }
        .krm-header {
            padding: max(env(safe-area-inset-top,0px), 14px) 20px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(168,85,247,0.18);
            flex-shrink: 0;
        }
        .krm-logo {
            font-size: 11px;
            letter-spacing: 3px;
            color: #f0c060;
        }
        .krm-progress {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        .krm-pdot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            border: 1px solid rgba(168,85,247,0.35);
            background: transparent;
            transition: all 0.4s ease;
        }
        .krm-pdot.is-active {
            background: #a855f7;
            box-shadow: 0 0 8px rgba(168,85,247,0.7);
        }
        .krm-pdot.is-done {
            background: #f0c060;
            border-color: #f0c060;
        }
        .krm-x-btn {
            background: none;
            border: none;
            color: rgba(168,85,247,0.4);
            font-size: 16px;
            cursor: pointer;
            padding: 4px 6px;
            transition: color 0.2s;
            line-height: 1;
        }
        .krm-x-btn:hover { color: #a855f7; }
        .krm-body {
            flex: 1;
            position: relative;
            overflow: hidden;
            min-height: 0;
        }
        .krm-loading {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 18px;
            text-align: center;
            background: #06000f;
            z-index: 1;
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .krm-loading.is-hidden {
            opacity: 0;
            pointer-events: none;
            transform: scale(0.94);
        }
        /* ===== 花音 円形ポートレート ===== */
        .krm-kaon-portrait {
            position: relative;
            z-index: 1;
            width: 110px;
            height: 110px;
            flex-shrink: 0;
        }
        .krm-kaon-video {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            object-fit: cover;
            object-position: center top;
            display: block;
            animation: krmPortraitIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes krmPortraitIn {
            from { opacity: 0; transform: scale(0.82); }
            to   { opacity: 1; transform: scale(1); }
        }
        /* 光るボーダー（video上に重ねる） */
        .krm-kaon-border {
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 1.5px solid rgba(240,192,96,0.55);
            box-shadow:
                0 0 16px rgba(168,85,247,0.45),
                0 0 32px rgba(168,85,247,0.20),
                inset 0 0 12px rgba(168,85,247,0.15);
            pointer-events: none;
            animation: krmBorderGlow 2.8s ease-in-out infinite;
        }
        @keyframes krmBorderGlow {
            0%, 100% { box-shadow: 0 0 14px rgba(168,85,247,0.4), 0 0 28px rgba(168,85,247,0.15); border-color: rgba(240,192,96,0.45); }
            50%       { box-shadow: 0 0 26px rgba(168,85,247,0.7), 0 0 50px rgba(168,85,247,0.30); border-color: rgba(240,192,96,0.80); }
        }

        .krm-ring-wrap {
            width: 90px;
            height: 90px;
            position: relative;
        }
        .krm-ring,
        .krm-ring::before,
        .krm-ring::after {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 1px solid;
            content: "";
        }
        .krm-ring { border-color: rgba(240,192,96,0.5); animation: kaonRotate 8s linear infinite; }
        .krm-ring::before { inset: 10px; border-color: rgba(168,85,247,0.5); animation: kaonRotateReverse 5s linear infinite; }
        .krm-ring::after { inset: 22px; border-color: rgba(244,114,182,0.4); animation: kaonRotate 3.5s linear infinite; }
        .krm-ring-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Cinzel', serif;
            font-size: 12px;
            letter-spacing: 2px;
            color: #f0c060;
            text-shadow: 0 0 10px rgba(240,192,96,0.4);
            animation: kaonGlyphGlow 2.5s ease-in-out infinite;
        }
        .krm-stage-label {
            font-size: 10px;
            letter-spacing: 3px;
            color: rgba(168,85,247,0.65);
            text-transform: uppercase;
        }
        .krm-hint {
            font-size: 13px;
            color: #c9a8ff;
            max-width: 240px;
            line-height: 1.8;
            opacity: 0;
            animation: kaonStageLineIn 0.5s ease 0.3s forwards;
        }
        .krm-sub {
            font-size: 11px;
            color: rgba(122,95,154,0.7);
            max-width: 220px;
            line-height: 1.7;
            opacity: 0;
            animation: kaonStageLineIn 0.5s ease 0.8s forwards;
        }
        .krm-scroll {
            position: absolute;
            inset: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            padding: 20px 18px 12px;
            background: #06000f;
            z-index: 2;
            opacity: 0;
            pointer-events: none;
            transition: opacity 1.4s ease;
        }
        .krm-scroll.is-visible {
            opacity: 1;
            pointer-events: auto;
        }

        /* ===== 結果出現 光ヴェール ===== */
        .krm-reveal-veil {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 10;
            background:
                radial-gradient(ellipse at 50% 30%, rgba(240,192,96,0.30) 0%, rgba(168,85,247,0.14) 48%, transparent 72%);
            animation: krmRevealVeil 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes krmRevealVeil {
            0%   { opacity: 1; transform: scale(1.10); }
            18%  { opacity: 0.95; }
            100% { opacity: 0;   transform: scale(1); }
        }
        .krm-part { margin-bottom: 32px; }
        .krm-part-hdr {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
        }
        .krm-part-mark {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 1px solid rgba(240,192,96,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f0c060;
            font-size: 12px;
            flex-shrink: 0;
        }
        .krm-part-label {
            font-size: 10px;
            letter-spacing: 3px;
            color: rgba(240,192,96,0.7);
        }
        .krm-part-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(240,192,96,0.2), transparent);
        }
        .krm-stream {
            font-size: 15px;
            line-height: 1.95;
            color: #ddd0f0;
            padding: 4px 2px;
        }
        .krm-section {
            margin-bottom: 22px;
            opacity: 0;
            transform: translateY(36px);
            animation: krmSecIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        @keyframes krmSecIn {
            from { opacity: 0; transform: translateY(36px) scale(0.98); }
            to   { opacity: 1; transform: none; }
        }
        .krm-sec-label {
            font-size: 11px;
            letter-spacing: 2px;
            color: rgba(168,85,247,0.65);
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        .krm-sec-icon {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid rgba(168,85,247,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #c9a8ff;
        }
        .krm-sec-text {
            font-size: 16px;
            line-height: 2.1;
            color: rgba(235,225,255,0.92);
            padding: 14px 16px;
            border-left: 2px solid rgba(168,85,247,0.35);
            border-radius: 0 10px 10px 0;
            background: rgba(168,85,247,0.07);
        }

        /* ===== 花音 締めメッセージ ===== */
        .krm-closing-message {
            margin-top: 32px;
            padding: 28px 0 8px;
            border-top: 1px solid rgba(240,192,96,0.18);
            animation: krmSecIn 0.7s ease both;
        }
        .krm-closing-inner {
            text-align: center;
            padding: 0 8px;
        }
        .krm-closing-kaon-icon {
            font-size: 22px;
            color: rgba(240,192,96,0.6);
            margin-bottom: 18px;
            letter-spacing: 4px;
        }
        .krm-closing-text {
            font-family: 'Noto Serif JP', serif;
            font-size: 16px;
            line-height: 2.2;
            color: rgba(235,225,255,0.9);
            letter-spacing: 0.03em;
        }
        .krm-footer {
            padding: 12px 18px;
            padding-bottom: max(env(safe-area-inset-bottom,0px), 16px);
            border-top: 1px solid rgba(168,85,247,0.14);
            flex-shrink: 0;
            display: none;
        }
        .krm-footer.is-visible { display: block; }
        .krm-opts {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
            justify-content: center;
        }
        .krm-opt {
            padding: 9px 14px;
            border-radius: 50px;
            border: 1px solid rgba(168,85,247,0.4);
            background: rgba(168,85,247,0.08);
            color: #c9a8ff;
            font-size: 13px;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.2s;
        }
        .krm-opt:hover { background: rgba(168,85,247,0.2); }
        .krm-back {
            display: block;
            width: 100%;
            padding: 14px;
            border-radius: 50px;
            border: 1px solid rgba(168,85,247,0.4);
            background: rgba(168,85,247,0.08);
            color: #c9a8ff;
            font-size: 14px;
            letter-spacing: 1.5px;
            cursor: pointer;
            font-family: inherit;
            font-weight: 600;
            transition: all 0.2s;
        }
        .krm-back:hover { color: #fff; background: rgba(168,85,247,0.2); border-color: rgba(168,85,247,0.7); }
        .krm-next-wrap {
            display: none;
            text-align: center;
            padding: 32px 0 20px;
        }
        .krm-next-btn {
            padding: 16px 40px;
            border-radius: 50px;
            border: 1px solid rgba(240,192,96,0.6);
            background: rgba(240,192,96,0.1);
            color: #f0c060;
            font-size: 15px;
            letter-spacing: 2px;
            cursor: pointer;
            font-family: inherit;
            font-weight: 600;
            min-width: 240px;
            transition: all 0.25s;
            animation: krmSecIn 0.5s ease both;
        }
        .krm-next-btn:hover {
            background: rgba(240,192,96,0.22);
            border-color: rgba(240,192,96,0.9);
            box-shadow: 0 0 24px rgba(240,192,96,0.3);
        }
        /* ===== 章区切り（インライン遷移用） ===== */
        .krm-chapter-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 28px 0 20px;
            opacity: 0;
            animation: krmSecIn 0.6s ease 0.1s both;
        }
        .krm-chapter-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(168,85,247,0.3), transparent);
        }
        .krm-chapter-label {
            font-size: 10px;
            letter-spacing: 3px;
            color: rgba(168,85,247,0.6);
            white-space: nowrap;
        }
        /* ===== インラインローディングドット ===== */
        .krm-inline-loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 16px 0 24px;
            gap: 8px;
            transition: opacity 0.3s ease;
        }
        .krm-dot-pulse {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(168,85,247,0.55);
            animation: krmDotPulse 1.3s ease-in-out infinite;
        }
        .krm-dot-pulse:nth-child(2) { animation-delay: 0.22s; }
        .krm-dot-pulse:nth-child(3) { animation-delay: 0.44s; }
        @keyframes krmDotPulse {
            0%,100% { transform: scale(0.55); opacity: 0.25; }
            50%      { transform: scale(1);    opacity: 1; }
        }
        .krm-inline-hint {
            font-size: 11px;
            color: rgba(168,85,247,0.5);
            letter-spacing: 1px;
            margin-left: 10px;
        }

        /* ===== 流れ星 ===== */
        .krm-shoot {
            position: absolute;
            height: 1.5px;
            border-radius: 1px;
            pointer-events: none;
            z-index: 0;
            animation: krmShoot 0.9s ease-out forwards;
        }
        @keyframes krmShoot {
            0%  { opacity: 0; }
            12% { opacity: 1; }
            100%{ opacity: 0; }
        }

        /* ===== 浮遊シンボル文字 ===== */
        .krm-symbbox {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }
        .krm-symb {
            position: absolute;
            pointer-events: none;
            animation: krmSymbFloat var(--dur, 5s) ease-out forwards;
        }
        @keyframes krmSymbFloat {
            0%   { opacity: 0; transform: translateY(0) scale(0.7) rotate(0deg); }
            20%  { opacity: 0.55; }
            80%  { opacity: 0.18; transform: translateY(var(--rise,-180px)) scale(1.05) rotate(var(--rot,15deg)); }
            100% { opacity: 0; transform: translateY(calc(var(--rise,-180px) - 30px)) scale(1.1); }
        }

        /* ===== 星座ラインSVG ===== */
        #krmConst {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        @keyframes krmConstFade {
            0%  { opacity: 0; }
            25% { opacity: 1; }
            75% { opacity: 0.7; }
            100%{ opacity: 0; }
        }

        /* ===== テキスト出現シマー ===== */
        .krm-section {
            position: relative;
            overflow: hidden;
        }
        .krm-section.krm-shimmer::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(240,192,96,0.22) 50%, transparent 100%);
            background-size: 200% 100%;
            animation: krmShimmer 1.1s ease-out 0.2s 1 both;
            pointer-events: none;
            border-radius: 0 8px 8px 0;
        }
        @keyframes krmShimmer {
            from { background-position: 160% 0; opacity: 1; }
            to   { background-position: -160% 0; opacity: 0; }
        }

        /* ===== API遅延メッセージ ===== */
        #krmSlowMsgEl {
            font-size: 12px;
            color: rgba(210,180,255,0.8);
            letter-spacing: 2px;
            margin-top: 4px;
            opacity: 0;
            animation: krmSlowIn 0.8s ease 0.2s forwards;
            max-width: 260px;
            line-height: 1.8;
            text-align: center;
        }
        @keyframes krmSlowIn { to { opacity: 1; } }

        /* ===== ローディング オーブ発光 ===== */
        .krm-ring-wrap::before {
            content: '';
            position: absolute;
            inset: -24px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(168,85,247,0.18) 0%, transparent 70%);
            animation: krmOrbPulse 2.2s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes krmOrbPulse {
            0%, 100% { transform: scale(0.8);  opacity: 0.45; }
            50%       { transform: scale(1.25); opacity: 1; }
        }

        /* ===== ページフリップ ===== */
        .krm-page-card {
            min-height: 100%;
            transform-origin: center center;
            will-change: transform, opacity;
        }
        .krm-page-card.flip-out {
            animation: krmFlipOut 0.42s ease-in forwards;
            pointer-events: none;
        }
        .krm-page-card.flip-in {
            animation: krmFlipIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes krmFlipOut {
            0%   { transform: perspective(900px) rotateY(0deg)   scale(1);    opacity: 1; }
            40%  { transform: perspective(900px) rotateY(-45deg) scale(0.92); opacity: 0.5; }
            100% { transform: perspective(900px) rotateY(-90deg) scale(0.86); opacity: 0; }
        }
        @keyframes krmFlipIn {
            0%   { transform: perspective(900px) rotateY(90deg)  scale(0.86); opacity: 0; }
            60%  { transform: perspective(900px) rotateY(8deg)   scale(1.02); opacity: 0.9; }
            100% { transform: perspective(900px) rotateY(0deg)   scale(1);    opacity: 1; }
        }

/* ===== ソラ アンケート モーダル ヘッダー ===== */
.survey-modal-header {
    text-align: center;
    padding: 40px 24px 8px;
    border-bottom: 1px solid rgba(110,231,183,0.1);
    margin-bottom: 4px;
}
.survey-modal-logo {
    font-size: 13px;
    letter-spacing: 3px;
    color: rgba(110,231,183,0.7);
    font-weight: 600;
    margin-bottom: 10px;
}
.survey-modal-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.5px;
}

/* ===== ソラ初回アンケートウィザード ===== */
.survey-container {
    background: transparent;
    padding: 28px 24px 20px;
    animation: surveyFadeIn 0.45s ease;
}
@keyframes surveyFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes surveySlideInRight {
    from { opacity: 0; transform: translateX(48px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes surveySlideInLeft {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes surveyTitleFlash {
    0%   { color: #6ee7b7; transform: scale(1.06); }
    60%  { color: #6ee7b7; transform: scale(1.06); }
    100% { color: rgba(110,231,183,0.65); transform: scale(1); }
}
@keyframes surveyDotPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.7); box-shadow: 0 0 14px rgba(110,231,183,1); }
    100% { transform: scale(1); }
}

.survey-progress {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
    align-items: center;
}
.survey-pdot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(110,231,183,0.2);
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.survey-pdot.done {
    background: rgba(110,231,183,0.5);
    width: 8px; height: 8px;
}
.survey-pdot.active {
    background: #6ee7b7;
    box-shadow: 0 0 10px rgba(110,231,183,0.9);
    width: 14px; height: 14px;
}
.survey-pdot.pop {
    animation: surveyDotPop 0.5s ease both;
}

.survey-step-title {
    text-align: center;
    font-size: 13px;
    letter-spacing: 2px;
    color: rgba(110,231,183,0.65);
    text-transform: uppercase;
    margin-bottom: 24px;
    transform-origin: center;
}
.survey-step-title.flash {
    animation: surveyTitleFlash 0.7s ease both;
}

.survey-body {
    animation-duration: 0.32s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.survey-body.slide-in-right { animation-name: surveySlideInRight; }
.survey-body.slide-in-left  { animation-name: surveySlideInLeft; }

.survey-question {
    margin-bottom: 24px;
}
.survey-qlabel {
    font-size: 17px;
    color: rgba(255,255,255,0.92);
    margin-bottom: 14px;
    line-height: 1.6;
    transition: color 0.2s;
}

.survey-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.survey-opt-btn {
    background: rgba(110,231,183,0.07);
    border: 1px solid rgba(110,231,183,0.25);
    border-radius: 24px;
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    padding: 11px 18px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    font-family: inherit;
    line-height: 1.3;
    min-height: 44px;
}
.survey-opt-btn:hover {
    background: rgba(110,231,183,0.14);
    border-color: rgba(110,231,183,0.45);
    color: #fff;
}
.survey-opt-btn.selected {
    background: rgba(110,231,183,0.22);
    border-color: #6ee7b7;
    color: #6ee7b7;
    transform: scale(1.03);
}

.survey-buttons {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    justify-content: flex-end;
}
.survey-back-btn,
.survey-next-btn {
    border-radius: 24px;
    font-family: inherit;
    font-size: 16px;
    padding: 12px 28px;
    cursor: pointer;
    min-height: 48px;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
}
.survey-back-btn {
    background: transparent;
    border: 1px solid rgba(110,231,183,0.25);
    color: rgba(255,255,255,0.55);
}
.survey-back-btn:hover { border-color: rgba(110,231,183,0.5); color: rgba(255,255,255,0.85); }

.survey-next-btn {
    background: rgba(110,231,183,0.15);
    border: 1px solid rgba(110,231,183,0.55);
    color: #6ee7b7;
    font-weight: 700;
    flex: 1;
}
.survey-next-btn:hover { background: rgba(110,231,183,0.28); border-color: #6ee7b7; }
.survey-next-btn:disabled { opacity: 0.4; cursor: default; }

.survey-skip-wrap {
    text-align: center;
    margin-top: 16px;
}
.survey-skip-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    min-height: 40px;
    transition: color 0.2s;
}
.survey-skip-btn:hover { color: rgba(255,255,255,0.55); }

/* ===== ソラ アンケート確認画面 ===== */
.survey-confirm-title {
    text-align: center;
    font-size: 15px;
    letter-spacing: 3px;
    color: #6ee7b7;
    font-weight: 700;
    margin-bottom: 6px;
}
.survey-confirm-desc {
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    margin-bottom: 20px;
}
.survey-confirm-section {
    background: rgba(110,231,183,0.05);
    border: 1px solid rgba(110,231,183,0.18);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.survey-confirm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.survey-confirm-section-title {
    font-size: 12px;
    letter-spacing: 2px;
    color: #6ee7b7;
    font-weight: 600;
}
.survey-confirm-edit-btn {
    background: transparent;
    border: 1px solid rgba(110,231,183,0.35);
    border-radius: 20px;
    color: rgba(110,231,183,0.8);
    font-size: 12px;
    padding: 4px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
}
.survey-confirm-edit-btn:hover {
    background: rgba(110,231,183,0.12);
    border-color: #6ee7b7;
    color: #6ee7b7;
}
.survey-confirm-row {
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.survey-confirm-q {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 3px;
    line-height: 1.5;
}
.survey-confirm-a {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

/* ===== ソラ アンケート同意ボタン ===== */
.survey-consent-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 8px auto 20px;
    padding: 0 20px;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    animation: surveyFadeIn 0.4s ease;
}

.consent-agree-btn {
    background: linear-gradient(135deg, #6ee7b7 0%, #3b82f6 100%);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 15px 0;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 4px 22px rgba(59, 130, 246, 0.38), 0 0 0 1px rgba(110,231,183,0.2);
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
}

.consent-agree-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.5);
}

.consent-skip-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.3);
    border: none;
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 12px;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}

.consent-skip-btn:hover { color: rgba(255, 255, 255, 0.55); }

/* ===== ソラ アンケートウィザード モーダル ===== */
.sora-survey-modal {
    position: fixed;
    inset: 0;
    z-index: 8000;
    background: linear-gradient(160deg, rgba(4,8,22,0.98) 0%, rgba(12,8,30,0.98) 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.sora-survey-modal.visible { opacity: 1; }

.sora-survey-inner {
    width: 100%;
    max-width: 520px;
    min-height: 100dvh;
    min-height: 100vh; /* fallback */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: env(safe-area-inset-top, 20px) 0 env(safe-area-inset-bottom, 20px);
}

/* ===== ソラ アンケート完了 Thank You オーバーレイ ===== */
.sora-thanks-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(4, 8, 18, 0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 28px;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.sora-thanks-overlay.visible { opacity: 1; }
.sora-thanks-overlay.hiding  { opacity: 0; }

.sora-thanks-img {
    width: min(180px, 48vw);
    height: min(180px, 48vw);
    border-radius: 50%;
    object-fit: cover;
    object-position: center 8%;
    border: 2px solid rgba(110, 231, 183, 0.45);
    box-shadow: 0 0 48px rgba(110, 231, 183, 0.18), 0 0 80px rgba(110, 231, 183, 0.08);
    margin-bottom: 36px;
    animation: soraThanksImgIn 0.9s ease forwards;
}
@keyframes soraThanksImgIn {
    from { transform: scale(0.82); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.sora-thanks-text {
    font-family: 'Noto Serif JP', serif;
    font-size: 1rem;
    line-height: 2.1;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    max-width: 300px;
    min-height: 100px;
    letter-spacing: 0.03em;
}

.sora-thanks-back-btn {
    margin-top: 32px;
    background: linear-gradient(135deg, rgba(110,231,183,0.15), rgba(59,130,246,0.15));
    border: 1px solid rgba(110,231,183,0.5);
    border-radius: 50px;
    color: #6ee7b7;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.08em;
    padding: 14px 36px;
    cursor: pointer;
    transition: background 0.2s, opacity 0.5s ease;
}
.sora-thanks-back-btn:hover {
    background: linear-gradient(135deg, rgba(110,231,183,0.25), rgba(59,130,246,0.25));
}

/* ===== ソラ アンケート後メニューボタン ===== */
.sora-post-survey-btns {
    display: flex;
    gap: 10px;
    margin: 6px 0 14px 46px;
    flex-wrap: wrap;
    animation: surveyFadeIn 0.35s ease;
}
.sora-psb {
    background: rgba(110,231,183,0.08);
    border: 1px solid rgba(110,231,183,0.35);
    border-radius: 50px;
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    padding: 12px 24px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sora-psb:hover {
    background: rgba(110,231,183,0.18);
    border-color: #6ee7b7;
    color: #fff;
}

/* ===== ソラ トピック選択ボタン ===== */
.sora-topic-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 14px 46px;
    animation: surveyFadeIn 0.35s ease;
}
.sora-topic-btn {
    background: rgba(110,231,183,0.07);
    border: 1px solid rgba(110,231,183,0.25);
    border-radius: 50px;
    color: rgba(255,255,255,0.78);
    font-size: 0.88rem;
    font-family: inherit;
    padding: 10px 20px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sora-topic-btn:hover {
    background: rgba(110,231,183,0.16);
    border-color: rgba(110,231,183,0.5);
    color: #fff;
}
.sora-topic-custom {
    background: transparent;
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
}
.sora-topic-custom:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
}