/* ============================================================
   VARIABLES & RESET
   ============================================================ */
:root {
  --gold: #f5c842;
  --rose: #ff6b8a;
  --violet: #7c3aed;
  --sky1: #0d0221;
  --sky2: #1a0533;
  --sky3: #6b1a4a;
  --sky4: #d4521e;
  --sky5: #f5923e;
  --sky6: #ffd085;
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.15);
  --text: #fff5e4;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Cormorant Garamond',serif;color:var(--text);}

/* ============================================================
   SKY SCENE – FONDO REALISTA
   ============================================================ */
.sky-scene{
  position:fixed;inset:0;z-index:0;
  background: linear-gradient(to bottom,
    #0d0221 0%, #1a0533 12%, #3d1060 22%,
    #6b1a4a 32%, #b03060 40%, #d4521e 50%,
    #f5923e 60%, #ffd085 70%, #ffe8b0 78%,
    #c8a060 85%, #7a5030 92%, #2a1a10 100%);
  overflow:hidden;
}

#skyCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* Sol */
.sun-glow{
  position:absolute;bottom:28%;left:50%;transform:translateX(-50%);
  width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle, #fff8d0 0%, #ffe569 30%, #ffaa20 60%, transparent 100%);
  box-shadow:0 0 60px 30px rgba(255,200,60,0.6),0 0 120px 70px rgba(255,140,30,0.35),0 0 200px 120px rgba(255,80,10,0.2);
  animation:sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.06);}}

.horizon-glow{
  position:absolute;bottom:25%;left:0;right:0;height:180px;
  background:radial-gradient(ellipse 80% 100% at 50% 100%,rgba(255,160,40,0.55) 0%,transparent 70%);
  pointer-events:none;
}

/* Nubes */
.cloud{
  position:absolute;border-radius:50px;
  background:linear-gradient(135deg,rgba(255,220,160,0.55),rgba(255,150,80,0.35));
  filter:blur(14px);animation:cloudDrift linear infinite;
}
.c1{width:280px;height:60px;top:18%;left:-10%;opacity:.7;animation-duration:40s;}
.c2{width:420px;height:80px;top:12%;left:20%;opacity:.55;animation-duration:55s;animation-delay:-20s;}
.c3{width:200px;height:45px;top:24%;right:-5%;opacity:.65;animation-duration:45s;animation-delay:-10s;}
.c4{width:340px;height:55px;top:8%;left:55%;opacity:.45;animation-duration:60s;animation-delay:-30s;}
@keyframes cloudDrift{from{transform:translateX(0);}to{transform:translateX(110vw);}}

/* Aves */
.birds-layer{position:absolute;inset:0;pointer-events:none;}
.bird{
  position:absolute;
  width:24px;height:8px;
  border-top:2.5px solid rgba(20,5,30,0.8);
  border-radius:50% 50% 0 0;
  border-left:2px solid transparent;
  border-right:2px solid transparent;
  animation:birdFly linear infinite;
}
.bird::before{
  content:'';position:absolute;
  right:-12px;top:-2.5px;
  width:12px;height:8px;
  border-top:2.5px solid rgba(20,5,30,0.8);
  border-radius:50% 50% 0 0;
  animation:wingFlap 0.4s ease-in-out infinite alternate;
}
@keyframes birdFly{from{transform:translateX(-80px);}to{transform:translateX(110vw);}}
@keyframes wingFlap{from{transform:rotate(-10deg);}to{transform:rotate(15deg);}}

/* Árboles */
.trees-layer{
  position:absolute;bottom:0;left:0;right:0;
  height:300px;pointer-events:none;
}
.treeline{width:100%;height:100%;}

/* Agua */
.water-layer{
  position:absolute;bottom:0;left:0;right:0;height:22%;
  background:linear-gradient(to bottom,rgba(200,120,40,0.3),rgba(30,10,50,0.85));
  overflow:hidden;
}
.water-shimmer{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(255,200,80,0.07) 2px,
    transparent 4px,
    transparent 14px
  );
  animation:shimmerMove 3s linear infinite;
}
@keyframes shimmerMove{from{background-position:0 0;}to{background-position:60px 0;}}

