* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
}
body {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  background: #050816;
  color: #f5f5f5;
  overflow: hidden;
}

/* 背景キャンバス（深海＋宇宙） */
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -4;
}

/* オーブ（光の塊） */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.7;
  mix-blend-mode: screen;
  z-index: -3;
}
.orb-1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, #6f8dff, transparent 60%);
  top: -80px;
  left: -60px;
  animation: orbMove1 26s infinite alternate ease-in-out;
}
.orb-2 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, #b07bff, transparent 65%);
  bottom: -120px;
  right: -80px;
  animation: orbMove2 32s infinite alternate ease-in-out;
}
.orb-3 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, #7fffd4, transparent 60%);
  top: 40%;
  left: 60%;
  animation: orbMove3 30s infinite alternate ease-in-out;
}

@keyframes orbMove1 {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(120px, 160px) scale(1.2); }
}
@keyframes orbMove2 {
  0% { transform: translate(0,0) scale(1.1); }
  100% { transform: translate(-160px, -120px) scale(1.3); }
}
@keyframes orbMove3 {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(-80px, 120px) scale(1.15); }
}

/* 全体オーバーレイ（詳細表示時に暗くする） */
#overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10,10,30,0.4), rgba(0,0,0,0.9));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 5;
}
#overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 展示パネルコンテナ */
.panel-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* パネル以外はクリックさせない */
  z-index: 1;
}

/* 展示パネル本体 */
.panel {
  position: absolute;
  width: 180px;
  height: 120px;
  background: radial-gradient(circle at top, rgba(140,170,255,0.7), rgba(10,14,40,0.95));
  border-radius: 18px;
  border: 1px solid rgba(180, 200, 255, 0.7);
  box-shadow: 0 18px 60px rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: blur(10px);
  transition:
    transform 2.4s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 1.8s ease,
    filter 1.8s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}
.panel h3 {
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5f7ff;
}

/* パネル到着後の状態 */
.panel.arrived {
  opacity: 1;
  filter: blur(0);
}

/* パネル浮遊アニメーション */
.panel.floating {
  animation: floatPanel 10s ease-in-out infinite alternate;
}
@keyframes floatPanel {
  0% { transform: translate(-50%, -50%) translate(0,0); }
  50% { transform: translate(-50%, -50%) translate(8px, -10px); }
  100% { transform: translate(-50%, -50%) translate(-6px, 6px); }
}

/* ホバー時の光り方 */
.panel:hover {
  box-shadow: 0 24px 80px rgba(160, 190, 255, 1);
  background: radial-gradient(circle at top, rgba(200,220,255,0.9), rgba(10,14,40,1));
}

/* 詳細パネル */
.detail {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.5s ease;
}
.detail.active {
  opacity: 1;
  pointer-events: auto;
}
.detail-inner {
  max-width: 720px;
  max-height: 80vh;
  padding: 32px 28px;
  background: radial-gradient(circle at top, rgba(160,180,255,0.9), rgba(10,14,40,0.98));
  border-radius: 24px;
  border: 1px solid rgba(200, 220, 255, 0.9);
  box-shadow: 0 30px 90px rgba(0,0,0,0.95);
  overflow-y: auto;
  color: #f5f7ff;
  position: relative;
}
.detail-inner h2 {
  font-size: 22px;
  margin-bottom: 16px;
}
.detail-inner p {
  font-size: 14px;
  line-height: 1.9;
}
.close-btn {
  margin-top: 20px;
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: rgba(10,14,40,0.9);
  color: #f5f7ff;
  font-size: 13px;
  cursor: pointer;
}
.close-btn:hover {
  background: rgba(40,60,120,1);
}

/* detail-5 内のボタン */
.voice-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6f8dff, #b07bff);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 16px 40px rgba(120, 150, 255, 0.9);
}
.voice-btn:hover {
  filter: brightness(1.08);
}

/* フッター */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 10px 24px;
  text-align: center;
  font-size: 11px;
  color: #9ca3c7;
  background: linear-gradient(to top, rgba(5,8,22,0.95), rgba(5,8,22,0));
  z-index: 2;
}
.footer p + p {
  margin-top: 4px;
}

/* ちょっとしたゆらぎ（タイトルとかに使うなら） */
.shimmer {
  background: linear-gradient(120deg, #ffffff, #c3d4ff, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shimmerMove 4s infinite;
}
@keyframes shimmerMove {
  0% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* スマホ対応（パネルサイズ少し調整） */
@media (max-width: 768px) {
  .panel {
    width: 150px;
    height: 100px;
  }
  .detail-inner {
    max-width: 90%;
    padding: 24px 20px;
  }
}
.panel.dragging {
  box-shadow: 0 24px 80px rgba(200,220,255,1);
  background: radial-gradient(circle, rgba(220,240,255,0.9), rgba(10,14,40,1));
}
.ripple-effect {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(180,200,255,0.8), transparent 70%);
  transform: translate(-50%, -50%);
  animation: rippleExpand 3s ease-out forwards;
  z-index: -1;
}

@keyframes rippleExpand {
  0% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(6); }
}
.light-string {
  position: fixed;
  width: 2px;
  height: 120px;
  background: linear-gradient(to bottom, rgba(200,220,255,0.8), transparent);
  filter: blur(2px);
  opacity: 0.6;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: stringFloat 5s ease-in-out forwards;
  z-index: -1;
}

@keyframes stringFloat {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scaleY(0.2); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) rotate(20deg) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scaleY(0.3); }
}
.nebula {
  position: fixed;
  inset: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/0/09/NGC_6302_Hubble_2009.full.jpg');
  background-size: cover;
  opacity: 0.08;
  mix-blend-mode: screen;
  animation: nebulaMove 60s linear infinite;
  z-index: -3;
  pointer-events: none;
}

@keyframes nebulaMove {
  0% { transform: scale(1) translate(0,0); }
  50% { transform: scale(1.2) translate(-5%, -5%); }
  100% { transform: scale(1) translate(0,0); }
}
.panel {
  position: absolute;
  backdrop-filter: blur(12px);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(200,220,255,0.4), transparent 70%);
  opacity: 0;
  filter: blur(20px);
  transition: opacity 0.4s ease;
}

.panel.moving::after {
  opacity: 1;
}
.detail-inner p {
  margin-bottom: 18px;
  text-shadow: 0 0 8px rgba(180,200,255,0.25);
}

.detail-inner h2.shimmer {
  margin-bottom: 24px;
  font-size: 26px;
  letter-spacing: 0.15em;
}
.bg-fog {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(120,150,255,0.15), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(180,200,255,0.12), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -3;
  animation: fogMove 20s ease-in-out infinite alternate;
}

@keyframes fogMove {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(-40px, 20px) scale(1.2); }
}