/* Warstwa wizualna: paleta i typografia przeniesione ze Śledztwa, żeby to
   wyglądało jak ta sama gra. UKŁAD jest inny i celowo.

   Śledztwo rysuje scenę 900x1600 skalowaną transformem, bo ma panoramy
   i hotspoty na procentach - kadr musi się zgadzać co do piksela. Tutaj jest
   sam dialog: nie ma czego wyrównywać, więc idzie zwykły układ przepływowy.
   Mniej kodu i lepiej znosi klawiaturę na telefonie, która przy sztywnej
   scenie zjada pół kadru. */

:root {
    --zloto: #c9a04a;
    --kosc: #f2e6c9;
    --ciemne: #0a0907;
    --panel: #12161d;
    --przygas: #8b93a1;
    --czerwien: #c05a4a;
    --zielen: #6f9e6a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
    margin: 0;
    min-height: 100%;
    background: #05070a;
    color: var(--kosc);
    font-family: Georgia, "Times New Roman", serif;
    -webkit-text-size-adjust: 100%;
}

body {
    /* Tło sceny: nocny plac Tysiąclecia pod przyciemnieniem. Tekst musi być
       czytelny także wtedy, gdy obrazek się nie wczyta - stąd kolor pod nim. */
    background:
        linear-gradient(rgba(5, 7, 10, .82), rgba(5, 7, 10, .94)),
        url("/img/lokacje/chrzanow-plac-tysiaclecia.webp") center / cover fixed no-repeat,
        #05070a;
    min-height: 100dvh;
}

.ekran {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------- ekrany tekstowe */

.tresc {
    margin: auto;
    padding: 32px 22px calc(32px + env(safe-area-inset-bottom));
    max-width: 620px;
    width: 100%;
}

.nad {
    margin: 0 0 6px;
    color: var(--zloto);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
}

h1 { margin: 0 0 20px; font-size: clamp(30px, 8vw, 44px); font-weight: normal; }

.lead { font-size: clamp(17px, 4.4vw, 20px); line-height: 1.6; }
.drobne { color: var(--przygas); font-size: 15px; line-height: 1.55; }
.stopka { margin-top: 26px; color: var(--przygas); font-size: 13px; opacity: .8; }

.btn {
    display: block;
    width: 100%;
    margin: 26px 0 0;
    padding: 16px;
    border: 1px solid var(--zloto);
    border-radius: 2px;
    background: var(--zloto);
    color: var(--ciemne);
    font: inherit;
    font-size: 18px;
    letter-spacing: 1px;
    cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn.pusty { background: none; color: var(--zloto); }

/* ---------------------------------------------------------- pasek świadka */

.pasek {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px);
    padding-top: calc(10px + env(safe-area-inset-top));
    background: rgba(10, 9, 7, .92);
    border-bottom: 1px solid rgba(201, 160, 74, .28);
    position: sticky;
    top: 0;
    z-index: 2;
}

.portret {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--zloto);
    background: var(--panel);
    flex: none;
}

.kto { flex: 1; min-width: 0; }
.imie { color: var(--zloto); font-size: 18px; }
.stan {
    color: var(--przygas);
    font-size: 13px;
    /* Nastrój świadka pokazujemy SŁOWAMI, nie liczbą. Licznik nastawienia
       zamieniłby rozmowę w grę w statystyki, a chodzi o to, żeby gracz czytał
       człowieka. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.licznik {
    flex: none;
    min-width: 44px;
    text-align: right;
    color: var(--zloto);
    font-size: 15px;
    letter-spacing: 1px;
}
.licznik.malo { color: var(--czerwien); }

/* ---------------------------------------------------------- rozmowa */

.rozmowa {
    flex: 1;
    padding: 18px 16px 8px;
    max-width: 620px; width: 100%; margin: 0 auto;
    display: flex; flex-direction: column; gap: 16px;
}

.tura { display: flex; flex-direction: column; gap: 8px; }

.moje {
    align-self: flex-end;
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px 14px 2px 14px;
    background: rgba(201, 160, 74, .14);
    border: 1px solid rgba(201, 160, 74, .3);
    font-size: 16px;
}

.jego {
    max-width: 92%;
    font-size: clamp(17px, 4.4vw, 19px);
    line-height: 1.55;
}
/* Odmowa wygląda inaczej niż odpowiedź - gracz ma widzieć, że trafił
   w zamknięte drzwi, a nie w brak wiedzy. */
.jego.odmowa { color: var(--przygas); font-style: italic; }

.zdobyte {
    align-self: flex-start;
    padding: 6px 12px;
    border-left: 2px solid var(--zielen);
    background: rgba(111, 158, 106, .1);
    color: var(--kosc);
    font-size: 14px;
}

.pisze { color: var(--przygas); font-size: 15px; font-style: italic; }

/* ---------------------------------------------------------- dziennik */

.dziennik {
    max-width: 620px; width: 100%; margin: 0 auto;
    padding: 12px 16px;
    border-top: 1px solid rgba(201, 160, 74, .2);
}
.dziennik.jasny { border: 1px solid rgba(201, 160, 74, .3); margin: 22px 0; }
.dziennik-tytul {
    color: var(--zloto); font-size: 12px;
    letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px;
}
.dziennik ul { margin: 0; padding-left: 18px; }
.dziennik li { font-size: 15px; line-height: 1.5; margin-bottom: 5px; }

/* ---------------------------------------------------------- pole pytania */

.pole {
    position: sticky; bottom: 0;
    display: flex; gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    max-width: 620px; width: 100%; margin: 0 auto;
    background: rgba(5, 7, 10, .96);
    border-top: 1px solid rgba(201, 160, 74, .2);
}

.pole input {
    flex: 1; min-width: 0;
    padding: 14px;
    border: 1px solid rgba(201, 160, 74, .35);
    border-radius: 2px;
    background: var(--panel);
    color: var(--kosc);
    font: inherit;
    /* 16px to próg, poniżej którego iOS sam przybliża stronę przy wejściu
       w pole - a wtedy układ skacze i nie wraca. */
    font-size: 16px;
}
.pole input:focus { outline: 1px solid var(--zloto); }

.wyslij {
    flex: none; width: 52px;
    border: 1px solid var(--zloto); border-radius: 2px;
    background: var(--zloto); color: var(--ciemne);
    font-size: 17px; cursor: pointer;
}
.wyslij:disabled { opacity: .4; cursor: default; }

/* ---------------------------------------------------------- koniec */

.kulisy { margin: 22px 0; }
.kulisy summary { color: var(--zloto); cursor: pointer; font-size: 15px; }
.kulisy ul { margin: 12px 0 0; padding-left: 18px; }
.kulisy li { color: var(--przygas); font-size: 14px; margin-bottom: 4px; }
.kulisy code { color: var(--kosc); font-family: inherit; font-style: italic; }

.opinia { margin: 26px 0 0; display: flex; flex-direction: column; gap: 10px; }
.opinia label { color: var(--zloto); font-size: 15px; }
.opinia textarea, .opinia input {
    padding: 12px;
    border: 1px solid rgba(201, 160, 74, .35);
    border-radius: 2px;
    background: var(--panel); color: var(--kosc);
    font: inherit; font-size: 16px;
    resize: vertical;
}

.licencja {
    margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    color: var(--przygas); font-size: 11px; text-align: center; opacity: .7;
}
.licencja a { color: inherit; }

@media (min-width: 720px) {
    .rozmowa { padding-top: 28px; }
}