/* Higher Self - build 1300. Albumul de carduri (#bqAl), pagina costumului, cardul pe tot ecranul (#bqFs)
   si alegerea costumului urmator (#bqPk). Aceeasi paleta ca foaia Drumul zilei (css/29). */
#bqAl,#bqFs,#bqPk{--bq-bg:#0f0b16; --bq-panel:#1b1626; --bq-line:#352c49; --bq-text:#f1ebfa; --bq-muted:#a59bbb;
  --bq-gold:#e3b862; --bq-gold2:#fff1c1; --bq-ok:#7fd99a; color:var(--bq-text)}

/* ===== Album ===== */
#bqAl{position:fixed; inset:0; z-index:430; display:none; background:var(--bq-bg);
  opacity:0; transform:translateY(22px); transition:opacity .26s ease, transform .3s cubic-bezier(.3,.7,.3,1)}
#bqAl.on{display:block}
#bqAl.show{opacity:1; transform:none}
#bqAl .alScroll{position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:calc(18px + env(safe-area-inset-top,0px)) 16px calc(40px + env(safe-area-inset-bottom,0px)); max-width:520px; margin:0 auto}
#bqAl .alScroll::-webkit-scrollbar{display:none}
#bqAl .alTop{display:flex; align-items:center; gap:10px; margin-bottom:14px}
#bqAl .alTop>div:first-child,#bqAl .alBack+div{flex:1; min-width:0}
#bqAl h1{font-family:var(--font-title); font-weight:700; font-size:24px; margin:0; color:var(--bq-text); line-height:1.15}
#bqAl .alSub{font-family:var(--font-body); font-size:12px; color:var(--bq-muted); margin-top:2px}
#bqAl .alChip{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}
#bqAl .alX,#bqAl .alBack{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}
#bqAl .alSeason{margin-top:18px}
#bqAl .alSh{display:flex; align-items:baseline; gap:8px; margin-bottom:10px; font-family:var(--font-body)}
#bqAl .alSh b{font-size:14px; font-weight:700; color:var(--bq-text)}
#bqAl .alSh span{font-size:12px; color:var(--bq-muted); flex:1; min-width:0}
#bqAl .alSh i{font-style:normal; font-size:12px; color:var(--bq-gold)}
#bqAl .alGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px 10px}
#bqAl .alVault{margin-top:30px; padding-top:18px; border-top:1px solid var(--bq-line)}
#bqAl .alVault h2{font-family:var(--font-title); font-weight:700; font-size:18px; margin:0; color:var(--bq-gold)}
#bqAl .alVault p{font-family:var(--font-body); font-size:12px; color:var(--bq-muted); margin:4px 0 0; line-height:1.45}

/* cardul in grila: complet / inceput / neinceput */
#bqAl .alCard{display:block; align-self:start; width:100%; padding:0; border:0; background:none; color:inherit; cursor:pointer; text-align:center;
  font-family:var(--font-body); -webkit-tap-highlight-color:transparent}
#bqAl .alCard:disabled{cursor:default}
#bqAl .alArt{position:relative; display:block; aspect-ratio:900/1342; border-radius:10px; overflow:hidden;
  border:1px solid var(--bq-line); background:#16121f; box-shadow:0 8px 22px rgba(0,0,0,.45)}
#bqAl .alArt img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
#bqAl .alOv{position:absolute; inset:0; display:block}
#bqAl .alOv svg{width:100%; height:100%; display:block}
#bqAl .alCard.full .alArt{border-color:rgba(227,184,98,.55)}
#bqAl .alCard.part .alArt img{filter:blur(3px) brightness(.42) saturate(.7); transform:scale(1.06)}
#bqAl .alCard.none .alArt img{filter:brightness(.16) saturate(.35); transform:scale(1.02)}
#bqAl .alLock{position:absolute; left:50%; top:36%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%;
  background:rgba(15,11,22,.72); border:1px solid rgba(227,184,98,.45); color:var(--bq-gold); display:flex; align-items:center; justify-content:center}
#bqAl .alN{position:absolute; left:0; right:0; top:48%; text-align:center; font-size:12px; font-weight:700; color:var(--bq-text); text-shadow:0 1px 6px rgba(0,0,0,.8)}
#bqAl .alNow{position:absolute; left:6px; top:6px; font-size:10px; font-weight:700; letter-spacing:.04em; color:#241a06; background:var(--bq-gold); border-radius:999px; padding:2px 7px}
#bqAl .alName{display:block; margin-top:6px; font-size:12px; line-height:1.3; color:var(--bq-muted)}
#bqAl .alCard.full .alName{color:var(--bq-text)}

/* ===== Pagina costumului ===== */
#bqAl .csCardWrap{display:flex; justify-content:center; margin:6px 0 4px}
#bqAl .csCard{width:190px}
#bqAl .csState{font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--bq-muted); text-align:center; margin:12px 0 16px}
#bqAl .csItems{display:grid; grid-template-columns:repeat(3,1fr); gap:12px 10px}
#bqAl .csIt{text-align:center; font-family:var(--font-body); position:relative}
#bqAl .csImg{position:relative; display:block; aspect-ratio:1; border-radius:14px; overflow:hidden; border:1px solid var(--bq-line); background:#16121f}
#bqAl .csImg img{width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0) invert(.16)}
#bqAl .csIt:not(.got) .csImg: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)}
#bqAl .csIt.got .csImg{border-color:var(--bq-gold)}
#bqAl .csIt.got .csImg img{filter:none}
#bqAl .csIt.gold .csImg{border-color:#fff1c1; box-shadow:0 0 0 1px #e3b862, 0 0 14px rgba(227,184,98,.35)}
#bqAl .csNm{display:block; margin-top:6px; font-size:11.5px; line-height:1.3; color:var(--bq-muted)}
#bqAl .csIt.got .csNm{color:var(--bq-text)}
#bqAl .csGold{display:inline-block; margin-top:3px; font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--bq-gold); text-transform:uppercase}
#bqAl .csGift{font-family:var(--font-body); font-size:12px; color:var(--bq-muted); text-align:center; margin:18px 0 0}
#bqAl .csBtn{display:block; width:100%; margin-top:18px; border:0; border-radius:14px; padding:13px 16px; background:var(--bq-gold); color:#241a06;
  font-family:var(--font-body); font-weight:700; font-size:14px; cursor:pointer}