/* Partículas */
#particles{position:absolute;inset:0;pointer-events:none;}
.particle{
  position:absolute;border-radius:50%;
  background:rgba(255,220,100,0.8);
  animation:particleFade ease-in-out infinite;
}
@keyframes particleFade{
  0%{opacity:0;transform:translateY(0) scale(0);}
  50%{opacity:1;}
  100%{opacity:0;transform:translateY(-60px) scale(1.5);}
}

/* ============================================================
   SCREENS
   ============================================================ */
.screen{
  position:fixed;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.hidden{display:none!important;}

/* ============================================================
   GLASS CARD
   ============================================================ */
.glass-card{
  background:rgba(10,3,25,0.55);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:24px;
  padding:44px 40px;
  max-width:520px;width:100%;
  box-shadow:0 8px 60px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.12);
  position:relative;overflow:hidden;
  animation:cardIn .7s cubic-bezier(.34,1.56,.64,1) both;
}
.glass-card::before{
  content:'';position:absolute;inset:0;border-radius:24px;
  background:linear-gradient(135deg,rgba(255,200,80,0.06) 0%,transparent 60%);
  pointer-events:none;
}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) scale(.95);}to{opacity:1;transform:none;}}

/* ============================================================
   PANTALLA CONTRASEÑA
   ============================================================ */
.lock-icon{font-size:3rem;text-align:center;margin-bottom:10px;animation:bounce 2s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.pw-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,6vw,3.2rem);
  text-align:center;line-height:1.1;
  background:linear-gradient(135deg,#ffd085,#ff9a50,#ff6b8a);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:10px;
}
.pw-title em{font-style:italic;}

.pw-subtitle{
  text-align:center;font-size:1.05rem;opacity:.8;margin-bottom:28px;line-height:1.5;
}
.heart-beat{display:inline-block;animation:heartBeat 1.2s ease-in-out infinite;}
@keyframes heartBeat{0%,100%{transform:scale(1);}14%{transform:scale(1.3);}28%{transform:scale(1);}42%{transform:scale(1.2);}70%{transform:scale(1);}}

.input-wrap{display:flex;gap:10px;flex-wrap:wrap;}
.input-wrap input{
  flex:1;min-width:0;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;padding:14px 18px;
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:#fff;
  outline:none;transition:border .3s,box-shadow .3s;
}
.input-wrap input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,200,66,.2);}
.input-wrap input::placeholder{opacity:.5;}
.input-wrap button{
  background:linear-gradient(135deg,#f5c842,#ff9a50);
  border:none;border-radius:12px;padding:14px 22px;
  font-family:'Dancing Script',cursive;font-size:1.1rem;
  color:#1a0a00;font-weight:700;cursor:pointer;
  transition:transform .2s,box-shadow .2s;
  white-space:nowrap;
}
.input-wrap button:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(245,200,66,.4);}

.pw-hint{text-align:center;margin-top:14px;font-size:.95rem;color:#ff6b8a;min-height:1.2em;transition:all .3s;}

/* ============================================================
   PANTALLA BIENVENIDA
   ============================================================ */
.welcome-card{text-align:center;}
.welcome-from{font-size:1rem;opacity:.7;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;}
.welcome-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.2;
  background:linear-gradient(135deg,#ffd085,#ff6b8a,#c084fc);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:16px;
}
.welcome-title em{font-style:italic;}
.welcome-title small{font-size:.55em;opacity:.75;-webkit-text-fill-color:rgba(255,255,255,.65);color:rgba(255,255,255,.65);display:block;margin-top:4px;}
.welcome-sub{font-size:1.05rem;opacity:.75;margin-bottom:28px;line-height:1.5;}

/* Estrellas burst */
.stars-burst{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px;}
.star-p{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--gold);animation:starBurst 1.5s ease-out both;
}
@keyframes starBurst{
  0%{opacity:1;transform:translate(0,0) scale(1);}
  100%{opacity:0;transform:var(--tx,translate(60px,-60px)) scale(0);}
}

/* ============================================================
   BOTÓN PRINCIPAL
   ============================================================ */
