/* Značka: červený blok, biela sadzba, monogram FD (návrh z 6. 9. 2026).
   Displejové písmo Anton je zatiaľ pôvodný rez — ak sa vyberie iný
   (Archivo Black, Bebas Neue, Big Shoulders, Staatliches, Familjen Grotesk),
   mení sa jediné miesto: --pismo-display a odkaz na Google Fonts v layoute.

   Štruktúru sadzby (linka pod titulkom, číslované sekcie, tabuľky
   s tónovanou hlavičkou) preberáme z firemných dokumentov. */

@font-face { font-family: 'AntonFallback'; src: local('Haettenschweiler'), local('Impact'); }

:root {
  --cervena: #E5202E;
  --cervena-tmava: #C8102E;
  --cervena-tmavsia: #A20F1B;
  --ink: #141414;
  --seda: #6b6b6b;
  --seda-svetla: #9a9a9a;
  --linka: #ededed;
  --linka-vyrazna: #d8d8d8;
  --papier: #ffffff;
  --pozadie: #f7f7f7;
  --tint: #fdeaec;
  --trava: #1b7f43;
  --trava-tmava: #145032;
  --zlta: #e0a021;

  /* Jeden žľab pre všetky obaly (.obal, hlavička, prepínač). Na 360 px
     telefóne brala pevná 2,5rem takmer 12 % šírky obrazovky. */
  --zlab: clamp(1.4rem, 5vw, 2.5rem);

  --pismo-display: 'Anton', 'AntonFallback', 'Arial Narrow', Impact, sans-serif;
  --pismo: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.55 var(--pismo);
  color: var(--ink);
  background: var(--pozadie);
}
a { color: var(--cervena); }

.obal { width: min(780px, 100% - var(--zlab)); margin-inline: auto; }

/* ---------- hlavička ---------- */
.hlava {
  background: var(--cervena); color: #fff;
  border-bottom: 3px solid var(--trava);
}
.hlava-vnutro {
  width: min(780px, 100% - var(--zlab)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0; flex-wrap: wrap;
}
.znacka { color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: .01em; }
.hlava nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
/* Na ploche je pás priehľadný obal — odkazy sú položkami nav ako doteraz. */
.menu-pas { display: contents; }
.hlava nav a {
  color: #c3c9e8; text-decoration: none;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.hlava nav a:hover { color: #fff; }

main.obal { padding: 2rem 0 3rem; }

/* ---------- titulky ---------- */
h1 { font-size: 1.65rem; color: var(--cervena); margin: 0 0 .3rem; line-height: 1.2; letter-spacing: -.01em; }
.linka-titul { width: 44px; height: 3px; background: var(--trava); margin: 0 0 1.1rem; }
.podnadpis { color: var(--seda); margin: 0 0 1.6rem; }

h2 {
  font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cervena); margin: 2rem 0 .7rem;
  display: flex; align-items: center; gap: .5rem;
}
h2 .cislo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; background: var(--cervena); color: #fff;
  font-size: .72rem; letter-spacing: 0; flex: 0 0 auto;
}
h3 { font-size: 1rem; color: var(--cervena); margin: 1.1rem 0 .35rem; }

/* ---------- karty ---------- */
.karta {
  background: var(--papier); border: 1px solid var(--linka);
  padding: 1.25rem 1.35rem; margin-bottom: 1rem;
}
.karta > :first-child { margin-top: 0; }
.karta > :last-child { margin-bottom: 0; }

/* ---------- štatistické dlaždice ---------- */
.dlazdice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--linka); border: 1px solid var(--linka); margin-bottom: 1.4rem; }
.dlazdica { background: var(--papier); padding: 1rem .5rem; text-align: center; }
.dlazdica .cislo { display: block; font-size: 1.85rem; font-weight: 700; color: var(--cervena); line-height: 1.05; }
.dlazdica .popis { display: block; font-size: .68rem; color: var(--seda);
  margin-top: .3rem; letter-spacing: .08em; text-transform: uppercase; }
.dlazdica.zvyraznena .cislo { color: var(--trava); }

