:root{
  --heroFade:.5;
  --night:#0b0a16; --deep:#12102a; --card:rgba(255,255,255,.05);
  --lav:#ddd7f2; --white:#f9f7ff;
  --gold:#f5c76a; --gold-soft:#f8dda0;
  --green:#34d399; --green-soft:#b8f7dc;
  --crown:#a78bfa; --crown-soft:#ddd2ff;
  --third:#6366f1; --throat:#38bdf8; --solar:#facc15; --sacral:#fb923c; --root:#ef4444;
  /* FELT: o singura culoare plata plus o textura fina de fibra, in loc de cerul mare */
  --felt:#262437;
  --feltTex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)' opacity='0.16'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:'Sora',sans-serif; color:var(--lav);
  background:#0a0912;
  min-height:100vh; display:flex; justify-content:center; transition:background 1s;
}
body.tGreen{--felt:#2e4f39} body.tRed{--felt:#4a2724} body.tYel{--felt:#4a3f1f}
body.tInd{--felt:#2e3450} body.tPnk{--felt:#4a2440} body.tMag{--felt:#442e4f}
body.tOrg{--felt:#4a2c18} body.tCyn{--felt:#1e3a4a}
.phone{width:100%; max-width:430px; min-height:100vh; padding:22px 22px calc(168px + env(safe-area-inset-bottom, 0px));
  position:relative; z-index:1; overflow-x:clip;
  background-color:var(--felt); background-image:var(--feltTex); background-repeat:repeat;
  transition:background-color .6s ease}
@media (min-width:470px){.phone{box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 30px 80px -30px #000}}
.stars{display:none}
.starsOld{position:fixed; inset:0; pointer-events:none; z-index:1}
.star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.34; animation:tw 4s ease-in-out infinite}
.star.dim{opacity:.13; width:1.5px; height:1.5px; animation:none}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.6}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
/* Fundalul mare cosmic, scos in 364. Ramane doar culoarea de fetru pe container. */
.heroBg{display:none; position:fixed; top:0; left:50%; transform:translateX(-50%) scale(var(--hz,1)); transform-origin:center 30%; width:min(100vw,430px); height:64vh; z-index:0; pointer-events:none;
  background-size:cover; background-position:center top;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,var(--heroFade)) 0%, rgba(0,0,0,calc(var(--heroFade)*.6)) 45%, transparent 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,var(--heroFade)) 0%, rgba(0,0,0,calc(var(--heroFade)*.6)) 45%, transparent 100%)}
.screen{display:none; animation:reveal 1.2s cubic-bezier(.22,.7,.3,1) both; position:relative; z-index:2}
/* ===== TRANZITIA UNICA A APLICATIEI =====
   Orice schimbare de continut (ecran, tab, listă) trece prin acelasi blur scurt.
   `fxSwap(fn)` estompeaza, ruleaza schimbarea la mijloc, apoi limpezeste. */
.fxBlur{transition:opacity .2s cubic-bezier(.4,0,1,1), filter .2s cubic-bezier(.4,0,1,1)}
.fxBlur.out{opacity:0; filter:blur(10px)}
/* intrarea foloseste EXACT animatia `reveal` a ecranelor, ca senzatia sa fie aceeasi
   indiferent daca schimbi ecranul sau doar tabul */
.fxIn{animation:reveal 1.2s cubic-bezier(.22,.7,.3,1) both}
.screen.on{display:block}
/* [stated] fara efect de zoom la intrare: raman doar estomparea si urcarea */
@keyframes reveal{from{opacity:0; filter:blur(10px); transform:translateY(6px)}to{opacity:1; filter:blur(0); transform:none}}
header{display:flex; justify-content:space-between; align-items:center; gap:10px; position:sticky; top:var(--muH,0px); z-index:60;
  margin:-22px -22px 0; padding:14px 22px 16px;
  background:linear-gradient(180deg, rgba(11,10,32,.5) 0%, rgba(11,10,32,.34) 45%, rgba(11,10,32,.12) 78%, rgba(11,10,32,0) 100%);
  backdrop-filter:blur(11px); -webkit-backdrop-filter:blur(11px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,.55) 84%,transparent 100%)}
