@font-face {
  font-family: "Myriad Pro";
  src: url("https://res.cloudinary.com/zenberry/raw/upload/v1752586755/fonts/myriadpro_light.woff2");
}

@font-face {
  font-family: "vulf mono";
  src: local("Vulf mono"), url("https://res.cloudinary.com/zenberry/raw/upload/v1752587246/fonts/vulf-mono.woff2");
}

.btn-round {
  overflow: hidden;
  text-align: center;
  position: relative;
  background-image: URL('https://res.cloudinary.com/zenberry/image/upload/v1659934646/EPK/Blank_button_bjerck.svg');
  background-size: 250px;
  background-repeat: no-repeat;
  background-position: center;
  height: 250px;
  width: 250px;
  align-self: center;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn-round:active {
  background-image: URL('https://res.cloudinary.com/zenberry/image/upload/v1691793164/pressed_pqxjlh.svg');
  background-size: 190px;
  outline: none;
  box-shadow: none;
}

#container {
  display: flex;
  height: 100vh;
  font-family: Myriad Pro, sans-serif;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  overflow: hidden;
  /* background-color: rgba(255, 207, 145, 0.15); */
}

#board {
  display: grid;
  grid-template-columns: repeat(7, 80px);
  grid-template-rows: repeat(7, 80px);
  width: fit-content;
  margin: auto;
  border-radius: 10px;
  overflow: hidden;
  background-color: #e8d6bf;
  padding: 10px;
  position: relative;
  /* transform-style: preserve-3d; */
  transition: transform 0.8s ease, box-shadow 0.3s ease;
  backface-visibility: hidden;
  box-shadow: 1px -2px 42px 0px rgba(199, 197, 197, 0);
}

#board_back {
  display: grid;
  grid-template-columns: repeat(7, 80px);
  grid-template-rows: repeat(7, 80px);
  width: fit-content;
  margin: auto;
  border-radius: 20px;
  overflow: hidden;
  background-color: #ffffff;
  padding: 10px;
  position: relative;
  /* transform-style: preserve-3d; */
  transition: transform 0.8s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  backface-visibility: hidden;
  position: absolute;
  box-shadow: 1px -2px 42px 0px rgba(199, 197, 197, 0);
  align-items: center;
  justify-items: center;
}

#board_back::after {
  /* content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      /* background-color: rgb(255 255 255); */
  box-shadow: inset 0 0 0 10px rgb(255, 255, 255);
  mix-blend-mode: soft-light;
  z-index: 1;
  pointer-events: none;
  */
}

.menu_text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  position: relative;
  transition: opacity 0.3s ease, left 0.8s ease, bottom 0.8s ease;
  left: 0;
  bottom: 0;
}

.flipped {
  transform: rotate3d(0.02, 1, 0.02, 180deg) scale(1.5);
}

.hint {
  width: 30px;
  height: 30px;
  display: flex;
  aspect-ratio: 1;
  background-color: #0080003b;
  border-radius: 50%;
  z-index: 100;
  transition: opacity 0.3s ease;
}

.square {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
  user-select: none;

}

.hinted-square {
  background-color: #0080003b !important;
}

.white-square {
  background-color: #ffffff00;
}

.black-square {
  border-radius: 7px;
  background-color: rgba(240, 150, 66, 0.8);
}

.piece {
  width: 55px;
  aspect-ratio: 1;
  border-radius: 50%;
  line-height: 55px;
  text-align: center;
  font-weight: bold;
  user-select: none;
  position: relative;
  z-index: 1;
  transition: none;
  margin: 0;
}

.green-menu-piece {
  background-color: #2fc52f4d;
  /* transform: scale(12); */
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, transform 1s ease, box-shadow 0.3s ease, opacity 0.3s ease, top 1s ease, left 1s ease;
  top: 0;
  left: 0;
}

.yellow-menu-piece {
  background-color: #ffcc0070;
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, transform 1s ease, box-shadow 0.3s ease, opacity 0.3s ease, top 1s ease, left 1s ease;


}

.red-menu-piece {
  background-color: #ff6c004d;
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, transform 1s ease, box-shadow 0.3s ease, opacity 0.3s ease, top 1s ease, left 1s ease;

}

.white-piece {
  background-color: rgba(250, 240, 230, 0.82);
  color: black;
}

.black-piece {
  background-color: rgb(171 125 92);
  color: rgb(255, 255, 255);
}

.highlighted-square {
  background-color: #ffcc00;
  border-radius: 7px;
  transition: background-color 0.3s ease;
}

.info {
  margin: 42px auto;
  text-align: center;
  font-size: 24px;
  /* display: none; */
}

.nominee-glow {
  box-shadow: 0 0 12px 6px gold;
}