h1 {
  animation: Cool 5s infinite linear;
  font-weight: normal;
}
@keyframes Cool {
  0% { color: red; }
  17% { color: orange; }
  33% { color: yellow; }
  50% { color: lightgreen; }
  67% { color: blue; }
  83% { color: violet; }
  100% { color: red; }
}



#research-tree {
  background-color: #1a0029;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100vw;
  height: 101vh;
  z-index: 102;
}
#research-tree .RTB {
  background-image: url('Dice/ResearchCircle.png');
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#research-tree .RTB:hover {
  filter: brightness(120%) !important;
}
#research-tree #RTX {
  background-image: url('Dice/ResearchX.png');
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-size: 100% 100%;
  position: absolute;
  top: 20px;
  right: 20px;
}
#research-tree #RTX:hover {
  filter: brightness(120%) !important;
}
#dice-controls #cookies {
  color: indianred;
  font-weight: bolder;
}
#BGDice {
  background-image: url('Dice/BGDice.png');
  width: 38px;
  height: 42px;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}
#BG {
  background-image: url('Dice/BG.png');
  width: calc(100% - 300px);
  height: 100vh;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}
#borders {
  cursor: pointer;
}
.border #tabs {
  border: 2px dashed lawngreen !important;
}
.border #dice-controls {
  border: 2px dashed blue !important;
}
.border #dice-upgrades {
  border: 2px dashed red !important;
}
.border #results-area {
  border: 2px dashed red !important;
}
.border .sidebar-border {
  background-color: lawngreen !important;
}
.border .dice-wrapper {
  border: 2px dashed blue !important;
}
.border .dice-img {
  border: 2px solid red !important;
}
.border .shadow-img {
  border: 2px solid lawngreen !important;
}
body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden; 
  background-color: #12001c;
  position: relative;
}
.sidebar-border {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 300px;
  width: 2px;
  background-color: transparent;
  z-index: 100;
  pointer-events: none;
}
#tabs { 
  width: 300px;
  height: auto;
  font-family: sans-serif;
  text-align: center;
  position: absolute;
  font-size: 1.2em;
  right: 0px;
  top: 0%;
  font-weight: bold;
  color: white;
  border: 2px dashed transparent;
}
#tabs button {
  width: auto;
  height: auto;
  margin: 0 5px;
  background-color: #ddd;
  border: 1px solid #aaa;
  cursor: pointer;
  color: black;
  font-weight: bold;
}
#tabs button:hover {
  filter: brightness(120%) !important;
}
#results-area {
  width: 300px; 
  position: absolute;
  font-size: 1.5em;
  font-family: sans-serif;
  font-weight: bold;
  right: 0px;
  top: 8%;
  text-align: center;
  padding-right: 10px;
  box-sizing: border-box;
  z-index: 101;
  color: white;
  border: 2px solid transparent;
}
#dice-controls {
  position: absolute;
  top: 15%;
  right: 0px; 
  width: 300px;
  padding: 10px;
  box-sizing: border-box;
  z-index: 101;
  font-family: sans-serif;
  color: #333;
  line-height: 2em;
  text-align: right;
  border: 2px solid transparent;
}
#dice-controls label {
  font-weight: bold;
  margin-right: 5px;
  color: white;
}
#dice-controls button {
  width: 25px;
  height: 25px;
  margin: 0 5px;
  background-color: #ddd;
  border: 1px solid #aaa;
  cursor: pointer;
  color: black;
  font-weight: bold;
}
#dice-controls button:hover {
  filter: brightness(120%) !important;
}
#dice-controls .add-button {
  width: fit-content !important;
}
#dice-controls span {
  display: inline-block;
  width: 20px;
  text-align: center;
  color: white;
}
#dice-upgrades {
  position: absolute;
  top: 15%;
  right: 0px; 
  width: 300px;
  padding: 10px;
  box-sizing: border-box;
  z-index: 101;
  font-family: sans-serif;
  color: #333;
  line-height: 2em;
  text-align: right;
  border: 2px solid transparent;
}
#dice-upgrades label {
  font-weight: bold;
  margin-right: 5px;
  color: white;
}
#dice-upgrades button {
  width: auto;
  height: 25px;
  margin: 0 5px;
  background-color: #ddd;
  border: 1px solid #aaa;
  cursor: pointer;
  color: black;
  font-weight: bold;
}
#dice-upgrades button:hover {
  filter: brightness(120%) !important;
}
#dice-upgrades span {
  display: inline-block;
  width: 20px;
  text-align: center;
  color: white;
}
.dice-wrapper {
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: absolute;
  transform: translate(var(--final-x, 100px), var(--final-y, 100px));
  z-index: 10;
  border: 2px solid transparent;
}
.dice-img {
  position: absolute;
  width: 34px; 
  height: 34px; 
  left: 6px;
  top: 7px;
  z-index: 10;
  will-change: transform, opacity, scale;
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1.0);
  border: 2px solid transparent;
}
.shadow-img {
  position: absolute;
  width: 35px; 
  height: 12px; 
  opacity: 0.8;
  left: 5.5px; 
  top: 36px; 
  z-index: 5;
  will-change: transform, opacity, scale;
  border: 2px solid transparent;
}
@keyframes roll-move {
  0% {transform: translate(0, 0) rotate(0deg);}
  12.5% {transform: translate(calc(var(--land-x) * 0.125), calc(var(--land-y) * 0.125 - 44px)) rotate(calc(var(--spin-deg) * 0.125));}
  25% {transform: translate(calc(var(--land-x) * 0.25), calc(var(--land-y) * 0.25 - 75px)) rotate(calc(var(--spin-deg) * 0.25));}
  37.5% {transform: translate(calc(var(--land-x) * 0.375), calc(var(--land-y) * 0.375 - 94px)) rotate(calc(var(--spin-deg) * 0.375));}
  50% {transform: translate(calc(var(--land-x) * 0.50), calc(var(--land-y) * 0.50 - 100px) /* Max fixed arc height (100px) */ ) rotate(calc(var(--spin-deg) * 0.50));}
  62.5% {transform: translate(calc(var(--land-x) * 0.625), calc(var(--land-y) * 0.625 - 94px)) rotate(calc(var(--spin-deg) * 0.625));}
  75% {transform: translate(calc(var(--land-x) * 0.75), calc(var(--land-y) * 0.75 - 75px)) rotate(calc(var(--spin-deg) * 0.75));}
  87.5% {transform: translate(calc(var(--land-x) * 0.875), calc(var(--land-y) * 0.875 - 44px)) rotate(calc(var(--spin-deg) * 0.875));}
  100% {transform: translate(var(--land-x), var(--land-y)) rotate(var(--spin-deg));}
}
@keyframes shadow-move {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    /* Fades, shrinks, and moves to the halfway point (straight line interpolation) */
    transform: translate(calc(var(--land-x) / 2), calc(var(--land-y) / 2)) scale(0.8);
    opacity: 0.4;
  }
  100% {
    /* Lands at final X AND Y offset, restoring size/opacity */
    transform: translate(var(--land-x), var(--land-y)) scale(1);
    opacity: 0.8;
  }
}
/* Animation for the money pop effect */
@keyframes money-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); /* Slightly bigger */ }
  100% { transform: scale(1); } /* Back to normal */
}

/* Class to apply the pop animation */
.money-pop-effect {
  animation: money-pop 0.2s ease-out; /* Quick pop, ease out for natural feel */
}
#tooltip {
  position: absolute;
  display: none;
  padding: 5px 10px;
  background-color: #323232;
  color: white;
  border-radius: 4px;
  border: 2px outset #afafaf;
  pointer-events: none;
  z-index: 9999;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
}