/* ═══════════════════════════════════════════════════════
   SAFE LANDING — style.css
   • Full-screen responsive layout (no black bars)
   • 400cqh scrolling game world (4x screen height)
   • Fixed sky background on viewport (natural sun & sky aspect ratio)
   • Ground layer at the bottom of the 400cqh world
   • Safe Landing title logo on Scene 1
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body {
  background: #000;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Stage — Responsive full-screen container ── */
#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  container-type: size;
  container-name: stage;
  overflow: hidden;
}

/* ── Scenes ── */
.scene {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.scene.active {
  display: flex;
}

/* ── Background layers (fixed to viewport) ── */
.scene-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.bg-start { background-image: url('assets/Pages/Scenario_Start.png'); }
.bg-game  { background-image: url('assets/Pages/Game.png'); }
.bg-end   { background-image: url('assets/Pages/End.png'); }

/* ══════════════════════════════════
   SCENE 1 — START
   ══════════════════════════════════ */
.start-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5cqh;
  width: 100%;
  height: 100%;
  padding: 2cqh 2cqw;
  pointer-events: none;
  box-sizing: border-box;
}

.title-logo {
  max-width: 54cqw;
  max-height: 52cqh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.45));
  animation: logo-float 3.5s ease-in-out infinite alternate;
}
@keyframes logo-float {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-1.2cqh); }
}

.start-btn {
  pointer-events: auto;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.start-btn .btn-img {
  max-width: 24cqw;
  max-height: 22cqh;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0.5cqw 1cqw rgba(0, 0, 0, 0.4));
  transition: transform 0.15s ease, filter 0.15s ease;
}
.start-btn:active .btn-img {
  transform: scale(0.92);
  filter: drop-shadow(0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.3)) brightness(0.95);
}

/* ── Audio toggle (all scenes) ── */
.audio-btn {
  position: absolute;
  top: 2.2cqh;
  right: 2.8cqw;
  z-index: 60;
  background: none;
  border: none;
  width: 6.5cqw;
  height: 6.5cqw;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}
.audio-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.45));
  transition: transform 0.15s ease, filter 0.15s ease;
}
.audio-btn:hover .audio-icon {
  transform: scale(1.06);
}
.audio-btn:active .audio-icon {
  transform: scale(0.92);
}
.audio-btn.muted .audio-icon {
  filter: drop-shadow(0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.45));
}

/* ══════════════════════════════════
   SCENE 2 — GAME WORLD (510cqh tall)
   ══════════════════════════════════ */
#game-world {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 510cqh;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 5;
}

/* Ground layer at the bottom of the 510cqh world (background landscape scenery) */
.ground-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100cqh;
  background: url('assets/Pages/Land-Game.png') no-repeat bottom center;
  background-size: 100% 100%;
  z-index: 8;
  pointer-events: none;
}

/* ── Hero / Character ── */
.hero {
  position: absolute;
  z-index: 30;
  width: 14cqw;
  height: 14cqw;
  pointer-events: none;
  transition: left 0.6s cubic-bezier(0.25, 1, 0.5, 1),
              top  0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Tumble / floating idle */
.hero.tumbling {
  animation: hero-tumble 1.8s ease-in-out infinite;
}
@keyframes hero-tumble {
  0%   { transform: rotate(-5deg) translateY(0); }
  50%  { transform: rotate(5deg) translateY(-1cqh); }
  100% { transform: rotate(-5deg) translateY(0); }
}

/* Safe landing bounce */
.hero.bouncing {
  animation: hero-bounce 0.55s ease;
}
@keyframes hero-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18, 0.85); }
  65%  { transform: scale(0.92, 1.1); }
  100% { transform: scale(1); }
}

