* {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: all 0.3s ease-in-out;
}
h1, h2, h3, h4, h5, h6 {
  font-family: monospace;
}
body {
  height: 100vh;
  overflow: hidden;
}

.button {
  background-color: transparent;
  color: white;
  border: 2px solid white;
  padding: 5px 10px;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 8px;
  margin: 10px 20px;
  transition: all 0.3s ease-in-out;

  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    &:hover {
      background-color: transparent;
      color: white;
      transform: none;
    }
  }
  &:hover {
    background-color: white;
    color: black;
    transform: rotate(2deg);
  }
  &:active {
    background-color: transparent;
    color: white;
    transform: translateY(4px);
  }
}
.primary {
  background-color: firebrick;
  border-color: firebrick;
  &[disabled]:hover {
    background-color: firebrick;
    color: white;
    transform: none;
  }
  &:hover {
    background-color: transparent;
    color: firebrick;
  }
  &:active {
    background-color: firebrick;
    color: white;
  }
}
.secondary {
  background-color: transparent;
  color: firebrick;
  border-color: firebrick;
  &[disabled]:hover {
    background-color: transparent;
    color: firebrick;
    transform: none;
  }
  &:hover {
    background-color: firebrick;
    color: white;
  }
  &:active {
    background-color: transparent;
    color: firebrick;
  }
}
.teritry {
  background-color: transparent;
  color: darkgray;
  border-color: darkgray;
  &[disabled]:hover {
    background-color: transparent;
    color: darkgray;
    border-color: darkgray;
    transform: none;
  }
  &:hover {
    background-color: transparent;
    color: firebrick;
    border-color: firebrick;
  }
  &:active {
    color: white;
    background-color: firebrick;
  }
}

.red {background: linear-gradient(45deg, rgb(254, 152, 167), rgb(255, 178, 145));}
.orange {background: linear-gradient(45deg, rgb(255, 167, 100), rgb(255, 225, 54));}
.yellow {background: linear-gradient(45deg, rgb(255, 219, 102), rgb(240, 255, 34));}
.green {background: linear-gradient(45deg, rgb(144, 238, 144), rgb(163, 251, 232));}
.blue {background: linear-gradient(45deg, rgb(163, 210, 251), rgb(218, 218, 255));}
.purple {background: linear-gradient(45deg, rgb(254, 218, 255), rgb(233, 182, 255));}
.black {background: linear-gradient(45deg, rgb(0, 0, 0), rgb(50, 50, 50)); color: white;}
.white {background: linear-gradient(45deg, rgb(255, 255, 255), rgb(180, 190, 190));}

.color-a {background: linear-gradient(45deg, crimson, darkred);}
.color-b {background: linear-gradient(45deg, gold, rgb(181, 117, 0));}
.color-c {background: linear-gradient(45deg, rgb(0, 163, 0), darkgreen);}
.color-d {background: linear-gradient(45deg, blue, darkblue);}

.red-to-purple {background: linear-gradient(45deg, crimson, purple);}
.teal-to-blue {background: linear-gradient(45deg, navy, teal);}
.forest-to-green {background: linear-gradient(45deg, rgb(0, 52, 0), rgb(0, 255, 195));}

.good-theme-a {background: linear-gradient(45deg, navy, crimson, orange)}
.good-theme-b {background: linear-gradient(45deg, cyan, magenta, yellow)}

