/*
  style.css - 星の子用ASMRルーム デザインシステム
  --------------------------------------------------
  ・スマホ（縦長画面）でも絶対に崩れないように、vw, vh, flexboxを組み合わせて設計しています。
  ・雨林の静けさと温かみを感じる、非常にリッチなアニメーションとデザインを採用しました。
*/

/* 1. 全体設定とリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* タップ時の青い選択枠を消します */
}

body {
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* スマホのアドレスバー対策の高さ設定です */
  overflow: hidden;
  background-color: #0b051a;
  font-family: 'Noto Sans JP', 'Outfit', sans-serif;
  color: #ffffff;
  user-select: none;
}

/* 2. 背景（雨林の隠れ家をイメージした深い青紫） */
#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 30%, #201335 0%, #0d061f 70%, #06020e 100%);
  z-index: 1;
}

/* 3. 交差する暖かいオレンジゴールドの光（ひかりのビーム） */
#light-beams {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.beam {
  position: absolute;
  width: 120%;
  height: 15vh;
  background: linear-gradient(90deg, rgba(255, 179, 71, 0) 0%, rgba(255, 179, 71, 0.15) 50%, rgba(255, 179, 71, 0) 100%);
  filter: blur(10px);
}

.beam-left {
  top: 15%;
  left: -20%;
  transform: rotate(25deg);
  animation: beamSweepRight 14s ease-in-out infinite alternate;
}

.beam-right {
  bottom: 25%;
  right: -20%;
  transform: rotate(-20deg);
  animation: beamSweepLeft 18s ease-in-out infinite alternate;
}

@keyframes beamSweepRight {
  0% { transform: translate(-20%, -10%) rotate(25deg) scaleY(0.8); opacity: 0.3; }
  50% { opacity: 0.8; }
  100% { transform: translate(10%, 10%) rotate(28deg) scaleY(1.2); opacity: 0.4; }
}

@keyframes beamSweepLeft {
  0% { transform: translate(20%, 10%) rotate(-20deg) scaleY(0.7); opacity: 0.2; }
  50% { opacity: 0.7; }
  100% { transform: translate(-10%, -10%) rotate(-17deg) scaleY(1.1); opacity: 0.5; }
}

/* 4. 静かに降り注ぐ雨粒（あまつぶ）のアニメーション */
#rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0.4;
}

/* 二つの雨レイヤーで奥行きとランダムさを表現します */
#rain::before,
#rain::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  background: repeat;
}

#rain::before {
  background-image: linear-gradient(105deg, transparent 0%, transparent 98%, rgba(174, 219, 255, 0.4) 98%, rgba(174, 219, 255, 0.4) 100%);
  background-size: 80px 120px;
  animation: rainAnim1 1.2s linear infinite;
}

#rain::after {
  background-image: linear-gradient(100deg, transparent 0%, transparent 99%, rgba(174, 219, 255, 0.25) 99%, rgba(174, 219, 255, 0.25) 100%);
  background-size: 50px 80px;
  animation: rainAnim2 0.8s linear infinite;
}

@keyframes rainAnim1 {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-30px, 120px, 0); }
}

@keyframes rainAnim2 {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-20px, 80px, 0); }
}

/* 5. 中央やや上側の立体ステージ */
#stage {
  position: absolute;
  top: 22%; /* 中央よりやや上側に配置 */
  left: 50%;
  transform: translateX(-50%);
  width: 85vw;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 4;
}

/* 苔むした緑色の丸い地面 */
#ground {
  width: 75vw;
  height: 25vw;
  max-width: 280px;
  max-height: 93px;
  background: radial-gradient(ellipse at 50% 30%, #3a7536 0%, #1d4d1a 50%, #0d290c 100%);
  border-radius: 50%; /* 楕円にして立体的な地面を作ります */
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.6),
    inset 0 4px 15px rgba(255, 255, 255, 0.15),
    inset 0 -4px 10px rgba(0, 0, 0, 0.8);
  position: relative;
  border: 1px solid rgba(58, 117, 54, 0.3);
}

/* 4本の薪と燃える焚き火 */
#fire {
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* 薪（まき）の表現 */
.logs {
  position: absolute;
  width: 50px;
  height: 12px;
  bottom: 0;
  z-index: 2;
}

.logs::before,
.logs::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 6px;
  background: #4a2c1b;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

.logs::before {
  transform: rotate(-15deg);
  left: -2px;
  bottom: 2px;
}

.logs::after {
  transform: rotate(15deg);
  right: -2px;
  bottom: 0px;
}

/* 炎のアニメーション */
.flame {
  position: absolute;
  bottom: 6px;
  border-radius: 50% 50% 20% 20%;
  transform-origin: bottom center;
  filter: blur(2px);
  mix-blend-mode: screen;
}

