/* Komputer jak salon z telewizorem (makieta propozycje/desktop-ekrany, koncepcja B): z lewej telewizor ze sceną (#dtv), z prawej kolumna gracza,
   pod telewizorem odpowiedzi i Głos. Jedna siatka: margines 24, odstęp 16, nagłówek y 20..64, treść od y 80 do dołu okna minus 24.
   --tvi = szerokość ekranu telewizora (wnętrze ramki 12 px), --tvh jego wysokość 16:9, --kx/--kw = kolumna z prawej, --k = jeden px sceny 960x540.
   #app.namapie leży dokładnie na ekranie telewizora, więc elementy w px sceny trafiają w scenę, a kolumny wychodzą poza #app (100% + odstęp). */
body.desk{--tvx:24px;--tvy:80px;--tvi:min(calc(100vw - 88px - clamp(300px,27vw,420px)),calc((100vh - 316px) * 16 / 9));--tvh:calc(var(--tvi) * 9 / 16);--kw:calc(100vw - var(--tvi) - 88px);--dol:calc(100vh - var(--tvy) - var(--tvh) - 64px);--k:calc(var(--tvi) / 960)}
/* --u jak na telewizorze 16:9 tej szerokości (zegar wieży i karta zwycięzcy w windzie są w --u) */
body.dscena{--u:calc(var(--tvi) / 177.78)}
#dtv{display:none}
body.dscena #dtv,body.dspec #dtv{display:block;position:fixed;left:var(--tvx);top:var(--tvy);width:calc(var(--tvi) + 24px);height:calc(var(--tvh) + 24px);border:12px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26/18px;background:#05060e;background-clip:padding-box;overflow:hidden;z-index:1;image-rendering:pixelated}
#dtv>.wz,#dtv>.mo{position:absolute}
body.desk #app.namapie{position:fixed;left:calc(var(--tvx) + 12px);top:calc(var(--tvy) + 12px);width:var(--tvi);height:var(--tvh);right:auto;bottom:auto;padding:0;gap:0;display:block;background:none;z-index:5;pointer-events:none;overflow:visible}
body.desk #app.namapie>*{pointer-events:auto}
body.desk #app.namapie .wzeg{pointer-events:none}
body.dscena .wz-rec{display:none}

