/* Noc w mieście: kolory z nagrań (oliwkowe tło, bursztynowe światła). Gra jest
   celowo zawsze ciemna - to scena, nie dokument. */
:root {
  --tlo: #0e0d0a;
  --tlo-2: #17150f;
  --tlo-3: #221f16;
  --linia: #3b3526;
  --tekst: #ece6d8;
  --tekst-2: #b8ae98;
  --tekst-3: #8a8170;
  --akcent: #d9a35a;
  --akcent-ciemny: #1b1408;
  --zielen: #9fbf74;
  --czerwien: #e07a5f;
  --promien: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- start ---------- */
#start { max-width: 760px; margin: 0 auto; padding: 32px 16px 96px; }
.naglowek h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1.05; margin: 0 0 12px; letter-spacing: -0.02em; }
.naglowek p { margin: 0 0 24px; color: var(--tekst-2); max-width: 54ch; }

.wybor { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.karta {
  display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0; overflow: hidden;
  border: 1px solid var(--linia); border-radius: var(--promien); background: var(--tlo-2);
  transition: border-color .15s, transform .15s;
}
.karta:hover, .karta:focus-visible { border-color: var(--akcent); transform: translateY(-2px); outline: none; }
.karta img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--tlo-3); }
.karta .opis { padding: 14px 16px 16px; }
.karta .tryb { font-weight: 650; font-size: 1.05rem; }
.karta .kto { color: var(--tekst-3); font-size: .9rem; }

.komunikat { margin: 20px 0 0; padding: 12px 14px; border-radius: var(--promien); background: #3a1d16; color: #f3c9bb; }
.drobne { margin-top: 28px; color: var(--tekst-3); font-size: .82rem; max-width: 70ch; }

/* panel miasta: wejście z linku Tajemnic Miast (?z=tm-<miasto>) */
.miasto {
  margin: 0 0 20px; padding: 16px 18px; border-radius: var(--promien);
  border: 1px solid var(--linia); border-left: 3px solid var(--akcent); background: var(--tlo-2);
}
.miasto p { margin: 0 0 8px; }
.miasto-znak { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--akcent); font-weight: 650; }
.miasto-piatek { color: var(--tekst); }
.miasto-opis { color: var(--tekst-2); font-size: .9rem; }
.miasto-link { color: var(--akcent); text-decoration: none; font-weight: 600; font-size: .9rem; }
.miasto-link:hover { text-decoration: underline; }

/* ---------- gra ---------- */
#gra {
  display: grid; gap: 16px; max-width: 1180px; margin: 0 auto; padding: 12px 16px 16px;
  min-height: 100dvh; grid-template-rows: auto 1fr;
}
@media (min-width: 900px) {
  /* Scena kwadratowa: jej bok to mniejsze z 560 px i wysokości okna minus kłódki, paski i reklama. */
  #gra { grid-template-columns: minmax(0, min(560px, calc(100dvh - 270px))) minmax(0, 1fr); grid-template-rows: 1fr; height: 100dvh; padding: 20px; }
  .prawa { min-height: 0; }
}

.scena {
  position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--promien); background: #000;
}
.scena img, .scena video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scena video { opacity: 0; }
.scena video.widoczne { opacity: 1; }
.ciemno { position: absolute; inset: 0; background: #000; opacity: 1; transition: opacity .8s ease; pointer-events: none; }
.ciemno.znika { opacity: 0; }

.wroc {
  position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.45); cursor: pointer; font-size: 1.2rem;
}
.napis {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 18px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  font-size: clamp(1rem, 3.6vw, 1.2rem); line-height: 1.4; text-shadow: 0 1px 2px #000;
  opacity: 0; transition: opacity .3s;
}
.napis.jest { opacity: 1; }

.koniec {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 24px; background: rgba(8,7,5,.82); backdrop-filter: blur(3px);
}
.koniec h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 6vw, 2.2rem); }
.koniec.wygrana h2 { color: var(--akcent); }
.koniec p { margin: 0 0 8px; color: var(--tekst-2); max-width: 40ch; }
.koniec-klodki { font-size: .9rem; color: var(--tekst-3) !important; }
.przyciski { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.przyciski button {
  cursor: pointer; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--linia); background: var(--tlo-2);
}
.przyciski button.glowny { background: var(--akcent); border-color: var(--akcent); color: var(--akcent-ciemny); font-weight: 650; }

