/* ANONCHAT — krycia stránka musí vyzerať ako nič. Chat musí byť tmavý a tichý. */

:root {
  --pozadie: #ffffff;
  --text: #1a1a1a;
  --slabe: #8a8a8a;
  color-scheme: light dark;
}

* { box-sizing: border-box; }

/* MUSÍ byť pred všetkým ostatným: `display: flex` na skrytých vrstvách by inak
   prebilo atribút `hidden` a chat by bol vidieť rovno na krycej stránke. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--pozadie);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ── krycia stránka ─────────────────────────────────────────────────────── */

#kryt {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  user-select: none;
  -webkit-user-select: none;
}

.znak {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: 0.22em;
  color: #2a2a2a;
}

/* Bodka je terč knocku. Nesmie sa nijako odlišovať. */
#bod {
  -webkit-touch-callout: none;
  touch-action: none;
  cursor: default;
}

.linka { width: 44px; height: 1px; background: #dcdcdc; }
.pata { font-size: 11px; color: #b4b4b4; letter-spacing: 0.06em; }

/* ── brána ──────────────────────────────────────────────────────────────── */

#brana {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pozadie);
  z-index: 20;
}

#kod {
  width: 190px;
  padding: 10px 4px;
  border: none;
  border-bottom: 1px solid #d0d0d0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  letter-spacing: 0.42em;
  text-align: center;
  caret-color: #bdbdbd;
}
#kod.caka { opacity: 0.35; }

/* ── čakáreň kamaráta ───────────────────────────────────────────────────── */

#cakaren {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--pozadie);
  z-index: 25;
  user-select: none;
  -webkit-user-select: none;
}

.cislo-velke {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(38px, 12vw, 62px);
  letter-spacing: 0.16em;
  color: #1a1a1a;
}

.cak-popis { font-size: 13px; color: #a0a0a0; letter-spacing: 0.04em; }
.cak-popis.chyba { color: #b45252; }

/* ── Petrov výber konverzácie ───────────────────────────────────────────── */

#vyber {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b0b0c;
  color: #e8e8ea;
  z-index: 28;
  padding: 20px;
}

.vyber-vnutro { width: min(440px, 100%); }
.vyber-nadpis { font-size: 12px; color: #6f6f78; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }

.vyber-polozka {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 8px;
  background: #131316;
  border: 1px solid #26262b;
  border-radius: 8px;
  color: #e8e8ea;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.vyber-polozka:hover { border-color: #3d3d48; }
.vyber-polozka .drobne { margin-left: auto; font-size: 11px; color: #6f6f78; }
.vyber-polozka .bodka { width: 7px; height: 7px; border-radius: 50%; background: #2b2b33; flex: 0 0 auto; }
.vyber-polozka .bodka.zivy { background: #4a9d6a; }

/* ── hlásenie „niekto klope" ────────────────────────────────────────────── */

#klopanie {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: #16161a;
  border-bottom: 1px solid #2b2b33;
  padding: 12px 14px;
  color: #e8e8ea;
  font-size: 14px;
}
.klop-riadok { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.klop-riadok:last-child { margin-bottom: 0; }
.klop-kod {
  font-family: ui-monospace, monospace;
  font-size: 21px;
  letter-spacing: 0.12em;
  color: #fff;
}
.klop-popis { font-size: 12px; color: #8a8a95; width: 100%; }
#klopanie button {
  border: 1px solid #2b2b33;
  background: #1c1c22;
  color: #e8e8ea;
  border-radius: 5px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
#klopanie button.ano { background: #1f4030; border-color: #2c5a44; }
#klopanie button.nie { background: #3a1f1f; border-color: #5a2c2c; }

/* ── chat ───────────────────────────────────────────────────────────────── */

#chat {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0b0b0c;
  color: #e8e8ea;
  z-index: 30;
}

#hlava {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #1c1c1f;
  font-size: 12px;
  color: #6f6f78;
  flex: 0 0 auto;
}

#kto { font-family: ui-monospace, monospace; letter-spacing: 0.08em; }
.stav { margin-left: auto; font-size: 11px; }
.stav.tu { color: #4a9d6a; }
.stav.prec { color: #6f6f78; }

#cislo {
  background: none;
  border: 1px solid #26262b;
  color: #6f6f78;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
}
#cislo:hover { color: #b9b9c2; }

#tok {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-user-select: none;
  user-select: none;
}

/* Správy sú kreslené do canvasu — nedajú sa označiť, skopírovať ani prečítať OCR-om. */
.sprava { display: block; max-width: 100%; }
.sprava.moja { align-self: flex-end; }
.sprava.jeho { align-self: flex-start; }

.drz {
  position: relative;
  cursor: pointer;
}
.drz::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed #2e2e35;
  border-radius: 6px;
  pointer-events: none;
}
.drz.otvorene::after { border-color: transparent; }

#upozornenie {
  padding: 6px 14px;
  font-size: 11px;
  color: #c8873f;
  border-top: 1px solid #1c1c1f;
  flex: 0 0 auto;
}

#pisanie {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  border-top: 1px solid #1c1c1f;
  flex: 0 0 auto;
}

#text {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 9px 12px;
  border: 1px solid #26262b;
  border-radius: 18px;
  background: #131316;
  color: #e8e8ea;
  font: inherit;
  font-size: 15px;
  outline: none;
}
#text:focus { border-color: #3a3a44; }

#pisanie button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #2b2b33;
  color: #e8e8ea;
  font-size: 17px;
  cursor: pointer;
  flex: 0 0 auto;
}
#pisanie button:active { background: #3a3a44; }

/* ── záclona pri strate fokusu / podozrení na snímku ────────────────────── */

#zaclona {
  position: fixed;
  inset: 0;
  background: #0b0b0c;
  z-index: 100;
}

/* Pri tlači sa nesmie vytlačiť nič. */
@media print {
  body * { display: none !important; }
  body::after { content: "ASSECBS"; }
}