/* Falling through gust */
.hero.falling-through {
  animation: hero-fallthrough 0.45s ease-out;
}
@keyframes hero-fallthrough {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.7, 1.25); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Hazard bounce recoil */
.hero.bounce-off {
  animation: hero-recoil 0.45s ease-out;
}
@keyframes hero-recoil {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-3cqw, -2cqh) rotate(-15deg); }
  60%  { transform: translate(2cqw, 1cqh) rotate(10deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ── Clouds ── */
.cloud {
  position: absolute;
  z-index: 20;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.4s ease;
}
.cloud img {
  width: 100%;
  height: auto;
  display: block;
}

/* Cloud drift classes (managed dynamically via JS physics loop with collision repulsion) */
.cloud.drift-slow { }
.cloud.drift-fast { }
.cloud.drift-none { }

/* Heaven cloud soft divine glow */
.cloud.type-heaven {
  filter: drop-shadow(0 0 2.5cqw rgba(255, 240, 180, 0.8));
}

/* Beacon cloud soft glow */
.cloud.type-beacon {
  filter: drop-shadow(0 0 2cqw rgba(255, 215, 60, 0.7));
}

/* Blessing cloud glow on landing */
.cloud.blessing-glow {
  filter: drop-shadow(0 0 3cqw rgba(255, 200, 40, 0.9));
}

/* Storm spark flash */
.cloud.spark-flash {
  animation: storm-flash 0.45s ease;
}
@keyframes storm-flash {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(2.5) saturate(2); }
  100% { filter: brightness(1); }
}

/* ── Rain particles for Drizzle cloud ── */
.rain-particles {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8cqh;
  overflow: hidden;
  pointer-events: none;
  z-index: 11;
}
.rain-drop {
  position: absolute;
  width: 0.3cqw;
  background: rgba(130, 190, 255, 0.8);
  border-radius: 0 0 0.2cqw 0.2cqw;
  animation: rain-fall 0.6s linear forwards;
}
@keyframes rain-fall {
  from { top: 0; height: 0; opacity: 1; }
  to   { top: 8cqh; height: 2.5cqh; opacity: 0; }
}

/* ══════════════════════════════════════════════════
   FULL-SCREEN ATMOSPHERIC CLOUD CONTACT EFFECTS
   ══════════════════════════════════════════════════ */
.atmospheric-overlay {
  position: absolute;
  inset: 0;
  z-index: 45; /* Above Game World (5) & Hero (30), below Pill Banner (80) & Audio (60) */
  pointer-events: none;
  overflow: hidden;
}

.atmo-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

/* ── 0. Standard — Soft white sparkle puff (~0.8–1.0s) ── */
.atmo-fx.fx-standard {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, rgba(240, 248, 255, 0.08) 50%, transparent 75%);
  animation: atmo-fade-standard 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes atmo-fade-standard {
  0%   { opacity: 0; transform: scale(0.94); }
  25%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.03); }
}

.atmo-white-puff {
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.4cqw;
  filter: drop-shadow(0 0 0.5cqw rgba(255, 255, 255, 0.85));
  animation: atmo-float-puff 0.85s ease-out forwards;
  pointer-events: none;
  user-select: none;
}
@keyframes atmo-float-puff {
  0%   { opacity: 0; transform: translateY(0) scale(0.4); }
  35%  { opacity: 0.9; transform: translateY(-1.2cqh) scale(1.05); }
  100% { opacity: 0; transform: translateY(-3cqh) scale(0.65); }
}

/* ── 1. Blessing (Golden) — Soft golden sparkle bloom (~1.2s) ── */
.atmo-fx.fx-blessing {
  background: radial-gradient(circle at 50% 45%, rgba(255, 220, 90, 0.38) 0%, rgba(255, 190, 50, 0.2) 45%, rgba(255, 160, 30, 0) 75%);
  animation: atmo-fade-blessing 1.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes atmo-fade-blessing {
  0%   { opacity: 0; transform: scale(0.96); }
  25%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.02); }
}

.atmo-sparkle {
  position: absolute;
  color: #fff4a3;
  font-size: 1.6cqw;
  filter: drop-shadow(0 0 0.8cqw rgba(255, 215, 60, 0.9));
  animation: atmo-float-sparkle 1.2s ease-out forwards;
  pointer-events: none;
  user-select: none;
}
@keyframes atmo-float-sparkle {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  30%  { opacity: 1; transform: translateY(-1.5cqh) scale(1.1); }
  100% { opacity: 0; transform: translateY(-4cqh) scale(0.7); }
}

