/* Znajomi i Kapsuła (public/znajomi.js, makieta propozycje/znajomi-wyzwania). Prefiks zn- (krótkie nazwy w app.css kolidują).
   Wybrane elementy: podniesienie i jaśniejsze tło, bez kolorowych obwódek. Bez filter/mask na animowanych elementach (WebKit). */
.btn.mi{border-image-source:url(img/orbita/ui/odp-d.webp)!important;color:#eafff9}
.btn.sk{border-image-source:url(img/orbita/ui/odp-b.webp)!important;color:#fff}
.btn .pxi{width:20px;height:20px;object-fit:contain}

/* kafel Znajomi na ekranie głównym + plakietka */
.zn-kf{position:relative}
.zn-kf .pxi{width:24px;height:24px;object-fit:contain;image-rendering:auto}
.zn-bdg{position:absolute;top:-15px;right:-15px;min-width:20px;height:20px;padding:0 4px;display:grid;place-items:center;background:var(--coral);color:#fff;font-family:var(--display);font-size:11px;line-height:1;border:2px solid #1a1430;box-shadow:2px 2px 0 var(--edge)}
.zn-bdg[hidden]{display:none}
/* pasek sprawy nad przyciskami startu */
#znpasek:empty{display:none}
.zn-wiad{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(8,30,44,.88);border:2px solid #2f6a8a;box-shadow:3px 3px 0 var(--edge);margin:0 0 10px}
.zn-wiad .t{flex:1;min-width:0;font-size:12px;line-height:1.3;color:var(--muted);font-weight:700}
.zn-wiad .t b{display:block;font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.03em;color:var(--ink);margin-bottom:2px}
.zn-wiad .btn{flex:none;width:auto;min-height:36px;padding:0 6px}
.zn-wik{width:30px;height:40px;object-fit:contain;flex:none;image-rendering:auto}

/* twarz postaci w ramce koloru postaci, kropka obecności */
.zn-tw{width:44px;height:44px;flex:none;position:relative;background:var(--pc,#2b3566);border:3px solid #0b0f1f;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),2px 2px 0 var(--edge);overflow:hidden}
.zn-tw img{width:100%;height:100%;display:block;max-width:none}
.zn-tw.l{width:64px;height:64px}
.zn-on{position:absolute;right:1px;bottom:1px;width:9px;height:9px;background:var(--mint);border:2px solid #0b0f1f}
.zn-on.gra{background:var(--orange)}
.zn-nasz{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle}

/* lista znajomych */
.zn-lista{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.zn-sek{font-family:var(--display);font-size:10px;letter-spacing:.08em;color:var(--sky);display:flex;align-items:center;gap:8px;margin-top:6px}
.zn-sek::after{content:'';flex:1;height:2px;background:#22294d}
.zn-fr{display:flex;align-items:center;gap:10px;padding:8px;background:rgba(10,14,30,.78);border:2px solid #22294d;box-shadow:3px 3px 0 var(--edge);-webkit-tap-highlight-color:transparent;cursor:pointer}
.zn-fr .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.zn-fr .t b{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.zn-fr .t small{font-size:11px;font-weight:700;color:var(--muted)}
.zn-fr .t small.on{color:var(--mint)}.zn-fr .t small.gra{color:var(--orange)}
.zn-fr .btn{flex:none;width:auto;min-height:36px;padding:0 4px;font-size:11px}
.zn-fr.nowy{background:rgba(40,30,8,.82);border-color:#7a5a12}
.zn-fr.ruch{background:rgba(8,30,44,.85);border-color:#2f6a8a}
.zn-kik{width:24px;height:34px;object-fit:contain;flex:none;image-rendering:auto}
.zn-wys{flex:none;font-family:var(--display);font-size:9px;letter-spacing:.04em;color:var(--dim)}
.zn-ost{display:flex;align-items:center;gap:8px;padding:6px 8px;background:rgba(10,14,30,.6);border:2px solid #22294d;color:var(--muted);font-size:12px;font-weight:700;text-align:left;width:100%}
.zn-ost span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zn-ost b{font-family:var(--display);font-weight:400;font-size:12px;color:var(--ink)}
.zn-ost b.w{color:var(--mint)}.zn-ost b.p{color:var(--coral)}
.zn-plus{width:auto!important;min-height:32px!important;padding:0 2px!important;font-size:10px!important;margin-left:6px;flex:none}
.lp .r .zn-wys{margin-left:6px}

/* arkusz znajomego */
.zn-ark{display:flex;flex-direction:column;gap:10px}
.zn-arkh{display:flex;align-items:center;gap:12px}
.zn-arkh h3{margin:0;text-align:left}
.zn-arkh p{margin:2px 0 0}
.zn-ark .row .btn{padding:0 2px;font-size:11px}

/* dodaj znajomego */
.zn-lbl{font-family:var(--display);font-size:9px;letter-spacing:.08em;color:var(--dim)}
.zn-kody{display:flex;gap:4px;justify-content:center}
.zn-kody i{font-style:normal;width:32px;height:42px;display:grid;place-items:center;font-family:var(--display);font-size:19px;color:#1a1430;background:#e8ecff;border:2px solid #1a1430;box-shadow:inset -3px -3px 0 #aab4e0,2px 2px 0 var(--edge)}
.zn-kody .sep{width:6px}
.zn-qr{width:140px;height:140px;padding:6px;background:#cff5df;border:3px solid var(--mint);box-shadow:0 0 0 3px #0b2a17,3px 3px 0 3px var(--edge)}
.zn-qr img{width:100%;height:100%;display:block;image-rendering:pixelated}
.zn-tk{font-size:12px;line-height:1.45;color:var(--muted);font-weight:700;margin:0}
.zn-tk b{color:var(--ink)}
.zn-inp{text-align:center;font-family:var(--display)!important;font-size:22px!important;letter-spacing:.18em;text-transform:uppercase}
.zn-dodaj .row .btn{min-height:40px}

/* A1 wysłanie kapsuły */
.zn-para{align-items:center;gap:6px}
.zn-twarze{justify-content:center;align-items:center;gap:16px}
.zn-twarze>*{flex:none}
.zn-kduza{width:34px;height:51px;object-fit:contain;image-rendering:auto}
.zn-siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.zn-sekb{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;font-family:var(--display);font-size:10px;letter-spacing:.03em;background:rgba(10,14,30,.8);border:2px solid #22294d;box-shadow:3px 3px 0 var(--edge);color:var(--muted);-webkit-tap-highlight-color:transparent;transition:transform .12s}
.zn-sekb img{height:24px;width:auto;max-width:none}
.zn-sekb.wyb{background:#26306a;color:var(--ink);border-color:#5a6ab8;transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--edge)}
.zn-sekb.cala{height:40px;width:100%}

/* A2 pytanie */
.zn-hk{width:30px;height:44px;object-fit:contain;image-rendering:auto;flex:none}
.zn-kropki{display:flex;gap:6px;justify-content:center;flex:none}
.zn-kropki i{width:30px;height:8px;background:#22294d;border:1px solid #0b0f1f}
.zn-kropki i.ter{background:var(--yellow)}.zn-kropki i.ok,.zn-kropki i.by{background:var(--mint)}.zn-kropki i.zle{background:var(--coral)}
.zn-odsl{padding:10px 12px;background:rgba(10,14,30,.85);border:2px solid #22294d;box-shadow:3px 3px 0 var(--edge);margin-bottom:10px}
.zn-odsl b{display:block;font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.03em}
.zn-odsl.ok b{color:var(--mint)}.zn-odsl.zle b{color:var(--coral)}
.zn-odsl p{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--muted);font-weight:700}
#znods:empty{display:none}
.ord .o.ok{background:#14432c;border-color:#2f9a5a}

/* po wysłaniu: odlot (6 klatek, krok co 0,18 s, raz) */
.zn-odlot{align-items:center;gap:12px}
.zn-start{position:relative;width:91px;height:300px}
.zn-start img{position:absolute;inset:0;width:100%;height:100%;opacity:0;image-rendering:auto;animation:zn-kl 1.08s steps(1) forwards;animation-delay:calc((var(--i) - 1) * .18s)}
.zn-start img:nth-child(6){animation-name:zn-kl6}
@keyframes zn-kl{0%{opacity:1}16.7%,100%{opacity:0}}
@keyframes zn-kl6{0%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.zn-start img{animation:none}.zn-start img:nth-child(1){opacity:1}}

/* A3 wynik */
.zn-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.zn-vs .g{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.zn-vs .g b{font-family:var(--display);font-weight:400;font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zn-vs .pkt{font-family:var(--display);font-size:24px;color:var(--yellow);text-shadow:2px 2px 0 var(--edge)}
.zn-vs .g.lose .pkt{color:var(--muted)}
.zn-vs .x{font-family:var(--display);font-size:14px;color:var(--dim)}
.zn-wyn{gap:6px}
.zn-wr{display:grid;grid-template-columns:52px 1fr 52px;gap:6px;align-items:center;padding:6px;background:rgba(10,14,30,.78);border:2px solid #22294d;box-shadow:2px 2px 0 var(--edge);color:var(--ink);text-align:left;width:100%;-webkit-tap-highlight-color:transparent}
.zn-wr .q{font-size:12px;line-height:1.25;font-weight:700;display:flex;gap:6px;align-items:center;min-width:0}
.zn-wr .q img{height:18px;width:auto;flex:none}
.zn-wr .s{font-family:var(--display);font-size:11px;text-align:center;padding:4px 0;border:2px solid #0b0f1f}
.zn-wr .s.ok{background:#1d5c3a;color:#c6ffd9}.zn-wr .s.zle{background:#5c1d26;color:#ffc6cc}
.zn-wr .s.lep{background:#2f8a4f;color:#fff;transform:translateY(-1px) scale(1.06);box-shadow:2px 2px 0 var(--edge)}
.zn-nagr{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 8px;background:rgba(40,30,8,.85);border:2px solid #7a5a12;font-family:var(--display);font-size:11px;letter-spacing:.03em;color:var(--yellow);text-align:center}
.zn-mq{color:var(--ink)!important;text-align:center}
.zn-mod{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.zn-mod .chip{white-space:normal;justify-content:center;line-height:1.3}
.zn-mrow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.zn-mrow b{font-family:var(--display);font-weight:400;font-size:11px;color:var(--ink)}
.zn-mrow i{font-style:normal;font-family:var(--display);font-size:12px;color:var(--yellow)}
/* odsłona w kapsule: dobra odpowiedź jasna i podniesiona, mój wybór (zły) przygaszony mniej niż reszta */
#znans .a.ok,#znpf button.ok{opacity:1!important;transform:translateY(-2px) scale(1.02)}
#znans .a.pick.no,#znpf button.pick.no{opacity:.7!important}
#znods .btn{width:100%}