.numInput{padding:0 16px 2px !important; display:flex; align-items:center}
.numInput::placeholder{position:relative; top:-2px}

/* Moss, intre titlu si subtitlu. Fundalul lui e exact fetrul uneltei,
   iar marginile de sus si de jos se sting, ca sa nu se vada nicio linie. */
/* poza incepe sub titlu, nu peste el */
.anHero{margin:8px -22px 6px; text-align:center}
.anHero .anHeroImg{display:block; width:100%; aspect-ratio:3/2.6;
  background-size:150% auto !important;
  background-image:url(../img/css-an-hero.webp);
  background-repeat:no-repeat; background-position:center 56%;
  background-color:rgb(68,46,79);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%)}
.anHero .sub{margin:10px 22px 0; font-size:13.5px; line-height:1.55}
/* linia de sub istoric sta la mijloc, ca titlul de deasupra */
#anLog .sub{text-align:center}

/* butonul care strange partea de sus a uneltei */
/* butonul sta langa titlu, care ramane mereu pe ecran */
.anTitleRow{position:relative}
.anFold{position:absolute; right:-2px; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:rgba(245,239,228,.7); cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  -webkit-tap-highlight-color:transparent}
.anFold svg{width:17px; height:17px; transition:transform .32s ease}
.anFold.on svg{transform:rotate(-90deg)}
.anFold:active{transform:translateY(-50%) scale(.92)}
#angelAsk{position:relative}
/* partea de sus se strange lin, fara sa sara */
#anIntro{overflow:hidden; max-height:640px; opacity:1;
  transition:max-height .42s ease, opacity .3s ease}
#anIntro.folded{max-height:0; opacity:0}

/* cristalul zilei, mare, in capul cardului */
.hpCryBig{width:96px; height:96px; margin:0 auto 4px; background-size:contain;
  background-repeat:no-repeat; background-position:center}
.hpCryBig.pop{animation:hpCryPop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes hpCryPop{0%{transform:scale(.6) rotate(-8deg); opacity:0}100%{transform:none; opacity:1}}
.hpCryNm{font-family:'Montserrat',system-ui,sans-serif; font-size:11.5px;
  letter-spacing:.06em; color:rgba(27,23,48,.6); text-align:center; margin:2px 0 8px}
/* cele sapte locasuri */
.hpCry{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:14px 0 4px}
.hpCrySlot{position:relative; aspect-ratio:1/1; border-radius:10px;
  border:1.5px dashed rgba(27,23,48,.22); background:rgba(27,23,48,.05)}
.hpCrySlot.now{border-color:rgba(201,161,94,.75)}
.hpCrySlot i{position:absolute; inset:8%; background-size:contain;
  background-repeat:no-repeat; background-position:center; opacity:1}
.hpCrySlot.on{border-style:solid; border-color:transparent; background:transparent}
.hpCrySlot.drop i{animation:hpDrop .52s cubic-bezier(.2,1.35,.4,1)}
@keyframes hpDrop{0%{transform:translateY(-26px) scale(.7); opacity:0}
  70%{transform:translateY(2px) scale(1.06); opacity:1}100%{transform:none}}
/* geodele stranse pana acum */
.hpGeoRow{display:flex; justify-content:center; gap:7px; margin-top:12px}
.hpGeoRow span{width:26px; height:26px; background-size:contain;
  background-repeat:no-repeat; background-position:center}
/* butonul de test */
.hpTest{display:block; width:100%; margin-top:9px; padding:9px; border:0; cursor:pointer;
  background:none; font-family:'Montserrat',system-ui,sans-serif; font-size:12px;
  color:rgba(27,23,48,.5); text-decoration:underline}
/* momentul geodei */
#hsGeo{position:fixed; inset:0; z-index:520; display:flex; align-items:center;
  justify-content:center; padding:26px; background:rgba(8,6,18,.82);
  opacity:0; pointer-events:none; transition:opacity .28s ease}
#hsGeo.on{pointer-events:auto}
#hsGeo.show{opacity:1}
.hgCard{position:relative; width:100%; max-width:330px; text-align:center;
  border-style:solid; border-color:transparent; border-width:42px 38px;
  border-image-source:var(--fvCardTall); border-image-slice:90 fill;
  border-image-repeat:stretch; border-image-width:1; padding:2px; color:#1b1730;
  transform:scale(.86); opacity:0; transition:transform .46s cubic-bezier(.2,1.3,.35,1), opacity .3s ease}
#hsGeo.show .hgCard{transform:none; opacity:1}
.hgRay{position:absolute; left:50%; top:52px; width:230px; height:230px; margin-left:-115px;
  border-radius:999px; background:radial-gradient(circle, rgba(201,161,94,.42), transparent 68%);
  animation:hgPulse 2.6s ease-in-out infinite}