/* ── 2. Drizzle (Rain) — Light rain particles falling across full screen (~1.6s) ── */
.atmo-fx.fx-drizzle {
  background: linear-gradient(180deg, rgba(160, 210, 255, 0.12) 0%, rgba(130, 185, 240, 0.16) 100%);
  animation: atmo-fade-drizzle 1.7s ease forwards;
}
@keyframes atmo-fade-drizzle {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 0.9; }
  100% { opacity: 0; }
}

.atmo-rain-drop {
  position: absolute;
  width: 0.24cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(135, 195, 255, 0.65));
  border-radius: 0 0 0.15cqw 0.15cqw;
  animation: atmo-rain-fall 0.75s linear infinite;
  pointer-events: none;
}
@keyframes atmo-rain-fall {
  0%   { transform: translateY(-10cqh); height: 2cqh; opacity: 0; }
  20%  { opacity: 0.75; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(105cqh); height: 3.5cqh; opacity: 0; }
}

/* ── 3. Gust (Light/Wind) — Soft wind streak lines sweeping across screen (~1.0s) ── */
.atmo-fx.fx-gust {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  animation: atmo-fade-gust 1.0s ease-out forwards;
}
@keyframes atmo-fade-gust {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  70%  { opacity: 0.7; }
  100% { opacity: 0; }
}

.atmo-wind-streak {
  position: absolute;
  height: 0.45cqh;
  border-radius: 0.45cqh;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), rgba(190, 235, 255, 0.65), transparent);
  animation: atmo-wind-sweep 0.9s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  pointer-events: none;
}
@keyframes atmo-wind-sweep {
  0%   { transform: translateX(-120%) scaleY(0.7); opacity: 0; }
  25%  { opacity: 0.85; }
  75%  { opacity: 0.65; }
  100% { transform: translateX(120vw) scaleY(1.1); opacity: 0; }
}

/* ── 4. Hazard (Heavy) — Dark dust cloud burst (~1.5–2.0s) ── */
.atmo-fx.fx-hazard {
  background: radial-gradient(circle at 50% 50%, rgba(35, 38, 48, 0.36) 0%, rgba(22, 24, 32, 0.24) 55%, transparent 80%);
  animation: atmo-fade-hazard 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes atmo-fade-hazard {
  0%   { opacity: 0; transform: scale(0.92); }
  20%  { opacity: 1; transform: scale(1); }
  65%  { opacity: 0.75; }
  100% { opacity: 0; transform: scale(1.06); }
}

.atmo-dust-puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 48, 58, 0.45) 0%, rgba(25, 28, 36, 0.25) 60%, transparent 80%);
  animation: atmo-dust-expand 1.4s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  pointer-events: none;
}
@keyframes atmo-dust-expand {
  0%   { opacity: 0; transform: scale(0.3); }
  25%  { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.9) translateY(-2cqh); }
}