.flame-1 {
  width: 26px;
  height: 48px;
  background: linear-gradient(to top, #ff3d00, #ff9100, transparent);
  animation: flickerLarge 0.8s ease-in-out infinite alternate;
  z-index: 3;
}

.flame-2 {
  width: 18px;
  height: 38px;
  background: linear-gradient(to top, #ff9100, #ffea00, transparent);
  animation: flickerMedium 0.6s ease-in-out infinite alternate-reverse;
  z-index: 4;
}

.flame-3 {
  width: 10px;
  height: 22px;
  background: linear-gradient(to top, #ffffff, #ffea00, transparent);
  animation: flickerSmall 0.4s ease-in-out infinite alternate;
  z-index: 5;
}

@keyframes flickerLarge {
  0% { transform: scale(0.9) rotate(-2deg); }
  100% { transform: scale(1.1) rotate(2deg); }
}

@keyframes flickerMedium {
  0% { transform: scale(0.85) rotate(3deg); }
  100% { transform: scale(1.15) rotate(-3deg); }
}

@keyframes flickerSmall {
  0% { transform: scale(0.8) rotate(-1deg); }
  100% { transform: scale(1.2) rotate(1deg); }
}

/* 6. 舞い上がる12個の黄金色の「日のかけら」 */
.sun-fragments-container {
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
}

.sun-fragment {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #fffbe0 0%, #ffd700 60%, rgba(255, 215, 0, 0) 100%);
  border-radius: 50%;
  box-shadow: 0 0 10px #ffd700, 0 0 20px #ffae00;
  opacity: 0;
  animation: floatUp 5s infinite ease-out;
  animation-delay: var(--delay);
}

@keyframes floatUp {
  0% {
    transform: translate3d(var(--x), 30px, 0) scale(0.3);
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translate3d(calc(var(--x) * 1.8), -150px, 0) scale(1.2);
    opacity: 0;
    filter: blur(1px);
  }
}

/* 7. メッセージボックス（画面の中央、かつ焚き火のすぐ下） */
#message-box {
  width: 100%;
  margin-top: 15px; /* 地面（楕円）のすぐ下へ配置 */
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-radius: 16px;
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px); /* ガラスのような透き通る質感です */
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

#message-box-inner {
  padding: 16px 20px;
  text-align: center;
}

#speaker-name {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

#dialogue {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #f0f0f5;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  min-height: 48px; /* セリフが変わってもガタつかないように高さを確保します */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 8. メニューボタン（画面の右上、焚き火と重ならないセーフエリア） */
#menu-buttons {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
  max-width: 140px;
}

.menu-btn {
  background: rgba(13, 6, 31, 0.7);
  border: 2px solid #00d2ff; /* ネオンブルーの光る枠 */
  box-shadow: 
    0 0 8px rgba(0, 210, 255, 0.3),
    inset 0 0 4px rgba(0, 210, 255, 0.2);
  border-radius: 12px;
  color: #ffffff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.menu-btn:active {
  transform: scale(0.95);
  background: rgba(0, 210, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.6);
}

.btn-emoji {
  font-size: 1.1rem;
}

.btn-text {
  letter-spacing: 0.02em;
}

/* 雨音ボタンのアクティブ・非アクティブ用デザイン */
#btn-rain.muted {
  border-color: #ff5252;
  box-shadow: 0 0 8px rgba(255, 82, 82, 0.3);
}

/* 9. スマホの自動再生ブロック解除用オーバーレイ（スタート画面） */
#overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, #150c29 0%, #06020f 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999; /* 全てのものより一番上に表示します */
  transition: opacity 0.5s ease, visibility 0.5s;
}

#overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}

.overlay-content {
  text-align: center;
  padding: 30px;
}

.overlay-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  animation: pulseIcon 2s infinite ease-in-out;
}

@keyframes pulseIcon {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 15px rgba(174, 219, 255, 0.6)); }
  100% { transform: scale(1); }
}

#overlay h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

#overlay p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
}

/* 10. スマホ（縦長画面）特化のレスポンシブ微調整 */
@media (max-width: 480px) and (orientation: portrait) {
  #stage {
    top: 24%;
    width: 90vw;
  }
  
  #ground {
    width: 82vw;
    height: 27vw;
  }
  
  #message-box {
    margin-top: 20px;
  }
  
  #message-box-inner {
    padding: 14px 16px;
  }
  
  #dialogue {
    font-size: 0.9rem;
    min-height: 44px;
  }
  
  #menu-buttons {
    top: 12px;
    right: 12px;
    gap: 8px;
  }
  
  .menu-btn {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  
  /* スマホの小さな画面用にフッターの文字の大きさを少し小さくします */
  #footer {
    bottom: 10px;
  }
  .disclaimer {
    font-size: 0.65rem;
  }
}

/* タブレットやデスクトップなどの横長画面での最適化 */
@media (min-width: 768px) {
  #stage {
    top: 25%;
    max-width: 400px;
  }
  #ground {
    max-width: 360px;
    max-height: 120px;
  }
}

/* 11. フッター（但し書き）の基本デザイン ---------------- */
#footer {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 480px;
  text-align: center;
  z-index: 6;
}

.disclaimer {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45); /* 少し文字を薄くして、背景に馴染ませます */
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}