body {

  display: flex;

  height: 100vh;

  background-color: #f7f7f7;

  color: #222;

  font-size: 16px;

}



/* Levý panel s tlačítky */

.sidebar {

  width: 15%;

  height: 100vh; 

  background-color: #e9ecef;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: stretch;

  padding: 20px;

  gap: 20px;

  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);

}



.main-content {

  width: 85%;

  background-color: #ffffff;

  display: flex;

  flex-direction: column;

  justify-content: top;

  align-items: center;

}



.main-content img {

  max-width: 90%;

  max-height: 90%;

  object-fit: contain;

  border-radius: 15px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

}











.nav-button {

  position: relative;

  min-height: 80px;

  padding: 12px 10px;

  background-color: #ffffff;

  border: none;

  cursor: pointer;

  font-size: 1.2rem;

  font-weight: bold;

  text-align: center;

  border-radius: 10px;

  overflow: hidden;

  transition: transform 0.2s, box-shadow 0.2s;

  display: flex;

  align-items: center;

  justify-content: center;

}



.nav-button:hover {

  transform: translateY(-3px);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}



/* Poloprůhledný obrázek v pozadí tlačítka */

.nav-button::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  opacity: 0.25;

  z-index: 0;

}



.nav-button span {

  position: relative;

  z-index: 1;

}



.dir-button {

  position: relative;

  min-height: 80px;

  padding: 12px 10px;

  background-color: #a0a0a0;

  border: none;

  cursor: pointer;

  font-size: 1.2rem;

  font-weight: bold;

  text-align: center;

  border-radius: 10px;

  overflow: hidden;

  transition: transform 0.2s, box-shadow 0.2s;

  display: flex;

  align-items: center;

  justify-content: center;

}



.dir-button:hover {

  transform: translateY(-3px);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}



.dir-button span {

  position: relative;

  z-index: 1;

}



.small-button {

  position: relative;

  min-height: 80px;

  padding: 12px 10px;

  background-color: #606060;

  border: none;

  cursor: pointer;

  font-size: 1.2rem;

  font-weight: bold;

  text-align: center;

  border-radius: 10px;

  overflow: hidden;

  transition: transform 0.2s, box-shadow 0.2s;

  display: flex;

  align-items: center;

  justify-content: center;

}



.small-button:hover {

  transform: translateY(-3px);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}



.small-button span {

  position: relative;

  z-index: 1;

}







h1 {

  margin-top: 20px;

  font-size: 28px;

}



h2 {

  margin-top: 0;

  margin-bottom: 10px;

  font-size: 1.4em;

  font-weight: bold;

  text-align: left;

}



h3 {

  margin-top: 0;

  margin-bottom: 10px;

  font-size: 1.2em;

  font-style: italic;

  text-align: left;

}













/* Joseki trainer */

#go-board {

  border: 2px solid #333;

  margin-top: 20px;

  background-color: #deb887;

}



#joseki-upload {

    margin-top: 15px;

    font-size: 16px;

  }



#info-section {

    margin-top: 20px;

    display: inline-block;

    text-align: left;

}

  

#info-table {

  border-collapse: collapse;

  width: 100%;

}

  

#info-table th,

#info-table td {

    border: 1px solid #aaa;

    padding: 4px 8px;

    text-align: center;

}



.difficulty-icon {

  display: inline-block;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  margin-right: 6px;

  vertical-align: middle;

}



.level-1 { background-color: white; }

.level-2 { background-color: yellow; }

.level-3 { background-color: orange; }

.level-4 { background-color: green; }

.level-5 { background-color: blue; }

.level-6 { background-color: purple; }

.level-7 { background-color: brown; }

.level-8 { background-color: black; }



#sequence-display {

  margin-top: 15px;

  font-family: monospace;

  background: #f8f8f8;

  padding: 8px;

  border: 1px solid #ccc;

  border-radius: 6px;

  width: 333px;

  word-break: break-word;

}



















/* Proverbs */

.prov-item {

  border: 1px solid #000;

  padding: 15px;

  margin: 20px 0;

  border-radius: 6px;

  background: #fdfdfd;

}



.prov-body {

  align-items: flex-start;

  gap: 15px;

}



.prov-image {

  width: 350px;

  height: auto;

  border-radius: 4px;

}



.prov-step img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  border-radius: 4px;

  border: 1px solid #000000;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

}



.prov-desc {

  margin: 0;

  line-height: 1.5;

  flex: 1;

}



.prov-steps {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 15px;

}



.prov-step {

  padding: 0px;

  border: 5px solid #ddd;

  border-radius: 10px;

  box-sizing: border-box;

  display: flex;

  gap: 10px;

}



.border-inicial {

  border: 5px solid black;

}



.border-wrong {

  border: 5px solid red;

}



.border-correct {

  border: 5px solid green;

}



















/* Vocabulary */

.vocab-item {

  border: 1px solid #000;

  padding: 15px;

  margin: 20px 0;

  border-radius: 6px;

  background: #fdfdfd;

}



.vocab-body {

  display: flex;

  align-items: flex-start;

  gap: 15px;

}



.vocab-image {

  width: 350px;

  height: auto;

  border: 1px solid #ccc;

  border-radius: 4px;

}



.vocab-desc {

  margin: 0;

  line-height: 1.5;

  flex: 1;

}



















/* Basics */

.basics-item {

  padding: 15px;

  margin: 20px 0;

  border-radius: 6px;

  background: #fdfdfd;

}



.basics-item img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  border-radius: 4px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

}



.basics-body {

  align-items: flex-start;

  gap: 15px;

  display: flex;

}



.basics-image {

  width: 350px;

  height: auto;

  border-radius: 4px;

}



.basics-desc {

  margin: 0;

  line-height: 1.5;

  flex: 1;

}