.brand{font-family:'Cormorant Garamond',serif; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--white); opacity:.96; white-space:nowrap; text-shadow:0 1px 10px rgba(0,0,0,.5)}
.langSw{display:flex; gap:6px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:5px; width:fit-content; margin:10px auto 0}
.langSw button{background:none; border:none; color:var(--lav); font-family:'Sora'; font-weight:600; font-size:13px; padding:9px 22px; border-radius:999px; cursor:pointer; transition:background .25s}
.langSw button.on{background:var(--catA); color:#1c1204}
.prLabel{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); text-align:center; margin-top:26px}
.statNum{position:relative; font-family:'Cormorant Garamond',serif; font-size:32px; color:#fff; padding-right:18px; text-shadow:0 0 14px rgba(0,0,0,.6)}
.lvlPill{display:inline-block; border:1px solid currentColor; border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:600; letter-spacing:.04em}
.lvlBar{height:8px; border-radius:999px; background:rgba(255,255,255,.14); margin-top:9px; overflow:hidden}
.lvlFill{height:100%; border-radius:999px; background:currentColor; transition:width .6s ease}
.stCat{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); margin:24px 0 10px; text-align:center}
.dIcon{padding:12px 14px; display:flex; align-items:center}
h1{font-family:Georgia,'Noto Serif','Times New Roman',serif; font-weight:600; font-size:32px; color:var(--white); line-height:1.2}
h1,h2,h3,.greet,.greetHub,.blessing,.numTitle,.lpName,.sub,.verse{text-wrap:balance; hyphens:none; -webkit-hyphens:none}
h1 em{font-style:italic}
.sub{font-size:14.5px; font-weight:400; margin-top:11px; line-height:1.72; opacity:.96; font-family:'Sora',sans-serif}
.hero{text-align:center; margin-top:5vh; padding:0 4px}
.hero h1{font-size:27px; line-height:1.15; margin:0}
.hero .sub{font-size:14.5px; margin-top:7px; line-height:1.5}
.cta{width:100%; margin-top:16px; padding:16px; border:none; border-radius:999px; cursor:pointer;
  color:#1c1204; font-family:'Sora'; font-weight:600; font-size:15px; transition:transform .2s}
.cta:active{transform:scale(.97)}
.ghost{background:rgba(10,8,22,.3); border:1px solid rgba(255,255,255,.35); color:var(--white); border-radius:999px; padding:13px 18px; font-family:'Sora'; font-size:13.5px; cursor:pointer}
/* themes */
.tG .cta{background:linear-gradient(135deg,var(--catA),var(--catA)); box-shadow:0 0 24px color-mix(in srgb, var(--catA) 35%, transparent)}
.tG h1 em{color:var(--catA)}
.tK .cta{background:linear-gradient(135deg,var(--catA),var(--catA)); color:#160e2e; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 40%, transparent)}
.tK h1 em{color:var(--catA)}
.tV .cta{background:linear-gradient(135deg,var(--catA),var(--catA)); color:#04140c; box-shadow:0 0 24px color-mix(in srgb, var(--catA) 30%, transparent)}
.tV h1 em{color:var(--catA)}
.tR .cta{background:linear-gradient(135deg,#ef6a5a,#c0392b); color:#2a0a06; box-shadow:0 0 24px rgba(239,68,68,.35)}
.tR h1 em{color:var(--catA)}
/* letter materialize */
.vch{opacity:0; filter:blur(7px); display:inline-block; animation:mat .9s ease forwards}
.vw{display:inline-block; white-space:nowrap}
@keyframes mat{to{opacity:1; filter:blur(0)}}
/* fields */
.field{margin-bottom:13px; text-align:left}
.field label{display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.96; margin-bottom:6px; color:var(--gold-soft)}
.field input{width:100%; background:var(--card); border:1px solid rgba(255,255,255,.2); border-radius:15px;
  color:var(--white); font-family:'Sora'; font-weight:500; font-size:16px; text-align:center; padding:13px 15px; outline:none;
  backdrop-filter:blur(8px); color-scheme:dark; transition:border .3s}
.field input:focus{border-color:var(--gold)}
.field input::placeholder{color:rgba(221,215,242,.4); transition:opacity .2s}
.field input:focus::placeholder{opacity:0}
.hint{font-size:14.5px; opacity:.7; margin-top:5px; font-weight:400}
body, .screen, .bigCard, .ladder, .allItem, .tool, p, b, span, div{overflow-wrap:break-word; hyphens:none}
.deBal, #deBody p, #deBody b, .yOpt{text-wrap:balance}
.screen{box-sizing:border-box}
.cityWrap{position:relative}
.cityDrop{position:absolute; left:0; right:0; top:100%; margin-top:6px; z-index:30; background:rgba(14,12,30,.97); border:1px solid rgba(255,255,255,.16); border-radius:14px; overflow:hidden; backdrop-filter:blur(10px); box-shadow:0 12px 34px rgba(0,0,0,.5); display:none}
.cityDrop.on{display:block}
.cityDrop div{padding:10px 13px; font-size:12.5px; font-weight:300; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.07)}
.cityDrop div:last-child{border-bottom:none}
.cityDrop div:active{background:rgba(255,255,255,.08)}
.cityDrop b{font-weight:600}
.cityOk{color:var(--catB); opacity:.95}
@keyframes lpBeat{0%,86%,100%{transform:scale(1); box-shadow:0 0 0 rgba(245,199,106,0)}90%{transform:scale(1.045); box-shadow:0 0 16px rgba(245,199,106,.34)}94%{transform:scale(1.012); box-shadow:0 0 7px rgba(245,199,106,.14)}}
.lpChip{animation:lpBeat 5s ease-in-out infinite}
.lpChip:active{transform:scale(.95)}
.lpChip::after{content:'';width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.8;margin-left:1px}
/* HUB */
.greetHub{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:26px; color:var(--white); text-align:center; margin-top:5vh; text-shadow:0 1px 12px rgba(0,0,0,.55)}
.gname{color:var(--gold); font-weight:600; font-style:normal}
.lpChip{display:flex; align-items:center; gap:7px; width:fit-content; margin:16px auto 0; font-size:14px; font-weight:600; letter-spacing:.06em; border:1.5px solid var(--catA); color:var(--catB); border-radius:999px; padding:9px 18px; cursor:pointer; user-select:none; background:color-mix(in srgb, var(--catA) 12%, transparent); box-shadow:0 0 18px -6px var(--catA); transition:transform .18s ease, background .25s ease}
.verse{margin:16px auto 0; max-width:330px; text-align:center; font-size:13.5px; font-weight:300; line-height:1.75; color:var(--white); text-shadow:0 1px 8px rgba(0,0,0,.5)}
.verse .vTitle{font-family:'Fraunces','Cormorant Garamond',serif; font-size:21px; font-weight:600; color:#fde68a; letter-spacing:.4px; margin-bottom:6px; text-shadow:0 0 20px rgba(250,204,21,.28)}
.verse{padding-bottom:22px !important; margin-bottom:0 !important}
.vMark{color:var(--gold); font-family:'Cormorant Garamond',serif; font-size:20px}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; margin-top:22px}
.hubSec{grid-column:1/-1; margin:16px 0 -2px; display:flex; align-items:center; gap:10px; cursor:pointer;
  user-select:none; -webkit-tap-highlight-color:transparent}
.hubSec:first-child{margin-top:2px}
.hubSec b{font-family:'Fraunces','Cormorant Garamond',serif; font-size:21px; font-weight:600; color:#fde68a;
  letter-spacing:.4px; text-shadow:0 0 20px rgba(250,204,21,.28)}
.hubSec i{flex:1; height:1px; background:linear-gradient(90deg, rgba(253,230,138,.32), rgba(253,230,138,0))}
.catBar{display:flex; gap:8px; margin:2px 0 4px}
/* Carusel: fereastra fixa, banda care gliseaza, slide-uri de latimea ferestrei.
   Banda NU primeste width; slide-urile cu min-width:100% ies in afara, iar
   translateX in pixeli cade exact pe fiecare. */
/* Fereastra ocupa toata latimea, ca vecinii sa se vada la margini. Slide-ul e
   cardul plus spatiul dintre carduri, iar centrarea o face JS-ul cu un decalaj,
   nu CSS-ul, fiindca banda se deplaseaza cu PASUL slide-ului, nu cu latimea ferestrei. */
.csView{--cw:min(297px,79%); --gap:10px; position:relative; width:100%; margin:8px auto 0;
  overflow:hidden; touch-action:pan-y; cursor:grab}
.csView:active{cursor:grabbing}
.csTrack{display:flex; will-change:transform}
/* padding pe slide, nu margine pe card: latimea slide-ului ramane exact cat
   fereastra, deci pasul glisarii nu se schimba, iar intre carduri raman 10px */
.csSlide{min-width:calc(var(--cw) + var(--gap)); padding:0 calc(var(--gap)/2); display:flex}
/* doar cardul din fata poarta text; vecinii se vad ca simple carduri */
.csSlide .csQ, .csSlide .csHint{transition:opacity .28s ease}
.csSlide:not(.on) .csQ, .csSlide:not(.on) .csHint{opacity:0}
.csSlide .csCard.play{position:relative; inset:auto; width:100%; aspect-ratio:5/7; margin:0; min-height:0;
  padding:66px 26px 58px; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background-size:cover; background-position:center;
  border:1px solid color-mix(in srgb, var(--cc, var(--catA)) 50%, transparent);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7)}
.csSlide .csCard.play::before{content:''; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--cc, var(--catA)) 20%, #17132c) 0%,
    color-mix(in srgb, var(--cc, var(--catA)) 8%, #100d20) 100%);
  opacity:.86}
.csSlide .csCard.play>*{position:relative; z-index:1}
.csCard.play>.csIco,.csCard.play>.csCatN,.csCard.play>.csHint{position:absolute; z-index:1}
.csCard.play .csQ{font-size:21px; line-height:1.5}
.csCard.play .csIco{position:absolute; top:24px; left:0; right:0; display:flex; justify-content:center; color:var(--cc, var(--catA)); opacity:.92}
.csCard.play .csCatN{position:absolute; bottom:22px; left:20px; right:20px; text-align:center; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--cc, var(--catA)) 75%, #fff); opacity:.8}
.csHint{position:absolute; left:0; right:0; bottom:46px; display:flex; flex-direction:column; align-items:center;
  gap:7px; pointer-events:none; transition:opacity .6s ease}
.csHint.gone{opacity:0}
.csHint i{font-style:normal; font-size:11.5px; opacity:.55; letter-spacing:.04em}
.csFinger{width:19px; height:26px; border:1.6px solid var(--catA); border-radius:11px 11px 9px 9px;
  position:relative; opacity:.85; animation:csSwipeHand 2.4s ease-in-out infinite}
.csFinger::before{content:''; position:absolute; top:-9px; left:50%; margin-left:-1px; width:2px; height:9px;
  background:var(--catA); border-radius:2px}
@keyframes csSwipeHand{
  0%,12%{transform:translateX(34px); opacity:0}
  22%{opacity:.9}
  62%{transform:translateX(-34px); opacity:.9}
  76%,100%{transform:translateX(-34px); opacity:0}
}
/* titluri clar mai mari decat paragrafele si pe culoarea categoriei; inainte
   erau la 12px, adica MAI MICI decat cele 14.5px ale textului */
/* Verde curat, literal, nu `var(--green)`: acela e redirectat pe culoarea
   categoriei si ar iesi verde-inchis pe Corp, unde traieste Harta Durerii. */
.pmMinBtn{background:linear-gradient(135deg,#34d399,#10b981); color:#04231a; font-weight:700;
  border:none; box-shadow:0 0 22px -4px rgba(52,211,153,.55)}
.pmMinBtn:active{transform:scale(.985)}
.rfSecH{display:block; font-size:17px; font-weight:600; color:var(--catB); line-height:1.3}
.rfCardT{display:block; font-size:17px; font-weight:600; color:var(--catB)}
.rfSecT{font-family:'Fraunces','Cormorant Garamond',serif; font-size:19px; font-weight:600;
  color:var(--catB); margin:26px 0 10px}










.rfSitBtn{width:100%; margin-top:14px; font-size:13px;
  border-color:color-mix(in srgb, var(--catA) 50%, transparent); color:var(--catB)}
.rfSit{margin-top:14px; text-align:center; padding:20px 17px}
/* acelasi font ca restul paragrafelor: serifa italica se citea greu pe blocuri lungi */
.rfSitM{font-family:'Sora',sans-serif; font-style:normal; font-weight:400; font-size:16px;
  color:var(--catB); margin:0; line-height:1.65; text-wrap:pretty}
.rfSit .qbsBar{margin-top:16px}
.rfSitT{font-size:12.5px; opacity:.6; margin:10px 0 0; letter-spacing:.05em}
/* buton de actiune, deci pe toata latimea ca restul */
.rfSitStop{width:100%; margin-top:16px}
.rfSitDone{font-size:30px; line-height:1; margin-bottom:8px; color:var(--catB)}
/* SABLONUL DE ISTORIC, o singura data pentru toata aplicatia */
/* meniul de card: trei puncte in coltul din dreapta sus, peste continut */
.dpSec, .dpMsg{position:relative}
.cmWrap{position:absolute; top:8px; right:8px; z-index:6}
.cmBtn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:32px; height:32px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:rgba(12,10,26,.5); backdrop-filter:blur(6px);
  color:var(--catB); -webkit-tap-highlight-color:transparent}
.cmBtn i{width:3px; height:3px; border-radius:50%; background:currentColor; display:block}
.cmBtn:active{background:color-mix(in srgb, var(--catA) 22%, transparent)}
.cmMenu{position:absolute; top:38px; right:0; min-width:172px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); background:rgba(16,13,32,.97); backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.5); display:none; z-index:7}
.cmMenu.on{display:block}
.cmMenu button{display:block; width:100%; padding:12px 14px; background:none; border:0;
  border-bottom:1px solid rgba(255,255,255,.07); color:var(--catB); font-family:inherit;
  font-size:13.5px; text-align:left; cursor:pointer}
.cmMenu button:last-child{border-bottom:0}
.cmMenu button:active{background:color-mix(in srgb, var(--catA) 16%, transparent)}
/* titlul sectiunii lasa loc butonului */
.dpSec>b, .dpMsg>b{padding-right:40px}
.dpHead{text-align:center; margin-bottom:20px}
.dpNums{font-size:12px; letter-spacing:.22em; opacity:.5}
.dpArch{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700;
  font-size:30px; line-height:1.1; color:var(--catB); margin-top:5px}
.dpStat{margin:9px 0 0; opacity:.85}
.dpSec{background:var(--card); border:1px solid color-mix(in srgb, var(--catA) 22%, transparent);
  border-radius:18px; padding:16px 17px; margin-bottom:11px}
.dpSec>b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--catA); margin-bottom:9px}
.dpSec p{margin:0}
.dpSec p+p{margin-top:9px}
#cmWhyBody p{margin:0}
#cmWhyBody p+p{margin-top:11px}
.dpLine{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:700;
  font-size:19px; color:var(--catB); margin-top:11px}
