/* sq-collections: pasek kolekcji na wyniku + "Kolejne do kolekcji" + modal zdobycia.
   Wyglad wg makiety pliki/osiagniecia-2/samequizy-wynik-kolekcje.html. */

/* ---------- pasek kolekcji ---------- */
.sqcol-strip{display:flex;align-items:center;gap:13px;margin:14px 18px 18px;background:linear-gradient(135deg,#faf7ff,#f2ecff);border:1px solid #e2d8f7;border-radius:13px;padding:12px 14px;cursor:pointer;transition:transform .13s,box-shadow .13s;text-decoration:none;color:inherit}
.sqcol-strip:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(120,90,200,.13)}
.sqcol-strip .sqcol-cov{width:52px;height:52px;border-radius:50%;flex:none;background:#f4f5f7;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;isolation:isolate;overflow:visible}
.sqcol-cov img{width:66%;height:66%;object-fit:contain}
.sqcol-cov.lk img{filter:grayscale(1);opacity:.55}
.sqcol-cov{position:relative;isolation:isolate}
.sqcol-cov::before{content:'';position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.5px))}
.sqcol-cov.rk0::before{background:#e2e5e9}
.sqcol-cov.rk1::before{background:conic-gradient(from 210deg,#6e3a1f,#9c5230,#c97c54,#9c5230,#6e3a1f)}
.sqcol-cov.rk2::before{background:conic-gradient(from 210deg,#7d8ea3,#c3d0dd,#ffffff,#c3d0dd,#7d8ea3)}
.sqcol-cov.rk3::before{background:conic-gradient(from 210deg,#b07607,#f0b429,#ffe28a,#f0b429,#b07607)}
.night .sqcol-cov{background:#26282b}
/* blok pod quizem (ablock): ikona nie jest kolem ze strip (brak border-radius) - ciemne tlo
   rysowalo KWADRAT za odznaka; tlo daje warstwa poziomu (sqcol-bg), wiec tu przezroczyste */
.night .sqcol-ablock .sqcol-cov{background:transparent}
.night .sqcol-cov.rk0::before{background:#3a3d40}
.sqcol-strip .sqcol-main{flex:1;min-width:0}
.sqcol-strip .sqcol-top{display:flex;align-items:center;gap:8px}
.sqcol-strip .sqcol-nm{font-size:13.5px;font-weight:800}
.sqcol-plus{font-size:10.5px;font-weight:800;color:#fff;background:#8b5cf6;border-radius:99px;padding:2px 8px;opacity:0;transform:scale(.6);transition:all .35s cubic-bezier(.2,1.4,.4,1)}
.sqcol-strip.sqcol-bump .sqcol-plus{opacity:1;transform:scale(1)}
.sqcol-strip .sqcol-sub{font-size:11.5px;color:#8a9199;font-weight:600;margin-top:1px;display:block}
.sqcol-strip .sqcol-sub b{color:#7b5cc9}
.sqcol-bar{height:7px;border-radius:99px;background:#e8e2f5;overflow:hidden;margin-top:7px;display:inline-block;vertical-align:middle;width:100%}
.sqcol-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8b5cf6,#a98fd8);width:0;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.sqcol-strip .sqcol-chev{color:#a08fd0;font-weight:800;flex:none}
.sqcol-chips{margin:10px 0 0;display:flex;gap:6px;flex-wrap:wrap}
.sqcol-chip{font-size:11px;font-weight:700;color:#7b5cc9;background:#f2ecff;border:1px solid #e2d8f7;border-radius:99px;padding:3px 10px}
.sqcol-guest{margin:10px 0 0;font-size:12.5px;color:#5a626b;background:#fdf3da;border:1px solid #f3dfa8;border-radius:11px;padding:10px 13px;line-height:1.5;margin:10px 10px 10px}
.sqcol-guest a{font-weight:800;color:#8a6410}

/* ---------- kolejne do kolekcji ---------- */
.sqcol-next-h{display:flex;align-items:center;gap:9px;margin:20px 18px 10px}
.sqcol-next-h h2{font-size:15px;font-weight:800;margin:0}
.sqcol-next-h span{font-size:12px;color:#8a9199;font-weight:600}
.sqcol-nextrow{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:0 18px 18px}
.sqcol-nq{background:#fff;border:1px solid #e7e9ed;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .13s,box-shadow .13s;text-decoration:none;color:inherit;display:block}
.sqcol-nq:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(44,51,58,.12)}
.sqcol-nq .sqcol-th{height:74px;background-size:cover;background-position:center;background-color:#e8e2f5}
.sqcol-nq .sqcol-t{padding:9px 11px 4px;font-size:12px;font-weight:700;line-height:1.35}
.sqcol-nq .sqcol-pl{font-size:10px;font-weight:800;color:#7b5cc9;padding:0 11px 10px}
@media only screen and (max-width:690px){
  .sqcol-nextrow{grid-template-columns:repeat(3,1fr);gap:8px}
  .sqcol-nq .sqcol-th{height:56px}
}

/* ---------- modal zdobycia ---------- */
.sqcol-ovl{position:fixed;inset:0;background:rgba(30,25,50,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:99999999}
.sqcol-unlock{background:#fff;border-radius:20px;max-width:400px;width:100%;padding:26px 24px 22px;text-align:center;position:relative;overflow:hidden;animation:sqcolpop .4s cubic-bezier(.2,1.3,.4,1);font-family:inherit}
@keyframes sqcolpop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.sqcol-conf{position:absolute;top:-10px;font-size:14px;animation:sqcolfall 2.6s ease-in forwards;pointer-events:none}
@keyframes sqcolfall{to{transform:translateY(480px) rotate(360deg);opacity:0}}
.sqcol-ulbl{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#8a9199}
.sqcol-uic{width:96px;height:96px;border-radius:50%;margin:14px auto 12px;background:#f4f5f7;display:flex;align-items:center;justify-content:center;font-size:46px;position:relative;isolation:isolate;overflow:visible;animation:sqcolglow 1.6s ease infinite alternate}
.sqcol-uic img{width:66%;height:66%;object-fit:contain}
.sqcol-uic::before{content:'';position:absolute;inset:-5px;border-radius:50%;z-index:-1;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6.5px))}
.sqcol-uic.rk1::before{background:conic-gradient(from 210deg,#6e3a1f,#9c5230,#c97c54,#9c5230,#6e3a1f)}
.sqcol-uic.rk2::before{background:conic-gradient(from 210deg,#7d8ea3,#c3d0dd,#ffffff,#c3d0dd,#7d8ea3)}
.sqcol-uic.rk3::before{background:conic-gradient(from 210deg,#b07607,#f0b429,#ffe28a,#f0b429,#b07607)}
@keyframes sqcolglow{to{box-shadow:0 0 0 5px #f6f1ff,0 0 40px rgba(139,92,246,.55)}}
.sqcol-uname{font-size:23px;font-weight:800;letter-spacing:-.4px}
.sqcol-urar{display:inline-block;margin-top:7px;background:#f1ebfe;color:#8b5cf6;font-size:11.5px;font-weight:800;border-radius:99px;padding:4px 13px}
.sqcol-unext{margin-top:16px;background:#faf7ff;border:1px solid #e2d8f7;border-radius:12px;padding:11px 13px;text-align:left}
.sqcol-unext .l{font-size:10.5px;font-weight:800;letter-spacing:.7px;color:#7b5cc9}
.sqcol-unext .n{font-size:13px;font-weight:700;margin-top:2px}
.sqcol-unext .f{font-size:11px;color:#8a9199;font-weight:700;margin-top:4px;text-align:right}
.sqcol-gift{margin-top:11px;background:#fdf3da;border:1px solid #f3dfa8;border-radius:12px;padding:12px 13px;text-align:left;display:flex;gap:11px;align-items:center}
.sqcol-gift .g{font-size:22px;flex:none}
.sqcol-gift .t{font-size:12.5px;font-weight:700;color:#8a6410;flex:1}
.sqcol-gift .t b{color:#6b4d0a}
.sqcol-cta{width:100%;margin-top:16px;background:#47CAB3;color:#fff;border:0;border-radius:11px;padding:13px;font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer}
.sqcol-cta:hover{background:#20B19D}
.sqcol-later{background:none;border:0;margin-top:10px;font-family:inherit;font-size:13px;font-weight:700;color:#8a9199;cursor:pointer;display:inline-block}

/* ---------- reduced motion (brief P3.4) ---------- */
@media (prefers-reduced-motion: reduce){
  .sqcol-conf{display:none}
  .sqcol-uic{animation:none}
  .sqcol-unlock{animation:none}
  .sqcol-bar i{transition:none}
}

/* ---------- dark mode (.night) ---------- */
.night .sqcol-strip{background:#1c1c1c;border-color:#474747}
.night .sqcol-strip .sqcol-nm,.night .sqcol-strip .sqcol-sub{color:#b7b7b7}
.night .sqcol-bar{background:#26282b}
.night .sqcol-chip{background:#26282b;border-color:#474747;color:#b9a6f5}
.night .sqcol-guest{background:#26282b;border-color:#474747;color:#b7b7b7}
.night .sqcol-guest a{color:#f0b429}
.night .sqcol-nq{background:#1c1c1c;border-color:#474747}
.night .sqcol-nq .sqcol-t{color:#b7b7b7}
.night .sqcol-next-h h2{color:#b7b7b7}
.night .sqcol-unlock{background:#1c1c1c;color:#b7b7b7}
.night .sqcol-uname{color:#e6e6e6}
.night .sqcol-unext{background:#26282b;border-color:#474747}
.night .sqcol-gift{background:#26282b;border-color:#474747}
.night .sqcol-gift .t{color:#e0c26a}
.night .sqcol-gift .t b{color:#f0b429}

/* sekcja kolekcji jak author-block */
.sqcol-ablock{margin:0}
.sqcol-ablock .sqcol-cov{width:64px;height:64px;font-size:26px}
.sqcol-ablock .ai{min-width:0;flex:1}
.sqcol-ablock .meta b{color:#7b5cc9}
.sqcol-ablock .sqcol-bar{max-width:230px} /* krotszy - licznik x/y siedzi obok w tej samej linii */
.sqcol-ablock .sqcol-plus{vertical-align:middle;margin-left:6px}
.sqcol-ablock.sqcol-bump .sqcol-plus{opacity:1;transform:scale(1)}
.sqcol-aq{margin:0}

/* Kolekcje pod quizem = OSOBNA, samodzielna karta NAD autorem (decoupled od .author-wrap, ktore rozciagalo border) */
.sqcol-wrap{box-sizing:border-box;background:#fff;border-radius:5px;box-shadow:0 6px 22px -14px rgba(15,23,42,.35);margin:0 auto 14px;max-width:1060px;display:block;position:static;float:none;clear:both;width:auto;height:auto;min-height:0;overflow:visible}
.sqcol-ablock{box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:16px 18px;margin:0;width:100%}
.sqcol-ablock .sqcol-cov{position:relative;top:0;width:64px;height:64px;min-width:64px;font-size:26px;flex:none;display:flex;align-items:center;justify-content:center;align-self:flex-start} /* gorna krawedz ikony = gorna krawedz tekstu */
.sqcol-ablock .sqcol-cov img{width:60%;height:60%;object-fit:contain}
.sqcol-ablock .ai{min-width:0;flex:1}
.sqcol-ablock .name{display:block}
.sqcol-ablock .meta b{color:#15222D}
.sqcol-ablock .acts{flex:none;align-items:center;display:flex;gap:8px}
.sqcol-tag{color:#48cab3;font-weight:800}
.sqcol-frac{display:inline-block;vertical-align:middle;font-size:11.5px;font-weight:800;color:#7b5cc9;margin:7px 0 0 10px;text-align:left}
.night .sqcol-wrap{background:#1c1c1c;border-color:#474747}
.night .sqcol-ablock .meta b{color:#e6e6e6}
.night .sqcol-frac{color:#b9a6f5}

/* popup odbioru: X w rogu, Odbierz pelna szerokosc + odstep + pulse */
.sqcol-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;background:#f2f5f7;border-radius:50%;font-size:20px;line-height:1;color:#66757f;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center;padding:0}
.sqcol-x:hover{background:#e5e9ee;color:#1f2530}
.night .sqcol-x{background:#26282b;color:#b7b7b7}
.sqcol-cta{display:block;width:100%;margin-top:18px;box-sizing:border-box;text-align:center;text-decoration:none;color:#fff!important;animation:sqcolpulse 1.8s ease-in-out infinite}
@keyframes sqcolpulse{0%,100%{box-shadow:0 0 0 0 rgba(71,202,179,.5)}50%{box-shadow:0 0 0 9px rgba(71,202,179,0)}}
@media (prefers-reduced-motion: reduce){ .sqcol-cta{animation:none} }
.sqcol-cov .sqcol-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0}
.sqcol-cov img:not(.sqcol-bg){position:relative;z-index:1}
.sqcol-uic{position:relative}
.sqcol-uic .sqcol-uicbg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;z-index:0}
.sqcol-uic img:not(.sqcol-uicbg){position:relative;z-index:1;width:58%;height:58%;object-fit:contain}
.sqcol-gnote{margin-top:8px;font-size:12px;color:#8a97a5;font-weight:600;text-align:center}
.night .sqcol-gnote{color:#8a9199}
/* "Wiecej do kolekcji": tytul dokladnie do 3 linii, dalej wielokropek.
   Motywowa sztywna wysokosc .aq-card ucinala 3. linie w pol - w tej sekcji auto. */
.sqcol-aq .aq-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;max-height:calc(3 * 1.3em + 20px)} /* 3 linie tekstu + padding 10+10 (border-box); clamp daje ..., max-height tnie rowniutko za 3. linia */
.sqcol-aq .aq-card{height:auto!important;max-height:none!important}
.sqcol-aq .aq-scroll{height:auto!important;max-height:none!important;align-items:stretch}

/* MOBILE: kompaktowy blok kolekcji - ikona+tekst u gory, pod spodem JEDEN rzad: pasek + licznik + przycisk
   (wczesniej pasek, licznik i przycisk spadaly do osobnych linii i blok byl bardzo wysoki) */
@media(max-width:690px){
  .sqcol-wrap .sqcol-ablock{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:12px;align-items:center}
  .sqcol-wrap .sqcol-ablock .sqcol-cov{grid-column:1;grid-row:1/3;align-self:start}
  .sqcol-wrap .sqcol-ablock .ai{display:contents}
  .sqcol-wrap .sqcol-ablock .ai .name{grid-column:2/5;grid-row:1;align-self:end}
  .sqcol-wrap .sqcol-ablock .ai .meta{grid-column:2/5;grid-row:2;align-self:start}
  .sqcol-wrap .sqcol-ablock .sqcol-bar{grid-column:1/3;grid-row:3;display:block;width:auto;max-width:none;margin:12px 0 0}
  .sqcol-wrap .sqcol-ablock .sqcol-frac{grid-column:3;grid-row:3;margin:12px 0 0;white-space:nowrap}
  .sqcol-wrap .sqcol-ablock .acts{grid-column:4;grid-row:3;margin:12px 0 0}
  .sqcol-wrap .sqcol-ablock .acts .prof{white-space:nowrap}
  .sqcol-wrap .sqcol-ablock .sqcol-arr{display:none}
}

/* ---------- rozwijacz "liczy sie tez do N innych kolekcji" (makieta samequizy-wynik-kolekcje-zwiniete) ---------- */
.sqcol-xp{display:flex;align-items:center;gap:11px;margin:13px 15px 0;padding:13px 0;border-top:1px solid #eef1f4;cursor:pointer;user-select:none}
.sqcol-stack{display:flex;flex:none}
.sqcol-mini{width:28px;height:28px;border-radius:50%;background:#f0f2f5;border:2px solid #fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-left:-8px;overflow:hidden;flex:none}
.sqcol-mini:first-child{margin-left:0}
.sqcol-mini img{width:70%;height:70%;object-fit:contain}
.sqcol-xt{font-size:12.5px;font-weight:700;color:#8a97a5;flex:1;min-width:0}
.sqcol-xt b{color:#3d4a55}
.sqcol-car{font-size:11px;color:#8a97a5;transition:transform .18s;flex:none}
.sqcol-xp.open .sqcol-car{transform:rotate(180deg)}
.sqcol-rest{display:none}
.sqcol-wrap.sqcol-open .sqcol-rest{display:block}
.night .sqcol-xp{border-top-color:#2e2e2e}
.night .sqcol-mini{background:#26282b;border-color:#1c1c1c}
.night .sqcol-xt{color:#8a9199}
.night .sqcol-xt b{color:#b7b7b7}