/* Postać i profil (makieta propozycje/postacie-profil): tabliczka gracza na starcie (1B), edytor profilu z podestem i szafkami (2A),
   karta profilu w najmocniejszej sekcji (3B). Postacie z arkusza 6x6 (sprity6): kidle/kmach z mapa.css, klatki w procentach, więc działa w każdym rozmiarze.
   Bez kolorowych kółek; wybrane = podniesienie i jaśniejsze tło. Nieskończone animacje zasypiają po 30 s (spoczynek w app.js). */
.pspr{display:block;background-image:var(--im);background-size:600% 600%;background-repeat:no-repeat;background-position:0 40%;image-rendering:auto;pointer-events:none}
.pspr.zyje{animation:kidle var(--ti,8.25s) steps(1) infinite}
.pspr.wita{animation:kmach .68s steps(1) 2,kidle var(--ti,8.25s) steps(1) 1.36s infinite}

/* ---------- 1B: postać wychodzi z tabliczki ---------- */
.np.pm.pmb{position:relative;overflow:visible;height:58px;max-width:calc(100vw - 186px);padding:0 10px 0 52px!important;gap:0}
.np.pm.pmb .pspr{position:absolute;left:-14px;bottom:-7px;width:74px;height:74px}
.np.pm.pmb .t{min-width:0}
/* rząd 1: ksywka i poziom, rząd 2: rola w całości, rząd 3: cienki pasek XP */
.np.pm.pmb .t .pmeta{display:flex;align-items:center;gap:6px;min-width:0}
.np.pm.pmb .t .pmeta b{min-width:0;font-size:17px;line-height:1.05}
.np.pm.pmb .t>small{display:block;margin-top:3px;white-space:nowrap;font-family:var(--tk);font-size:14px;font-weight:400;color:var(--yellow);-webkit-font-smoothing:none;line-height:1}
.np.pm.pmb .t .plvl{display:inline-block;flex:none;font-family:var(--display);font-weight:400;font-size:9.5px;line-height:1;white-space:nowrap;background:var(--yellow);color:#2a1c00;padding:2px 4px;box-shadow:2px 2px 0 #05070f}
/* cienki pasek XP pod rolą na całą szerokość tekstu, żeby tabliczka nie rosła wszerz */
.np.pm.pmb .t .pxp{display:block;height:3px;margin-top:5px;background:#0a0d1c;box-shadow:inset 0 0 0 1px #2a3364}
.np.pm.pmb .t .pxp i{display:block;height:100%;width:calc(var(--p) * 100%);background:linear-gradient(90deg,#ffd23f,#ff8c5a)}

/* ---------- 2A: edytor profilu ---------- */
.join .top .t{font-size:16px;letter-spacing:.06em;color:#fff}
.join .top .t small{display:block;font-size:10px;color:var(--muted);letter-spacing:.12em;margin-top:2px}
/* scena rośnie z wolnym miejscem; kadr to wycinek x 440–1130, y 150–570 ściany odprawy (bez malowanych snopów), wszystko w nim w procentach */
.pscena{position:relative;flex:1 1 0;min-height:118px;max-height:236px;overflow:hidden;background:#141a30 url(img/orbita/hd/bok/sciana-odprawa-bez-snopow.webp) 50% 59.5%/auto 160% repeat-x;box-shadow:inset 0 0 0 3px #05070f;image-rendering:auto}
/* postać w świetle reflektorów (propozycje/postacie-lampka): ciemna nakładka tylko na ścianę, kadr nad nią (kadr ma transform, więc bez z-index
   leżał POD nakładką i postać z lampami była przyciemniona o połowę); wokół ciemniej, za postacią ciepła poświata, postać z arkusza podświetlonego */
.pscena::before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 44% 60% at 50% 62%,rgba(6,8,22,.18),rgba(6,8,22,.8) 100%);pointer-events:none}
.pscena .kadr{position:absolute;top:0;left:50%;z-index:2;height:100%;aspect-ratio:690/420;transform:translateX(-50%)}
.pscena .ekr{position:absolute;left:17.7%;top:10.9%;width:65.4%;height:58.2%;background:repeating-linear-gradient(0deg,rgba(90,216,255,.10) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgba(90,216,255,.10) 0 1px,transparent 1px 12px),radial-gradient(ellipse at 50% 70%,rgba(90,216,255,.30),transparent 70%)}
/* światło tylko z dwóch reflektorów: od głowicy lampy górna krawędź na hełm, dolna na podest przy stopach */
.pscena .snop{position:absolute;inset:0;z-index:2;pointer-events:none}
.pscena .snop.l{background:linear-gradient(125deg,rgba(255,234,176,.58) 8%,rgba(255,234,176,.26) 40%,rgba(255,234,176,.13) 70%);clip-path:polygon(8.7% 14.5%,50% 40%,50% 89.1%,42.1% 89.1%,8.1% 17.7%)}
.pscena .snop.p{background:linear-gradient(235deg,rgba(255,234,176,.58) 8%,rgba(255,234,176,.26) 40%,rgba(255,234,176,.13) 70%);clip-path:polygon(91.9% 14.5%,50% 42.7%,50% 89.1%,59.8% 89.1%,92.4% 17.7%)}
.pscena .lmp{position:absolute;z-index:5;top:5.5%;width:13%;height:20%;background:radial-gradient(closest-side,#fff 0,#fffbe8 22%,rgba(255,240,196,.75) 42%,rgba(255,236,180,0) 100%);pointer-events:none}
.pscena .lmp.l{left:3.7%}.pscena .lmp.p{left:86.3%}
.pscena .zaplec{position:absolute;z-index:2;left:24%;bottom:8%;width:52%;height:72%;background:radial-gradient(closest-side,rgba(255,234,176,.42),rgba(255,234,176,.16) 55%,rgba(255,234,176,0));pointer-events:none}
.pscena .plama{position:absolute;z-index:2;left:22%;bottom:6.5%;width:56%;height:16%;background:radial-gradient(ellipse,rgba(255,246,214,.85) 0,rgba(255,234,176,.35) 40%,rgba(255,234,176,0) 70%);pointer-events:none}
.pscena .pspr{position:absolute;z-index:3;left:28.95%;bottom:9.1%;width:42.1%;aspect-ratio:1;background-image:var(--lit,var(--im))}
.join .jl,.join .jp{display:contents} /* kolumny edytora tylko na komputerze (desk.css) */
.join .rola{flex:none;height:76px;overflow:hidden;border:10px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/20px;padding:1px 4px 0;font-size:12.5px;line-height:1.3} /* stała wysokość: rola + 2 linie opisu, scena nie skacze przy dłuższym opisie */
.join .rola span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.join .rola b{display:block;font-size:15px;margin:0 0 1px}
.szafki{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
/* koncepcja A (propozycje/postacie-lampka): w każdej szafce wisi zgaszona lampa; nad wybraną mruga raz jak świetlówka i się zapala,
   stożek światła spada na postać (z arkusza podświetlonego), pod stopami jasna plama. Reszta szafek przygaszona, żeby światło było jedno.
   Mruganie tylko przy zmianie wyboru (.zapal, 0,42 s), potem bez animacji poza oddechem postaci. Lampa: malunek LR1 (ui/szafka-lampa-off/on.webp), szafka bez grafik */
.szafka{position:relative;height:84px;padding:0;overflow:hidden;border-radius:0;background:linear-gradient(#141a3c,#0a0e26);box-shadow:inset 0 0 0 2px #05070f,inset 0 2px 0 3px #2a3364;transition:transform .15s,background .15s;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}
.szafka .opr{position:absolute;left:50%;top:0;width:36px;height:12px;margin-left:-18px;z-index:2;background:url(img/orbita/ui/szafka-lampa-off.webp) 0 0/100% 100%}
.szafka .opr::after{content:'';position:absolute;inset:0;background:url(img/orbita/ui/szafka-lampa-on.webp) 0 0/100% 100%;opacity:0}
.szafka .stoz{position:absolute;left:50%;top:11px;bottom:16px;width:96px;margin-left:-48px;z-index:3;background:linear-gradient(rgba(255,234,176,.45),rgba(255,234,176,.10) 75%,rgba(255,234,176,0));clip-path:polygon(32% 0,68% 0,100% 100%,0 100%);opacity:0;pointer-events:none}
.szafka .pod{position:absolute;left:50%;bottom:14px;width:70px;height:14px;margin-left:-35px;z-index:2;background:radial-gradient(ellipse,rgba(255,246,214,.8),rgba(255,234,176,.25) 45%,rgba(255,234,176,0) 70%);opacity:0;pointer-events:none}
.szafka .pspr{position:absolute;left:50%;bottom:10px;z-index:2;width:72px;height:72px;margin-left:-36px;opacity:.7}
.szafka small{position:absolute;left:0;right:0;bottom:0;height:16px;z-index:4;background:#0a0d1c;font-family:var(--display);font-size:9px;line-height:16px;text-align:center;color:var(--muted);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.szafka.on{transform:translateY(-4px) scale(1.05);background:linear-gradient(#26306a,#121844);z-index:2}
.szafka.on .pspr{opacity:1;background-image:var(--lit,var(--im))}
.szafka.on .opr::after{opacity:1}
.szafka.on .stoz,.szafka.on .pod{opacity:1}
.szafka.zapal .stoz,.szafka.zapal .pod,.szafka.zapal .opr::after{animation:szmrug .42s steps(1) 1}
@keyframes szmrug{0%{opacity:0}18%{opacity:1}34%{opacity:.15}52%{opacity:1}68%{opacity:.5}80%{opacity:1}}
.szafka.on small{color:var(--yellow)}
.szafka:active{transform:scale(.95)}
.szafka.zajeta .pspr{opacity:.3}
.szafka.zajeta small{color:var(--coral,#ff6b6b)}
@media (max-height:740px){.szafka{height:72px}.szafka .pspr{width:64px;height:64px;margin-left:-32px;bottom:9px}.join .nickhint{font-size:11.5px}}
@media (max-height:700px){.szafka{height:62px}.szafka .pspr{width:54px;height:54px;margin-left:-27px;bottom:8px}.join .rola{height:72px;font-size:12px}.join .rola b{font-size:14px}.pscena{min-height:104px}.join .nickhint{font-size:11px}}

/* ---------- 3B: karta profilu w najmocniejszej sekcji ---------- */
.pkarta{position:relative;flex:none;height:240px;border:12px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/24px;image-rendering:pixelated}
.pkarta .wn{position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 0 2px #05070f}
.pkarta .tlo{position:absolute;inset:0;background:var(--tlo) 38% 0/auto 100% no-repeat;transform:scaleX(-1);image-rendering:auto}
.pkarta .wn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,26,0) 34%,rgba(8,10,26,.9) 50%,rgba(8,10,26,.94));pointer-events:none}
.pkarta .cien{position:absolute;left:30px;bottom:8px;width:100px;height:8px;border-radius:50%;background:rgba(5,7,15,.45);z-index:1}
.pkarta .pspr{position:absolute;left:-14px;bottom:0;width:188px;height:188px;z-index:1}
.pkarta .inf{position:absolute;left:168px;right:10px;top:10px;bottom:10px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.pkarta .nm{font-family:var(--display);font-size:21px;line-height:1;letter-spacing:.03em;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkarta .chip{font-size:9.5px;padding:3px 6px;align-self:flex-start}
.pkarta .chip img,.pkarta .chip .ik{width:15px;height:auto}
.pkarta .xpb{align-self:stretch;height:5px}
.pkarta .xpt{font-size:11px;line-height:1.35}
.pkarta .nszpin{align-self:stretch;display:flex;justify-content:space-between;margin-top:auto}
@media (max-width:350px){.pkarta .pspr{width:160px;height:160px;left:-16px}.pkarta .inf{left:140px}}
/* pierwsze uruchomienie ma dodatkowy przycisk „Masz profil na innym urządzeniu?”: na niskim ekranie scena oddaje mu miejsce, a gdyby i tak zabrakło, ekran się przewija */
@media (max-height:700px){.join.pierwszy .pscena{min-height:78px}.join.pierwszy .ko-mam{min-height:34px}}
.join.pierwszy{overflow-y:auto}
@media (prefers-reduced-motion:reduce){.pspr.zyje,.pspr.wita,.szafka.zapal *,.szafka.zapal .opr::after{animation:none}}
/* goście z pakietów (koncepcja A, propozycje/postacie-pakietow): rząd studia pod załogą, szafki dzielą rząd po równo (--n = liczba gości),
   jeden gość = szeroka szafka z imieniem i neonem pakietu; zajęty gość jak zajęta postać załogi (każdy raz w pokoju) */
.goscie{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:6px;margin-top:6px;padding:10px 5px 5px;background:linear-gradient(#1d0b1c,#120712);box-shadow:inset 0 0 0 2px #05070f,inset 0 0 0 4px #3d1735}
.goscie .gtab{position:absolute;left:8px;top:-7px;z-index:6;display:flex;align-items:center;gap:5px;height:15px;padding:0 6px 0 3px;background:#120712;box-shadow:0 0 0 2px #3d1735;font-family:var(--display);font-size:9px;line-height:15px;color:#ffb3c6;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.goscie .gtab img{width:16px;height:16px;margin:-1px 0}
.szafka.gosc{background:linear-gradient(#2e1028,#150818);box-shadow:inset 0 0 0 2px #05070f,inset 0 2px 0 3px #4a1a3c}
.szafka.gosc.on{background:linear-gradient(#4a1a3e,#220c26)}
.szafka.gosc small{background:#1a0814;color:#ffb3c6}
.szafka.gosc.on small{color:var(--yellow)}
.szafka.gosc.zajeta small{color:var(--coral,#ff6b6b)}
.goscie.jeden .szafka .pspr,.goscie.jeden .szafka .opr,.goscie.jeden .szafka .stoz,.goscie.jeden .szafka .pod{left:24%}
.goscie.jeden .szafka small{display:none}
.szafka .ginf{position:absolute;left:46%;right:8px;top:12px;z-index:4;font-family:var(--display);font-size:9px;line-height:1.35;color:#ffb3c6;text-align:left;letter-spacing:.05em;text-transform:uppercase}
.szafka .ginf b{display:block;font-weight:400;font-size:15px;color:#fff;letter-spacing:.03em;text-transform:none;margin-bottom:2px}
.szafka.on .ginf b{color:var(--yellow)}
.szafka .ginf img{display:block;width:70px;height:auto;margin-top:4px}
.join .rola .rgosc{font-style:normal;font-size:10px;color:#ff6f95;margin-left:6px;letter-spacing:.04em}
@media (min-height:741px){.join.zgosc .szafka{height:76px}.join.zgosc .szafka .pspr{width:68px;height:68px;margin-left:-34px;bottom:9px}}
/* niskie telefony z rzędem gości: ciaśniej, żeby Zapisz został na ekranie (iPhone SE 667 px); przewijanie tylko jako siatka bezpieczeństwa */
.join.zgosc{overflow-y:auto}
@media (max-height:740px){.join.zgosc{gap:7px}.join.zgosc .szafka{height:58px}.join.zgosc .szafka .pspr{width:52px;height:52px;margin-left:-26px;bottom:8px}.join.zgosc .pscena{min-height:84px}.join.zgosc .nickhint{font-size:10.5px;line-height:1.3}.join.zgosc .goscie{padding-top:9px}}
@media (max-height:700px){.join.zgosc .szafka{height:52px}.join.zgosc .szafka .pspr{width:46px;height:46px;margin-left:-23px;bottom:7px}.join.zgosc .pscena{min-height:70px}}
/* gość w kamerze monitoringu (Odprawa): małe logo pakietu w prawym dolnym rogu, nad ksywką */
.kkam .kpak{position:absolute;right:2px;bottom:16px;z-index:3;width:13px;height:13px;image-rendering:auto;pointer-events:none}
/* przed wejściem do pokoju, gdy moja postać jest zajęta (makieta propozycje/postac-zajeta, koncepcja A): pasek z twarzą zajętej postaci, „była twoja” na jej szafce */
.join .zajinfo{flex:none;display:flex;align-items:center;gap:10px;border:10px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/20px;padding:0 2px;font-size:12.5px;line-height:1.3}
.join .zajinfo img{flex:none;width:42px;height:42px;border-radius:50%;background:#0a0d1c;box-shadow:0 0 0 3px #2a3364;opacity:.55}
.join .zajinfo b{display:block;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--coral,#ff6b6b);margin-bottom:1px}
.szafka .bylat{position:absolute;left:3px;right:3px;top:13px;z-index:5;background:var(--coral,#ff6b6b);color:#10173a;font-family:var(--display);font-size:8px;line-height:12px;text-align:center;text-transform:uppercase;letter-spacing:.03em}
/* wybór postaci bota (propozycje/boty-postacie, koncepcja A): ten sam ekran co postać gracza; tabliczka bota na podeście,
   persona na wyświetlaczu punktowym (wiedza i tempo w nagłówku), strzałki po bokach zmieniają personę nowego bota, pod szafkami Zaproś/Odeślij + Dodaj/Gotowe */
.pscena .btab{position:absolute;z-index:6;left:50%;top:7px;transform:translateX(-50%);font-family:var(--display);font-size:10px;line-height:1;letter-spacing:.06em;padding:4px 7px 3px;background:#0b0f1f;color:#cfd6ff;box-shadow:0 0 0 2px #3a4470;white-space:nowrap}
.pscena .btab b{font-weight:400;color:var(--yellow)}
.join .bwys{flex:none;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:stretch;gap:6px}
.join .bwys .str{border:0;padding:0;background:#141a3c;box-shadow:inset 0 0 0 2px #2a3364,2px 2px 0 #05070f;font-family:var(--display);font-size:20px;line-height:1;color:var(--sky);-webkit-tap-highlight-color:transparent}
.join .bwys .str:active{background:#232c5a;transform:translateY(1px)}
.join .bwys .mid{position:relative;min-width:0}
.join .bwys .wys{cursor:default}
.join .bwys .led{display:none}
.join .bwys .s{position:absolute;right:12px;top:10px;display:flex;gap:10px;font-size:10.5px;font-weight:700;line-height:12px;color:var(--muted);pointer-events:none}
.join .jbot{display:flex;gap:8px}
.join .jbot .btn{flex:1;width:auto;min-width:0}
.join .jbot #psave{flex:1.7}
.szafka .bylat.teraz{background:var(--sky,#5ad8ff)}