.lb-bg-one {background: linear-gradient(45deg, white, black)}
.lb-bg-two {background: linear-gradient(45deg, cyan, magenta)}
.lb-bg-three {
  background: conic-gradient(
    from 90deg at 50% 50%,
    #800020 0deg,      /* Deep burgundy */
    #FFD700 140deg,    /* Gold */
    #000080 220deg,    /* Navy blue */
    #800020 360deg     /* Back to burgundy */
  );
}
@keyframes casino-lights {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

@keyframes coin-shine {
  0%, 100% { transform: translateX(-100%) rotate(35deg); }
  50% { transform: translateX(100%) rotate(35deg); }
}

.lb-bg-four {
  background: linear-gradient(180deg, 
    #2C1810 0%,    /* Dark brown */
    #4A2511 50%,   /* Rich brown */
    #241007 100%   /* Deep brown */
  );
  position: relative;
  overflow: hidden;

  &.theme-box::before { z-index: 0; }
  &.theme-box::after { z-index: 1; }

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
      /* Slot machine reels pattern */
      repeating-linear-gradient(0deg, 
        rgba(255, 215, 0, 0.1) 0px,    /* Gold */
        rgba(255, 215, 0, 0.1) 20px,
        transparent 20px,
        transparent 40px
      ),
      /* Casino lights */
      radial-gradient(circle at 20% 20%, rgba(255, 0, 0, 0.2) 0%, transparent 30%),
      radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.2) 0%, transparent 30%),
      radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 30%);
    animation: casino-lights 3s infinite;
    z-index: -2;
  }

  &::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    background: 
      /* Shiny effect */
      linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 215, 0, 0.2) 25%,
        rgba(255, 215, 0, 0.4) 50%,
        rgba(255, 215, 0, 0.2) 75%,
        transparent 100%
      );
    animation: coin-shine 8s infinite;
    z-index: -1;
  }
}
@keyframes galaxy-rotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes nebula-pulse {
  0%, 100% { opacity: 0.5; filter: hue-rotate(0deg) brightness(1); }
  33% { opacity: 0.7; filter: hue-rotate(120deg) brightness(1.2); }
  66% { opacity: 0.6; filter: hue-rotate(240deg) brightness(0.8); }
}
.lb-bg-five {
  background: radial-gradient(circle at center,
    #2b0054 0%,    /* Deep purple */
    #12002b 50%,   /* Dark purple */
    #000000 100%   /* Pure black */
  );
  position: relative;
  overflow: hidden;
  &.theme-box::before {z-index: 0;}
  &.theme-box::after {z-index: 1;}

  &::before {
    content: '';
    position: absolute;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    background-image:
      /* Distant stars */
      radial-gradient(1px 1px at 40% 40%, rgba(255, 255, 255, 0.7) 50%, transparent 60%),
      radial-gradient(1px 1px at 60% 60%, rgba(255, 255, 255, 0.6) 50%, transparent 60%),
      radial-gradient(1.5px 1.5px at 50% 50%, rgba(255, 255, 255, 0.8) 50%, transparent 60%),
      /* Nebula clouds */
      radial-gradient(circle at 30% 40%, rgba(255, 50, 255, 0.2) 0%, transparent 50%),
      radial-gradient(circle at 70% 60%, rgba(50, 255, 255, 0.2) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(255, 255, 100, 0.1) 0%, transparent 50%),
      /* Star clusters */
      radial-gradient(2px 2px at 20% 20%, #fff 50%, transparent 60%),
      radial-gradient(2px 2px at 80% 80%, #fff9f9 50%, transparent 60%),
      radial-gradient(2px 2px at 50% 50%, #f9f9ff 50%, transparent 60%);
    background-size: 
      150px 150px,
      200px 200px,
      170px 170px,
      100% 100%,
      100% 100%,
      100% 100%,
      120px 120px,
      160px 160px,
      140px 140px;
    animation: galaxy-rotate 120s linear infinite;
    opacity: 0.8;
    mix-blend-mode: screen;
    z-index: -2;
  }

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
      radial-gradient(circle at 30% 30%, rgba(255, 0, 255, 0.2) 0%, transparent 40%),
      radial-gradient(circle at 70% 70%, rgba(0, 255, 255, 0.2) 0%, transparent 40%),
      conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 100, 255, 0.2) 120deg,
        rgba(100, 100, 255, 0.2) 240deg,
        transparent 360deg
      );
    animation: nebula-pulse 15s infinite;
    mix-blend-mode: screen;
    z-index: -1;
  }
}

