/* Higher Self - build 1299. Drumul zilei: pastila din antet, foaia (prefix bq), animatia obiectului (.irv) si cardul (.cv).
   Dupa prototipul aprobat (integrare/reference/drumul-zilei.html), cu fonturile aplicatiei. */

/* ===== Pastila din antet ===== */
.bqPill{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-weight:700;
  font-size:var(--t-small); letter-spacing:.02em; color:var(--ink); cursor:pointer;
  background:rgba(240,232,214,.16); border:1px solid rgba(240,232,214,.30);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:999px; padding:5px 12px 5px 6px; -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease, background .2s, border-color .2s}
.bqPill:active{transform:scale(.95)}
.bqPill .bqRing{--p:0; width:18px; height:18px; flex:0 0 auto; border-radius:50%; position:relative;
  background:conic-gradient(#e3b862 calc(var(--p)*360deg), rgba(240,232,214,.22) 0)}
.bqPill .bqRing:after{content:""; position:absolute; inset:3.5px; border-radius:50%; background:rgba(20,18,40,.72)}
.bqPill.ok{border-color:rgba(227,184,98,.55)}
.bqPill .bqChk{color:#e3b862; font-weight:700}
body:not(.onHub) .bqPill{padding-right:11px}
@keyframes bqPulse{0%{transform:scale(1); box-shadow:0 0 0 0 rgba(227,184,98,.55)}40%{transform:scale(1.1); box-shadow:0 0 0 7px rgba(227,184,98,0)}100%{transform:scale(1); box-shadow:0 0 0 0 rgba(227,184,98,0)}}
.bqPill.bqPulse{animation:bqPulse .9s ease-out}

/* ===== Foaia Drumul zilei ===== */
#bqOv{--bq-bg:#0f0b16; --bq-panel:#1b1626; --bq-line:#352c49; --bq-text:#f1ebfa; --bq-muted:#a59bbb;
  --bq-gold:#e3b862; --bq-gold2:#fff1c1; --bq-ok:#7fd99a;
  position:fixed; inset:0; z-index:420; display:none; background:var(--bq-bg); color:var(--bq-text);
  opacity:0; transform:translateY(22px); transition:opacity .26s ease, transform .3s cubic-bezier(.3,.7,.3,1)}
#bqOv.on{display:block}
#bqOv.show{opacity:1; transform:none}
#bqOv .bqScroll{position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(36px + env(safe-area-inset-bottom,0px));
  max-width:520px; margin:0 auto; scrollbar-width:none}
#bqOv .bqScroll::-webkit-scrollbar{display:none}
#bqOv .bqTop{display:flex; align-items:center; gap:10px}
#bqOv .bqTop>div:first-child{flex:1; min-width:0}
#bqOv .bqDay{font-family:var(--font-body); font-size:var(--t-small); color:var(--bq-muted)}
#bqOv h1{font-family:var(--font-title); font-weight:700; font-size:24px; margin:2px 0 0; color:var(--bq-text); -webkit-tap-highlight-color:transparent; user-select:none}
#bqOv .bqChip{font-family:var(--font-body); font-size:11px; color:var(--bq-gold); border:1px solid rgba(227,184,98,.4);
  border-radius:999px; padding:3px 9px; white-space:nowrap}
#bqOv .bqX{flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--bq-line); background:var(--bq-panel);
  color:var(--bq-text); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
#bqOv .bqIntro{display:flex; gap:12px; align-items:center; margin:14px 0 16px; background:var(--bq-panel);
  border:1px solid var(--bq-line); border-radius:18px; padding:12px}
#bqOv .bqIntro img{width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--bq-gold); flex:0 0 auto}
#bqOv .bqIntro p{margin:0; font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--bq-muted)}
#bqOv .bqIntro b{color:var(--bq-text)}
#bqOv .bqProg{display:flex; align-items:center; gap:10px; margin-bottom:12px}
#bqOv .bqBar{flex:1; height:8px; background:#2a2339; border-radius:99px; overflow:hidden}
#bqOv .bqBar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#b07a2e,#e3b862,#fff1c1); transition:width .6s}
#bqOv .bqProg span{font-family:var(--font-body); font-size:12px; color:var(--bq-muted); white-space:nowrap}
#bqOv .bqQ{display:flex; gap:12px; align-items:center; background:var(--bq-panel); border:1px solid var(--bq-line);
  border-radius:18px; padding:12px; margin-bottom:10px; transition:.3s}
#bqOv .bqQ img{width:46px; height:46px; border-radius:14px; object-fit:cover; flex:0 0 auto}
#bqOv .bqQt{flex:1; min-width:0}
#bqOv .bqQt b{display:block; font-family:var(--font-body); font-weight:600; font-size:14px; line-height:1.35; color:var(--bq-text)}
#bqOv .bqQt span{font-family:var(--font-body); font-size:12px; color:var(--bq-muted)}
#bqOv .bqQ button{border:0; border-radius:12px; padding:9px 14px; font-family:var(--font-body); font-weight:600; font-size:13px;
  cursor:pointer; background:var(--bq-gold); color:#241a06; white-space:nowrap}