.btn-main{
  display:inline-block;
  background:linear-gradient(135deg,#f5c842 0%,#ff9a50 50%,#ff6b8a 100%);
  border:none;border-radius:14px;padding:16px 36px;
  font-family:'Dancing Script',cursive;font-size:1.25rem;
  color:#1a0a00;font-weight:700;cursor:pointer;
  box-shadow:0 6px 30px rgba(245,155,66,.4);
  transition:transform .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.btn-main::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  border-radius:14px;
}
.btn-main:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 40px rgba(245,155,66,.55);}
.btn-main:active{transform:scale(.97);}

/* ============================================================
   JUEGO / PREGUNTAS
   ============================================================ */
.game-container{width:100%;max-width:540px;position:relative;}

.progress-bar-wrap{
  width:100%;height:6px;background:rgba(255,255,255,.12);
  border-radius:10px;margin-bottom:22px;overflow:hidden;
  position:relative;
}
.progress-bar{
  height:100%;border-radius:10px;
  background:linear-gradient(90deg,#f5c842,#ff6b8a);
  transition:width .6s cubic-bezier(.34,1.56,.64,1);
  width:0%;
}
.progress-label{
  position:absolute;right:0;top:-20px;
  font-size:.8rem;opacity:.6;
}

.question-card{padding:36px 32px;}

.q-number{
  font-family:'Playfair Display',serif;font-size:5rem;
  line-height:1;opacity:.1;position:absolute;top:16px;right:24px;
  color:#fff;pointer-events:none;
}
.q-text{
  font-family:'Playfair Display',serif;font-size:clamp(1.2rem,3.5vw,1.6rem);
  line-height:1.4;margin-bottom:28px;
  background:linear-gradient(135deg,#ffe8b0,#ffb570);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.q-options{display:flex;flex-direction:column;gap:12px;}
.q-option{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:14px 20px;
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;
  cursor:pointer;transition:all .25s;text-align:left;color:#fff;
}
.q-option:hover{background:rgba(245,200,66,.12);border-color:rgba(245,200,66,.4);transform:translateX(6px);}
.q-option.selected{
  background:linear-gradient(135deg,rgba(245,200,66,.22),rgba(255,100,130,.15));
  border-color:var(--gold);
  box-shadow:0 0 20px rgba(245,200,66,.2);
}

.q-textarea{
  width:100%;min-height:100px;resize:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:14px 18px;
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:#fff;
  outline:none;transition:border .3s;margin-bottom:16px;
}
.q-textarea:focus{border-color:var(--gold);}
.q-textarea::placeholder{opacity:.45;}

/* ============================================================
   ANIMACIÓN OVERLAY
   ============================================================ */
.anim-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(5,0,15,.75);backdrop-filter:blur(10px);
  animation:fadeIn .4s ease both;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
#animCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.anim-msg{
  position:relative;z-index:2;text-align:center;
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,4vw,2.6rem);
  line-height:1.3;
  background:linear-gradient(135deg,#ffd085,#ff9a50,#ff6b8a,#c084fc);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:msgPop .6s cubic-bezier(.34,1.56,.64,1) both;
  padding:0 20px;max-width:500px;
}
@keyframes msgPop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}

/* ============================================================
   PANTALLA FINAL
   ============================================================ */
.final-card{text-align:center;}
.final-emoji{font-size:4rem;margin-bottom:12px;animation:heartBeat 1.2s ease-in-out infinite;}
.final-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,5vw,2.6rem);
  background:linear-gradient(135deg,#ffd085,#ff6b8a);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:10px;
}
.final-sub{font-size:1.05rem;opacity:.75;margin-bottom:24px;line-height:1.5;}

.final-summary{
  background:rgba(255,255,255,.05);border-radius:14px;
  padding:18px 20px;margin-bottom:24px;
  text-align:left;max-height:200px;overflow-y:auto;
  border:1px solid rgba(255,255,255,.1);
}
.final-summary::-webkit-scrollbar{width:4px;}
.final-summary::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px;}
.summary-item{margin-bottom:14px;font-size:.95rem;line-height:1.4;}
.summary-item strong{color:var(--gold);font-family:'Playfair Display',serif;}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media(max-width:480px){
  .glass-card{padding:32px 24px;}
  .question-card{padding:28px 20px;}
  .btn-main{padding:14px 28px;}
}