:root {
  --bg: #0d1013;
  --fg: #e8e8e8;
  --dim: #8a949e;
  --faint: #5c6670;
  --accent: #e63946;
  --panel: #161b20;
  --border: #232a31;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[hidden] { display: none !important; }

/* ---------- strona główna ---------- */

#home {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 16px;
}

h1 { font-size: 42px; margin: 0 0 4px; letter-spacing: -1px; }
.accent { color: var(--accent); }
.tagline { color: var(--dim); margin: 0 0 32px; text-align: center; }

.panel {
  width: 100%;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

textarea {
  background: #0b0e11;
  color: var(--fg);
  border: 1px solid #2a323a;
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  resize: vertical;
  min-height: 170px;
}
textarea:focus { outline: 1px solid var(--accent); }

input[type="range"] { accent-color: var(--accent); width: 100%; }

.row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

button {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 28px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: .5; cursor: default; }

/* przycisk drugorzędny: Wznów — widoczny tylko gdy jest zapisana pozycja dla TEGO tekstu */
button.secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid #3a444e;
}
button.secondary:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* selektor strony startowej — tylko dla tekstów ze znacznikami ⟦str. N⟧ (PDF/DOCX) */
.pages input[type="number"] {
  width: 5.5em;
  background: #0b0e11;
  color: var(--fg);
  border: 1px solid #2a323a;
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
}
.pages #pagesInfo { color: var(--dim); }

.filebtn {
  border: 1px dashed #3a444e;
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--dim);
  cursor: pointer;
  font-size: 14px;
}
.filebtn:hover { color: var(--fg); border-color: var(--dim); }

.status { color: var(--dim); font-size: 14px; }
.status.err { color: #ff8a8a; }

.meta { color: var(--dim); font-size: 14px; }

.note { color: var(--faint); font-size: 13px; margin: 0; }
kbd {
  background: #21262c;
  border: 1px solid #333b43;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 12px;
}

/* ---------- czytnik: zero rozpraszaczy ---------- */

/* position:fixed zamiast min-height:100vh — na mobile 100vh to viewport
   z ukrytymi paskami, więc dokument był wyższy od ekranu: wyraz lądował poniżej
   optycznego środka, stronę dało się przewinąć w trakcie czytania, a samo
   przewinięcie zwijało pasek adresu i przesuwało kotwicę jeszcze raz.
   overflow:hidden przycina połówki dłuższych wyrazów na krawędziach ekranu. */
#reader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  /* bez tego mobilne przeglądarki czekają ~300 ms na dwutap-zoom i gubią
     drugi klik — gest STOP (dwuklik) byłby na dotyku nieosiągalny */
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

#word {
  display: grid;
  /* minmax(0,...) jest krytyczne: bez tego długi wyraz rozpycha kolumnę 1fr
     (min-width:auto) i pivot przestaje być przypięty do środka ekranu */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: 100%;
  font-size: clamp(30px, 7vw, 64px);
  font-weight: 500;
  line-height: 1.2;
  white-space: pre;
  cursor: pointer;
}

/* dłuższe wyrazy — mniejsza czcionka, żeby nic nie uciekało poza ekran */
#word[data-s="1"] { font-size: clamp(24px, 5vw, 48px); }
#word[data-s="2"] { font-size: clamp(18px, 3.6vw, 34px); }

#wb { text-align: right; }
#wp { color: var(--accent); }
#wa { text-align: left; }