/* Prezentační web TinyHold (etapa 3A, úkol 2). Přepsáno ze schváleného mockupu
   docs/navrh/3a-uvodni-stranka-mockup.html — vzhled beze změny, jen snímek hry přestal
   být zapečený jako `data:` URI a je to soubor (`/img/hra.png`), aby se kešoval a netáhl
   spolu se stránkou. */

/* Paleta odpipetovaná ze hry: tráva a stromy z mapy, břidlicová modř z hradu
   a tlačítek, pergamen a hlína z menu, inkoust z ui/skin.ts (#3b2f1f). */
:root {
  --night:        #14261d;
  --forest:        #1f4136;
  --forest-light: #2b5546;
  --grass:      #8fbf5a;
  --grass-dark:#5f9440;
  --clay:      #b5735a;
  --parchment:   #e9e4b4;
  --parchment-dark:#cfc78e;
  --slate:   #4d7089;
  --slate-light:#6f95af;
  --ink:    #3b2f1f;
  --bone:       #f2f4ef;
  --bone-muted:  #c3cfc4;
  --gold:      #f5d020;
  --gold-dark:   #b89706;
  /* Jediná barva mimo paletu ze hry (úkol 3): chybové hlášky formulářů Identity
     potřebují červenou a ve hře žádná není. Zvolena teplá, ať nebije do očí vedle
     hlíny a pergamenu. */
  --error:      #e2574c;
  --hero-image: url("/img/hra.png");
  --width: 1120px;
  --row: 1.65;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font-family: "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: var(--row);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 900;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
img { display: block; max-width: 100%; }

/* Zlatá je vyhrazená pro `.button--gold` (jediná výzva k založení účtu) a nikam jinam
   nedědí — obyčejný odkaz v textu (patička, budoucí stránky Identity v úkolu 3, které
   tenhle layout sdílí) dostává trávovou z palety, ne zlatou. Pravidlo, ne výjimka pro
   jedno místo: kdyby zlatá byla výchozí barva `a`, každý nový odkaz bez vlastní třídy by
   ji zdědil, přesně jak se to stalo patičce v mockupu. */
a { color: var(--grass); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--bone); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.container { width: 100%; max-width: var(--width); margin-inline: auto; padding-inline: 22px; }

/* ---------- hlavička ---------- */

.header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 18px;
}

.brand {
  font-family: Silkscreen, ui-monospace, monospace;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.02em;
  color: var(--bone);
  text-decoration: none;
}
.brand span { color: var(--grass); }

.nav { display: flex; gap: 22px; align-items: center; }
.nav a {
  color: var(--bone-muted);
  text-decoration: none;
  font-size: 15px;
}
.nav a:hover { color: var(--bone); text-decoration: underline; }

/* Odhlášení musí být POST (formulář), ne odkaz — ale má vypadat jako zbytek navigace. */
.nav form.logout { display: contents; }
.nav button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 15px;
  color: var(--bone-muted);
  cursor: pointer;
}
.nav button:hover { color: var(--bone); text-decoration: underline; }

/* ---------- tlačítka: břidlicová deska ze hry ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 2px solid #2c4459;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--slate-light), var(--slate));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 3px 0 #2c4459;
  color: var(--bone);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .09s ease, box-shadow .09s ease;
}
.button:hover { color: var(--bone); }
.button:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 0 0 #2c4459; }

/* Jediné zlaté místo na stránce. */
.button--gold {
  border-color: var(--gold-dark);
  background: linear-gradient(180deg, #ffe15c, var(--gold));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 var(--gold-dark);
  color: #2e2405;
}
.button--gold:hover { color: #2e2405; }
.button--gold:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 var(--gold-dark); }

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; }

.hero__background {
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: 72% 42%;
  image-rendering: pixelated;
}
/* Clona drží text čitelný nad pestrou mapou. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,38,29,.72) 0%, rgba(20,38,29,.34) 38%, rgba(20,38,29,.92) 100%),
    linear-gradient(90deg, rgba(20,38,29,.8) 0%, rgba(20,38,29,.1) 62%);
}
.hero__inner { position: relative; z-index: 2; padding-block: 34px 74px; }

.scroll {
  max-width: 640px;
  background: var(--parchment);
  border: 3px solid #8a7a4a;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  padding: 34px 34px 30px;
  color: var(--ink);
  /* Válečky nahoře a dole — svitek ze hry, ne obyčejná karta. */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.09), rgba(0,0,0,0) 26px),
    linear-gradient(0deg, rgba(0,0,0,.09), rgba(0,0,0,0) 26px);
}

