:root{--night:#27235e;--ink:#484273;--muted:#756c95;--gold:#ffdf9e;--lav:#d4c2ff;--cream:#fff8ec;--sea:#b4f6ff}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(ellipse at 15% -12%,#7967bc 0%,transparent 43%),radial-gradient(ellipse at 82% 53%,#4458a2 0%,transparent 50%),linear-gradient(155deg,#1a184c,#303069 66%,#22264e);color:#fff;overflow-x:hidden;min-height:100svh}a{text-decoration:none;color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffdf97;outline-offset:4px}
.topnav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1210px;margin:auto;padding:17px 22px;position:relative;z-index:5}.topnav a{color:#ffebc3;font-size:14px;font-weight:800}.topnav a:hover{text-decoration:underline}.topnav .brand{font:900 22px Georgia,serif;color:#ffe7ae;letter-spacing:.05em}
main{width:min(1210px,100%);margin:auto;padding:0 clamp(12px,2.4vw,27px) 40px}.intro{text-align:center;margin:3px auto 22px;position:relative;z-index:1}.eyebrow{display:inline-block;font-size:11px;letter-spacing:.15em;font-weight:900;padding:7px 16px;border-radius:100px;color:#ffe7b9;border:1px solid #e8d1ff77;background:#a18ad536}.intro h1{font:900 clamp(31px,5.3vw,58px)/1.12 Georgia,serif;letter-spacing:-.035em;margin:13px 0 8px;color:#ffe7ae;text-shadow:0 9px 25px #0c0a378f}.intro h1 em{font-style:normal;background:linear-gradient(110deg,#ffd3ec,#e3bfff,#c4f8ff);color:transparent;-webkit-background-clip:text;background-clip:text}.intro p{max-width:700px;margin:0 auto;color:#e8e1ff;font-size:clamp(13px,1.45vw,16px);line-height:1.6}
.world{position:relative;isolation:isolate;overflow:hidden;min-height:630px;display:grid;grid-template-columns:minmax(240px,.83fr) minmax(390px,1.25fr);align-items:stretch;gap:clamp(13px,2.7vw,33px);padding:clamp(15px,2.8vw,29px);border:2px solid #e9d9ff8c;border-radius:37px;background:radial-gradient(ellipse at 24% 3%,#fff8d289 0%,transparent 45%),radial-gradient(ellipse at 83% 13%,#deb2ff77 0%,transparent 34%),linear-gradient(155deg,#9c91d7 0%,#6689c9 50%,#7773bb 100%);box-shadow:0 23px 67px #0b0935b5,inset 0 2px #fff8}.world:before{content:"";position:absolute;z-index:-1;inset:0;background:repeating-conic-gradient(from 189deg at 35% -23%,transparent 0deg 12deg,#fffbe322 16deg 22deg,transparent 25deg 40deg);opacity:.7}.world:after{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-90px;height:255px;background:radial-gradient(ellipse at 20% 15%,#e5ceff,transparent 47%),radial-gradient(ellipse at 85% 0,#d7d7ff,transparent 55%),linear-gradient(10deg,#959bd7,#b3c1f0);border-radius:50% 60% 0 0}.sun-halo{position:absolute;pointer-events:none;z-index:-1;top:-160px;left:-70px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,#fff9cf90 0%,#fff6c32e 49%,transparent 71%)}.cloud{position:absolute;pointer-events:none;z-index:0;width:230px;height:75px;border-radius:100px;background:#f9f7ff5e;filter:blur(1px);box-shadow:58px -27px 0 12px #f9f7ff50,112px 5px 0 0 #f9f7ff45}.cloud.one{left:-105px;top:83px;opacity:.8}.cloud.two{right:-190px;top:160px;opacity:.5;transform:scale(.7)}.cloud.three{left:10%;bottom:64px;opacity:.3;transform:scale(1.1)}.drift{animation:cloudDrift 12s ease-in-out infinite alternate}@keyframes cloudDrift{to{translate:30px -9px}}.starscape{position:absolute;right:24%;top:28px;pointer-events:none;font-size:32px;color:#fff6d2;letter-spacing:40px;opacity:.55}
.piri-scene{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-width:0;padding-bottom:15px}.illustration{position:relative;width:min(100%,420px);height:min(72vh,520px);max-height:520px;overflow:hidden;border-radius:47% 47% 28% 28% / 36% 36% 19% 19%;border:2px solid #fffaf9bd;background:#9287ca;box-shadow:0 0 0 8px #e7eeff27,0 15px 37px #47416f80}.illustration:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,#5856a36b,transparent 33%);pointer-events:none}.illustration img{width:100%;height:100%;object-fit:cover;object-position:center 47%;display:block;animation:gentleArt 9s ease-in-out infinite alternate}.illustration-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 55% 29%,#fffae86b,transparent 46%);pointer-events:none;mix-blend-mode:screen}@keyframes gentleArt{to{transform:scale(1.05) translateY(-5px)}}
.mail-decoration{position:absolute;top:6%;left:-5%;z-index:3;pointer-events:none;color:#fff2cb}.floating-mail{font-size:42px;filter:drop-shadow(0 6px 12px #7366b3);animation:mailFloat 5s ease-in-out infinite alternate}@keyframes mailFloat{to{transform:translate(15px,-18px) rotate(13deg)}}.mail-trail{position:absolute;top:65px;left:-8px;min-width:200px;white-space:nowrap;font-size:24px;letter-spacing:11px;opacity:.8}
.piri-speech{position:relative;z-index:3;width:min(94%,385px);padding:15px 19px;background:linear-gradient(140deg,#fff9f1fa,#ffedfaf4);color:#5f487e;border:2px solid #fff9e9;border-radius:20px 26px 16px 25px;box-shadow:0 10px 22px #44347e50;transform:rotate(-1deg)}.piri-speech span{font-size:12px;font-weight:950;letter-spacing:.07em;color:#9878ad}.piri-speech p{font-size:14px;font-weight:750;line-height:1.45;margin:5px 0 0}
.desk{position:relative;z-index:2;width:100%;align-self:center;padding:clamp(15px,2.6vw,26px);background:linear-gradient(153deg,#fff9f1fa,#f4ebfffa 63%,#e6f6fffa);border:3px solid #fff9f8;border-radius:32px;color:var(--ink);box-shadow:0 19px 52px #392d799c,inset 0 0 0 2px #e7d7edbc}.desk:before{content:"✦ ✧ ✦";position:absolute;right:17px;top:10px;color:#d2b5e7a3;letter-spacing:8px;font-size:14px}.desk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.mission-label{font-size:11px;letter-spacing:.13em;font-weight:950;color:#8c70a3}.stamps{display:flex;gap:5px}.stamp{display:grid;place-items:center;width:26px;height:26px;border:1px dashed #bcaace;border-radius:6px;background:#ede5f6;color:#a9a2ba;font-size:13px;transform:rotate(-4deg)}.stamp.delivered{color:#f7efff;background:linear-gradient(130deg,#ac78cd,#9074c5);border-color:#fff;box-shadow:0 0 11px #ceabef;animation:stampIn .37s ease-out}@keyframes stampIn{from{transform:scale(1.4) rotate(15deg)}to{transform:scale(1) rotate(-4deg)}}.desk h2{text-align:center;font:900 clamp(22px,2.7vw,30px)/1.17 Georgia,serif;color:#69508f;margin:12px 0 3px}.subtitle{text-align:center;color:#8b7c9a;margin:0 0 12px;line-height:1.4;font-size:12px}
.letter-wrap{position:relative;isolation:isolate}.letter{position:relative;z-index:1;width:min(100%,410px);margin:0 auto 14px;min-height:172px;padding:21px 24px 18px;border-radius:12px 12px 26px 12px;border:2px solid #e8d6bd;background:linear-gradient(170deg,#fffef8,#fff4e4);box-shadow:5px 7px 0 #f0ddc9,0 12px 22px #a37fbd33;transform:rotate(-1deg);transition:filter .2s}.letter:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.15;background:repeating-linear-gradient(0deg,transparent 0 17px,#bc91bf 18px,transparent 19px)}.letter:after{content:"";position:absolute;right:16px;bottom:12px;width:36px;height:36px;border:2px dashed #dfaaba;border-radius:6px;transform:rotate(9deg)}.letter-top{display:flex;justify-content:space-between;gap:8px;align-items:center;position:relative;z-index:1}.letter-kicker{letter-spacing:.11em;font-weight:950;font-size:10px;color:#937ca2}.postmark{font-size:9px;color:#ba92ad;font-weight:850}.seal{position:absolute;right:23px;bottom:19px;z-index:2;font-size:23px;color:#d18fbb}.letter-icon{position:relative;z-index:1;text-align:center;font-size:39px;margin:5px auto 4px;filter:drop-shadow(0 3px 8px #9b8cab3d)}.clue{position:relative;z-index:1;text-align:center;max-width:310px;font:700 clamp(13px,1.8vw,16px)/1.42 Georgia,serif;color:#5a5371;margin:2px auto 6px}.question{position:relative;z-index:1;text-align:center;font-size:11px;font-weight:900;letter-spacing:.1em;color:#af83a8;margin:0}.flying-envelope{position:absolute;z-index:7;left:50%;top:50%;font-size:53px;opacity:0;pointer-events:none;filter:drop-shadow(0 7px 10px #8265b3)}.flying-envelope.fly{animation:sendLetter 1.15s cubic-bezier(.19,.8,.25,1) forwards}@keyframes sendLetter{0%{opacity:0;transform:translate(-50%,-30%) rotate(-18deg) scale(.4)}22%{opacity:1;transform:translate(-50%,-85%) rotate(12deg) scale(1.1)}78%{opacity:1;transform:translate(100%,-220%) rotate(27deg) scale(.9)}100%{opacity:0;transform:translate(140%,-260%) rotate(42deg) scale(.25)}}
.choices-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:900;color:#856da0;margin:2px 0 8px}.hint-btn{border:1px solid #d9c1e8;border-radius:100px;padding:7px 11px;background:#fbf3ff;color:#69548d;font-size:11px;font-weight:850}
.mailboxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(7px,1.3vw,12px)}.mailbox{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:0;min-height:112px;border-radius:19px;border:2px solid #d5c5eb;background:linear-gradient(146deg,#fff,#f5ebff 63%,#e9e3fc);color:#514478;box-shadow:0 6px 0 #ccb9e0,0 9px 15px #6744a427;transition:transform .16s,box-shadow .16s,border-color .16s;position:relative}.mailbox:before{content:"✉";position:absolute;top:7px;right:9px;font-size:13px;color:#baa0d5}.mailbox .portrait{font-size:clamp(30px,4vw,45px);line-height:1.2;filter:drop-shadow(0 4px 5px #8868b34f)}.mailbox strong{font-weight:950;font-size:clamp(12px,1.4vw,15px)}.mailbox small{color:#8a7ba6;font-size:10px;font-weight:700}.mailbox:hover:not(:disabled),.mailbox:focus-visible{transform:translateY(-4px);box-shadow:0 10px 0 #ccb9e0,0 17px 20px #6744a440;border-color:#a888d9}.mailbox:active:not(:disabled){transform:translateY(2px);box-shadow:0 3px 0 #ccb9e0,0 6px 12px #6744a42b}.mailbox:disabled{cursor:default}.mailbox.correct{background:linear-gradient(150deg,#fffdf4,#f8e1a9);border-color:#f5c779;box-shadow:0 0 26px #ffe6a6,0 6px 0 #e9b977}.mailbox.wrong{animation:softNudge .35s ease-out}@keyframes softNudge{20%,65%{transform:rotate(-3deg)}45%,80%{transform:rotate(3deg)}}
.status-row{min-height:42px;display:flex;justify-content:center;align-items:center;padding:7px 4px 0}#status{text-align:center;font-size:13px;color:#786197;font-weight:850;margin:0}.controls{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:8px}.control-btn{border:1px solid #cdb7df;background:#e9ddf4;color:#5c4b85;font-size:12px;font-weight:850;padding:9px 13px;border-radius:100px}.control-btn:hover,.hint-btn:hover{background:#e1cffa}
.spark-layer{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;border-radius:29px}.spark{position:absolute;left:var(--x);top:var(--y);font-size:23px;color:#e7a45e;opacity:0;animation:sparkUp 1.05s ease-out forwards}@keyframes sparkUp{0%{opacity:0;transform:scale(.2)}25%{opacity:1;transform:scale(1.16)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.55)}}
.finish{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;text-align:center;padding:clamp(14px,3vw,26px);border-radius:28px;border:2px solid #fff7f1;background:radial-gradient(circle at 48% 2%,#fff5cd,transparent 45%),linear-gradient(150deg,#f6e5fffa,#f8f2fffc 53%,#e2f9fffa);box-shadow:inset 0 0 0 5px #fff7,0 0 34px #fff1bc6b}.finish-particles{font-size:20px;letter-spacing:.4em;color:#ab74c7;animation:floatFinish 4s ease-in-out infinite alternate}@keyframes floatFinish{to{transform:translateY(-8px)}}.finish img{width:min(100%,315px);height:clamp(105px,19vh,158px);object-fit:cover;object-position:center 42%;border-radius:17px;border:4px solid #fff;box-shadow:0 9px 27px #7565a355}.finish-tag{font-size:10px;font-weight:950;letter-spacing:.12em;color:#a47caf}.finish h2{color:#6a4f91;margin:0;font:900 clamp(27px,3.4vw,38px)/1.1 Georgia,serif}.finish p{max-width:410px;font-size:13px;line-height:1.48;color:#73658e;font-weight:700;margin:3px 0 8px}.finish-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.finish-btn{border:0;padding:12px 18px;border-radius:100px;background:linear-gradient(140deg,#fff2be,#ffcb89);color:#75517f;font-weight:950;font-size:13px;box-shadow:0 5px 0 #c7a073,0 8px 18px #7958a44f}.finish-btn.secondary{background:linear-gradient(145deg,#efe6ff,#dfd1ff);box-shadow:0 5px 0 #b7a7d8,0 8px 18px #7958a44f}[hidden]{display:none!important}
.footnote{font-size:12px;line-height:1.6;color:#dcd4f8;text-align:center;margin:19px auto 8px}
@media(max-width:880px){.world{grid-template-columns:1fr;min-height:0}.piri-scene{display:grid;grid-template-columns:150px 1fr;gap:13px;min-height:160px;padding:0}.illustration{width:150px;height:156px;border-radius:30px}.piri-speech{width:100%;transform:none}.mail-decoration{display:none}.desk{max-width:690px;margin:auto}}
@media(max-width:480px){.topnav{justify-content:center;gap:10px;padding:14px}.topnav a{font-size:12px}.topnav .brand{font-size:18px}.intro{margin-bottom:15px}.intro h1{font-size:31px}.world{padding:12px;border-radius:23px}.piri-scene{grid-template-columns:100px 1fr;min-height:115px}.illustration{width:100px;height:116px;border-radius:20px}.piri-speech{padding:10px 12px;font-size:12px}.piri-speech p{font-size:12px}.desk{padding:16px 12px;border-radius:24px}.desk h2{font-size:23px}.letter{padding:13px 12px 10px;min-height:164px}.letter-top{padding:0 6px}.letter-kicker{font-size:9px}.postmark{font-size:8px}.letter-icon{font-size:32px}.clue{font-size:14px}.mailboxes{gap:7px}.mailbox{min-height:106px;border-radius:14px;padding:6px 3px}.mailbox small{font-size:9px}.mailbox .portrait{font-size:33px}.finish img{height:100px}.finish h2{font-size:25px}.finish p{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.flying-envelope.fly{opacity:0}.spark-layer{display:none}}


/* v138.1 — portretul oficial Piri încadrat complet și răspunsuri cu personaje reale */
/* Ilustrația veche era orizontală și era tăiată de containerul vertical. */
.illustration{background:linear-gradient(145deg,#dfc8fa,#b0a5e9);isolation:isolate}
.illustration img{object-fit:cover;object-position:50% 38%;animation:gentleArtPortrait 10s ease-in-out infinite alternate}
@keyframes gentleArtPortrait{from{transform:scale(1)}to{transform:scale(1.012) translateY(-2px)}}
/* Căsuțe ilustrate ca mici portrete, cu fotografii originale ale fiecărui erou. */
.mailboxes{gap:clamp(8px,1.4vw,13px)}
.mailbox{min-height:154px;padding:13px 8px 11px;gap:7px;overflow:visible;
  background:linear-gradient(160deg,#fffefc,#fcf4ff 50%,#efe7fd 100%);
  border:2px solid #e2cfee;
  box-shadow:0 5px 0 #c9b0de,0 11px 19px #6141862e,inset 0 2px #fff;
}
.mailbox:before{top:8px;right:8px;color:#b39bd0}
.portrait-photo{width:clamp(62px,7.2vw,79px);height:clamp(62px,7.2vw,79px);
  display:grid;place-items:center;flex:none;overflow:hidden;position:relative;
  border:3px solid #fff9f0;border-radius:50%;
  background:radial-gradient(circle at 30% 20%,#fff,#dfd2fd 76%);
  box-shadow:0 0 0 3px #d6bee9,0 8px 15px #71519362,inset 0 0 10px #fff;
  transition:transform .2s ease,box-shadow .2s ease;
}
.portrait-photo img{width:100%;height:100%;display:block;object-fit:cover;
  object-position:var(--photo-pos,50% 50%);filter:saturate(1.1) contrast(1.04);
}
.portrait-tavi{--photo-pos:17% 52%;--photo-size:cover}
.portrait-bibi{--photo-pos:53% 48%}
.portrait-zumi{--photo-pos:50% 43%}
.portrait-manyx{--photo-pos:78% 48%}
.mailbox:hover:not(:disabled) .portrait-photo,.mailbox:focus-visible .portrait-photo{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 0 0 3px #c5a9e6,0 0 19px #dfbeffad,0 11px 21px #71519370;
}
.mailbox.correct .portrait-photo{box-shadow:0 0 0 4px #ffe3a0,0 0 24px #fbd585}
.mailbox.wrong{border-color:#efbbd3}
.mailbox strong{font-size:clamp(13px,1.6vw,16px);margin-top:2px}
.mailbox small{font-size:clamp(9px,1.1vw,11px);line-height:1.25;text-align:center;overflow-wrap:break-word;max-width:100%;padding:0 2px}
.portrait-photo.photo-fallback{font-size:39px}
.portrait-photo.photo-fallback img{display:none}
@media(max-width:880px){
 .illustration img{object-position:50% 34%;animation:none}
 .mailbox{min-height:147px}
}
@media(max-width:480px){
 .illustration img{object-position:50% 32%}
 .mailboxes{gap:7px}
 .mailbox{min-height:130px;padding:9px 3px 8px;gap:5px}
 .portrait-photo{width:clamp(50px,14vw,60px);height:clamp(50px,14vw,60px);border-width:2px;
   box-shadow:0 0 0 2px #d6bee9,0 5px 11px #7151934d}
 .mailbox strong{font-size:13px}
 .mailbox small{font-size:9px}
 .portrait-photo.photo-fallback{font-size:31px}
}
@media(prefers-reduced-motion:reduce){.illustration img{animation:none!important}.portrait-photo{transition:none!important}}