/* Responsive scaling (virtual stage 1920×1380) */

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* prevent mobile scroll/zoom fighting the game */
    overscroll-behavior: none;
    touch-action: none;
    background: #000;
}


#VirsText{
    position: absolute;
    width: 100%;
    margin-top: 4%;
    font-size: 200px;
    margin-left: 15%;
    color: rgba(46, 27, 129, 0.527);
    text-shadow:
    3px 4px rgb(0, 0, 0),              
    0 0 20px rgb(128, 0, 255),     
    0 0 20px rgb(0, 0, 0),     
     0 0 90px rgb(180, 106, 255); 
    

}
#canvasWrapper {
  position: relative;
  transform-origin: top left; /* zoom pivot point */
}

#SakumEkrandCanvas{
    /*
    width: 1920px;
    height: 1380px;
    */
    background-image: url("Sakums ekran.gif");
    background-size: cover;         
    background-position: center;    
    background-repeat: no-repeat;
    z-index: -4;
}
body{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    /* background stays on body so it fills the viewport */
    background-image: url("concrete3.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Scaled stage root (all absolute-positioned game UI lives inside this) */
#stageRoot{
    position: relative;
    width: 1920px;
    height: 1380px;
    max-width: none;
    max-height: none;
    transform-origin: 0 0; /* scale/translate from top-left (set in java.js) */
}

/* Help mobile browsers: prevent gesture scrolling on interactive elements */
canvas, button, a{
    touch-action: none;
}

/* Fullscreen background video */
#Video{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -10;

    display: none;
}

#SakAtpakalEkranPog{
    position: absolute;
    margin-top: 40%;
    font-size: 100px;
    margin-left: 32%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}

#SakPog{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 22%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}

#NotPog{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 49%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}


#PaypalSite{
    position: absolute;
    margin-top: 28%;
    font-size: 80px;
    margin-left: 14%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;

}

#Donate{
    position: absolute;
    margin-top: 40%;
    font-size: 100px;
    margin-left: 52%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);;
    
    
}

#NotTeksts{
    position: absolute;
    margin-top: 0%;
    font-size: 70px;
    margin-left: 2%;
    margin-right: 2%;
    border-radius: 20px;
    text-align: center;
    font-style: oblique;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-shadow: 3px 2px rgba(1, 69, 255, 0.226);
    border-color: rgb(1, 47, 173);;
}


#SpeletModel{
    position: absolute;
    margin-top: 51.9%;
    height: 385px;
    width: 300px;
    color: orange;
}

#Goblins{
    position: absolute;
    z-index: 1;
   
}

#PunktuDisplaysk{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 49%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);;
    text-align: center;
}



#superlode{
    position: absolute;
}

#SpelLaikBackground{
    position: absolute;
    z-index: -3;
}

#DonateNaudasSimbols{
    position: absolute;
    margin-top: 7%;
    margin-left: 30%;
}

#MatUzd{
    position: absolute;
    margin-top: 10%;
    font-size: 100px;
    margin-left: 49%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);;
}

#Uzlabojumi{
    position: absolute;
    margin-top: 4%;
    font-size: 200px;
    margin-left: 24%;
    color: rgba(46, 27, 129, 0.527);
    text-shadow:
    3px 4px rgb(0, 0, 0),              
    0 0 20px rgb(128, 0, 255),     
    0 0 20px rgb(0, 0, 0),     
     0 0 90px rgb(180, 106, 255); 
}

#Uzdevums{
    position: absolute;
    width: 78.5%;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 10.6%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#Ievade{
    position: absolute;
    margin-top: 45%;
    font-size: 100px;
    margin-left: 19%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#Atbilde{
    position: absolute;
    margin-top: 36%;
    font-size: 100px;
    margin-left: 21.2%;
    width: 58.5%;
    height: 20%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#IrNav{
    position: absolute;
    margin-top: 23%;
    font-size: 150px;
    margin-left: 39.5%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#ViegUzd{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 44%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#VidUzd{
    position: absolute;
    margin-top: 30%;
    font-size: 100px;
    margin-left: 44%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#GrutUzd{
    position: absolute;
    margin-top: 40%;
    font-size: 100px;
    margin-left: 44%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#HpRad{
    position: absolute;
    margin-top: 52%;
    font-size: 100px;
    margin-left: 2%;
    margin-right: 2%;
    border-radius: 20px;
    text-align: center;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-color: rgb(1, 47, 173);;



}


#TurpSpel{
    position: absolute;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 2%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#PrimaisUzlab{
    position: absolute;
    font-style: italic;
    margin-top: 20%;
    font-size: 100px;
    margin-left: 30.5%;
    text-shadow: 3px 2px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
}
#OtraisUzlab{
    position: absolute;
    font-style: italic;
    margin-top: 30%;
    font-size: 100px;
    margin-left: 26%;
    text-shadow: 3px 2px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
}
#TresaisUzlab{
    position: absolute;
    font-style: italic;
    margin-top: 40%;
    font-size: 100px;
    margin-left: 17%;
    text-shadow: 3px 2px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
}

#Piederosie{
    position: absolute;
    text-align: center;
    font-style: italic;
    margin-top: 52.5%;
    font-size: 100px;
    margin-left: 65%;
    text-shadow: 3px 2px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
}
#AtpakalUzd{
    position: absolute;
    margin-top: 54%;
    font-size: 100px;
    margin-left: 41%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(1, 47, 173);
}