.scroll h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  color: var(--ink);
  margin-bottom: 16px;
}
.scroll__caption {
  max-width: 52ch;
  color: #52412c;
  font-size: 1.0625rem;
}
.scroll__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}
.scroll__below {
  margin-top: 16px;
  font-size: 15px;
  color: #6a573c;
}

/* ---------- pás se třemi věcmi ---------- */

.features { background: var(--forest); padding-block: 66px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 40px 46px;
}

.feature h3 {
  font-size: 1.35rem;
  margin-bottom: 10px;
  color: var(--bone);
}
.feature p { color: var(--bone-muted); max-width: 46ch; }

/* Zelený pruh nese roli „tohle je vlastnost", ne ozdobu — proto je jen tady. */
.feature__mark {
  width: 46px;
  height: 6px;
  background: var(--grass);
  border-radius: 3px;
  margin-bottom: 18px;
}

/* ---------- jak se hraje ---------- */

.howto { background: var(--grass-dark); padding-block: 66px; color: #12250c; }
.howto h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); color: #12250c; }
.howto__intro { margin-top: 12px; max-width: 54ch; color: #1d3a13; }

.steps {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}
/* Číslo je tu proto, že to POŘADÍ JE — kód se pošle až po založení místnosti. */
.step__number {
  font-family: Silkscreen, ui-monospace, monospace;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 9px 10px;
  background: #12250c;
  color: var(--grass);
  border-radius: 4px;
}
.step h3 { font-size: 1.15rem; color: #12250c; margin-bottom: 6px; }
.step p { font-size: 15.5px; color: #1d3a13; }

/* ---------- účet ---------- */

.account { background: var(--clay); padding-block: 70px; }
.account__board {
  background: var(--parchment);
  border: 3px solid #8a7a4a;
  border-radius: 4px;
  color: var(--ink);
  padding: 40px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 34px 44px;
  align-items: center;
}
.account__board h2 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); color: var(--ink); }
.account__board p { margin-top: 12px; color: #52412c; max-width: 46ch; }

.account__list { margin: 16px 0 0; padding-left: 20px; color: #52412c; }
.account__list li { margin-top: 7px; }

.account__actions { display: flex; flex-direction: column; gap: 12px; }
.account__actions .button { width: 100%; }
.account__note { font-size: 14.5px; color: #6a573c; }

/* ---------- ukázka menu ---------- */

.showcase { background: var(--night); padding-block: 66px; }
.showcase__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: center;
}
.showcase h2 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); }
.showcase p { margin-top: 14px; color: var(--bone-muted); max-width: 46ch; }
.showcase img {
  width: 100%;
  border: 3px solid var(--forest-light);
  border-radius: 4px;
  image-rendering: pixelated;
}

/* ---------- pata ---------- */

.footer { background: var(--forest); padding-block: 34px; font-size: 14.5px; color: var(--bone-muted); }
.footer__row { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; }
.footer__version { color: var(--bone-muted); font-size: 12px; }

/* ---------- moje zápasy (3B, úkol 7) ---------- */
/* Stejná tmavá `body` jako hlavička a stránky Identity, ne pergamenová deska přes celou
   šířku — tabulka na pergamenu by musela řešit kontrast záhlaví i řádků navíc. Pergamen
   zůstává jen pro prázdný stav (`.matches__empty`), kde dělá stejnou práci jako
   `.account__board`: jedna vizuálně oddělená karta uprostřed tmavé stránky. */
.matches { padding-block: 54px 96px; }
.matches h1 { color: var(--bone); font-size: clamp(1.6rem, 3.2vw, 2.05rem); margin-bottom: 10px; }
.matches__subtitle { color: var(--bone-muted); margin-bottom: 26px; }

.matches__table-wrap { overflow-x: auto; }
.matches__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.matches__table th {
  text-align: left;
  padding: 10px 16px 10px 0;
  color: var(--bone-muted);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2px solid var(--forest-light);
}
.matches__table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--forest-light); vertical-align: top; }
.matches__table tr:last-child td { border-bottom: none; }

.matches__result { font-weight: 700; }
/* Jediné místo, kde má výhra vlastní barvu — a je to tráva z palety, ne zlatá (ta zůstává
   jen na výzvě k založení účtu, viz komentář výš u `.button--gold`). */
.matches__result--win { color: var(--grass); }
.matches__note { display: block; margin-top: 3px; font-size: 13.5px; color: var(--bone-muted); max-width: 46ch; }
.matches__badge { display: inline-block; margin-left: 8px; padding: 1px 7px; font-size: 12px;
  border: 1px solid var(--grass); border-radius: 4px; color: var(--grass); vertical-align: middle; }
.matches__note--warn { color: var(--error); }
.matches__delta { margin-left: 8px; font-size: 13px; font-weight: 700; vertical-align: middle; }
.matches__delta--up { color: var(--grass); }
.matches__delta--down { color: var(--bone-muted); }

