body {
  background: #222;
}

@font-face {
  font-family: 'SF-Pro';
  src: url('/assets/font/SF-Pro.ttf');
}

.button-wow {
  display: block;
  background-color: #483c32; /* Dark brown background */
  color: #d4af37; /* Gold text */
  padding: 10px 12px;
  border: 2px solid #d4af37; /* Gold border */
  border-radius: 5px; /* Slightly rounded corners for a modern touch */
  font-family: 'Times New Roman', Times, serif; /* A font that gives a nod to medieval scripts */
  font-size: 16px;
  text-transform: uppercase; /* Makes the text uppercase for emphasis */
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  /* Adding some shadows for depth */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button-wow:hover {
  background-color: #d4af37; /* Gold background on hover */
  color: #483c32; /* Dark brown text on hover */
  border: 2px solid #483c32; /* Dark brown border on hover */
}

.button-wow:active {
  /* Slightly shift the button to simulate a pressing effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(2px);
}

.button-azeroth {
  background-color: #3a3f44; /* Dark slate gray for a stone-like appearance */
  color: #c9a86b; /* Aged gold color for the text, suggesting ancient inscriptions */
  padding: 10px 20px;
  border: 3px solid #6c6f72; /* Weathered stone border */
  border-radius: 4px; /* Subtle rounded corners */
  font-size: 16px;
  /* text-transform: uppercase; */
  cursor: pointer;
  box-sizing: border-box;

  /* Subtle texture and depth */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background: linear-gradient(145deg, #313539, #3a3f44);

  /* Adding an inner glow effect */
  position: relative;
  z-index: 1;
}

.button-azeroth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  background: rgba(201, 168, 107, 0.2);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.button-azeroth:hover::before {
  opacity: 1;
}

.button-azeroth:active {
  /* Enhancing the pressing effect */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

.button-azeroth:focus {
  outline: none; /* Removing the default outline for aesthetic reasons */
  box-shadow: 0 0 0 2px #c9a86b; /* A glow that suggests magical activation */
}

.energy-label {
  display: inline-block;
  background-color: #1a2b3c; /* Dark background for contrast */
  color: #00ffcc; /* Bright, magical color for the energy text */
  padding: 8px 16px;
  border-radius: 8px; /* Rounded edges for a soft, organic feel */
  border: 2px solid #007b8a; /* Border color that complements the background */
  font-family: 'Arial', sans-serif; /* Clean, readable font */
  font-size: 18px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow for depth */
  background: linear-gradient(
    to right,
    #123852 0%,
    #1a2b3c 100%
  ); /* Gradient for a dynamic, fluid look */

  /* Adding a glow effect for emphasis */
  position: relative;
  z-index: 1;
}

.energy-label::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(to right, #00ffcc, #007b8a);
  border-radius: 22px; /* Slightly larger to create a glowing border effect */
  z-index: -1;
  filter: blur(5px);
  opacity: 0.6;
}

.energy-label:hover {
  /* Enhancing the glow on hover for interactive feedback */
  box-shadow: 0 0 12px #00ffcc;
}

.is-invisible {
  visibility: hidden;
}

.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.text-hero {
  font-family: 'Uncial Antiqua', system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 48px;
}

.is-hidden {
  display: none !important;
}

.mt-2 {
  margin-top: 8px;
}

.ml-2 {
  margin-left: 8px;
}

.tag {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 0.75rem;
  color: #fff;
  background-color: #3273dc; /* A Bulma-like blue */
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
  vertical-align: baseline;
}

.tag.is-medium {
  padding: 0.5em 0.75em;
  font-size: 1rem; /* Larger font size */
}

#start-game-btn {
  transform: none !important;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

.current-turn {
  background-image: url('../assets/turnLableBackground.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-size: 16;
  font-family: 'Times New Roman', Times, serif;
  align-items: center;
  text-align: center;
  /* height: 42px; */
  padding: 10px 10px;
  text-transform: uppercase; /* Makes the text uppercase for emphasis */
  cursor: pointer;
  color: white;
}

.next-phase {
  font-size: 16;
  font-family: 'Times New Roman', Times, serif;
  align-items: center;
  text-align: center;
  height: 42px;

  text-transform: uppercase; /* Makes the text uppercase for emphasis */
  cursor: pointer;
  color: white;
  transition: color 0.3s ease; /* Smooth transition for text color */
  background-color: transparent; /* Set background to be transparent */
  border: 2px solid #ffffff; /* Dark brown border on hover */
  border-radius: 5px;
}
.next-phase img {
  height: 42px;
  width: fit-content;
}
.next-phase:hover {
  background-color: #d4af37;
  border: 2px solid #ffffff; /* Dark brown border on hover */
  border-radius: 5px; /* Slightly rounded corners for a modern touch */
}
.match-control-btn {
  background-image: url('../assets/priorityLabelBackground.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-size: 16;
  font-family: 'Times New Roman', Times, serif;
  align-items: center;
  text-align: center;
  /* height: 42px; */
  width: 160px;
  padding: 13px 10px;
  text-transform: uppercase; /* Makes the text uppercase for emphasis */
  cursor: pointer;
  color: white;
}

.match-control-btn :hover {
  color: #d4af37;
  /* box-shadow: 0 0 12px #d4af37; */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 2s linear infinite;
}

.ip1 {
  height: 32px; /* Height of the input field */
  font-size: 18px;
  border: none;
  padding: 10px;
  border-radius: 5px; /* Rounded corners */
  background-image: url('assets/input_bg.png'); /* Path to your background image */
  background-size: cover; /* Cover the entire input area */
  background-position: center; /* Center the background image */
  color: white; /* Text color */
  max-width: 120px;
}

.ip2 {
  height: 24px; /* Height of the input field */
  font-size: 18px;
  border: none;
  padding: 8px;
  border-radius: 5px; /* Rounded corners */
  background-image: url('assets/input_bg.png'); /* Path to your background image */
  background-size: cover; /* Cover the entire input area */
  background-position: center; /* Center the background image */
  color: white; /* Text color */
  max-width: 150px;
}