/* ---------------------------------------------------------------------------
   Stránky pro hosty: přivítání, posílání, živá galerie, překryvný detail.
   Staví na motiv.css (barvy, písma, .tl, .pole) — tady jen vzhled stránek.
   --------------------------------------------------------------------------- */

/* ------------------------------------------- tenká horní lišta menu ------ */
/* Drobná a decentní: nad hero fotkou průhledná se světlým písmem, po
   odrolování (třída .je-podbarvena z host.js) krémový papír s jemným stínem. */
.listka {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem;
  min-height: 48px;
  padding: 0 .5rem 0 1rem;
  color: #fff8ec;
  transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.listka.je-podbarvena {
  background: color-mix(in srgb, var(--papir) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--linka), 0 4px 18px rgba(42, 37, 32, .07);
  color: var(--inkoust);
}

.listka-znacka {
  margin: 0;
  display: flex; align-items: baseline; gap: .6rem;
  min-width: 0;
}
.listka-znacka b {
  font-family: var(--nadpis);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.listka-datum {
  font-size: .7rem;
  letter-spacing: .12em;
  white-space: nowrap;
  opacity: .8;
}
.listka.je-podbarvena .listka-datum { color: var(--zlata-tmav); opacity: 1; }

.listka-menu { display: flex; align-items: center; gap: .1rem; flex: none; }

/* textové odkazy — opticky drobné, dotyková plocha průhledným paddingem */
.listka-odkaz {
  position: relative;
  border: 0; background: none;
  font: 600 .82rem/1 var(--text);
  color: inherit;
  opacity: .85;
  padding: .95rem .7rem;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.listka-odkaz:hover { opacity: 1; }
.listka-odkaz::after {                 /* zlatá linka pod aktivní položkou */
  content: '';
  position: absolute; left: .7rem; right: .7rem; bottom: .6rem;
  height: 2px; border-radius: 2px;
  background: var(--zlata-svet);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.listka-odkaz.je-aktivni { opacity: 1; color: var(--zlata-svet); }
.listka-odkaz.je-aktivni::after { transform: scaleX(1); }
.listka.je-podbarvena .listka-odkaz.je-aktivni { color: var(--zlata-tmav); }
.listka.je-podbarvena .listka-odkaz.je-aktivni::after { background: var(--zlata); }

/* přání písničky v liště — v rozbalení i v řadě se vejde celý text */
.listka-pisnicky .pisnicky-kratce { display: none; }

/* rozbalení „Víc" — na mobilu schová všechno kromě Galerie a Poslat */
.listka-vic { display: inline-flex; align-items: center; gap: .35rem; }
.vic-sipka {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .2s ease;
}
.listka-vic[aria-expanded="true"] .vic-sipka { transform: rotate(225deg) translateY(-1px); }

.listka-rozbal {
  display: none;
  position: absolute;
  top: 100%; right: .5rem;
  flex-direction: column;
  align-items: stretch;
  min-width: 13rem;
  padding: .4rem;
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: var(--r-m);
  box-shadow: var(--stin-m);
  color: var(--inkoust);                  /* i nad hero fotkou čitelné */
}
.listka-rozbal.je-otevrene { display: flex; }
.listka-rozbal .listka-odkaz {
  text-align: left;
  opacity: 1;
  color: var(--inkoust-2);
}
.listka-rozbal .listka-odkaz.je-aktivni { color: var(--zlata-tmav); }
.listka-rozbal .listka-odkaz::after { left: .7rem; right: auto; width: 2rem; }

@media (min-width: 900px) {
  .listka-vic { display: none; }
  .listka-rozbal,
  .listka-rozbal.je-otevrene {            /* v řadě jako dřív, i po zvětšení okna */
    display: contents;
  }
}

/* Poslat fotky v liště — jen na širokém okně, na mobilu je plovoucí kapsle */
.listka-poslat { display: none; }

@media (min-width: 900px) {
  .listka { min-height: 56px; padding: 0 1.2rem 0 1.6rem; }
  .listka-znacka b { font-size: 1.1rem; }
  .listka-menu { gap: .3rem; }
  .listka-odkaz { font-size: .88rem; padding: 1rem .9rem; }
  .listka-odkaz::after { left: .9rem; right: .9rem; }
  .listka-poslat {
    display: inline-flex;
    margin-left: .7rem;
    padding: .7rem 1.35rem;
    min-height: 44px;
    font-size: .88rem;
  }
}

/* cíle rolování nesmí zajet pod lištu */
#uvitani, #posilani, #galerie { scroll-margin-top: 60px; }
@media (min-width: 900px) {
  #uvitani, #posilani, #galerie { scroll-margin-top: 76px; }
}

/* --------------------------------- plovoucí Poslat fotky (mobil) --------- */
.pl-poslat {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px;
  padding: .7rem 1.2rem;
  border: 0; border-radius: 999px;
  font: 600 .92rem/1 var(--text);
  color: #fff;
  background: linear-gradient(135deg, var(--zlata-svet), var(--zlata) 45%, var(--zlata-tmav));
  box-shadow: 0 6px 20px rgba(143, 111, 54, .4), 0 2px 6px rgba(42, 37, 32, .18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: padding .25s ease, gap .25s ease;
}
.pl-poslat[hidden] { display: none; }
.pl-poslat svg { width: 18px; height: 18px; flex: none; }
.pl-poslat span {
  max-width: 9rem;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .25s ease, opacity .2s ease;
}
/* při rolování dolů zůstane jen ikona */
.pl-poslat.je-mala { padding: .7rem .95rem; gap: 0; }
.pl-poslat.je-mala span { max-width: 0; opacity: 0; }
@media (min-width: 900px) { .pl-poslat { display: none; } }

/* na širokém okně ať obsah dýchá a mřížka využije místo */
@media (min-width: 900px) {
  .obal { width: min(100% - 4rem, var(--sirka)); }
  #galerie { margin-top: 4rem; }
}
@media (min-width: 1500px) {
  .mrizka { grid-template-columns: repeat(7, 1fr); gap: 10px; }
}

/* ------------------------------------------------------------- hero ------ */
.hero {
  position: relative;
  height: min(72svh, 640px);
  min-height: 420px;
  overflow: hidden;
  background: var(--papir-tmav);
}

.hero-fotka {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: ken-burns 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ken-burns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.12) translateY(-1.5%); }
}

/* Zástupná plocha, dokud není hero fotka na místě. */
.hero-nahrada {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 253, 249, .9), transparent 60%),
    radial-gradient(90% 70% at 80% 100%, rgba(184, 147, 79, .35), transparent 65%),
    radial-gradient(80% 60% at 15% 85%, rgba(217, 184, 116, .45), transparent 60%),
    linear-gradient(165deg, var(--papir) 0%, var(--papir-tmav) 45%, #e6d3ac 100%);
}

.hero-clona {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(24, 18, 10, .18) 0%,
    rgba(24, 18, 10, 0)   30%,
    rgba(24, 18, 10, 0)   45%,
    rgba(24, 18, 10, .62) 100%);
}

.hero-text {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(3.5rem, 10vh, 5.5rem);
  text-align: center;
  color: #fff8ec;
  padding-inline: 1rem;
}
.hero-text > * {
  animation: prijezd 1.3s cubic-bezier(.2, .7, .2, 1) both;
}

.hero-podnazev {
  font-size: .82rem;
  letter-spacing: .38em;
  text-indent: .38em;           /* vyváží letter-spacing posledního znaku */
  text-transform: uppercase;
  margin: 0 0 .8rem;
  opacity: .92;
  animation-delay: .25s;
}

.hero-nazev {
  font-family: var(--nadpis);
  font-size: clamp(2.5rem, 9.5vw, 4.6rem);
  line-height: 1.08;
  margin: 0;
  text-shadow: 0 2px 30px rgba(10, 7, 3, .45);
  animation-delay: .55s;
}

.hero-datum {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin: 1rem 0 0;
  font-size: .95rem;
  letter-spacing: .14em;
  animation-delay: .9s;
}
.hero-datum span {
  width: 42px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--zlata-svet));
}
.hero-datum span:last-child {
  background: linear-gradient(90deg, var(--zlata-svet), transparent);
}

