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: #ff9d00;
  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: 610px;
  top: 25px;
  height: 140px;
  width: 700px;
  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;
}

/* miestnost (jeden velky obrazok) a pasiky s textom nad nou */
#miestnost { position: absolute; left: 0; top: 190px; width: 1920px; height: 890px; z-index: 5; }
#miestnost svg { display: block; }
#zadanie, #meter {
  position: absolute;
  top: 206px;
  height: 64px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.92);
  border: 6px solid #3b2a6b;
  border-radius: 32px;
  z-index: 20;
  pointer-events: none;
}
#zadanie { left: 40px; width: 880px; padding: 0 28px; font: 900 38px/52px Inter, Arial, Helvetica, sans-serif; white-space: nowrap; }
#meter { left: 1180px; width: 700px; }
#meterText { position: absolute; left: 24px; top: 0; width: 200px; font: 800 30px/52px Inter, Arial, Helvetica, sans-serif; }
#meterRam {
  position: absolute;
  left: 214px;
  top: 8px;
  width: 460px;
  height: 36px;
  box-sizing: border-box;
  border: 5px solid #3b2a6b;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
#meterPlny { height: 100%; width: 100%; background: #ff3b3b; transition: width 0.5s ease, background-color 0.5s ease; }

/* spotrebice v miestnosti */
.app { cursor: pointer; }
.app.off { cursor: default; }
.app.on .vyp, .app.off .zap { display: none; }
.app.cvak { animation: cvak 0.35s ease; transform-box: fill-box; transform-origin: 50% 70%; }
.app.musi { animation: musi 0.45s ease; }
@keyframes cvak { 0% { transform: scale(1); } 40% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes musi { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-14px); } 50% { transform: translateX(14px); } 80% { transform: translateX(-8px); } }
.nazov-chip { font: 900 30px Inter, Arial, Helvetica, sans-serif; fill: #3b2a6b; text-anchor: middle; }
.stav-text { font: 900 24px Inter, Arial, Helvetica, sans-serif; fill: #fff; text-anchor: middle; }

/* animacie zapnutych spotrebicov */
.zar { transform-box: fill-box; transform-origin: 50% 50%; animation: zar 1.4s ease-in-out infinite alternate; }
@keyframes zar { from { transform: scale(0.92); opacity: 0.55; } to { transform: scale(1.08); opacity: 0.9; } }
.lopatky { transform-box: view-box; transform-origin: 100px 90px; animation: toci 0.5s linear infinite; }
@keyframes toci { to { transform: rotate(360deg); } }
.plamen { transform-box: fill-box; transform-origin: 50% 100%; animation: plamen 0.35s ease-in-out infinite alternate; }
.plamen:nth-child(2n) { animation-duration: 0.28s; }
@keyframes plamen { from { transform: scale(0.85, 0.8); } to { transform: scale(1.1, 1.15); } }
.kvapka { animation: kvapka 0.7s linear infinite; }
.kvapka:nth-child(2n) { animation-delay: -0.35s; }
@keyframes kvapka { from { transform: translateY(-20px); opacity: 1; } to { transform: translateY(40px); opacity: 0.2; } }
.vlna { animation: vlna 1.6s ease-in-out infinite; }
.vlna:nth-child(2n) { animation-delay: -0.8s; }
@keyframes vlna { from { transform: translateY(8px); opacity: 0; } 50% { opacity: 1; } to { transform: translateY(-16px); opacity: 0; } }
.obraz { animation: obraz 0.9s steps(1) infinite; }
@keyframes obraz { 0% { fill: #29a8ee; } 33% { fill: #ff4f8b; } 66% { fill: #ffd23f; } 100% { fill: #29a8ee; } }

#tip {
  position: absolute;
  left: 360px;
  top: 480px;
  width: 1200px;
  box-sizing: border-box;
  padding: 18px 0;
  text-align: center;
  font: 900 60px/72px Inter, Arial, Helvetica, sans-serif;
  color: #3b2a6b;
  background: #fff;
  border: 7px solid #3b2a6b;
  border-radius: 44px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.2);
  z-index: 50;
  display: none;
  pointer-events: none;
  animation: hIn 0.3s ease;
}

#hlaska {
  position: absolute;
  left: 260px;
  top: 470px;
  width: 1400px;
  box-sizing: border-box;
  padding: 24px 0;
  text-align: center;
  font: 900 84px/100px 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.5s ease;
}
@keyframes hIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

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