/* Celkový styl pro tělo stránky */
body {
  font-family: Lato;
  background: #1E201E;
  text-align: center;
  padding-bottom: 450px;
}

h1 {
  font-size: 6vw;
  color: rgb(240, 227, 202);
}

table {
  color: #F0E3CA;
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
  border: 0px black;
  outline: 0px solid black;
}

table .name:hover {
  background: #1E201E;
}

td, th {
  font-family: Trebuchet MS;
  font-weight: 500;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

/* Zvýraznění řádků nadpisu */
tr.name th, tr.name td {
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 900; /* Zvýšení tučnosti písma */
  font-size: clamp(0.8rem, 1.8vw, 2rem); /* Dynamické škálování velikosti písma */
  text-shadow: 2px 2px 5px #000000;
  height: 80px;
}

/* Barva pozadí pro řádky tabulky */
tr {
  background: #1E201E;
}

/* Zvýraznění řádku při najetí */
tr:hover {
  background: #3C3D37;
}

/* Styl pro jednotlivé buňky */
td {
  word-wrap: break-word;
  font-size: clamp(0.6rem, 1.3vw, 1.8rem); /* Dynamické škálování velikosti textu */
}

.map-name{
  text-align: center;
  font-weight: bold;
  background-color: #1B1A17;
}

/* Styl pro nadpis mapy (když se mapa mění) */
.map-header {
  font-family: Trebuchet MS;
  font-weight: 500;
  background-color: #1B1A17; /* Tmavé pozadí */
  font-size: 1.8rem;
  font-weight: bold; /* Tučné písmo */
  text-align: center; /* Zarovnání textu na střed */
  padding: 15px;
  letter-spacing: 2px;
  border-top: 0.1px solid #312e28a6;
  border-bottom: 0.1px solid #0e0e0d75;
}

/* Animace pro zvětšení */
.zoom-container {
  display: inline-block;
  position: relative;
  width: 100%; /* Nebo specifická šířka, např. 282px */
  aspect-ratio: 2 / 1; /* Nastavení poměru stran, např. 2:1 */
  max-width: 100%;
  max-height: 100%;
  text-align: left;
  margin: 0 auto;
}

.zoom {
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-in-out;
  transform-origin: right center;
  position: absolute;
  z-index: 9;
}

.zoom-left-container {
  display: inline-block;
  position: relative;
  width: 100%; /* Nebo specifická šířka, např. 282px */
  aspect-ratio: 2 / 1; /* Nastavení poměru stran, např. 2:1 */
  max-width: 100%;
  max-height: 100%;
  text-align: left;
  margin: 0 auto;
}

.zoom-left {
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-in-out;
  transform-origin: right center;
  position: absolute;
  z-index: 9;
}

/* Vyhledávací pole */
input[type="text"] {
  padding: 15px;
  width: 90%; /* Dáme šířku 90% pro lepší zarovnání s tabulkou */
  max-width: 1200px; /* Maximální šířka pro vyhledávací okénko */
  border: 1px solid #444;
  border-radius: 5px;
  font-size: 18px;
  background-color: #333; /* Tmavé pozadí */
  color: white;
  margin: 20px 0;
}

input[type="text"]:focus {
outline: 1px solid #f0e3cab3;
}

input[type="text"]::placeholder {
  color: #aaa; /* Světle šedý text pro placeholder */
}