:root{
  --ivory:#f4f0e6;
  --gold:#caae72;
  --gold2:#8f6d37;
  --cyan:#b9efff;
  --black:#020504;
  --card:rgba(5,10,9,.82);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--black);color:var(--ivory)}
body{font-family:Georgia,"Times New Roman",serif;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
.app,.view{position:relative;width:100%;height:100svh;min-height:600px}
.view{display:none;overflow:hidden}
.view.is-active{display:flex}
#stars{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.2;background-image:
radial-gradient(circle,#fff 0 1px,transparent 1.4px),
radial-gradient(circle,#b9efff 0 1px,transparent 1.5px);
background-size:89px 89px,137px 137px;background-position:12px 18px,49px 67px}

#welcomeView{align-items:center;justify-content:center;padding:calc(22px + var(--safe-top)) 20px calc(46px + var(--safe-bottom));background:
linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.9)),
radial-gradient(circle at 50% 18%,rgba(72,110,93,.34),transparent 34%),
linear-gradient(130deg,#0a1511,#020504 64%)}
.forest-haze{position:absolute;inset:-30%;background:
radial-gradient(ellipse at 35% 50%,rgba(220,239,229,.08),transparent 38%),
radial-gradient(ellipse at 70% 42%,rgba(176,220,211,.06),transparent 32%);
filter:blur(28px);animation:haze 10s ease-in-out infinite alternate}
.glass-card{position:relative;z-index:2;width:min(92vw,520px);border:1px solid rgba(202,174,114,.5);border-radius:26px;background:
linear-gradient(160deg,rgba(13,21,18,.88),rgba(1,4,3,.94));box-shadow:
0 28px 90px rgba(0,0,0,.64),inset 0 0 45px rgba(202,174,114,.055);
backdrop-filter:blur(16px)}
.welcome-card{padding:28px 24px 24px;text-align:center}
.brand-logo{display:block;width:min(48vw,220px);height:auto;margin:0 auto 10px;filter:drop-shadow(0 0 14px rgba(255,255,255,.1))}
.date-line,.kicker,.room-label{text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-size:.7rem}
h1{margin:.45em 0 .3em;font-weight:400;font-size:clamp(1.8rem,7vw,3.35rem);line-height:1.13}
h1 strong{display:inline-block;color:#fff;font-weight:400;margin-top:.1em}
.lead{max-width:38ch;margin:0 auto 25px;color:#d8d2c6;line-height:1.6;font-size:1rem}
.search-form{display:grid;gap:11px;text-align:left}
.search-form label{font-size:.77rem;letter-spacing:.08em;color:#d9cfba}
.input-shell{height:54px;display:flex;align-items:center;gap:11px;padding:0 15px;border:1px solid rgba(202,174,114,.42);border-radius:12px;background:rgba(0,0,0,.38);transition:.25s}
.input-shell:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(202,174,114,.1),0 0 25px rgba(202,174,114,.08)}
.input-shell span{color:var(--gold)}
input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:white;font-size:16px}
input::placeholder{color:#958e82}
.primary-button,.outline-button{min-height:52px;border-radius:12px;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:700}
.primary-button{display:flex;align-items:center;justify-content:space-between;padding:0 18px;border:0;background:linear-gradient(135deg,#dcc485,#a9813f);color:#171107;box-shadow:0 10px 28px rgba(122,86,31,.25)}
.primary-button i{font-size:19px;font-style:normal}
.primary-button:active,.outline-button:active{transform:translateY(1px)}
.footer-mark{position:absolute;bottom:calc(15px + var(--safe-bottom));margin:0;color:rgba(244,240,230,.46);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}

.centered-view{align-items:center;justify-content:center;padding:calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom))}
.stone-bg,.room-backdrop{position:absolute;inset:0;background:
linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.88)),
radial-gradient(circle at 50% 35%,#28342f,#101613 38%,#020403 78%)}
.stone-bg:after,.room-backdrop:after,.cave:after{content:"";position:absolute;inset:0;opacity:.32;background:
repeating-linear-gradient(117deg,transparent 0 31px,rgba(255,255,255,.025) 32px 33px,transparent 34px 67px)}
.stone-bg.darker{filter:brightness(.72)}
.message-card{padding:28px 23px;text-align:center}
.compact-logo{width:min(38vw,155px)}
.message-card h2{font-size:clamp(2rem,8vw,3.45rem);font-weight:400;line-height:1.05;margin:.28em 0 .35em}
.message-card>p:not(.kicker){max-width:39ch;margin:0 auto 23px;color:#ddd5c7;line-height:1.65}
.challenge{font-size:clamp(1.15rem,5vw,1.55rem)!important}
.challenge strong{color:white}
.outline-button{width:100%;padding:0 16px;border:1px solid rgba(202,174,114,.58);background:rgba(0,0,0,.18);color:var(--gold)}

.doors-view{align-items:center;justify-content:center;background:#010302}
.cave{position:absolute;inset:0;background:
radial-gradient(ellipse at 50% 72%,rgba(133,185,178,.15),transparent 27%),
linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.75)),
radial-gradient(circle at 50% 39%,#25312d 0,#0e1411 42%,#010202 78%)}
.door-scene{
  position:relative;
  z-index:2;
  width:min(92vw,650px);
  height:min(78svh,760px);
  perspective:1500px;
  perspective-origin:50% 50%;
  transform-style:preserve-3d;
  filter:drop-shadow(0 0 28px rgba(125,220,255,.16));
}
.door-half{
  position:absolute;
  top:4%;
  bottom:4%;
  width:50%;
  overflow:hidden;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,filter;
  filter:brightness(.72);
  z-index:3;
}
.door-half img{position:absolute;top:0;width:200%;height:100%;object-fit:contain}
.door-half-left{left:0;transform-origin:0% 50%;transform:scaleX(1) skewY(0deg)}
.door-half-left img{left:0}
.door-half-right{right:0;transform-origin:100% 50%;transform:scaleX(1) skewY(0deg)}
.door-half-right img{right:0}
.light-beam{
  position:absolute;
  z-index:1;
  left:50%;
  top:8%;
  bottom:9%;
  width:84%;
  transform:translateX(-50%) scaleX(.008);
  transform-origin:center;
  opacity:0;
  border-radius:46%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 20%,
      rgba(232,249,255,.92) 42%,
      rgba(177,226,243,.54) 68%,
      rgba(129,196,220,.18) 84%,
      transparent 100%
    );
  box-shadow:
    0 0 20px 7px rgba(245,253,255,.95),
    0 0 72px 26px rgba(195,238,252,.66),
    0 0 150px 58px rgba(146,212,235,.34);
  filter:blur(2px) brightness(1.15);
  will-change:transform,opacity,filter;
}
.dust{position:absolute;z-index:5;inset:0;opacity:0;background-image:
radial-gradient(circle,rgba(255,255,255,.68) 0 1px,transparent 1.5px);
background-size:33px 41px;mask-image:linear-gradient(transparent 10%,#000 38%,#000 80%,transparent)}
.door-caption{position:absolute;z-index:8;left:22px;right:22px;bottom:calc(24px + var(--safe-bottom));text-align:center}
.door-caption p{margin:0 0 12px;text-transform:uppercase;letter-spacing:.13em;color:var(--gold);font-size:.76rem}
.progress{width:min(68vw,330px);height:2px;margin:auto;background:rgba(202,174,114,.2);overflow:hidden}
.progress span{display:block;width:0;height:100%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.door-scene.animate .light-beam{animation:revealLight 2.9s 1.45s cubic-bezier(.62,.01,.2,1) forwards}
.door-scene.animate .door-half-left{animation:hingeLeft 2.9s 1.45s cubic-bezier(.62,.01,.2,1) forwards}
.door-scene.animate .door-half-right{animation:hingeRight 2.9s 1.45s cubic-bezier(.62,.01,.2,1) forwards}
.door-scene.animate .dust{animation:dust 2.7s 1.4s ease forwards}
.doors-view.is-active .progress span{animation:progress 4.7s linear forwards}

.result-view{overflow:auto;align-items:flex-start;justify-content:center;padding:calc(20px + var(--safe-top)) 18px calc(26px + var(--safe-bottom))}
.result-scroll{position:relative;z-index:2;width:min(94vw,550px);margin:auto}
.result-card{position:relative;padding:25px 22px 24px;text-align:center;border:1px solid rgba(202,174,114,.52);border-radius:25px;background:linear-gradient(160deg,rgba(8,14,12,.91),rgba(1,3,3,.96));box-shadow:0 30px 95px rgba(0,0,0,.65),inset 0 0 50px rgba(202,174,114,.04);animation:cardReveal .85s cubic-bezier(.2,.75,.25,1) both}
.result-logo{width:min(35vw,145px)}
.result-card h2{font-size:clamp(2.1rem,8vw,3.8rem);font-weight:400;line-height:1;margin:.2em 0}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin:15px 0}
.ornament span{display:block;width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament span:last-child{transform:scaleX(-1)}
.result-card h3{font-weight:400;font-size:clamp(2.7rem,11vw,5rem);line-height:.96;letter-spacing:.04em;margin:.12em 0 .3em;color:white;text-shadow:0 0 28px rgba(255,255,255,.08)}
.companions{padding:17px 0;margin:16px 0;border-top:1px solid rgba(202,174,114,.25);border-bottom:1px solid rgba(202,174,114,.25)}
.companions p{margin:0 0 10px;color:#d8c8a8}
.companions ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.companions li{padding:6px 10px;border:1px solid rgba(202,174,114,.2);border-radius:999px;background:rgba(202,174,114,.05)}
blockquote{margin:18px auto 23px;max-width:40ch;color:#e1d9cb;font-style:italic;line-height:1.62;font-size:1.03rem}
.room-backdrop[data-room="MORDOR"]{background:radial-gradient(circle at 50% 30%,rgba(159,49,18,.45),transparent 28%),linear-gradient(#190602,#020101 75%)}
.room-backdrop[data-room="MORIA"]{background:radial-gradient(circle at 50% 35%,rgba(44,101,112,.45),transparent 35%),linear-gradient(#071112,#010303 78%)}
.room-backdrop[data-room="RIVENDEL"]{background:radial-gradient(circle at 50% 26%,rgba(63,121,88,.48),transparent 35%),linear-gradient(#06120b,#010402 78%)}
.room-backdrop[data-room="LA COMARCA"]{background:radial-gradient(circle at 50% 25%,rgba(139,118,45,.4),transparent 37%),linear-gradient(#121005,#030301 78%)}
.room-backdrop[data-room="VALINOR"]{background:radial-gradient(circle at 50% 26%,rgba(212,186,105,.45),transparent 38%),linear-gradient(#171307,#030301 78%)}

@keyframes haze{to{transform:translate3d(4%,2%,0) scale(1.08)}}
@keyframes trace{0%{opacity:0;filter:brightness(.4)}50%{opacity:1}100%{opacity:.95;filter:brightness(1.8) drop-shadow(0 0 11px #b9efff) drop-shadow(0 0 35px rgba(112,216,255,.8))}}
@keyframes revealLight{
  0%{
    opacity:.08;
    transform:translateX(-50%) scaleX(.01);
    filter:blur(1px) brightness(1.05);
  }
  35%{
    opacity:.72;
    transform:translateX(-50%) scaleX(.28);
    filter:blur(1.5px) brightness(1.22);
  }
  70%{
    opacity:.96;
    transform:translateX(-50%) scaleX(.68);
    filter:blur(2.5px) brightness(1.45);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) scaleX(1);
    filter:blur(4px) brightness(1.75);
  }
}
  12%{
    opacity:.38;
    transform:translateX(-50%) scaleX(.025);
    filter:blur(1.1px) brightness(1.08);
  }
  28%{
    opacity:.72;
    transform:translateX(-50%) scaleX(.09);
    filter:blur(1.4px) brightness(1.16);
  }
  50%{
    opacity:.9;
    transform:translateX(-50%) scaleX(.25);
    filter:blur(1.8px) brightness(1.28);
  }
  72%{
    opacity:.98;
    transform:translateX(-50%) scaleX(.5);
    filter:blur(2.4px) brightness(1.42);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) scaleX(.92);
    filter:blur(4px) brightness(1.7);
  }
}40%{opacity:.55}100%{opacity:1;width:15px}}
@keyframes hingeLeft{
  0%{
    transform:scaleX(1) skewY(0deg);
    filter:brightness(.72);
  }
  35%{
    transform:scaleX(.72) skewY(-1.2deg);
    filter:brightness(.62);
  }
  70%{
    transform:scaleX(.34) skewY(-2deg);
    filter:brightness(.5);
  }
  100%{
    transform:scaleX(.08) skewY(-2.6deg);
    filter:brightness(.38);
  }
}
  100%{transform:rotateY(84deg);filter:brightness(.42)}
}}
@keyframes hingeRight{
  0%{
    transform:scaleX(1) skewY(0deg);
    filter:brightness(.72);
  }
  35%{
    transform:scaleX(.72) skewY(1.2deg);
    filter:brightness(.62);
  }
  70%{
    transform:scaleX(.34) skewY(2deg);
    filter:brightness(.5);
  }
  100%{
    transform:scaleX(.08) skewY(2.6deg);
    filter:brightness(.38);
  }
}
  100%{transform:rotateY(-84deg);filter:brightness(.42)}
}}
@keyframes dust{0%{opacity:0;transform:scale(.9)}35%{opacity:.55}100%{opacity:0;transform:scale(1.12) translateY(-2%)}}
@keyframes progress{to{width:100%}}
@keyframes cardReveal{from{opacity:0;transform:translateY(26px) scale(.98);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@media (max-height:690px){
  .welcome-card{padding:19px 20px}.brand-logo{width:min(38vw,160px)}
  h1{font-size:1.75rem}.lead{margin-bottom:15px}.door-scene{height:72svh}
  .result-card{padding:18px}.result-card h2{font-size:2rem}.result-card h3{font-size:2.7rem}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;scroll-behavior:auto!important}
}


.gandalf-card{padding-top:18px}
.gandalf-image{
  display:block;
  width:min(78vw,360px);
  max-height:42svh;
  object-fit:contain;
  margin:0 auto 10px;
  border-radius:18px;
  filter:drop-shadow(0 18px 35px rgba(0,0,0,.55));
  animation:gandalfReveal .7s ease both;
}
@keyframes gandalfReveal{
  from{opacity:0;transform:scale(.96) translateY(10px)}
  to{opacity:1;transform:none}
}

@media (max-width:420px){
  .message-card h2{font-size:clamp(1.8rem,8vw,2.6rem)}
  .gandalf-image{width:min(84vw,330px);max-height:38svh}
}


/* APERTURA DEFINITIVA Y COMPATIBLE */
.door-half-left{
  left:0 !important;
  right:auto !important;
  transform-origin:left center !important;
  transform:scaleX(1);
}

.door-half-right{
  right:0 !important;
  left:auto !important;
  transform-origin:right center !important;
  transform:scaleX(1);
}

.door-scene.animate .door-half-left{
  animation:finalOpenLeft 2.8s 1.45s cubic-bezier(.62,.01,.2,1) forwards !important;
}

.door-scene.animate .door-half-right{
  animation:finalOpenRight 2.8s 1.45s cubic-bezier(.62,.01,.2,1) forwards !important;
}

.door-scene.animate .light-beam{
  animation:finalRevealLight 2.8s 1.45s cubic-bezier(.62,.01,.2,1) forwards !important;
}

@keyframes finalOpenLeft{
  0%{
    transform:scaleX(1);
    filter:brightness(.72);
  }
  100%{
    transform:scaleX(.06);
    filter:brightness(.34);
  }
}

@keyframes finalOpenRight{
  0%{
    transform:scaleX(1);
    filter:brightness(.72);
  }
  100%{
    transform:scaleX(.06);
    filter:brightness(.34);
  }
}

@keyframes finalRevealLight{
  0%{
    opacity:.05;
    transform:translateX(-50%) scaleX(.01);
    filter:blur(1px) brightness(1.05);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) scaleX(1);
    filter:blur(4px) brightness(1.8);
  }
}