#bqOv .bqQ.done{border-color:rgba(127,217,154,.5); background:rgba(127,217,154,.06)}
#bqOv .bqQ.done button{background:transparent; color:var(--bq-ok); cursor:default}
#bqOv .bqReward{margin-top:14px; background:linear-gradient(180deg,#221a33,#1b1626); border:1px solid var(--bq-line);
  border-radius:20px; padding:14px}
#bqOv .bqReward h3{margin:0 0 8px; font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--bq-muted)}
#bqOv .bqNx{display:flex; gap:12px; align-items:center}
#bqOv .bqNx b{display:block; font-family:var(--font-body); font-size:14px; font-weight:600; line-height:1.35; color:var(--bq-text)}
#bqOv .bqNx span{display:block; font-family:var(--font-body); font-size:12px; color:var(--bq-muted); margin-top:2px}
#bqOv .bqSil{width:64px; height:64px; border-radius:14px; overflow:hidden; border:1px solid var(--bq-line); position:relative; flex:0 0 auto}
#bqOv .bqSil img{width:100%; height:100%; object-fit:cover; filter:brightness(0) invert(.18) blur(1px)}
#bqOv .bqSil:after{content:"?"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-title); font-weight:700; font-size:22px; color:var(--bq-gold)}
#bqOv .bqSil.got img{filter:none}
#bqOv .bqSil.got:after{content:none}
#bqOv .bqSil.gold{border-color:var(--bq-gold)}
#bqOv .bqSlots{display:flex; gap:6px; margin-top:12px}
#bqOv .bqSlot{flex:1; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--bq-line); background:#16121f}
#bqOv .bqSlot img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.25); display:block}
#bqOv .bqSlot.got{border-color:var(--bq-gold)}
#bqOv .bqSlot.got img{filter:none}
#bqOv .bqSlot.gold{border-color:#fff1c1; box-shadow:0 0 0 1px #e3b862}
#bqOv .bqTom{margin-top:16px; text-align:center; font-family:var(--font-body); font-size:12px; line-height:1.5; color:var(--bq-muted)}
#bqOv .bqMore{display:block; width:100%; margin-top:14px; padding:13px 16px; border-radius:14px; border:1px solid var(--bq-gold); background:transparent; color:var(--bq-gold); font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer}
/* randul de test, ascuns pana la 5 atingeri pe titlu */
#bqOv .bqTest{display:none; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px}
#bqOv .bqTest.on{display:flex}
#bqOv .bqTest button{background:var(--bq-panel); border:1px solid var(--bq-line); color:var(--bq-text); border-radius:10px;
  padding:8px 12px; font-family:var(--font-body); font-size:12px; cursor:pointer}
/* roata aurie cand se deschide unealta */
#bqGo{position:absolute; inset:0; z-index:3; display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:30px; text-align:center; background:var(--bq-bg)}
#bqGo.on{display:flex}
#bqGo img{width:110px; height:110px; border-radius:50%; object-fit:cover; border:2px solid var(--bq-gold)}
#bqGo h2{font-family:var(--font-title); font-weight:700; font-size:22px; margin:0; color:var(--bq-text)}
#bqGo p{font-family:var(--font-body); font-size:13px; line-height:1.5; margin:0; color:var(--bq-muted)}
#bqGo .bqSpin{width:96px; height:96px; border-radius:50%; border:3px solid #2a2339; border-top-color:var(--bq-gold);
  animation:bqSpin 1.2s linear infinite}
@keyframes bqSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  #bqOv{transition:opacity .2s ease; transform:none}
  #bqOv .bqBar i{transition:none}
  .bqPill.bqPulse{animation:none}
  #bqGo .bqSpin{animation-duration:3s}
}

/* ===== Animatia obiectului deblocat (.irv) si cardul (.cv), build 1299 ===== */
.irv,.cv{--bq-bg:#0f0b16; --bq-panel:#1b1626; --bq-line:#352c49; --bq-text:#f1ebfa; --bq-muted:#a59bbb;
  --bq-gold:#e3b862; --bq-gold2:#fff1c1; color:var(--bq-text); position:fixed; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; overflow-y:auto;
  -webkit-overflow-scrolling:touch; padding:calc(22px + env(safe-area-inset-top,0px)) 22px calc(22px + env(safe-area-inset-bottom,0px))}
