:root {
  --menuInactive: #c9a874;
  --menuActive: #b39667;
  --button: #82b194;
  --buttonHover: #90c7a6;
  --buttonSelected: rgb(115, 117, 255);
}

@font-face {
  font-family: neue;
  src: url("../assets/fonts/neue.otf");
}

body {
  margin: 0px;
  font-family: neue;
  user-select: none;
  overflow: hidden;
}

p {
  padding: 12px;
  font-weight: bolder;
  font-style: italic;
}

#currencyPanel {
  text-align: center;
}

#goldLogo {
  width: 30px;
  border-right: 1px solid black;
  background-image: url("../assets/images/coin.png");
}

#goldValue {
  width: 130px;
  vertical-align: top;
  margin-top: 7px;
}

#mainMenuContainer {
  width: calc(100% - 16px);
  padding: 8px;
}

#menuContainer {
  background-color: #8a8a88;
  height: 595px;
  left: 680px;
  width: 428px;
  position: absolute;
}

#offlineProgress {
  background-color: var(--menuActive);
  width: 200px;
  height: 120px;
  position: absolute;
  left: -430px;
  top: 241px;
}

#offlineClose {
  background-color: var(--button);
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 25px;
  position: relative;
  left: 75px;
  top: 83px;
  cursor: pointer;
}

#offlineText {
  position: absolute;
  text-align: center;
  margin-top: 10px;
  width: 200px;
}

#optsContainer {
  text-align: center;
  width: 100%;
}

#optsBall {
  background-image: url("../assets/images/ball.png");
  background-color: var(--menuInactive);
}

#optsZone {
  background-image: url("../assets/images/zone.png");
  background-color: var(--menuInactive);
}

#optsToken {
  background-image: url("../assets/images/pres.png");
  background-color: var(--menuInactive);
}

#optsHelp {
  background-image: url("../assets/images/help.png");
  background-color: var(--menuInactive);
}

#resetGame {
  background-color: indianred;
}

#tokenLogo {
  width: 30px;
  border-right: 1px solid black;
  background-image: url("../assets/images/token.png");
}

#tokenValue {
  width: 130px;
  vertical-align: top;
  margin-top: 7px;
}

#discord {
  background-image: url("../assets/images/discord.png");
  height: 43px;
  width: 60px;
  position: fixed;
  top: 505px;
  left: 939px;
  background-size: contain;
}

#patreon {
  background-image: url("../assets/images/patreon.png");
  height: 59px;
  width: 59px;
  position: fixed;
  top: 498px;
  left: 1012px;
  background-size: contain;
}

#scrollup {
  background-image: url(../assets/images/up.png);
  left: -50px;
  top: 10px;
}

#scrolldown {
  background-image: url("../assets/images/down.png");
  left: -50px;
  top: 564px;
}

#prestigeToken {
  display: inline-block;
  border: 1px solid var(--button);
  width: 90px;
  padding: 10px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

#prestige {
  display: inline-block;
  cursor: pointer;
  background-color: var(--button);
  border: 1px solid var(--button);
  width: 90px;
  padding: 10px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

#prestige:hover {
  background-color: var(--buttonHover);
}

.scroll {
  border-radius: 5px;
  border: 1px solid #222;
  background-color: #7f7f70;
  position: absolute;
  cursor: pointer;
  height: 20px;
  width: 40px;
}

.scroll:hover {
  background-color: #9f9f90;
}

.ballIcon {
  width: 17px;
  height: 17px;
  background-image: url(../assets/images/balls.png);
  position: relative;
  left: 71px;
  top: -4px;
}

.ballUpgrade,
.tokenUpgrade {
  display: inline-block;
  width: 159px;
  height: 53px;
  background-color: var(--button);
  margin-bottom: 4px;
  font-size: 12px;
  text-align: left;
  padding: 8px;
  cursor: pointer;
}

.ballUpgrade:hover,
.tokenUpgrade:hover,
.numOpt:hover,
.saveOpt:hover,
.zoneUpgrade:hover,
#offlineClose:hover {
  background-color: var(--buttonHover);
}

.ballUpgrade > .locked {
  cursor: default;
  width: 175px;
  height: 69px;
  background-image: url(../assets/images/lockedUpgrade.png);
  position: relative;
  left: -8px;
  top: -67px;
  background-repeat: repeat;
  background-position: center;
}

.balllevel,
.zoneLevel,
.tokenlevel {
  position: absolute;
  font-size: 14px;
}

.currencyContainer {
  display: inline-block;
  padding: 2px;
  width: 170px;
  margin-top: 5px;
  border-radius: 6px;
  height: 30px;
}

.optBtn {
  width: 50px;
  height: 50px;
  display: inline-block;
  cursor: pointer;
  margin-left: 6px;
  margin-right: 6px;
}

.optBtn.selected {
  background-color: var(--menuActive) !important;
}

.numOpt {
  display: inline-block;
  cursor: pointer;
  background-color: var(--button);
  width: 90px;
  padding: 10px;
  border-radius: 8px;
}

.saveOpt {
  display: inline-block;
  cursor: pointer;
  background-color: var(--button);
  width: 90px;
  padding: 10px;
  border-radius: 8px;
}

.numOpt.selected {
  display: inline-block;
  background-color: rgb(115, 117, 255);
  width: 90px;
  padding: 10px;
  border-radius: 8px;
}

.currencyContainer > div {
  background-position: -2px -2px;
  display: inline-block;
  height: 30px;
}

.shop {
  width: 364px;
  height: 461px;
  margin-left: 24px;
  margin-top: -20px;
  background-color: var(--menuActive);
}

.tokenIcon {
  text-align: center;
  margin-bottom: 14px;
  margin-top: 4px;
}

.zoneMod {
  float: right;
}

.zoneCost {
  display: inline-block;
}

.zoneEffect {
  text-align: center;
  margin-bottom: 4px;
}

.zoneUpgrade {
  user-select: none;
  display: inline-block;
  width: 339px;
  height: 25px;
  background-color: var(--button);
  margin-bottom: 4px;
  font-size: 12px;
  text-align: left;
  padding: 8px;
  padding-top: 6px;
  cursor: pointer;
}

.zoneUpgrade > .locked {
  cursor: default;
  width: 355px;
  height: 39px;
  background-image: url(../assets/images/lockedStage.png);
  position: relative;
  left: -8px;
  top: -38px;
  background-repeat: repeat;
  background-position: center;
}