/* public/ekran.css
   Purpose: wygląd ekranu 16:9 (rzutnik) i strony pilota
   NOT for: strony kinowakrasnik.pl — kolory/fonty skopiowane z jej kierunku „kino nocą”
   WHY jednostki vh/vw: rozdzielczość rzutnika nieznana (720p lub 1080p) — skala ma iść za ekranem */

@font-face { font-family: "Big Shoulders"; font-weight: 800; font-display: swap;
  src: url("/assets/big-shoulders-latin-ext-800.woff2") format("woff2"); unicode-range: U+0100-024F; }
@font-face { font-family: "Big Shoulders"; font-weight: 800; font-display: swap;
  src: url("/assets/big-shoulders-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013, U+2026; }
@font-face { font-family: "Hanken"; font-weight: 400; font-display: swap;
  src: url("/assets/hanken-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-024F; }
@font-face { font-family: "Hanken"; font-weight: 400; font-display: swap;
  src: url("/assets/hanken-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013, U+2026; }

:root {
  --czern: #0f0d0c;
  --bordo: #7e1b1f;
  --zloto: #f4b941;
  --krem: #f3e9d2;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--czern); color: var(--krem); font-family: "Hanken", system-ui, sans-serif; }
body { overflow: hidden; cursor: none; }

.ekran { display: grid; grid-template-columns: 56.25vh 1fr; height: 100vh; }
.film { position: relative; overflow: hidden; background: #000; }
.film video { width: 100%; height: 100%; object-fit: cover; display: block; }

.panel {
  display: flex; flex-direction: column; justify-content: center; gap: 4vh;
  padding: 6vh 6vw; border-left: 0.6vh solid var(--bordo);
  background: radial-gradient(circle at 80% 10%, rgba(126, 27, 31, 0.35), transparent 60%), var(--czern);
}
.logo { width: 22vh; height: auto; }
.haslo { font-family: "Big Shoulders", Impact, sans-serif; font-weight: 800; font-size: 9vh; line-height: 0.95;
  color: var(--zloto); text-transform: uppercase; }
.godziny { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0.6vh 3vw; font-size: 3.2vh; }
.godziny dt { opacity: 0.75; }

.powitanie {
  position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3vh; padding: 8vh 10vw; text-align: center; font-size: 5vh; line-height: 1.25;
  background: rgba(15, 13, 12, 0.92); opacity: 0; z-index: 20; visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.powitanie.widoczne { opacity: 1; visibility: visible; transition: opacity 0.6s ease; }
.powitanie-tytul { font-family: "Big Shoulders", Impact, sans-serif; font-weight: 800; font-size: 12vh;
  line-height: 0.95; color: var(--zloto); text-transform: uppercase; }

.start {
  position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3vh; background: rgba(15, 13, 12, 0.85); z-index: 10; font-size: 3vh; text-align: center; padding: 0 8vw;
}
.start.ukryty { display: none; }
.start button {
  font: 800 6vh/1.1 "Big Shoulders", Impact, sans-serif; text-transform: uppercase; color: var(--czern);
  background: var(--zloto); border: 0; border-radius: 1.5vh; padding: 3vh 5vw; cursor: pointer;
}
.start button:focus-visible { outline: 0.6vh solid var(--krem); outline-offset: 0.8vh; }

.kropka { position: fixed; right: 1.5vh; bottom: 1.5vh; width: 1.4vh; height: 1.4vh; border-radius: 50%;
  background: #c0392b; opacity: 0.7; }
.diag { position: fixed; right: 4vh; bottom: 1vh; z-index: 30; font-size: 2vh; opacity: 0.7; }
[data-polaczenie="tak"] .kropka { background: #2e9e5b; }

/* --- pilot (telefon) --- */
.pilot { cursor: auto; overflow: auto; display: flex; flex-direction: column; gap: 20px;
  padding: 24px 16px; max-width: 480px; margin: 0 auto; font-size: 18px; }
.pilot h1 { font: 800 32px/1 "Big Shoulders", Impact, sans-serif; color: var(--zloto); text-transform: uppercase; }
.pilot button { font: 800 28px/1 "Big Shoulders", Impact, sans-serif; text-transform: uppercase; color: var(--czern);
  background: var(--zloto); border: 0; border-radius: 12px; padding: 28px 16px; width: 100%; }
.pilot button:disabled { opacity: 0.5; }
.pilot .info { font-size: 15px; opacity: 0.8; line-height: 1.4; }
.pilot[data-ekran="tak"] #status { color: #7fd69b; }