/* Pojedynek na liczby na mostku (propozycje/mostek-pojedynek, koncepcja A): telefon (klawiatura, wynik z osią) i nakładka telewizora.
   Tylko transform i opacity w ruchu, bez filtrów (zasada 9). */
.pj{gap:10px}
.pj-st{display:flex;flex-direction:column;gap:3px;background:#141834;border:3px solid #05060f;box-shadow:inset -3px -3px 0 #0008,inset 3px 3px 0 #fff2;padding:9px 11px}
.pj-st b{font-family:var(--display);font-weight:400;font-size:15px;color:#f2c14e;line-height:1.15}
.pj-st span{font-family:var(--tk,var(--display));font-size:13px;color:#e9ecff}
.pj-st.zielony{background:#10301f}.pj-st.czer{background:#34121a}.pj-st.zloty{background:#2a2008;border-color:#6a4a00}.pj-st.szary{background:#1c1f33}
.pj-wys{display:flex;align-items:baseline;justify-content:center;gap:8px;background:#05060f;border:3px solid #2a3060;padding:8px;margin-top:8px;font-family:var(--display)}
.pj-wys b{font-weight:400;font-size:clamp(26px,9vw,36px);color:#e9ecff;letter-spacing:.06em}
.pj-wys b.pusto{color:#3a4275}
.pj-wys span{color:#9aa3d0;font-size:14px}
.pj-kl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.pj-kl button{height:clamp(40px,6.4vh,52px);background:#1b2050;border:3px solid #05060f;box-shadow:inset -3px -3px 0 #0007,inset 3px 3px 0 #fff2;font:400 20px var(--display);color:#e9ecff;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pj-kl button:active{transform:translateY(2px)}
.pj-kl button.u{font-size:12px;color:#9aa3d0}
.pj-kl button.ok{background:#f2c14e;color:#2a1c00;font-size:14px}
/* konsola z osią (wynik.html, koncepcja A): malowane elementy z img/orbita/pojedynek, wymiary w cqw szerokości konsoli */
.pj-k{container-type:inline-size;width:100%;pointer-events:none}
.pj-kr{position:relative}
.pj-kr .pj-ram{inset:0;border-style:solid;border-color:transparent;border-width:var(--ram);border-image:url(img/orbita/pojedynek/konsola.webp) 46 fill / var(--ram) stretch}
.pj-kr>*{position:absolute;margin:0}
.pj-k.mini .pj-kr{margin:0 -1px}
.pj-peg{transform:translateX(-50%);display:block}
.pj-tik{transform:translateX(-50%);font-family:var(--display);color:#8f98c8;white-space:nowrap;line-height:1}
.pj-szyna{display:flex;align-items:center}
.pj-szyna i{display:block;height:100%;flex:1;background:url(img/orbita/pojedynek/szyna-s.webp) left center/auto 100% repeat-x}
.pj-szyna img{height:180%;flex:none}
.pj-zn{transform:translateX(-50%)}
.pj-zn>img{display:block;width:100%}
.pj-zn b{position:absolute;left:7%;right:7%;top:49.5%;height:13%;display:grid;place-items:center;font-weight:400;font-family:var(--display);color:#fff;line-height:1;white-space:nowrap}
.pj-zn.pj-pr b{top:40.5%;color:#2a1600}
.pj-tw{position:absolute;left:15%;width:70%;top:6.6%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#1a1430;box-shadow:inset 0 0 0 var(--ring) var(--c)}
.pj-tw img{width:100%;height:100%;object-fit:cover;display:block}
.pj-zn.dal{opacity:.55}
.pj-bl{transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(#fff8 0,#fff4c066 20%,#f2c14e26 46%,#f2c14e00 70%)}
.pj-wi{transform:translateX(-50%);background:linear-gradient(#fff4c0,#f2c14e88 60%,#f2c14e00)}
.pj-gr{animation:pjWjazd .7s cubic-bezier(.2,.8,.2,1) both}
.pj-gr.dal{animation:pjWjazd .7s cubic-bezier(.2,.8,.2,1) both,pjGas .4s 1.9s forwards}
.pj-pr{animation:pjZjazd .9s .6s cubic-bezier(.2,.8,.2,1) both}
.pj-bl,.pj-wi{animation:pjPojaw .5s 1.3s both}
@keyframes pjWjazd{from{opacity:0;transform:translateX(-50%) translateY(30%)}to{opacity:1;transform:translateX(-50%)}}
@keyframes pjZjazd{from{opacity:0;transform:translateX(-50%) translateY(-60%)}to{opacity:1;transform:translateX(-50%)}}
@keyframes pjPojaw{from{opacity:0}to{opacity:1}}
@keyframes pjGas{from{opacity:1}to{opacity:.55}}
/* baner wyniku: pole na napis w górnych 83% malunku */
.pj-ban{container-type:inline-size;width:100%}
.pj-bi{aspect-ratio:1931/355;background:url(img/orbita/pojedynek/baner.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:3.1cqw;text-align:center;line-height:1.05}
.pj-bi.remis{background-image:url(img/orbita/pojedynek/baner-remis.webp)}
.pj-bi b{font:400 4cqw var(--display);color:#f2c14e;text-shadow:.08em .08em 0 #05060f;letter-spacing:.03em;white-space:nowrap}
.pj-bi.remis b{color:#cfe4ff}
.pj-bi span{font-family:var(--tk,var(--display));font-size:2.7cqw;color:#e9ecff;margin-top:.5cqw;max-width:76%;line-height:1.1}
.pj-pod{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-family:var(--tk,var(--display));font-size:13px}
.pj-pod b{color:#f2c14e;font-weight:400}
/* telewizor i komputer: nakładka nad sceną mostka (scena 960x540 skalowana do ekranu) */
.pj-tv{position:fixed;left:50%;top:39vh;transform:translateX(-50%);width:min(64vw,114vh);display:flex;flex-direction:column;align-items:center;gap:1.4vh;z-index:6;pointer-events:none}
.pj-jed{font:400 2.6vh var(--display);color:#5fc8f5;background:#0b0e26ee;border:.4vh solid #05060f;padding:.8vh 2vh;letter-spacing:.06em}
.pj-ludzie{display:flex;gap:3vh}
.pj-kto{display:flex;align-items:center;gap:1vh;background:#0b0e26ee;border:.4vh solid #05060f;padding:.6vh 1.4vh .6vh .6vh;font-family:var(--display)}
.pj-kto img{width:4.6vh;height:4.6vh;border:.3vh solid var(--c)}
.pj-kto b{font-weight:400;font-size:2.2vh;color:#e9ecff}
.pj-kto em{font-style:normal;font-size:2.4vh;color:#f2c14e}
.pj-kto small{font-size:1.6vh;color:#9aa3d0}
.pj-kto.ok small{color:#5fe3a8}
.pj-bum{position:fixed;left:50%;top:80vh;width:min(41.7vw,74vh);transform:translateX(-50%);z-index:6;pointer-events:none;animation:pjBum .5s 1.9s cubic-bezier(.2,.8,.2,1) both}
@keyframes pjBum{from{opacity:0;transform:translateX(-50%) scale(.7)}to{opacity:1;transform:translateX(-50%) scale(1)}}
.pj-desk{position:fixed;right:2vw;bottom:3vh;width:min(340px,30vw);z-index:7;display:flex;flex-direction:column;gap:6px}
@media (prefers-reduced-motion:reduce){.pj-pr,.pj-gr,.pj-bl,.pj-wi,.pj-bum{animation:none}}
.pj-pod .pop{width:30px;height:30px;flex:none}