/* odtwarzacz.css — wspólny odtwarzacz kamer (odtwarzacz.js). Wszystko pod .odtw, globalne .embed bez zmian. */
.embed.odtw{display:block;aspect-ratio:auto;overflow:hidden;place-items:normal;padding:0}
.odtw__scena{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;container-type:inline-size;background:#000;border-radius:14px 14px 0 0}
.odtw__scena video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border-radius:0;cursor:pointer}
.odtw__brak{position:absolute;z-index:1;inset:0;display:none;align-items:center;justify-content:center;padding:16px;text-align:center;color:#fff;font-weight:600;white-space:pre-line;background:#0b1b33}
.odtw__brak.on{display:flex}
.odtw__brak--foto{background-size:cover;background-position:center;background-repeat:no-repeat;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.6)}
.odtw__scena .sb,.odtw__scena .sb-pv,.odtw__scena .brk{z-index:2}
.odtw__start{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;padding:0 0 0 6px;display:grid;place-items:center;font:inherit;font-size:2rem;line-height:1;color:#fff;background:#008DD2;border:3px solid #fff;border-radius:50%;box-shadow:0 4px 18px rgba(0,0,0,.5);cursor:pointer}
.odtw__start:hover{background:#0077B3}
.odtw__start[hidden]{display:none}

.odtw__pasek{display:flex;align-items:center;gap:10px;padding:10px 12px}
.odtw__prawa{display:flex;align-items:center;gap:8px;margin-left:auto}
.odtw__pasek button{min-height:44px;min-width:44px;padding:0 14px;font:inherit;font-weight:700;font-size:.95rem;line-height:1;white-space:nowrap;cursor:pointer;color:var(--ink,#24282D);background:var(--bg-2,#F2F4F7);border:1.5px solid var(--line,#D5D9E0);border-radius:999px}
.odtw__pasek button:hover{border-color:#008DD2}
.odtw__pasek button:focus-visible,.odtw__start:focus-visible{outline:3px solid #008DD2;outline-offset:2px}
.odtw__pasek button[hidden]{display:none}
.odtw__pasek .odtw__play{min-width:56px;color:var(--accent-ink,#fff);background:var(--accent-btn,#0077B3);border-color:transparent}
.odtw__pasek .odtw__play:hover{border-color:#fff}
.odtw__pasek button[aria-pressed="true"]{border-color:#008DD2;box-shadow:inset 0 0 0 1px #008DD2}
@media (max-width:480px){
  .odtw__pasek{gap:6px;padding:8px}
  .odtw__prawa{gap:6px}
  .odtw__pasek button{padding:0 10px}
  .odtw__tx{display:none}
}

/* kafelek kamery (/kamery/, strona główna): odtwarzacz na całej scenie kafelka, pasek nałożony na dół obrazu */
.embed.odtw.odtw--kafelek{position:absolute;inset:0;z-index:2;width:auto;height:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:#000;overflow:hidden}
.odtw--kafelek:not(.odtw--pelny) .odtw__scena{height:100%;border-radius:0}
.odtw--kafelek:not(.odtw--pelny) .odtw__brak{font-size:clamp(12px,3.6cqw,16px);padding:8px 12px}
.odtw--kafelek:not(.odtw--pelny) .odtw__start{width:60px;height:60px;padding-left:4px;font-size:1.5rem;border-width:2px}
.odtw--kafelek .odtw__pasek{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:24px 8px 8px;gap:6px;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);transition:opacity .25s}
.odtw--kafelek:not(.odtw--pelny) .odtw__prawa{gap:6px}
.odtw--kafelek:not(.odtw--pelny) .odtw__pasek button{min-height:40px;min-width:40px;padding:0 10px}
.odtw--kafelek:not(.odtw--pelny) .odtw__tx{display:none}
.odtw--kafelek.odtw--cicho .odtw__pasek,.odtw--kafelek.odtw--intro:not(.odtw--pelny) .odtw__pasek{opacity:0;pointer-events:none}   /* w kafelku pasek nie zasłania tekstu animacji startowej */
.odtw--kafelek.odtw--cicho .odtw__scena video{cursor:none}
.odtw--kafelek .odtw__pasek button{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.odtw--kafelek .odtw__pasek .odtw__play{background:#008DD2;border-color:transparent}
.odtw--kafelek .odtw__pasek button[aria-pressed="true"]{border-color:#5CC8FF;box-shadow:inset 0 0 0 1px #5CC8FF}

/* animacja startowa: granat, duże logo, łuki sygnału zapalają się kolejno i pulsują do końca intro, potem tekst reklamowy */
.odtw__intro{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,3cqw,24px);padding:0 6%;box-sizing:border-box;background:#0b1b33;cursor:pointer;transition:opacity .35s}
.odtw__intro--wyjscie{opacity:0;pointer-events:none}
.odtw__intro-logo{width:min(62%,560px);opacity:0}
.odtw__intro-logo svg,.odtw__intro-logo img{display:block;width:100%;height:auto}
.odtw__intro-tx{max-width:92%;text-align:center;color:#fff;font-weight:700;line-height:1.25;font-size:clamp(13px,3.6cqw,30px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;opacity:0}
.odtw__intro--go .odtw__intro-logo{animation:odtw-logo .6s ease-out both}
.odtw__intro--go .odtw__intro-tx{animation:odtw-tx .5s ease-out .7s both}
.odtw__intro--go .odtw__luk{opacity:.15;animation:odtw-luk .25s ease-out calc(.5s + var(--n,0) * .14s) both,odtw-puls 1.1s ease-in-out calc(1.1s + var(--n,0) * .14s) infinite}
@keyframes odtw-logo{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes odtw-tx{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes odtw-luk{from{opacity:.15}to{opacity:1}}
@keyframes odtw-puls{0%,100%{opacity:1}50%{opacity:.3}}
/* intro na przezroczystym tle (testowo kamera „kościół”): logo i tekst na obrazie kamery, za nimi miękkie przyciemnienie bez widocznej krawędzi */
.odtw__intro--przezr{background:radial-gradient(ellipse at center,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 45%,rgba(0,0,0,0) 72%) transparent}
.odtw__intro--przezr .odtw__intro-tx{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.6)}
.odtw__intro--przezr .odtw__intro-logo{filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))}
@media (prefers-reduced-motion:reduce){
  .odtw__intro--go .odtw__intro-logo{animation:odtw-fade .3s ease-out both}
  .odtw__intro--go .odtw__intro-tx{animation:odtw-fade .3s ease-out .2s both}
  .odtw__intro--go .odtw__luk{opacity:1;animation:none}
}
@keyframes odtw-fade{from{opacity:0}to{opacity:1}}

/* pseudo-pełny ekran: scena 16:9 dopasowana do ekranu, pasek nałożony na dół */
.embed.odtw.odtw--pelny{position:fixed;inset:0;z-index:2000;width:auto;height:100vh;height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.odtw--pelny .odtw__scena{width:min(100vw,100vh*16/9);border-radius:0;flex:none}
@supports (height:100dvh){.odtw--pelny .odtw__scena{width:min(100vw,100dvh*16/9)}}
.odtw--pelny .odtw__pasek{position:absolute;left:0;right:0;bottom:0;z-index:2001;padding:28px 12px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,rgba(0,0,0,.75),transparent);transition:opacity .25s}
.odtw--pelny.odtw--cicho .odtw__pasek{opacity:0;pointer-events:none}
.odtw--pelny.odtw--cicho .odtw__scena video{cursor:none}
.odtw--pelny .odtw__pasek button{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.odtw--pelny .odtw__pasek .odtw__play{background:#008DD2;border-color:transparent}
.odtw--pelny .odtw__pasek button[aria-pressed="true"]{border-color:#5CC8FF;box-shadow:inset 0 0 0 1px #5CC8FF}
html.odtw-pelny-aktywny{overflow:hidden}
/* pełny ekran z kafelka: przodkowie tworzący kontekst (znaczeni w JS) nie mogą odciąć position:fixed od viewportu */
html.odtw-pelny-aktywny .odtw-neutr{transform:none!important;filter:none!important;backdrop-filter:none!important;perspective:none!important;contain:none!important;container-type:normal!important;will-change:auto!important;isolation:auto!important;z-index:auto!important;opacity:1!important;content-visibility:visible!important;animation:none!important;transition:none!important}