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, #29a8ee 0, #29a8ee 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;
}

#otazka {
  position: absolute;
  left: 80px;
  top: 215px;
  width: 1320px;
  text-align: center;
  font: 900 54px/64px Inter, Arial, Helvetica, sans-serif;
}

/* pocet spravnych */
#hviezdy {
  position: absolute;
  left: 1500px;
  top: 215px;
  font: 900 64px/72px Inter, Arial, Helvetica, sans-serif;
  color: #3b2a6b;
}
#hviezdy::before {
  content: "\2605";
  color: #ffb000;
  margin-right: 14px;
  text-shadow: 0 3px 0 rgba(59, 42, 107, 0.4);
}

#postavicka {
  position: absolute;
  left: 1480px;
  bottom: 20px;
  height: 520px;
  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); } }

/* policka s tienmi hore */
#sloty { position: absolute; left: 0; top: 0; z-index: 5; }
.slot {
  position: absolute;
  top: 300px;
  width: 230px;
  height: 230px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.85);
  border: 7px solid #3b2a6b;
  border-radius: 36px;
}
.slot .obr, .karta .obr {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 190px;
  height: 190px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.slot .obr { filter: brightness(0); opacity: 0.55; }
.slot.hotovo { background: #d8f7dc; border-color: #1f9d3d; animation: pulz 0.5s ease-out; }
.slot.hotovo .obr { filter: none; opacity: 1; }
@keyframes pulz { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* farebne obrazky dole - tahaju sa */
#vybery { position: absolute; left: 0; top: 0; z-index: 20; }
.karta {
  position: absolute;
  top: 700px;
  width: 230px;
  height: 230px;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}
.karta.tahana { z-index: 50; cursor: grabbing; }
.karta .obr { animation: dych 2.8s ease-in-out infinite alternate; filter: drop-shadow(0 8px 4px rgba(0, 0, 0, 0.25)); }
.karta:nth-child(2n) .obr { animation-duration: 3.3s; animation-delay: -1s; }
.karta.tahana .obr { animation: none; }
.karta.zle .obr { animation: trasie 0.4s; }
@keyframes dych { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-8px) rotate(2deg); } }
@keyframes trasie { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-16px); } 75% { transform: translateX(16px); } }

#hlaska {
  position: absolute;
  left: 80px;
  top: 600px;
  width: 1320px;
  text-align: center;
  font: 900 100px/120px Inter, Arial, Helvetica, sans-serif;
  color: #fff;
  -webkit-text-stroke: 4px #3b2a6b;
  paint-order: stroke fill;
  z-index: 60;
  display: none;
  animation: hIn 0.5s ease;
}
@keyframes hIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* tien postavicky: mekka elipsa pod nohami a plocha silueta rozlozena po zemi */
#tienPostavy { position: absolute; left: 1470px; bottom: 6px; width: 300px; height: 46px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(59, 42, 107, 0.38) 0, rgba(59, 42, 107, 0) 70%); pointer-events: none; }
#tienSilueta {
  position: absolute;
  left: 1480px;
  bottom: 20px;
  height: 520px;
  filter: brightness(0);
  opacity: 0.16;
  transform-origin: 50% 100%;
  transform: translateX(-20px) skewX(50deg) scale(1, 0.22);
  pointer-events: none;
}

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