@keyframes prijezd {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.hero-sipka {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.hero-sipka span {
  width: 12px; height: 12px;
  border-right: 2px solid rgba(255, 248, 236, .9);
  border-bottom: 2px solid rgba(255, 248, 236, .9);
  transform: rotate(45deg);
  animation: pokyn 2.4s ease-in-out 2s infinite;
}
@keyframes pokyn {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .9; }
  50%       { transform: rotate(45deg) translate(4px, 4px); opacity: .5; }
}

/* --------------------------------------------- karta jako vzkaz hostů ---- */
.karta-vzkaz {
  position: relative; z-index: 2;
  max-width: 540px;
  margin: -3.2rem auto 0;
  padding: clamp(1.5rem, 5vw, 2.4rem);
  background: var(--karta);
  border-radius: var(--r-l);
  box-shadow: var(--stin-l);
  transform: rotate(-.6deg);
}
.karta-vzkaz::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0;
  height: 3px;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: linear-gradient(90deg, transparent, var(--zlata-svet), var(--zlata), var(--zlata-svet), transparent);
}
.karta-vzkaz--stred {
  margin-top: clamp(3rem, 12vh, 6rem);
  transform: none;
  text-align: center;
}

.uvitani-text {
  font-size: 1.05rem;
  color: var(--inkoust);
  margin-bottom: 1.4rem;
}

.popisek {
  display: block;
  font-family: var(--nadpis);
  font-size: 1.35rem;
  margin-bottom: .6rem;
}

#formular-jmeno .tl { margin-top: 1rem; }

.tl--siroke { width: 100%; }
.tl--velke  { font-size: 1.12rem; padding: 1.3rem 1.6rem; min-height: 60px; }

.odkaz-tichy {
  display: block;
  margin: .9rem auto 0;
  padding: .55rem 1rem;
  min-height: 44px;
  background: none; border: 0;
  font: 400 .88rem/1.3 var(--text);
  color: var(--inkoust-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.odkaz-tichy:hover { color: var(--zlata-tmav); }

/* --------------------------------------------------------- posílání ------ */
#posilani {
  max-width: 540px;
  margin: 2.5rem auto 0;
}

.posilani-hlava {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  font-size: .88rem;
  color: var(--inkoust-2);
}
.posilani-hlava p { margin: 0; }
.posilani-hlava b { color: var(--inkoust); font-weight: 600; }
.posilani-hlava .odkaz-tichy { margin: 0; flex: none; }

.posilani-nadpis {
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  margin: .8rem 0 1rem;
}

.soubory {
  list-style: none;
  margin: 1.2rem 0 0; padding: 0;
}
.soubor {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: .4rem .8rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linka);
  animation: objeveni .4s ease both;
}
@keyframes objeveni {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.soubor-nahled {
  grid-row: span 2;
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: var(--r-s);
  background: var(--papir-tmav);
}
div.soubor-nahled { display: grid; place-items: center; }
div.soubor-nahled::before {
  content: '';
  width: 0; height: 0;
  border-left: 12px solid var(--zlata);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}

.soubor-info { min-width: 0; }
.soubor-nazev {
  display: block;
  font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.prubeh {
  height: 4px;
  margin-top: .35rem;
  background: var(--linka);
  border-radius: 999px;
  overflow: hidden;
}
.prubeh i {
  display: block; height: 100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--zlata-svet), var(--zlata));
  border-radius: 999px;
  transition: width .25s ease;
}