/* ---------- akcie ---------- */
.akcie { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.8rem; }
.tlacidlo {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  text-align: center; text-decoration: none; font-weight: 600; font-size: .98rem;
  background: var(--trava); color: #fff; padding: 1.05rem 1rem; border: 2px solid var(--trava);
}
.tlacidlo:hover { background: var(--trava-tmava); border-color: var(--trava-tmava); }
.tlacidlo.druhotne { background: #fff; color: var(--cervena); border-color: var(--cervena); }
.tlacidlo.druhotne:hover { background: var(--tint); }
.tlacidlo .ikona { font-size: 1.2rem; }

button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--trava); color: #fff; border: 2px solid var(--trava);
  padding: .68rem 1.35rem;
}
button:hover { background: var(--trava-tmava); border-color: var(--trava-tmava); }
button.druhotne { background: #fff; color: var(--cervena); border-color: var(--cervena); }
button.druhotne:hover { background: var(--tint); }
button.nebezpecne { background: #fff; color: var(--cervena); border-color: #e6b8b4; margin-left: .5rem; }
button.nebezpecne:hover { background: #fdecea; }

/* ---------- zoznam zápasov ---------- */
.zoznam { border: 1px solid var(--linka); background: var(--papier); }
.riadok { display: block; text-decoration: none; color: inherit;
  padding: .8rem 1rem; border-bottom: 1px solid var(--linka); }
.zoznam .riadok:last-child { border-bottom: 0; }
.riadok:hover { background: var(--tint); }
.riadok-hlavne { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.riadok-hlavne strong { color: var(--cervena); }
.riadok-vedlajsie { color: var(--seda); font-size: .82rem; margin-top: .15rem; }
.vysledok { font-weight: 700; padding: .1rem .45rem; font-size: .92rem; flex: 0 0 auto; }
.vysledok.vyhra  { background: #e2f4e9; color: var(--trava-tmava); }
.vysledok.prehra { background: #fdecea; color: #7d1a15; }
.vysledok.remiza { background: #eef0f3; color: #4a5058; }
.vysledok.neznamy{ background: #eef0f3; color: #98a29c; }

/* ---------- kalendár ---------- */
.kal-riadok { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .9rem;
  align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--linka);
  text-decoration: none; color: inherit; }
.zoznam .kal-riadok:last-child { border-bottom: 0; }
.kal-riadok:hover { background: var(--tint); }
.kal-datum { text-align: center; background: var(--tint); border: 1px solid var(--linka); padding: .3rem 0; }
.kal-datum .den { display: block; font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--seda); }
.kal-datum .cislo { display: block; font-size: 1.25rem; font-weight: 700; color: var(--cervena); line-height: 1.1; }
.kal-datum .mesiac { display: block; font-size: .62rem; color: var(--seda); text-transform: uppercase; }
.kal-kedy { font-size: .78rem; color: var(--seda); }
.kal-supper { font-weight: 600; color: var(--cervena); }
.kal-sipka { color: var(--seda); font-size: 1.1rem; }

.stitok { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: .12rem .4rem; vertical-align: middle; margin-left: .35rem; }
.stitok.fn { background: var(--tint); color: var(--cervena); }
.stitok.doma { background: #e2f4e9; color: var(--trava-tmava); }
.stitok.vonku { background: #fdf3e2; color: #8a5a10; }
.stitok.caka { background: #fff4d6; color: #8a6410; }

.upozornenie { background: #fff9e8; border: 1px solid #f0dca8; padding: 1rem 1.15rem; margin-bottom: 1.1rem; }
.upozornenie strong { color: #7a5a10; }

/* ---------- formuláre ---------- */
.pole { margin-bottom: 1.05rem; }
.pole > label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .9rem; color: var(--cervena); }
.pole .napoveda { color: var(--seda); font-size: .84rem; margin: .28rem 0 0; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], select, textarea {
  width: 100%; padding: .62rem .7rem; font: inherit; color: inherit;
  border: 1px solid #aab6c4; background: #fff; border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cervena); outline-offset: 1px; }
textarea { min-height: 6.5rem; resize: vertical; }

.dvojica { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.trojica { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 .9rem; }
.skore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .7rem; margin-bottom: .6rem; }
.skore .pomlcka { font-size: 1.4rem; font-weight: 700; padding-bottom: .7rem; color: var(--seda); }

.suhlas { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: .8rem;
  background: #fbfcfe; border: 1px solid var(--linka); padding: .75rem .9rem; }
.suhlas input { margin-top: .25rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.suhlas label { font-size: .9rem; line-height: 1.5; }
.povinne { color: var(--cervena); }

/* kategórie ako štítky */
.kategorie { margin-bottom: 1rem; }
.stupen { margin-bottom: .75rem; }
.stupen-nazov { display: block; font-size: .68rem; color: var(--seda); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: .35rem; }
.chip { display: inline-block; margin: 0 .35rem .35rem 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: inline-block; padding: .5rem .85rem; border: 2px solid var(--linka);
  background: #fff; font-weight: 600; font-size: .95rem; color: var(--cervena); }
.chip input:checked + span { background: var(--cervena); border-color: var(--cervena); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--trava); outline-offset: 2px; }

/* hviezdičky */
.hviezdy { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.hviezda { cursor: pointer; }
.hviezda input { position: absolute; opacity: 0; width: 0; height: 0; }
.hviezda span { display: inline-block; font-size: 2rem; line-height: 1; color: #cdd6e0; padding: .1rem; }
.hviezda input:checked + span { color: var(--zlta); }
.hviezda.zrusit span { font-size: .8rem; color: var(--seda); padding: .6rem .3rem; text-decoration: underline; }
.hviezda.zrusit input:checked + span { color: var(--ink); }

/* ---------- tabuľky ---------- */
.tabulka { width: 100%; border-collapse: collapse; }
.tabulka th { background: var(--tint); color: var(--cervena); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; text-align: right;
  padding: .5rem .55rem; border-bottom: 1px solid var(--cervena); }
.tabulka td { font-size: .92rem; padding: .5rem .55rem; border-bottom: 1px solid var(--linka); text-align: right; }
.tabulka th:first-child, .tabulka td:first-child { text-align: left; }
.tabulka tr:last-child td { border-bottom: 0; }

/* ---------- hlásenia ---------- */
.chyby { background: #fdecea; border: 1px solid #f0c4c0; color: #7d1a15; padding: .85rem 1rem; margin-bottom: 1.1rem; }
.chyby ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.hotovo { background: #e8f5ee; border: 1px solid #b5d9c5; color: var(--trava-tmava); padding: 1rem 1.1rem; margin-bottom: 1.1rem; }

/* ---------- dokumenty ---------- */
.dokument { background: var(--papier); border: 1px solid var(--linka); padding: 1.4rem 1.5rem; }
.dokument h2 { display: block; font-size: .82rem; border-bottom: 1px solid var(--linka); padding-bottom: .35rem; }
.dokument table { width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .9rem; display: block; overflow-x: auto; }
.dokument th, .dokument td { border: 1px solid var(--linka); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.dokument th { background: var(--tint); color: var(--cervena); }
.dokument code { background: var(--tint); padding: .1rem .3rem; font-size: .9em; }
.verzia { color: var(--seda); font-size: .85rem; margin-bottom: 1.2rem; }

/* ---------- pätička ---------- */
.pata { border-top: 1px solid var(--linka); background: #fff; padding: 1.4rem 0; margin-top: 2.5rem; }
.pata p { margin: 0 0 .5rem; font-size: .8rem; color: var(--seda); }
.pata .odkazy { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }

@media (max-width: 520px) {
  main.obal { padding-top: 1.4rem; }
  .dlazdice { grid-template-columns: repeat(2, 1fr); }
  .dvojica, .trojica, .akcie { grid-template-columns: 1fr; }
  .karta, .dokument { padding: 1.05rem; }
  .dlazdica .cislo { font-size: 1.55rem; }
}

/* ---------- značka ---------- */
.hlava { background: var(--cervena); border-bottom: 0; }
.znacka { display: inline-flex; align-items: center; gap: .55rem; }
.znacka-ikona {
  width: 1.9rem; height: 1.9rem; border-radius: .5rem; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--pismo-display); font-size: .95rem; line-height: 1;
  color: var(--cervena); letter-spacing: -.02em; flex: 0 0 auto;
}
.znacka-text {
  font-family: var(--pismo-display); font-size: 1.15rem; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .01em; color: #fff; font-weight: 400;
}
.hlava nav a { color: #ffd4d7; }
.hlava nav a:hover { color: #fff; }

h1 { font-family: var(--pismo-display); font-weight: 400; text-transform: uppercase;
  font-size: 2.1rem; line-height: 1.22; letter-spacing: .005em; color: var(--ink); }
/* POZOR na slovenčinu v displejovom písme.
   Veľké Ť, Ď, Ľ, Č, Š, Ž majú caron vysoko nad verzálkami. Pri tesnom riadkovaní
   sa háčik druhého riadku prekryje s písmenami prvého a v čiernom texte úplne
   splynie — „DIEŤAŤA" potom vyzerá ako „DIETATA" a človek to hľadá v písme,
   hoci chyba je v riadkovaní. Pod 1.2 nechodiť. */
.linka-titul { background: var(--cervena); width: 56px; height: 5px; margin-bottom: 1.2rem; }

.dlazdica .cislo { font-family: var(--pismo-display); font-weight: 400; font-size: 2.1rem; color: var(--ink); }
.dlazdica.zvyraznena .cislo { color: var(--cervena); }
h2 .cislo { font-family: var(--pismo); font-weight: 700; }
.kal-datum .cislo { font-family: var(--pismo-display); font-weight: 400; color: var(--ink); }

/* hlavná akcia je futbalová zelená, aby sa nebila so značkovou červenou;
   druhotná nesie značku */
.tlacidlo.druhotne { color: var(--cervena); border-color: var(--cervena); }
.tlacidlo.druhotne:hover { background: var(--tint); }
button.druhotne { color: var(--cervena); border-color: var(--cervena); }
button.druhotne:hover { background: var(--tint); }
.stitok.fn { background: var(--tint); color: var(--cervena-tmavsia); }
.kal-datum { background: var(--tint); border-color: #f5c9cd; }
.riadok-hlavne strong, .kal-supper { color: var(--ink); }
.tabulka th { background: var(--tint); color: var(--cervena-tmavsia); border-bottom-color: var(--cervena); }
a { color: var(--cervena-tmava); }
.hlava nav a { text-transform: uppercase; }

/* ---------- hlavička hráča s farbami klubu ---------- */
.hrac-hlavicka {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem; margin-bottom: 1.4rem;
  background: var(--ink); color: #fff;
  border-bottom: 5px solid var(--cervena);
}
.hrac-foto { border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: rgba(255,255,255,.15); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.hrac-foto-prazdna { width: 76px; height: 76px; display: inline-flex; align-items: center;
  justify-content: center; font-family: var(--pismo-display); font-size: 1.7rem; letter-spacing: .02em; }
.hrac-udaje { flex: 1 1 auto; min-width: 0; }
.hrac-hlavicka h1 { color: inherit; margin: 0; font-size: 1.75rem; line-height: 1.22; }
.hrac-klub { margin: .25rem 0 0; font-size: .85rem; opacity: .85; }
.hrac-vybava { margin-top: .15rem; opacity: .85; }

/* ---------- Moje kopačky (prehľad) ---------- */
.kopacky-hlava { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.kopacky-hlava h2 { margin: 0; font-size: 1.05rem; }
.kopacky-nazov { font-weight: 700; font-size: .95rem; }
.kopacky-telo { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 1.2rem; align-items: start; }
.kopacky-obrazok {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 12px; overflow: hidden;
  background: #f1f1f1; display: flex; align-items: center; justify-content: center;
}
.kopacky-obrazok img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kopacky-prazdne { font-size: 3rem; opacity: .5; }
.kopacky-stitok {
  position: absolute; right: .5rem; bottom: .5rem; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(0,0,0,.55); color: #fff; padding: .2rem .5rem; border-radius: 999px;
}
.kopacky-zdroj { margin: .5rem 0 0; font-size: .82rem; }
.kopacky-zdroj a { color: var(--cervena-tmava); font-weight: 600; text-decoration: none; }
.kopacky-zdroj a:hover { text-decoration: underline; }
.kopacky-form { display: grid; gap: .7rem; }
.kopacky-form label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; }
.kopacky-form .kopacky-zmazat { display: flex; align-items: center; gap: .4rem; font-weight: 500; }
.kopacky-form .napoveda { font-weight: 400; margin: 0; }
.kopacky-form select:disabled { opacity: .55; }
.kabinka-vstup { margin: 1rem 0 0; display: grid; gap: .35rem; }
.kabinka-vstup .tlacidlo { width: 100%; }
.kabinka-vstup .napoveda { margin: 0; text-align: center; }
.kabinka-tlacidlo { background: var(--cervena); border-color: var(--cervena); color: #fff; }
.kabinka-tlacidlo:hover { background: var(--cervena-tmava); border-color: var(--cervena-tmava); }
/* kabínka */
.kabinka-foto {
  display: grid; gap: .35rem; justify-items: center; text-align: center; cursor: pointer;
  border: 2px dashed var(--linka-vyrazna); border-radius: 12px; padding: 1.4rem 1rem; aspect-ratio: 3 / 4;
  align-content: center; font-size: .85rem; color: var(--seda);
}
.kabinka-foto strong { color: var(--ink); font-size: .95rem; }
.kabinka-foto-ikona { font-size: 2.2rem; }
.kabinka-foto input { width: 100%; font-size: .8rem; margin-top: .5rem; }
.kabinka-upoz { font-size: .8rem; display: grid; gap: .2rem; }
.kabinka-vysledok { position: relative; border-radius: 12px; overflow: hidden; max-width: 420px; margin-inline: auto; }
.kabinka-vysledok img { width: 100%; display: block; }
.kabinka-tlacidla { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0 .6rem; align-items: stretch; }
.kabinka-tlacidla form { display: contents; }
.kabinka-tlacidla button, .kabinka-tlacidla .tlacidlo { width: 100%; }
@media (max-width: 560px) { .kabinka-tlacidla { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .kopacky-telo { grid-template-columns: 1fr; } .kopacky-obrazok { max-width: 320px; } }
.hrac-znak { flex: 0 0 auto; object-fit: contain; background: rgba(255,255,255,.92);
  border-radius: .5rem; padding: .3rem; }

@media (max-width: 520px) {
  .hrac-hlavicka { gap: .8rem; padding: .9rem 1rem; }
  .hrac-foto, .hrac-foto-prazdna { width: 58px; height: 58px; }
  .hrac-hlavicka h1 { font-size: 1.35rem; }
  .hrac-znak { width: 46px; height: 46px; }
}

/* ---------- znaky klubov v zoznamoch ---------- */
.znak { width: 1.15rem; height: 1.15rem; object-fit: contain; vertical-align: -.18em;
  margin-right: .38rem; border-radius: 2px; background: #fff; }
.znak.velky { width: 1.9rem; height: 1.9rem; vertical-align: -.4em; margin-right: .5rem; }
.kal-supper .znak { width: 1.05rem; height: 1.05rem; }
.s-znakom { display: flex; align-items: center; }

/* ---------- história po sezónach ---------- */
.sezona-riadok { display: grid; grid-template-columns: 5.6rem 1fr auto; gap: .9rem;
  align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--linka);
  text-decoration: none; color: inherit; }
.zoznam .sezona-riadok:last-child { border-bottom: 0; }
.sezona-riadok:hover { background: var(--tint); }
.sezona-rok { font-family: var(--pismo-display); font-size: 1.15rem; color: var(--cervena);
  letter-spacing: .01em; }
.sezona-cisla { display: block; font-size: .88rem; }
.sezona-cisla strong { color: var(--ink); }
.sezona-bilancia { display: block; margin-top: .3rem; }
.bil { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: .1rem .35rem; margin-right: .25rem; }
.bil.vyhra { background: #e2f4e9; color: var(--trava-tmava); }
.bil.remiza { background: #eef0f3; color: #4a5058; }
.bil.prehra { background: #fdecea; color: #7d1a15; }
.sezona-kat { font-size: .72rem; color: var(--seda); margin-left: .3rem; }
/* Sezóny pod kódom kategórie v tabuľke „Podľa kategórie" — druhý riadok,
   nie ďalší stĺpec: na telefóne by sa tabuľka rozliezla. */
.kat-sezony { display: block; font-size: .72rem; color: var(--seda); font-weight: 400;
  margin-top: .15rem; line-height: 1.3; }

.bilancia { display: flex; gap: .5rem; flex-wrap: wrap; }
.bil.velka { font-size: .82rem; font-weight: 600; letter-spacing: 0; padding: .45rem .8rem; }
.bil.velka strong { font-family: var(--pismo-display); font-size: 1.15rem; font-weight: 400;
  margin-right: .3rem; vertical-align: -.05em; }

.dalsie-sezony { display: flex; flex-wrap: wrap; gap: .4rem; }
.rok-chip { display: inline-block; padding: .42rem .8rem; border: 2px solid var(--linka-vyrazna);
  font-family: var(--pismo-display); font-size: .95rem; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; }
.rok-chip:hover { border-color: var(--cervena); color: var(--cervena); }
.rok-chip.aktivny { background: var(--cervena); border-color: var(--cervena); color: #fff; }

@media (max-width: 520px) {
  .sezona-riadok { grid-template-columns: 4.4rem 1fr auto; gap: .6rem; padding: .8rem .8rem; }
  .sezona-rok { font-size: 1rem; }
  .sezona-cisla { font-size: .8rem; }
}
.bil.bez { background: #f4f1e8; color: #6b5f3c; }

/* ---------- šepkár klubov ---------- */
.hladac { position: relative; }
.hladac-vysledky { position: absolute; z-index: 20; left: 0; right: 0; margin: 2px 0 0;
  padding: 0; list-style: none; background: #fff; border: 1px solid var(--linka-vyrazna);
  box-shadow: 0 8px 20px rgba(0,0,0,.12); max-height: 17rem; overflow-y: auto; }
.hladac-vysledky li { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem;
  cursor: pointer; font-size: .95rem; border-bottom: 1px solid var(--linka); }
.hladac-vysledky li:last-child { border-bottom: 0; }
.hladac-vysledky li:hover, .hladac-vysledky li.vybrany { background: var(--tint); }
.hladac-vysledky img { width: 1.5rem; height: 1.5rem; object-fit: contain; flex: 0 0 auto; }

.klub-riadok { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--linka); }
.zoznam .klub-riadok:last-child { border-bottom: 0; }
.klub-nazov { font-weight: 600; color: var(--ink); }
.znak.maly { width: .95rem; height: .95rem; margin-right: .2rem; vertical-align: -.12em; }
.sezona-bilancia .znak.maly { margin-left: .25rem; }

/* ---------- galéria fotiek a videí ---------- */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .7rem; margin-bottom: 1.1rem; }
.galeria-polozka { margin: 0; position: relative; border: 1px solid var(--linka-vyrazna); background: #000; }
.galeria-polozka img, .galeria-polozka video { display: block; width: 100%; height: 130px;
  object-fit: cover; background: #000; }
.galeria-polozka video { object-fit: contain; }
.galeria-cas { position: absolute; top: .35rem; right: .35rem; background: rgba(0,0,0,.72);
  color: #fff; font-size: .7rem; padding: .1rem .3rem; border-radius: 2px; }
.galeria-polozka figcaption { display: flex; justify-content: space-between; align-items: center;
  gap: .4rem; padding: .3rem .45rem; background: #fff; font-size: .72rem; color: var(--seda); }
.galeria-zmaz { margin: 0; }
.odkaz-tlacidlo { background: none; border: 0; padding: 0; font: inherit; font-size: .72rem;
  color: var(--cervena); text-decoration: underline; cursor: pointer; }
.odkaz-tlacidlo:hover { background: none; color: var(--cervena-tmavsia); }
.nahravanie input[type=file] { width: 100%; padding: .6rem; border: 1px dashed #aab6c4;
  background: #fbfcfe; font-size: .9rem; }

@media (max-width: 520px) {
  .galeria { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .galeria-polozka img, .galeria-polozka video { height: 105px; }
}
.kal-odkaz code { display: block; word-break: break-all; background: #fff; border: 1px solid var(--linka-vyrazna);
  padding: .6rem .7rem; font-size: .82rem; }

/* ---------- míľniky a kompletnosť ---------- */
.milniky-pas { display: grid; gap: .5rem; margin-bottom: 1.2rem; }
.milnik { display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem;
  background: #fffdf4; border: 1px solid #f0e3b8; }
.milnik strong { color: var(--ink); }
.milnik-ikona { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.milnik-ikona.velka { font-size: 1.8rem; }
.milnik-riadok { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--linka); }
.zoznam .milnik-riadok:last-child { border-bottom: 0; }
.milnik-riadok .kal-sipka { margin-left: auto; text-decoration: none; }

.kompletnost { padding: 1rem 1.15rem; }
.kompl-hlava { display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pruh { height: 8px; background: var(--linka); overflow: hidden; }
.pruh span { display: block; height: 100%; background: var(--trava); }

/* ---------- vlákno pod zápasom ---------- */
.vlakno-stav { font-size: .84rem; color: var(--seda); margin: 0 0 .8rem; }
.vlakno-zavrete { background: #f4f4f2; border: 1px solid var(--linka); padding: .8rem 1rem;
  font-size: .9rem; color: var(--seda); }

.nahravanie-stav { margin-top: .6rem; font-size: .88rem; color: var(--seda); }
.nahravanie-stav strong { color: var(--ink); }
.nahravanie-stav .pruh { margin-top: .35rem; }
.nahravanie-chyba { color: var(--cervena); font-weight: 600; }

/* ---------- oznamy a účasť ---------- */
.oznam { padding: .9rem 1rem; border-bottom: 1px solid var(--linka); }
.zoznam .oznam:last-child { border-bottom: 0; }
.oznam-hlava { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.oznam-hlava strong { color: var(--ink); }
.oznam-text { margin: .5rem 0 0; font-size: .94rem; }
.ucast-volba { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
.ucast-otazka { font-size: .84rem; color: var(--seda); margin-right: .2rem; }
.ucast-tlacidlo { background: #fff; color: var(--ink); border: 2px solid var(--linka-vyrazna);
  padding: .38rem .8rem; font-size: .88rem; font-weight: 600; }
.ucast-tlacidlo:hover { background: var(--tint); border-color: var(--cervena); color: var(--ink); }
.ucast-tlacidlo.zvolene.pride { background: var(--trava); border-color: var(--trava); color: #fff; }
.ucast-tlacidlo.zvolene.nepride { background: var(--cervena); border-color: var(--cervena); color: #fff; }
.ucast-tlacidlo.zvolene.nevie { background: #6b6b6b; border-color: #6b6b6b; color: #fff; }
.ucast-suhrn { margin-top: .6rem; }
.ucast-suhrn a { text-decoration: none; }

/* ---------- ciele ---------- */
.ciel-riadok { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--linka); }
.zoznam .ciel-riadok:last-child { border-bottom: 0; }
.ciel-telo { flex: 1 1 auto; min-width: 0; }
.ciel-telo .pruh { margin-top: .4rem; height: 5px; }
.ciel-riadok.splneny .klub-nazov { text-decoration: line-through; color: var(--seda); }
.ciel-prepinac { margin: 0; flex: 0 0 auto; }
.ciel-zaskrtnutie { width: 1.7rem; height: 1.7rem; padding: 0; background: #fff;
  border: 2px solid var(--linka-vyrazna); color: var(--trava); font-weight: 700; font-size: 1rem; }
.ciel-zaskrtnutie:hover { border-color: var(--trava); background: #fff; color: var(--trava); }
.ciel-riadok.splneny .ciel-zaskrtnutie { background: var(--trava); border-color: var(--trava); color: #fff; }

/* ================= úvodná stránka ================= */

.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center;
  margin: .5rem 0 2.5rem; }
.hero-nadpisok { font-family: var(--pismo-display); font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cervena); margin: 0 0 .5rem; }
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.22; margin: 0 0 1rem; }
.hero-perex { font-size: 1.05rem; color: var(--seda); margin: 0 0 1.4rem; max-width: 46ch; }
.hero-akcie { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.hero-odkaz { font-weight: 600; text-decoration: none; }
.hero-odkaz:hover { text-decoration: underline; }
.hero-poznamka { font-size: .82rem; color: var(--seda); margin: 0; }
.tlacidlo.velke { display: inline-flex; font-size: 1.02rem; padding: .95rem 1.7rem; }

.ukazka-ramik { border: 1px solid var(--linka-vyrazna); background: #fff;
  box-shadow: 0 14px 40px rgba(20,20,19,.10); overflow: hidden; }
.ukazka-ramik .hrac-hlavicka { margin: 0; }
.ukazka-siroka { margin: 1rem 0 .6rem; }
.ukazka-siroka .zoznam { border: 0; }
.pod-ukazkou { font-size: .88rem; color: var(--seda); margin: 0 0 1rem; }

.pas-cisiel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--linka); border: 1px solid var(--linka); margin-bottom: 1rem; }
.cislo-blok { background: #fff; padding: 1.1rem 1rem; text-align: center; }
.cislo-blok strong { display: block; font-family: var(--pismo-display); font-weight: 400;
  font-size: 1.5rem; color: var(--cervena); letter-spacing: .01em; }
.cislo-blok span { display: block; font-size: .82rem; color: var(--seda); margin-top: .2rem; }

.dovody { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1rem; }
.dovod { background: #fff; border: 1px solid var(--linka); padding: 1.2rem; }
.dovod-ikona { font-size: 1.7rem; line-height: 1; }
.dovod h3 { margin: .6rem 0 .4rem; font-size: 1.02rem; }
.dovod p { margin: 0; font-size: .92rem; color: var(--seda); }

.kroky { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .7rem; }
.kroky li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 1rem; align-items: start;
  background: #fff; border: 1px solid var(--linka); padding: 1.1rem 1.2rem; }
.krok-cislo { font-family: var(--pismo-display); font-size: 1.8rem; line-height: 1; color: var(--cervena); }
.kroky h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.kroky p { margin: 0; font-size: .92rem; color: var(--seda); }

.funkcie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--linka); border: 1px solid var(--linka); margin-bottom: 1rem; }
.funkcia { background: #fff; padding: .95rem 1.1rem; }
.funkcia strong { display: block; color: var(--ink); font-size: .96rem; margin-bottom: .18rem; }
.funkcia span { font-size: .88rem; color: var(--seda); }

.sukromie ul { margin: .8rem 0 0; padding-left: 1.15rem; }
.sukromie li { margin-bottom: .35rem; font-size: .93rem; }

.cennik { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-bottom: 1rem; }
.plan { background: #fff; border: 1px solid var(--linka); padding: 1.4rem; position: relative; }
.plan.zvyrazneny { border: 2px solid var(--cervena); }
.plan-znacka { position: absolute; top: -.7rem; right: 1rem; background: var(--cervena); color: #fff;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; }
.plan-nazov { display: block; font-family: var(--pismo-display); font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .02em; }
.plan-cena { display: block; font-family: var(--pismo-display); font-size: 2.1rem; color: var(--cervena);
  line-height: 1.1; margin: .3rem 0 .8rem; }
.plan-cena small { font-family: var(--pismo); font-size: .85rem; color: var(--seda); font-weight: 400; }
.plan ul { margin: 0 0 1.1rem; padding-left: 1.15rem; }
.plan li { font-size: .92rem; margin-bottom: .3rem; }
.plan-poznamka { display: block; font-size: .84rem; color: var(--seda); }

.referencie { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1rem; }
.referencia { margin: 0; background: #fff; border: 1px solid var(--linka); padding: 1.2rem; }
.referencia blockquote { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.55; }
.referencia figcaption { display: flex; align-items: center; gap: .6rem; }
.ref-znak { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; background: var(--tint); color: var(--cervena);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--pismo-display); font-size: .85rem; letter-spacing: .02em; }
.referencia figcaption strong { display: block; font-size: .88rem; }
.ref-kto { display: block; font-size: .78rem; color: var(--seda); }

.otazky { margin-bottom: 1.4rem; }
.otazky details { background: #fff; border: 1px solid var(--linka); margin-bottom: .5rem; }
.otazky summary { padding: .85rem 1.1rem; cursor: pointer; font-weight: 600; font-size: .96rem;
  color: var(--ink); list-style: none; }
.otazky summary::-webkit-details-marker { display: none; }
.otazky summary::after { content: '+'; float: right; color: var(--cervena); font-weight: 700; }
.otazky details[open] summary::after { content: '−'; }
.otazky summary:hover { background: var(--tint); }
.otazky p { margin: 0; padding: 0 1.1rem 1rem; font-size: .93rem; color: var(--seda); }

.zaver { text-align: center; background: var(--ink); color: #fff; padding: 2.6rem 1.5rem; margin-top: 2rem; }
.zaver h2 { color: #fff; font-family: var(--pismo-display); font-weight: 400; font-size: 1.9rem; line-height: 1.22;
  text-transform: uppercase; letter-spacing: .01em; justify-content: center; margin-bottom: .6rem; }
.zaver p { color: #cfcfcf; margin: 0 0 1.4rem; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 1.6rem; }
  .dovody, .funkcie, .cennik, .referencie, .pas-cisiel { grid-template-columns: 1fr; }
  .hero-akcie { flex-direction: column; align-items: stretch; }
  .hero-akcie .tlacidlo { width: 100%; }
  .hero-odkaz { text-align: center; }
}
main.obal.siroko { width: min(1040px, 100% - var(--zlab)); }

/* ---------- správy ---------- */
.odznak { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; background: #fff;
  color: var(--cervena); font-size: .68rem; font-weight: 700; text-align: center;
  border-radius: 999px; vertical-align: .08em; }
.konv-riadok { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .8rem;
  align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--linka);
  text-decoration: none; color: inherit; }
.zoznam .konv-riadok:last-child { border-bottom: 0; }
.konv-riadok:hover { background: var(--tint); }
.konv-riadok.neprecitane { background: #fffdf4; }
.konv-znak { font-size: 1.4rem; line-height: 1; text-align: center; }
.konv-znak .znak.velky { margin: 0; }
.konv-telo { min-width: 0; }
.konv-hlava { display: flex; align-items: center; gap: .45rem; }
.konv-hlava strong { color: var(--ink); }
.konv-hlava .odznak { background: var(--cervena); color: #fff; }
.konv-ukazka { display: block; font-size: .85rem; color: var(--seda); margin-top: .15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konv-prazdny { font-style: italic; }

.ucastnici { font-size: .88rem; padding: .8rem 1rem; }
.ucastnik-rola { color: var(--seda); font-size: .8rem; }

.rozhovor { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.1rem; }
.rozhovor-prazdny { color: var(--seda); font-style: italic; margin: 0; }
.sprava { background: #fff; border: 1px solid var(--linka); padding: .75rem .9rem; max-width: 82%; }
.sprava.moja { align-self: flex-end; background: var(--tint); border-color: #f2c9cd; }
.sprava.od-trenera:not(.moja) { border-left: 3px solid var(--cervena); }
.sprava-hlava { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; margin-bottom: .25rem; }
.sprava-hlava strong { font-size: .88rem; color: var(--ink); }
.sprava-cas { font-size: .74rem; color: var(--seda); margin-left: auto; }
.sprava-text { font-size: .95rem; line-height: 1.5; }

/* ---------- odsek o zakladateľovi ---------- */
/* Nie ďalšia .karta: karty na tejto stránke nesú funkcie a argumenty, toto je
   osobná poznámka. Odlišuje ju červená linka vľavo a jeden zlom v displejovom
   reze — ten nesie pointu, takže je to jediné miesto v odseku, ktoré kričí. */
.zakladatel {
  background: var(--papier);
  border: 1px solid var(--linka);
  border-left: 4px solid var(--cervena);
  padding: 1.6rem 1.5rem;
  margin: 0 0 2rem;
}
.zakladatel .nadpisok {
  font-family: var(--pismo-display); font-weight: 400; text-transform: uppercase;
  font-size: .8rem; letter-spacing: .16em; color: var(--cervena);
  margin: 0 0 1rem;
}
.zakladatel p { margin: 0 0 .85rem; }
.zakladatel .zlom {
  font-family: var(--pismo-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.5rem; line-height: 1.12; letter-spacing: .01em;
  color: var(--ink); margin: 1.15rem 0;
}
.zakladatel .podpis {
  margin: 1.15rem 0 0; padding-top: .9rem;
  border-top: 1px solid var(--linka);
  font-size: .88rem; color: var(--seda);
}
@media (max-width: 560px) {
  .zakladatel { padding: 1.25rem 1.15rem; }
  .zakladatel .zlom { font-size: 1.28rem; }
}

/* ---------- menu a prepínač režimu ---------- */
/* Hlavička má dve poschodia: hore menu toho, v čom práve som, pod ním prepínač
   medzi denníkom a tímom. Dvanásť položiek v jednom rade sa nedalo prečítať. */
.hlava nav a.je-tu { color: #fff; border-bottom: 2px solid #fff; padding-bottom: .15rem; }

.viac { position: relative; }
.viac > summary {
  color: #c3c9e8; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; list-style: none; user-select: none;
}
.viac > summary::-webkit-details-marker { display: none; }
.viac > summary::after { content: " ▾"; }
.viac[open] > summary { color: #fff; }
.viac-obsah {
  position: absolute; right: 0; top: calc(100% + .8rem); z-index: 20;
  background: var(--papier); border: 1px solid var(--linka-vyrazna);
  border-top: 3px solid var(--trava);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  min-width: 16rem; padding: 0; display: flex; flex-direction: column;
}
/* Špecifickosť: `.hlava nav a` (0,2,1) prebíja `.viac-obsah a` (0,1,1),
   takže položky v rozbalenom menu si nechali bledú farbu určenú pre červený
   pruh a na bielom pozadí sa nedali prečítať. Preto celá cesta v selektore. */
.hlava nav .viac-obsah a {
  color: var(--ink); text-transform: none; letter-spacing: 0; font-size: .9rem;
  padding: .55rem 1rem; text-decoration: none; border: 0; font-weight: 500;
}
/* Pri prejdení myšou sa mení POZADIE, nie farba písma: červená na ružovom
   podklade má kontrast 3.97:1 a to je pod hranicou čitateľnosti. Text zostáva
   tmavý (16:1) a zvýraznenie nesie podklad a pásik vľavo. */
.hlava nav .viac-obsah a:hover,
.hlava nav .viac-obsah a:focus-visible {
  background: var(--tint); color: var(--ink); box-shadow: inset 3px 0 0 var(--cervena);
}
.hlava nav .viac-obsah a.je-tu {
  color: var(--cervena); font-weight: 700; border: 0; box-shadow: inset 3px 0 0 var(--cervena);
}
.viac-obsah a + a { border-top: 1px solid var(--linka); }

.prepinac { background: var(--papier); border-bottom: 1px solid var(--linka-vyrazna); }
.prepinac-vnutro {
  width: min(780px, 100% - var(--zlab)); margin-inline: auto;
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .5rem 0;
}
.prepinac-vnutro form { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: 0; }
.prepinac-popis {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--seda-svetla);
}
.prepinac-popis.s-ciarou { border-left: 1px solid var(--linka-vyrazna); padding-left: .7rem; margin-left: .3rem; }
.prepinac-volba {
  background: #fff; color: var(--ink); border: 1px solid var(--linka-vyrazna);
  padding: .3rem .65rem; font: inherit; font-size: .82rem; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: .4rem; width: auto;
}
.prepinac-volba:hover { border-color: var(--cervena); color: var(--cervena); background: #fff; }
.prepinac-volba.je-aktivna {
  background: var(--cervena); border-color: var(--cervena); color: #fff; font-weight: 600;
}
/* Trénerská voľba je zelená, nie červená — aby bolo na prvý pohľad vidieť,
   že som v inom svete, nie len v inom denníku. */
.prepinac-volba.je-trenerska.je-aktivna { background: var(--trava-tmava); border-color: var(--trava-tmava); }
.prepinac-volba.je-trenerska:hover { border-color: var(--trava-tmava); color: var(--trava-tmava); }
.prepinac-rola { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }

@media (max-width: 560px) {
  .hlava nav { gap: .75rem; }
  /* Umiestnenie rozbaleného „Viac" na telefóne je nižšie, v jednom
     mieste — dve pravidlá na to isté sa tu už raz pobili. */
}

/* ---------- prístupy do denníka ---------- */
.riadok-akcie { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .55rem; }
.riadok-formular { display: flex; gap: .35rem; margin: 0; }
.riadok-formular input {
  width: auto; max-width: 11rem; padding: .28rem .5rem; font-size: .82rem; margin: 0;
}
button.maly {
  width: auto; padding: .3rem .7rem; font-size: .72rem; letter-spacing: .06em;
}
button.maly.druhotny { background: #fff; color: var(--cervena); border: 1px solid var(--cervena); }
.udaje { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; line-height: 1.7; }

/* ---------- vlákno pod zápasom ---------- */
/* Vlákno sa nezakladá — visí pod zápasom samo a otvára sa už s obsahom.
   Preto je hore výsledok a nie prázdne pole s nápisom „napíš komentár". */
.vlakno-hlava {
  background: var(--papier); border: 1px solid var(--linka); border-bottom: 0;
  padding: .9rem 1.15rem; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; flex-wrap: wrap;
}
.vlakno-skore { display: flex; align-items: center; gap: .8rem; }
.reakcie { display: flex; gap: .35rem; margin: 0; }
.reakcia {
  background: #fff; border: 1px solid var(--linka-vyrazna); color: var(--ink);
  padding: .28rem .55rem; font: inherit; cursor: pointer; width: auto;
  display: inline-flex; align-items: center; gap: .3rem; line-height: 1;
}
.reakcia:hover { border-color: var(--cervena); background: #fff; }
.reakcia.moja { border-color: var(--cervena); background: var(--tint); }
.reakcia-ikona { font-size: 1.05rem; }
.reakcia-pocet { font-size: .76rem; color: var(--seda); font-weight: 600; }

.vlakno { border: 1px solid var(--linka); border-bottom: 0; background: var(--papier); }
.vlakno-prazdne { border-top: 0; }
.prispevok { padding: .85rem 1.15rem; border-bottom: 1px solid var(--linka); }
.prispevok.moj { background: var(--tint); }
.prispevok.skryty { opacity: .55; }
.prispevok.skryty .prispevok-text { text-decoration: line-through; }
.prispevok-hlava { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.prispevok-hlava strong { color: var(--cervena); font-size: .92rem; }
.prispevok-kedy { color: var(--seda-svetla); font-size: .74rem; }
.prispevok-text { margin: .3rem 0 0; }
.prispevok-akcie { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.prispevok-nahlas { font-size: .72rem; color: var(--seda-svetla); text-decoration: none; }
.prispevok-nahlas:hover { color: var(--cervena); text-decoration: underline; }
.vlakno-pisanie { border-top: 0; }
.vlakno-moderovanie { margin-top: -.6rem; }

/* ---------- zdieľaná karta ---------- */
.karta-hlava { display: flex; align-items: center; gap: 1rem; margin-bottom: .3rem; }
.karta-hlava h1 { margin: 0; }
.karta-podnadpis { color: var(--seda); margin: .2rem 0 0; font-size: .9rem; }
.karta-paticka { margin-top: 2rem; font-size: .86rem; color: var(--seda); }

.ide-von { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.ide-von ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.ide-von li { margin-bottom: .25rem; }
.ide-nazov {
  display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .15rem .45rem;
}
.ide-nazov.ano { background: #e2f4e9; color: var(--trava-tmava); }
.ide-nazov.nie { background: #fdecea; color: #7d1a15; }
@media (max-width: 600px) { .ide-von { grid-template-columns: 1fr; } }

/* ---------- opakovanie oznamu ---------- */
.opakovanie { border: 1px solid var(--linka-vyrazna); padding: .9rem 1rem; margin: 0 0 1.05rem; }
.opakovanie legend {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cervena); padding: 0 .35rem;
}
.opakovanie .dni { margin-bottom: .8rem; }

/* ---------- história tímu a správy ---------- */
.tim-poznamka {
  margin: .5rem 0 0; padding-left: .7rem; border-left: 3px solid var(--linka-vyrazna);
  color: var(--seda); font-size: .9rem;
}
.maly-odkaz { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cervena); }
.konv-vyzva { color: var(--cervena); font-weight: 600; }

/* ---------- mriežka mesiaca ---------- */
/* Mriežka odpovedá na „čo máme túto sobotu", zoznam pod ňou na „čo nás čaká".
   Sú to dve otázky a jedna odpoveď na obe nestačí. */
.mesiac-hlava {
  display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 .6rem;
}
.mesiac-hlava strong { font-size: 1.05rem; color: var(--cervena); min-width: 9.5rem; }
.mesiac-sip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border: 1px solid var(--linka-vyrazna);
  text-decoration: none; color: var(--ink); font-size: 1.2rem; line-height: 1;
}
.mesiac-sip:hover { border-color: var(--cervena); color: var(--cervena); }
.mesiac-dnes { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }

.mriezka { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--papier); }
.mriezka th {
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--seda);
  padding: .35rem 0; border-bottom: 1px solid var(--linka-vyrazna); font-weight: 700;
}
.mriezka td {
  border: 1px solid var(--linka); vertical-align: top; height: 5.2rem;
  padding: .25rem .25rem .3rem; overflow: hidden;
}
.mriezka td.inde { background: #fafafa; }
.mriezka td.inde .den-cislo { color: var(--seda-svetla); }
.mriezka td.dnes { box-shadow: inset 0 0 0 2px var(--cervena); }
.den-cislo { display: block; font-size: .76rem; color: var(--seda); margin-bottom: .15rem; }
.mriezka td.dnes .den-cislo { color: var(--cervena); font-weight: 700; }

.bodka {
  display: flex; align-items: center; gap: .2rem; text-decoration: none;
  font-size: .66rem; line-height: 1.25; padding: .1rem .2rem; margin-bottom: .1rem;
  border-left: 3px solid var(--linka-vyrazna); color: var(--ink);
}
.bodka:hover { background: var(--tint); }
.bodka.zapas   { border-left-color: var(--cervena); }
.bodka.trening { border-left-color: var(--trava); }
.bodka.oznam   { border-left-color: #d99a1f; }
.bodka.caka    { background: #fff4d6; }
.bodka.hotove  { opacity: .55; }
.bodka-ikona { flex: 0 0 auto; font-size: .72rem; }
.bodka-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.legenda { font-size: .74rem; color: var(--seda); margin: .5rem 0 1.6rem; }
.legenda .bodka { display: inline-flex; border-left-width: 3px; padding: 0 .2rem; }

@media (max-width: 620px) {
  .mriezka td { height: 3.6rem; }
  .bodka-text { display: none; }
  .bodka { justify-content: center; border-left: 0; border-bottom: 3px solid var(--linka-vyrazna); }
  .bodka.zapas { border-bottom-color: var(--cervena); }
  .bodka.trening { border-bottom-color: var(--trava); }
  .bodka.oznam { border-bottom-color: #d99a1f; }
}

/* ---------- veta od trénera ---------- */
.od-trenera {
  background: #f2f8f4; border: 1px solid #cfe6d8; border-left: 4px solid var(--trava);
  padding: .8rem 1.05rem; margin-bottom: -1px;
}
.od-trenera p { margin: .3rem 0 0; }
.od-trenera-kto {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--trava-tmava);
}
.od-trenera-tim { font-weight: 400; color: var(--seda); margin-left: .4rem; }

/* ---------- nástenka súťaže ---------- */
.sutaze { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.2rem 0; }
.sutaze .prepinac-volba { text-decoration: none; }

/* Filter a stránkovanie zápasov — tie isté pilulky ako prepínač súťaží. */
.filtre { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; }
.filtre-skupina { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.filtre-popis {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--seda-svetla);
  min-width: 5.2rem;
}
.filtre .prepinac-volba, .strankovanie .prepinac-volba { text-decoration: none; }
.strankovanie {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  margin: 1rem 0 .4rem;
}
.strankovanie-stav { font-size: .82rem; color: var(--seda); text-align: center; flex: 1 1 auto; }
.prepinac-volba.je-neaktivna { opacity: .4; cursor: default; pointer-events: none; }

.liga-riadok {
  display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .9rem;
  padding: .7rem 1.15rem; border-bottom: 1px solid var(--linka);
  text-decoration: none; color: inherit; align-items: center;
}
.zoznam .liga-riadok:last-child { border-bottom: 0; }
.liga-riadok:hover { background: var(--tint); }
.liga-riadok.moj { box-shadow: inset 4px 0 0 var(--cervena); }
.liga-tim { display: block; font-weight: 600; }
.liga-vpravo { text-align: right; flex: 0 0 auto; }
.liga-skore { display: block; font-weight: 700; font-size: 1.05rem; }
.liga-skore.neodohrany { color: var(--seda-svetla); font-weight: 400; }
.liga-skore.velke { font-size: 2rem; }
.liga-diskusia { font-size: .74rem; color: var(--seda); }

.liga-hlavicka {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;
  background: var(--papier); border: 1px solid var(--linka); padding: 1.1rem; text-align: center;
}
.liga-strana { display: flex; flex-direction: column; align-items: center; gap: .35rem; }

/* ---------- profilová fotka ---------- */
.fotka-pole { display: flex; gap: 1rem; align-items: flex-start; }
.fotka-pole input[type=file] { width: auto; }
.fotka-pole .hrac-foto { flex: 0 0 auto; }

/* ---------- zdieľanie udalosti ---------- */
.milnik-akcie { display: block; margin-top: .3rem; font-size: .72rem; color: var(--seda-svetla); }
.zdielat-zapas { margin-right: .8rem; }

.zdielat-nahlad { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; margin: 1.2rem 0; }
.zdielat-nahlad img { border: 1px solid var(--linka); flex: 0 0 auto; width: 320px; height: 320px; }
.zdielat-akcie-svisle { display: flex; flex-direction: column; gap: .6rem; min-width: 14rem; flex: 1; }
.zdielat-akcie-svisle .tlacidlo { text-align: center; }
.zdielat-akcie-svisle .napoveda { margin: 0; }

.zdielat-siete { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.4rem; }
.siet {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border: 1px solid var(--linka-vyrazna); background: #fff;
  text-decoration: none; color: var(--ink); font-size: .88rem; font-weight: 600;
}
.siet:hover { border-color: var(--cervena); color: var(--cervena); }
.siet-ikona { font-size: 1.05rem; line-height: 1; }
.siet.facebook:hover  { border-color: #1877f2; color: #1877f2; }
.siet.whatsapp:hover  { border-color: #25d366; color: #128c48; }
.siet.messenger:hover { border-color: #0084ff; color: #0084ff; }
.siet.telegram:hover  { border-color: #229ed9; color: #1b7fae; }
.siet.x:hover         { border-color: var(--ink); color: var(--ink); }

/* ---------- verejná stránka udalosti ---------- */
.verejna {
  display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap;
  background: var(--papier); border: 1px solid var(--linka); padding: 1.4rem; margin-bottom: 1.4rem;
}
.verejna-obrazok { width: 320px; height: 320px; flex: 0 0 auto; border: 1px solid var(--linka); }
.verejna-telo { flex: 1; min-width: 15rem; }
.verejna-telo h1 { margin: .2rem 0 .6rem; }
.verejna-druh { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--trava-tmava); margin: 0; }
.verejna-kto { margin: 0 0 .2rem; }
.verejna-datum { color: var(--seda); font-size: .88rem; margin: 0; }
.verejna-paticka p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .verejna-obrazok, .zdielat-nahlad img { width: 100%; height: auto; }
}

/* ---------- zverejnené fotky a video ---------- */
.media-riadok { display: grid; grid-template-columns: 132px 1fr; gap: 1rem; align-items: start; }
.media-nahlad { position: relative; flex: 0 0 auto; }
.media-nahlad img { width: 132px; height: 132px; object-fit: cover; border: 1px solid var(--linka); display: block; }
.media-znak {
  position: absolute; left: .3rem; bottom: .3rem; background: rgba(0,0,0,.72); color: #fff;
  font-size: .68rem; padding: .1rem .35rem; letter-spacing: .04em;
}
.media-telo { min-width: 0; }
.tlacidlo.maly-tlacidlo { padding: .35rem .7rem; font-size: .74rem; width: auto; }

.verejna-video { background: #141414; border: 1px solid var(--linka); margin-bottom: 1.2rem; }
.verejna-video video, .verejna-fotka { display: block; width: 100%; max-height: 70vh; margin-inline: auto; }
.verejna-obrazok.mensi { width: 200px; height: 200px; }
@media (max-width: 560px) {
  .media-riadok { grid-template-columns: 92px 1fr; }
  .media-nahlad img { width: 92px; height: 92px; }
}

/* ---------- pruh totožnosti ---------- */
/* Vidieť vždy: kto som a čo mám otvorené. Bez toho človek nevie, či klikať
   ako rodič, hráč alebo tréner — a to je pri denníku dieťaťa podstatné. */
.totoznost {
  display: inline-flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  padding: .28rem .6rem .28rem 0; border-right: 1px solid var(--linka-vyrazna);
  margin-right: .5rem;
}
.totoznost-ako {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cervena);
}
.totoznost.je-trenerska .totoznost-ako { color: var(--trava-tmava); }
.totoznost-kde { font-size: .82rem; color: var(--seda); }
.totoznost-otazka {
  font-size: .72rem; color: var(--seda); text-decoration: underline;
  text-decoration-style: dotted; margin-right: .5rem;
}
.totoznost-otazka:hover { color: var(--cervena); }
@media (max-width: 560px) {
  .totoznost { border-right: 0; width: 100%; margin: 0 0 .3rem; padding-bottom: 0; }
}
.kto-som { align-items: center; padding: .5rem .6rem; background: var(--tint); }

/* ---------- cenník a predplatné ---------- */
.plan-dph { font-size: .78rem; color: var(--seda); margin: .2rem 0 .6rem; line-height: 1.5; }

/* ---------- faktúra ---------- */
.doklad { background: var(--papier); border: 1px solid var(--linka); padding: 1.8rem; }
.doklad-hlava { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.doklad-hlava h1 { margin: .1rem 0 0; }
.doklad-typ { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--seda); }
.doklad-znacka .znacka-ikona {
  background: var(--cervena); color: #fff; font-weight: 700; padding: .5rem .6rem;
  display: inline-block; font-size: 1rem; letter-spacing: .02em;
}
.doklad-strany { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 1.6rem 0; }
.doklad-nadpis {
  display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--seda); margin-bottom: .3rem;
}
.doklad-strany p { margin: 0 0 .7rem; line-height: 1.55; }
.doklad-udaje { font-size: .86rem; color: var(--seda); }
.doklad-datumy {
  display: flex; flex-wrap: wrap; gap: 1.4rem; padding: .9rem 0;
  border-top: 1px solid var(--linka); border-bottom: 1px solid var(--linka); margin-bottom: 1.4rem;
  font-size: .9rem;
}
.doklad-polozky tfoot th { text-align: right; font-size: .8rem; letter-spacing: .04em; }
.doklad-polozky .doklad-suma th, .doklad-polozky .doklad-suma td {
  border-top: 2px solid var(--ink); font-size: 1.05rem; padding-top: .6rem;
}
.doklad-pozn { font-size: .84rem; color: var(--seda); margin: 1.2rem 0 0; }
.doklad-tlac { margin-top: 1.4rem; }
@media (max-width: 620px) { .doklad-strany { grid-template-columns: 1fr; } }
/* Návod pre hráča sa berie na tréning na papieri, nie na telefóne. */
.mapa-navodu .tabulka td:first-child { white-space: nowrap; }
.mapa-navodu .tabulka td { text-align: left; }

@media print {
  /* Menu, pätička a prepínač na papieri nemajú čo robiť. */
  .hlava, .pata, .prepinac, .viac { display: none !important; }
  main.obal { width: auto; padding: 0; }
  .karta { border: 1px solid #bbb; break-inside: avoid; page-break-inside: avoid; }
  h2 { break-after: avoid; page-break-after: avoid; }
  .tabulka th { background: #eee !important; color: #000 !important; }
  a { text-decoration: none; color: #000; }

  .hlava, .prepinac, .pata, .doklad-tlac { display: none !important; }
  .doklad { border: 0; padding: 0; }
  body { background: #fff; }
}
.trener-zdarma { border-left: 4px solid var(--trava); background: #f2f8f4; }
.trener-zdarma h2 { color: var(--trava-tmava); font-size: 1.15rem; }
.trener-zdarma ul { margin: .6rem 0; }

/* ---------- príbeh zakladateľa ---------- */
/* Stojí hneď za hero a je zámerne najväčší text na stránke po nadpise —
   je to dôvod, prečo služba vznikla, nie jeden z očíslovaných krokov. */
/* ---------- príbeh vzniku (hovorí Jakub) ---------- */
/* Prvá verzia bola štvorcová fotka s tvrdým odsadeným tieňom a všetko naokolo
   v pravých uhloch — vyzeralo to ako výstrižok, nie ako portrét. Teraz je to
   jeden mäkký panel: portrét v oblúku (4:5, orezaný cover), tónovaný podklad
   a text bez rámu. Ostré hrany si necháva značka a čísla, tu nie. */
.pribeh {
  display: grid;
  grid-template-columns: clamp(190px, 24vw, 268px) 1fr;
  gap: clamp(1.4rem, 3.4vw, 2.6rem);
  align-items: center;
  margin: clamp(1.8rem, 5vw, 3rem) 0 clamp(2rem, 5vw, 3.4rem);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--tint) 0%, rgba(253,234,236,0) 58%),
    linear-gradient(180deg, #fff 0%, #fdfbfb 100%);
  border: 1px solid #f2e2e4;
  border-radius: clamp(14px, 2vw, 24px);
}

.pribeh-foto { margin: 0; position: relative; }
/* Oblúk: hore polkruh, dole len jemne zaoblené. Bez orezania na výšku by
   sa z portrétu stal pás — preto aspect-ratio a object-fit. */
.pribeh-foto img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 22%;
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 14px 34px rgba(20,20,20,.14), 0 2px 6px rgba(20,20,20,.06);
}
.pribeh-foto figcaption {
  font-size: .76rem; color: var(--seda); margin-top: .9rem;
  line-height: 1.45; text-align: center;
}

/* Nadpisok ako štítok so zelenou bodkou — drobný signál „toto hovorí človek",
   nie ďalší číslovaný oddiel. */
.pribeh-nadpisok {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--trava-tmava); font-weight: 700; margin: 0 0 .7rem;
}
.pribeh-nadpisok::before {
  content: ''; width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--trava); flex: 0 0 auto;
}

.pribeh-text h2 {
  display: block;
  font-family: var(--pismo-display); font-weight: 400; text-transform: none;
  letter-spacing: .005em; color: var(--ink);
  font-size: clamp(1.5rem, 4.4vw, 2.45rem); line-height: 1.06;
  margin: 0 0 1rem; text-wrap: balance;
}
.pribeh-uvod { font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.62; }
.pribeh-text p { margin: 0 0 .95rem; }
.pribeh-text p:last-child { margin-bottom: 0; }
.pribeh-text strong { color: var(--cervena-tmava); }

.pribeh-podpis {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  margin: 1.5rem 0 0 !important; padding-top: .9rem;
  border-top: 1px solid #f0dfe1;
}
.pribeh-meno {
  font-family: var(--pismo-display); font-size: 1.15rem; letter-spacing: .01em;
  text-transform: uppercase; color: var(--cervena);
}
.pribeh-kto { font-size: .84rem; color: var(--seda); }

/* Otcova poznámka: biela karta vnútri panela. Zámerne menšia a odsadená —
   hlas oddielu je Jakubov, otec k nemu len dopisuje jednu vetu. */
.pribeh-otec {
  grid-column: 1 / -1;
  font-size: .9rem; line-height: 1.6; color: var(--seda);
  background: #fff; border: 1px solid var(--linka);
  border-left: 3px solid var(--tint);
  border-radius: 0 12px 12px 0;
  padding: .95rem 1.15rem; margin: 0 !important;
}
.pribeh-otec-meno {
  display: block; margin-top: .4rem; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--seda-svetla);
}
.referencie-pozn {
  max-width: 62ch; margin: 0 auto clamp(1.4rem, 4vw, 2.2rem);
  font-size: .82rem; color: var(--seda); text-align: center;
}

}

.pata .jazyky { margin-top: .55rem; align-items: baseline; }
.jazyky-popis {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--seda-svetla);
}
.pata .jazyky strong { font-size: .8rem; color: var(--ink); }

/* ---------- škola trikov ---------- */
/* Knižnica sa nedá zobraziť ako zoznam — 300 riadkov textu dieťa nepreleze.
   Preto karty po stupňoch a v karte bodová stupnica obtiažnosti, ktorá je
   čitateľná bez čítania. */

.navrat { margin: 0 0 1.2rem; font-size: .88rem; }
.poznamka { font-size: .84rem; color: var(--seda); }

.triky {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .8rem; margin-bottom: 1.6rem;
}
.trik-karta {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--papier); border: 1px solid var(--linka);
  border-radius: 10px; padding: 1rem 1.05rem;
  text-decoration: none; color: inherit;
}
.trik-karta:hover { border-color: var(--cervena); }
.trik-karta.je-zvladnuty { border-left: 4px solid var(--trava); }

.trik-obtiaznost-text {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--seda-svetla); display: block; margin-bottom: .3rem;
}
.trik-body { display: flex; gap: 3px; }
.trik-bod {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--linka-vyrazna);
}
.trik-bod.je-plny { background: var(--cervena); }

.trik-nazov { font-size: 1.02rem; color: var(--ink); line-height: 1.25; }
.trik-popis { font-size: .86rem; color: var(--seda); line-height: 1.45; }
.trik-spodok {
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; margin-top: auto; padding-top: .6rem;
  border-top: 1px solid var(--linka);
}
.trik-fazy-pocet { font-size: .74rem; color: var(--seda-svetla); }
.trik-znacka {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .18rem .45rem; border-radius: 999px;
  background: var(--tint); color: var(--cervena-tmavsia);
}
.trik-znacka.je-zvladnuta { background: #e2f4e9; color: var(--trava-tmava); }
.trik-znacka.je-nova { background: var(--pozadie); color: var(--seda); }

/* Pás fáz predlohy. Na telefóne roluje v sebe — šesť snímkov pod sebou
   by z detailu triku spravilo dva metre stránky. */
.pas-faz {
  display: flex; gap: .55rem; overflow-x: auto; padding-bottom: .6rem;
  margin-bottom: 1rem; scroll-snap-type: x proximity;
}
.pas-faz::-webkit-scrollbar { height: 6px; }
.pas-faz::-webkit-scrollbar-thumb { background: var(--linka-vyrazna); border-radius: 3px; }
.faza { margin: 0; flex: 0 0 clamp(140px, 30vw, 190px); scroll-snap-align: start; }
.faza img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 8px; background: var(--pozadie); border: 1px solid var(--linka);
}
.faza figcaption {
  display: flex; align-items: baseline; gap: .4rem;
  font-size: .78rem; color: var(--seda); margin-top: .4rem; line-height: 1.35;
}
.faza-cislo {
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--cervena); color: #fff; font-size: .66rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.poza-stav {
  font-size: .86rem; color: var(--seda); margin-top: .6rem;
  background: var(--pozadie); border-radius: 7px; padding: .5rem .7rem;
}
.poza-vysledok .poza-skore {
  display: flex; align-items: baseline; gap: .45rem; margin: 0 0 .3rem;
}
.poza-vysledok .poza-skore strong {
  font-family: var(--pismo-display); font-size: 2.6rem; line-height: 1;
  color: var(--cervena); letter-spacing: .01em;
}
.poza-vysledok .poza-skore span {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--seda);
}
/* Posudok stroja z videa. „Iný cvik" má tlmený rám, nie červený — nie je to
   trest, je to vysvetlenie. */
.posudok .posudok-verdikt { font-size: 1.15rem; margin: 0 0 .5rem; }
.posudok-iny { border-left: 4px solid var(--linka-vyrazna); }
.posudok .posudok-vysvetlenie { margin: .4rem 0 .9rem; line-height: 1.55; }
.posudok .posudok-nadpis { margin: .7rem 0 .2rem; font-weight: 600; font-size: .92rem; }
.posudok .posudok-nadpis span { font-weight: 400; }
.posudok .posudok-zoznam { margin: 0 0 .4rem; padding-left: 1.2rem; }
.posudok .posudok-zoznam li { margin: .15rem 0; }
.posudok .posudok-plus li::marker { content: '✓  '; color: var(--cervena); }
.posudok .poznamka { margin-top: .9rem; }
.tabulka-obal { overflow-x: auto; }

/* Prehľadový pásik na určenie výseku. Roluje v sebe, aby sa dalo prejsť
   celé video očami bez toho, aby stránka narástla o dva metre. */
.pasik {
  display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .5rem;
  margin: .8rem 0 1rem;
}
.pasik::-webkit-scrollbar { height: 6px; }
.pasik::-webkit-scrollbar-thumb { background: var(--linka-vyrazna); border-radius: 3px; }
.pasik-snimok { margin: 0; flex: 0 0 84px; }
.pasik-snimok img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 5px; border: 1px solid var(--linka); background: var(--pozadie);
}
.pasik-snimok figcaption {
  font-size: .66rem; color: var(--seda); text-align: center; margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}
.vysek-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .8rem; margin: 0;
}
.vysek-form label { font-size: .8rem; color: var(--seda); display: block; width: 100%; margin: 0; }
.vysek-form input[type=number] { width: 6.5rem; margin: 0; }
.vysek-form button { flex: 0 0 auto; }
.vysek-form .poznamka { flex: 1 1 100%; margin: .2rem 0 0; }

/* Napísané fázy — trik, ktorý ešte nemá vlastnú predlohu na videu.
   Nie je to náhrada snímku, je to to, proti čomu sa porovnáva do vtedy. */
.pas-krokov {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .6rem; margin-bottom: 1.2rem;
}
.krok-faza {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--papier); border: 1px solid var(--linka);
  border-radius: 9px; padding: .8rem .9rem; font-size: .9rem; line-height: 1.5;
}
.porovnanie-slovom {
  margin: 0; font-size: .88rem; line-height: 1.5; color: var(--ink);
  background: var(--tint); border-radius: 7px; padding: .7rem .8rem;
}

/* Porovnanie: predloha nad pokusom, nie vedľa. Vedľa seba by sa na telefóne
   zmenšili obidva snímky na nečitateľné a práve o pozeranie tu ide. */
.porovnanie {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .9rem; margin-bottom: 1.6rem;
}
.porovnanie-faza {
  background: var(--papier); border: 1px solid var(--linka);
  border-radius: 10px; padding: .8rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.porovnanie-faza.je-ok  { border-color: #b8e0c6; background: #fbfffc; }
.porovnanie-faza.je-zle { border-color: #f0c4c0; background: #fffbfb; }
.porovnanie-cislo {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--seda); font-weight: 700;
}
.porovnanie-obraz { margin: 0; }
.porovnanie-obraz img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 7px; border: 1px solid var(--linka); background: var(--pozadie);
}
.porovnanie-obraz figcaption {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--seda-svetla); margin-top: .25rem;
}
.porovnanie-obraz.je-moja figcaption { color: var(--cervena); font-weight: 700; }
.porovnanie-popis { font-size: .82rem; color: var(--seda); margin: 0; line-height: 1.45; }
.porovnanie-volba { display: flex; gap: .35rem; margin: 0; }
.porovnanie-volba button { flex: 1 1 0; }

.tempo-veta {
  background: var(--papier); border: 1px solid var(--linka);
  border-left: 3px solid var(--trava); border-radius: 0 8px 8px 0;
  padding: .8rem 1rem; margin-bottom: 1.4rem; font-size: .92rem;
}
.kroky-triku { margin: 0; padding-left: 1.3rem; }
.kroky-triku li { margin-bottom: .4rem; font-size: .93rem; }

@media (max-width: 560px) {
  /* Jedna fáza na šírku obrazovky: porovnávať sa má pozorne, nie rýchlo. */
  .porovnanie { grid-template-columns: 1fr; }
  .triky { grid-template-columns: 1fr; }
}

/* ================================================================
   RESPONZIVITA — jedno miesto pre celú škálu zariadení

   Predtým boli zlomy rozsypané po celom súbore (520/560/600/620/700/760)
   a každý riešil jednu sekciu. Tie tam zostávajú, toto je vrstva navrch
   a rieši veci, ktoré platia pre celú stránku, nie pre jeden komponent.

   Testované šírky: 320, 360, 390, 414, 768, 834, 1024, 1280, 1600.
   ================================================================ */

/* Dlhé slová sa nesmú vytlačiť z obalu. V slovenčine (a v e-mailoch,
   tokenoch a URL v denníku) je to reálny problém, nie teoretický. */
body { overflow-wrap: break-word; }
h1, h2, h3, .pribeh-text h2, .zaver h2, .plan-nazov { overflow-wrap: anywhere; }
/* Nič sa nesmie posunúť do vodorovného rolovania celej stránky. */
html, body { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* ---------- tablet a menšie okná (≤ 900 px) ---------- */
@media (max-width: 900px) {
  .pribeh { grid-template-columns: clamp(170px, 30vw, 240px) 1fr; }
}

/* ---------- pod 720 px: príbeh do jedného stĺpca ---------- */
@media (max-width: 720px) {
  .pribeh { grid-template-columns: 1fr; gap: 1.3rem; text-align: left; }
  /* Fotka sa nerozťahuje na celú šírku — portrét vysoký ako telefón
     by vytlačil text pod prvý ohyb. */
  .pribeh-foto { max-width: 230px; margin-inline: auto; }
  .pribeh-podpis { margin-top: 1.2rem !important; }
}

/* ---------- telefón (≤ 560 px) ---------- */
@media (max-width: 560px) {
  /* Menu sa pri šiestich položkách lámalo do troch riadkov a hlavička
     narástla na tretinu obrazovky. Teraz je to jeden posuvný pás — ale
     posúva sa LEN .menu-pas s odkazmi, nie celý nav.

     ⚠️ Prečo: WebKit (Safari a KAŽDÝ prehliadač na iPhone) oreže rámcom
     posuvného prvku (overflow-x: auto) všetko, čo je v ňom umiestnené —
     absolútne aj pevne (position: fixed), hoci vzťažný rámec je mimo neho.
     Chrome to podľa špecifikácie neoreže, preto to na Macu vyzeralo dobre.
     Kým bol panel „Viac" vnútri pásu, na iPhone z neho bol vidieť len jeden
     riadok vysoký ako pás (11. 9. 2026: Juraj videl iba „Návod pre hráča").
     „Viac" preto stojí VEDĽA pásu a panel nemá nad sebou nič posuvné. */
  .hlava nav {
    flex-wrap: nowrap; gap: 0; align-items: center; overflow: visible;
    /* width 100 % + min-width 0: nav je položka zalamovaného flexu .hlava-vnutro;
       bez toho by si vzal šírku obsahu (~650 px) a pilulka „Viac" by bola
       mimo obrazovky — pás sa zmrští len vtedy, keď smie byť užší než obsah. */
    width: 100%; min-width: 0;
    margin-inline: calc(var(--zlab) / -2);
  }
  .menu-pas {
    display: flex; gap: .35rem; align-items: center;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-inline: calc(var(--zlab) / 2);
  }
  .menu-pas::-webkit-scrollbar { display: none; }
  .hlava nav a, .viac > summary { white-space: nowrap; flex: 0 0 auto; }
  /* Pilulka „Viac" je vždy vidno, ostatné položky miznú pod ňou v tieni. */
  .viac {
    flex: 0 0 auto; position: static; padding-right: calc(var(--zlab) / 2);
    background: var(--cervena); box-shadow: -14px 0 12px -4px var(--cervena);
  }
  /* .viac zostáva static — keby bol positioned, panel by sa meral od pilulky,
     nie od .hlava. Pilulka sama vystúpi nad stmavené pozadie. */
  .viac[open] > summary { position: relative; z-index: 60; }
  /* Panel pod hlavičkou na celú šírku; vzťažný rámec je .hlava. */
  .hlava { position: relative; }
  .hlava nav .viac-obsah {
    position: absolute; top: 100%; left: 0; right: 0; min-width: 0; z-index: 60;
    border-radius: 0 0 14px 14px; max-height: 70vh; overflow-y: auto;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }
  /* Stmavená stránka pod panelom; klik na ňu panel zavrie (menu.js). */
  .viac[open]::before {
    content: ''; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45);
  }

  /* Široké tabuľky rolujú v sebe, nie celou stránkou. Rovnaký postup
     ako .dokument table na riadku 221 — na <table> funguje display:block
     bez rozpadu stĺpcov. */
  .tabulka { display: block; overflow-x: auto; }

  /* Tlačidlá a voľby na dotyk: 44 px je minimum, ktoré sa dá trafiť prstom. */
  .prepinac-volba { min-height: 2.4rem; }
  .tlacidlo { padding: 1rem .9rem; }
}

/* ---------- malý telefón (≤ 400 px) ---------- */
@media (max-width: 400px) {
  body { font-size: 15.5px; }
  .karta, .dokument, .plan { padding: .95rem 1rem; }
  .pribeh { padding: 1.15rem 1rem; }
  .pribeh-foto { max-width: 190px; }
  .znacka-text { font-size: 1rem; }
  .dlazdica .cislo { font-size: 1.4rem; }
  .zaver { padding: 1.9rem 1.1rem; }
  .zaver h2 { font-size: 1.45rem; }
}

/* ---------- nízke okno naležato ---------- */
/* Telefón naležato má ~380 px na výšku. Panely s veľkým vnútorným
   odsadením zaberú celú obrazovku a nevidno, že stránka pokračuje. */
@media (max-height: 460px) and (orientation: landscape) {
  .hero { gap: 1rem; }
  .pribeh { padding: 1.1rem 1.3rem; margin-block: 1.2rem; }
  .zaver { padding: 1.5rem 1.2rem; }
}

/* ---------- veľká obrazovka (≥ 1440 px) ---------- */
/* Riadok textu sa nerozťahuje — 780 px je zámer, nie limit techniky.
   Rastie len vzduch okolo a ukážky rozhrania. */
@media (min-width: 1440px) {
  main.obal.siroko { width: min(1140px, 100% - var(--zlab)); }
  main.obal { padding-bottom: 4rem; }
}

/* ---------- dotyk namiesto myši ---------- */
/* Na dotykovom zariadení :hover „prischne" po kliknutí a riadok
   zostane zvýraznený. Preto sa efekty na myš zapínajú len tam,
   kde myš naozaj je. */
@media (hover: none) {
  .riadok:hover, .konv-riadok:hover, .otazky summary:hover { background: inherit; }
  .riadok:active, .konv-riadok:active { background: var(--tint); }
}

/* ---------- menej pohybu ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- hromadný import videí a kopa nezaradených (12. 9. 2026) ---------- */
.import-zona { border: 2px dashed var(--ciara, #d8d8d8); border-radius: 14px; padding: 1.25rem; text-align: center;
  background: #fafafa; transition: background .15s, border-color .15s; }
.import-zona.tahanie { background: var(--tint, #fdeaea); border-color: var(--cervena, #E5202E); }
.import-zona input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.import-zona .tlacidlo { cursor: pointer; }
.import-akcie { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .75rem 0; }
.import-zoznam { list-style: none; padding: 0; margin: .75rem 0 0; max-height: 26rem; overflow-y: auto;
  border-top: 1px solid var(--ciara, #e6e6e6); font-size: .9rem; }
.import-zoznam li { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; padding: .35rem 0;
  border-bottom: 1px solid var(--ciara, #eee); }
.import-zoznam li.bezi { background: #fffdf4; }
.import-zoznam li.priradene .import-vysl { color: var(--trava-tmava, #1f6b3a); }
.import-zoznam li.chyba .import-vysl { color: var(--cervena, #E5202E); }
.import-nazov { flex: 1 1 14rem; word-break: break-all; }
.import-vysl { flex: 1 1 100%; }
.kopa-hrac select { max-width: 100%; }
.kopa-kedy { font-size: .8rem; font-weight: 400; color: #666; }
.kopa-dlazdice { margin-bottom: 1rem; }
.kopa-skupina { margin-top: 1rem; }
.kopa-skupina-hlava { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.kopa-pocet { margin-left: auto; font-size: .82rem; color: #666; }
.kopa-den-akcia { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.kopa-den-akcia select { flex: 1 1 14rem; max-width: 100%; }
.kopa-mriezka { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: .6rem; }
.kopa-polozka { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.kopa-nahlad { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background: #111; }
.kopa-nahlad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kopa-nahlad .galeria-cas { position: absolute; right: .3rem; bottom: .3rem; }
.kopa-prazdny { color: #fff; font-size: 1.6rem; display: grid; place-items: center; height: 100%; }
.kopa-cas { font-size: .78rem; color: #666; }
.kopa-mini { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; }
.kopa-mini select { font-size: .8rem; padding: .25rem; max-width: 100%; }
.kopa-mini .odkaz-tlacidlo { font-size: .78rem; align-self: flex-start; }
.kopa-zoznam { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.kopa-zoznam li { word-break: break-all; }
.kopa-detaily summary { cursor: pointer; }
.kopa-dlhe { border-color: #e6c46a; }
.kopa-ponuka { margin: .75rem 0 1rem; background: #fff8e6; border-radius: 10px; padding: .6rem .8rem; }
.doplnky { margin-top: 1rem; border-top: 1px solid var(--ciara, #eee); padding-top: .75rem; }
.doplnok { margin: .4rem 0 .75rem; }
.doplnok-riadok { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.doplnok-riadok select { flex: 1 1 10rem; max-width: 100%; }
.doplnok-nazov { min-width: 5rem; }
.doplnok-suhlasy { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: #555; margin-top: .25rem; }
.doplnok-suhlasy label { display: inline-flex; gap: .3rem; align-items: center; }
.doplnky-zoznam { padding-left: 1.2rem; }
@media (max-width: 480px) { .kopa-mriezka { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } }

/* ==========================================================================
   Upozornenia, spolujazda a ankety (14. 9. 2026)
   ========================================================================== */

/* Stav zapnutia upozornení. Tri farby: neutrálna, áno, nie — človek má
   na jeden pohľad vidieť, či mu niečo chodí, nie to čítať. */
.upoz-stav { margin: 0 0 .8rem; font-weight: 600; }
.upoz-stav.je-ano  { color: var(--trava-tmava); }
.upoz-stav.je-nie  { color: var(--cervena-tmavsia); }
.upoz-stav.je-caka { color: #8a6410; }

/* Riadok so zrušením termínu. Políčko na dôvod a tlačidlo vedľa seba, na
   telefóne pod sebou — inak by sa dôvod zmestil na tri znaky. */
.riadok-formular.zrusenie { flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.riadok-formular.zrusenie input[type="text"] { flex: 1 1 14rem; min-width: 0; }

/* Prečo sa akcia nekoná. Musí to byť vidieť skôr než čokoľvek iné v riadku. */
.zrusene-preco { color: var(--cervena-tmavsia); }
.zrusene-preco .napoveda { color: var(--seda); }

/* Anketa: pás s podielom hlasov. Zámerne bez čísla v percentách vo vnútri —
   pri troch hlasoch zo štyroch je „75 %" presnejšie, než je pravda. */
.anketa-riadok { margin: 0 0 .9rem; }
.anketa-riadok:last-child { margin-bottom: 0; }
.anketa-popis { display: flex; justify-content: space-between; align-items: baseline;
                gap: .6rem; margin-bottom: .25rem; }
.anketa-popis strong { font-variant-numeric: tabular-nums; }
.anketa-pas { height: .55rem; border-radius: .3rem; background: var(--linka); overflow: hidden; }
.anketa-vypln { height: 100%; background: var(--cervena); border-radius: .3rem;
                transition: width .3s ease; }
.anketa-riadok.je-moj .anketa-vypln { background: var(--trava); }
.anketa-riadok.je-moj .anketa-popis { font-weight: 600; }

/* ---- klikateľné riadky súhrnných tabuliek (zápasy podľa kategórie a sezóny) ----
   Odkazom je KAŽDÁ bunka, nie jeden odkaz roztiahnutý cez riadok. Vyzerá to
   rovnako, ale nič nikde nepresahuje.

   ⚠️ Pôvodne to bol jeden odkaz s `::after { position:absolute; inset:0 }`
   nad riadkom. WebKit (Safari) neberie `position:relative` na `<tr>`, takže
   sa taká plocha roztiahla cez celý dokument a v Safari sa nedalo kliknúť
   nikde na stránke. V Chrome to fungovalo, preto to prešlo. */
.tabulka-klik td { padding: 0; }
.tabulka-klik .bunka-odkaz {
  display: block; padding: .5rem .55rem;
  color: inherit; text-decoration: none;
}
.tabulka-klik tr:hover td { background: var(--tint); }
.tabulka-klik .bunka-odkaz:focus-visible { outline: 2px solid var(--cervena); outline-offset: -2px; }
.tabulka-klik tr.je-vybraty td { background: var(--tint); }
.tabulka-klik tr.je-vybraty td:first-child { box-shadow: inset 3px 0 0 var(--cervena); }
.tabulka-klik tr.je-vybraty .bunka-odkaz { color: var(--cervena); }
.tabulka-klik .bilancia-bunka { white-space: nowrap; }