.irv{z-index:440; background:radial-gradient(ellipse at 50% 34%,#2c1f47 0%,#0d0915 68%)}
.cv{z-index:450; background:rgba(6,4,10,.97)}
.irv.open{display:flex; animation:bqFade .4s both}
.cv.open{display:flex; animation:bqFade .3s both}
@keyframes bqFade{from{opacity:0}to{opacity:1}}
@keyframes bqUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@keyframes bqItem{0%{opacity:0; transform:scale(.4) rotate(-8deg); filter:brightness(0) blur(8px)}60%{filter:brightness(1.4) blur(0)}100%{opacity:1; transform:none; filter:none}}
@keyframes bqGlow{0%{opacity:0; transform:scale(.6)}50%{opacity:1}100%{opacity:.55; transform:none}}
@keyframes bqDraw{to{stroke-dashoffset:0}}
@keyframes bqUnblur{from{filter:blur(16px) brightness(.4); transform:scale(1.05)}to{filter:none; transform:none}}
.irv>*,.cv>*{flex:0 0 auto}
.irv>:first-child,.cv>:first-child{margin-top:auto}
.irv>:last-child,.cv>:last-child{margin-bottom:auto}
.irvLbl{font-family:var(--font-title); font-weight:700; font-size:12px; letter-spacing:4px; color:var(--bq-gold); opacity:0; animation:bqUp .6s .2s both}
.irvTile{position:relative; width:230px; height:230px; margin:16px 0 10px}
.irvGlow{position:absolute; inset:-40px; background:radial-gradient(circle,rgba(227,184,98,.45),transparent 62%); opacity:0; animation:bqGlow 1.4s .5s both; pointer-events:none}
.irvTile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:22px; animation:bqItem 1.1s .35s cubic-bezier(.2,1.3,.4,1) both}
.irvTile svg{position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); overflow:visible; pointer-events:none}
.irvFr{fill:none; stroke:url(#bqGq); stroke-width:2.5; stroke-dasharray:1; stroke-dashoffset:1; animation:bqDraw 1.1s .9s ease-out forwards}
.irvH{font-family:var(--font-title); font-weight:700; font-size:24px; margin:4px 0 0; color:var(--bq-text); opacity:0; animation:bqUp .6s 1.3s both}
.irvEn{font-family:var(--font-body); font-size:12px; color:var(--bq-muted); opacity:0; animation:bqUp .6s 1.4s both}
.irvQuote{margin:12px 0 0; font-family:var(--font-body); font-size:14px; line-height:1.5; font-style:italic; max-width:300px; color:var(--bq-text); opacity:0; animation:bqUp .6s 1.6s both}
.irvWho{font-family:var(--font-body); font-size:12px; color:var(--bq-gold); margin-top:4px; opacity:0; animation:bqUp .6s 1.7s both}
.irvNext{margin-top:18px; width:100%; max-width:320px; background:rgba(27,22,38,.85); border:1px solid var(--bq-line);
  border-radius:18px; padding:12px; text-align:left; opacity:0; animation:bqUp .6s 2s both}
.irvNext p{margin:0; font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--bq-muted)}
.irvNext p b{color:var(--bq-text)}
.irvNext .irvTom{margin-top:8px}
.irvNext .bqSlots{display:flex; gap:6px; margin-top:8px}
.irvNext .bqSlot{flex:1; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--bq-line); background:#16121f}
.irvNext .bqSlot img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.25); display:block}
.irvNext .bqSlot.got{border-color:var(--bq-gold)}
.irvNext .bqSlot.got img{filter:none}
.irvNext .bqSlot.gold{border-color:#fff1c1; box-shadow:0 0 0 1px #e3b862}
.irvCta{margin-top:16px; background:var(--bq-gold); color:#241a06; border:0; border-radius:14px; padding:12px 28px;
  font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer; opacity:0; animation:bqUp .6s 2.3s both}
.irvCta:disabled{cursor:default}
.cvCard{position:relative; width:250px; aspect-ratio:900/1342; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.7)}
.cvCard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:bqUnblur 1s ease-out both}
.cvOv{position:absolute; inset:0}
.cvOv svg{width:100%; height:100%; display:block}
.cvH{font-family:var(--font-title); font-weight:700; font-size:22px; margin:14px 0 2px; color:var(--bq-text); opacity:0; animation:bqUp .6s 2.6s both}
.cvSub{margin:0; font-family:var(--font-body); font-size:13px; color:var(--bq-muted); opacity:0; animation:bqUp .6s 2.7s both}
.cvSub.on{opacity:1; animation:none; color:var(--bq-gold); font-weight:600}
.cvGifts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; width:100%; max-width:330px; opacity:0; animation:bqUp .6s 2.9s both}
.cvGift{background:var(--bq-panel); border:1px solid var(--bq-line); border-radius:14px; padding:10px 6px; font-family:var(--font-body);
  font-size:12px; line-height:1.3; text-align:center; cursor:pointer; color:var(--bq-text)}
.cvGift:active{border-color:var(--bq-gold); background:rgba(227,184,98,.1)}
.cvGift span{display:block; color:var(--bq-muted); font-size:11px; margin-top:2px}
.cvMsg{margin:8px 0 0; max-width:300px; font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--bq-muted)}
.cv .cvDone{opacity:1; animation:bqUp .5s .1s both}
@media (prefers-reduced-motion:reduce){
  .irv *,.cv *{animation-duration:.01s !important; animation-delay:0s !important}
  .irv.open,.cv.open{animation:none}
}