/* ====================================================
   魔法の温室（Greenhouse）専用スタイル
   ==================================================== */

/* 温室の背景設定 */
#greenhouse-overlay {
  background-color: #0a0a0f;
  background-image: url('images/温室.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.greenhouse-container {
  /* 背景がうるさいため、薄く黒いモヤ（オーバーレイ）をかけて背景を沈ませる */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  height: 100vh; /* 全画面 */
  display: flex;
  flex-direction: column;
}

.greenhouse-content {
  flex: 1;
  position: relative; /* 内部の絶対配置の基準 */
}

.greenhouse-plant-area {
  position: absolute;
  /* ユーザーの指示により40vhで固定 */
  bottom: 40vh; 
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end; /* 下端（鉢の底）に揃える */
  justify-content: center;
  pointer-events: none; /* クリックの邪魔にならないように */
}

.greenhouse-plant-img {
  max-width: 100%;
  max-height: 200px; /* ★画像を小さくして風景に馴染ませる */
  object-fit: contain;
  object-position: bottom; /* 下部基準で縮小拡大する */
  transition: opacity 1.5s ease-in-out, filter 1.5s ease-in-out, transform 1.5s ease-in-out;
  pointer-events: auto; /* 画像自体は触れるようにする */
  animation: plant-breathe 6s infinite ease-in-out;
}

@keyframes plant-breathe {
  0% {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 15px rgba(139, 115, 85, 0.1));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 25px rgba(160, 120, 200, 0.35));
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 15px rgba(139, 115, 85, 0.1));
  }
}

.greenhouse-plant-img.changing {
  opacity: 0;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)) blur(4px);
  transform: scale(0.95);
}

/* 段階ごとの個別微調整クラス（必要に応じて調整） */
.stage-1 { transform: scale(1.0); }
.stage-2 { transform: scale(1.0); }
.stage-3 { transform: scale(1.0); }
.stage-4 { transform: scale(1.0); }
.stage-5 { transform: scale(1.0); }
.stage-6 { transform: scale(1.0); }

/* --- 画面下部のコントロール（ゲージとボタン） --- */
.greenhouse-controls-wrapper {
  position: absolute;
  bottom: 40px;
  left: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 魔力ゲージ（雫） */
.greenhouse-gauge-container {
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(139, 115, 85, 0.4);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.greenhouse-gauge-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  color: #ffffff; /* 文字が見えやすいように白に変更 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 8px;
}

.greenhouse-gauge-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}

.greenhouse-gauge-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a6fa5, #7ebdf5);
  box-shadow: 0 0 10px rgba(126, 189, 245, 0.6);
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アクションボタン */
.greenhouse-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.greenhouse-water-btn {
  width: 100%;
  padding: 14px;
  font-size: 1.05em;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, rgba(20, 40, 60, 0.9), rgba(40, 70, 100, 0.9));
  border: 1px solid rgba(126, 189, 245, 0.5);
  color: #ffffff !important; /* 絶対に白にする */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
}

.greenhouse-water-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30, 60, 90, 0.9), rgba(50, 90, 130, 0.9));
  border-color: #7ebdf5;
  box-shadow: 0 0 15px rgba(126, 189, 245, 0.3);
}

.greenhouse-water-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(30, 30, 40, 0.5);
  border-color: rgba(100, 100, 100, 0.2);
  color: var(--text-dim);
}

/* ====================================================
   温室内のパーティクル演出（キラキラ・常時光）
   ==================================================== */

/* 成長時のキラキラバースト */
.growth-sparkle {
  position: absolute;
  background: radial-gradient(circle, #fff 20%, #ffd700 60%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: sparkle-burst 1.5s ease-out forwards;
  box-shadow: 0 0 8px #ffd700;
  z-index: 10;
}

@keyframes sparkle-burst {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--tx, 0) * 1px), calc(var(--ty, -50) * 1px)) scale(1.5);
    opacity: 0;
  }
}

/* 温室内に常時舞う光の粒（style.cssの.particleを温室用に調整） */
.greenhouse-particle {
  z-index: 1 !important; /* 背景より手前、植物より後ろ（または周り）に配置 */
}

/* アグアメンティ（水やり）時の霧雨演出 */
.mist-particle {
  position: absolute;
  background: radial-gradient(circle, #fff 10%, #7ebdf5 60%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: mist-fall 1.2s ease-in forwards;
  box-shadow: 0 0 8px rgba(126, 189, 245, 0.8);
  z-index: 15; /* 植物より手前に降らせる */
}

@keyframes mist-fall {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(180px) translateX(calc( (var(--drift) - 0.5) * 40px )); 
    opacity: 0;
  }
}