/* Pergamenový / středověký motiv */
:root {
  --pergamen: #f4e9d0;
  --pergamen-tmavy: #e8d8b0;
  --inkoust: #3a2c1a;
  --hneda: #8a5a2b;
  --hneda-tmava: #5e3c18;
  --zelena: #6b8e4e;
  --cervena: #b5462f;
  --okraj: #c9b285;
  --stin: rgba(60, 40, 15, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  color: var(--inkoust);
  background:
    radial-gradient(circle at 20% 10%, #fbf3dd, transparent 60%),
    radial-gradient(circle at 80% 90%, #efe1c0, transparent 55%),
    var(--pergamen);
  min-height: 100vh;
}

h1, h2, h3 { font-weight: 700; letter-spacing: .3px; }
.muted { color: #9a866a; font-size: .8em; font-weight: normal; }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 10px 18px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--hneda), var(--hneda-tmava));
  color: var(--pergamen);
  box-shadow: 0 2px 8px var(--stin);
  position: sticky; top: 0; z-index: 5;
}
.topbar-titul { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 1.5rem; line-height: 1.1; }
.podtitul { font-size: .95rem; font-style: italic; color: #f0dca8; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.stitek {
  background: rgba(255,255,255,.15); padding: 4px 12px; border-radius: 20px;
  font-size: .95rem; white-space: nowrap;
}
.stitek-umrti { background: rgba(181,70,47,.35); }
.stitek-sezona { background: rgba(255,255,255,.22); font-weight: 700; }
#nova-hra {
  cursor: pointer; border: none; border-radius: 6px;
  background: var(--pergamen); color: var(--hneda-tmava);
  padding: 6px 14px; font-family: inherit; font-weight: 700;
}
#nova-hra:hover { background: #fff; }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 9px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
  color: var(--pergamen); text-decoration: none; font-weight: 700; font-size: .85rem;
}
.lang-switch:hover { background: rgba(255,255,255,.18); }

/* HUD se zdroji */
.hud {
  max-width: 1180px; margin: 14px auto 0; padding: 0 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px;
}
.metr {
  background: var(--pergamen-tmavy); border: 1px solid var(--okraj);
  border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 3px var(--stin);
}
.metr-hlava { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: 5px; }
.metr-hlava strong { font-size: 1rem; }
.metr-bar { height: 8px; background: #d8c49a; border-radius: 5px; overflow: hidden; }
.metr-fill { height: 100%; transition: width .4s; }
.metr-nizko { animation: puls 1s infinite; border-color: var(--cervena); }
@keyframes puls { 50% { box-shadow: 0 0 0 3px rgba(181,70,47,.25); } }
.metr-podtext { font-size: .8rem; color: var(--hneda-tmava); margin-top: 6px; font-weight: 700; }
.metr-blahobyt { background: #efe6cf; }

main { max-width: 1180px; margin: 0 auto; padding: 18px; }

.panel {
  background: var(--pergamen-tmavy);
  border: 1px solid var(--okraj);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px var(--stin);
}
.panel h2 { margin: 0 0 12px; border-bottom: 2px solid var(--okraj); padding-bottom: 6px; }

.horni { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.horni .panel { margin-bottom: 0; }
@media (max-width: 860px) { .horni { grid-template-columns: 1fr; } }

/* Mapa */
.mapa {
  display: grid; gap: 3px; aspect-ratio: 10 / 8;
  background: var(--zelena); border-radius: 8px; padding: 4px;
}
.dlazdice {
  display: flex; align-items: center; justify-content: center;
  background: #7fa05c; border-radius: 4px;
  font-size: clamp(11px, 2.2vw, 22px);
  transition: transform .08s;
}
.dlazdice:hover { transform: scale(1.12); z-index: 1; }
.dlazdice.tloustka-pole { background: #c9a44a; }
.dlazdice.t-les { background: #4d6b39; }
.dlazdice.t-rybnik { background: #5b86a8; }
.dlazdice.t-pastvina { background: #86a85b; }
.dlazdice.budova { background: #b88a52; }
.dlazdice.opusteno { filter: grayscale(.7) brightness(.75); outline: 2px solid var(--cervena); }
.dlazdice-detail {
  margin-top: 10px; font-size: .9rem; min-height: 1.4em;
  color: var(--hneda-tmava); font-style: italic;
}

/* Herní panel — událost */
.hra-panel { display: flex; }
.udalost { width: 100%; }
.udalost-prazdno, .udalost-konec { text-align: center; padding: 18px 6px; }

/* Záblesky ze vsi (intro na trhu) */
.flash-panel {
  background: #fdf7e6; border: 1px solid var(--okraj); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 14px; text-align: left;
  box-shadow: 0 1px 4px var(--stin);
}
.flash-nadpis {
  font-weight: 700; text-align: center; color: var(--hneda-tmava);
  margin-bottom: 8px; font-size: .95rem; letter-spacing: .3px;
}
.flash-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 8px; margin-bottom: 7px;
  font-size: .96rem; line-height: 1.35; animation: flashin .35s ease;
}
.flash-item:last-child { margin-bottom: 0; }
.flash-ikona { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.flash-dobra { background: #eef3df; border-left: 4px solid var(--zelena); }
.flash-smula { background: #f6efd6; border-left: 4px solid #d9a441; }
.flash-smrt  { background: #f6e2dc; border-left: 4px solid var(--cervena); font-weight: 600; }
.flash-smrt .flash-ikona { animation: flashpuls 1.4s ease infinite; }
@keyframes flashin { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes flashpuls { 50% { transform: scale(1.18); } }

/* Trh a robota */
.trh {
  background: #fdf7e6; border: 1px solid var(--okraj); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 14px; text-align: left;
}
.trh-nadpis { font-weight: 700; margin-bottom: 8px; }
.trh-akce { display: flex; flex-direction: column; gap: 6px; }
.trh-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  cursor: pointer; font-family: inherit; font-weight: 700;
  background: #f4e4c2; border: 1px solid var(--okraj); border-radius: 8px;
  padding: 8px 10px; transition: transform .08s, border-color .08s;
}
.trh-btn:hover:not(:disabled) { transform: translateX(3px); border-color: var(--hneda); }
.trh-btn:disabled { opacity: .45; cursor: not-allowed; }
.trh-ef { font-size: .8rem; color: var(--hneda-tmava); font-weight: 700; white-space: nowrap; }
.trh-zavreno { text-align: center; font-style: italic; color: var(--hneda-tmava); }
.udalost-ikona { font-size: 2.8rem; }
.hlavni-tlacitko {
  cursor: pointer; border: none; border-radius: 8px; margin: 10px 0;
  background: var(--hneda); color: var(--pergamen);
  padding: 12px 22px; font-family: inherit; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 2px 6px var(--stin);
}
.hlavni-tlacitko:hover { background: var(--hneda-tmava); }

.udalost-karta { border-radius: 10px; padding: 14px; border: 2px solid var(--okraj); }
.karta-dobra { background: #eef3df; border-color: #9fbf6e; }
.karta-spatna { background: #f6e2dc; border-color: #d08a72; }
.karta-neutral { background: #f4eed5; border-color: #d8c178; }
.udalost-hlava { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.udalost-hlava h3 { margin: 2px 0 0; }
.udalost-typ { font-size: .78rem; color: var(--hneda-tmava); font-weight: 700; }
.udalost-popis { font-size: .95rem; line-height: 1.45; }
.volby { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.volba {
  cursor: pointer; text-align: left; border: 1px solid var(--okraj);
  background: #fdf7e6; border-radius: 8px; padding: 10px 12px;
  font-family: inherit; display: flex; flex-direction: column; gap: 4px;
  transition: transform .08s, box-shadow .08s, border-color .08s;
}
.volba:hover { transform: translateX(3px); border-color: var(--hneda); box-shadow: 0 2px 6px var(--stin); }
.volba-text { font-weight: 700; font-size: .95rem; }
.volba-efekty { font-size: .82rem; color: var(--hneda-tmava); letter-spacing: .5px; }
.volba-cena { font-size: .8rem; font-weight: 700; color: var(--hneda-tmava); }
.volba-blok { opacity: .55; cursor: not-allowed; background: #efe6cf; }
.volba-blok:hover { transform: none; box-shadow: none; border-color: var(--okraj); }
.volba-blok .volba-cena { color: var(--cervena); }
.volba-varovani { font-size: .8rem; font-weight: 700; color: var(--cervena); }

/* Karty obyvatel */
.obyvatele {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.karta {
  background: #f6ecd2; border: 1px solid var(--okraj); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.karta:hover { transform: translateY(-3px); box-shadow: 0 4px 10px var(--stin); }
.karta.mrtvy { filter: grayscale(.8); opacity: .6; }
.karta.mrtvy .karta-jmeno { text-decoration: line-through; }
.karta-hlava { display: flex; align-items: center; gap: 8px; }
.karta-ikona { font-size: 1.6rem; }
.karta-jmeno { font-weight: 700; line-height: 1.1; }
.karta-role { font-size: .8rem; color: var(--hneda); }
.karta-stav { font-size: .78rem; margin-top: 8px; color: var(--hneda-tmava); font-style: italic; min-height: 1.2em; }

/* Kronika sezóny */
.kronika-log { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }
.log-radek {
  background: #fdf7e6; border-left: 5px solid var(--okraj);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 8px;
}
.log-dobra { border-left-color: var(--zelena); }
.log-spatna { border-left-color: var(--cervena); }
.log-neutral { border-left-color: #d9a441; }
.log-banner {
  background: linear-gradient(90deg, var(--hneda), var(--hneda-tmava));
  color: var(--pergamen); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px;
  font-size: .92rem; text-align: center;
}
.log-banner .muted { color: #e8d8b0; }
.log-trh { border-left-color: #c9a44a; background: #fbf1d8; }
.log-hlava { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem; }
.log-kolo { font-weight: 700; color: var(--hneda); white-space: nowrap; }
.log-rozhodnuti { font-size: .88rem; margin: 4px 0; font-weight: 600; }
.log-vysledek { font-size: .88rem; font-style: italic; color: var(--hneda-tmava); }
.log-hlaska { font-size: .86rem; margin-top: 3px; }
.log-stav { margin-top: 6px; font-size: .76rem; }

/* Modal */
.modal {
  position: fixed; inset: 0; background: rgba(40,28,12,.55);
  display: flex; align-items: center; justify-content: center; z-index: 20;
}
.modal.skryto { display: none; }
.modal-box {
  background: var(--pergamen); border: 2px solid var(--hneda);
  border-radius: 12px; padding: 22px 26px; max-width: 460px; width: 90%;
  position: relative; box-shadow: 0 8px 30px rgba(0,0,0,.3);
  max-height: 88vh; overflow-y: auto;
}
.modal-zavrit {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 1.2rem; cursor: pointer; color: var(--hneda-tmava);
}
.modal-obsah-hlava { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.modal-obsah-hlava .ikona { font-size: 2.4rem; }
.modal h3 { margin: 14px 0 6px; }

/* Setup nové hry */
.setup-box { text-align: center; }
.setup-box h3 { margin: 16px 0 8px; }
.setup-volby { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.setup-volba {
  flex: 1 1 0; min-width: 110px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fdf7e6; border: 2px solid var(--okraj); border-radius: 10px;
  padding: 12px 10px; transition: border-color .1s, transform .1s, background .1s;
}
.setup-volba:hover { transform: translateY(-2px); }
.setup-volba.vybrano { border-color: var(--hneda); background: #fff3d8; box-shadow: 0 2px 8px var(--stin); }
.setup-volba strong { font-size: 1rem; }
.setup-ikona { font-size: 1.8rem; }

/* Intro */
.intro-box { text-align: center; max-width: 540px; }
.intro-ikona { font-size: 3rem; }
.intro-box h2 { margin: 6px 0 14px; font-size: 1.6rem; }
.intro-text { text-align: left; }
.intro-text p { margin: 0 0 12px; line-height: 1.6; }
.intro-claim {
  text-align: center; font-weight: 700; font-size: 1.15rem; color: var(--cervena);
  font-style: italic; margin-top: 16px !important;
}

/* Vedlejší tlačítko */
.vedlejsi-tlacitko {
  cursor: pointer; border: 1px solid var(--hneda); border-radius: 8px;
  background: var(--pergamen); color: var(--hneda-tmava);
  padding: 11px 18px; font-family: inherit; font-weight: 700; font-size: .98rem;
}
.vedlejsi-tlacitko:hover { background: #fff; }

/* Modal celé kroniky */
.kronika-modal-box { max-width: 720px; width: 92%; }
.kronika-modal-hlava {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.kronika-modal-hlava h2 { margin: 0; }
#kronika-modal-obsah { max-height: 70vh; overflow-y: auto; }

/* Konec hry */
.konec-tlacitka { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.konec-box { text-align: center; }
.konec-ikona { font-size: 3.6rem; }
.konec-skore { font-size: 2.6rem; font-weight: 700; color: var(--hneda); }
.konec-skore span { font-size: 1rem; color: var(--hneda-tmava); }
.konec-staty { margin: 12px 0; line-height: 1.7; }
.konec-mrtvi { font-size: .86rem; text-align: left; line-height: 1.6; color: var(--hneda-tmava); }

/* ---------- Tablety ---------- */
@media (max-width: 860px) {
  .kronika { grid-template-columns: 1fr; }
  main { padding: 14px; }
}

/* ---------- Telefony ---------- */
@media (max-width: 600px) {
  .topbar { padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
  .topbar h1 { font-size: 1.15rem; }
  .podtitul { display: none; }
  .stitek { font-size: .78rem; padding: 3px 9px; }
  #nova-hra { padding: 5px 11px; font-size: .85rem; }
  main { padding: 10px; }
  .panel { padding: 12px 13px; margin-bottom: 14px; }
  .panel h2 { font-size: 1.15rem; }
  .hud { padding: 0 10px; gap: 8px; }
  .obyvatele { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
  /* pohodlné dotykové cíle */
  .volba, .trh-btn, .hlavni-tlacitko, #nova-hra, .setup-volba, .timeline li { min-height: 44px; }
  .volba { padding: 12px; }
  .dlazdice { font-size: clamp(13px, 5.4vw, 26px); }
  .konec-skore { font-size: 2.1rem; }
  .modal-box { padding: 18px 18px; }
}

/* Zařízení bez hoveru (dotyk): zvětšit dlaždice trvale pro tap */
@media (hover: none) {
  .dlazdice:hover { transform: none; }
}