/* ════════════════════════════════════════════════════════════
   18-error.css

   Chybove stranky (templates/error.html) - 400/403/404/405/413/429/500.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada na tom poradi zavisi - nemenit ho.
   Tenhle soubor je posledni schvalne: prebiji jen sam sebe, nic z nej
   nesmi zasahnout do zbytku webu (vsechny selektory maji prefix .err).
   ════════════════════════════════════════════════════════════ */

.err-page { padding-top: clamp(3rem, 9vh, 5.5rem); }

.err {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

/* Panel nesmi mit JINOU plochu nez `--frame-bg`: `.neon-frame` kresli
   preruseni ramecku "gumami" prave v te barve, takze jina plocha pod
   rameckem = ctyri viditelne obdelnicky na kazde strane.
   Plna `--bg` je ale POVINNA - pozadi stranky nese laserove paprsky
   (`.arena-beams`) a pruhledny panel by je nechal projet pod prerusenim,
   kde je guma prekryje a paprsek se v nem ztrati. `--bg` je presne ta barva,
   kterou guma kresli, takze se nemaji jak rozejit.
   Stejny duvod, proc tu neni `overflow: hidden` - urizl by gumy uplne. */
.err-panel {
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3rem) clamp(2rem, 5vw, 3rem);
  background: var(--bg);
}

.err-eyebrow { margin: 0 0 .5rem; }

/* ── Cislo chyby ──
   `tabular-nums` je tu povinne ze stejneho duvodu jako v leaderboardu:
   proporcionalni "1" je uzsi nez "0" a 404 vs. 500 by mely jinou sirku,
   takze by cislo pri prechodu mezi chybami poskakovalo. */
.err-code {
  position: relative;
  display: inline-block;
  margin: 0 0 1rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(4.5rem, 22vw, 10rem);
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* Plna zelena vypln by v tehle velikosti prekricela vsechno ostatni vcetne
   nadpisu, proto je cislo jen obrys - neonova trubice, ne svetelna plocha.
   Prohlizec bez `-webkit-text-stroke` (zadny aktualni, ale chovani musi byt
   definovane) by u `color: transparent` nevykreslil NIC, takze vypln
   zustava vychozi a obrys se zapina az v @supports. */
.err-digits {
  color: var(--surface-2);
  text-shadow: var(--glow-text);
}
@supports (-webkit-text-stroke: 2px currentColor) {
  .err-digits {
    color: transparent;
    -webkit-text-stroke: 2px var(--accent);
    text-shadow: none;
    filter: var(--glow-filter);
  }
}

/* Zasah laserem pres cislo. Nakresli se jednou pri nacteni a zustane lezet -
   neni to smycka: opakovany pruh by z jednorazoveho signalu udelal tapetu
   (stejny duvod, proc je PULS na strance dvakrat a ne u kazde sekce). */
.err-beam {
  position: absolute;
  left: -6%;
  right: -6%;
  top: 56%;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: var(--glow);
  transform-origin: left center;
  animation: err-beam-in 620ms var(--ease-out) 160ms both;
}
@keyframes err-beam-in {
  from { transform: scaleX(0); opacity: .4; }
  to   { transform: scaleX(1); opacity: 1; }
}

.err-title { margin: 0 0 .75rem; }
.err-lead { margin: 0 auto 1.75rem; }
.err-actions { justify-content: center; flex-wrap: wrap; gap: .75rem; }

/* ── Cesta ven ──
   Slepa ulicka vzdy nese nabidku, kam dal. Pilulky, ne odrazky: je to
   navigace, a `.pill` je zakladni interaktivni tvar manualu. */
.err-links-label {
  margin: 2.25rem 0 .85rem;
  color: var(--faint);
  font-size: .9rem;
}
.err-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.err-links a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .err-beam { animation: none; }
}