/* kłódki */
.klodki { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 12px 0 0; padding: 0; }
.klodki li {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; text-align: center;
  border-radius: 8px; background: var(--tlo-2); border: 1px solid var(--linia);
  color: var(--tekst-3); font-size: clamp(.6rem, 2.7vw, .72rem); line-height: 1.2; overflow-wrap: anywhere;
}
.klodki li svg { width: 18px; height: 18px; }
.klodki li.otwarta { color: var(--tekst); border-color: var(--akcent); background: #2a2214; }
.klodki li.otwarta svg { color: var(--akcent); }
.klodki li.swieza { animation: blysk 1.2s ease; }
@keyframes blysk { 0% { transform: scale(1); } 30% { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(217,163,90,.35); } 100% { transform: scale(1); } }

/* paski */
.paski { display: grid; gap: 8px; margin-top: 12px; }
.pasek { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 10px; }
.etykieta { font-size: .8rem; color: var(--tekst-3); }
.skala { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.skala span { height: 8px; border-radius: 4px; background: var(--tlo-3); transition: background .3s; }
.skala span.zero { background: #3a3427; }
.skala span.plus { background: var(--zielen); }
.skala span.minus { background: var(--czerwien); }
.czas { height: 8px; border-radius: 4px; background: var(--tlo-3); overflow: hidden; }
.czas div { height: 100%; width: 100%; background: var(--akcent); border-radius: 4px; transition: width .4s; }
.czas.malo div { background: var(--czerwien); }

/* rozmowa */
.prawa { display: flex; flex-direction: column; gap: 10px; min-height: 260px; }
.rozmowa {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px;
  min-height: 160px; max-height: 50dvh;
}
@media (min-width: 900px) { .rozmowa { max-height: none; } }
.dymek { max-width: 86%; padding: 9px 13px; border-radius: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.dymek.ty { align-self: flex-end; background: #3a2f1c; border-bottom-right-radius: 4px; }
.dymek.ona { align-self: flex-start; background: var(--tlo-2); border: 1px solid var(--linia); border-bottom-left-radius: 4px; }
.dymek .kto { display: block; font-size: .72rem; color: var(--tekst-3); margin-bottom: 1px; }
.narrator { align-self: center; text-align: center; color: var(--tekst-3); font-size: .85rem; font-style: italic; max-width: 52ch; padding: 4px 8px; }
.narrator.klodka { font-style: normal; color: var(--akcent); }
.narrator.blad { color: var(--czerwien); font-style: normal; }
.pisze { align-self: flex-start; color: var(--tekst-3); font-size: .85rem; padding: 4px 8px; }
.pisze::after { content: "…"; animation: kropki 1s steps(3) infinite; }
@keyframes kropki { 0% { opacity: .3; } 50% { opacity: 1; } 100% { opacity: .3; } }

.pisz { display: flex; gap: 8px; position: sticky; bottom: 0; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); background: var(--tlo); }
.pisz input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linia); background: var(--tlo-2);
}
.pisz input:focus { outline: none; border-color: var(--akcent); }
.pisz button {
  cursor: pointer; padding: 0 18px; border-radius: 10px; border: 0; background: var(--akcent); color: var(--akcent-ciemny); font-weight: 650;
}
.pisz button:disabled, .pisz input:disabled { opacity: .5; cursor: default; }

/* Polecenie AGIDOT. Klasy celowo NIE „reklama*" - polskie listy filtrów blokerów chowają .reklama. */
.agi-karta {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  margin-top: 12px; padding: 10px 14px; border-radius: var(--promien);
  border: 1px solid var(--linia); background: linear-gradient(100deg, #1d1a12, #241d10);
  color: var(--tekst-2); text-decoration: none; font-size: .85rem; line-height: 1.35;
  transition: border-color .15s;
}
.agi-karta:hover, .agi-karta:focus-visible { border-color: var(--akcent); outline: none; }
.agi-karta strong { color: var(--tekst); font-weight: 650; }
.agi-znak {
  font-weight: 800; letter-spacing: .08em; font-size: .72rem; color: var(--akcent-ciemny);
  background: var(--akcent); padding: 4px 7px; border-radius: 5px;
}
.agi-cta { color: var(--akcent); font-weight: 600; white-space: nowrap; }
.agi-karta.duza { margin-top: 20px; padding: 16px 18px; font-size: .92rem; }
.agi-karta.duza .agi-tresc strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
@media (max-width: 520px) {
  .agi-karta.duza { grid-template-columns: auto 1fr; }
  .agi-karta.duza .agi-cta { grid-column: 1 / -1; }
}
.agi-koniec {
  margin-top: 18px; max-width: 40ch; font-size: .85rem; color: var(--tekst-2); text-decoration: none;
  padding-top: 14px; border-top: 1px solid var(--linia);
}
.agi-koniec strong { color: var(--akcent); font-weight: 600; }
.agi-koniec:hover strong { text-decoration: underline; }

/* mikrofon: dyktowanie zamiast pisania */
.pisz .mikrofon {
  flex: none; width: 48px; cursor: pointer; border-radius: 10px; border: 1px solid var(--linia);
  background: var(--tlo-2); color: var(--tekst-2); display: grid; place-items: center;
}
.pisz .mikrofon svg { width: 22px; height: 22px; }
.pisz .mikrofon:hover { border-color: var(--akcent); color: var(--tekst); }
.pisz .mikrofon.slucha { background: var(--czerwien); border-color: var(--czerwien); color: #1b0c08; animation: puls 1.2s ease-in-out infinite; }
.pisz .mikrofon:disabled { opacity: .5; cursor: default; }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,122,95,.5); } 50% { box-shadow: 0 0 0 8px rgba(224,122,95,0); } }
.mikrofon-info { margin: 0; font-size: .82rem; color: var(--tekst-3); }
.mikrofon-info.blad { color: var(--czerwien); }

/* uwagi i pomysły */
.uwagi-przycisk {
  margin-top: 14px; cursor: pointer; background: transparent; border: 1px solid var(--linia); border-radius: 8px;
  padding: 8px 14px; color: var(--tekst-2); font-size: .9rem;
}
.uwagi-przycisk:hover { border-color: var(--akcent); color: var(--tekst); }
.uwagi-scena {
  position: absolute; top: 10px; right: 10px; height: 40px; padding: 0 14px; border-radius: 20px;
  border: 0; background: rgba(0,0,0,.45); cursor: pointer; font-size: .85rem; color: var(--tekst);
}
.uwagi-scena:hover { background: rgba(0,0,0,.7); }
dialog.uwagi {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  border: 1px solid var(--linia); border-radius: var(--promien); padding: 20px; background: var(--tlo-2); color: var(--tekst);
}
dialog.uwagi::backdrop { background: rgba(0,0,0,.7); }
dialog.uwagi h2 { margin: 0 0 6px; font-size: 1.3rem; }
.uwagi-opis, .uwagi-info { color: var(--tekst-2); font-size: .9rem; margin: 0 0 12px; }
.uwagi-info { color: var(--tekst-3); font-size: .8rem; }
.uwagi-etykieta { display: block; font-size: .85rem; color: var(--tekst-2); margin: 8px 0 4px; }
.uwagi-etykieta span { color: var(--tekst-3); }
dialog.uwagi textarea, dialog.uwagi input {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--linia); background: var(--tlo); color: var(--tekst);
  font: inherit; resize: vertical;
}
dialog.uwagi textarea:focus, dialog.uwagi input:focus { outline: none; border-color: var(--akcent); }
.uwagi-wynik { min-height: 1.2em; margin: 4px 0 0; font-size: .9rem; }
.uwagi-wynik.ok { color: var(--zielen); }
.uwagi-wynik.blad { color: var(--czerwien); }
dialog.uwagi .przyciski { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}