html, body, div, span, h1, h2, h3, h4, h5, h6 {
  border: 0;
  outline: 0;
}

body, div, p {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background-color: black;
  font-size: 11px;
  overflow: hidden;
  padding: 0;
  width: 1920px;
  height: 1080px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#container {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: linear-gradient(180deg, #00b8a9 0, #00b8a9 190px, #f6efe3 190px, #f6efe3 100%);
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #3b2a6b;
}

#navrat {
  position: absolute;
  top: 35px;
  left: 50px;
  z-index: 40;
  width: 120px;
  height: 120px;
  background-image: url('../images/navrat.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#btn_reset {
  position: absolute;
  left: 220px;
  top: 35px;
  height: 120px;
  width: 120px;
  z-index: 40;
  background-image: url('../images/reload.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#napis {
  position: absolute;
  left: 710px;
  top: 25px;
  height: 140px;
  width: 500px;
  z-index: 40;
}

#hviezdy {
  position: absolute;
  right: 60px;
  top: 50px;
  z-index: 40;
  padding: 0 34px;
  height: 90px;
  font: 900 64px/90px Inter, Arial, Helvetica, sans-serif;
  color: #3b2a6b;
  background: rgba(255, 255, 255, 0.85);
  border: 6px solid #3b2a6b;
  border-radius: 45px;
}
#hviezdy::before {
  content: "\2605";
  color: #ff9d00;
  -webkit-text-stroke: 2px #3b2a6b;
  margin-right: 14px;
}

/* stav (pozeraj / teraz ty) a bodky s dlzkou poradia */
#stav {
  position: absolute;
  left: 80px;
  top: 215px;
  width: 1200px;
  white-space: nowrap;
  font: 900 56px/68px Inter, Arial, Helvetica, sans-serif;
}
#napoveda { position: absolute; left: 80px; top: 282px; width: 1200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 800 34px/44px Inter, Arial, Helvetica, sans-serif; color: #6a5fa8; }
#bodky { position: absolute; left: 80px; top: 340px; width: 1100px; display: flex; flex-wrap: wrap; gap: 14px; }
#bodky span {
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 5px solid #3b2a6b;
  border-radius: 50%;
  background: #fff;
  transition: background-color 0.2s ease;
}
#bodky span.hotovo { background: #3fb54a; }

/* styri farebne polia */
#doska { position: absolute; left: 80px; top: 395px; width: 1100px; height: 640px; z-index: 5; }
.pole {
  position: absolute;
  width: 530px;
  height: 300px;
  box-sizing: border-box;
  border: 8px solid #3b2a6b;
  border-radius: 56px;
  opacity: 0.55;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.12s ease, transform 0.12s ease, filter 0.12s ease;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2);
}
.pole svg { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; pointer-events: none; }
.pole.svieti { opacity: 1; transform: scale(1.05); filter: brightness(1.25) saturate(1.2); box-shadow: 0 0 60px rgba(255, 255, 255, 0.9), 0 10px 0 rgba(0, 0, 0, 0.2); }
.pole.zle { animation: zle 0.5s ease; }
.pole.vypnute { cursor: default; }
@keyframes zle { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-16px); } 50% { transform: translateX(16px); } 80% { transform: translateX(-8px); } }

#postavicka {
  position: absolute;
  left: 1330px;
  bottom: 20px;
  height: 500px;
  transform-origin: 50% 100%;
  animation: dycha 3.6s ease-in-out infinite;
  pointer-events: none;
}
#postavicka.radost { animation: skok 0.55s ease 2; }
@keyframes dycha { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 1.03); } }
@keyframes skok { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-50px) rotate(-3deg); } }

#hlaska {
  position: absolute;
  left: 240px;
  top: 560px;
  width: 800px;
  box-sizing: border-box;
  padding: 22px 0;
  text-align: center;
  font: 900 80px/96px Inter, Arial, Helvetica, sans-serif;
  color: #1f9d3d;
  background: #fff;
  border: 8px solid #3b2a6b;
  border-radius: 56px;
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.2);
  z-index: 60;
  display: none;
  pointer-events: none;
  animation: hIn 0.4s ease;
}
#hlaska.chyba { color: #d9372b; }
@keyframes hIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* tlacidlo "Zopakuj" - ukaze poradie este raz */
#znova {
  position: absolute;
  left: 1300px;
  top: 250px;
  width: 440px;
  height: 120px;
  box-sizing: border-box;
  padding-left: 110px;
  font: 900 52px/108px Inter, Arial, Helvetica, sans-serif;
  color: #fff;
  background: #a05be0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M78 50 A28 28 0 1 1 62 24' fill='none' stroke='white' stroke-width='11' stroke-linecap='round'/%3E%3Cpath d='M50 6 L72 24 L50 38Z' fill='white' stroke='white' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 26px center / 66px 66px;
  border: 7px solid #3b2a6b;
  border-radius: 60px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.22);
  cursor: pointer;
  z-index: 30;
  -webkit-tap-highlight-color: transparent;
}
#znova:active { transform: translateY(5px); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22); }
#znova.vypnute { opacity: 0.35; pointer-events: none; }

/* myslienka nad hlavou psika: bodky, otaznik alebo symbol, ktory prave svieti */
#myslienka { position: absolute; left: 1360px; top: 395px; width: 300px; height: 230px; z-index: 10; pointer-events: none; animation: myslienka 3.2s ease-in-out infinite; }
#myslienka svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
#mysObsah { position: absolute; left: 50px; top: 38px; width: 200px; height: 110px; text-align: center; font: 900 96px/110px Inter, Arial, Helvetica, sans-serif; color: #3b2a6b; }
#mysObsah svg { position: static; width: 100px; height: 100px; margin-top: 5px; overflow: visible; }
#mysObsah .bodka { display: inline-block; width: 22px; height: 22px; margin: 0 7px; border-radius: 50%; background: #6a5fa8; animation: bodkaSkace 1.1s ease-in-out infinite; }
#mysObsah .bodka:nth-child(2) { animation-delay: 0.18s; }
#mysObsah .bodka:nth-child(3) { animation-delay: 0.36s; }
@keyframes myslienka { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bodkaSkace { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-14px); opacity: 1; } }

/* text sa pri dlhsom preklade zmensi (zmesti() v core/jquery2.js) */
#znova { white-space: nowrap; overflow: hidden; }