.matches__empty {
  max-width: 560px;
  background: var(--parchment);
  border: 3px solid #8a7a4a;
  border-radius: 4px;
  color: var(--ink);
  padding: 34px 32px;
}
.matches__empty h2 { font-size: 1.3rem; color: var(--ink); margin-bottom: 10px; }
.matches__empty p { color: #52412c; }
.matches__empty .button { margin-top: 22px; }

/* Žebříček (3C) — sdílí tabulku s Moje zápasy, vlastní má jen pořadí a zvýraznění. */
.leaderboard__rank { color: var(--bone-muted); width: 3ch; }
.leaderboard__rating { font-weight: 700; }
.leaderboard__wins { color: var(--grass); }
.leaderboard__row--me td { background: color-mix(in srgb, var(--grass) 14%, transparent); }
.leaderboard__row--me td:first-child { border-left: 3px solid var(--grass); padding-left: 8px; }

/* ---------- formuláře Identity (registrace, přihlášení, profil — úkol 3) ---------- */
/* Žádná pergamenová deska: stránky jedou přímo na tmavém pozadí `body`, stejně jako
   hlavička. Díky tomu platí beze změny obecné `a { color: var(--grass) }` výš — odkaz
   „Zapomenuté heslo" nebo „Zaregistrovat se" nepotřebuje vlastní třídu ani výjimku.
   Tlačítka jsou `.tlacitko` (břidlicová), NE `.button--gold` — zlatá zůstává jen na
   výzvě k založení účtu na úvodní stránce. */
.identity { max-width: 440px; padding-block: 54px 96px; }
.identity h1 { color: var(--bone); font-size: clamp(1.6rem, 3.2vw, 2.05rem); margin-bottom: 8px; }
.identity__subtitle { color: var(--bone-muted); margin-bottom: 30px; }

.form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; color: var(--bone-muted); }

.input {
  padding: 11px 14px;
  border: 2px solid var(--forest-light);
  border-radius: 6px;
  background: var(--bone);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  width: 100%;
}
.input:focus { outline: none; border-color: var(--gold-dark); }
.input[disabled] { color: var(--bone-muted); background: var(--bone-muted); opacity: .55; cursor: not-allowed; }

/* „Zapamatovat si mě" a podobná zaškrtávátka — text vedle checkboxu, ne pod ním. */
.field--checkbox { flex-direction: row; align-items: center; gap: 10px; }
.field--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--bone); }

.error { color: var(--error); font-size: 14px; }
.error-summary { color: var(--error); font-size: 14.5px; }
.error-summary:empty { display: none; }

.form__actions .button { width: 100%; }

.form__links { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }

.identity__nav { display: flex; gap: 18px; margin-bottom: 26px; font-size: 14.5px; }

/* ---------- kontakt (2026-09-16) — formulář na tmavém pozadí jako Identity ---------- */
.contact { max-width: 520px; }
.contact textarea.input { min-height: 170px; resize: vertical; line-height: 1.5; }
.contact__note { margin-top: 18px; font-size: 14px; color: var(--bone-muted); }
.contact__sent { color: var(--grass); }
/* Past na roboty: odsunutá mimo obrazovku, ne `display:none` — část robotů pole s
   `display:none` přeskočí, ale do odsunutého píší všichni. */
.contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- licence (2026-09-16) — text na tmavém pozadí jako Moje zápasy ---------- */
.licenses { max-width: 720px; }
.licenses h2 { color: var(--bone); font-size: 1.2rem; margin: 30px 0 8px; }
.licenses p, .licenses li { color: var(--bone-muted); line-height: 1.55; }
.licenses strong { color: var(--bone); font-weight: 700; }
.licenses__list { margin: 8px 0 0; padding-left: 20px; }
.licenses__list li { margin-top: 6px; }
.identity__nav a.aktivni { color: var(--bone); font-weight: 700; text-decoration: none; }

@media (max-width: 760px) {
  .account__board, .showcase__grid { grid-template-columns: 1fr; }
  /* Navigace se na mobilu do úkolu 8 schovávala úplně (`display: none`). Od chvíle, kdy
     v ní je přezdívka, odkaz do hry a odhlášení (návrh §6), by to hráče na telefonu
     odřízlo od jediné cesty do multiplayeru — zalomí se tedy na druhý řádek místo toho,
     aby zmizela. */
  .header { flex-wrap: wrap; }
  .nav { flex-wrap: wrap; gap: 12px 16px; font-size: 14px; }
  .scroll { padding: 26px 22px 24px; }
  .identity { padding-block: 34px 64px; }
}

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