#notification {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  background: #ff4444;
  color: #fff;
  padding: 18px 36px;
  border-radius: 10px;
  font-size: 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  z-index: 1000;
  display: none;
  opacity: 0.95;
  pointer-events: none;
}
#upgrade-container {
  position: relative;
  left: 1065px;
  top: -150px;
  width: 200px;
  height: 300px;
  background: rgba(255, 208, 0, 0.7);
  border: 5px solid #333;
  border-radius: 12px;
  overflow-y:scroll;
  overflow-x:hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 10px;
}

.upgrade-btn {
  width: 180px;
  height: 60px;
  font-size: 22px;
  border: 4px solid #222;
  border-radius: 10px;
  background-color: #4a90e2;
  color: #fff;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.upgrade-btn:hover {
  background-color: #357abd;
}
body {
  background-color: lightblue;
  margin: 0;
  padding: 0;
  height: 100%;
}
#header {
  border-radius: 12px;
  border: 8px solid black;
  background-color: yellow;
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  position: relative;
  left: 1130px;
}
#APS {
  border-radius: 10px;
  position: relative;
  left: 495px;
  bottom: 735px;
  background-color: rgba(255,255,0,0.5);
  width: 400px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  border: 5px solid black;
  font-style: bold;
}
#CPS {
  border-radius: 10px;
  position: relative;
  left:495px;
  bottom: 725px;
  background-color: rgba(255,255,0,0.5);
  width: 400px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  border: 5px solid black;
  font-style: bold;
}
#clickme {
  border-radius: 14px;
  position: relative;
  left: 500px;
  background-color: green;
  width: 400px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 70px;
  border: 15px solid black;
}
#upgrades {
  border-radius: 12px;
  position: relative;
  left: 1035px;
  bottom: 725px;
  background-color: rgba(255,0,0,0.6);
  width: 275px;
  height: 85px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  border: 5px solid black;
}
#onepsec {
  border-radius: 10px;
  position: relative;
  left: 0px;
  bottom: 0px;
  background-color: rgba(0,0,255,0.6);
  width: 175px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#oneclick {
  border-radius: 10px;
    position: relative;
  left: 0px;
  bottom: 20px;
 background-color: rgba(255, 0, 0, 0.6);
  width: 175px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#twoclick {
  border-radius: 10px;
    position: relative;
  left: 0px;
  bottom: 40px;
 background-color: rgba(255, 0, 0, 0.6);
  width: 175px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#fivepsec {
  border-radius: 10px;
position: relative;
  left: 0px;
  bottom: 60px;
  background-color: rgba(0,0,255,0.6);
  width: 175px;
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#twentypsec {
  border-radius: 10px;
  position: relative;
  left: 0px;
  bottom: 160px;
  background-color: rgba(0,0,255,0.6);
  width: 175px;
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#twoclick {
  border-radius: 10px;
    position: relative;
  left: 0px;
  bottom: 40px;
 background-color: rgba(255, 0, 0, 0.6);
  width: 175px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#twopsec {
  border-radius: 10px;
  position: relative;
  left: 0px;
  bottom: 60px;
  background-color: rgba(0,0,255,0.6);
  width: 175px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#threeclick {
  border-radius: 10px;
    position: relative;
  left: 0px;
  bottom: 80px;
  background-color: rgba(255, 0, 0, 0.6);
  width: 175px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#fiveppsec {
  border-radius: 10px;
position: relative;
  left: 0px;
  bottom: 100px;
  background-color: rgba(0,0,255,0.6);
  width: 175px;
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#tenpsec {
  border-radius: 10px;
position: relative;
  left: 0px;
  bottom: 120px;
  background-color: rgba(0,0,255,0.6);
  width: 175px;
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#fiveclick {
  border-radius: 10px;
    position: relative;
  left: 0px;
  bottom: 140px;
  background-color: rgba(255, 0, 0, 0.6);
  width: 175px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: black;
  font-style: bold;
}
#rollbutton {
  border-radius: 14px;
  position: relative;
  left: 25px;
  bottom: 815px;
  background-color: rgb(9, 255, 0);
  width: 200px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  border: 10px solid black;
  animation: rollAnim 0.5s infinite;
}
#rollbutton:hover {background-color: #16c51c}

#rollbutton:active {
  background-color: #0eb114;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
#clickme:hover {background-color: rgb(27, 141, 12)}

#clickme:active {
  background-color: #0eb114;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
#amount {
  border-radius: 10px;
  position: relative;
  left: 25px;
  bottom: 800px;
  background-color: rgba(0, 132, 255, 0.7);
  width: 200px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  border: 5px solid black;
}
/* Show placeholder when the element is empty */
[contenteditable][placeholder]:empty::before {
  content: attr(placeholder);
  color: #000000;
  /* optional styling */
  display: flex;
  align-items: center;
  pointer-events: none;
  font-size: 20px;
  display: block; /* help for Firefox */
}

/* When focused and still empty, don’t show placeholder */
[contenteditable][placeholder]:empty:focus::before {
  content: "";
}
#buttonclickertitle {
  border-radius: 12px;
  position: relative;
  left: 25px;
  bottom: 680px;
  background-color: rgba(217, 255, 0, 0.7);
  width: 350px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  border: 5px solid black;
}

#circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: rgb(0, 183, 255);
  position: absolute;
  top: 10px;
  color: white;
  font-style: bold;
  font-size: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 1250px;
  animation: pulse 2s infinite;
  border: 5px solid rgb(144, 248, 255);
}
#infobox {
  border-radius: 12px;
  position: relative;
  left: 25px;
  background-color: transparent;
  bottom: 1000px;
  width: 350px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  border: 0px solid black;
  text-align: center;
  padding: 10px;
}