@charset "UTF-8";

/* =========================================
   Global Settings
   ========================================= */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #050511;
  font-family: "Shippori Mincho B1", "Hiragino Kaku Gothic ProN", serif;
  overflow: hidden;
  color: white;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* 戻るボタンの共通スタイル */
.back-btn {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 30px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  font-size: 1rem;
  border-radius: 30px;
  transition: all 0.3s ease;
  z-index: 100; /* 常に最前面 */
}
.back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: white;
}

/* =========================================
   Scene Transition System
   ========================================= */
.scene-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s ease, visibility 1.5s ease;
  z-index: 1;
}

.scene-section.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

/* =========================================
   Scene 1: Study (Intro)
   ========================================= */
.scene {
  position: relative;
  width: 100%;
  height: 100vh;
}
.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
  opacity: 1;
  transition: opacity 2s ease-in-out;
}
.layer1 { opacity: 1; z-index: 1; }
.layer2 { opacity: 0; z-index: 2; }
.layer3 { opacity: 0; z-index: 3; }

.envelope {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  transform: translate(-50%, -50%) scale(1);
  cursor: pointer;
  transition: transform 0.4s ease;
  z-index: 4;
}
.envelope:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.light-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.message {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.3rem;
  text-align: center;
  line-height: 2;
  opacity: 0;
  z-index: 6;
  text-shadow: 0 0 10px rgba(180, 150, 255, 0.6);
  pointer-events: none; /* クリックを邪魔しない */
}

.explore-ui {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.explore-ui h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.explore-btn {
  padding: 15px 40px;
  font-size: 1.2rem;
  background: linear-gradient(135deg, #663399, #333366);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  box-shadow: 0 0 15px rgba(100,50,200,0.5);
  transition: transform 0.2s;
}
.explore-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #7a42b8, #444488);
}

/* =========================================
   Scene 2: City
   ========================================= */
.city-scene { position: relative; width: 100%; height: 100vh; }
.city-bg { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.fog {
  position: absolute;
  top: 0; left: 0; width: 120%; height: 120%;
  background: radial-gradient(circle, rgba(200,200,255,0.05), rgba(0,0,0,0.9));
  animation: fogMove 40s infinite alternate ease-in-out;
  pointer-events: none;
}
@keyframes fogMove {
  0% { transform: translate(0,0); }
  100% { transform: translate(-60px, -40px); }
}
.city-message {
  position: absolute;
  top: 15%; left: 50%;
  transform: translateX(-50%);
  color: white; text-align: center; font-size: 1.6rem;
  text-shadow: 0 0 10px rgba(200,180,255,0.7);
  z-index: 5;
}
.spot {
  position: absolute;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 20;
}
.spot:hover {
  transform: scale(1.2);
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
}
/* スポット位置調整 */
#spot-bar { top: 60%; left: 20%; }
#spot-library { top: 40%; left: 45%; }
#spot-overlook { top: 20%; left: 70%; }
#spot-garden { top: 70%; left: 75%; }
#spot-arcade { top: 50%; left: 10%; }

/* =========================================
   Other Scenes (Common Styles)
   ========================================= */
.bar-scene, .library-scene, .overlook-scene, .garden-scene, .arcade-scene {
  position: relative; width: 100%; height: 100vh;
}
/* 背景共通 */
.bar-bg, .library-bg, .overlook-bg, .garden-bg, .arcade-bg {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter 3s ease-in-out;
}
/* メッセージ共通 */
.bar-message, .library-message, .overlook-message, .garden-message, .arcade-message {
  position: absolute;
  text-align: center;
  z-index: 5;
  opacity: 1; /* JSで制御するため初期値は1でもOKだが、遷移アニメーション用にJSで0にする */
}

/* 個別調整 */
.bar-bg { filter: brightness(0.5); }
.bar-message { bottom: 20%; left: 50%; transform: translateX(-50%); color: rgba(255, 240, 230, 0.9); }
.light-glow {
  position: absolute; width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255,220,180,0.05), rgba(0,0,0,0.8));
  animation: glow 8s infinite alternate; pointer-events: none;
}

.library-bg { filter: brightness(0.4); }
.library-message { top: 20%; right: 15%; color: rgba(240, 240, 255, 0.9); }
.dust-layer {
  position: absolute; width: 100%; height: 100%; opacity: 0.2;
  background: url('assets/dust_particles.png') repeat; /* 画像がない場合は無視されます */
  animation: dustMove 60s linear infinite; pointer-events: none;
}
@keyframes dustMove { 0% { background-position: 0 0; } 100% { background-position: 100% 100%; } }

.overlook-bg { filter: brightness(0.5); }
.overlook-message { top: 30%; left: 50%; transform: translateX(-50%); color: white; }
.stars {
  position: absolute; width: 100%; height: 100%; pointer-events: none;
}
.stars::before {
  content: ""; position: absolute; width: 2px; height: 2px; background: white; border-radius: 50%;
  box-shadow: 50px 80px white, 400px 300px white, 800px 100px white;
  animation: twinkle 5s infinite alternate;
}
@keyframes twinkle { 0% { opacity: 0.5; } 100% { opacity: 1; } }

.garden-bg { filter: brightness(0.5); }
.garden-message { bottom: 25%; right: 10%; color: #e0ffd0; }
.fireflies::before {
  content: ""; position: absolute; width: 4px; height: 4px;
  background: radial-gradient(circle, rgba(255,255,180,1), transparent);
  border-radius: 50%; animation: firefly 8s infinite;
}
@keyframes firefly { 0% { opacity: 0; transform: translate(0,0); } 50% { opacity: 1; transform: translate(20px, -20px); } }

.arcade-bg { filter: brightness(0.6); }
.arcade-message { top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffccff; }
.neon-lights {
  position: absolute; width: 100%; height: 100%;
  background: radial-gradient(circle at 30% 50%, rgba(255,0,255,0.2), transparent 70%);
  mix-blend-mode: screen; animation: neonPulse 5s infinite alternate; pointer-events: none;
}
@keyframes neonPulse { 0% { opacity: 0.4; } 100% { opacity: 0.8; } }