@keyframes hgPulse{0%,100%{transform:scale(.92); opacity:.75}50%{transform:scale(1.06); opacity:1}}
.hgImg{position:relative; width:150px; height:150px; margin:0 auto 10px;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  animation:hgIn .7s cubic-bezier(.2,1.4,.35,1)}
@keyframes hgIn{0%{transform:scale(.4) rotate(-14deg); opacity:0}100%{transform:none; opacity:1}}
.hgT{position:relative; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:22px; margin-bottom:6px}
.hgS{position:relative; font-family:'Montserrat',system-ui,sans-serif; font-size:12.5px;
  line-height:1.6; color:rgba(27,23,48,.72); margin-bottom:18px}
/* butonul geodei poarta acelasi fetru ca restul aplicatiei */
#hsGeo .hpBtn{position:relative; width:100%; border-style:solid; border-color:transparent;
  border-width:17px 18px; border-image-source:var(--fvFill); border-image-slice:64 fill;
  border-image-repeat:stretch; border-image-width:1; padding:2px 8px;
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:16px;
  color:#1b1730; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
#hsGeo .hpBtn:active{transform:scale(.97)}

/* Evolutia: titlul etapei, citatul ei, apoi paragraful care o duce mai departe */
.dpEvoT{font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:19px;
  color:#f5efe4; text-align:center; margin-bottom:4px}
.dpEvoQ{font-family:'Montserrat',system-ui,sans-serif; font-size:13px; font-style:italic;
  color:#c9a15e; text-align:center; margin-bottom:12px}
/* randuri in chenar rotunjit, centrate */
.dpPills{display:flex; flex-direction:column; gap:9px; width:100%}
.dpPill{border:1px solid rgba(245,239,228,.22); border-radius:16px;
  background:rgba(245,239,228,.06); padding:12px 14px;
  font-family:'Montserrat',system-ui,sans-serif; font-size:13.5px; line-height:1.5;
  color:#f5efe4; text-align:center}
/* umbra din spatele postarilor, mult mai discreta */
.hsPost{box-shadow:0 1px 2px rgba(10,8,24,.05), 0 6px 14px -10px rgba(10,8,24,.18) !important}

/* Cardurile citirii adanci cresc daca textul cere, dar nu scad sub inaltimea
   pe care o aveau, ca sa nu sara caruselul de la un slide la altul. */
/* Toate cardurile citirii au aceeasi inaltime; textul se imparte pe mai multe
   file, nu se micsoreaza si nu intinde cardul. */
#s-deep .hsSq.flow{aspect-ratio:3/4 !important; min-height:0}
#s-deep .hsSq.flow .hsIn{position:absolute; inset:0; overflow:hidden;
  justify-content:center}
/* toate filele unui carusel se intind cat cea mai inalta, ca sa nu ramana
   o fasie alba sub cele scurte */
#s-deep .hsCar{align-items:stretch}
#s-deep .hsSlide{display:flex}
#s-deep .hsSlide > .hsSq{flex:1 1 auto}

/* Ghidul, ca foaie peste ecran, deschis din meniul cu trei puncte */
#hgOv{position:fixed; inset:0; z-index:420;
  background:#141127; background-image:var(--feltTex); background-repeat:repeat;
  opacity:0; pointer-events:none; transition:opacity .26s ease;
  display:flex; flex-direction:column}
#hgOv.on{pointer-events:auto}
#hgOv.show{opacity:1}
.hgSheetTop{flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 12px}
.hgSheetTop b{flex:1; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:21px; color:#f5efe4}
.hgSheetBody{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 20px calc(40px + env(safe-area-inset-bottom,0px))}
#hgOv .hgTop{display:none}
#hgOv .hgBox{margin-top:0}

/* Cele doua intrebari din onboarding */
.obQT{font-family:'Montserrat',system-ui,sans-serif; font-size:13px;
  letter-spacing:.02em; color:rgba(245,239,228,.75); margin:0 0 10px}
.obOpt{display:block; width:100%; margin-bottom:9px; padding:14px 16px;
  border:1px solid rgba(245,239,228,.2); border-radius:16px;
  background:rgba(245,239,228,.05); color:#f5efe4; cursor:pointer;
  font-family:'Montserrat',system-ui,sans-serif; font-size:14.5px; text-align:center;
  -webkit-tap-highlight-color:transparent; transition:border-color .2s ease, background .2s ease}
.obOpt.on{border-color:#c9a15e; background:rgba(201,161,94,.14)}
.obOpt:active{transform:scale(.985)}