/* public/logowanie.css
   Purpose: strona hasła do ekranów — czytelna z kanapy, obsługa pilotem (duże pole, wyraźny fokus)
   NOT for: TV ani rzutnika (tv.css, ekran.css). Kolory i fonty jak na ekranie Kinowej. */

@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 { min-height: 100%; background: var(--czern); color: var(--krem); font-family: "Hanken", system-ui, sans-serif; }
body { background: radial-gradient(circle at 80% 0%, rgba(126, 27, 31, 0.4), transparent 60%), var(--czern); }

.logowanie { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vh; padding: 24px 16px; text-align: center; }
.logo { width: clamp(90px, 16vh, 180px); height: auto; }
h1 { font: 800 clamp(32px, 8vh, 96px)/1 "Big Shoulders", Impact, sans-serif; color: var(--zloto); text-transform: uppercase; }
form { display: flex; flex-direction: column; gap: 2vh; width: min(92vw, 640px); }
label { font-size: clamp(18px, 3.4vh, 36px); }
input[type="password"] { font: 700 clamp(32px, 7vh, 80px)/1.1 "Hanken", system-ui, sans-serif; letter-spacing: 0.3em;
  text-align: center; color: var(--czern); background: var(--krem); border: 0; border-radius: 1.5vh; padding: 2vh 1vw; width: 100%; }
button { font: 800 clamp(28px, 6vh, 72px)/1.1 "Big Shoulders", Impact, sans-serif; text-transform: uppercase;
  color: var(--czern); background: var(--zloto); border: 0; border-radius: 1.5vh; padding: 2vh 2vw; cursor: pointer; }
input:focus-visible, button:focus-visible { outline: 0.7vh solid var(--zloto); outline-offset: 0.8vh; }
input:focus-visible { outline-color: var(--bordo); }
.blad { font-size: clamp(18px, 3.2vh, 34px); color: #ff8a80; }
.info { font-size: clamp(15px, 2.6vh, 28px); opacity: 0.75; }