/* ── 5. Storm (Sparkle) — Rain particles + soft blue-grey tint wash (~1.6s) ── */
.atmo-fx.fx-storm {
  background: linear-gradient(180deg, rgba(75, 95, 125, 0.26) 0%, rgba(55, 75, 100, 0.3) 100%);
  animation: atmo-fade-storm 1.7s ease forwards;
}
@keyframes atmo-fade-storm {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ── 6. Beacon (Sunburst) — Warm bright light bloom (~1.4s) ── */
.atmo-fx.fx-beacon {
  background: radial-gradient(circle at 50% 50%, rgba(255, 245, 190, 0.5) 0%, rgba(255, 215, 110, 0.3) 45%, rgba(255, 180, 60, 0.1) 75%, transparent 100%);
  animation: atmo-fade-beacon 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes atmo-fade-beacon {
  0%   { opacity: 0; transform: scale(0.94); }
  30%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 0.85; }
  100% { opacity: 0; transform: scale(1.03); }
}

/* ══════════════════════════════════════════════════
   CLOUD CONTACT CONTEXTUAL PILL BANNER
   ══════════════════════════════════════════════════ */
.cloud-message {
  position: absolute;
  left: 50%;
  top: 8cqh;
  transform: translateX(-50%) scale(0.9);
  padding: 1.2cqh 3cqw;
  max-width: 70cqw;

  background: linear-gradient(180deg, #fdf3df 0%, #f0dcae 100%);
  border: 2px solid #f5a94e;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px #e07a3f inset,
    0 4px 0 rgba(150, 90, 30, 0.35),
    0 8px 16px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(245, 169, 78, 0.5);

  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2.2cqw, 22px);
  color: #6b3f1d;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);

  opacity: 0;
  pointer-events: none;
  z-index: 80;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.cloud-message.visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* ══════════════════════════════════
   SCENE 3 — END
   ══════════════════════════════════ */
.congrats-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: min(52cqw, 52cqh * (1677 / 938));
  max-width: 52cqw;
  max-height: 52cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: congrats-enter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.congrats-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.8cqw 1.8cqw rgba(0, 0, 0, 0.45));
}
@keyframes congrats-enter {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  70%  { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ══════════════════════════════════════════════════
   PRE-GAME INSTRUCTIONS MODAL
   ══════════════════════════════════════════════════ */
.instructions-modal {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 10, 25, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}

.instructions-modal.hidden {
  display: none !important;
}

.instructions-card {
  position: relative;
  width: min(86cqw, 90vw, 620px);
  max-height: 94cqh;
  max-height: 94vh;
  padding: 1.8cqh 2.8cqw;
  box-sizing: border-box;

  background: linear-gradient(180deg, #fdf4e2 0%, #f5e4bd 100%);
  border: 3px solid #f5a94e;
  border-radius: min(3cqw, 24px);
  box-shadow:
    0 0 0 1.5px #e07a3f inset,
    0 6px 0 rgba(150, 90, 30, 0.35),
    0 14px 32px rgba(0, 0, 0, 0.45),
    0 0 25px rgba(245, 169, 78, 0.4);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8cqh;
  animation: modal-pop 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes modal-pop {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.instructions-title {
  margin: 0;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 2.6cqw, 28px);
  color: #6b3f1d;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  text-align: center;
}

.instructions-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45cqh;
  box-sizing: border-box;
}

.instruction-row {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  padding: 0.4cqh 1.2cqw;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(224, 122, 63, 0.25);
  border-radius: min(1.2cqw, 10px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.instruction-icon-wrap {
  width: 6cqw;
  min-width: 32px;
  height: 4.2cqh;
  min-height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instruction-icon {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.2cqw 0.5cqw rgba(0, 0, 0, 0.25));
}

.instruction-text {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.7cqw, 18px);
  line-height: 1.2;
  color: #5d3314;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  flex: 1;
}

.popup-btn {
  margin-top: 0.4cqh;
  background: linear-gradient(180deg, #ffbe44 0%, #f38218 50%, #d85700 100%);
  border: 2.5px solid #ffe992;
  border-radius: 999px;
  padding: 0.8cqh 4.2cqw;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(14px, 2.1cqw, 22px);
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(90, 30, 0, 0.7), 0 0 6px rgba(255, 230, 120, 0.6);
  box-shadow:
    0 0 0 1.5px #9e3600,
    0 4px 0 #8b2c00,
    0 6px 16px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(255, 170, 40, 0.5);
  cursor: pointer;
  outline: none;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.popup-btn:hover {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.popup-btn:active {
  transform: scale(0.94) translateY(2px);
  box-shadow:
    0 0 0 1.5px #9e3600,
    0 2px 0 #8b2c00,
    0 3px 8px rgba(0, 0, 0, 0.35);
}

/* ── White Flash transition ── */
#transition-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
#transition-overlay.flash {
  opacity: 1;
}