.dpRow{display:flex; gap:10px; padding:8px 0; align-items:baseline}
.dpRow+.dpRow{border-top:1px solid rgba(255,255,255,.07)}
.dpRow b{flex:0 0 33%; font-size:13.5px; color:var(--catB); font-weight:600}
.dpRow span{flex:1; line-height:1.6}
.dpFlip{display:flex; align-items:center; gap:9px; padding:7px 0; font-size:14.5px}
.dpFlip+.dpFlip{border-top:1px solid rgba(255,255,255,.07)}
.dpFlip span{flex:1; color:var(--catB)}
.dpFlip i{opacity:.45; font-style:normal}
.dpFlip em{flex:1; font-style:normal; opacity:.78; text-align:right}
.dpTick{position:relative; padding:6px 0 6px 22px; font-size:14.5px; line-height:1.5}
.dpTick::before{content:'\2022'; position:absolute; left:4px; top:5px; color:rgba(255,255,255,.35); font-size:16px}
.dpTick.on::before{content:'\2713'; color:var(--catA); font-size:13px; top:7px}
.dpStage{padding:9px 0}
.dpStage+.dpStage{border-top:1px solid rgba(255,255,255,.07)}
.dpStage b{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--catA)}
.dpStage span{display:block; margin-top:4px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:17px; line-height:1.35}
.dpQ{display:flex; gap:11px; padding:9px 0; align-items:baseline}
.dpQ+.dpQ{border-top:1px solid rgba(255,255,255,.07)}
.dpQ i{font-style:normal; font-size:12px; color:var(--catA); flex:0 0 14px}
.dpQ span{flex:1; line-height:1.6}
.dpMsg{border-radius:18px; padding:16px 17px; margin-top:14px;
  border:1px solid color-mix(in srgb, var(--catA) 45%, transparent);
  background:color-mix(in srgb, var(--catA) 10%, transparent)}
.dpMsg>b{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--catA); margin-bottom:9px}