#bqAl .csBtn.on{background:transparent; border:1px solid rgba(127,217,154,.5); color:var(--bq-ok); cursor:default}

/* buton spre album in foaia Drumul zilei */
#bqOv .bqAlbumBtn{display:block; width:100%; margin-top:14px; background:var(--bq-panel); border:1px solid var(--bq-line); color:var(--bq-text);
  border-radius:14px; padding:12px 16px; font-family:var(--font-body); font-weight:600; font-size:14px; cursor:pointer}

/* ===== Cardul pe tot ecranul ===== */
#bqFs{position:fixed; inset:0; z-index:460; display:none; opacity:0; transition:opacity .26s ease;
  background:radial-gradient(ellipse at 50% 40%,#231a36 0%,#07050c 70%)}
#bqFs.on{display:block}
#bqFs.show{opacity:1}
#bqFs .fsStage{position:absolute; inset:0 0 96px 0; display:flex; align-items:center; justify-content:center; padding-top:env(safe-area-inset-top,0px)}
#bqFs .fsCard{position:relative; display:block; padding:0; border:0; background:none; cursor:pointer;
  height:min(calc(100vh - 190px), calc(92vw * 1342 / 900)); aspect-ratio:900/1342; border-radius:clamp(14px,2.2vh,24px); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(227,184,98,.18); -webkit-tap-highlight-color:transparent}
#bqFs .fsCard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
#bqFs .fsCard.rvImg img{animation:bqUnblur 1s ease-out both}
#bqFs .fsOv{position:absolute; inset:0; display:block}
#bqFs .fsOv svg{width:100%; height:100%; display:block}
#bqFs .fsX{position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:14px; z-index:3; width:38px; height:38px; border-radius:50%;
  border:1px solid #362e4a; background:rgba(20,15,30,.78); color:var(--bq-text); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0}
#bqFs .fsNav{position:absolute; top:50%; transform:translateY(-60%); z-index:3; width:38px; height:38px; border-radius:50%; border:0;
  background:rgba(20,15,30,.7); color:var(--bq-text); font-size:22px; line-height:1; cursor:pointer; padding:0 0 3px}
#bqFs .fsNav.l{left:6px}
#bqFs .fsNav.r{right:6px}
#bqFs .fsCap{position:absolute; left:0; right:0; bottom:calc(14px + env(safe-area-inset-bottom,0px)); text-align:center; font-family:var(--font-body); padding:0 56px}
#bqFs .fsCap b{display:block; font-family:var(--font-title); font-size:18px; color:var(--bq-text)}
#bqFs .fsCap span{display:block; font-size:12px; color:var(--bq-muted); margin-top:2px}
#bqFs .fsCap em{display:block; font-style:normal; font-size:11px; color:var(--bq-muted); opacity:.7; margin-top:6px}

/* ===== Alegerea costumului urmator ===== */
#bqPk{position:fixed; inset:0; z-index:470; display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto; background:rgba(6,4,10,.9)}
#bqPk.on{display:flex; animation:bqFade .3s both}
#bqPk .pkBox{width:100%; max-width:380px; margin:auto; background:var(--bq-panel); border:1px solid var(--bq-line); border-radius:22px; padding:18px 16px}
#bqPk h2{font-family:var(--font-title); font-weight:700; font-size:20px; line-height:1.25; margin:0 0 12px; color:var(--bq-text); text-align:center}
#bqPk .pkList{display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto; scrollbar-width:none}
#bqPk .pkRow{position:relative; display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#16121f; border:1px solid var(--bq-line);
  border-radius:14px; padding:8px; color:var(--bq-text); cursor:pointer; font-family:var(--font-body)}
#bqPk .pkRow.on{border-color:var(--bq-gold); background:rgba(227,184,98,.1)}
#bqPk .pkRow img{width:40px; aspect-ratio:900/1342; object-fit:cover; border-radius:6px; flex:0 0 auto}
#bqPk .pkT{flex:1; min-width:0}
#bqPk .pkT b{display:block; font-size:14px; font-weight:600; line-height:1.3}
#bqPk .pkT span{display:block; font-size:12px; color:var(--bq-muted); margin-top:2px}
#bqPk .pkRow em{font-style:normal; font-size:10px; font-weight:700; color:#241a06; background:var(--bq-gold); border-radius:999px; padding:2px 8px; white-space:nowrap}
#bqPk .pkOk{display:block; width:100%; margin-top:14px; border:0; border-radius:14px; padding:13px 16px; background:var(--bq-gold); color:#241a06;
  font-family:var(--font-body); font-weight:700; font-size:14px; cursor:pointer}
@media (prefers-reduced-motion:reduce){
  #bqAl{transition:opacity .2s ease; transform:none}
  #bqFs .fsCard.rvImg img{animation:none}
}