/* nagłówek (y 20..64): wyjście i tytuł nad telewizorem, moja energia nad kolumną z prawej */
body.desk #app .dhud{position:absolute;left:-12px;top:-72px;width:calc(100vw - 48px);height:44px;pointer-events:none}
.dhud .kf{position:absolute;left:0;top:0;pointer-events:auto}
.dtyt{position:absolute;left:60px;top:0;height:44px;display:flex;align-items:center;font-family:var(--display);font-size:15px;letter-spacing:.06em;color:#eef1ff;white-space:nowrap}
.dja{position:absolute;left:calc(var(--tvi) + 40px);right:0;top:0;display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 2px;border:9px solid transparent;border-image:url(img/orbita/ui/panel-zloty.webp) 26 fill/18px;image-rendering:pixelated;font-family:var(--display);color:#eef1ff;white-space:nowrap}
.dja:empty{display:none}
.dja .pop{width:30px!important;height:30px!important}
.dja b{font-weight:400;font-size:13px;letter-spacing:.06em}
.dja .pt{font-size:15px;color:var(--yellow)}
.dja small{font-size:10px;letter-spacing:.06em;color:#aab4e0}

/* Odprawa: pominięcie w nagłówku, równo z prawą krawędzią telewizora */
.dpomin{position:absolute;right:-12px;top:-72px;height:44px}

/* drzwi: kafle sekcji na ścianie korytarza między banerem a drzwiami pokoi */
.dglos{position:absolute;left:50%;top:calc(var(--k)*58);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--k)*4)}
.dgt{font-family:var(--display);font-size:12px;letter-spacing:.06em;color:#eef1ff;background:#0b0d1ce6;border:2px solid #39407a;border-radius:6px;padding:4px 10px;white-space:nowrap}
.dgt i,.dlewa i{font-style:normal;display:inline-block;min-width:18px;text-align:center;padding:1px 4px;margin:0 1px;border:2px solid #5a679f;background:#141a36;color:#fff}
.drz{display:flex;align-items:flex-end;gap:calc(var(--k)*10)}
.dglos .dkafle{display:flex;gap:calc(var(--k)*6);margin:0}
.dglos .dbtn{width:calc(var(--k)*104);cursor:pointer}
.dglos .dbtn:hover:not(.lost){transform:translateY(-3px)}
.dglos .dbtn .ddr{width:calc(var(--k)*36);height:calc(var(--k)*64)}
.dglos .dbtn b{font-size:calc(var(--k)*8.5)}
.dglos .dbtn small{font-size:calc(var(--k)*10)}
.dglos .dstan{background:#0b0d1ce6;font-size:11px}
.dglos .zreka{margin:0;padding:6px 8px;align-items:center;cursor:grab;background:#0b0d1ce6;border:2px solid #39407a;border-radius:6px}
.dglos .zreka .t{max-width:calc(var(--k)*104)}
.dglos .zreka .t small{font-size:calc(var(--k)*9)}

/* pytanie w sali: kafle gracza w miejscu kafli TV (środki płyt 198, 380, 580, 762, szerokość 178, góra 463, wysokość 70) */
body.desk #app .dpok{position:absolute;left:0;top:calc(var(--k)*463);width:calc(var(--k)*960);height:calc(var(--k)*70);margin:0;display:block!important;padding:0}
body.desk #app .dpok>button{position:absolute!important;top:0;height:100%;min-height:0!important;margin:0;cursor:pointer}
body.desk #app .dpok .a{font-size:calc(var(--k)*15)!important}
/* bez !important: dopasujOdp zmniejsza długie odpowiedzi stylem w linii */
body.desk #app .dpok .a .t{font-size:calc(var(--k)*15)}
body.desk #app .dpok .a .l{width:calc(var(--k)*22);height:calc(var(--k)*22);font-size:calc(var(--k)*11)}
body.desk #app .dpok .a:nth-child(1){left:calc(var(--k)*109);width:calc(var(--k)*178)}
body.desk #app .dpok .a:nth-child(2){left:calc(var(--k)*291);width:calc(var(--k)*178)}
body.desk #app .dpok .a:nth-child(3){left:calc(var(--k)*491);width:calc(var(--k)*178)}
body.desk #app .dpok .a:nth-child(4){left:calc(var(--k)*673);width:calc(var(--k)*178)}
/* Szept: pięć kafli równo na całej szerokości */
body.desk #app .dpok.five .a{width:calc(var(--k)*170)!important}
body.desk #app .dpok.five .a:nth-child(1){left:calc(var(--k)*20)}
body.desk #app .dpok.five .a:nth-child(2){left:calc(var(--k)*204)}
body.desk #app .dpok.five .a:nth-child(3){left:calc(var(--k)*388)}
body.desk #app .dpok.five .a:nth-child(4){left:calc(var(--k)*572)}
body.desk #app .dpok.five .a:nth-child(5){left:calc(var(--k)*756)}
body.desk #app .dpok .a:hover:not(.pick){transform:translateY(-3px)}
body.desk #app .dpok.locked .a:not(.pick){opacity:.45}
body.desk #app .dpok .a.pick{box-shadow:0 0 0 3px var(--yellow),0 0 18px rgba(255,210,63,.55)!important}
/* prawda i fałsz: dwa szerokie kafle (środki 289 i 671, szerokość 360) */
body.desk #app .dpok.pf>button{font-size:calc(var(--k)*18)}
body.desk #app .dpok.pf .tak{left:calc(var(--k)*109);width:calc(var(--k)*360)}
body.desk #app .dpok.pf .nie{left:calc(var(--k)*491);width:calc(var(--k)*360)}
body.desk #app .dpok.pf i svg{width:calc(var(--k)*26);height:calc(var(--k)*26)}
/* kafle i lewa kolumna dopiero, gdy sala jest na ekranie (po wejściu załogi) */
body.dscena:not(.izo-on) #app:not(.namostku) .dpok,body.dscena:not(.izo-on) #app:not(.namostku) .dlewa,body.dscena:not(.izo-on) #app:not(.namostku) .dprawa{visibility:hidden}

/* lewa kolumna sali (przy drzwiach, pod nią nic nie mówi): awaria na mnie, zdolność sekcji, stan odpowiedzi */
.dlewa{position:absolute;left:calc(var(--k)*8);top:calc(var(--k)*62);width:calc(var(--k)*158);display:flex;flex-direction:column;gap:6px}
.dlewa:empty,.dlewa>div:empty{display:none}
.dlewa .fxban{flex-direction:column;align-items:flex-start;gap:4px;font-size:12px}
.dlewa .center{text-align:left}
.dlewa .chip{white-space:normal;margin:0 0 4px!important}

/* odsłona: prawa kolumna sali (rośliny), pod moją energią */
.dprawa{position:absolute;right:calc(var(--k)*8);top:calc(var(--k)*58);width:calc(var(--k)*168);display:flex;flex-direction:column;gap:6px}
.dwyn2{align-self:flex-end;font-family:var(--display);font-size:calc(var(--k)*16);padding:2px 10px;border:9px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/18px;image-rendering:pixelated}
.dwyn2.ok{color:var(--mint)}.dwyn2.no{color:var(--coral)}
.dprawa .center{text-align:right}
.dprawa .lp{gap:3px}
.dprawa .lp .r{min-height:0!important;height:calc(var(--k)*24);font-size:calc(var(--k)*8.5);gap:6px;border-width:6px!important;border-image-width:12px!important}
.dprawa .lp .r .pop{width:calc(var(--k)*16)!important;height:calc(var(--k)*16)!important}
.dprawa .lp .r .g{font-size:calc(var(--k)*7);padding:1px 4px}
.dprawa .report{align-self:flex-end;margin:0;font-size:11px}

/* karty przed pytaniem: „ręka” na dole sali (pod stopami załogi, nad dolną krawędzią), karta = obrazek + nazwa + opis na ciemnym panelu */

/* ja w sali: mała żółta plakietka TY pod stopami (nad głową są karty i przyrost energii) */
body.desk .wz-izo .tspr.me::after{content:'TY';position:absolute;left:50%;top:100%;transform:translateX(-50%);font-family:var(--display);font-size:4px;line-height:1;color:#3a2400;background:var(--yellow);padding:1px 1px 0;box-shadow:0 0 0 .5px #3a2400}
.dst{display:flex;gap:8px;align-items:center}
.dst .dgt{font-size:10px;padding:3px 8px}

/* cele awarii: siatka małych twarzy obok kart (do 11 celów mieści się w trzech rzędach) */

/* finał na mostku: mostek.js w ramce telewizora (box), --mk = px sceny mostka = --k */
body.desk{--mk:var(--k);--mox:0px;--moy:0px}
body.desk #app .dukr{display:none!important}
body.dscena .mo .mo-a{pointer-events:auto;cursor:pointer}
body.dscena .mo .mo-a:hover:not(.dzam){outline:2px solid #ffd23f}
body.dscena .mo .mo-a.dpick{outline:3px solid #ffd23f;box-shadow:0 0 14px rgba(255,210,63,.6)}
body.dscena .mo .mo-a.dzam:not(.dpick){opacity:.5}
.dlewa .mo-stan{width:100%;margin:0}

/* ujawnienie prowadzącego: animacja .odk na całe okno jak na telewizorze, nagłówek z wyjściem u góry */
body.desk #app.nachwile .hd{position:absolute;left:calc(var(--k)*10);right:calc(var(--k)*10);top:calc(var(--k)*9)}

/* fazy bez sceny TV (konkurencje specjalne, zasady): panel boczny bez wiszącej ikony interkomu nad tabelą */
body.desk #app.hasside>.dside::before{display:none}

/* ekran główny: malowane obrazki kart (propozycje/kosmos/grafika prompty EG1/EG2): Nowa gra = gospodarz zwołuje załogę przy przycisku,
   Dołącz = prom dokuje do śluzy; na karcie widać środkowy pas obrazka */
.hc .hart{position:relative;aspect-ratio:2/1;overflow:hidden;background:#141a3a center/cover no-repeat;image-rendering:auto;border-bottom:3px solid #0b0f1f}
.hc .hart.h1{background-image:url(img/orbita/ui/karta-nowa.webp);background-position:50% 55%}
.hc .hart.h2{background-image:url(img/orbita/ui/karta-dolacz.webp);background-position:50% 50%}
/* menu z telefonu (Profil, Znajomi, Dok zaopatrzenia) na komputerze: kolumna pośrodku okna zamiast rozciągania na całą szerokość */
body.desk #app[data-ekran=profil],body.desk #app[data-ekran=znajomi]{padding-left:max(40px,calc((100vw - 760px) / 2));padding-right:max(40px,calc((100vw - 760px) / 2))}
body.desk .dok{padding-left:max(24px,calc((100vw - 720px) / 2));padding-right:max(24px,calc((100vw - 720px) / 2))}
body.desk .dok .dk-scena,body.desk .dok .dk-hero{margin-left:0;margin-right:0}
body.desk .dok .dk-hero .dk-scena{border-left:3px solid var(--edge);border-right:3px solid var(--edge)}
body.desk .dok .dk-opis .dk-t{flex:1}
/* sala pakietu niższa niż okno, żeby karta z liczbami i zajawka były widać od razu */
body.desk .dok .dk-scena.sala{width:min(100%,calc(50vh * 960 / 690));align-self:center;border-left:3px solid var(--edge);border-right:3px solid var(--edge)}
body.desk #app[data-ekran=profil] .stat{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:auto!important;align-content:start}
body.desk #app[data-ekran=profil] .stat .st1 span{display:block;line-height:1.25}

/* koniec gry na komputerze: kolumna pośrodku, tytuły w równym rzędzie, lista załogi w niskich wierszach (cała widoczna nad przyciskami) */
body.desk:not(.tv) #app[data-ekran=koniec]{padding-left:max(40px,calc((100vw - 900px) / 2));padding-right:max(40px,calc((100vw - 900px) / 2))}
body.desk:not(.tv) #app[data-ekran=koniec] .titles{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));align-items:stretch;gap:10px}
body.desk:not(.tv) #app[data-ekran=koniec] .titles .tyt{flex:none;justify-content:flex-start}
body.desk:not(.tv) #app[data-ekran=koniec] .fin-r{flex:none;gap:4px}
body.desk:not(.tv) #app[data-ekran=koniec] .fin-r .r{flex:none;min-height:40px!important;height:auto}

/* ---------- koncepcja B: kolumny wokół telewizora (współrzędne względem ekranu telewizora = #app.namapie) ---------- */
/* panel jak ramka telewizora */
.dkol,.dkol2,.dglp{border:12px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/18px;image-rendering:pixelated}
/* z prawej, od góry ramki do jej dołu: karty przed pytaniem, awarie i zdolność, odsłona */
.dkol{position:absolute;left:calc(var(--tvi) + 28px);top:-12px;width:var(--kw);height:calc(var(--tvh) + 24px);display:flex;flex-direction:column;gap:12px;padding:4px;overflow:auto;pointer-events:auto}
.dkol.pusty{display:none}
.dkol>*{position:static!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;width:auto!important}
/* pod kolumną energia załogi, równo z rzędem pod telewizorem; bez kolumny cała wysokość */
.dkol2{position:absolute;left:calc(var(--tvi) + 28px);top:calc(var(--tvh) + 28px);width:var(--kw);height:var(--dol);padding:4px;display:flex;flex-direction:column;gap:6px;overflow:hidden;pointer-events:auto}
.dkol.pusty~.dkol2{top:-12px;height:calc(var(--tvh) + 40px + var(--dol))}
.drank{display:flex;flex-direction:column;gap:3px;min-height:0;overflow:auto}
.drank div{display:flex;align-items:center;gap:10px;flex:none;height:28px;padding:0 10px 0 4px;background:#0b0f1f;border:2px solid #1b2246;font-family:var(--display);font-size:12px;letter-spacing:.04em;color:#eef1ff}
.drank img{width:24px;height:24px;border-radius:50%;box-shadow:0 0 0 2px var(--c);background:#141a36;image-rendering:auto}
.drank span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drank em{margin-left:auto;font-style:normal;color:var(--yellow)}
.drank .me{background:#2b3566;border-color:#4a5799}
/* pod telewizorem: odpowiedzi albo drzwi, pod nimi Głos */
.dpod{position:absolute;left:-12px;top:calc(var(--tvh) + 28px);width:calc(var(--tvi) + 24px);height:var(--dol);display:flex;flex-direction:column;gap:16px;pointer-events:none}
.dpod>*{pointer-events:auto}
.dglp{flex:1 1 auto;min-height:64px;display:flex;align-items:center;gap:12px;padding:2px 8px;overflow:hidden}
.dglp[hidden]{display:none}
.dglp img{width:40px;height:40px;flex:none}
.dglp p{margin:0;font-size:17px;line-height:1.4;color:#eef1ff}
.dglp b{display:block;font-family:var(--display);font-weight:400;font-size:10px;letter-spacing:.08em;color:var(--yellow);text-transform:uppercase}
/* odpowiedzi: cztery równe kafle na szerokość telewizora (zamiast na płytach podłogi) */
/* tyle równych kolumn, ile kafli (4, 5 z Szeptem, 2 w prawda/fałsz) */
body.desk #app .dpod .dpok{position:static;width:auto;height:72px;flex:none;display:grid!important;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px}
body.desk #app .dpod .dpok>button{position:relative!important;left:auto!important;width:100%!important;height:72px;justify-self:stretch;grid-column:auto!important;grid-row:auto!important}
body.desk #app .dpod .dpok .a,body.desk #app .dpod .dpok .a .t{font-size:18px!important}
body.desk #app .dpod .dpok .a .l{width:28px;height:28px;font-size:13px}
body.desk #app .dpod .dpok.pf>button{font-size:20px}
body.desk #app .dpod .dpok.pf i svg{width:28px;height:28px}
/* drzwi: kafle sekcji w rzędzie pod telewizorem, podpowiedź i licznik obok */
.dpod .dglos{position:static;transform:none;flex:none;flex-direction:row;justify-content:space-between;align-items:center;gap:16px;padding:6px 10px;border:12px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/18px}
.dpod .dglos .dbtn{width:150px}
.dpod .dglos .dbtn .ddr{width:32px;height:56px}
.dpod .dglos .dbtn b{font-size:11px}
.dpod .dglos .dbtn small{font-size:12px}
.dpod .dglos .dst{flex-direction:column;align-items:flex-end}
/* karty przed pytaniem w kolumnie: jedna pod drugą, obrazek z lewej */
.dkol .dlewa .fxban{font-size:13px}
.dkol .dprawa .dwyn2{align-self:stretch;text-align:center;font-size:20px}
.dkol .dprawa .lp .r{height:30px;font-size:11px}
.dkol .dprawa .lp .r .pop{width:20px!important;height:20px!important}
/* szacunek (pojedynek): klawiatura pod telewizorem */
.dpod .pj-desk{position:static!important;transform:none!important;flex:none}

/* ---------- koncepcja B: poczekalnia = sala Odprawy (z mini ekranem na monitorze) w telewizorze, pulpit z telefonu rozłożony wokół ---------- */
body.desk #app[data-ekran=lobby]{display:block;padding:0}
body.desk #app[data-ekran=lobby] .hd{position:absolute;left:24px;right:24px;top:20px;height:44px;margin:0;padding:0}
body.desk #app[data-ekran=lobby] .hd .cap{font-size:15px}
body.desk #app[data-ekran=lobby] .tsc-pokoj.tvp.odpr{position:absolute!important;left:var(--tvx);top:var(--tvy);width:calc(var(--tvi) + 24px)!important;height:calc(var(--tvh) + 24px)!important;max-height:none!important;margin:0!important;border:12px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26/18px;background:#05060e;background-clip:padding-box}
body.desk #app[data-ekran=lobby] .tsc-pokoj.tvp .tvram{display:none}
body.desk #app[data-ekran=lobby] .tsc-pokoj.tvp .tvbox,body.desk #app[data-ekran=lobby] .tsc-pokoj.tvp .tvek{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0}
body.desk #app[data-ekran=lobby] .tsc-pokoj.tvp .tvbox>.tvosd{left:14px;right:14px;top:12px}
body.desk #app[data-ekran=lobby] .kons{display:contents}
body.desk #app[data-ekran=lobby] .kgr,body.desk #app[data-ekran=lobby] .grow{display:none}
body.desk #app[data-ekran=lobby] .kgora,body.desk #app[data-ekran=lobby] .kikm,body.desk #app[data-ekran=lobby] .kprz,body.desk #app[data-ekran=lobby] .khh{position:absolute;margin:0;border:12px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/18px;image-rendering:pixelated;background:none}
/* z prawej: kod (y 80..), pod nim kamery kabin do dołu telewizora, pod nimi start równo z rzędem pod telewizorem */
body.desk #app[data-ekran=lobby] .kgora{left:calc(var(--tvi) + 64px);top:var(--tvy);width:var(--kw);height:132px;padding:2px 4px;display:flex;gap:10px;align-items:center}
body.desk #app[data-ekran=lobby] .kgora .qr.qsk{width:84px;height:84px}
body.desk #app[data-ekran=lobby] .khh{left:calc(var(--tvi) + 64px);top:calc(var(--tvy) + 148px);width:var(--kw);height:calc(var(--tvh) - 124px);padding:4px;border-bottom:0}
body.desk #app[data-ekran=lobby] .kkamy{position:absolute;left:calc(var(--tvi) + 80px);top:calc(var(--tvy) + 188px);width:calc(var(--kw) - 32px);height:calc(var(--tvh) - 180px);max-height:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}
body.desk #app[data-ekran=lobby] .kkam{height:auto;min-height:0}
body.desk #app[data-ekran=lobby] .khaz{position:absolute;left:calc(var(--tvi) + 64px);top:calc(var(--tvy) + var(--tvh) + 40px);width:var(--kw);bottom:24px;margin:0;display:flex;align-items:stretch}
body.desk #app[data-ekran=lobby] .khaz>*{flex:1}
body.desk #app[data-ekran=lobby] .khaz .btn{height:100%;font-size:22px}
/* pod telewizorem: interkom (Głos) i przełączniki gry */
body.desk #app[data-ekran=lobby] .kikm{left:var(--tvx);top:calc(var(--tvy) + var(--tvh) + 40px);width:calc(var(--tvi) + 24px);height:calc((var(--dol) - 16px) / 2);padding:2px 10px;display:flex;align-items:center;gap:12px}
body.desk #app[data-ekran=lobby] .kikm p{font-size:17px;margin:0}
body.desk #app[data-ekran=lobby] .kprz{left:var(--tvx);bottom:24px;width:calc(var(--tvi) + 24px);height:calc((var(--dol) - 16px) / 2);padding:0 4px;display:grid;grid-template-columns:1.8fr 1fr 1.45fr 1fr;gap:0;align-items:stretch}
body.desk #app[data-ekran=lobby] .kprz:not(:has(.dmod:nth-child(4))){grid-template-columns:1.8fr 1fr 1.45fr}
/* ustawienia gry: pulpit z modułami (propozycje/desktop-ekrany/ustawienia.html, wariant 1) */
.dmod{position:relative;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 14px;min-width:0}
.dmod+.dmod::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:4px;background:#05070f;box-shadow:2px 0 0 #3a4780}
.dlb{font-family:var(--display);font-size:10px;letter-spacing:.12em;color:var(--sky)}
.dklaw{display:flex;gap:6px}
.dklaw button{flex:1;min-width:0;height:40px;padding:0 2px;white-space:nowrap;font-family:var(--display);font-size:11px;letter-spacing:.05em;color:#8c96c8;background:#141a36;border:3px solid #05070f;box-shadow:inset 0 3px 0 #3a4780,inset 0 -5px 0 #0b0f1f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}
.dklaw button i{display:flex;gap:2px}.dklaw button i s{width:6px;height:4px;background:#2b3566}
.dklaw button.on{color:#3a2400;background:var(--yellow);box-shadow:inset 0 3px 0 #fff3b0,inset 0 -3px 0 #c98418;transform:translateY(2px)}
.dklaw button.on i s{background:#9a5a00}
.drok{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;color:inherit;cursor:pointer;text-align:left}
.drok:disabled,.dklaw button:disabled,.dkart:disabled{cursor:default;opacity:1}
.drok .sw{position:relative;flex:none;width:74px;height:38px;background:#0b0f1f;border:3px solid #05070f;box-shadow:inset 0 3px 0 #2b3566}
.drok .sw::after{content:'';position:absolute;top:3px;left:36px;width:32px;height:26px;background:#d8dcf5;box-shadow:inset 0 -4px 0 #8c96c8;transition:left .15s}
.drok .sw.off::after{left:3px;background:#5a679f;box-shadow:inset 0 -4px 0 #2b3566}
.drok .led{flex:none;width:12px;height:12px;background:var(--mint);box-shadow:0 0 8px var(--mint);border:2px solid #05070f}
.drok .led.off{background:#2b3566;box-shadow:none}
.drok b{font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.06em;white-space:nowrap}
.drok img{width:28px;height:28px;margin-left:auto;flex:none}
.dkart{display:flex;align-items:center;gap:10px;width:100%;min-width:0;height:46px;background:#0b0f1f;border:3px solid #05070f;box-shadow:inset 0 3px 0 #2b3566;padding:4px 8px 4px 4px;color:inherit;text-align:left;cursor:pointer}
.dkart img{width:36px;height:36px;flex:none;image-rendering:auto}
.dkart span{min-width:0}
.dkart b{display:block;font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkart small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkart em{margin-left:auto;flex:none;font-style:normal;font-family:var(--display);font-size:10px;color:#1a1430;background:var(--yellow);padding:4px 6px;box-shadow:2px 2px 0 var(--edge)}
@media (hover:hover){.dklaw button:not(.on):not(:disabled):hover,.dkart:not(:disabled):hover{background:#1c2550}}

/* ---------- start jak w Państwach Miastach: tytuł u góry pośrodku, za nim duża stacja, na dole rząd kart (stacja chowa się za nimi) ---------- */
body.desk #app[data-ekran=home]{display:block;padding:0}
body.desk #app[data-ekran=home] .hd{position:absolute;left:24px;right:24px;top:12px;margin:0;z-index:3}
body.desk #app[data-ekran=home] .home-mid{position:absolute;left:0;right:0;top:56px;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;pointer-events:none}
body.desk #app[data-ekran=home] .crewline{position:fixed;left:50%;top:calc(80px + 15vh);translate:-50% 0;margin:0;z-index:0}
body.desk #app[data-ekran=home] .home-mid>:not(.crewline){position:relative;z-index:1}
body.desk #app[data-ekran=home] .stik.solo{width:min(620px,64vh,52vw)}
body.desk #app[data-ekran=home]>.hdol{position:absolute;left:50%;bottom:20px;translate:-50% 0;width:min(920px,calc(100vw - 96px));display:flex;flex-direction:column;gap:12px;z-index:3}
body.desk #app[data-ekran=home] .hcards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px;margin:0}
body.desk #app[data-ekran=home] .hc{display:flex;flex-direction:column}
body.desk #app[data-ekran=home] .hc .hart{aspect-ratio:2.5/1}
body.desk #app[data-ekran=home] .hc .bd{gap:10px;padding:14px 18px 16px}
body.desk #app[data-ekran=home] .hc .btn{margin-top:auto}
body.desk #app[data-ekran=home] .tvhint{text-align:center;margin:0}
body.desk #znpasek .zn-wiad{margin:0}
@media (max-height:780px){body.desk #app[data-ekran=home] .home-mid>.cap{display:none}body.desk #app[data-ekran=home] .crewline{top:130px}body.desk #app[data-ekran=home] .hc .hart{aspect-ratio:3.6/1}body.desk #app[data-ekran=home] .hc .bd{padding:10px 16px 12px;gap:8px}}
/* zegar fazy na górze ekranu telewizora (w wieza.css jest przypięty do okna) */
body.desk #app.namapie .wzeg{position:absolute}
/* ręka kart (talia) w kolumnie z prawej, na miejscu kart przed pytaniem; energia zostaje pod nią */
body.desk.dscena .pasek-kart:not(.pk-dost){left:calc(var(--tvi) + 64px);right:24px;top:var(--tvy);bottom:auto;width:auto;max-height:calc(var(--tvh) + 24px);border:12px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/18px;background:none;padding:4px}
body.zreka .dkol.pusty~.dkol2{top:calc(var(--tvh) + 28px);height:var(--dol)}
/* tablica „kto na kogo”: przyciemnienie i kafle w ekranie telewizora (w tablica.css przypięte do okna) */
body.desk #app.namapie .tb-ciem{position:absolute}
body.desk #app.namapie .tb-tv{position:absolute;right:calc(5*var(--u))}

/* ---------- koncepcja B: fazy z panelem bocznym (.hasside: konkurencje specjalne, zasady, wyniki konkurencji) ----------
   bez sali: treść w lewej kolumnie (miejsce telewizora i rzędów pod nim), energia i Głos z prawej;
   z salą konkurencji w telewizorze (body.dspec): interfejs z telefonu w kolumnie z prawej, energia i Głos pod telewizorem */
body.desk #app.hasside{display:block;padding:0}
body.desk #app.hasside>.hd{position:absolute;left:24px;right:24px;top:20px;margin:0}
body.desk #app.hasside>.tbar{position:absolute;left:24px;right:24px;top:68px;margin:0}
body.desk #app.hasside>.dmain{position:absolute;left:24px;top:84px;width:calc(var(--tvi) + 24px);bottom:24px;display:flex;flex-direction:column;justify-content:safe center;gap:14px;overflow:auto}
body.desk #app.hasside>.dside{position:absolute;left:calc(var(--tvi) + 64px);top:84px;width:var(--kw);bottom:24px;display:flex;flex-direction:column;justify-content:flex-start;gap:16px;padding:0}
body.desk .dside .who-row,body.desk .dside .dlp,body.desk .dside .say{border:12px solid transparent!important;border-image:url(img/orbita/ui/panel.webp) 26 fill/18px!important;background:none!important;border-radius:0!important;box-shadow:none!important;image-rendering:pixelated}
body.desk .dside .who-row,body.desk .dside .dlp{padding:4px;overflow:auto}
body.desk .dside .pl{border-radius:0;background:#0b0f1f;border:2px solid #1b2246;padding:4px 10px 4px 4px;grid-template-columns:30px 1fr auto auto;gap:10px}
body.desk .dside .pl .pop{width:30px;height:30px}
body.desk .dside .pl .nk,body.desk .dside .pl .sc{font-size:13px}
body.desk .dside .pl.me{background:#2b3566;box-shadow:none;border-color:#4a5799}
body.dspec #app.hasside>.dmain{left:calc(var(--tvi) + 64px);top:84px;width:var(--kw);bottom:24px}
body.dspec #app.hasside>.dside{left:24px;top:calc(var(--tvy) + var(--tvh) + 40px);width:calc(var(--tvi) + 24px);bottom:24px;flex-direction:row;align-items:stretch}
body.dspec #app.hasside>.dside>*{flex:1 1 0;min-width:0;margin:0}
body.dspec .dside .who-row .ppl{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
body.dspec .dside .pl{height:30px}
body.dspec .dside .pl .pop{width:22px;height:22px}
body.dspec #app.hasside>.hd .cap{visibility:hidden}
/* odpowiedzi w kolumnie konkurencji: 2×2 (kolumna ma szerokość telefonu) */
body.dspec #app.hasside .dmain .ans{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
body.dspec #app.hasside .dmain .ans .a{min-height:72px;font-size:16px}
body.dspec #app.hasside .dmain .ans.five .a:last-child{grid-column:1/-1}
/* ustawienia gry na węższym telewizorze: mniejsze klawisze i przełączniki, bez ikonek przy przełącznikach */
@media (max-width:1700px){
  .dmod{padding:0 10px;gap:5px}
  .dklaw{gap:4px}.dklaw button{font-size:9.5px;letter-spacing:.02em;height:36px}
  .drok{gap:7px}.drok .sw{width:56px;height:32px}.drok .sw::after{width:24px;height:20px;left:26px}.drok .sw.off::after{left:3px}
  .drok b{font-size:10.5px}.drok img{display:none}
  .dkart{height:42px}.dkart img{width:30px;height:30px}.dkart b{font-size:11px}.dkart small{font-size:10px}
}
/* mostek: Głos jest w scenie, więc pod telewizorem moje osłony i moc, energia zajmuje całą prawą kolumnę */
body.desk #app.namostku .dkol{left:-12px;top:calc(var(--tvh) + 28px);width:calc(var(--tvi) + 24px);height:var(--dol);flex-direction:row;align-items:center}
body.desk #app.namostku .dkol .dlewa{display:flex;flex-direction:row;gap:12px;width:100%!important}
body.desk #app.namostku .dkol .dlewa>*{flex:1 1 0}
body.desk #app.namostku .dkol~.dkol2,body.desk #app.namostku .dkol.pusty~.dkol2{top:-12px;height:calc(var(--tvh) + 40px + var(--dol))}
/* moduły ustawień na całą szerokość (odprawa.css .kprz>div wyrównuje do lewej) */
body.desk #app[data-ekran=lobby] .kprz>.dmod{align-items:stretch}
body.desk #app[data-ekran=lobby] .kprz>.dmod>.drok{align-self:flex-start}
/* wyniki konkurencji pod telewizorem: lista energii w dwóch kolumnach niskich wierszy (cała załoga widoczna) */
body.dspec .dside .dlp .lp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
body.dspec .dside .dlp .lp .r{min-height:0!important;height:30px;font-size:11px;border-width:6px!important;border-image-width:12px!important}
body.dspec .dside .dlp .lp .r .pop{width:20px!important;height:20px!important}

/* ---------- koncepcja A (propozycje/desktop-jak-tv): komputer jak telewizor ----------
   Fazy ze sceną (wieża, sala, mostek, konkurencje): scena telewizora na całe okno jak na /tv, cover (16:9 wypełnia okno, nadmiar ucięty z boków albo z góry i dołu),
   z dymkiem Głosu, rzędem twarzy i banerem telewizora; gracz klika w scenie. Zmienne nadpisują układ salonu (poczekalnia zostaje przy nim).
   --tvi/--tvh = scena na ekranie, --tvx/--tvy = jej róg, --cx/--cy = ucięcie z każdej strony (px okna), --zx/--zy = to samo w px sceny (app.js deskKadr), --k = px sceny 960x540 */
body.dscena,body.dspec{--tvi:max(100vw,calc(100vh * 16 / 9));--tvh:calc(var(--tvi) * 9 / 16);--tvx:calc((100vw - var(--tvi)) / 2);--tvy:calc((100vh - var(--tvh)) / 2);--cx:calc((var(--tvi) - 100vw) / 2);--cy:calc((var(--tvh) - 100vh) / 2);--k:calc(var(--tvi) / 960);--mk:var(--k);overflow:hidden}
body.dscena #dtv,body.dspec #dtv{left:var(--tvx);top:var(--tvy);width:var(--tvi);height:var(--tvh);border:0;border-image:none;background:#05060e}
/* nakładki telewizora w scenie przesunięte o ucięcie, żeby zostały w oknie */
#dtv .wz-glos{left:calc(52px + var(--zx,0px));bottom:calc(14px + var(--zy,0px))}
#dtv .wz-rank{right:calc(14px + var(--zx,0px));bottom:calc(14px + var(--zy,0px))}
#dtv .w169 .wz-mini{right:calc(6px + var(--zx,0px));top:calc(64px + var(--zy,0px))}
#dtv .wz-ban{top:calc(12px + var(--zy,0px))}
#dtv .wh-tab{right:calc(58px + var(--zx,0px))}
body.desk #app.namapie{left:var(--tvx);top:var(--tvy);width:var(--tvi);height:var(--tvh)}
/* nagłówek w rogach sceny: wyjście z lewej, z prawej zamiast „NA ŻYWO” moja energia i miejsce, pod nią talia */
body.desk #app.namapie .dhud{left:var(--cx);right:var(--cx);top:var(--cy);width:auto;height:0}
body.desk #app.namapie .dhud .kf{left:calc(var(--k)*8);top:calc(var(--k)*8)}
body.desk #app.namapie .dtyt{display:none}
body.desk #app.namapie .dja{left:auto;right:calc(var(--k)*8);top:calc(var(--k)*8);height:40px;padding:0 12px 0 5px;border:3px solid #5a2a3a;border-image:none;border-radius:4px;background:#0b0d1ce6}
body.desk #app.namapie .dhud .hlicz{position:absolute;right:calc(var(--k)*8 + 4px);top:calc(var(--k)*8 + 48px);pointer-events:auto}
body.desk #app.namapie .dpomin{left:calc(var(--k)*8 + 56px);right:auto;top:calc(var(--k)*8)}
body.desk #app.namapie .wzeg{top:calc(var(--cy) + 6.4*var(--u))}
/* awarie, zdolność i stan przy lewej ścianie sali, odsłona przy prawej (pod moją energią i talią) */
body.desk #app.namapie .dlewa{left:calc(var(--cx) + var(--k)*8);top:calc(var(--cy) + var(--k)*62)}
body.desk #app.namapie .dprawa{right:calc(var(--cx) + var(--k)*8);top:calc(var(--cy) + var(--k)*80)}
.dlewa>*,.dprawa .dwyn2{box-shadow:2px 2px 0 var(--edge)}
/* kafle odpowiedzi telewizora pod palcem: najazd podnosi, wybrany jaśniejszy i wyżej (bez obwódki) */
body.desk #app.namapie .dpok .a.pick{box-shadow:none!important;transform:translateY(-6px) scale(1.04)}
/* mostek: wyjście i energia pod informacjami w rogach, moje osłony i moc przy lewej krawędzi */
body.desk #app.namostku .dhud .kf{top:calc(var(--k)*44)}
body.desk #app.namostku .dja{top:calc(var(--k)*44)}
body.desk #app.namostku .dhud .hlicz{top:calc(var(--k)*44 + 48px)}
body.desk #app.namostku .dlewa{left:calc(var(--cx) + var(--k)*10);top:calc(var(--cy) + var(--k)*100);width:calc(var(--k)*132)}
body.desk #app.namostku .dprawa{right:calc(var(--cx) + var(--k)*10);top:calc(var(--cy) + var(--k)*120);width:calc(var(--k)*150)}
/* szacunek (pojedynek): klawiatura pośrodku pod pytaniem */
body.desk #app.namapie .pj-desk{position:absolute;left:50%;bottom:calc(var(--cy) + var(--k)*16);transform:translateX(-50%)}
/* karty do zagrania: panel wysuwa się z prawej krawędzi sceny, pod talią */
body.desk.dscena .pasek-kart:not(.pk-dost),body.desk.dspec .pasek-kart:not(.pk-dost){left:auto;right:16px;top:116px;bottom:auto;width:min(420px,34vw);max-height:calc(100vh - 200px);overflow:auto}
/* tablica „kto na kogo” w kadrze */
body.desk.dscena #app.namapie .tb-tv{left:calc(var(--cx) + 3*var(--u));right:calc(var(--cx) + 3*var(--u));top:calc(var(--cy) + 16*var(--u));bottom:calc(var(--cy) + 3*var(--u))}

/* Kolejność: kafle telewizora w miejscu kafli TV (y 463, x 109..851), przeciąganie w bok, zatwierdzenie na żółtej taśmie przy schodach */
body.desk #app .dord{position:absolute;left:calc(var(--k)*109);top:calc(var(--k)*463);width:calc(var(--k)*742);height:calc(var(--k)*70);margin:0;display:flex;gap:calc(var(--k)*10);flex-direction:row}
/* oprawa.css daje .ord .o ramkę panelu z !important, więc kolory kafli TV też z !important */
body.desk #app .dord .o{flex:1 1 0;min-width:0;height:100%;min-height:0;margin:0;display:flex;align-items:center;gap:8px;padding:0 6px;border-radius:0;cursor:grab;touch-action:none;border-style:solid!important;border-color:transparent!important;border-width:9px 12px 19px!important;border-image:url(img/orbita/ui/odp-a.webp) 14 14 28 14 fill/9px 12px 19px!important;image-rendering:pixelated;background:none!important;box-shadow:none!important;color:#fff;font-family:var(--tk);font-weight:400;-webkit-font-smoothing:none;font-size:calc(var(--k)*13);line-height:1.15}
body.desk #app .dord .o[data-j="1"]{border-image-source:url(img/orbita/ui/odp-b.webp)!important}
body.desk #app .dord .o[data-j="2"]{border-image-source:url(img/orbita/ui/odp-d.webp)!important}
body.desk #app .dord .o[data-j="3"]{border-image-source:url(img/orbita/ui/odp-c.webp)!important;color:#3a2400}
body.desk #app .dord .o .n{flex:none;width:calc(var(--k)*20);height:calc(var(--k)*20);display:grid;place-items:center;border-radius:0;box-shadow:none;color:inherit;background:#0b0d1c66;font-family:var(--display);font-size:calc(var(--k)*10)}
body.desk #app .dord .o .grip{display:none}
body.desk #app .dord .o:hover{transform:translateY(-3px)}
body.desk #app .dord .o.drag{z-index:3;transform-origin:50% 100%}
body.desk #app .dord.locked .o{cursor:default;opacity:.8}
.dhaz{position:absolute;right:calc(var(--cx) + var(--k)*22);top:calc(var(--k)*250);width:calc(var(--k)*170);padding:6px;border:0;background:repeating-linear-gradient(-45deg,#ffd23f 0 14px,#14110a 14px 28px);cursor:pointer;font:inherit}
.dhaz span{display:block;text-align:center;font-family:var(--display);font-size:18px;letter-spacing:.08em;color:#2a1c00;background:var(--yellow);padding:12px 8px 9px;box-shadow:inset -4px -4px 0 rgba(0,0,0,.2),inset 4px 4px 0 rgba(255,255,255,.4)}
.dhaz span small{display:block;font-size:10px;letter-spacing:.06em;color:#6a4f00;margin-top:3px}
.dhaz:hover span{background:#ffe066}
.dhaz.czeka{cursor:default;background:repeating-linear-gradient(-45deg,#8a7a3a 0 14px,#14110a 14px 28px)}
.dhaz.czeka span{font-size:12px;background:#c9b25a}

/* konkurencje specjalne (body.dspec, sala z telefonu w scenie): sala na całe okno, interfejs gracza w panelu telewizora z prawej (nad rzędem twarzy),
   Głos jako dymek telewizora w lewym dolnym rogu, energia z wyników nad nim; tabela energii zastąpiona twarzami w scenie */
body.dspec #app.hasside{position:fixed;inset:0;background:none;z-index:5;pointer-events:none}
body.dspec #app.hasside>*{pointer-events:auto}
body.dspec #app.hasside>.hd{left:16px;right:16px;top:14px}
body.dspec #app.hasside>.tbar{left:calc(50% - 160px);right:calc(50% - 160px);top:62px}
body.dspec #app.hasside>.dmain{left:auto;right:16px;top:116px;bottom:calc(var(--k)*62 + 8px);width:min(440px,34vw);justify-content:safe center;padding:6px;border:12px solid transparent;border-image:url(img/orbita/ui/panel.webp) 26 fill/18px;image-rendering:pixelated}
body.dspec #app.hasside>.dside{left:16px;top:auto;bottom:16px;width:min(560px,44vw);flex-direction:column;align-items:stretch}
body.dspec #app.hasside>.dside>*{flex:none}
body.dspec .dside .who-row{display:none}
body.dspec .dside .say{border-style:solid!important;border-color:transparent!important;border-width:8px 10px 22px 40px!important;border-image:url(img/orbita/ui/dymek.webp) 8 8 26 42 fill/8px 10px 22px 40px!important;padding:0 4px 2px!important}
body.dspec .dside .dlp .lp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
body.dspec #app.hasside .dmain .ans{grid-template-columns:1fr!important}

/* Reżyserka z telewizora na komputerze (zasady, koniec; body.tv ustawia app.js na czas ekranu): wyjście w lewym górnym rogu, taśma i przyciski klikalne */
body.desk.tv .tvtop>.kf{position:absolute;left:calc(1.6*var(--u));top:calc(1.6*var(--u));z-index:5}
body.desk.tv .tvtop>.tt{margin-left:calc(5*var(--u))}
body.desk.tv button.rz-haz{display:block;width:100%;border:0;font:inherit;cursor:pointer;text-align:center}
body.desk.tv button.rz-haz:hover span{background:#ffe066}
body.desk.tv .rz-haz span small{display:block;font-size:calc(1.2*var(--u));letter-spacing:.06em;color:#6a4f00;margin-top:calc(.3*var(--u))}
body.desk.tv .rz-haz.czeka{background:repeating-linear-gradient(-45deg,#8a7a3a 0 calc(1.7*var(--u)),#14110a calc(1.7*var(--u)) calc(3.4*var(--u)))}
body.desk.tv .rz-haz.czeka span{background:#c9b25a;font-size:calc(1.8*var(--u))}
body.desk.tv .rz-btn{display:flex;gap:calc(1.2*var(--u));align-items:stretch}
body.desk.tv .rz-btn>.rz-haz{flex:1}
body.desk.tv .rz-btn>.btn{flex:none;min-height:0;font-size:calc(1.9*var(--u))}
body.desk.tv .xpclaim{margin:0}
/* Szept: pięć kafli równo w widocznej części sceny (szerokość okna, bez uciętych boków) */
body.desk #app.namapie .dpok.five .a{width:18.4vw!important}
body.desk #app.namapie .dpok.five .a:nth-child(1){left:calc(var(--cx) + 1.6vw)}
body.desk #app.namapie .dpok.five .a:nth-child(2){left:calc(var(--cx) + 21.2vw)}
body.desk #app.namapie .dpok.five .a:nth-child(3){left:calc(var(--cx) + 40.8vw)}
body.desk #app.namapie .dpok.five .a:nth-child(4){left:calc(var(--cx) + 60.4vw)}
body.desk #app.namapie .dpok.five .a:nth-child(5){left:calc(var(--cx) + 80vw)}
/* drzwi: licznik głosów jest już w scenie (ZAGŁOSOWAŁO), zostaje podpowiedź klawiszy */
body.desk #app.namapie .dglos .dstan{display:none}
/* konkurencje: „NA ŻYWO” telewizora schowane (w rogu jest talia) */
body.dspec .wz-rec{display:none}
/* mostek: informacje i widownia w rogach sceny przesunięte o ucięcie; moje osłony przy lewej krawędzi, obok dymka Głosu */
#dtv .mo-info{left:calc(12px + var(--zx,0px));top:calc(12px + var(--zy,0px))}
#dtv .mo-wid{right:calc(12px + var(--zx,0px));top:calc(12px + var(--zy,0px))}
body.desk #app.namostku .dlewa{width:calc(var(--k)*112)}
/* odsłona w sali: kolumna z wynikiem pod ciekawostką, opis awarii na ciemnym tle */
body.desk #app.namapie:not(.namostku) .dprawa{top:calc(var(--cy) + var(--k)*124)}
body.desk #app.namapie .dprawa .tyl{display:flex;flex-direction:column;gap:3px;background:#0b0d1ce6;border:2px solid #39407a;padding:5px 8px;font-size:12px;line-height:1.3;color:#e4e8ff}
body.desk #app.namapie .dprawa .tyl img{height:20px}
/* Odprawa: pominięcie obok wyjścia (warstwa gracza, nie nagłówek) */
body.desk #app.namapie>.dpomin{left:calc(var(--cx) + var(--k)*8 + 56px);top:calc(var(--cy) + var(--k)*8)}
/* konkurencje: w panelu bez miniatury sali z telefonu (sala jest na całym oknie) */
body.dspec #app.hasside .dmain .tscena{display:none}

/* edytor profilu (pierwsze wejście, Twój profil, wybór postaci): dwie kolumny w środku okna do 1280 px (makieta propozycje/konto-desktop, koncepcja A).
   Z lewej ty (.jl: scena z reflektorami, rola, ksywka, „Masz profil…”), z prawej szatnia (.jp: szafki w proporcjach telefonu, goście, przycisk) */
body.desk .join{display:grid;grid-template-columns:minmax(0,600px) minmax(0,640px);grid-template-rows:auto minmax(0,820px);justify-content:center;align-content:center;column-gap:40px;row-gap:18px;padding:22px 32px 24px;overflow-y:auto}
body.desk .join .top{grid-column:1/-1;min-height:40px}
body.desk .join .top .t{font-size:17px;letter-spacing:.07em}
body.desk .join .jl,body.desk .join .jp{display:flex;flex-direction:column;min-height:0;min-width:0}
body.desk .join .zajinfo{margin-bottom:12px}
body.desk .join .pscena{flex:1 1 0;min-height:300px;max-height:420px}
body.desk .join .rola{height:92px;margin-top:12px;padding:4px 8px 0;font-size:15px}
body.desk .join .rola b{font-size:18px;margin-bottom:4px}
body.desk .join .sh{font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#eef1ff;margin:0 0 12px}
body.desk .join .sh i{font-style:normal;color:var(--muted);text-transform:none}
body.desk .join .nkety{margin:22px 0 10px}
body.desk .join .nickk{width:100%;margin:0}
body.desk .join .nkzla{text-align:left;margin-top:6px}
body.desk .join .nickhint{margin:10px 0 16px;text-align:left;font-size:14px;line-height:1.45}
body.desk .join .ko-mam{align-self:flex-start;width:auto;margin-top:auto;padding:0 18px;min-height:44px;font-size:12px}
body.desk .join .szafki{gap:10px}
body.desk .join .szafka{height:132px;cursor:pointer}
body.desk .join .szafka .opr{width:44px;height:14px;margin-left:-22px}
body.desk .join .szafka .stoz{top:13px;bottom:20px;width:120px;margin-left:-60px}
body.desk .join .szafka .pod{bottom:18px;width:86px;height:16px;margin-left:-43px}
body.desk .join .szafka .pspr{width:112px;height:112px;margin-left:-56px;bottom:14px}
body.desk .join .szafka small{height:20px;font-size:10px;line-height:20px;letter-spacing:.04em}
body.desk .join .szafka:hover:not(.on):not(.zajeta){background:linear-gradient(#1a2148,#0e1330)}
body.desk .join .szafka:hover:not(.on):not(.zajeta) .pspr{opacity:.9}
body.desk .join .szafka.gosc:hover:not(.on):not(.zajeta){background:linear-gradient(#3a1432,#1c0a1e)}
body.desk .join .szafka .bylat{top:16px;font-size:9px;line-height:14px}
body.desk .join .goscie{margin-top:22px;padding:14px 7px 7px;gap:8px}
body.desk .join .goscie .szafka{height:118px}
body.desk .join .goscie .szafka .pspr{width:100px;height:100px;margin-left:-50px}
body.desk .join .goscie.jeden .szafka .pspr,body.desk .join .goscie.jeden .szafka .opr,body.desk .join .goscie.jeden .szafka .stoz,body.desk .join .goscie.jeden .szafka .pod{left:24%}
body.desk .join .gtab{top:-9px;height:18px;line-height:18px;font-size:10px;padding:0 8px 0 3px}
body.desk .join .gtab img{width:18px;height:18px}
body.desk .join #psave{margin-top:auto;flex:none}
body.desk .join .jbot{margin-top:auto}body.desk .join .jbot #psave{flex:1.7;margin-top:0} /* wybór postaci bota: Zaproś/Odeślij + Dodaj bota/Gotowe w jednym rzędzie */
body.desk .join .jp>.szafki:nth-last-child(2),body.desk .join .jp>.goscie:nth-last-child(2){margin-bottom:22px}
/* niższe okno (np. 1280x720): mniejsze szafki i scena, kolumny dalej bez przewijania */
@media (max-height:800px){
  body.desk .join{row-gap:12px;padding-top:16px;padding-bottom:18px}
  body.desk .join .pscena{min-height:240px}
  body.desk .join .szafka{height:108px}
  body.desk .join .szafka .pspr{width:90px;height:90px;margin-left:-45px}
  body.desk .join .goscie .szafka{height:96px}
  body.desk .join .goscie .szafka .pspr{width:80px;height:80px;margin-left:-40px}
  body.desk .join .goscie{margin-top:16px}
  body.desk .join .nkety{margin-top:16px}
  body.desk .join .rola{height:84px}
}
@media (max-height:680px){
  body.desk .join .pscena{min-height:170px}
  body.desk .join .szafka{height:92px}
  body.desk .join .szafka .pspr{width:76px;height:76px;margin-left:-38px;bottom:12px}
  body.desk .join .goscie .szafka{height:84px}
  body.desk .join .goscie .szafka .pspr{width:68px;height:68px;margin-left:-34px}
  body.desk .join .rola{height:76px;font-size:14px}
}