/* ============================================================
   VOID // INDEX_SPECIFIC (泡と詳細表示の魂)
   ============================================================ */

/* 🌌 STAGE: 舞台設定。背景は指定せず、透明にしておくお */
#stage { 
    width: 100vw; height: 100vh; 
    position: absolute; top: 0; left: 0; 
    overflow: hidden; z-index: 1; 
}

/* 🫧 PLANET BUBBLE: 泡のデザイン */
.bubble {
    position: absolute; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle at center, rgba(0, 242, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%),
                radial-gradient(circle at center, rgba(0, 242, 255, 0.25) 45%, rgba(0, 0, 0, 0.9) 100%);
    backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center;
    z-index: 10; overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 242, 255, 0.1), inset 0 0 20px rgba(0, 242, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.user-icon {
    width: 58%; height: 58%; border-radius: 50%;
    background-size: cover; background-position: center;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.3);
    transition: all 0.7s ease; z-index: 5;
}

.more-trigger {
    position: absolute; bottom: -100%; width: 100%; height: 48%;
    background: rgba(0, 242, 255, 0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; color: #fff; letter-spacing: 5px;
    border-top: 1px solid var(--accent); opacity: 0;
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none; z-index: 10;
}

.bubble.activated .more-trigger { bottom: 0; opacity: 1; pointer-events: auto; }
.bubble.activated .user-icon { transform: translateY(-18%) scale(0.85); opacity: 0.6; }

/* 📜 DETAIL LAYER: 詳細表示 */
#detail-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(3,3,3,0.98); display: none; z-index: 3000;
    flex-direction: column; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box; overflow-y: auto;
}

.exit-btn { position: absolute; top: 30px; left: 30px; color: var(--accent); cursor: pointer; font-size: 0.6rem; letter-spacing: 4px; z-index: 3100; }

.detail-core-container { position: relative; width: 220px; height: 220px; margin-bottom: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.detail-core { width: 100%; height: 100%; border-radius: 50%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.core-wave { position: absolute; width: 180%; height: 180%; background: conic-gradient(from 0deg, transparent, var(--accent), transparent, var(--accent-sub), transparent); opacity: 0; transition: 0.5s; }
.playing .core-wave { opacity: 0.4; animation: rotate 4s infinite linear; }
.core-node { width: 100px; height: 100px; border-radius: 50%; background: #000; border: 1px solid var(--accent); z-index: 10; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; color: var(--accent); box-shadow: inset 0 0 20px var(--accent); }

.sat-arc { position: absolute; bottom: -60px; width: 100%; display: flex; justify-content: center; gap: 20px; z-index: 3050; }
.satellite { width: 50px; height: 50px; border-radius: 50%; border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); background: rgba(0,0,0,0.9); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.45rem; cursor: pointer; transition: 0.3s; text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

.content-wrap { width: 100%; max-width: 450px; margin-top: 80px; }
.text-block { width: 100%; padding: 30px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); background: rgba(255,255,255,0.03); box-sizing: border-box; }
.text-block h2 { font-weight: 200; font-size: 1.1rem; margin: 0 0 15px; letter-spacing: 3px; color: #fff; text-align: left; }
.text-block p { font-size: 0.85rem; line-height: 1.8; color: var(--text-dim); text-align: left; margin: 0; }

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }