/* POSLEDNÍ POŠTA Z ROVENSKA
   Paleta je odvozená z materiálu hry: stránky jsou tištěné poštovní červení,
   jediné teplé světlo v noci je poštmistrova lampa, všechno ostatní je formulář
   na zažloutlém papíře. Bílá se tu nevyskytuje — ničí adaptaci oka na tmu. */

:root {
  --noc:      #0B0705;   /* papír ve tmě, teplá čerň, ne neutrální */
  --noc2:     #150E0A;
  --linka:    #2E1D14;
  --inkoust:  #D8452B;   /* poštovní červeň — barva tištěné stránky */
  --razitko:  #7A1F12;   /* hluboká razítková červeň */
  --lampa:    #E8B33A;   /* poštmistrova lampa — jen hodiny a to, co hoří */
  --papir:    #C9BBA0;   /* zažloutlý formulář */
  --papir2:   #8A7C66;
  --plomba:   #5E8A63;   /* jediná nečervená — „v pořádku" */

  --uzke: 'Arial Narrow', 'Liberation Sans Narrow', 'Helvetica Neue', system-ui, sans-serif;
  --cislo: ui-monospace, 'SF Mono', 'DejaVu Sans Mono', 'Liberation Mono', monospace;
  --telo: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
/* musí přebít .vaha-pruh{display:flex} a spol. — jinak hidden nic neudělá */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--noc);
  color: var(--papir);
  font-family: var(--telo);
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

/* --- typografie formuláře --- */
.stitek {
  font-family: var(--uzke);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--papir2);
  font-weight: 700;
}
h1, h2, h3 {
  font-family: var(--uzke);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  margin: 0;
}
h1 { font-size: 1.35rem; color: var(--inkoust); }
h2 { font-size: 1rem; color: var(--papir); }
.cislo { font-family: var(--cislo); font-variant-numeric: tabular-nums; }

/* --- hlava: hodiny --- */
.hlava {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, var(--noc2) 0%, var(--noc) 100%);
  border-bottom: 1px solid var(--linka);
  padding: 10px 14px 12px;
}
.hodiny {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.tplus {
  font-family: var(--cislo);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 13vw, 4.2rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--lampa);
  font-weight: 700;
}
.tplus.pauza { color: var(--razitko); }
.wall { font-family: var(--cislo); font-size: 1.5rem; color: var(--papir2); }

.dalsi {
  margin-top: 8px; display: flex; align-items: baseline; gap: 10px;
  border-top: 1px dashed var(--linka); padding-top: 8px;
}
.dalsi .odpocet {
  font-family: var(--cislo); font-size: 1.6rem; color: var(--inkoust); font-weight: 700;
  min-width: 4.2ch;
}
.dalsi .nazev { font-family: var(--uzke); text-transform: uppercase; letter-spacing: .1em; font-size: .95rem; }
.dalsi.hori .odpocet, .dalsi.hori .nazev { color: var(--lampa); }
@keyframes tep { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.dalsi.hori { animation: tep 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dalsi.hori { animation: none; } }

/* --- role poštovních útržků: svislá páska událostí --- */
.paska { list-style: none; margin: 0; padding: 0; }
.utrzek {
  position: relative;
  display: grid; grid-template-columns: 4.4ch 1fr; gap: 12px;
  padding: 11px 14px 11px 14px;
  border-bottom: 1px dashed var(--linka);
}
.utrzek::before {  /* perforace */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background-image: radial-gradient(circle, var(--linka) 1px, transparent 1px);
  background-size: 7px 1px;
}
.utrzek .t { font-family: var(--cislo); color: var(--papir2); font-size: .95rem; text-align: right; }
.utrzek .co { font-family: var(--uzke); text-transform: uppercase; letter-spacing: .09em; }
.utrzek .detail { font-size: .84rem; color: var(--papir2); line-height: 1.4; margin-top: 3px; }
.utrzek.hotovo { opacity: .38; }
.utrzek.hotovo .co { text-decoration: line-through; text-decoration-color: var(--razitko); }
.utrzek.ted { background: rgba(232,179,58,.07); border-left: 3px solid var(--lampa); }
.utrzek.ted .co, .utrzek.ted .t { color: var(--lampa); }
.utrzek.klic .co { color: var(--inkoust); }
.utrzek.kontrola .co { color: var(--papir2); font-weight: 400; letter-spacing: .06em; }

/* --- sekce --- */
section { border-top: 1px solid var(--linka); padding: 16px 14px 20px; }
section > h2 { margin-bottom: 12px; }
.podnadpis { color: var(--papir2); font-size: .85rem; margin: -6px 0 12px; }

/* --- tabule poloh --- */
.radek {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linka);
}
.radek .kdo { font-family: var(--uzke); text-transform: uppercase; letter-spacing: .1em; font-size: .95rem; }
.radek .kde { font-size: .82rem; color: var(--papir2); }
.radek.pozde { background: rgba(216,69,43,.09); }
.radek.pozde .kdo { color: var(--inkoust); }
.znak {
  font-family: var(--cislo); font-size: .78rem; padding: 3px 7px;
  border: 1px solid var(--linka); color: var(--papir2); white-space: nowrap;
}
.znak.ok { color: var(--plomba); border-color: rgba(94,138,99,.5); }
.znak.spatne { color: var(--inkoust); border-color: rgba(216,69,43,.5); }

