/* Higher Self - build 1327, 1328 (verde inchis, file, carte cu mantra, bannere, bara mica de sus). Harta durerii cu Naia (js/32b-harta-player.js).
   Harta: Naia intreaga in fetru, fata / spate; Cap / Torso / Picioare apropie lin aceeasi poza.
   Fereastra zonei: coperta lui Naia din playlist, playerul episodului, apoi textele. */

/* ---------- harta ---------- */
#s-painmap #pmSeg.pmSeg{width:100%; max-width:340px; margin:14px auto 0; border-radius:26px; overflow:visible}
#s-painmap #pmSeg.pmSeg::after{content:none}
.ppMap{position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; border-radius:26px; background:#88a394;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.22); -webkit-tap-highlight-color:transparent}
.ppIn{position:absolute; left:0; top:0; width:100%; aspect-ratio:1696/2528; transform-origin:0 0;
  transition:transform .9s cubic-bezier(.45,0,.2,1); will-change:transform}
.ppIn img{position:absolute; inset:0; width:100%; height:100%; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none}
.ppPt{position:absolute; width:46px; height:46px; margin:0; padding:0; border:0; background:none; border-radius:50%; cursor:pointer;
  transform:translate(-50%,-50%) scale(calc(1 / var(--s,1))); transition:transform .9s cubic-bezier(.45,0,.2,1), opacity .45s ease;
  -webkit-tap-highlight-color:transparent; display:grid; place-items:center; z-index:1}
.ppPt i{position:relative; display:block; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #fffaf0 0%, #ffe3a8 42%, #ffb85c 100%);
  box-shadow:0 0 0 2px rgba(255,248,232,.55), 0 0 14px 5px rgba(255,190,96,.75), 0 0 34px 10px rgba(255,190,96,.32)}
.ppPt i::after{content:''; position:absolute; inset:-9px; border-radius:50%; border:2px solid rgba(255,233,190,.8);
  animation:ppRing 2.4s cubic-bezier(.3,.6,.3,1) infinite; opacity:0}
.ppPt:nth-child(3n) i::after{animation-delay:.8s}
.ppPt:nth-child(3n+1) i::after{animation-delay:1.6s}
@keyframes ppRing{0%{transform:scale(.55); opacity:.9}100%{transform:scale(1.5); opacity:0}}
.ppPt:active i{transform:scale(.88)}
.ppPt.out{opacity:0; pointer-events:none}
.ppMap.still .ppIn, .ppMap.still .ppPt{transition:none !important}
@media (prefers-reduced-motion:reduce){ .ppIn, .ppPt{transition-duration:.01s !important} .ppPt i::after{animation:none} }

/* ---------- fereastra zonei ---------- */
.pmPop{position:fixed; top:0; bottom:0; left:50%; width:min(100vw,430px); z-index:200; color:#f5efe4;
  --ppTop:#d9e8b5; --ppMid:#173527; --ppBot:#06110b;
  opacity:0; pointer-events:none; transform:translate(-50%,26px); transition:opacity .35s ease, transform .55s cubic-bezier(.22,.7,.3,1)}
.pmPop.on{opacity:1; pointer-events:auto; transform:translate(-50%,0)}
.ppBg{position:absolute; inset:0; background:linear-gradient(180deg, var(--ppMid) 0%, var(--ppBot) 78%)}
.ppSc{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.ppHero{position:relative; width:100%; aspect-ratio:1/1; max-height:50vh; background-size:cover; background-position:center 28%;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
.ppX{position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); right:12px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; padding:0; color:#fff; background:rgba(15,12,31,.42); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer}
.ppHead{position:relative; margin-top:-64px; padding:0 22px; text-align:center}
.ppEy{display:block; text-shadow:0 1px 10px rgba(0,0,0,.55); font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ppTop)}
.ppHead h2{margin:6px 0 4px; font-family:var(--font-title); font-style:italic; font-weight:700; font-size:36px; line-height:1.1; color:#f5efe4;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}
.ppHead p{margin:0; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.72}

.ppPl{margin:18px 16px 0; padding:14px 16px 12px; border-radius:24px; background:rgba(8,6,20,.32);
  border:1px solid rgba(255,255,255,.1); box-shadow:0 10px 30px rgba(0,0,0,.22)}
.ppBar{position:relative; height:24px; touch-action:none; cursor:pointer}
.ppBar i{position:absolute; left:7px; right:7px; top:10px; height:4px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden}
.ppBar em{display:block; height:100%; width:0; background:#f5efe4; border-radius:99px}
.ppBar span{position:absolute; top:5px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:#f5efe4;
  box-shadow:0 2px 8px rgba(0,0,0,.35); transition:transform .15s ease}
.ppBar.drag span{transform:scale(1.3)}
.ppTimes{display:flex; justify-content:space-between; padding:0 2px; margin-top:-2px; font-size:11.5px; font-variant-numeric:tabular-nums; opacity:.7}
.ppCtl{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; margin:4px 0 12px}
.ppMain{width:68px; height:68px; border-radius:50%; border:0; padding:0; display:grid; place-items:center; cursor:pointer;
  background:#f5efe4; color:#1d1630; box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .18s ease}
.ppMain:active{transform:scale(.94)}
.ppMain.busy{animation:softPulse 1.6s ease-in-out infinite}
.ppStep{border:0; background:none; padding:4px 0; color:#f5efe4; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; min-width:0}
.ppStep small{font-size:11px; opacity:.7; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ppStep:active{opacity:.6}
.ppTools{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; padding-top:12px; border-top:1px solid rgba(255,255,255,.1)}
.ppTl{position:relative; border:0; background:none; padding:0; color:#f5efe4; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--font-body); font-size:10.5px; font-weight:600; cursor:pointer; min-width:0}
.ppTl i{width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); transition:background-color .3s ease, color .3s ease}
.ppTl i svg{width:20px; height:20px}
.ppTl span{max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ppTl.on i{background:rgba(245,239,228,.92); color:#1d1630; border-color:transparent}
.ppTl[data-k="loop"].on i{background:rgba(255,255,255,.08); color:#f5efe4; border-color:rgba(255,255,255,.16)}
.ppTl[data-n]:not([data-n=""])::after{content:attr(data-n); position:absolute; top:-5px; left:calc(50% + 11px); min-width:16px; box-sizing:border-box;
  padding:2px 5px; border-radius:99px; background:var(--ppTop); color:#16122b; font-size:9.5px; font-weight:800; line-height:1.2; text-align:center}
.ppTl.busy i{animation:softPulse 1.4s ease-in-out infinite}
.ppTl:active i{transform:scale(.92)}

.ppBody{padding:22px 22px 0}
.ppAgain{text-align:center; color:var(--ppTop); margin:0 0 16px; line-height:1.55}
#pmPop .ppBody .lbl{color:var(--ppTop) !important}
#pmPop .pmMoreB{color:#f5efe4; border-color:rgba(245,239,228,.32); background:rgba(255,255,255,.06)}
#pmPop .pmMantra{width:100% !important; max-width:none !important; box-sizing:border-box; background:#122a1f url(../img/hs-cardbg-body.webp) center/cover no-repeat;
  border:0; border-radius:20px; padding:18px 16px; margin:8px 0 18px; text-align:center; box-shadow:0 10px 26px rgba(0,0,0,.25)}
#pmPop .pmMantra b{display:block; color:#d9e8b5; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:8px}
#pmPop .pmMantra p{margin:0; font-family:var(--font-title); font-style:italic; font-size:18px; line-height:1.5; color:#f4f1e6}
.ppBtn{display:block; width:100%; min-height:52px; margin:0 0 10px; border:0; border-radius:999px; background:#f5efe4; color:#1d1630;
  font-family:var(--font-body); font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.22)}
.ppBtn:active{transform:scale(.98)}
.ppBtnO{background:transparent; color:#f5efe4; border:1.5px solid rgba(245,239,228,.5); box-shadow:none}
#pmPop #pmAIBox .yInput{background:rgba(255,255,255,.06); color:#f5efe4; border-color:rgba(245,239,228,.3) !important}
#pmPop #pmAIBox .cta{background:#f5efe4 !important; color:#1d1630 !important; border-radius:999px}
.ppDisc{margin:18px 4px 0; font-size:12px; line-height:1.5; text-align:center; opacity:.55}
.ppMin{text-align:center; padding-top:2px}
.ppMinT{margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ppTop)}
.ppMinS{opacity:.82; line-height:1.65; margin:0 0 14px}
.ppMinN{font-family:var(--font-title); font-variant-numeric:tabular-nums; font-size:44px; line-height:1.1; color:#f5efe4}
.ppMinBar{height:6px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin:14px 0 6px}
.ppMinBar div{height:100%; width:0; background:#f5efe4; border-radius:99px; transition:width 1s linear}
.ppMinTr{opacity:.7; margin:8px 0 18px}
/* foile playerului (muzica, sunete, bucla) acopera fereastra */
#pmPop > .muNowSheet{z-index:5}

/* cat e deschisa fereastra, dockul si mini playerul de sus se retrag */
body.ppOn #dock.dk5{transform:translateY(140px) !important; opacity:0 !important; pointer-events:none !important}

@media (max-width:370px){
  .ppHead h2{font-size:31px}
  .ppPl{margin:16px 12px 0; padding:12px 12px 10px}
  .ppTl i{width:38px; height:38px}
  .ppTl{font-size:10px}
  .ppMain{width:62px; height:62px}
  .ppBody{padding:20px 18px 0}
}
@media (max-height:700px){
  .ppHero{max-height:44vh}
  .ppHead{margin-top:-46px}
}

/* ---------- 1328 ---------- */
/* butoanele de sub poza: Fata / Spate primele */
#s-painmap .ppVRow{margin-top:14px !important}
/* filele Emotional / Fizic / Spiritual */
.ppTabs{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); margin:0 0 4px}
.ppTab{height:40px; border:0; border-radius:999px; background:transparent; color:#f5efe4; font-family:var(--font-body); font-size:13.5px; font-weight:700;
  cursor:pointer; opacity:.78; transition:background-color .35s ease, color .35s ease, opacity .35s ease; -webkit-tap-highlight-color:transparent}
/* 1329: pastila crem aluneca sub fila aleasa (ca la dock) */
.ppTabs{position:relative}
.ppTab{position:relative; z-index:1; background:transparent !important; transition:color .45s ease, opacity .45s ease}
.ppTab.on{color:#14301f; opacity:1}
.ppTabInd{position:absolute; top:4px; bottom:4px; left:4px; width:0; border-radius:999px; background:#f5efe4; box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:left .62s cubic-bezier(.45,0,.2,1), width .62s cubic-bezier(.45,0,.2,1); pointer-events:none; z-index:0}
.ppTabInd.still{transition:none}
.ppTabBox.in{animation:ppIn .45s ease both}
@keyframes ppIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
#pmPop .ppSep{margin:22px 0 14px}
#pmPop .ppSep b{font-size:15px; white-space:nowrap}
.ppShort p{font-size:17px; line-height:1.6; margin:0 0 8px; color:#f5efe4}
.ppDeep p{font-size:15px; line-height:1.7; margin:0 0 10px; color:rgba(245,239,228,.88)}
/* cartea cu mantra: Naia in spate, ca la cartile de pe Acasa */
.ppMc{position:relative; width:min(78%,300px); margin:4px auto 0; aspect-ratio:472/655; border-radius:16px; overflow:hidden;
  background-color:#0d1f15; background-size:cover; background-position:center top; box-shadow:0 18px 40px rgba(0,0,0,.45)}
.ppMc::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,18,12,0) 0%, rgba(7,18,12,.05) 38%, rgba(7,18,12,.82) 66%, rgba(7,18,12,.96) 100%)}
.ppMc::after{content:''; position:absolute; inset:9px; border-radius:11px; border:1px solid rgba(245,239,228,.32); pointer-events:none}
.ppMcIn{position:absolute; left:0; right:0; top:62%; padding:0 18px; text-align:center}
.ppMcIn small{display:block; font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#d9e8b5}
.ppMcIn p{margin:10px 0 0; font-family:var(--font-title); font-weight:700; font-size:22px; line-height:1.25; color:#f5efe4; text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ppMcIn p span{display:block; white-space:nowrap}
.ppMcIn i{display:block; width:26px; height:2px; margin:12px auto 0; background:#d9e8b5; border-radius:2px}
.ppMcIn em{position:absolute; left:0; right:0; top:calc(100% + 0px); display:none}
.ppMcSh{display:flex; align-items:center; justify-content:center; gap:8px; margin:14px auto 0; height:44px; padding:0 22px; border-radius:999px;
  background:transparent; color:#f5efe4; border:1.5px solid rgba(245,239,228,.5); font-family:var(--font-body); font-size:14px; font-weight:700; cursor:pointer}
.ppMcSh svg{width:18px; height:18px}
.ppMcSh.busy{opacity:.6}
/* bannerele: minutul de atentie si AI */
.ppBans{display:grid; gap:12px; margin:26px 0 0}
.ppBan{position:relative; display:block; width:100%; aspect-ratio:1290/547; padding:0; border:0; border-radius:20px; overflow:hidden; cursor:pointer;
  background-color:#14301f; background-size:cover; background-position:center; box-shadow:0 10px 26px rgba(0,0,0,.35); color:#f5efe4; text-align:center;
  transition:transform .18s ease}
.ppBan:active{transform:scale(.98)}
.ppBan span{position:absolute; left:24%; right:24%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:6px}
.ppBan b{font-family:var(--font-title); font-size:18px; font-weight:700; line-height:1.2; text-shadow:0 2px 10px rgba(0,0,0,.45)}
.ppBan em{font-style:normal; font-family:var(--font-body); font-size:11.5px; line-height:1.35; opacity:.82}
/* bara mica de sus, cand playerul iese din ecran */
.ppMini{position:absolute; left:10px; right:10px; top:calc(8px + env(safe-area-inset-top,0px)); z-index:4; display:flex; align-items:center; gap:8px;
  padding:7px 8px 9px; border-radius:18px; background:rgba(12,30,20,.92); border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 28px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); overflow:hidden;
  opacity:0; transform:translateY(-120%); pointer-events:none; transition:transform .45s cubic-bezier(.22,.7,.3,1), opacity .3s ease}
.ppMini.on{opacity:1; transform:none; pointer-events:auto}
.ppMini img{width:40px; height:40px; border-radius:10px; object-fit:cover; flex:none}
.ppMiTx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ppMiTx b{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ppMiTx em{font-style:normal; font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.62; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ppMiB{width:36px; height:36px; flex:none; border:0; padding:0; border-radius:50%; background:none; color:#f5efe4; display:grid; place-items:center; cursor:pointer}
.ppMiP{width:40px; height:40px; background:#f5efe4; color:#14301f}
.ppMiBar{position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden}
.ppMiBar em{display:block; height:100%; width:0; background:#f5efe4}
@media (max-width:370px){
  .ppMcIn p{font-size:19px}
  .ppBan b{font-size:16px}
  .ppBan em{font-size:10.5px}
  .ppTab{font-size:12.5px}
}
.ppMinM{margin:0 0 16px; padding:20px 16px; border-radius:20px; background:#122a1f url(../img/hs-cardbg-body.webp) center/cover no-repeat; box-shadow:0 10px 26px rgba(0,0,0,.25)}
.ppMinM small{display:block; font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#d9e8b5}
.ppMinM p{margin:10px 0 0; font-family:var(--font-title); font-weight:700; font-size:21px; line-height:1.3; color:#f5efe4}
.ppMinM p span{display:block}

/* ---------- 1329 [stated]: cardul hartii intunecat, cu text alb, ca restul aplicatiei ---------- */
#s-painmap.screen > .thHero + div{background:linear-gradient(rgba(140,190,160,.13), rgba(140,190,160,.13)), #1d3b2b url(../img/hs-cardbg-body.webp) center/cover no-repeat !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 34px rgba(0,0,0,.35) !important; color:#f5efe4}
#s-painmap:not(#s-hub) .bdGrid .bChip{background:rgba(255,255,255,.07) !important; color:#f5efe4 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important}
#s-painmap:not(#s-hub) .bdGrid .bChip.on{background:#f5efe4 !important; color:#14301f !important; box-shadow:0 4px 14px rgba(0,0,0,.25) !important}
#s-painmap .zoTapHint{color:rgba(245,239,228,.86) !important; opacity:1 !important}
#s-painmap .pmDisc{color:rgba(245,239,228,.6) !important; opacity:1 !important}
#s-painmap .ppMap{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.35)}

/* ---------- 1330 [stated]: varianta C, controalele sub poza ---------- */
#s-painmap .ppCtlRow{display:flex; align-items:flex-start; gap:10px; max-width:340px; margin:14px auto 0}
#s-painmap .ppSegC.bdGrid{position:relative; flex:1; gap:0 !important; padding:4px; border-radius:999px; background:rgba(0,0,0,.26);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); margin:0 !important}
#s-painmap:not(#s-hub) .ppSegC.bdGrid .bChip, #s-painmap:not(#s-hub) .ppSegC.bdGrid .bChip.on{position:relative; z-index:1; background:transparent !important;
  box-shadow:none !important; min-height:40px; transition:color .45s ease !important}
#s-painmap:not(#s-hub) .ppSegC.bdGrid .bChip.on{color:#14301f !important}
#s-painmap .ppSegC.bdGrid > .ppSegInd{position:absolute !important; top:4px; bottom:4px; left:var(--sl,4px) !important; width:var(--sw,0px) !important; margin:0 !important; border-radius:999px; background:#f5efe4; box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:left .62s cubic-bezier(.45,0,.2,1), width .62s cubic-bezier(.45,0,.2,1); z-index:0; pointer-events:none}
#s-painmap .ppSegC.bdGrid > .ppSegInd.still{transition:none}
#s-painmap .ppFlip{flex:none; width:58px; border:0; padding:0; background:none; color:#f5efe4; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  -webkit-tap-highlight-color:transparent}
#s-painmap .ppFlip i{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.26); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:transform .62s cubic-bezier(.45,0,.2,1)}
#s-painmap .ppFlip.b i{transform:rotate(180deg)}
#s-painmap .ppFlip span{font-family:var(--font-body); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9}
#s-painmap .ppFlip:active i{background:rgba(255,255,255,.12)}
.ppMap.flipIn .ppIn{animation:ppFlipIn .5s ease both}
@keyframes ppFlipIn{from{opacity:0} to{opacity:1}}
.ppShort p{text-align:center}