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: #8fd3ff;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #3b2a6b;
}

#scena { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
#scena svg { display: block; }

#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: #ff9d00;
  -webkit-text-stroke: 2px #3b2a6b;
  background: rgba(255, 255, 255, 0.8);
  border: 6px solid #3b2a6b;
  border-radius: 45px;
  box-sizing: content-box;
}
#hviezdy span { color: #3b2a6b; -webkit-text-stroke: 0; }

/* kose dole */
#kose { position: absolute; left: 0; top: 0; z-index: 5; }
.kos { position: absolute; top: 790px; width: 280px; height: 270px; }
.kos svg { display: block; overflow: visible; }
.kos.pop { animation: kosPop 0.45s ease; }
@keyframes kosPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.1, 0.92); }
  70% { transform: scale(0.97, 1.05); }
  100% { transform: scale(1); }
}
.kos.zle { animation: kosZle 0.4s ease; }
@keyframes kosZle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-14px); }
  50% { transform: translateX(14px); }
  80% { transform: translateX(-8px); }
}

/* odpadky */
#veci { position: absolute; left: 0; top: 0; z-index: 20; }
.vec {
  position: absolute;
  width: 150px;
  height: 150px;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}
.vec svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 4px rgba(0, 0, 0, 0.25)); }
.vec.tahane { z-index: 50; cursor: grabbing; }
.vec.zle svg { animation: vecZle 0.4s ease; }
@keyframes vecZle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-14deg); }
  75% { transform: rotate(14deg); }
}

/* kuriatka */
#kuriatka { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }
.kura { position: absolute; top: 690px; width: 90px; height: 90px; }
.kura svg { display: block; width: 100%; height: 100%; animation: kuraSkok 0.5s ease-in-out infinite alternate; }
.kura.a { left: 0; animation: kuraIde1 26s linear infinite; }
.kura.b { left: 0; top: 720px; animation: kuraIde2 34s linear infinite; }
.kura.c { left: 0; top: 700px; animation: kuraIde3 30s linear infinite; }
.kura.b svg { animation-duration: 0.42s; }
.kura.c svg { animation-duration: 0.56s; }
.kura.radost svg { animation: kuraRadost 0.5s ease 2; }
@keyframes kuraSkok { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes kuraRadost { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-40px) rotate(-10deg); } }
@keyframes kuraIde1 {
  0% { transform: translateX(200px) scaleX(1); }
  49% { transform: translateX(1500px) scaleX(1); }
  50% { transform: translateX(1500px) scaleX(-1); }
  99% { transform: translateX(200px) scaleX(-1); }
  100% { transform: translateX(200px) scaleX(1); }
}
@keyframes kuraIde2 {
  0% { transform: translateX(1300px) scaleX(-1); }
  49% { transform: translateX(300px) scaleX(-1); }
  50% { transform: translateX(300px) scaleX(1); }
  99% { transform: translateX(1300px) scaleX(1); }
  100% { transform: translateX(1300px) scaleX(-1); }
}
@keyframes kuraIde3 {
  0% { transform: translateX(700px) scaleX(1); }
  49% { transform: translateX(1700px) scaleX(1); }
  50% { transform: translateX(1700px) scaleX(-1); }
  99% { transform: translateX(100px) scaleX(-1); }
  100% { transform: translateX(700px) scaleX(1); }
}

/* hlaska po upratani */
#hlaska {
  position: absolute;
  left: 360px;
  top: 360px;
  width: 1200px;
  z-index: 60;
  text-align: center;
  font: 900 110px/130px Inter, Arial, Helvetica, sans-serif;
  color: #fff;
  -webkit-text-stroke: 4px #3b2a6b;
  paint-order: stroke fill;
  text-shadow: 0 8px 0 rgba(59, 42, 107, 0.35);
  display: none;
  animation: hlaskaIn 0.5s ease;
}
@keyframes hlaskaIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* oblaky */
.oblak { animation: oblakPlava 90s linear infinite; }
@keyframes oblakPlava { from { transform: translateX(-400px); } to { transform: translateX(2300px); } }

/* zivot v zahrade */
.slnko-luce { transform-origin: 1620px 300px; animation: slnkoToci 40s linear infinite; }
@keyframes slnkoToci { to { transform: rotate(360deg); } }
.slnko-telo { transform-origin: 1620px 300px; animation: slnkoPulz 3s ease-in-out infinite alternate; }
@keyframes slnkoPulz { from { transform: scale(1); } to { transform: scale(1.06); } }
.kvet { transform-box: fill-box; transform-origin: 50% 100%; animation: kvetKyve 3.2s ease-in-out infinite alternate; }
.kvet:nth-child(2n) { animation-duration: 2.4s; animation-delay: -1s; }
.kvet:nth-child(3n) { animation-duration: 3.8s; animation-delay: -2s; }
@keyframes kvetKyve { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.motyl { animation: motylLeti 22s linear infinite; }
.motyl .kridlo { transform-box: fill-box; transform-origin: 100% 50%; animation: motylMava 0.18s ease-in-out infinite alternate; }
@keyframes motylMava { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
@keyframes motylLeti {
  0% { transform: translate(-100px, 520px); }
  25% { transform: translate(500px, 440px); }
  50% { transform: translate(1100px, 560px); }
  75% { transform: translate(1600px, 430px); }
  100% { transform: translate(2050px, 520px); }
}
.vtak { animation: vtakLeti 28s linear infinite; }
@keyframes vtakLeti { from { transform: translate(2100px, 330px); } to { transform: translate(-200px, 250px); } }
.vtak .krok { transform-box: fill-box; transform-origin: 50% 100%; animation: vtakMava 0.5s ease-in-out infinite alternate; }
@keyframes vtakMava { from { transform: scaleY(1); } to { transform: scaleY(-0.6); } }
/* odpadky jemne poskakuju, aby bolo vidiet, ze sa daju chytit */
.vec svg { animation: vecDych 2.6s ease-in-out infinite alternate; }
.vec:nth-child(2n) svg { animation-duration: 3.1s; animation-delay: -1s; }
.vec:nth-child(3n) svg { animation-duration: 2.2s; animation-delay: -0.5s; }
.vec.tahane svg { animation: none; }
@keyframes vecDych { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-6px) rotate(2deg); } }
.vec.zle svg { animation: vecZle 0.4s ease; }
.kura .oko { transform-box: fill-box; transform-origin: 50% 50%; animation: kuraMrk 4s infinite; }
@keyframes kuraMrk { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }

/* nazov odpadku pod obrazkom */
.vec .nazov {
  position: absolute;
  left: 50%;
  top: 152px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 2px 14px;
  font: 800 25px/32px Inter, Arial, Helvetica, sans-serif;
  color: #3b2a6b;
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid #3b2a6b;
  border-radius: 18px;
  pointer-events: none;
}
.znak { transform-box: fill-box; transform-origin: 50% 50%; animation: znakToci 14s linear infinite; }
@keyframes znakToci { to { transform: rotate(360deg); } }