/* --- tlačítka: velká, do rukavic --- */
button, .tlac {
  font-family: var(--uzke); text-transform: uppercase; letter-spacing: .12em;
  font-size: .9rem; font-weight: 700;
  background: transparent; color: var(--papir);
  border: 1px solid var(--razitko); border-radius: 0;
  padding: 13px 16px; min-height: 48px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
button:active { background: rgba(216,69,43,.16); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--lampa); outline-offset: 2px; }
button.hlavni { border-color: var(--inkoust); color: var(--inkoust); }
button.lampa  { border-color: var(--lampa); color: var(--lampa); }
button.maly { padding: 8px 10px; min-height: 38px; font-size: .78rem; letter-spacing: .08em; }
.rada { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- stránky --- */
.box-hlava {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 18px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--razitko);
}
.box-hlava .nazev { font-family: var(--uzke); text-transform: uppercase; letter-spacing: .12em; color: var(--inkoust); }
.box-hlava .vzdal { font-family: var(--cislo); font-size: .8rem; color: var(--papir2); }

.stranka {
  display: grid; grid-template-columns: 4.5ch 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--linka); cursor: pointer;
}
.stranka .id { font-family: var(--cislo); font-weight: 700; }
.stranka .txt { font-size: .82rem; line-height: 1.35; color: var(--papir2); }
.stranka .meta { font-family: var(--cislo); font-size: .72rem; color: var(--papir2); }
.stranka[data-stav="brasna"] { background: rgba(94,138,99,.10); }
.stranka[data-stav="brasna"] .id, .stranka[data-stav="brasna"] .txt { color: var(--papir); }
.stranka[data-stav="mrtva"] { opacity: .32; }
.stranka[data-stav="mrtva"] .txt { text-decoration: line-through; }
.stranka[data-stav="zastava"] { background: rgba(232,179,58,.09); }
.stranka[data-stav="kapsa"] { background: rgba(216,69,43,.06); }
.stav-znak {
  font-family: var(--uzke); text-transform: uppercase; letter-spacing: .08em;
  font-size: .66rem; padding: 4px 6px; border: 1px solid var(--linka); white-space: nowrap;
}

/* --- váha / součet --- */
.vaha-pruh {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--noc2); border-top: 1px solid var(--razitko);
  padding: 10px 14px; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
}
.vaha-pruh .velke { font-family: var(--cislo); font-size: 1.9rem; font-weight: 700; color: var(--plomba); }
.vaha-pruh .velke.moc { color: var(--inkoust); }
.vaha-pruh .chybi { color: var(--inkoust); font-family: var(--uzke); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }

/* --- mapa --- */
.mapa-ram { position: relative; background: var(--noc2); border: 1px solid var(--linka); }
svg.mapa { display: block; width: 100%; height: 62vh; touch-action: none; }
svg.mapa .bud   { fill: #1E1410; stroke: #2E1D14; stroke-width: .6; }
svg.mapa .ces-r { stroke: #4A3527; stroke-width: 2.4; fill: none; stroke-linecap: round; }
svg.mapa .ces-t { stroke: #34241A; stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
svg.mapa .ces-p { stroke: #34241A; stroke-width: 1; fill: none; stroke-dasharray: 2 4; }
svg.mapa .st circle { fill: none; stroke: var(--inkoust); stroke-width: 1.6; }
svg.mapa .st text   { fill: var(--inkoust); font: 700 11px var(--cislo); text-anchor: middle; }
svg.mapa .st .lbl   { fill: var(--papir2); font: 700 9px var(--uzke); letter-spacing: .08em; }
svg.mapa .st.naves circle { stroke: var(--lampa); } svg.mapa .st.naves text { fill: var(--lampa); }
svg.mapa .st.zakaz circle { stroke: #4A3527; stroke-dasharray: 3 3; } svg.mapa .st.zakaz text { fill: #4A3527; }
svg.mapa .hrac circle { fill: var(--plomba); stroke: var(--noc); stroke-width: 1.5; }
svg.mapa .hrac.stary circle { fill: var(--razitko); }
svg.mapa .hrac text { fill: var(--papir); font: 700 9px var(--uzke); letter-spacing: .06em; text-anchor: middle; }
svg.mapa .acc { fill: rgba(94,138,99,.10); stroke: none; }
svg.mapa .me { fill: var(--lampa); stroke: var(--noc); stroke-width: 1.5; }

/* --- text --- */
.pravidlo { padding: 9px 0 9px 16px; border-left: 2px solid var(--razitko); margin-bottom: 9px; font-size: .9rem; }
.citat { font-size: .95rem; line-height: 1.5; color: var(--papir); font-style: italic; }
.mala { font-size: .8rem; color: var(--papir2); }
a { color: var(--inkoust); }

/* --- rozcestník na úvodní straně --- */
.dvere {
  display: block; border: 1px solid var(--razitko); padding: 22px 18px; margin-bottom: 12px;
  text-decoration: none; color: var(--papir);
}
.dvere:active { background: rgba(216,69,43,.1); }
.dvere .nadpis { font-family: var(--uzke); text-transform: uppercase; letter-spacing: .16em; font-size: 1.15rem; color: var(--inkoust); }
.dvere .popis { font-size: .86rem; color: var(--papir2); margin-top: 6px; }

.obal { max-width: 780px; margin: 0 auto; }

/* nav */
.nav { position: sticky; top: 0; z-index: 40; display: flex; background: var(--noc2); border-bottom: 1px solid var(--linka); }
.nav button {
  flex: 1; border: none; border-right: 1px solid var(--linka); border-radius: 0;
  padding: 12px 4px; font-size: .68rem; letter-spacing: .08em; color: var(--papir2); min-height: 44px;
}
.nav button[aria-selected="true"] { color: var(--lampa); box-shadow: inset 0 -2px 0 var(--lampa); }
.panel[hidden] { display: none; }