/* Wyświetlacz punktowy stacji (makieta propozycje/ksywka, koncepcja B; budowa w public/wyswietlacz.js): pola kodów i ksywki.
   Wybrane = zapalona dioda i jaśniejsza komórka, bez kolorowych obwódek. Jedyna nieskończona animacja to kursor, i tylko przy fokusie. */
.wys{position:relative;display:block;cursor:text;border:10px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/20px;image-rendering:pixelated;padding:2px 2px 4px;-webkit-tap-highlight-color:transparent}
div.wys{cursor:default}
.wys .kodin{position:absolute;inset:0;z-index:2;opacity:0;width:100%;height:100%;font-size:16px;border:0;padding:0;margin:0;caret-color:transparent;color:transparent;background:none;-webkit-user-select:text}
.wys .wnag{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--display);font-size:9.5px;letter-spacing:.1em;color:var(--dim,#6b76a8);text-transform:uppercase;margin:0 2px 6px;white-space:nowrap}
.wys .led{display:inline-block;width:8px;height:8px;margin-left:6px;vertical-align:0;background:#2a3150;box-shadow:inset -2px -2px 0 rgba(0,0,0,.35)}
.wys.ok .st{color:#3ddc97}
.wys.ok .led{background:#3ddc97;box-shadow:0 0 6px #3ddc97,inset -2px -2px 0 rgba(0,0,0,.25)}
.wys.zla .st{color:var(--coral,#ff6b6b)}
.wys.zla .led{background:var(--coral,#ff6b6b);box-shadow:0 0 6px var(--coral,#ff6b6b),inset -2px -2px 0 rgba(0,0,0,.25)}
/* ekran: ksywka dzieli szerokość na n równych komórek, kody mają komórki stałej szerokości --kw */
.wys .ek{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px;padding:6px;background:#04060e;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px #161b30}
.wys .k{position:relative;aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;background-color:#0b1020;background-image:radial-gradient(circle,#1e2642 0 1px,transparent 1.5px);background-size:4px 4px;box-shadow:inset 0 0 0 1px #1b2242,inset 0 2px 0 #000;font-family:var(--display);font-weight:400;line-height:1;color:transparent;text-transform:uppercase}
.wys .k.lit{color:#ffd23f;background-image:radial-gradient(circle,#3a2f10 0 1px,transparent 1.5px);box-shadow:inset 0 0 0 1px #4a3c14,inset 0 2px 0 #000;text-shadow:0 0 6px rgba(255,210,63,.7)}
.wys .k.duch{color:#1f2640}
.wys:focus-within .k.duch{color:transparent}
.wys .k.kur::after{content:'';position:absolute;left:18%;right:18%;bottom:10%;height:3px;background:#ffd23f;box-shadow:0 0 6px #ffd23f;display:none}
.wys:focus-within .k.kur::after{display:block;animation:wysmrug 1s steps(2) infinite}
.wys .k.nowa{animation:wysklap .16s steps(3) 1}
.wys.zla .k.lit{color:var(--coral,#ff6b6b);text-shadow:0 0 6px rgba(255,107,107,.6);background-image:radial-gradient(circle,#3a1418 0 1px,transparent 1.5px)}
.wys .sep{display:block}
@keyframes wysmrug{50%{opacity:.15}}
@keyframes wysklap{0%{transform:scaleY(.2)}60%{transform:scaleY(1.1)}}
@media (prefers-reduced-motion:reduce){.wys .k.nowa,.wys:focus-within .k.kur::after{animation:none}}

/* ksywka: 14 komórek na całą szerokość, litery liczone z szerokości pola (.nickk ma container-type) */
.nickk.wys{width:100%;max-width:none;margin:0}
.nickk.wys .k{font-size:calc((100cqw - 75px) / 14 * .74)}
body.desk .join .nickk.wys .wnag{font-size:10.5px}
body.desk .join .nickk.wys .ek{gap:4px;padding:8px}

/* kody: komórki --kw, wyśrodkowany wyświetlacz szerokości treści */
.wys.kod{width:fit-content;max-width:100%;margin:8px auto 2px;--kw:58px}
.wys.kod .ek{display:flex;justify-content:center;gap:calc(var(--kw) * .08);padding:calc(var(--kw) * .12)}
.wys.kod .k{flex:none;width:var(--kw);height:calc(var(--kw) * 1.3);aspect-ratio:auto;font-size:calc(var(--kw) * .7);background-size:5px 5px}
.wys.kod .sep{width:calc(var(--kw) * .35)}
.wys.kod.k8{--kw:min(34px,calc((100vw - 120px) / 8.8))}
.hc .wys.kod{--kw:52px}
body.tv .wys.kod{--kw:calc(10*var(--u));border-width:calc(1.4*var(--u));border-image-width:calc(2.8*var(--u))}
body.tv .wys.kod .k{background-size:calc(.7*var(--u)) calc(.7*var(--u))}
.wys.ko-kod,.wys.zn-kod{display:block;margin:4px auto 2px}