.soubor-stav {
  grid-column: 2;
  margin: 0;
  font-size: .82rem;
  color: var(--inkoust-2);
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.soubor--hotovo .soubor-stav  { color: var(--uspech); }
.soubor--chyba  .soubor-stav  { color: var(--chyba); }
.soubor--hotovo .prubeh i     { background: var(--uspech); }
.soubor--chyba  .prubeh i     { background: var(--chyba); }

.tl-znovu {
  background: none;
  border: 1px solid var(--chyba);
  color: var(--chyba);
  font: 600 .8rem/1 var(--text);
  padding: .5rem .9rem;
  min-height: 36px;
  border-radius: 999px;
  cursor: pointer;
}
.tl-znovu:hover { background: var(--chyba); color: #fff; }

.soubor-pozn {
  grid-column: 2;
  margin: 0;
  font-size: .8rem;
  color: var(--inkoust-2);
  background: var(--papir-tmav);
  padding: .45rem .7rem;
  border-radius: var(--r-s);
}

/* nenápadný odkaz „odstranit" u čerstvě odeslaného souboru */
.soubor-odebrat {
  background: none; border: 0;
  padding: .4rem .6rem;
  min-height: 44px;
  display: inline-flex; align-items: center;
  font: 400 .82rem/1.3 var(--text);
  color: var(--inkoust-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.soubor-odebrat:hover { color: var(--zlata-tmav); }

/* jedna věta pod seznamem — víc vysvětlování netřeba */
.soubory-pozn {
  margin: .6rem 0 0;
  font-size: .8rem;
  color: var(--inkoust-2);
}

/* přání písničky — decentní karta pod seznamem souborů; tiché tlačítko
   s obrysem, aby nesoupeřilo se zlatým Poslat fotky */
.pisnicky {
  margin: 1.4rem 0 0;
  padding: .9rem 1rem;
  border: 1px solid var(--linka);
  border-radius: var(--r-m);
  background: var(--karta);
  box-shadow: var(--stin-s);
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem .9rem;
  flex-wrap: wrap;
}
.pisnicky p {
  margin: 0;
  flex: 1 1 14rem;
  font-size: .88rem;
  color: var(--inkoust-2);
}
.pisnicky-tl {
  flex: none;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--zlata-svet);
  border-radius: 999px;
  background: none;
  color: var(--zlata-tmav);
  font: 600 .85rem/1 var(--text);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pisnicky-tl:hover {
  border-color: var(--zlata);
  background: color-mix(in srgb, var(--zlata-svet) 14%, transparent);
}
.pisnicky-tl svg { width: 15px; height: 15px; flex: none; }

.dik {
  position: relative;
  margin: 1.4rem 0 0;
  text-align: center;
  font-family: var(--nadpis);
  font-size: 1.25rem;
  color: var(--zlata-tmav);
}

/* zlaté zajiskření po dokončení */
.jiskra {
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3d6, var(--zlata-svet) 45%, var(--zlata));
  pointer-events: none;
  animation: jiskra .95s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes jiskra {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); }
}

/* -------------------------------------------- archivní fáze a PIN -------- */
.pruh-archiv {
  max-width: 620px;
  margin: 2rem auto 0;
  padding: .8rem 1.2rem;
  text-align: center;
  font-size: .92rem;
  color: var(--inkoust-2);
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: var(--r-m);
  box-shadow: var(--stin-s);
}

.formular-pin { max-width: 300px; margin: 0 auto; }
.pole--pin {
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: .35em;
  text-indent: .35em;
}
.formular-pin .tl { margin-top: 1rem; }

.hlaska-chyba {
  margin: .8rem 0 0;
  color: var(--chyba);
  font-size: .92rem;
}

/* zámek rolování pod otevřeným překryvem */
.bez-rolovani, .bez-rolovani body { overflow: hidden; }

/* ---------------------------------------------------------- galerie ------ */
#galerie { margin-top: 3.2rem; }

.galerie-hlava {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-bottom: 1rem;
}
.galerie-hlava h2 { margin: 0; font-size: clamp(1.6rem, 6vw, 2rem); }

.pocitadlo {
  width: 100%; order: 3;
  margin: 0;
  font-family: var(--nadpis);
  font-style: italic;
  font-size: .98rem;
  color: var(--zlata-tmav);
}

/* kdo fotil — vodorovná řádka drobných kapslí, odsouvá se do strany */
.lide {
  display: flex; align-items: center;
  gap: .45rem;
  overflow-x: auto;
  padding: .2rem .1rem .55rem;
  margin: 0 0 .5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lide::-webkit-scrollbar { display: none; }
@media (max-width: 699px) {
  .lide { margin-inline: -1rem; padding-inline: 1rem; }  /* od kraje ke kraji */
}
@media (min-width: 900px) {
  .lide { flex-wrap: wrap; overflow: visible; }          /* na počítači se vejde bez rolování */
}

.kapsle {
  flex: none;
  display: inline-flex; align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .3rem .85rem .3rem .45rem;
  border: 1px solid var(--linka);
  border-radius: 999px;
  background: var(--karta);
  font: 600 .82rem/1 var(--text);
  color: var(--inkoust-2);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kapsle:hover { border-color: var(--zlata-svet); }
.kapsle.je-aktivni {
  border-color: var(--zlata);
  background: color-mix(in srgb, var(--zlata-svet) 18%, var(--karta));
  color: var(--inkoust);
  box-shadow: var(--stin-s);
}
.kapsle svg { width: 17px; height: 17px; margin-left: .3rem; flex: none; }
.kapsle-foto {
  display: inline-block;
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--papir-tmav);
  flex: none;
}
.kapsle-pocet { font-weight: 600; color: var(--zlata-tmav); }

/* „Vybráno: Marek – 34 fotek" nad mřížkou */
.galerie-vyber {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .1rem .35rem;
  margin: 0 0 .7rem;
  font-size: .88rem;
  color: var(--inkoust-2);
}
.galerie-vyber[hidden] { display: none; }
.galerie-vyber b { color: var(--inkoust); font-weight: 600; }
.vyber-zpet {
  border: 0; background: none;
  min-height: 44px;
  padding: .5rem .6rem;
  font: 600 .82rem/1 var(--text);
  color: var(--zlata-tmav);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vyber-zpet:hover { color: var(--zlata); }

.odznak-nove {
  position: fixed;
  top: 60px;                 /* pod tenkou horní lištou (48 px), ne za ní */
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;               /* nad lištou (90), pod překryvným detailem (100) */
  border: 0;
  color: #fff;
  font: 600 .9rem/1 var(--text);
  padding: .8rem 1.3rem;
  min-height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--zlata-svet), var(--zlata) 45%, var(--zlata-tmav));
  box-shadow: var(--stin-m);
  cursor: pointer;
  animation: odznak-sem .45s cubic-bezier(.2, .7, .2, 1.2) both;
}
@keyframes odznak-sem {
  from { opacity: 0; transform: translate(-50%, -16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (min-width: 900px) {
  .odznak-nove { top: 68px; }  /* vyšší lišta na počítači */
}

/* skok na nejnovější — drobné kulaté tlačítko; na mobilu vlevo dole
   (vpravo je zlatá kapsle Poslat), na počítači vpravo dole */
.skok-nahoru {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 90;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--linka);
  border-radius: 50%;
  background: color-mix(in srgb, var(--karta) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--inkoust-2);
  box-shadow: var(--stin-m);
  display: grid; place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: skok-sem .3s ease both;
}
.skok-nahoru[hidden] { display: none; }
.skok-nahoru svg { width: 20px; height: 20px; }
.skok-nahoru:hover { color: var(--zlata-tmav); border-color: var(--zlata-svet); }
.skok-nahoru.ma-nove { color: var(--zlata-tmav); border-color: var(--zlata); }
@keyframes skok-sem {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* počet čekajících novinek na tlačítku */
.skok-pocet {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--zlata-svet), var(--zlata));
  color: #fff;
  font: 700 .68rem/20px var(--text);
  text-align: center;
  box-shadow: var(--stin-s);
}

@media (min-width: 900px) {
  .skok-nahoru { left: auto; right: 1.4rem; }
}

.mrizka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (max-width: 699px) {
  .mrizka { margin-inline: -1rem; }   /* na mobilu od kraje ke kraji */
}
@media (min-width: 700px)  { .mrizka { grid-template-columns: repeat(4, 1fr); gap: 6px; } }
@media (min-width: 1100px) { .mrizka { grid-template-columns: repeat(6, 1fr); gap: 8px; } }

.bunka {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--papir-tmav);
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}
.bunka img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
@media (hover: hover) {
  .bunka:hover img { transform: scale(1.05); }
}

/* první načtení — jemné postupné objevení */
.bunka--uvod { animation: bunka-uvod .5s ease both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes bunka-uvod {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* nově doručená fotka se „vyvolá" — z rozmazané do ostré */
.bunka--nova { animation: vyvolani 1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vyvolani {
  from { opacity: 0; filter: blur(14px) saturate(.5) brightness(1.1); transform: scale(.94); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: none; transform: none; }
}

.bunka-znak {
  position: absolute;
  right: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(20, 15, 8, .55);
  color: #fff8ec;
  font-size: .72rem;
  pointer-events: none;
}
.znak-prehrat {
  width: 0; height: 0;
  border-left: 7px solid #fff8ec;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

.bunka--zpracovava {
  display: grid; place-items: center;
  cursor: default;
}
.bunka-stitek {
  font-size: .72rem;
  color: var(--inkoust-2);
  background: var(--karta);
  padding: .3rem .7rem;
  border-radius: 999px;
  box-shadow: var(--stin-s);
  animation: pulz 2.2s ease-in-out infinite;
}
.stitek-pulz {
  display: inline-block;
  font-size: .8rem;
  color: #fff8ec;
  background: rgba(255, 248, 236, .16);
  padding: .35rem .9rem;
  border-radius: 999px;
  animation: pulz 2.2s ease-in-out infinite;
}
@keyframes pulz {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.galerie-prazdna,
.galerie-konec {
  text-align: center;
  font-family: var(--nadpis);
  font-style: italic;
  color: var(--inkoust-2);
  margin: 2.5rem 0;
}
#konec-hlidka { height: 1px; }

/* ------------------------------------------------- překryvný detail ------ */
.prekryv {
  position: fixed; inset: 0;
  z-index: 100;
  background: #14110e;
  touch-action: pan-y;
}
.prekryv[hidden] { display: none; }

.prekryv-pozadi {
  position: absolute; inset: -48px;
  background-position: center;
  background-size: cover;
  filter: blur(30px) brightness(.4) saturate(1.15);
  transform: scale(1.1);
}

.prekryv-telo {
  position: absolute; inset: 0;
  margin: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .4rem;
  padding: max(.75rem, env(safe-area-inset-top)) 0 max(.5rem, env(safe-area-inset-bottom));
  transition: transform .25s ease, opacity .25s ease;
}
.prekryv-telo.bez-prechodu { transition: none; }

.prekryv-media { display: contents; }
.prekryv-media img,
.prekryv-media video {
  max-width: 100vw;
  max-height: calc(100dvh - 6.5rem);
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: prolinani .35s ease both;
}
@keyframes prolinani {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.prekryv-zprava {
  color: #f3ece1;
  text-align: center;
  padding: 3rem 1.5rem;
}
.prekryv-zprava p { margin: 1rem 0 0; opacity: .8; }

.prekryv-popis {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  padding: .3rem 4rem .4rem;      /* ať se nepere se šipkami */
  color: #f3ece1;
  font-size: .9rem;
}
.prekryv-autor { font-weight: 600; }
.prekryv-cas   { opacity: .7; }

.prekryv-stahnout {
  color: #f3ece1;
  border: 1px solid rgba(243, 236, 225, .45);
  border-radius: 999px;
  padding: .5rem 1.1rem;
  min-height: 40px;
  display: inline-flex; align-items: center;
  font-size: .85rem;
  text-decoration: none;
}
.prekryv-stahnout:hover { border-color: var(--zlata-svet); color: var(--zlata-svet); }

/* tiché tlačítko „Odstranit z galerie" — vedle stahování, ne poplašné */
.prekryv-odebrat {
  background: none; border: 0;
  color: #f3ece1; opacity: .75;
  font-size: .85rem;
  min-height: 44px;
  padding: .5rem .7rem;
  display: inline-flex; align-items: center;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.prekryv-odebrat:hover { opacity: 1; color: var(--zlata-svet); }

/* decentní hláška dole (potvrzení odstranění, důvod chyby ze serveru);
   klidný pohyb ruší globální pravidlo prefers-reduced-motion v motiv.css */
.hlaska {
  position: fixed; left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 130;
  margin: 0;
  background: var(--karta); color: var(--inkoust);
  border: 1px solid var(--linka);
  border-radius: 999px;
  box-shadow: var(--stin-m);
  padding: .75rem 1.3rem;
  font-size: .92rem;
  max-width: min(92vw, 30rem);
  text-align: center;
  animation: hlaska-sem .35s ease both;
}
.hlaska.je-chyba { border-color: var(--chyba); color: var(--chyba); }
.hlaska[hidden] { display: none; }
@keyframes hlaska-sem {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.prekryv-zavrit {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  z-index: 5;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: rgba(20, 17, 14, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.prekryv-zavrit::before,
.prekryv-zavrit::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 2px;
  background: #fff8ec;
}
.prekryv-zavrit::before { transform: translate(-50%, -50%) rotate(45deg); }
.prekryv-zavrit::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.prekryv-sipka {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 76px;
  border: 0; border-radius: var(--r-m);
  background: rgba(20, 17, 14, .4);
  display: grid; place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.prekryv-sipka::before {
  content: '';
  width: 12px; height: 12px;
  border-right: 2px solid #fff8ec;
  border-bottom: 2px solid #fff8ec;
}
.prekryv-sipka--pred { left: 8px; }
.prekryv-sipka--pred::before { transform: rotate(135deg); margin-left: 5px; }
.prekryv-sipka--dal { right: 8px; }
.prekryv-sipka--dal::before  { transform: rotate(-45deg); margin-right: 5px; }
.prekryv-sipka:hover,
.prekryv-zavrit:hover { background: rgba(20, 17, 14, .7); }
.prekryv-sipka[disabled] { opacity: .3; cursor: default; }

/* detail jako samostatná stránka (/foto/{id} přímo) */
.strana-detail { overflow: hidden; }
.strana-detail .paticka { display: none; }

/* ------------------------------------------------ tlačítko Přehrát ------- */
.prehrat {
  flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--linka);
  border-radius: 999px;
  background: var(--karta);
  font: 600 .82rem/1 var(--text);
  color: var(--inkoust-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.prehrat:hover { border-color: var(--zlata-svet); color: var(--zlata-tmav); }
.prehrat svg { width: 14px; height: 14px; }
.prehrat[hidden] { display: none; }

/* ------------------------------------------------ promítání v galerii ---- */
.promitani {
  position: fixed; inset: 0;
  z-index: 120;                       /* nad vším hostovským, pod hláškou */
  background: #0d0b09;
  height: 100dvh;
}
.promitani[hidden] { display: none; }

/* dvě vrstvy — jedna nastupuje, druhá odchází */
.prom-vrstva {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.prom-vrstva.je-videt { opacity: 1; }

/* fotky na výšku bez černých pruhů: rozmazané pozadí z téže fotky */
.prom-pozadi {
  position: absolute; inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(.45) saturate(1.1);
  transform: scale(1.1);
}
.prom-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  animation: prom-tah 7s ease-in-out both;
  will-change: transform;
}
.prom-vrstva--zpet .prom-foto { animation-name: prom-tah-zpet; }
@keyframes prom-tah {
  from { transform: scale(1); }
  to   { transform: scale(1.05) translate(.6%, -.6%); }
}
@keyframes prom-tah-zpet {
  from { transform: scale(1.05) translate(-.6%, .6%); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .prom-foto { animation: none; }     /* bez Ken Burnse; prolínání ruší motiv.css */
}

/* jméno a čas v rohu — po chvíli zmizí, dotek je vrátí */
.prom-popis {
  position: absolute;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(.9rem, env(safe-area-inset-bottom));
  margin: 0;
  color: #f3ece1;
  font-size: .85rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
  opacity: .9;
  transition: opacity .4s ease;
  pointer-events: none;
}
.prom-zavrit { z-index: 5; transition: opacity .4s ease; }
.promitani.bez-ovladani .prom-popis,
.promitani.bez-ovladani .prom-zavrit { opacity: 0; pointer-events: none; }

/* ikona pauza/pokračovat — blikne a zmizí */
.prom-stav {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgba(13, 11, 9, .55);
  display: grid; place-items: center;
  color: #f3ece1;
  pointer-events: none;
  animation: prom-stav-mizeni .9s ease .5s both;
}
.prom-stav[hidden] { display: none; }
.prom-stav svg { width: 30px; height: 30px; }
@keyframes prom-stav-mizeni {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

/* ------------------------------------------------ okno přání písničky ---- */
.pisen-okno {
  position: fixed; inset: 0;
  z-index: 110;                 /* nad lištou i skokem, pod plovoucí hláškou */
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(20, 17, 14, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pisen-okno[hidden] { display: none; }

.pisen-karta {
  position: relative;
  width: min(100%, 26rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: var(--karta);
  border-radius: var(--r-l);
  box-shadow: var(--stin-l);
  padding: 1.6rem 1.4rem 1.3rem;
  animation: pisen-sem .3s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes pisen-sem {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.pisen-karta::before {          /* zlatá linka jako na kartě vzkazu */
  content: '';
  position: absolute; inset-inline: 0; top: 0;
  height: 3px;
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: linear-gradient(90deg, transparent, var(--zlata-svet), var(--zlata), var(--zlata-svet), transparent);
}
.pisen-karta h2 {
  font-size: 1.45rem;
  margin: 0 0 .35rem;
  padding-right: 2.4rem;        /* místo pro křížek */
}

.pisen-jako {
  margin: 0 0 .6rem;
  font-size: .85rem;
  color: var(--inkoust-2);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 .2rem;
}
.pisen-jako b { color: var(--inkoust); font-weight: 600; }
.pisen-zmena {
  border: 0; background: none;
  min-height: 44px;
  padding: .5rem .5rem;
  font: 400 .82rem/1.3 var(--text);
  color: var(--inkoust-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pisen-zmena:hover { color: var(--zlata-tmav); }

.pisen-popisek {
  display: block;
  margin: .8rem 0 .3rem;
  font: 600 .8rem/1.2 var(--text);
  color: var(--inkoust-2);
}
.pisen-popisek span { font-weight: 400; }
.pisen-karta .pole { min-height: 48px; }
.pisen-odeslat { margin-top: 1.1rem; }

.pisen-chyba {
  margin: .7rem 0 0;
  color: var(--chyba);
  font-size: .9rem;
}
.pisen-dik {
  margin: 0;
  padding: 1.6rem 0;
  text-align: center;
  font-family: var(--nadpis);
  font-size: 1.3rem;
  color: var(--zlata-tmav);
}
.pisen-pocet {
  margin: .8rem 0 0;
  text-align: center;
  font-family: var(--nadpis);
  font-style: italic;
  font-size: .92rem;
  color: var(--zlata-tmav);
}

.pisen-zavrit {
  position: absolute;
  top: .4rem; right: .4rem;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pisen-zavrit::before,
.pisen-zavrit::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 2px;
  background: var(--inkoust-2);
}
.pisen-zavrit::before { transform: translate(-50%, -50%) rotate(45deg); }
.pisen-zavrit::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.pisen-zavrit:hover::before,
.pisen-zavrit:hover::after { background: var(--inkoust); }

/* ------------------------------------------------ informační stránky ----- */
.informace-podnazev {
  font-size: .8rem;
  letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase;
  color: var(--inkoust-2);
  margin-bottom: .6rem;
}
.informace-nadpis { font-size: clamp(2rem, 8vw, 2.8rem); }
.informace-datum  { color: var(--zlata-tmav); letter-spacing: .12em; }
.karta-vzkaz--stred .tl { margin-top: .8rem; }

/* ----------------------------------------------------------- patička ----- */
.paticka {
  margin-top: 4rem;
  padding: 0 1rem calc(2.2rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: .85rem;
  color: var(--inkoust-2);
}
.paticka-pruh {
  width: min(280px, 60%);
  height: 1px;
  margin: 0 auto 1.4rem;
  background: linear-gradient(90deg, transparent, var(--zlata-svet), transparent);
}
.paticka a { color: inherit; text-decoration-color: var(--zlata-svet); }
.paticka a:hover { color: var(--zlata-tmav); }

/* podpis pořadatele — vizitka, ne banner: logo, klidná řada kontaktů, věta */
.paticka-logo { margin: 0 0 1rem; }
.paticka-logo a { display: inline-block; text-decoration: none; }
.paticka-logo img {
  width: clamp(150px, 22vw, 180px);
  height: auto;
  opacity: .92;
}
.paticka-logo a:hover img { opacity: 1; }

.paticka-text { margin: 0 0 .3rem; }

.paticka-kontakt {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 0 .3rem;
  margin: 0;
}
.paticka-kontakt > span,
.paticka-kontakt > a {
  display: inline-flex; align-items: center;
  min-height: 44px;               /* telefon i web jako pohodlný cíl pro palec */
  padding: 0 .35rem;
}
.paticka-del { color: var(--zlata-svet); }
.paticka-tel { white-space: nowrap; }

.paticka-veta {
  margin: .3rem 0 0;
  font-size: .78rem;
  color: var(--inkoust-2);
  opacity: .85;
}

/* ------------------------------------------------------------ pobídky ---- */
/* jedna věta, žádná okna — bingo hned, kniha po odeslání fotek */
.pobidka {
  margin: .2rem 0 .8rem;
  font-size: .88rem;
  color: var(--inkoust-2);
}
.pobidka-odkaz {
  border: 0; background: none; padding: 0;
  font: inherit; font-weight: 600;
  color: var(--zlata-tmav);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pobidka-odkaz:hover { color: var(--zlata); }

/* štítek splněného úkolu binga na dlaždici v mřížce */
.bunka-ukol {
  position: absolute;
  left: 6px; bottom: 6px;
  max-width: calc(100% - 12px);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(20, 15, 8, .6);
  color: var(--zlata-svet);
  font-size: .66rem;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

/* --------------------------------------------- panely (kniha, bingo…) ---- */
.panel {
  position: fixed; inset: 0;
  z-index: 105;                  /* nad lištou, pod okny s formuláři (110) */
  background: var(--papir);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.panel[hidden] { display: none; }
.panel-telo {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1rem calc(3rem + env(safe-area-inset-bottom, 0px));
}
.panel-telo--uzke { max-width: 560px; }
.panel-hlava {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0 .8rem;
}
.panel-hlava h2 { margin: 0; font-size: clamp(1.6rem, 6vw, 2.1rem); }
.panel-zavrit {
  flex: none;
  position: relative;
  width: 48px; height: 48px;
  border: 1px solid var(--linka);
  border-radius: 50%;
  background: var(--karta);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.panel-zavrit::before,
.panel-zavrit::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 2px;
  background: var(--inkoust-2);
}
.panel-zavrit::before { transform: translate(-50%, -50%) rotate(45deg); }
.panel-zavrit::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.panel-zavrit:hover { border-color: var(--zlata-svet); }
.panel-uvod { margin: 0 0 .6rem; color: var(--inkoust-2); font-size: .92rem; }

/* --------------------------------------------------------- kniha hostů --- */
.kniha-psani {
  background: var(--karta);
  border-radius: var(--r-l);
  box-shadow: var(--stin-s);
  padding: 1.1rem 1.1rem 1.2rem;
  margin-bottom: 1.6rem;
}
.kniha-pole { resize: vertical; min-height: 6rem; }
.kniha-podpis-hlava {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem;
}
.kniha-podpis-hlava .pisen-zmena { margin: 0; }
.kniha-platno {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  border: 1px dashed var(--linka);
  border-radius: var(--r-m);
  background:
    linear-gradient(transparent calc(72% - 1px), var(--linka) calc(72% - 1px), var(--linka) 72%, transparent 72%),
    var(--papir);
  touch-action: none;            /* při podpisu se stránka nesmí hýbat */
  cursor: crosshair;
}
.kniha-fotky-rada {
  display: flex; gap: .45rem;
  overflow-x: auto;
  padding-bottom: .3rem;
  scrollbar-width: none;
}
.kniha-fotky-rada::-webkit-scrollbar { display: none; }
.kniha-fotka {
  flex: none;
  width: 64px; height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--papir-tmav);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kniha-fotka img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kniha-fotka.je-vybrana { border-color: var(--zlata); box-shadow: var(--stin-s); }
#kniha-odeslat { margin-top: 1.1rem; }

/* vzkazy jako polaroidy */
.kniha-vzkazy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.vzkaz-karta {
  background: #fffdf9;
  border-radius: 3px;
  box-shadow: var(--stin-m);
  padding: .7rem .7rem 1rem;
  display: flex; flex-direction: column;
  gap: .55rem;
}
.vzkaz-karta:nth-child(odd)  { transform: rotate(-.7deg); }
.vzkaz-karta:nth-child(even) { transform: rotate(.6deg); }
.vzkaz-foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--papir-tmav);
}
.vzkaz-text {
  margin: 0;
  font-family: var(--nadpis);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--inkoust);
  overflow-wrap: anywhere;
}
.vzkaz-podpis-svg {
  width: min(100%, 220px);
  height: auto;
  color: var(--inkoust);
  margin-top: -.2rem;
}
.vzkaz-jmeno {
  font-size: .82rem;
  color: var(--inkoust-2);
  font-weight: 600;
}
.kniha-dalsi { display: block; margin: 1.4rem auto 0; }

/* ------------------------------------------------------------ fotobingo -- */
.bingo-skore {
  margin: 0 0 1rem;
  font-family: var(--nadpis);
  font-style: italic;
  color: var(--zlata-tmav);
}
.bingo-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .7rem;
}
.bingo-karta {
  position: relative;
  background: var(--karta);
  border: 1px solid var(--linka);
  border-radius: var(--r-m);
  padding: .7rem;
  display: flex; flex-direction: column;
  gap: .5rem;
  min-height: 9.5rem;
}
.bingo-nahled {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-s);
  background: var(--papir-tmav);
  overflow: hidden;
}
.bingo-nahled img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bingo-karta p { margin: 0; font-size: .88rem; font-weight: 600; flex: 1; }
.bingo-stav { font-size: .76rem; color: var(--inkoust-2); }

/* splnil někdo jiný: jemné odškrtnutí; moje: zlaté, ať je to na první pohled */
.bingo-karta.je-splnene::after,
.bingo-karta.je-moje::after {
  content: '';
  position: absolute;
  top: .55rem; right: .55rem;
  width: 22px; height: 22px;
  border-radius: 50%;
  background:
    linear-gradient(var(--inkoust-2), var(--inkoust-2));
  -webkit-mask: none;
}
.bingo-karta.je-splnene::after {
  background: rgba(42, 37, 32, .55);
}
.bingo-karta.je-moje::after {
  background: linear-gradient(135deg, var(--zlata-svet), var(--zlata));
}
.bingo-karta.je-splnene::before,
.bingo-karta.je-moje::before {
  content: '';
  position: absolute;
  top: calc(.55rem + 7px); right: calc(.55rem + 5px);
  width: 11px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  z-index: 1;
}
.bingo-karta.je-moje {
  border-color: var(--zlata);
  box-shadow: var(--stin-s);
}
.bingo-karta.je-moje .bingo-stav { color: var(--zlata-tmav); font-weight: 600; }

/* okénko výběru úkolu */
.bingo-vyber-seznam {
  display: flex; flex-direction: column;
  gap: .35rem;
  margin-top: .8rem;
  max-height: min(55dvh, 24rem);
  overflow-y: auto;
}
.bingo-vyber-tl {
  text-align: left;
  min-height: 48px;
  padding: .6rem .9rem;
  border: 1px solid var(--linka);
  border-radius: var(--r-m);
  background: var(--papir);
  font: 600 .88rem/1.3 var(--text);
  color: var(--inkoust);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bingo-vyber-tl:hover { border-color: var(--zlata-svet); color: var(--zlata-tmav); }
.bingo-vyber-tl:disabled { opacity: .6; }

/* ---------------------------------------------------------- program dne -- */
.program {
  list-style: none;
  margin: .5rem 0 0; padding: 0;
}
.program-bod {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem 1.4rem 1fr;
  gap: 0 .5rem;
  padding: 0 0 1.5rem;
}
.program-cas {
  font: 600 .88rem/1.5 var(--text);
  color: var(--zlata-tmav);
  text-align: right;
}
.program-tecka {
  position: relative;
  display: block;
}
.program-tecka::before {          /* jemná zlatá linka mezi body */
  content: '';
  position: absolute;
  left: 50%; top: 1.2rem; bottom: -.2rem;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(var(--zlata-svet), var(--linka));
}
.program-bod:last-child .program-tecka::before { display: none; }
.program-tecka::after {
  content: '';
  position: absolute;
  left: 50%; top: .38rem;
  width: 9px; height: 9px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid var(--zlata);
  background: var(--papir);
}
.program-text b {
  font-family: var(--nadpis);
  font-size: 1.08rem;
  font-weight: 700;
}
.program-text p {
  margin: .15rem 0 0;
  font-size: .88rem;
  color: var(--inkoust-2);
}

/* minulé ztlumit, právě probíhající zvýraznit — bez blikání a odpočtů */
.program-bod.je-minule { opacity: .45; }
.program-bod.je-minule .program-tecka::after {
  border-color: var(--linka);
  background: var(--linka);
}
.program-bod.je-ted .program-tecka::after {
  background: linear-gradient(135deg, var(--zlata-svet), var(--zlata));
  border-color: var(--zlata);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--zlata-svet) 30%, transparent);
}
.program-bod.je-ted .program-text b { color: var(--zlata-tmav); }

/* ------------------------------------ kniha: fotka přímo z telefonu ------ */
.kniha-z-mobilu {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 48px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--zlata-svet);
  border-radius: 999px;
  background: none;
  color: var(--zlata-tmav);
  font: 600 .85rem/1 var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kniha-z-mobilu:hover {
  border-color: var(--zlata);
  background: color-mix(in srgb, var(--zlata-svet) 14%, transparent);
}
.kniha-z-mobilu:disabled { opacity: .55; cursor: default; }
.kniha-z-mobilu svg { width: 17px; height: 17px; flex: none; }

.kniha-nebo {
  margin: .7rem 0 .35rem;
  font-size: .8rem;
  color: var(--inkoust-2);
}

/* náhled vybrané fotky s možností odebrání (jen ze vzkazu) */
.kniha-vybrana {
  display: flex; align-items: center; gap: .8rem;
  margin: .2rem 0 .4rem;
}
.kniha-vybrana-nahled {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: var(--r-s);
  border: 2px solid var(--zlata);
  background: var(--papir-tmav);
}
.kniha-vybrana .pisen-zmena { margin: 0; }

/* průběh nahrávání fotky ke vzkazu */
.kniha-foto-stav {
  margin: .3rem 0 .2rem;
  font-size: .85rem;
  color: var(--inkoust-2);
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
}
.kniha-foto-stav[hidden] { display: none; }
.kniha-foto-stav.je-chyba { color: var(--chyba); }
.kniha-prubeh { margin: 0 0 .5rem; }

/* ---------------------------------------- odpočet před začátkem akce ----- */
/* Hvězda úvodní obrazovky: velké číslo přes fotku, jména pod ním. */
.odpocet {
  margin-bottom: clamp(.9rem, 3.5vh, 1.8rem);
  padding: 1.2rem 2rem 1.4rem;
  background: radial-gradient(closest-side, rgba(24, 18, 10, .38), transparent 78%);
}
.odpocet[hidden] { display: none; }

/* „Zítra!" / „Dneska!" nad čísly */
.odpocet-slovni {
  margin: 0 0 .3rem;
  font-family: var(--nadpis);
  font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 5rem);
  line-height: 1.05;
  color: #fff8ec;
  text-shadow: 0 4px 44px rgba(10, 7, 3, .6), 0 1px 6px rgba(10, 7, 3, .4);
}
.odpocet-slovni[hidden] { display: none; }

/* skupiny 20 DNÍ · 19 HODIN · 42 MINUT · 07 VTEŘIN — dny největší,
   vteřiny nejmenší; tabulární číslice a pevná šířka, ať nic neposkakuje */
.odpocet-skupiny {
  display: flex;
  justify-content: center;
  align-items: baseline;             /* číslice na společném účaří */
  gap: clamp(.8rem, 3.4vw, 1.8rem);
}
.odpocet-skupina {
  display: flex; flex-direction: column;
  align-items: center;
}
.odpocet-skupina b {
  font-family: var(--nadpis);
  font-weight: 700;
  font-size: clamp(1.7rem, 7.5vw, 4.2rem);
  line-height: 1;
  min-width: 2ch;                    /* osmička i jednička drží stejné místo */
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #fff8ec;
  text-shadow: 0 4px 44px rgba(10, 7, 3, .6), 0 1px 6px rgba(10, 7, 3, .4);
}
.odpocet-skupina--hlavni b { font-size: clamp(2.6rem, 12vw, 7.5rem); }
.odpocet-skupina[data-jednotka="vteriny"] b {
  font-size: clamp(1.25rem, 5.5vw, 3rem);   /* tiká, ale nekřičí */
  opacity: .92;
}
.odpocet-skupina i {
  font-style: normal;
  margin-top: .4rem;
  font-size: clamp(.58rem, 1.8vw, .8rem);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: #fff8ec;
  opacity: .88;
  white-space: nowrap;
}

/* popisek „do obřadu" pod celým odpočtem */
.odpocet-popis {
  margin: .7rem 0 0;
  font-size: clamp(.78rem, 2.4vw, 1rem);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: #fff8ec;
  opacity: .92;
}

.odpocet-prolnuti { animation: odpocet-prolnuti .5s ease both; }
@keyframes odpocet-prolnuti {
  from { opacity: .15; }
  to   { opacity: 1; }
}
/* jména se před akcí drobně upozadí, hvězdou je číslo */
.hero-nazev--pod-odpoctem { font-size: clamp(1.9rem, 6.5vw, 3.2rem); }

/* pozvánka pod hero obrázkem */
.pred-karta { margin-top: -3.2rem; }
.pred-pozn {
  margin: .7rem 0 0;
  font-size: .88rem;
  color: var(--inkoust-2);
}

/* ------------------------------------------- natočení vzkazu (kamera) ---- */
.kamera-karta { padding: 1rem; }
.kamera-obraz {
  position: relative;
  border-radius: var(--r-m);
  overflow: hidden;
  background: #14110e;
  aspect-ratio: 3 / 4;
  max-height: min(58dvh, 30rem);
}
.kamera-nahled {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.kamera-nahled[hidden] { display: none; }
.kamera-cas {
  position: absolute;
  top: .6rem; right: .6rem;
  margin: 0;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(179, 70, 47, .9);   /* ubývající čas natáčení */
  color: #fff;
  font: 600 .85rem/1 var(--text);
  font-variant-numeric: tabular-nums;
}
.kamera-cas[hidden] { display: none; }
.kamera-pozn {
  margin: .6rem 0 0;
  font-size: .82rem;
  color: var(--inkoust-2);
}
.kamera-listy {
  display: flex; gap: .5rem;
  margin-top: .8rem;
}
.kamera-listy .tl { flex: 1; min-height: 48px; }
.kamera-tl {
  background: var(--papir);
  color: var(--inkoust);
  border: 1px solid var(--linka);
}
.kamera-tl:hover { border-color: var(--zlata-svet); }

/* řada voleb v knize (fotka / natočit) */
.kniha-volby-rada { display: flex; flex-wrap: wrap; gap: .5rem; }

/* video vzkaz vybraný ke vzkazu + karta v knize */
.kniha-vybrana.je-video .kniha-vybrana-nahled { border-style: dashed; }
.kniha-vybrana.je-video::after {
  content: 'video';
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inkoust-2);
}
.vzkaz-karta video.vzkaz-foto { width: 100%; background: #14110e; }
.vzkaz-priprava {
  margin: 0;
  padding: 1.6rem .5rem;
  text-align: center;
  background: var(--papir-tmav);
  border-radius: 3px;
  font-size: .8rem;
  color: var(--inkoust-2);
}