#Video{
    position: absolute;
    top: 0%;
    left: 0;
    width: 1921px;
    height: 1381px;
    object-fit: cover;
    z-index: -3;
}


#BeigtSpeliSpelesLaik{
    position: absolute;
    margin-top: 66.9%;
    font-size: 50px;
    margin-left: 0.5%;
    text-shadow: 2px 1px rgb(32, 32, 32);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(54, 54, 54);
}

#SuperLodesInventory{
    position: absolute;
    margin-top: 66.5%;
    font-size: 55px;
    margin-left: 77%;
    text-shadow: 1px 1px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    text-decoration: none;
    border-color: rgb(27, 27, 27);
    width: 22%;
}

#HpBar{
    position: absolute;
    margin-top: 63%;
    margin-left: 62.3%;
    border: solid 20px white;
    position: absolute;
    border-radius: 25%;
    background: linear-gradient(to right,
    rgb(0, 71, 4) 0%,      /* Red starts at the beginning */
    rgb(0, 71, 4) 30%,     /* Red continues until 30% */
    rgb(0, 71, 4) 30%,  /* Yellow starts at 30% */
    rgb(0, 71, 4) 70%,  /* Yellow continues until 70% */
    rgb(0, 71, 4) 70%,   /* Green starts at 70% */
    rgb(0, 71, 4) 100%    /* Green ends at the end */
);
    border-width: 5px;
    width: 37%;
    height: 2.5%;
    border-style: outset;
    border-color: rgba(0, 0, 0, 0.507);
    box-shadow: 2px 7px 5px 0px rgb(113, 0, 179);
    
}
#Raundi{
     position: absolute;
    margin-top: 0.1%;
    font-size: 55px;
    margin-left: 0.1%;
    text-shadow: 1px 1px rgb(61, 61, 61);
    border-radius: 20px;
    background-color: white;
    border: solid 10px black;
    border-style: outset;
    color: black;
    width: 99%;
    height: 82px;
    border-color: rgb(27, 27, 27);
    line-height: 82px;
    box-shadow: 0px 4px 10px 1px rgb(113, 0, 179);

}

#PromNoNoteik{
    position: absolute;
    margin-top: 64.5%;
    font-size: 100px;
    margin-left: 32%;
    text-shadow: 3px 2px rgb(1, 69, 255);
    border-radius: 20px;
    background-color: white;
    border-width: 10px;
    border-color: rgb(1, 47, 173);;
}


/*
  IMPORTANT: mobile controls are now laid out via .mobile-controls (flex).
  The old absolute-position styles for #Mob* buttons caused the buttons to
  jump off-screen on phones. We neutralize them here.
*/
#MobEPog, #MobDPog, #MobAPog, #MobQPog{
  position: static !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: inherit !important;
}



    

/* ------------------------------
   Mobile HUD: HP bar + controls
   ------------------------------ */

/*
  IMPORTANT:
  HP bar should be ABOVE the score/round bar.
  Therefore HP lives INSIDE the scaled stage (not fixed to viewport),
  and we push the score/round bar down on touch devices.
*/

#HpBar{
  position: absolute !important;
  top: 0.15% !important;
  left: 0.5% !important;
  width: 99% !important;
  height: 36px !important;
  z-index: 50 !important;
  border-radius: 18px !important;
  border: 2px solid rgba(255,255,255,0.85) !important;
  background: rgba(0,0,0,0.35) !important;
  overflow: hidden !important;
  display: none; /* JS shows during gameplay */
  z-index: 9999;
  box-sizing: border-box;
  pointer-events: none; /* don't block gameplay taps */
}
#HpBarFill{
  height: 100%;
  width: 100%;
  background: rgb(0, 160, 60);
  transition: width 120ms linear;
}
#HpBarText{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* On touch devices, place HP above the score/round bar */
@media (hover: none) and (pointer: coarse){
  #HpBar{ top: 6px !important; }
  #Raundi{ top: 48px !important; margin-top: 0 !important; }
}

/* Mobile on-screen controls (E/Q/A/D) */
.mobile-controls{
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0);
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px;
  box-sizing: border-box;

  z-index: 10000;
  background: transparent;

  pointer-events: auto;
  touch-action: manipulation;
}
.mobile-controls .mob-btn{
  width: 70px;
  height: 70px;

  border-radius: 18px;
  background-color: white;
  color: black;

  font-size: 28px;
  font-weight: 700;

  border: solid 8px rgb(54,54,54);
  border-style: outset;

  text-shadow: none;
  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.mobile-controls .mob-btn:active{
  transform: scale(0.95);
  filter: brightness(0.95);
}

/* Hide controls on desktop (mouse/trackpad) */
@media (hover: hover) and (pointer: fine){
  .mobile-controls{ display: none; }
}


/* ------------------------------
   PATCH: HP bar restored & placed above score/round on all viewports
   ------------------------------ */
#HpBar{
  top: 10px !important;
  left: 50% !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  transform: translateX(-50%) !important;

  width: min(1100px, 92%) !important;
  height: 46px !important;
  border-radius: 14px !important;

  background: #fff !important;
  border: 6px outset rgba(0,0,0,0.55) !important;
  box-shadow: 2px 7px 5px 0px rgb(113, 0, 179) !important;

  overflow: hidden !important;
  z-index: 50 !important;
}

/* make the green fill sit inside the white frame */
#HpBarFill{
  height: 100% !important;
}

/* score/round bar goes under HP bar */
#Raundi{
  top: 68px !important;
  left: 10px !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  z-index: 49 !important;
}