/* Higher Self - build 1326.
   1) Cartea zilei: butonul "Trimite" langa "Continua" in ritual si "Trimite" + "Gata" jos in fereastra cartii (js/99b).
   2) Audio: bara de incarcare cu stele sub "Se incarca muzica..." (js/68), aceeasi constelatie ca la Numerele angelice. */

/* ---------- 1. Cartea zilei ---------- */
#cdOv .cdBtns, #cdMod .cdBtns{display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:nowrap}
#cdOv .cdBtns .cdBtn{padding:0 30px}
#cdOv .cdBtn.cdShareB, #cdMod .cdBtn.cdShareB{gap:8px; padding:0 22px; background:rgba(255,255,255,.08); color:#f0ece3;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cdAcc, #e8c26a) 80%, transparent), 0 10px 30px rgba(0,0,0,.35)}
#cdOv .cdBtn.cdShareB svg, #cdMod .cdBtn.cdShareB svg{flex:none; color:var(--cdAcc, #e8c26a)}
#cdMod .cdBtn{display:inline-flex; align-items:center; justify-content:center; height:52px; padding:0 34px; border-radius:26px; border:0;
  background:var(--cdAcc, #e8c26a); color:#0b0d22; font:600 15px var(--font-body); letter-spacing:.4px; cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.4); -webkit-tap-highlight-color:transparent; transition:transform .15s ease}
#cdMod .cdBtn:active, #cdOv .cdBtn.cdShareB:active{transform:scale(.97)}
#cdMod .cdBtn.busy, #cdOv .cdBtn.busy{opacity:.6; pointer-events:none}
#cdMod .cdMBtns{margin-top:22px; padding:0 20px calc(10px + env(safe-area-inset-bottom, 0px))}
#cdMod .cdX{margin-top:18px}
@media (max-width:370px){
  #cdOv .cdBtns .cdBtn{padding:0 24px}
  #cdOv .cdBtn.cdShareB, #cdMod .cdBtn.cdShareB{padding:0 18px}
  #cdMod .cdBtn{padding:0 28px}
}
/* pe ecrane scunde fereastra cartii se strange, ca butoanele sa incapa */
@media (max-height:700px){ #cdMod .cdMc{width:min(230px, 62vw)} #cdMod .cdMBtns{margin-top:16px} #cdMod .cdX{margin-top:14px} }

/* ---------- 2. Audio: incarcarea ---------- */
.muLd{display:flex; flex-direction:column; align-items:center; margin:22px auto 0; width:min(260px, 76%)}
.muLd .muLdT{margin:0 0 14px; font-size:var(--t-small, 14px); color:rgba(240,236,227,.82); text-align:center;
  animation:softPulse 2s ease-in-out infinite}
.muLd .muLdBar{position:relative; width:100%; height:18px}
.muLd .anCons{position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; height:18px;
  padding:0 10px; box-sizing:border-box; margin:0; z-index:1}
.muLd .anConsLine{position:absolute; left:4px; right:4px; top:50%; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--catB, #d9b45b) 45%, transparent), transparent);
  animation:anConsBreath 4.2s ease-in-out infinite}
.muLd .anCons i{position:relative; width:var(--s,5px); height:var(--s,5px); border-radius:50%; background:var(--catB, #d9b45b);
  opacity:.18; transform:scale(.62); animation:anConsTwinkle 4.2s cubic-bezier(.4,0,.35,1) infinite; animation-delay:var(--d,0s)}
/* linia care se umple: lent la inceput, aproape de capat cat asteptam, apoi se termina la .done */
.muLd .muLdFill{position:absolute; left:4px; top:calc(50% - 1px); height:2px; width:0; border-radius:2px; z-index:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--catB, #d9b45b) 85%, #fff 15%));
  box-shadow:0 0 8px color-mix(in srgb, var(--catB, #d9b45b) 60%, transparent);
  animation:muLdGrow 6s cubic-bezier(.12,.7,.2,1) forwards}
.muLd.done .muLdFill{animation:none; width:calc(100% - 8px); transition:width .35s ease-out}
@keyframes muLdGrow{0%{width:0} 100%{width:calc(88% - 8px)}}