/* Postacie jak w Państwach Miastach (V1.1): gracz to malowany okrągły portret z tłem (img/ava, kopie PM av/<id>.webp)
   w obwódce w kolorze swojego miejsca (PM .ava, --pc); ekran profilu „Kim jesteś?” jak PM #s-join. Ładowany po app.css. */
.pop.ava{background:#352a78;border:3px solid var(--pc,var(--violet));box-shadow:0 0 0 3px color-mix(in srgb,var(--pc,var(--violet)) 25%,transparent)}
.pop.ava img,.pop.ava.bot img{position:static;left:auto;top:auto;transform:none;width:100%;height:100%;object-fit:cover;display:block}
.whos .pop.ava,.lp .r .pop.ava{border-width:2px}
.pl.ans .pop.ava{box-shadow:0 0 0 4px var(--yellow),0 0 16px rgba(255,210,63,.6)}

/* ekran profilu: pełny ekran nad grą, jeden ekran bez scrolla na 320–360 px */
.join{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;gap:10px;padding:calc(var(--sat) + 10px) 16px calc(var(--sab) + 16px);background:radial-gradient(70% 45% at 75% 5%,rgba(120,90,220,.28),transparent 70%),linear-gradient(180deg,#05040f,#0b0a26 45%,#1a1646);overflow:hidden}
.join .top{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;min-height:52px}
.join .top .t{text-align:center;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.join h2{position:relative;z-index:2;margin:0;text-align:center;font-family:var(--display);font-weight:900;font-size:22px;color:#fff}
.join .big{position:relative;width:120px;height:120px;border-width:5px}
.join .big img{transform-origin:50% 50%}
.join .inp{text-align:center;font-family:var(--display);font-size:17px}
.join .nickhint{margin:-4px 6px 0;text-align:center;font-size:12.5px;font-weight:700;line-height:1.35;color:var(--muted)}
.join .sh{font-family:var(--display);font-weight:800;font-size:14px;color:#fff;margin:2px 2px -4px}
.join .sp{flex:1;min-height:6px}
.join .btn{width:100%}
@media (max-height:640px){.join .big{width:96px;height:96px}.join .nickhint{display:none}}

/* kafelek gracza na starcie jak PM .mechip: malowana tabliczka (img/kafle/gracz.webp 674x144 = 3x 225x48, lewa część z gniazdem i prawy koniec stałe, środek się rozciąga), awatar w gnieździe, poziom na kafelku przy pierścieniu */
.np.pm{height:48px;padding:0 24px 3px 4.5px;gap:8px;border:0 solid transparent;border-radius:0;border-image:url(img/kafle/gracz.webp) 0 84 0 156 fill/0 28px 0 52px;background:none;box-shadow:none;text-shadow:0 1px 2px rgba(30,10,90,.6)}
.np.pm .pop.ava{width:36px;height:36px;border:0;background:none;box-shadow:none;overflow:visible;flex-shrink:0}
.np.pm .pop.ava img{border-radius:50%}
.np.pm .t b{font-size:15px}