.horizen {
  background: linear-gradient(180deg, 
    #87CEEB 0%,    /* Sky Blue */
    #E0FFFF 60%,   /* Light Cyan */
    #90EE90 80%,   /* Light Green */
    #228B22 100%   /* Forest Green */
  );
  position: relative;
  overflow: hidden;
  &.theme-box::before {z-index: 0;}
  &.theme-box::after {z-index: 1;}

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(ellipse at 20% 80%, #228B22 20%, transparent 50%),
      radial-gradient(ellipse at 50% 80%, #228B22 30%, transparent 60%),
      radial-gradient(ellipse at 80% 80%, #228B22 25%, transparent 55%);
    z-index: -2;
  }

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 40%),
      radial-gradient(ellipse at 70% 40%, rgba(255, 255, 255, 0.5) 0%, transparent 35%);
    z-index: -1;
  }
}
.sunset {
  background: linear-gradient(180deg, #FF7F50 0%, #FF6B6B 25%, #CF5C7C 50%, #4B0082 100%);
  position: relative;
  overflow: hidden;

  &.theme-box::before {z-index: 0;}

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(circle at 50% 150%, #FFD700 10%, transparent 50%),
      radial-gradient(ellipse at 50% 150%, #FFA500 20%, transparent 70%),
      radial-gradient(circle at 45% 140%, #FF4500 5%, transparent 35%);
    z-index: -1;
  }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.7; transform: translateY(8px);}
}
@keyframes twinkle-slow {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.2; transform: translateX(8px); }
}
.stary-night {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  position: relative;
  overflow: hidden;

  &.theme-box::before {z-index: 0;}
  &.theme-box::after {z-index: 1;}
  
  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(white 1px, transparent 1px),
      radial-gradient(white 0.5px, transparent 0.5px),
      radial-gradient(white 1.5px, transparent 1.5px);
    background-size: 
      123px 147px,
      61px 59px,
      83px 97px;
    background-position: 
      17px 23px,
      37px 31px,
      13px 41px;
    animation: twinkle 3.7s infinite alternate;
  }

  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(white 1px, transparent 1px),
      radial-gradient(white 0.7px, transparent 0.7px),
      radial-gradient(white 1.2px, transparent 1.2px);
    background-size: 
      79px 67px,
      149px 131px,
      109px 157px;
    background-position: 
      43px 31px,
      11px 47px,
      29px 13px;
    animation: twinkle-slow 4.3s infinite alternate-reverse;
    opacity: 0.6;
  }
}
@keyframes neon-pulse {
  0%, 100% { opacity: 0.8; filter: brightness(1) blur(1px); }
  50% { opacity: 1; filter: brightness(1.2) blur(0.5px); }
}
@keyframes neon-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
  75% { transform: translateY(-5px) rotate(1deg); }
}
.neon {
  background: radial-gradient(circle at center, #1a0f2e 0%, #0f0617 100%);
  position: relative;
  overflow: hidden;

  &.theme-box::before { z-index: 0; }
  &.theme-box::after { z-index: 1; }

  &::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background-image: 
      /* Neon grid lines */
      linear-gradient(90deg, rgba(123, 0, 255, 0.1) 1px, transparent 1px),
      linear-gradient(0deg, rgba(123, 0, 255, 0.1) 1px, transparent 1px),
      /* Neon glow spots */
      radial-gradient(circle at 50% 25%, rgba(255, 0, 221, 0.3) 0%, transparent 40%),
      radial-gradient(circle at 80% 75%, rgba(0, 255, 255, 0.3) 0%, transparent 40%),
      radial-gradient(circle at 20% 60%, rgba(123, 0, 255, 0.3) 0%, transparent 40%);
    background-size: 
      50px 50px,
      50px 50px,
      100% 100%,
      100% 100%,
      100% 100%;
    transform: perspective(500px) rotateX(30deg);
    animation: neon-float 10s infinite ease-in-out;
    z-index: -1;
  }

  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
      /* Floating neon particles */
      radial-gradient(circle at 70% 30%, #ff00dd 1px, transparent 1px),
      radial-gradient(circle at 30% 70%, #00ffff 1px, transparent 1px),
      radial-gradient(circle at 50% 50%, #7b00ff 1px, transparent 1px),
      /* Neon light beams */
      conic-gradient(
        transparent 0deg,
        transparent 65deg, 
        rgba(255, 0, 221, 0.2) 75deg,
        rgba(0, 255, 255, 0.2) 80deg, 
        transparent 85deg,
        transparent 360deg
      );
    background-size: 
      100px 100px,
      120px 120px,
      80px 80px,
      100% 100%;
    animation: neon-pulse 3s infinite ease-in-out;
    filter: blur(0.5px);
    z-index: -1;
  }
}

@keyframes cyber-scan {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { transform: translateY(0); opacity: 0.5; }
  100% { transform: translateY(100%); opacity: 0; }
}
.cyberpunk {
  background: linear-gradient(135deg, #120458 0%, #000000 50%, #120458 100%);
  position: relative;
  overflow: hidden;
  &.theme-box::before { z-index: 0; }
  &.theme-box::after { z-index: 1; }

  &::before {
    content: '';
    position: absolute;
    inset: -25%;
    width: 150%;
    height: 150%;
    background-image: 
      repeating-linear-gradient(45deg, 
        rgba(0, 255, 255, 0.1) 0px,
        transparent 1px,
        transparent 30px
      ),
      repeating-linear-gradient(-45deg,
        rgba(255, 0, 221, 0.1) 0px,
        transparent 1px,
        transparent 30px
      );
    transform: perspective(500px) rotateX(45deg);
    z-index: -2;
  }

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
      transparent,
      rgba(0, 255, 255, 0.2),
      rgba(255, 0, 221, 0.2),
      transparent
    );
    animation: cyber-scan 3s linear infinite;
    z-index: -1;
  }
}

.theme-box {
  width: 100px;
  height: 100px;
  margin: 16px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease-in-out;
  &:hover {
    transform: scale(1.1);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
  }
  &:active {
    transform: scale(0.95);
    opacity: 0.8;
  }
  &.selected {
    height: 96px;
    width: 96px;
    border: 4px solid white;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.7);
  }
  & span {
    position: relative;
    z-index: 2; /* Higher than both pseudo-elements */
    color: white; /* Make text more visible */
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5); /* Add shadow for better readability */
  }
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 200px;
  height: 200px;
  border-radius: 8px;
  padding: 20px;
  margin: 20px;
  &>h3 {font-size: 1.1rem;}
  &>button {margin: 0px}
}
.upgrade-container {border: 2px solid #FF9E80;}

.advanced-mute-div {
  position: absolute;
  width: 300px;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid white;
  border-radius: 8px; 
  padding: 10px 20px;
  display: none; /* flex */
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  &>h3 {font-size: 1.25rem;}
  &>.close-mute-btn {
    position: absolute;
    border: 0px;
    top: 0px;
    right: 0px;
    color: rgb(189, 0, 0);
    cursor: pointer;
    padding: 0px;
    &:hover {
      color: rgb(255, 0, 0);
      background-color: transparent;
      transform: none;
    }
    &:active {
      opacity: 0.5;
    }
  }
  &.shown {display: flex;}
}

.trophy-box {
  border: #7986CB 2px solid;
  align-items: center;
  & h1 {font-size: 3.5rem;}
}

.loan-stuff {
  &>div {
    display: flex;
    margin: 10px 20px;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100px;
    &>h3 {font-size: 1.1rem; margin: 5px;}
    &>button {margin: 5px;}
  }
}

.slot-machine-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 400px;
  background-color: rgb(77, 77, 77);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.one {
  background-color: darkred;
}
.ten {
  background-color: darkslategray;
}
.hundred {
  background-color: navy;
}
.thousand {
  background-color: indigo;
}
.slot-display {
  width: 80%;
  height: 40%;
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  color: white;
  background-color: rgb(18, 18, 18);
  margin: 10%;
}
.slot-handle {
  width: 10px;
  height: 150px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: calc(50% + 170px);
  top: calc(50% - 150px);
  transform: rotate(25deg);
  cursor: pointer;
}

@keyframes spin {
  50% {
    transform: rotate(90deg);
    top: calc(50% - 80px);
    left: calc(50% + 210px);
  }
}

.achievements.sidebar-div {
  left: unset;
  right: -50%;
  border-color: #196b19;
  transform: translate(50%, -50%);
  z-index: 996;
  &.shown {
    right: 50%;
  }
}
.sidebar-div {
  position: fixed;
  top: 50%;
  left: -50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  height: 75vh;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 25px;
  border: 5px solid white;
  z-index: 995;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 20px;
  &>h1 {
    font-size: 2rem;
  }
  &>div {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: white transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 75%;
    width: 85%;
  }
  & > .close, .close-achievements {
    position: absolute;
    top: 10px;
    left: 20px;
    color: rgb(189, 0, 0);
    cursor: pointer;
    &:hover {
      color: rgb(255, 0, 0);
    }
    &:active {
      opacity: 0.5;
    }
  }
}
.shown {
  left: 50%;
  &.auto-spin {
    display: block;
  }
}
.auto-spin {
  display: none;
  position: absolute;
  left: calc(50% + 212.5px);
  top: calc(50% - 125px);
  padding: 0px;
  background-color: transparent;
  border: none;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.75));
}
@keyframes click {
  50% {
    transform: scale(0.9) rotate(-25deg); /* Keep rotation while scaling */
  }
}
.stats-container {
  justify-content: space-evenly !important;
  & > * {
    font-size: 1rem;
  }
  & h3 {
    margin: 10px;
  }
}
.sidebar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  display: flex;
  flex-direction: column;
  z-index: 994;
}
.sidebar-btn {
  width: 45px;
  height: 45px;
  background-color: transparent;
  border: 5px solid white;
  border-left: none;
  cursor: pointer;
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    &:hover {
      background-color: transparent;
    }
  }
  &:hover {
    background-color: white;
    &>svg{fill: white;}
  }
  &:active {
    opacity: 0.5;
  }
}
.auto-spin-btn {border-color: #FF6F61; &[disabled] {&>svg {fill: #FF6F61;}} &>svg {fill: #FF6F61;} &:hover {background-color: #FF6F61;}} /* Coral Red */
.upgrades-btn {border-color: #FF9E80; &[disabled] {&>svg {fill: #FF9E80;}} &>svg {fill: #FF9E80;} &:hover {background-color: #FF9E80;}} /* Soft Orange */
.themes-btn {border-color: #FFD54F; &[disabled] {&>svg {fill: #FFD54F;}} &>svg {fill: #FFD54F;} &:hover {background-color: #FFD54F;}} /* Golden Yellow */
.businesses-btn {border-color: #AED581; &[disabled] {&>svg {fill: #AED581;}} &>svg {fill: #AED581;} &:hover {background-color: #AED581;}} /* Light Green */
.loans-btn {border-color: #4DB6AC; &[disabled] {&>svg {fill: #4DB6AC;}} &>svg {fill: #4DB6AC;} &:hover {background-color: #4DB6AC;}} /* Aqua Green */
.lootbox-btn {border-color: #4FC3F7; &[disabled] {&>svg {fill: #4FC3F7;}} &>svg {fill: #4FC3F7;} &:hover {background-color: #4FC3F7;}} /* Sky Blue */
.trophys-btn {border-color: #7986CB; &[disabled] {&>svg {fill: #7986CB;}} &>svg {fill: #7986CB;} &:hover {background-color: #7986CB;}} /* Soft Indigo */
.prestiege-btn {border-color: #9575CD; &[disabled] {&>svg {fill: #9575CD;}} &>svg {fill: #9575CD;} &:hover {background-color: #9575CD;}} /* Lavender */
.stats-btn {border-color: #F06292; &[disabled] {&>svg {fill: #F06292;}} &>svg {fill: #F06292;} &:hover {background-color: #F06292;}} /* Pink Rose */
.settings-btn {border-color: #BA68C8; &[disabled] {&>svg {fill: #BA68C8;}} &>svg {fill: #BA68C8;} &:hover {background-color: #BA68C8;}} /* Soft Violet */

.auto-spin-btn.selected {background-color: #FF6F61;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #FF6F61;}}}
.upgrades-btn.selected {background-color: #FF9E80;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #FF9E80;}}}
.themes-btn.selected {background-color: #FFD54F;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #FFD54F;}}}
.businesses-btn.selected {background-color: #AED581;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #AED581;}}}
.loans-btn.selected {background-color: #4DB6AC;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #4DB6AC;}}}
.lootbox-btn.selected {background-color: #4FC3F7;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #4FC3F7;}}}
.trophys-btn.selected {background-color: #7986CB;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #7986CB;}}}
.prestiege-btn.selected {background-color: #9575CD;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #9575CD;}}}
.stats-btn.selected {background-color: #F06292;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #F06292;}}}
.settings-btn.selected {background-color: #BA68C8;&>svg {fill: white;}&:hover {background-color: transparent;&>svg {fill: #BA68C8;}}}

.auto-spin.sidebar-div {border-color: #FF6F61}
.upgrades.sidebar-div {border-color: #FF9E80}
.themes.sidebar-div {border-color: #FFD54F}
.businesses.sidebar-div {border-color: #AED581}
.loans.sidebar-div {border-color: #4DB6AC}
.lootbox.sidebar-div {border-color: #4FC3F7}
.trophys.sidebar-div {border-color: #7986CB}
.prestiege.sidebar-div {border-color: #9575CD}
.stats.sidebar-div {border-color: #F06292}
.settings.sidebar-div {border-color: #BA68C8}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
}
.multipliers {
  display: flex;
  gap: 0px;
}
.multiplier-btns {
  width: 65px;
  height: 45px;
  background-color: transparent;
  border: 5px solid white;
  cursor: pointer;
  color: white;
  font-weight: bold;
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    &:hover {
      background-color: transparent;
    }
  }
  &:hover {
    background-color: white;
  }
  &:active {
    opacity: 0.5;
  }
}
.one-multiplier {
  border-color: #8B0000; /* Dark Red */
  color: #8B0000;
  &[disabled] {&:hover {color: #8B0000;}}
  &.selected {
    background-color: #8B0000;
    color: white;
    &:hover {
      background-color: transparent;
      color: #8B0000;
    }
  }
  &:hover {
    background-color: #8B0000;
    color: white;
  }
}
.ten-multiplier {
  border-color: #2F4F4F; /* Dark Slate Gray */
  color: #2F4F4F;
  &[disabled] {&:hover {color: #2F4F4F;}}
  &.selected {
    background-color: #2F4F4F;
    color: white;
    &:hover {
      background-color: transparent;
      color: #2F4F4F;
    }
  }
  &:hover {
    background-color: #2F4F4F;
    color: white;
  }
}
.hundred-multiplier {
  border-color: navy; /* Saddle Brown */
  color: navy;
  &[disabled] {&:hover {color: navy;}}
  &.selected {
    background-color: navy;
    color: white;
    &:hover {
      background-color: transparent;
      color: navy;
    }
  }
  &:hover {
    background-color: navy;
    color: white;
  }
}
.thousand-multiplier {
  border-color: #4B0082; /* Indigo */
  color: #4B0082;
  &[disabled] {&:hover {color: #4B0082;}}
  &.selected {
    background-color: #4B0082;
    color: white;
    &:hover {
      background-color: transparent;
      color: #4B0082;
    }
  }
  &:hover {
    background-color: #4B0082;
    color: white;
  }
}
.achievements-btn {
  width: 65px;
  height: 45px;
  background-color: transparent;
  border: 5px solid #196b19;
  cursor: pointer;
  font-weight: bold;
  &>svg {fill: #196b19;}
  &:hover {
    background-color: #196b19;
    &>svg {fill: white;}
  }
  &:active {
    opacity: 0.5;
  }
  &.selected {
    background-color: #196b19;
    &>svg {fill: white;}
    &:hover {
      background-color: transparent;
      &>svg {fill: #196b19;}
    }
  }
}

.next-tutorial {
  background-color: #4CAF50; /* Green */
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;

  &:hover {
    background-color: #3d8d41; /* Darker Green */
  }
  &:active {
    opacity: 0.7;
  }
}
.cancel {
  background-color: #f44336; /* Red */
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 10px;
  &:hover {
    background-color: #bc2929; /* Darker Red */
  }
  &:active {
    opacity: 0.7;
  }
}

.tutorial-start {
  position: fixed;
  bottom: 0%;
  right: 0%;
  margin: 10px;
  border-radius: 10px;
  cursor: pointer;
  fill: rgb(255, 255, 255);
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.75));
}
.tutorial {
  position: fixed;
  transform: translate(-50%, -50%);
  top: -50%;
  left: -50%;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  z-index: 997;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 300px;
  gap: 10px;
  &>h1 {
    font-size: 1.5rem;
    color: rgb(152, 0, 0);
    margin: 0px;
    cursor: pointer;
  }
  &>p {
    padding: 0px 20px;
  }
  &>button {
    align-self: end;
    margin: 0px;
  }
}
.first-section {
  top: 50%;
  left: 77%;
}
.second-section {
  top: 50%;
  left: 30%;
}
.third-section {
  top: 35%;
  left: 18%;
}
.fourth-section {
  top: 25%;
  left: 20%;
}
.fifth-section {
  top: 25%;
  left: 85%;
}

.game-won {
  display: none;
  background-color: rgba(0, 128, 0, 0.5);
}
.with-loan, .without-loan {
  background-color: rgba(255, 0, 0, 0.5);
  display: none;
}
.game-over-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 1000;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75);
  &>h1 {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  &>* {
    margin: 5px 0;
  }
}