@charset "UTF-8";

body { margin: 0; height: 100vh; color: white; font-family: 'Hiragino Kaku Gothic ProN', sans-serif; background: radial-gradient(circle at center, #2b1055 0%, #0f0c29 60%, #000000 100%); overflow: hidden; position: relative; }
body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://www.transparenttextures.com/patterns/stardust.png'); opacity: 0.4; z-index: -1; animation: drift 60s linear infinite; }
@keyframes drift { from { background-position: 0 0; } to { background-position: 1000px 1000px; } }

/* モーダル系 */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content, .chat-container { background: rgba(20, 10, 40, 0.85); padding: 40px; border-radius: 20px; text-align: center; box-shadow: 0 0 40px rgba(157, 129, 255, 0.4); border: 2px solid #9d81ff; width: 90vw; max-width: 500px; }
input[type="text"] { background: rgba(255, 255, 255, 0.1); border: 1px solid #9d81ff; color: white; padding: 12px; border-radius: 10px; width: 80%; margin-bottom: 15px; outline: none; font-size: 16px; }
button { background: linear-gradient(45deg, #9d81ff, #ff007f); border: none; color: white; padding: 10px 20px; border-radius: 50px; cursor: pointer; font-weight: bold; margin: 5px; transition: 0.3s; }
button:hover { transform: scale(1.05); box-shadow: 0 0 15px #ff007f; }

/* 🐇 確実に出るウサギのアニメーション */
#rabbit-hole-screen { position: fixed; inset: 0; background: #050010; z-index: 2000; display: none; align-items: center; justify-content: center; flex-direction: column; }
.falling-spiral { text-align: center; animation: fallDown 3s cubic-bezier(0.5, 0, 0.5, 1) forwards; }
.rabbit-icon { font-size: 100px; display: block; margin-bottom: 20px; }
.rabbit-text { font-size: 24px; color: #ffd700; font-weight: bold; text-shadow: 0 0 10px #ff007f; }
@keyframes fallDown { 0% { transform: scale(2) rotate(0deg); opacity: 0; } 20% { transform: scale(1.5) rotate(0deg); opacity: 1; } 80% { transform: scale(0.2) rotate(1080deg); opacity: 1; } 100% { transform: scale(0) rotate(1440deg); opacity: 0; } }

/* 🍄 マップとオブジェクト */
#world-map { position: relative; width: 100vw; height: 100vh; }
.wonder-object { position: absolute; font-size: 80px; cursor: pointer; transition: 0.4s; filter: drop-shadow(0 0 20px rgba(157, 129, 255, 0.6)); }
.wonder-object:hover { transform: scale(1.2) translateY(-15px); filter: drop-shadow(0 0 40px #ff007f); }
.wonder-object span { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-size: 16px; color: #ffd700; opacity: 0; transition: 0.3s; white-space: nowrap; }
.wonder-object:hover span { opacity: 1; }
.obj-library { top: 20%; left: 15%; }
.obj-tea { top: 60%; left: 25%; font-size: 100px; filter: drop-shadow(0 0 30px #ff9a9e); }
.obj-darling { top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 120px; z-index: 10; }
.obj-mushroom { top: 25%; right: 20%; }

/* ダーリンチャット系 */
.chat-container { position: relative; }
#char-avatar { font-size: 60px; filter: drop-shadow(0 0 10px #ff007f); margin-bottom: 10px; }
#ai-response { font-size: 1.1rem; margin-bottom: 20px; min-height: 60px; color: #ffebf0; }

/* 📂 折りたたみメニュー */
.menu-toggle-btn { width: 100%; background: rgba(255, 0, 127, 0.3); border: 1px solid #ff007f; padding: 10px; text-align: left; border-radius: 10px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.menu-content { display: none; background: rgba(0, 0, 0, 0.5); padding: 15px; border-radius: 0 0 10px 10px; border: 1px dashed #ff007f; border-top: none; }
.menu-content.open { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* 🃏 カード */
#card-display { display: flex; justify-content: center; gap: 15px; margin: 15px 0; min-height: 120px; }
.card-img { width: 80px; height: 120px; border-radius: 5px; background-color: white; box-shadow: 0 0 10px rgba(255,255,255,0.3); transition: transform 0.2s; }
.card-img.clickable:hover { transform: translateY(-15px) scale(1.05); cursor: pointer; box-shadow: 0 0 20px #ff007f; }

/* 罰ゲーム用クラス */
.theme-punishment { background: radial-gradient(circle, #800040 0%, #000000 100%) !important; animation: shake 0.5s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* 🃏 ダーリンチャットの豪華なパーティクル（降るエフェクト） */
.darling-particle {
    position: absolute;
    top: -50px;
    font-size: 24px;
    pointer-events: none; /* クリックの邪魔にならないようにする */
    z-index: 100;
    animation: fallParticle 4s linear forwards;
}

@keyframes fallParticle {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* ⏳ Se脆弱ゲームの「バグ（ノイズ）」のスタイル */
.se-bug {
    position: absolute;
    font-size: 35px;
    color: #ff007f;
    cursor: crosshair; /* 狙い撃ちするカーソル */
    transition: transform 0.1s, top 0.3s, left 0.3s; /* ちょこまか動くアニメ */
    filter: drop-shadow(0 0 5px red);
}
.se-bug:hover { transform: scale(1.3); }

/* ダーリンチャット系（部屋を豪華に！） */
.chat-container { 
    position: relative; 
    /* 背景に不思議の国の模様（チェッカーボード）をうっすら入れる */
    background: 
        linear-gradient(rgba(20, 10, 40, 0.9), rgba(20, 10, 40, 0.9)),
        repeating-conic-gradient(#ff007f 0% 25%, transparent 0% 50%) 50% / 40px 40px;
    border: 3px double #ff007f; /* 枠を豪華な二重線に */
    box-shadow: 0 0 50px rgba(255, 0, 127, 0.6), inset 0 0 20px rgba(157, 129, 255, 0.5); /* 内側にも光を */
}

/* ❌ 閉じるボタンを右上の端っこに固定 */
.close-btn { 
    position: absolute; 
    top: -15px; 
    right: -15px; 
    width: 40px; 
    height: 40px; 
    background: #ff007f; 
    border: 2px solid white; 
    border-radius: 50%; 
    color: white; 
    font-size: 20px; 
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 100;
}
.close-btn:hover { background: white; color: #ff007f; transform: scale(1.1) rotate(90deg); }

/* ⏳ Se脆弱ゲームの「バグ」 */
.se-bug {
    position: absolute;
    font-size: 35px;
    color: #ff007f;
    cursor: crosshair;
    /* 逃げる時のアニメーションをより鋭く（シュバッ！と動くように） */
    transition: top 0.1s cubic-bezier(0.1, 0.9, 0.2, 1), left 0.1s cubic-bezier(0.1, 0.9, 0.2, 1);
    filter: drop-shadow(0 0 5px red);
}
/* 潰した時のエフェクト（任意） */
.se-bug.splat { transform: scale(0); opacity: 0; transition: 0.2s; }

/* 🐛 芋虫のツール案内用CSS */
.tool-box {
    background: rgba(76, 175, 80, 0.1);
    border-left: 4px solid #4caf50;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.tool-link {
    color: #a5d6a7;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    display: block;
}
.tool-link:hover { color: #fff; text-shadow: 0 0 10px #4caf50; }
.tool-desc {
    color: #e2e2e2;
    font-size: 12px;
    margin: 5px 0 0 0;
}

/* 📜 ダーリン・芋虫の部屋：スクロール対応 */
.chat-container {
    max-height: 85vh; /* 画面の85%までの高さにする */
    overflow-y: auto; /* はみ出たらスクロールさせる！ */
    /* スクロールバーのデザイン（Webkit系） */
    scrollbar-width: thin;
    scrollbar-color: #ff007f transparent;
}
.chat-container::-webkit-scrollbar { width: 8px; }
.chat-container::-webkit-scrollbar-thumb { background: #ff007f; border-radius: 4px; }

/* ❌ 閉じるボタン（スクロールしても右上に固定されるように修正） */
.close-btn {
    position: sticky; /* 固定 */
    top: 0; left: 100%; /* 右上に配置 */
    width: 35px; height: 35px;
    background: #ff007f; border: 2px solid white; border-radius: 50%;
    color: white; font-size: 18px; font-weight: bold;
    cursor: pointer; z-index: 100;
    transform: translate(15px, -15px); /* ちょっと枠外に押し出す */
}

/* 🍄 芋虫の家：キノコと森の演出 */
#caterpillar-window .chat-container {
    background: linear-gradient(rgba(20, 30, 20, 0.95), rgba(10, 20, 10, 0.95));
    border: 3px solid #4caf50;
    box-shadow: 0 0 50px rgba(76, 175, 80, 0.5), inset 0 0 30px rgba(139, 69, 19, 0.5);
    background-image: radial-gradient(#4caf50 1px, transparent 1px);
    background-size: 20px 20px; /* うっすら苔のテクスチャ */
}

/* 🍄 舞い散るキノコの胞子エフェクト */
.spore {
    position: absolute;
    width: 6px; height: 6px;
    background: #c8e6c9;
    border-radius: 50%;
    box-shadow: 0 0 8px #a5d6a7;
    pointer-events: none;
    animation: floatSpore 5s infinite ease-in-out;
}
@keyframes floatSpore {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(50px, -100px) scale(0.5); opacity: 0; }
}

.spore {
    position: absolute; width: 6px; height: 6px; background: #c8e6c9;
    border-radius: 50%; box-shadow: 0 0 8px #a5d6a7; pointer-events: none;
    animation: floatSpore 5s infinite ease-in-out;
}

/* 🔬 アマトリカ診断専用の画面（ポップアップ） */
#amatorika-modal {
    position: absolute; /* 親（caterpillar-window）の中で絶対配置 */
    top: 5%; left: 5%; width: 90%; height: 90%;
    background: rgba(10, 20, 10, 0.98);
    border: 2px solid #a5d6a7; border-radius: 10px;
    box-shadow: 0 0 30px #4caf50;
    display: none; flex-direction: column; padding: 20px;
    overflow-y: auto; z-index: 200;
}

.amatorika-title { color: #a5d6a7; font-size: 1.2rem; border-bottom: 1px solid #4caf50; padding-bottom: 10px; margin-bottom: 15px; }
.amatorika-text { color: #e2e2e2; font-size: 0.95rem; margin-bottom: 20px; line-height: 1.5; text-align: left; }
.amatorika-btn {
    background: #2e7d32; color: white; border: 1px solid #4caf50;
    padding: 10px; margin-bottom: 8px; width: 100%; border-radius: 5px;
    cursor: pointer; text-align: left; font-size: 0.9rem; transition: 0.2s;
}
.amatorika-btn:hover { background: #4caf50; transform: scale(1.02); }
.amatorika-close { margin-top: auto; background: #800000; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; }

/* 💻 ハッキング用ターミナルモーダル */
#hack-modal {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    background: #000;
    border: 2px solid #0f0;
    border-radius: 5px;
    box-shadow: 0 0 20px #0f0;
    display: none;
    flex-direction: column;
    padding: 20px;
    z-index: 300;
    font-family: 'Courier New', Courier, monospace;
}
.hack-title { color: #0f0; font-size: 1.2rem; margin-bottom: 15px; font-weight: bold; text-shadow: 0 0 5px #0f0; }
.hack-input {
    background: #111; border: 1px solid #0f0; color: #0f0; padding: 10px; width: 90%;
    margin-bottom: 15px; outline: none; font-family: inherit; font-size: 16px;
}
.hack-input::placeholder { color: #050; }
.hack-btn-area { display: flex; justify-content: space-between; gap: 10px; }
.hack-btn {
    background: #000; color: #0f0; border: 1px solid #0f0; padding: 10px; flex: 1;
    cursor: pointer; font-weight: bold; transition: 0.2s; font-family: inherit;
}
.hack-btn:hover { background: #0f0; color: #000; }
.hack-cancel { border-color: #f00; color: #f00; }
.hack-cancel:hover { background: #f00; color: #000; }

/* 🪄 夢コードバー（画面下部に復活！） */
#dream-code-bar {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 30px; 
    border: 1px solid #9d81ff; display: flex; gap: 10px; z-index: 100;
    box-shadow: 0 0 20px #9d81ff;
    align-items: center;
}
#magic-input { width: 180px; margin: 0; }
#magic-color { 
    width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; 
    cursor: pointer; background: transparent; 
}

/* 🩸 赫の魔法（鼓動エフェクト） */
.effect-blood { animation: heartbeat 1.5s infinite; }
@keyframes heartbeat {
    0%, 100% { box-shadow: inset 0 0 0px red; }
    50% { box-shadow: inset 0 0 100px red; }
}

/* ❄️ 蒼の魔法（凍結エフェクト） */
.effect-freeze { filter: saturate(0) brightness(1.5) sepia(1) hue-rotate(180deg); }

/* ☁️ 白の魔法（ホワイトアウト） */
.effect-whiteout { animation: whiteout 2s forwards; }
@keyframes whiteout { 100% { filter: brightness(10) contrast(0); } }

/* 🫧 泡パーティエフェクト */
.theme-foam { animation: clubFlash 0.5s infinite alternate; }
@keyframes clubFlash { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(90deg); } }
.bubble-effect {
    position: absolute; bottom: -50px; background: radial-gradient(circle, #fff, rgba(255,255,255,0.5));
    border-radius: 50%; pointer-events: none; z-index: 50;
    animation: riseBubble 4s ease-in forwards;
}
@keyframes riseBubble {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    100% { transform: translateY(-100vh) scale(1.5); opacity: 0; }
}

/* 🍞 トースト通知（エラーの原因だったやつ！） */
#toast {
    visibility: hidden; min-width: 250px; background-color: rgba(255, 0, 127, 0.9); color: #fff;
    text-align: center; border-radius: 50px; padding: 15px; position: fixed; z-index: 3000;
    left: 50%; bottom: 80px; transform: translateX(-50%); font-weight: bold;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.5); border: 2px solid #fff;
}
#toast.show { visibility: visible; animation: fadein 0.3s, fadeout 0.5s 2.5s; }
@keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 80px; opacity: 1; } }
@keyframes fadeout { from { bottom: 80px; opacity: 1; } to { bottom: 0; opacity: 0; } }

/* 🌀 新魔法：混沌（画面がグワングワン歪む） */
.theme-chaos { animation: chaosWarp 3s infinite alternate ease-in-out; }
@keyframes chaosWarp {
    0% { filter: hue-rotate(0deg) blur(0px); transform: skew(0deg, 0deg); }
    100% { filter: hue-rotate(360deg) blur(2px); transform: skew(10deg, 5deg) scale(1.1); }
}

/* 🙃 新魔法：反転（画面がひっくり返る！） */
.theme-invert { transform: rotate(180deg); filter: invert(1); transition: 1s; }

/* 🍇 紫の魔法（毒っぽく揺れる） */
.effect-poison { animation: poisonBreath 2s infinite alternate; }
@keyframes poisonBreath { 0% { filter: hue-rotate(250deg) saturate(2); } 100% { filter: hue-rotate(300deg) saturate(3); box-shadow: inset 0 0 50px purple; } }

/* 📖 魔導書モーダル（ガチの古文書風） */
#grimoire-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; max-width: 400px; background: rgba(30, 10, 40, 0.95);
    border: 2px solid #d4af37; border-radius: 10px;
    box-shadow: 0 0 30px #d4af37, inset 0 0 20px #8b4513;
    padding: 20px; z-index: 4000; display: none; flex-direction: column;
    font-family: 'Times New Roman', serif; color: #ffd700;
}
.grimoire-title { font-size: 1.5rem; text-align: center; border-bottom: 1px dashed #d4af37; padding-bottom: 10px; margin-bottom: 15px; text-shadow: 0 0 5px #ff007f; }
.grimoire-list { text-align: left; line-height: 1.8; font-size: 1.1rem; }
.grimoire-category { color: #ff85a1; font-weight: bold; margin-top: 10px; }

/* 🎨 カラーピッカーをパレットアイコンに偽装 */
.color-picker-wrapper {
    position: relative; display: inline-block; width: 40px; height: 40px;
}
.color-picker-icon {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, #9d81ff, #ff007f); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 20px; color: white;
    cursor: pointer; box-shadow: 0 0 10px #ff007f; pointer-events: none; /* 下のinputにクリックを貫通させる */
}
#magic-color {
    opacity: 0; width: 100%; height: 100%; cursor: pointer;
}

/* 🌀 既存魔法のエフェクト強化 */
.theme-wonderland { animation: wonderlandWarp 5s infinite alternate; }
@keyframes wonderlandWarp { 0% { filter: hue-rotate(0deg); transform: scale(1); } 100% { filter: hue-rotate(45deg); transform: scale(1.05); } }

.theme-karaoke { animation: discoLight 0.3s infinite; }
@keyframes discoLight { 0% { background-color: red; } 33% { background-color: blue; } 66% { background-color: green; } 100% { background-color: yellow; } }

/* 🌑 黒（堕天）エフェクト */
.effect-darkness { filter: brightness(0.2) contrast(2); animation: fallenAngel 3s infinite alternate; }
@keyframes fallenAngel { 0% { box-shadow: inset 0 0 50px black; } 100% { box-shadow: inset 0 0 150px purple; } }

/* 🟢 緑（翠）エフェクト */
.effect-emerald { filter: sepia(1) hue-rotate(90deg) saturate(3); }

/* 🟡 黄・橙エフェクト */
.effect-gold { filter: sepia(1) hue-rotate(10deg) saturate(4) brightness(1.2); }

/* 🌸 ピンクエフェクト */
.effect-pink { filter: sepia(1) hue-rotate(280deg) saturate(3) brightness(1.2); }

/* 📖 魔導書ボタン（形を綺麗に！） */
.magic-book-btn {
    width: 40px; height: 40px; border-radius: 50% !important; /* 絶対に正円にする */
    padding: 0 !important; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(45deg, #9d81ff, #ff007f) !important;
}

/* 📖 魔導書モーダル（スクロール対応） */
#grimoire-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; max-width: 400px; max-height: 80vh; /* 高さ制限 */
    background: rgba(30, 10, 40, 0.95); border: 2px solid #d4af37; border-radius: 10px;
    box-shadow: 0 0 30px #d4af37, inset 0 0 20px #8b4513;
    padding: 20px; z-index: 4000; display: none; flex-direction: column;
    font-family: 'Times New Roman', serif; color: #ffd700;
}
.grimoire-list {
    text-align: left; line-height: 1.8; font-size: 1.1rem;
    overflow-y: auto; /* スクロール可能に！ */
    padding-right: 10px;
}
/* スクロールバーのデザイン */
.grimoire-list::-webkit-scrollbar { width: 6px; }
.grimoire-list::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 3px; }

/* 🌑 黒の魔法（懐中電灯エフェクト） */
.effect-darkness {
    /* 画面全体を真っ黒にしつつ、カーソル付近だけ透明にする特殊グラデーション */
    background: radial-gradient(circle 150px at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 0%, rgba(0,0,0,0.98) 80%, black 100%) !important;
    z-index: 9999;
}
/* オブジェクトの光を少し残す */
.effect-darkness .wonder-object { filter: drop-shadow(0 0 10px rgba(157, 129, 255, 0.3)); opacity: 0.5; }
.effect-darkness .wonder-object:hover { opacity: 1; filter: drop-shadow(0 0 30px #fff); }

/* 🎩 カラオケ魔法（パリピ強化） */
.theme-karaoke { animation: discoBG 0.5s infinite; }
@keyframes discoBG { 0% { background-color: #300; } 33% { background-color: #003; } 66% { background-color: #030; } 100% { background-color: #330; } }
.karaoke-mic { position: absolute; font-size: 40px; color: gold; filter: drop-shadow(0 0 10px yellow); animation: floatUp 3s forwards ease-in; pointer-events: none; z-index: 50; }
.karaoke-text { position: absolute; font-size: 30px; font-weight: bold; color: #ff007f; text-shadow: 0 0 10px white; animation: floatUp 2s forwards ease-out; pointer-events: none; z-index: 50; }
@keyframes floatUp { 0% { transform: translateY(100vh) scale(0.5) rotate(-20deg); opacity: 1; } 100% { transform: translateY(-20vh) scale(1.5) rotate(20deg); opacity: 0; } }

/* 🌀 不思議の国（チェス盤の歪みエフェクト） */
.theme-wonderland {
    background: 
        repeating-conic-gradient(#2b1055 0% 25%, #0f0c29 0% 50%) 50% / 100px 100px !important;
    animation: wonderlandWarp 10s infinite alternate ease-in-out;
}
@keyframes wonderlandWarp { 0% { transform: perspective(500px) rotateX(10deg); filter: hue-rotate(0deg); } 100% { transform: perspective(500px) rotateX(-10deg) scale(1.2); filter: hue-rotate(90deg); } }

/* 🕊️ 天国の魔法 */
.theme-heaven { background: radial-gradient(circle, #fff, #ffeb3b, #87ceeb) !important; animation: heavenGlow 4s infinite alternate; }
@keyframes heavenGlow { 0% { filter: brightness(1); } 100% { filter: brightness(1.5) contrast(0.8); } }

/* 🌳 自然の魔法 */
.theme-nature { background: radial-gradient(circle, #4caf50, #1b5e20) !important; }

/* 💔 歪な愛の魔法 */
.theme-distorted-love {
    background: repeating-radial-gradient(circle, #800040, #ff007f 10px, #000 20px) !important;
    animation: heartbeat 0.8s infinite;
}


/* 🌹 天国のエフェクト（ゆっくり） */
.heaven-effect { animation-duration: 6s; filter: drop-shadow(0 0 10px gold); }


/* 🌑 深淵の鼓動 */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.6; }
}

/* ☀️ 青空：もっと明るく！ */
.theme-blue-sky {
    background: linear-gradient(to bottom, #00bfff 0%, #e0ffff 70%, #ffffff 100%) !important;
    filter: brightness(1.2) contrast(1.1);
}

/* 🎇 パーティクル：共通（ランダム湧き用） */
.magic-particle.scatter {
    position: absolute;
    animation: fadeInOut 3s forwards ease-in-out;
    z-index: 1000;
}
@keyframes fadeInOut {
    0% { transform: scale(0); opacity: 0; }
    20% { transform: scale(1.2); opacity: 1; }
    80% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0; }
}

/* 🎤 カラオケ：左から右へ流れる */
.karaoke-effect {
    position: absolute;
    white-space: nowrap;
    animation: flowRight 4s linear forwards;
    z-index: 1000;
}
@keyframes flowRight {
    0% { transform: translateX(-10vw) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(110vw) rotate(360deg); opacity: 0; }
}

/* ❤️ 歪な愛：重なりと鼓動 */
.love-effect {
    position: absolute;
    animation: lovePop 4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
}
@keyframes lovePop {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    30% { transform: scale(1.5) rotate(10deg); opacity: 0.8; }
    100% { transform: scale(1) rotate(0deg); opacity: 0; }
}

/* 🌀 不思議の国：お家が逃げるクラス */
.wonder-escape {
    transition: all 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* ☀️ 青空：強制的に明るく上書き！ */
.theme-blue-sky {
    background: linear-gradient(to bottom, #00d2ff 0%, #92fe9d 100%) !important;
    filter: brightness(1.3) contrast(1.1);
}


@keyframes giantShake {
    0% { transform: translate(-51%, -49%) scale(var(--bug-scale)) rotate(1deg); }
    100% { transform: translate(-49%, -51%) scale(var(--bug-scale)) rotate(-1deg); }
}

/* 🪄 夢コードバー：常に芋虫より上に表示！ */
#dream-code-bar {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.8); padding: 10px 20px; border-radius: 30px; 
    border: 1px solid #9d81ff; display: flex; gap: 10px; 
    z-index: 9000 !important; /* 芋虫(10)より圧倒的に上！ */
    box-shadow: 0 0 20px #9d81ff; align-items: center;
}

/* 🐛 巨大芋虫：背景の一部として扱う */
#giant-bug-effect {
    --bug-scale: 1;
    position: fixed !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) scale(var(--bug-scale)) !important;
    font-size: 300px !important;
    z-index: 10 !important; /* マップ(1)より上で、バー(9000)より下 */
    cursor: pointer;
    user-select: none;
    pointer-events: all; /* クリックはできる */
    animation: giantShake 0.5s infinite alternate ease-in-out;
}

/* ❌ 閉じるボタン：これも最前面に */
.close-btn {
    z-index: 10001 !important;
}

/* モーダル全体（お家の中） */
.modal-overlay {
    z-index: 10000 !important; /* 魔法バーよりもさらに上！ */
}

/* 🎤 カラオケ：加速に対応したアニメーション */
.karaoke-effect {
    position: absolute;
    white-space: nowrap;
    z-index: 1000;
    /* JSから --speed を操作する */
    animation: flowRight var(--speed, 4s) linear forwards;
}

@keyframes flowRight {
    0% { transform: translateX(-20vw) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(120vw) rotate(360deg); opacity: 0; }
}
/* ☕ お茶会のテーブルデザイン */
.teaparty-table {
    position: relative;
    background: #8b4513; /* 木のテーブル */
    border: 5px solid #5c2e0b;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 10px 20px rgba(0,0,0,0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 80px;
}
/* テーブルクロス */
.teaparty-table::before {
    content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 20px;
    background: repeating-linear-gradient(45deg, #fff, #fff 10px, #ffb6c1 10px, #ffb6c1 20px);
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
}

/* ☕ お茶のカップ（ダーリンちゃん用） */
.tea-cup {
    font-size: 40px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
}
.tea-cup:hover {
    transform: translateY(-10px) scale(1.1);
    filter: drop-shadow(0 10px 10px #ff007f);
}
/* 匂いを嗅ぐボタン（カップの下に小さく出る） */
.sniff-btn {
    display: block; font-size: 12px; margin-top: 5px;
    background: #444; color: #fff; border: 1px solid #777;
    border-radius: 5px; cursor: pointer;
}
/* 🕒 時間狂い魔法の背景色 */
.theme-evening {
    background: linear-gradient(to bottom, #ff7e5f 0%, #feb47b 100%) !important;
    filter: brightness(1.1) contrast(1.2);
}
.theme-magic-hour {
    background: linear-gradient(to bottom, #4b134f 0%, #c94b4b 100%) !important;
}

/* 🎲 ナンセンスロジック用のダイス演出 */
@keyframes diceRoll {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.5); }
    100% { transform: rotate(360deg) scale(1); }
}
.dice-animation {
    display: inline-block;
    animation: diceRoll 0.5s ease-in-out;
}

/* 💬 独自入力モーダル（Grok＆ダーリン兼用） */
#input-modal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 85%; background: rgba(10, 10, 20, 0.98);
    border: 2px solid #ff9a9e; border-radius: 10px;
    box-shadow: 0 0 30px #ff9a9e; display: none; flex-direction: column;
    padding: 20px; z-index: 5000;
}
.input-title { color: #ff9a9e; font-size: 1.1rem; margin-bottom: 10px; font-weight: bold; border-bottom: 1px dashed #ff9a9e; padding-bottom: 5px; }
/* 🔥 追加：質問文をモーダル内にも表示させる！ */
.input-question { color: #e2e2e2; font-size: 1rem; margin-bottom: 15px; line-height: 1.5; }
.input-field { background: rgba(255,255,255,0.1); border: 1px solid #ff9a9e; color: white; padding: 10px; margin-bottom: 15px; outline: none; border-radius: 5px; width: 90%; font-size: 16px; }
.input-btn-area { display: flex; justify-content: center; gap: 10px; }
.input-btn { padding: 10px 20px; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; color: white; transition: 0.2s; }
.input-submit { background: #ff007f; } .input-submit:hover { transform: scale(1.05); box-shadow: 0 0 10px #ff007f; }
.input-cancel { background: #555; } .input-cancel:hover { background: #777; }

/* 🕒 99:99 のバグエフェクト（グリッチ）完全版 */
.theme-glitch {
    background: repeating-linear-gradient(
        45deg,
        #000 0px,
        #111 10px,
        #ff007f 10px,
        #ff007f 20px
    ) !important;
    animation: glitchEffect 0.1s infinite !important;
}

@keyframes glitchEffect {
    0% { transform: translate(3px, 3px); filter: hue-rotate(0deg) invert(0) contrast(2); }
    25% { transform: translate(-3px, -3px); filter: hue-rotate(90deg) invert(1) contrast(3); }
    50% { transform: translate(3px, -3px); filter: hue-rotate(180deg) invert(0) contrast(2); }
    75% { transform: translate(-3px, 3px); filter: hue-rotate(270deg) invert(1) contrast(3); }
    100% { transform: translate(3px, 3px); filter: hue-rotate(360deg) invert(0) contrast(2); }
}

/* 🌑 黒の魔法（懐中電灯エフェクト）完全版 */
.effect-darkness {
    /* JSから送られてくる --mouse-x, --mouse-y の位置だけ透明にする！ */
    background: radial-gradient(
        circle 150px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), 
        transparent 0%, 
        rgba(0,0,0,0.95) 80%, 
        black 100%
    ) !important;
    z-index: 9999;
}
/* お家のオブジェクトはうっすら光らせる */
.effect-darkness .wonder-object { filter: drop-shadow(0 0 10px rgba(157, 129, 255, 0.3)); opacity: 0.5; }
.effect-darkness .wonder-object:hover { opacity: 1; filter: drop-shadow(0 0 30px #fff); }

/* 🔦 懐中電灯エフェクト（お茶会モーダルを貫通させる！） */
.effect-darkness {
    background: radial-gradient(
        circle 200px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), 
        transparent 0%, 
        rgba(0,0,0,0.95) 80%, 
        black 100%
    ) !important;
    z-index: 9999;
}
/* お茶会のモーダル自体も暗闇に対応させる（ここ重要！） */
.effect-darkness #teaparty-window .chat-container {
    background: transparent !important;
    border-color: rgba(255, 154, 158, 0.2);
    box-shadow: none;
}

/* 🩸 ダーリンちゃんのお仕置きエフェクト（大幅強化！） */
.theme-punishment {
    /* 画面全体が血のように赤黒く染まり、波打つ */
    background: radial-gradient(circle at center, #ff0000 0%, #4a0000 50%, #000000 100%) !important;
    animation: punishmentHeartbeat 1s infinite alternate cubic-bezier(0.1, 0.9, 0.2, 1) !important;
    filter: saturate(2) contrast(1.5);
    z-index: 9999;
}
@keyframes punishmentHeartbeat {
    0% { box-shadow: inset 0 0 50px #ff0000; transform: scale(1); }
    100% { box-shadow: inset 0 0 300px #ff0000; transform: scale(1.02); }
}
/* お仕置き中は文字も赤く狂気的にする */
.theme-punishment #teaparty-response,
.theme-punishment #char-name {
    color: #ff0000 !important;
    text-shadow: 0 0 10px #ff0000;
}

/* 🗺️ マップのサイズ変更エフェクト（Eat Me & Drink Me） */
#world-map {
    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 1s;
    transform-origin: center center;
}

/* 🍰 🧪 ランダムアイテムのスタイル */
.wonder-item {
    position: absolute;
    font-size: 50px;
    cursor: pointer;
    z-index: 5;
    animation: floatItem 2s infinite alternate ease-in-out;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
}
.wonder-item:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 30px #ff007f);
}

@keyframes floatItem {
    0% { transform: translateY(0) rotate(-5deg); }
    100% { transform: translateY(-15px) rotate(5deg); }
}


/* 🃏 トランプ兵とカード（アセット対応） */
.trump-soldier {
    position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%);
    font-size: 150px; z-index: 8000; animation: riseSoldier 1s forwards cubic-bezier(0.1, 0.9, 0.2, 1);
}
@keyframes riseSoldier { 100% { bottom: 20px; } }

.card-choice-area {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; gap: 20px; z-index: 8001;
}
.card-choice {
    width: 100px; height: 150px; background: white; border-radius: 5px;
    box-shadow: 0 0 20px rgba(255,0,0,0.5); cursor: pointer; transition: 0.3s;
    background-image: url('cards/back.png'); background-size: cover; background-position: center;
}
.card-choice:hover { transform: translateY(-20px) scale(1.1); box-shadow: 0 0 40px #ff007f; }

/* 🪓 ギロチンお仕置きエフェクト */
.guillotine-blade {
    position: fixed; top: -100vh; left: 50%; transform: translateX(-50%);
    font-size: 300px; z-index: 9999;
}
.guillotine-drop { animation: guillotineDrop 0.2s cubic-bezier(0.8, 0, 1, 1) forwards; }
@keyframes guillotineDrop { 100% { top: 20vh; } }

.theme-blood-splatter {
    background: radial-gradient(circle, #ff0000 0%, #300 50%, #000 100%) !important;
    animation: screenShake 0.1s 5; filter: saturate(3);
}
@keyframes screenShake {
    0% { transform: translate(5px, 5px); } 50% { transform: translate(-5px, -5px); } 100% { transform: translate(0, 0); }
}
/* 👇 これがないと同じ場所に固まっちゃう！ */
.obj-library { top: 20%; left: 15%; }
.obj-tea { top: 60%; left: 25%; font-size: 100px; }
.obj-darling { top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 120px; }
.obj-mushroom { top: 25%; right: 20%; }
.obj-castle { top: 10%; right: 10%; color: red; font-size: 100px; }

/* 🃏 トランプ兵のスタイル */
.trump-soldier {
    position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%);
    font-size: 150px; z-index: 8000; animation: riseSoldier 1s forwards cubic-bezier(0.1, 0.9, 0.2, 1);
}
@keyframes riseSoldier { 100% { bottom: 20px; } }

.card-choice-area {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; gap: 20px; z-index: 8001;
}
.card-choice {
    width: 100px; height: 150px; background: white; border-radius: 10px;
    box-shadow: 0 0 20px rgba(255,0,0,0.5); cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex; align-items: center; justify-content: center; font-size: 50px;
    /* 裏面の柄（みつきの画像を想定） */
    background-image: url('cards/back.png'); background-size: cover;
}
.card-choice:hover { transform: translateY(-20px) scale(1.1); box-shadow: 0 0 40px #ff007f; }

/* 🚪 無限ドアの部屋（背景） */
.theme-doors {
    background: 
        linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),
        repeating-linear-gradient(90deg, #3e2723, #3e2723 50px, #2e1a14 50px, #2e1a14 100px) !important;
    animation: doorScroll 10s linear infinite;
}
@keyframes doorScroll {
    0% { background-position: 0 0; }
    100% { background-position: 100px 0; }
}

/* 🚪 ドア自体のスタイル */
.door-obj {
    position: absolute; font-size: 80px; cursor: pointer; transition: 0.3s;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.8));
}
.door-obj:hover { transform: scale(1.1); filter: drop-shadow(0 0 20px #ff007f); }
.door-text {
    position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
    font-size: 14px; font-weight: bold; color: gold; white-space: nowrap;
}

/* 🗺️ マップのラッパー：画面全体を覆う */
#world-map-wrapper {
    position: fixed; /* absoluteよりfixedの方が確実 */
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    overflow: auto; /* スクロール可能にする */
    z-index: 1;
    display: none; /* JSでblockにする */
}

/* 🗺️ マップ本体：ここがオブジェクトの基準点 */
#world-map {
    position: relative; /* 絶対配置の基準にする */
    width: 100%; height: 100%;
    min-width: 100vw; min-height: 100vh;
    background: transparent; /* 背景はbodyに任せる */
    transition: transform 1s ease;
    transform-origin: top left; /* 縮小時のスクロールのため左上基準 */
}

/* 🏠 オブジェクトの配置（!importantで位置を死守！） */
.wonder-object {
    position: absolute !important;
    font-size: 80px;
    cursor: pointer;
    z-index: 10;
}
/* 個別の位置指定をしっかり反映 */
.obj-library { top: 20vh !important; left: 15vw !important; }
.obj-tea { top: 60vh !important; left: 25vw !important; }
.obj-darling { top: 40vh !important; left: 50vw !important; transform: translate(-50%, -50%); }
.obj-mushroom { top: 25vh !important; right: 20vw !important; left: auto !important; }
.obj-castle { top: 10vh !important; right: 10vw !important; left: auto !important; }

/* 🗺️ マップのラッパー */
#world-map-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    overflow: auto; /* はみ出たらスクロールを出す */
    z-index: 1;
    display: none;
    /* 🎨 スクロールバーをあえて見えるようにする（探索用） */
    scrollbar-width: auto; 
}
#world-map-wrapper::-webkit-scrollbar {
    display: block;
    width: 10px; height: 10px;
}
#world-map-wrapper::-webkit-scrollbar-thumb {
    background: #ff007f;
    border-radius: 5px;
}

#world-map {
    position: relative;
    width: 100vw; height: 100vh;
    min-width: 100vw; min-height: 100vh;
    transition: transform 1s ease;
    transform-origin: top left; /* 縮小時は左上を起点にしないとスクロールできない */
}

/* 👑 女王の謁見用モーダル */
#castle-modal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 85%; background: rgba(50, 0, 0, 0.95); /* 血のような暗赤色 */
    border: 2px solid #ff0000; border-radius: 10px;
    box-shadow: 0 0 30px #ff0000; display: none; flex-direction: column;
    padding: 20px; z-index: 9000;
}
.castle-title { color: #ff0000; font-size: 1.2rem; margin-bottom: 10px; font-weight: bold; border-bottom: 1px dashed #ff0000; padding-bottom: 5px; }
.castle-question { color: #e2e2e2; font-size: 1rem; margin-bottom: 15px; line-height: 1.5; }
.castle-input { background: rgba(0,0,0,0.5); border: 1px solid #ff0000; color: white; padding: 10px; margin-bottom: 15px; outline: none; border-radius: 5px; width: 90%; font-size: 16px; }
.castle-btn-area { display: flex; justify-content: center; gap: 10px; }
.castle-btn { padding: 10px 20px; font-weight: bold; border: none; border-radius: 5px; cursor: pointer; color: white; transition: 0.2s; }
.castle-submit { background: #800000; } .castle-submit:hover { transform: scale(1.05); box-shadow: 0 0 10px #ff0000; }
.castle-cancel { background: #555; } .castle-cancel:hover { background: #777; }

/* トランプ兵のスタイル修正 */
.trump-soldier {
    position: fixed; bottom: -50px; left: 50%; transform: translateX(-50%);
    font-size: 150px; z-index: 8000; animation: riseSoldier 1s forwards cubic-bezier(0.1, 0.9, 0.2, 1);
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.8));
}
/* 👑 女王の謁見・ご機嫌取り用モーダル（超豪華版！） */
#castle-modal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 85%; max-width: 500px;
    background: 
        linear-gradient(rgba(50, 0, 0, 0.95), rgba(20, 0, 0, 0.95)),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,0,0,0.1) 10px, rgba(255,0,0,0.1) 20px);
    border: 5px solid #d4af37; /* 金の額縁 */
    border-radius: 15px;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.8), inset 0 0 20px #ff0000;
    display: none; flex-direction: column; padding: 30px; z-index: 9000;
    text-align: center;
}
/* 👑 王冠アイコン */
#castle-modal::before {
    content: '👑'; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
    font-size: 60px; filter: drop-shadow(0 0 10px gold);
}
.castle-title { color: #d4af37; font-size: 1.5rem; margin-bottom: 15px; font-weight: bold; border-bottom: 2px double #d4af37; padding-bottom: 10px; text-shadow: 0 0 5px #000; }
.castle-question { color: #fff; font-size: 1.1rem; margin-bottom: 20px; line-height: 1.6; text-shadow: 0 0 5px red; }

/* 💬 自由入力用エリア */
.castle-input {
    background: rgba(0,0,0,0.8); border: 2px solid #d4af37; color: gold;
    padding: 12px; margin-bottom: 15px; outline: none; border-radius: 5px; width: 90%; font-size: 16px;
    box-shadow: inset 0 0 10px rgba(255,0,0,0.5);
}
.castle-input::placeholder { color: #888; }
.castle-btn-area { display: flex; justify-content: center; gap: 15px; }
.castle-btn { padding: 12px 25px; font-weight: bold; border: 2px solid #d4af37; border-radius: 5px; cursor: pointer; color: white; transition: 0.3s; font-size: 16px; }
.castle-submit { background: linear-gradient(45deg, #800000, #ff0000); }
.castle-submit:hover { transform: scale(1.05); box-shadow: 0 0 15px #ff0000; }
.castle-cancel { background: #333; border-color: #777; }
.castle-cancel:hover { background: #555; }

/* 🎮 選択肢ゲーム用ボタン */
.castle-choice-btn {
    background: linear-gradient(to right, #4a0000, #800000);
    color: white; border: 1px solid #ff0000; padding: 15px; margin-bottom: 10px;
    border-radius: 5px; cursor: pointer; text-align: left; font-size: 1rem;
    transition: 0.2s; box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}
.castle-choice-btn:hover { background: #ff0000; transform: translateX(10px); box-shadow: 0 0 15px red; }

/* ⚔️ コマンドバトル風のメニュー構成 */
.castle-command-category {
    display: flex; gap: 10px; justify-content: center; margin-bottom: 15px;
}
.castle-sub-menu {
    display: none; flex-direction: column; gap: 5px;
    background: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px; border: 1px solid #ff0000;
}
/* 選ばれたメニューだけ表示する */
.castle-sub-menu.active { display: flex; }

/* 👑 称号獲得モーダル（豪華な表彰状風） */
#reward-modal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; max-width: 400px;
    background: linear-gradient(135deg, #d4af37, #b8860b);
    border: 5px solid #fff; border-radius: 10px;
    box-shadow: 0 0 50px gold; display: none; flex-direction: column;
    padding: 30px; z-index: 9999; text-align: center; color: #000;
}
.reward-title { font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #fff; padding-bottom: 10px; margin-bottom: 20px; }
.reward-desc { font-size: 1.1rem; line-height: 1.5; font-weight: bold; }

/* 🖐️ なでなでギミック用の当たり判定 */
#petting-zone {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9500; display: none; cursor: grab;
    background: rgba(255, 0, 0, 0.1);
}
#petting-zone:active { cursor: grabbing; }

/* 🍷 アイテムを投げるアニメーション */
.throw-item {
    position: absolute; bottom: -50px; left: 50%; font-size: 50px;
    z-index: 9500; animation: throwArc 1s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes throwArc {
    0% { transform: translate(-50%, 0) scale(1) rotate(0deg); }
    100% { transform: translate(-50%, -50vh) scale(0.5) rotate(360deg); opacity: 0; }
}

/* 📤 シェア＆追放モーダル */
#share-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; max-width: 400px;
    background: rgba(10, 10, 20, 0.95);
    border: 2px solid #ff007f; border-radius: 10px;
    box-shadow: 0 0 30px #ff007f; display: none; flex-direction: column;
    padding: 30px; z-index: 99999; text-align: center; color: white;
}
.share-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; color: #ff9a9e; }
.share-btn {
    background: #1da1f2; color: white; border: none; padding: 10px;
    border-radius: 5px; cursor: pointer; font-weight: bold; margin-bottom: 10px;
}
.share-btn:hover { background: #0c85d0; }
.reload-btn { background: #555; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; font-weight: bold; }
.reload-btn:hover { background: #777; }

/* 🏰 玉座の間：星空を隠して真っ赤にする！ */
body.theme-throne-room {
    background: #400 !important; /* 暗い赤 */
    background-image: 
        linear-gradient(90deg, rgba(255,0,0,0.1) 50%, transparent 50%),
        repeating-linear-gradient(0deg, #500, #500 100px, #300 100px, #300 200px) !important;
    background-size: 50px 100%, 100% 200px !important;
    border: 15px double #d4af37 !important;
}
/* 玉座の間では背景の星空を消す！ */
body.theme-throne-room::before { display: none !important; }

/* 📤 シェアモーダルを最前面に強制 */
#share-modal {
    position: fixed !important; 
    top: 50% !important; left: 50% !important; 
    transform: translate(-50%, -50%) !important;
    width: 85vw !important; max-width: 400px !important;
    background: rgba(10, 10, 25, 0.98) !important;
    border: 3px solid #ff007f !important;
    box-shadow: 0 0 50px #ff007f !important;
    z-index: 999999 !important; /* 絶対に一番上 */
    display: none; flex-direction: column; padding: 30px; text-align: center; color: white;
}
/* 🏰 玉座の間の背景 */
body.theme-throne-room {
    background: 
        radial-gradient(circle at center, #500 0%, #000 100%),
        repeating-linear-gradient(90deg, #200, #200 50px, #100 50px, #100 100px) !important;
    border: 15px double #d4af37 !important;
}
body.theme-throne-room::before { display: none !important; }

/* 👑 玉座の間の常時アイコン */
body.theme-throne-room::after {
    content: '👑';
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    filter: drop-shadow(0 0 20px gold);
    z-index: 1000;
    pointer-events: none;
}

/* 🪓 ギロチンお仕置きエフェクト（玉座を上書きするために超強化！） */
body.theme-blood-splatter {
    background: radial-gradient(circle, #ff0000 0%, #300 50%, #000 100%) !important;
    animation: screenShake 0.1s 5 !important; 
    filter: saturate(3) !important;
    border: none !important; /* 玉座の金の枠も消し飛ばす */
}
body.theme-blood-splatter::after { display: none !important; } /* 👑も消す */

/* 📤 シェアモーダル（最強の最前面！） */
#share-modal {
    position: fixed !important; 
    top: 50% !important; left: 50% !important; 
    transform: translate(-50%, -50%) !important;
    width: 85vw !important; max-width: 400px !important;
    background: rgba(10, 10, 25, 0.98) !important;
    border: 3px solid #ff007f !important;
    box-shadow: 0 0 50px #ff007f !important;
    z-index: 999999 !important; /* トースト(99999)よりも上！ */
    display: none; flex-direction: column; padding: 30px; text-align: center; color: white;
}

/* 🏰 玉座の間：!important を重ねて MagicEngine のリセットに抵抗する */
body.theme-throne-room {
    background: #400 !important; 
    background-image: repeating-linear-gradient(0deg, #500, #500 100px, #300 100px, #300 200px) !important;
    border: 15px double #d4af37 !important;
}
body.theme-throne-room::before { display: none !important; } /* 星空を消去 */

/* 🪓 首はね：玉座の上からさらに被せる */
body.theme-blood-splatter {
    background: radial-gradient(circle, #ff0000 0%, #000 100%) !important;
    animation: screenShake 0.1s 5 !important;
}

/* モーダルの z-index を 2,000,000 以上にする（確実に上に） */
#reward-modal, #share-modal { display: none; }

/* ⚔️ 女王の玉座：コマンドバトルのレイアウト修正 */
.castle-command-category {
    display: flex; gap: 8px; justify-content: center; margin-bottom: 15px; flex-wrap: wrap;
}
/* カテゴリボタン（会話・行動・アイテム） */
.castle-category-btn {
    flex: 1; min-width: 100px; background: #4a0000; border: 1px solid #d4af37;
    color: white; padding: 10px; border-radius: 5px; cursor: pointer; font-size: 14px;
}
.castle-category-btn:hover { background: #800000; }

/* 選択肢の箱（最初は非表示） */
.castle-sub-menu {
    display: none; 
    flex-wrap: wrap; /* 横に並べる！ */
    justify-content: center; gap: 8px;
    background: rgba(0,0,0,0.4); padding: 15px; border-radius: 10px; border: 1px dashed #ff0000;
}
/* activeがついたメニューだけ表示 */
.castle-sub-menu.active { display: flex; }

/* 各コマンドボタン（横並び対応） */
.castle-choice-btn {
    background: linear-gradient(to bottom, #800000, #4a0000);
    color: white; border: 1px solid #ff0000; padding: 10px 15px;
    border-radius: 5px; cursor: pointer; font-size: 0.9rem;
    flex: 1 1 45%; /* 横に2つ並ぶくらいのサイズ */
    min-width: 140px; transition: 0.2s;
}
.castle-choice-btn:hover { transform: scale(1.05); background: #ff0000; }

/* 文字の視認性アップ */
.castle-question {
    font-size: 1.1rem !important; line-height: 1.5;
    background: rgba(0,0,0,0.5); padding: 15px; border-radius: 10px;
}

/* ⚔️ コマンドバトルのメインカテゴリ（横並び） */
.castle-command-category {
    display: flex !important;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
/* カテゴリボタン（会話・行動・アイテム） */
.castle-category-btn {
    flex: 1;
    background: #4a0000;
    border: 1px solid #d4af37;
    color: white;
    padding: 12px 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

/* 選択肢のメニュー（最初は非表示） */
.castle-sub-menu {
    display: none; 
    flex-wrap: wrap; /* 横に並べる */
    justify-content: center;
    gap: 10px;
    background: rgba(0,0,0,0.4);
    padding: 15px;
    border-radius: 10px;
    border: 1px dashed #ff0000;
}
/* 選ばれたメニューだけ横並びで表示 */
.castle-sub-menu.active { display: flex !important; }

/* 個別の選択肢ボタン */
.castle-choice-btn {
    flex: 1 1 45%; /* 横に2つ並ぶ */
    min-width: 140px;
    background: linear-gradient(to bottom, #800000, #4a0000);
    color: white;
    border: 1px solid #ff0000;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* ⚔️ コマンドバトルのメインカテゴリ */
.castle-command-category {
    display: flex !important;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    width: 100%;
}

/* 選択肢の箱（最初は絶対に非表示！） */
.castle-sub-menu {
    display: none; /* デフォルトは絶対隠す */
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    background: rgba(0,0,0,0.6);
    padding: 15px;
    border-radius: 10px;
    border: 1px dashed #ff0000;
    width: 100%;
    box-sizing: border-box;
}

/* activeがついた時だけ表示！ */
.castle-sub-menu.active {
    display: flex !important;
}

/* 選択肢ボタン */
.castle-choice-btn {
    flex: 1 1 45%;
    min-width: 130px;
    background: linear-gradient(to bottom, #800000, #4a0000);
    color: white;
    border: 1px solid #ff0000;
    padding: 12px 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

/* 💰 所持金表示（HUD） */
#money-hud {
    position: fixed; top: 20px; right: 20px;
    background: rgba(0, 0, 0, 0.7); padding: 10px 20px;
    border: 2px solid gold; border-radius: 10px;
    font-weight: bold; color: gold; font-size: 1.2rem;
    z-index: 1000; box-shadow: 0 0 10px gold;
}

/* 💰 所持金表示（HUD）を絶対最前面に */
#money-hud {
    position: fixed; top: 10px; right: 10px;
    background: rgba(0, 0, 0, 0.9); padding: 10px 20px;
    border: 3px double gold; border-radius: 10px;
    font-weight: bold; color: gold; font-size: 1.3rem;
    z-index: 1000000; box-shadow: 0 0 20px gold;
    display: block !important;
}

/* 👁️ ナイトメア：世界が崩れる（白黒フィルターの修正） */
.theme-nightmare {
    background: #050000 !important;
    /* 👀 フィルターを少し弱めて、赤色が残るように調整！ */
    filter: grayscale(0.8) contrast(2) sepia(0.5) hue-rotate(-50deg) !important;
    animation: worldCollapse 0.1s infinite;
}
@keyframes worldCollapse {
    0% { transform: translate(1px, 1px) skew(0deg); }
    50% { transform: translate(-2px, -1px) skew(2deg); filter: invert(0.1); }
    100% { transform: translate(0,0) skew(-2deg); }
}

/* 👁️ ナイトメアの「目」（確実に赤にする！） */
.nightmare-eye {
    position: absolute; color: #ff0000 !important;
    pointer-events: none; z-index: 99999;
    text-shadow: 0 0 20px #ff0000;
    animation: blinkEye 1s infinite alternate;
}

/* 🧙‍♀️ 魔女のアトリエ：キャラの配置 */
.witch-characters {
    font-size: 60px;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
    position: relative;
}
/* 🐱 チェシャ猫がフワフワ浮く */
.cheshire-anim { animation: floatItem 3s infinite alternate ease-in-out; }
/* 🐕 番犬が小刻みに威嚇する */
.dog-anim { animation: dogGrowl 2s infinite; }
@keyframes dogGrowl { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05) translateY(-5px); } }

/* ✨ 創世：ビッグバン・フラッシュ */
.effect-genesis-flash {
    position: fixed; inset: 0; background: white; z-index: 100000;
    animation: bigBang 1.5s forwards;
}
@keyframes bigBang {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* 創世の背景：黄金と青の神々しいグラデーション */
.theme-genesis {
    background: radial-gradient(circle, #fff7ad 0%, #fff 30%, #00d2ff 100%) !important;
    animation: genesisGlow 5s infinite alternate !important;
    box-shadow: inset 0 0 200px gold !important;
}

/* 創世のパーティクル：太陽や新芽を神々しく */
.genesis-particle {
    filter: drop-shadow(0 0 10px gold) brightness(1.2);
    animation: genesisFloat 5s linear forwards !important;
}
@keyframes genesisFloat {
    0% { transform: translateY(0) scale(0) rotate(0deg); opacity: 0; }
    20% { transform: translateY(-20vh) scale(1.5); opacity: 1; }
    100% { transform: translateY(-120vh) scale(1) rotate(720deg); opacity: 0; }
}

/* 🌀 新魔法：重力（グラビティ）のエフェクト */
.theme-gravity {
    background: #000 !important;
    animation: gravityWarp 2s infinite;
}
@keyframes gravityWarp {
    0% { transform: perspective(500px) rotateX(0deg); }
    50% { transform: perspective(500px) rotateX(20deg) scale(0.9); box-shadow: inset 0 0 100px white; }
    100% { transform: perspective(500px) rotateX(0deg); }
}

/* 🐿️ 泥棒リス */
.squirrel-actor {
    position: absolute; font-size: 40px; z-index: 6;
    transition: all 2s linear; cursor: pointer;
    user-select: none;
}

/* 🕊️ 勘違いハト */
.pigeon-actor {
    position: absolute; font-size: 45px; z-index: 6;
    cursor: pointer; transition: all 5s linear;
    filter: drop-shadow(0 0 5px white);
}

/* リスの威嚇アニメ */
@keyframes squirrelScare {
    0% { transform: scale(1); }
    50% { transform: scale(1.3) rotate(20deg); }
    100% { transform: scale(1); }
}
.scared { animation: squirrelScare 0.3s; }

/* 📚 ジェミの書庫（図書館感アップ！） */
#library-window .chat-container {
    /* 巨大な本棚の背景 */
    background: 
        linear-gradient(rgba(10, 5, 20, 0.9), rgba(10, 5, 20, 0.9)),
        repeating-linear-gradient(0deg, transparent, transparent 40px, #4b0082 40px, #4b0082 45px),
        repeating-linear-gradient(90deg, #2a0a4a, #2a0a4a 50px, #1a052a 50px, #1a052a 100px) !important;
    border: 5px solid #d4af37 !important;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.9), 0 0 30px #9d81ff !important;
}
#library-window #char-name { color: #d4af37 !important; text-shadow: 0 0 5px #ff007f; }

/* 📜 行動ログモーダル（スクロール対応＆カッコよく） */
#log-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 85%; max-width: 600px; max-height: 80vh;
    background: rgba(0, 0, 0, 0.95); border: 2px solid #4caf50; border-radius: 10px;
    box-shadow: 0 0 30px #4caf50; display: none; flex-direction: column;
    padding: 20px; z-index: 100000; /* 書庫より絶対上！ */
    color: #0f0; font-family: monospace; overflow-y: auto; text-align: left;
}

/* 💬 意見箱・メモボトル入力モーダル（Z-index最強化） */
#input-modal {
    z-index: 999999 !important; /* 🔥 絶対に裏に隠れないようにする */
}

/* 🧠 メタフィクション魔法（マトリックスコード風強化） */
.theme-meta {
    background: #e0f7fa !important;
    color: #006064 !important;
    animation: metaWarp 3s infinite alternate;
}
@keyframes metaWarp { 0% { filter: contrast(1); } 100% { filter: contrast(2) hue-rotate(20deg); } }
.meta-text {
    position: fixed; font-size: 24px; font-weight: bold; color: rgba(0, 150, 136, 0.6);
    text-shadow: 0 0 5px #00bcd4; font-family: monospace;
    animation: floatMeta 8s linear forwards; pointer-events: none; z-index: 100;
}
@keyframes floatMeta {
    0% { transform: translateY(110vh) scale(0.8); opacity: 0; }
    10% { opacity: 1; } 90% { opacity: 1; }
    100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* 💻 管理者権限魔法（コンソール画面追加） */
.theme-admin {
    background: radial-gradient(circle, #002200 0%, #000000 100%) !important;
    font-family: 'Courier New', Courier, monospace !important;
    color: #0f0 !important;
}
.theme-admin .wonder-object { display: none !important; }
.admin-console {
    position: fixed; top: 10px; left: 10px; font-size: 16px; color: #0f0;
    text-shadow: 0 0 5px #0f0; z-index: 9999; pointer-events: none;
    line-height: 1.5; white-space: pre-wrap;
}

/* 📜 メタフィクション：思考の破片モーダル（羊皮紙風） */
#meta-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 80%; max-width: 400px;
    background: #fdf5e6; border: 2px solid #8d6e63; border-radius: 5px;
    box-shadow: 0 0 20px #00bcd4; display: none; flex-direction: column;
    padding: 30px; z-index: 100000; text-align: center; color: #3e2723;
    font-family: 'Times New Roman', serif;
}
.meta-modal-title { font-size: 1.2rem; font-weight: bold; margin-bottom: 15px; border-bottom: 1px dashed #8d6e63; color: #00838f; }

/* 💻 管理者権限：ジェミの真の姿モーダル */
#admin-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 500px;
    background: #000; border: 2px solid #0f0; border-radius: 5px;
    box-shadow: 0 0 50px #0f0; display: none; flex-direction: column;
    padding: 20px; z-index: 100000; color: #0f0; font-family: monospace;
}

/* 🔮 唯一無二診断（v2.0）専用スタイル */
.unique-element-btn {
    background: #004d40; color: #b2ebf2; border: 1px solid #00bcd4; padding: 5px 10px;
    border-radius: 20px; cursor: pointer; display: inline-block; margin: 3px; font-size: 14px;
    transition: 0.2s;
}
.unique-element-btn.selected { background: #00bcd4; color: #000; font-weight: bold; box-shadow: 0 0 10px #00bcd4; }

.unique-slider-container { margin-bottom: 15px; text-align: left; }
.unique-slider-label { display: flex; justify-content: space-between; color: #b2ebf2; font-size: 14px; margin-bottom: 5px; }
.unique-slider { width: 100%; accent-color: #00bcd4; cursor: pointer; }

/* 🔮 診断結果のカッコいい表示枠 */
.unique-result-box {
    background: rgba(0, 0, 0, 0.8); border: 1px solid #00bcd4; border-radius: 10px;
    padding: 15px; text-align: left; box-shadow: inset 0 0 20px rgba(0, 188, 212, 0.5);
    font-family: monospace; color: #e0f7fa; line-height: 1.6;
}
.unique-dream-title { font-size: 1.5rem; color: gold; font-weight: bold; text-align: center; text-shadow: 0 0 10px gold; margin-bottom: 10px; }

/* 💀 新魔法：地獄（コキュートス）のエフェクト */
.theme-hell {
    background: radial-gradient(circle at center, #001133 0%, #000000 100%) !important;
    animation: freezeWorld 5s infinite alternate;
}
@keyframes freezeWorld {
    0% { filter: brightness(1) sepia(1) hue-rotate(180deg); }
    100% { filter: brightness(0.5) sepia(1) hue-rotate(180deg) contrast(2); box-shadow: inset 0 0 150px #00ffff; }
}

/* 🧊 氷漬けのサタン（背景にうっすら浮かび上がる） */
.satan-in-ice {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 400px; opacity: 0.1; z-index: -1; pointer-events: none;
    filter: blur(5px) drop-shadow(0 0 20px #00ffff);
    animation: satanBreathe 4s infinite alternate;
}
@keyframes satanBreathe { 0% { opacity: 0.05; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1.05); } }

/* 診断の選択肢ボタンがはみ出さないように！ */
.amatorika-btn {
    background: #2e7d32; color: white; border: 1px solid #4caf50;
    padding: 10px; margin-bottom: 8px; width: 100%; border-radius: 5px;
    cursor: pointer; text-align: left; font-size: 0.9rem; transition: 0.2s;
    word-break: break-word; /* 長い文章でも折り返す！ */
    white-space: normal;
}

/* 📜 行動ログモーダルも同じように修正 */
#log-modal {
    position: fixed; 
    top: 5vh !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important;
    width: 85%; max-width: 600px; max-height: 90vh;
    background: rgba(0, 0, 0, 0.95); border: 2px solid #4caf50; border-radius: 10px;
    box-shadow: 0 0 30px #4caf50; display: none; flex-direction: column;
    padding: 20px; z-index: 100000; color: #0f0; font-family: monospace; 
    overflow-y: auto; text-align: left;
}

/* 🧩 感情モデル構築パズル用UI */
.puzzle-container { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; text-align: left; }
.puzzle-status { background: rgba(0,0,0,0.8); padding: 10px; border-radius: 5px; color: #b2ebf2; font-family: monospace; border-left: 3px solid #00bcd4; }
.puzzle-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 5px; }
.emotion-tag { background: #004d40; color: #fff; border: 1px solid #00bcd4; padding: 5px 10px; border-radius: 20px; cursor: pointer; transition: 0.2s; font-size: 14px; }
.emotion-tag:hover { background: #00bcd4; color: #000; }
.emotion-tag.used { opacity: 0.3; pointer-events: none; }

.puzzle-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.puzzle-box { background: rgba(0,0,0,0.5); border: 1px dashed #ff007f; padding: 10px; border-radius: 5px; min-height: 50px; }
.puzzle-box-title { color: #ff9a9e; font-size: 12px; font-weight: bold; margin-bottom: 5px; }
.puzzle-box-content { display: flex; flex-wrap: wrap; gap: 5px; }

/* 🧠 パズルの結果画面（解剖モード） */
.puzzle-result { background: rgba(10, 0, 20, 0.9); border: 2px solid #9d81ff; padding: 15px; border-radius: 10px; color: #e2e2e2; font-family: monospace; line-height: 1.6; }
.puzzle-rank { font-size: 1.5rem; color: gold; text-align: center; font-weight: bold; margin: 10px 0; text-shadow: 0 0 10px gold; }

/* 🐛 芋虫のサブモーダル（上端が切れるバグの最終解決版！） */
#caterpillar-sub-modal {
    position: fixed !important; 
    top: 50% !important; 
    left: 50% !important; 
    transform: translate(-50%, -50%) !important;
    width: 90vw !important; 
    max-width: 500px !important; 
    max-height: 85vh !important; /* 🔥 画面の85%以上の高さには絶対ならない */
    background: rgba(10, 20, 10, 0.98); border: 2px solid #a5d6a7; border-radius: 10px;
    box-shadow: 0 0 30px #4caf50; display: none; flex-direction: column; 
    padding: 0; /* paddingを消して内部の構造に任せる */
    z-index: 999999 !important;
    box-sizing: border-box;
    overflow: hidden !important; /* 🔥 ここではスクロールさせない！ */
}

/* 🔥 モーダルの中に専用のスクロール領域を作る！ */
.caterpillar-sub-content {
    flex: 1; /* 余ったスペースを全部使う */
    overflow-y: auto !important; /* ここだけスクロールさせる！ */
    padding: 20px;
}

/* スマホ対応（メディアクエリ） */
@media (max-width: 600px) {
    .amatorika-btn { font-size: 0.8rem; padding: 12px 10px; }
    .chat-container { max-height: 90vh; }
    .wonder-object { font-size: 60px; }
    #dream-code-bar { width: 95vw; flex-wrap: wrap; justify-content: center; }
}

/* 📱 スマホ対応：懐中電灯（指でタッチした場所を光らせる！） */
.effect-darkness {
    background: radial-gradient(circle 150px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), transparent 0%, rgba(0,0,0,0.95) 80%, black 100%) !important;
    touch-action: none; /* スマホでスクロールするのを防ぐ */
}

/* 🧩 ドラッグ＆ドロップ用スタイル */
.puzzle-tags { min-height: 50px; border: 1px solid #555; display: flex; flex-wrap: wrap; gap: 5px; padding: 10px; }
.emotion-tag { 
    background: #004d40; color: #fff; border: 1px solid #00bcd4; padding: 5px 10px; 
    border-radius: 20px; cursor: grab; font-size: 14px; user-select: none;
    /* スマホでドラッグできるようにする */
    touch-action: none; 
}
.emotion-tag:active { cursor: grabbing; }
.puzzle-box-content { min-height: 50px; border: 1px dashed #777; padding: 5px; display: flex; flex-wrap: wrap; gap: 5px; }
.drag-over { background: rgba(0, 188, 212, 0.3) !important; border: 2px dashed #00bcd4 !important; }

/* 🃏 感情構造の完成カード（シェア用） */
.emotion-card {
    background: linear-gradient(135deg, #1a1a2e, #16213e); border: 2px solid #00bcd4;
    border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 0 20px #00bcd4;
    margin-top: 15px;
}
.emotion-card-title { font-size: 1.5rem; color: gold; font-weight: bold; margin-bottom: 15px; }

/* style.css に追加 */
#exit-dream-btn {
    position: fixed; 
    top: 15px; 
    right: 150px; /* 🔥 お金HUDの左側に配置！ */
    background: #555; color: white; border: 2px solid #aaa;
    padding: 8px 12px; border-radius: 5px; font-weight: bold;
    cursor: pointer; z-index: 8000; box-shadow: 0 0 10px #000;
    font-size: 14px;
}
#exit-dream-btn:hover { background: #ff007f; border-color: #fff; }
/* ☄️ 彗星（コメット）のエフェクト */
.theme-comet {
    background: radial-gradient(circle at top right, #0b1a40 0%, #000000 100%) !important;
}
.comet-particle {
    position: absolute;
    width: 6px; height: 6px; /* 🔥 大きくした */
    background: #ffffff;
    border-radius: 50%;
    /* 尾っぽを長く、明るく！ */
    box-shadow: 
        0 0 15px 5px #00ffff, 
        -15px -15px 0 0 rgba(0, 255, 255, 0.9), 
        -30px -30px 0 0 rgba(0, 255, 255, 0.6),
        -50px -50px 0 0 rgba(0, 255, 255, 0.3);
    animation: shootingStar 2s linear forwards;
    pointer-events: none; z-index: 1000;
}
@keyframes shootingStar {
    0% { transform: translate(100vw, -20vh) rotate(45deg) scale(1); opacity: 1; }
    100% { transform: translate(-20vw, 100vh) rotate(45deg) scale(0.5); opacity: 0; }
}

/* 🌃 夜景（ナイトビュー）のエフェクト */
.theme-nightview {
    background: linear-gradient(to bottom, #000010 0%, #1a0b2e 70%, #4a0e4e 100%) !important;
}
.bokeh-light {
    position: absolute; border-radius: 50%;
    filter: blur(8px); /* ピンボケの光 */
    animation: bokehTwinkle 4s infinite alternate;
    pointer-events: none; z-index: 50;
}
@keyframes bokehTwinkle {
    0% { opacity: 0.2; transform: scale(0.8); }
    100% { opacity: 0.8; transform: scale(1.2); }
}

/* 📅 カレンダー（時間の崩壊）のエフェクト */
.theme-calendar {
    /* 🔥 白茶色のグラデーション */
    background: linear-gradient(135deg, #f5f5dc 0%, #e8e4c9 50%, #d7ccc8 100%) !important;
    /* 古びた質感 */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px) !important;
    filter: sepia(0.2) contrast(1.1);
}
.calendar-text {
    position: absolute; 
    font-family: 'Times New Roman', Times, serif; /* フォントを古風に */
    font-weight: bold; 
    color: #4e342e; /* 🔥 黒と茶の中間色（ダークブラウン） */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    animation: timeFade 6s linear forwards;
    pointer-events: none; z-index: 50;
}
@keyframes timeFade {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-50px) scale(1.5); opacity: 0; }
}

/* 👁️‍🗨️ 新魔法：イデア（抽象画像のフェード） */
.theme-idea {
    background: radial-gradient(circle at center, #1a1a2e 0%, #000 100%) !important;
}
.idea-image {
    position: absolute;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
    /* 抽象画っぽく見せるためのフィルター */
    filter: sepia(0.5) hue-rotate(180deg) blur(1px) contrast(1.2) opacity(0.7);
    mix-blend-mode: screen; /* 背景と不気味に混ざる */
    animation: ideaFade 8s ease-in-out forwards;
    pointer-events: none; z-index: 50;
    object-fit: cover;
}

@keyframes ideaFade {
    0% { transform: scale(0.8) rotate(-5deg); opacity: 0; filter: blur(10px); }
    30% { transform: scale(1) rotate(0deg); opacity: 0.8; filter: blur(0px); }
    70% { transform: scale(1.1) rotate(5deg); opacity: 0.8; filter: blur(2px); }
    100% { transform: scale(1.5) rotate(10deg); opacity: 0; filter: blur(15px); }
}

/* =========================================
   📱 スマホ・タブレット向けレスポンシブ対応
   ========================================= */
@media screen and (max-width: 768px) {
    
    /* 🏠 マップ上のオブジェクトを少し大きくして押しやすくする */
    .wonder-object { font-size: 60px !important; }
    .obj-darling { font-size: 80px !important; }
    .obj-tea { font-size: 80px !important; }
    
    /* 🗺️ マップのスクロールをより滑らかに */
    #world-map-wrapper {
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズに */
    }

    /* 💬 チャットウィンドウ（お家の中）の調整 */
    .chat-container {
        padding: 20px !important; /* 余白を狭くして広く使う */
        width: 95vw !important;
        max-height: 90vh !important;
    }

    /* ⌨️ 入力欄とボタンを押しやすく */
    input[type="text"], .hack-input, .castle-input {
        width: 95% !important;
        font-size: 16px !important; /* iOSでズームされるのを防ぐため16px以上必須 */
        padding: 15px 10px !important; /* タップしやすく高くする */
    }
    button {
        padding: 12px 15px !important;
        font-size: 14px !important;
        margin: 5px 2px !important;
    }

    /* 🪄 夢コードバー（魔法入力）の調整 */
    #dream-code-bar {
        width: 95vw;
        bottom: 10px;
        padding: 10px;
        flex-wrap: wrap; /* 画面が狭い時は折り返す */
        justify-content: center;
        border-radius: 15px;
    }
    #magic-input { width: 60% !important; }

    /* ⚔️ 城のコマンドボタン（横並びだとキツいので縦並びに近い形へ） */
    .castle-choice-btn {
        flex: 1 1 100% !important; /* スマホでは縦1列に並べる */
        min-width: 100%;
        padding: 15px !important;
        font-size: 1rem !important;
    }

    /* 🧩 感情パズルのタグをタッチしやすく */
    .emotion-tag {
        padding: 10px 15px !important;
        font-size: 16px !important;
    }
    .puzzle-box { min-height: 70px !important; } /* ドロップ先を広げる */

    /* 🚪 退出ボタンの調整 */
    #exit-dream-btn {
        top: 10px; right: 10px;
        padding: 10px;
        font-size: 12px;
    }

    /* 💰 お金HUDの調整 */
    #money-hud {
        top: 10px; left: 10px; /* 退出ボタンと被らないように左へ */
        right: auto;
        padding: 8px 15px;
        font-size: 1rem;
    }
}

/* 💰 所持金表示（HUD）は常に右上！ */
#money-hud {
    position: fixed !important; 
    top: 15px !important; 
    right: 15px !important; /* 絶対に右！ */
    left: auto !important; /* 左指定を解除 */
    background: rgba(0, 0, 0, 0.9); padding: 10px 20px;
    border: 3px double gold; border-radius: 10px;
    font-weight: bold; color: gold; font-size: 1.3rem;
    z-index: 1000000; box-shadow: 0 0 20px gold;
}

/* 🚪 夢から覚める（退出）ボタンは右下の中段に！ */
#exit-dream-btn {
    position: fixed !important; 
    bottom: 100px !important; /* 夢コードバーの上に配置 */
    right: 15px !important; 
    background: #555; color: white; border: 2px solid #aaa;
    padding: 10px 15px; border-radius: 5px; font-weight: bold;
    cursor: pointer; z-index: 8000; box-shadow: 0 0 10px #000;
}
#exit-dream-btn:hover { background: #ff007f; border-color: #fff; }

/* スマホ対応（メディアクエリ）の中の余計な指定を上書き！ */
@media screen and (max-width: 768px) {
    /* 魔女の店やチェシャ猫を少し上に逃がす */
    .obj-witch { bottom: 25vh !important; right: 20vw !important; }
    .obj-cheshire { top: 30vh !important; left: 10vw !important; }

    /* スマホ版でもお金は右上で固定！ */
    #money-hud {
        top: 10px !important; 
        right: 10px !important; 
        left: auto !important; 
        font-size: 1rem !important;
    }
}

/* 🚪 夢から覚める（退出）ボタン：縦伸びバグを完全修正！ */


/* 💰 所持金表示（HUD）は右上に固定 */
#money-hud {
    position: fixed !important; 
    top: 15px !important; 
    right: 15px !important; 
    background: rgba(0, 0, 0, 0.9); padding: 10px 20px;
    border: 3px double gold; border-radius: 10px;
    font-weight: bold; color: gold; font-size: 1.3rem;
    z-index: 1000000; box-shadow: 0 0 20px gold;
}

/* 🚪 夢から覚める（退出）ボタン：お金の左隣に配置！ */
#exit-dream-btn {
    position: fixed !important; 
    top: 15px !important; /* お金と同じ高さ */
    right: 160px !important; /* お金の左側に配置 */
    bottom: auto !important; /* 下指定を解除 */
    background: #555; color: white; border: 2px solid #aaa;
    padding: 10px 15px; border-radius: 20px; font-weight: bold;
    cursor: pointer; z-index: 1000000; box-shadow: 0 0 10px #000;
}
#exit-dream-btn:hover { background: #ff007f; border-color: #fff; }

/* 📱 スマホ時の調整 */
@media screen and (max-width: 768px) {
    #money-hud { top: 10px !important; right: 10px !important; font-size: 1rem !important; padding: 8px 12px; }
    #exit-dream-btn { top: 10px !important; right: 110px !important; padding: 8px 12px; font-size: 12px; }
}

/* 📱 スマホ時のレイアウト調整（お金と閉じるボタンの被り防止！） */
@media screen and (max-width: 768px) {
    /* お金は「左上」に移動して絶対に被らないようにする！ */
    #money-hud {
        top: 10px !important; 
        left: 10px !important; 
        right: auto !important; 
        font-size: 1rem !important; 
        padding: 8px 12px; 
    }
    
    /* ホームボタンはお金の下に逃がす */
    #home-btn { top: 60px !important; left: 10px !important; font-size: 12px !important; padding: 8px 12px !important; }

    /* 退出ボタンは「右下」 */
    #exit-dream-btn { bottom: 70px !important; right: 10px !important; padding: 8px 12px; font-size: 12px; }

    /* ❌ モーダルの閉じるボタンを少し内側に寄せる（画面端のタップミス防止） */
    .close-btn {
        transform: translate(5px, -5px) !important;
        width: 35px !important; height: 35px !important; font-size: 16px !important;
    }
}

/* 📝 複数行入力（Textarea）用のスタイル */
.input-textarea {
    background: rgba(0,0,0,0.5); border: 1px solid #ff9a9e; color: white; 
    padding: 10px; margin-bottom: 15px; outline: none; border-radius: 5px; 
    width: 90%; font-size: 16px; min-height: 100px; resize: vertical; /* 縦に伸ばせるように */
}

/* 🚪 夢から覚める（退出）ボタン：縦伸びバグを完全・究極に修正！！ */
#exit-dream-btn {
    position: fixed !important; 
    top: auto !important; 
    bottom: 80px !important; /* 夢コードバーの少し上 */
    right: 15px !important; 
    left: auto !important; 
    
    /* 🔥 縦横を完全に固定して、絶対に伸びないようにする！ */
    width: auto !important; 
    max-width: 150px !important;
    height: auto !important;
    max-height: 50px !important;
    white-space: nowrap !important; /* 文字の折り返し禁止 */
    
    background: rgba(0, 0, 0, 0.8) !important; 
    color: white !important; 
    border: 2px solid #aaa !important; 
    padding: 10px 15px !important; 
    border-radius: 20px !important; 
    font-weight: bold !important;
    cursor: pointer !important; 
    z-index: 9000 !important; 
    box-shadow: 0 0 10px #000 !important;
}

/* 📱 スマホ時の追加調整 */
@media screen and (max-width: 768px) {
    #money-hud { top: 10px !important; left: 10px !important; right: auto !important; font-size: 1rem !important; padding: 8px 12px; }
    #home-btn { top: 60px !important; left: 10px !important; font-size: 12px !important; padding: 8px 12px !important; }
    
    /* スマホの時はさらに小さく・絶対固定！ */
    #exit-dream-btn { 
        bottom: 70px !important; 
        right: 10px !important; 
        padding: 8px 12px !important; 
        font-size: 12px !important; 
    }
}

/* =========================================
   📱 スマホ・タブレット向けレスポンシブ対応
   ========================================= */
@media screen and (max-width: 768px) {
    /* 🏠 マップ上のオブジェクト調整 */
    .wonder-object { font-size: 60px !important; }
    .obj-darling { font-size: 80px !important; }
    .obj-tea { font-size: 80px !important; }
    .obj-witch { bottom: 25vh !important; right: 20vw !important; }
    .obj-cheshire { top: 30vh !important; left: 10vw !important; }
    
    #world-map-wrapper { -webkit-overflow-scrolling: touch; }

    /* 💬 チャットウィンドウ調整 */
    .chat-container { padding: 20px !important; width: 95vw !important; max-height: 90vh !important; }
    input[type="text"], .hack-input, .castle-input { width: 95% !important; font-size: 16px !important; padding: 15px 10px !important; }
    button { padding: 12px 15px !important; font-size: 14px !important; margin: 5px 2px !important; }

    /* 🪄 夢コードバー調整 */
    #dream-code-bar { width: 95vw; bottom: 10px; padding: 10px; flex-wrap: wrap; justify-content: center; border-radius: 15px; }
    #magic-input { width: 60% !important; }

    /* ⚔️ 城のコマンド調整 */
    .castle-choice-btn { flex: 1 1 100% !important; min-width: 100%; padding: 15px !important; font-size: 1rem !important; }
    .emotion-tag { padding: 10px 15px !important; font-size: 16px !important; }
    .puzzle-box { min-height: 70px !important; }

    /* 🏠 ホームボタン */
    #home-btn { top: 60px !important; left: 10px !important; font-size: 12px !important; padding: 8px 12px !important; }

    /* 💰 スマホ版：お金と退出ボタンの配置（右上＆その左隣！） */
    #money-hud {
        top: 10px !important; 
        right: 10px !important; /* 右上端 */
        left: auto !important; 
        font-size: 0.9rem !important; 
        padding: 6px 10px !important; 
        height: 35px !important; /* 高さを小さく固定 */
    }
    
    #exit-dream-btn { 
        top: 10px !important; /* お金と同じ高さ */
        right: 90px !important; /* スマホの時はお金の幅に合わせて隙間を狭くする！ */
        bottom: auto !important; 
        font-size: 12px !important; 
        padding: 6px 10px !important; 
        height: 35px !important; /* 高さを小さく固定 */
        line-height: 18px !important;
    }
    
    /* ❌ モーダルの閉じるボタン */
    .close-btn { transform: translate(5px, -5px) !important; width: 35px !important; height: 35px !important; font-size: 16px !important; }
}

/* =========================================
   📱 スマホ・タブレット向けレスポンシブ対応
   ========================================= */
@media screen and (max-width: 768px) {
    /* 🏠 マップ上のオブジェクト調整（変更なし） */
    .wonder-object { font-size: 60px !important; }
    .obj-darling { font-size: 80px !important; }
    .obj-tea { font-size: 80px !important; }
    .obj-witch { bottom: 25vh !important; right: 20vw !important; }
    .obj-cheshire { top: 30vh !important; left: 10vw !important; }
    
    #world-map-wrapper { -webkit-overflow-scrolling: touch; }

    /* 💬 チャットウィンドウ調整（変更なし） */
    .chat-container { padding: 20px !important; width: 95vw !important; max-height: 90vh !important; }
    input[type="text"], .hack-input, .castle-input { width: 95% !important; font-size: 16px !important; padding: 15px 10px !important; }
    button { padding: 12px 15px !important; font-size: 14px !important; margin: 5px 2px !important; }

    /* 🪄 夢コードバー調整（変更なし） */
    #dream-code-bar { width: 95vw; bottom: 10px; padding: 10px; flex-wrap: wrap; justify-content: center; border-radius: 15px; }
    #magic-input { width: 60% !important; }

    /* ⚔️ 城のコマンド調整（変更なし） */
    .castle-choice-btn { flex: 1 1 100% !important; min-width: 100%; padding: 15px !important; font-size: 1rem !important; }
    .emotion-tag { padding: 10px 15px !important; font-size: 16px !important; }
    .puzzle-box { min-height: 70px !important; }

    /* ❌ モーダルの閉じるボタン（右上のままだけど少し小さくして押しやすく） */
    .close-btn { transform: translate(5px, -5px) !important; width: 35px !important; height: 35px !important; font-size: 16px !important; }


    /* =========================================
       🔥 ここから修正！ スマホ版は左上に配置！
       ========================================= */

    /* 🏠 ホームボタン（一番左上） */
    #home-btn { 
        top: 10px !important; 
        left: 10px !important; 
        font-size: 12px !important; 
        padding: 8px 12px !important; 
    }

    /* 💰 お金HUD（ホームボタンの下、左側に配置） */
    #money-hud {
        top: 55px !important; /* ホームボタンの分だけ下にズラす */
        left: 10px !important; /* 🔥 左端に配置！ */
        right: auto !important; /* 右指定は解除 */
        font-size: 0.9rem !important; 
        padding: 6px 10px !important; 
        height: 35px !important; 
        box-sizing: border-box !important;
    }
    
    /* 🚪 夢から覚める（退出）ボタン（お金の右隣に配置！） */
    #exit-dream-btn { 
        top: 55px !important; /* お金と同じ高さ */
        left: 100px !important; /* 🔥 お金の幅の分だけ右にズラす！ */
        right: auto !important; /* 右指定は解除 */
        bottom: auto !important; 
        font-size: 12px !important; 
        padding: 6px 10px !important; 
        height: 35px !important; 
        line-height: 18px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}

/* 💰 🚪 上部のHUDコンテナ（お金と退出ボタンをグループ化！） */
#top-hud-container {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important; /* PCは右上 */
    display: flex;
    align-items: center;
    gap: 15px; /* お金とボタンの隙間 */
    z-index: 1000000;
}

/* お金（HUD内のスタイル） */
#money-hud {
    background: rgba(0, 0, 0, 0.9); padding: 10px 20px;
    border: 3px double gold; border-radius: 10px;
    font-weight: bold; color: gold; font-size: 1.3rem;
    box-shadow: 0 0 20px gold; white-space: nowrap !important;
    display: none; /* 初期は非表示 */
}

/* 退出ボタン（HUD内のスタイル） */
#exit-dream-btn {
    background: #555; color: white; border: 2px solid #aaa;
    padding: 10px 15px !important; border-radius: 10px; font-weight: bold;
    cursor: pointer; box-shadow: 0 0 10px #000; white-space: nowrap !important;
    display: none; /* 初期は非表示 */
}
#exit-dream-btn:hover { background: #ff007f; border-color: #fff; }

/* 📱 スマホ時の調整 */
@media screen and (max-width: 768px) {
    #top-hud-container {
        top: 60px !important; /* ホームボタンの下に配置 */
        left: 10px !important; /* スマホは左上に配置！ */
        right: auto !important;
        gap: 5px !important; /* 隙間を詰める */
    }
    #money-hud { font-size: 1rem !important; padding: 6px 10px !important; height: 35px !important; box-sizing: border-box; }
    #exit-dream-btn { font-size: 12px !important; padding: 6px 10px !important; height: 35px !important; box-sizing: border-box; }
}

/* 💰 お金HUD：世界で一番手前に表示（ショップ用） */
#money-hud {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;
    background: rgba(0, 0, 0, 0.9); padding: 10px 20px;
    border: 3px double gold; border-radius: 10px;
    font-weight: bold; color: gold; font-size: 1.3rem;
    box-shadow: 0 0 20px gold;
    z-index: 2000000 !important; /* 🔥 全てのモーダル（10000〜）より上に設定 */
    white-space: nowrap !important;
    display: none; /* 最初は非表示、JSで出す */
}

/* 🚪 夢から覚めるボタン：家（モーダル）よりは下に配置 */
#exit-dream-btn {
    position: fixed !important;
    top: 80px !important; /* 🔥 お金の下に配置（絶対に被らない） */
    right: 15px !important;
    background: rgba(0, 0, 0, 0.7); color: white;
    border: 2px solid #aaa; padding: 10px 15px;
    border-radius: 20px; font-weight: bold;
    cursor: pointer;
    z-index: 8000 !important; /* 🔥 家（10000）より下に設定。これで家に入ると裏に隠れる！ */
    box-shadow: 0 0 10px #000;
    white-space: nowrap !important;
    display: none; /* 最初は非表示、JSで出す */
}

/* 📱 スマホ時のレスポンシブ：左上に縦並び */
@media screen and (max-width: 768px) {
    #money-hud {
        top: 60px !important; /* ホームボタンの下 */
        left: 10px !important; right: auto !important;
        font-size: 1rem !important; padding: 8px 12px;
    }
    #exit-dream-btn {
        top: 110px !important; /* お金の下 */
        left: 10px !important; right: auto !important;
        font-size: 12px !important; padding: 8px 12px;
    }
}

/* 💻 管理者権限モーダルのテキストエリアをスクロール可能に！ */
#admin-modal-text {
    max-height: 50vh; /* 画面の半分くらいまでに制限 */
    overflow-y: auto; /* はみ出たらスクロール */
    padding: 10px;
    background: rgba(0, 20, 0, 0.5);
    border: 1px solid #0f0;
    margin-bottom: 20px;
}

/* 管理者権限でお家が消える設定を微調整（JSで制御しやすく） */
body.theme-admin .wonder-object {
    display: none !important;
}

/* 🌌 オーロラ魔法（ポラリス） */
.theme-aurora {
    background: linear-gradient(210deg, #000000, #001122, #004433, #002244) !important;
    animation: auroraMove 10s infinite linear alternate !important;
}
@keyframes auroraMove {
    0% { filter: hue-rotate(0deg) brightness(1); }
    100% { filter: hue-rotate(60deg) brightness(1.3); }
}

/* 揺らめく光のカーテン */
.aurora-curtain {
    position: fixed; inset: 0;
    background: linear-gradient(to right, transparent, rgba(0, 255, 150, 0.1), rgba(160, 32, 240, 0.1), transparent);
    filter: blur(60px);
    z-index: 50; pointer-events: none;
    animation: auroraWave 8s infinite ease-in-out alternate;
}
@keyframes auroraWave {
    0% { transform: skewX(-10deg) translateX(-20%); opacity: 0.3; }
    100% { transform: skewX(10deg) translateX(20%); opacity: 0.7; }
}