:root{--gold:#ffe2a8;--mint:#b6ffea;--cream:#fff7e7;--ink:#13243e}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{height:100dvh;overflow:hidden;color:var(--cream);background:radial-gradient(circle at 15% 10%,#3c6581,transparent 34%),radial-gradient(circle at 90% 4%,#563f76,transparent 30%),#091832;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
button:focus-visible,a:focus-visible{outline:3px solid #ffda84;outline-offset:4px}
.nav{height:49px;display:flex;align-items:center;justify-content:space-between;max-width:1450px;margin:auto;gap:7px;padding:5px clamp(10px,2vw,25px)}
.nav a{padding:7px 12px;min-height:34px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid #d9f9ff5c;background:#0e345b8c;font-size:12px;font-weight:850}
.nav .brand{border:0;background:none;color:var(--gold);font:900 18px Georgia,serif;letter-spacing:.1em}
.page{height:calc(100dvh - 49px);max-width:1450px;margin:auto;padding:0 clamp(8px,1.7vw,22px) 10px;display:flex;flex-direction:column;min-height:0}
.introhead{text-align:center;flex:0 0 auto;padding:2px 3px 11px}
.introhead small{font-size:10px;letter-spacing:.23em;color:var(--gold);font-weight:900}
.introhead h1{font:900 clamp(25px,3.5vw,43px)/1.13 Georgia,serif;margin:3px 0;color:#fffaed;text-shadow:0 3px 10px #0007}
.introhead h1 em{font-style:normal;color:var(--mint)}
.introhead p{font-size:12px;color:#d6f4ff;margin:0}
.world{flex:1;min-height:0;display:grid;grid-template-columns:minmax(190px,.49fr) minmax(0,1.51fr);gap:clamp(8px,1.5vw,19px);padding:clamp(8px,1.2vw,17px);border-radius:29px;border:2px solid #acfff073;background:linear-gradient(134deg,#225a71 0%,#172f57 52%,#302044 100%);box-shadow:inset 0 2px #ffffff3b,0 20px 45px #000b}
.guide{position:relative;min-height:0;display:flex;align-items:end;justify-content:center;overflow:hidden;border-radius:22px;isolation:isolate;background:radial-gradient(ellipse at 55% 44%,#acfaea4c,transparent 68%)}
.guide picture{position:absolute;inset:0;z-index:-1}
.guide img{height:100%;width:100%;object-fit:cover;object-position:50% 38%;mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent 100%);filter:saturate(1.1)}
.guide .star{position:absolute;top:8%;right:9%;color:#ffeb9a;font-size:32px;text-shadow:0 0 15px #ffe8aa;animation:float 3.4s ease-in-out infinite alternate}
@keyframes float{to{transform:translate(5px,-12px) rotate(15deg)}}
.speech{max-width:95%;z-index:2;text-align:center;margin:0 10px 15px;background:linear-gradient(135deg,#fff9e9ee,#e8e3ffeb);color:#534474;padding:11px 14px;border:2px solid #fff7cb;border-radius:18px;box-shadow:0 8px 23px #071b4490;font-size:clamp(11px,1vw,14px);line-height:1.27;font-weight:800}
.speech strong{display:block;margin-bottom:4px}
.story{--accent:#ffe5aa;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden;border:2px solid #fff0c18f;border-radius:23px;background:#122a53;box-shadow:0 12px 30px #0008}
.story[data-world=blue]{--accent:#b5edff}.story[data-world=gold]{--accent:#ffe3a5}
.top{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:9px 13px 7px;gap:8px}
.kicker{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--accent)}
.progress{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:850;color:#edfcff;font-variant-numeric:tabular-nums}
.bar{height:9px;width:clamp(65px,9vw,115px);border:1px solid #bff7f0a8;border-radius:999px;overflow:hidden;background:#031637}
.bar span{height:100%;width:0;display:block;border-radius:inherit;background:linear-gradient(90deg,#71edce,#ffdd9a);transition:width .32s}
.scenic{flex:1;min-height:0;position:relative;isolation:isolate;margin:0 9px;overflow:hidden;border-radius:17px;border:2px solid #e4ffffa6;box-shadow:inset 0 0 35px #17324d80,0 0 0 4px #a1fff817;background:#17466a}
.backdrop{position:absolute;inset:0;background-size:cover;background-position:center 45%;background-repeat:no-repeat;filter:saturate(1.09)}
.scenic:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,#041b43c9,transparent 42%,#11243b74),radial-gradient(ellipse at 50% 48%,transparent 24%,#08234866);box-shadow:inset 0 0 36px #06132755}
.fireflies{position:absolute;inset:0;z-index:2;pointer-events:none}
.fireflies i{position:absolute;left:var(--x);top:var(--y);height:4px;width:4px;background:#fff3b1;border-radius:50%;box-shadow:0 0 9px 3px #fff8b772,0 0 19px #80ffe0;animation:glitter var(--d) ease-in-out infinite alternate;animation-delay:var(--delay)}
@keyframes glitter{to{transform:translate(8px,-14px);opacity:.25}}
.scenic-label{position:absolute;z-index:4;top:12px;left:12px;padding:6px 10px;font-size:10px;font-weight:900;color:#fff8e7;border:1px solid #dbfff799;background:#0c2946c2;border-radius:999px;backdrop-filter:blur(4px)}
.symbol{position:absolute;z-index:3;right:10%;top:25%;font-size:clamp(55px,8vw,100px);pointer-events:none;color:#fff0bd;filter:drop-shadow(0 0 22px #fff0a9);animation:float 4s ease-in-out infinite alternate}
.story[data-world=blue] .symbol{color:#d6faff;filter:drop-shadow(0 0 22px #8adfff)}
.gates{position:absolute;inset:7% 6% 6%;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,3vw,50px);align-items:end;justify-items:center}
.gate{--light:#b6edff;--aura:#4fd1f6;--dark:#1d5d9b;width:min(100%,215px);height:100%;max-height:305px;min-height:116px;position:relative;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:4px;color:white;background:none;border:0;isolation:isolate;padding:0 2px 5px;filter:drop-shadow(0 9px 12px #000c);transition:transform .22s}
.gate.gold{--light:#fff0b4;--aura:#ffc65f;--dark:#9c5733}
.gate:hover,.gate:focus-visible{transform:translateY(-8px) scale(1.025)}
.gate:active{transform:scale(.96)}
.arch{position:absolute;inset:2% 9% 23%;border:clamp(7px,1.1vw,15px) ridge var(--light);border-radius:49% 49% 10px 10px/38% 38% 10px 10px;background:radial-gradient(ellipse at 50% 34%,#fff9e5aa 0%,var(--aura) 19%,var(--dark) 65%,#061538 100%);box-shadow:inset 0 0 23px var(--aura),0 0 24px var(--aura),0 0 0 3px #fff8}
.arch:after{content:"✧  ✦  ✧";position:absolute;inset:25% 0 auto;text-align:center;color:var(--light);font-size:clamp(10px,2vw,21px);text-shadow:0 0 12px #fff;animation:float 4s ease-in-out infinite alternate}
.glyph{position:absolute;z-index:2;top:26%;font-size:clamp(34px,5vw,65px);filter:drop-shadow(0 0 15px var(--aura))}
.gate strong{position:relative;z-index:2;font:900 clamp(13px,1.7vw,19px)/1.15 Georgia,serif;color:#fff6d9;text-shadow:0 2px 8px #000,0 0 12px var(--aura)}
.gate small{position:relative;z-index:2;font-size:clamp(9px,.95vw,11px);font-weight:850;text-shadow:0 2px 6px #001028}
.gate .step{position:absolute;bottom:22%;width:90%;height:9px;border-radius:50%;background:linear-gradient(90deg,transparent,var(--light),transparent);box-shadow:0 6px 18px var(--aura)}
.finale{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;gap:5px;text-shadow:0 4px 11px #000}
.finale b{font-size:clamp(63px,8vw,105px);filter:drop-shadow(0 0 22px #ffe8a5);animation:float 4s ease-in-out infinite alternate}
.finale strong{font:900 clamp(17px,2.2vw,26px)/1.1 Georgia,serif}
.narrative{flex:0 0 auto;min-height:0;padding:clamp(9px,1.2vw,15px) clamp(10px,1.4vw,18px) clamp(10px,1.2vw,15px);border-top:1px solid #c4e6ff44;background:linear-gradient(140deg,#173558,#1c264d)}
.narrative h2{margin:0 0 6px;color:var(--accent);font:900 clamp(18px,2vw,27px)/1.14 Georgia,serif}
.narrative p{margin:0 0 6px;font-size:clamp(11px,1.05vw,13.5px);line-height:1.39;color:#eef5ff}
.narrative p:last-of-type{margin-bottom:0}
.actions{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}
.actions .group{display:flex;align-items:center;gap:7px}
.btn{min-height:36px;padding:7px 12px;border:1px solid #fff5d9;border-radius:999px;color:#49385b;background:linear-gradient(130deg,#fff6ce,#ffcf9e);box-shadow:0 4px 0 #aa7e69,0 6px 15px #00123b94;font-size:clamp(10px,1vw,12px);font-weight:900}
.btn.alt{background:linear-gradient(130deg,#e0faff,#abdbe9);box-shadow:0 4px 0 #6696b0,0 6px 15px #0006}
.btn.ghost{color:#effaff;background:#2b456fc9;border-color:#a8d6f3a3;box-shadow:none}
.btn:active{transform:translateY(2px);box-shadow:none}
.sr{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);overflow:hidden}
#confetti{position:absolute;inset:0;z-index:5;pointer-events:none}
.spark{position:absolute;left:var(--x);top:var(--y);color:#fff2b0;font-size:20px;text-shadow:0 0 12px #fff3bd;animation:burst 1s ease-out forwards}
@keyframes burst{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(90deg) scale(.5)}}
@media(max-width:820px){.world{grid-template-columns:minmax(160px,.43fr) minmax(0,1.57fr)}.narrative{padding:9px 11px}.narrative h2{font-size:20px}.narrative p{font-size:11.7px}.scenic{margin:0 6px}}
@media(max-width:650px){
.nav{height:42px;padding:3px 7px}.nav a{min-height:30px;padding:4px 7px;font-size:10px}.nav .brand{font-size:14px}
.page{height:calc(100dvh - 42px);padding:0 5px 5px}.introhead{padding:2px 3px 6px}.introhead small,.introhead p{display:none}.introhead h1{font-size:clamp(20px,5vw,27px);margin:2px 0}
.world{grid-template-columns:1fr;grid-template-rows:minmax(77px,15%) minmax(0,1fr);gap:6px;padding:6px;border-radius:20px}
.guide{align-items:center;justify-content:end;border-radius:14px}.guide picture{width:61%}.guide img{object-position:50% 36%;mask-image:linear-gradient(to right,#000 50%,transparent);-webkit-mask-image:linear-gradient(to right,#000 50%,transparent)}
.speech{margin:0 5px 0 0;width:61%;padding:5px 7px;font-size:10px;line-height:1.17}.speech strong{margin-bottom:1px;font-size:11px}.guide .star{right:auto;left:5%;font-size:18px}
.story{border-radius:15px}.top{padding:6px 9px}.kicker,.progress{font-size:9px}.bar{width:56px;height:7px}
.scenic{border-radius:12px}.scenic-label{top:7px;left:7px;font-size:9px;padding:5px 7px}
.gates{inset:8% 5% 5%;gap:8px}.gate{width:min(100%,140px);max-height:100%}.arch{inset:1% 3% 24%}.glyph{font-size:39px;top:26%}.gate strong{font-size:14px}.gate small{font-size:9px}
.narrative{padding:8px 9px 9px}.narrative h2{font-size:clamp(17px,4.2vw,22px);margin-bottom:4px}.narrative p{font-size:11px;line-height:1.29;margin-bottom:4px}.actions{margin-top:7px}.btn{min-height:31px;padding:6px 9px;font-size:10px}
}
@media(max-width:380px){.narrative p{font-size:10.5px}.btn{font-size:9px;padding:5px 7px}.speech{font-size:9px}}
@media(max-height:650px){.introhead p{display:none}.introhead{padding:1px 3px 4px}.world{padding:5px}.top{padding:5px 8px}.narrative{padding:6px 9px}.narrative h2{font-size:17px;margin-bottom:3px}.narrative p{font-size:10.5px;line-height:1.22;margin-bottom:3px}.actions{margin-top:6px}.btn{min-height:28px;padding:5px 8px}.speech{padding:5px}}
@media(max-height:460px){.nav{height:35px}.page{height:calc(100dvh - 35px)}.introhead,.guide{display:none}.world{grid-template-columns:1fr;grid-template-rows:1fr}.narrative p{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.gate:hover{transform:none}}


/* v162 — portile sunt in colturile inferioare, iar centrul ilustratiei ramane liber.
   Albastra: stanga-jos. Auria: dreapta-jos. Doar prezentare, fara schimbari in joc. */
.gates{
  inset:auto 3.5% 2.5%;
  height:min(68%,235px);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(16px,5vw,72px);
}
.gate{
  flex:0 1 176px;
  width:min(29%,176px);
  height:100%;
  min-height:0;
  max-height:235px;
}
.gate.blue{margin-right:auto}
.gate.gold{margin-left:auto}
@media(max-width:650px){
  .gates{
    inset:auto 3% 2%;
    height:min(67%,160px);
    gap:10px;
  }
  .gate{
    flex:0 1 124px;
    width:min(34%,124px);
    height:100%;
    min-height:0;
    max-height:160px;
  }
  .gate strong{font-size:clamp(11px,3.3vw,14px)}
  .gate small{font-size:clamp(8px,2.2vw,9px)}
}
@media(max-height:500px){
  .gates{height:min(66%,125px);bottom:2%}
  .gate{max-height:125px}
}