:root {
  --line-colour: #222;
  --p1: #f36;
  --p1-dark: #cf2d51;
  --p1-dark2: #b72343;
  --p1-alpha: rgba(255, 51, 102, 0.4);
  --p2: #8a2;
  --p2-dark: #6c8a1b;
  --p2-dark2: #5a7214;
  --p2-alpha: rgba(136, 170, 34, 0.33);
  --bg: #f5e6d3;
  --card-bg: #fff9f0;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  background: radial-gradient(circle at top, #fdf3e7, #e8d5b7);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Nunito", sans-serif;
}

/* ---------- Preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  background: #2c1e0f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: opacity 0.4s;
  color: #fcead8;
  font-family: "Fredoka One", cursive;
  font-size: 2rem;
}
#preloader.hidden {
  opacity: 0;
  pointer-events: none;
}
.spinner {
  width: 70px;
  height: 70px;
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-top: 8px solid #f36;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 30px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Game Container ---------- */
.game-container {
  width: 100%;
  max-width: 620px;
}
.game-container.hidden {
  display: none;
}

.game-title {
  text-align: center;
  font-family: "Fredoka One", cursive;
  font-size: 3.5rem;
  margin: 0 0 15px;
  color: #3e2b1c;
  text-shadow: 2px 2px 0 #f9d59b, 4px 4px 0 rgba(0, 0, 0, 0.1);
  letter-spacing: 2px;
}

.wrapper {
  background: var(--card-bg);
  border-radius: 30px;
  padding: 25px 30px 30px;
  box-shadow: var(--shadow), inset 0 0 0 4px #e6cfb3;
  transition: color 0.3s;
  color: #4a3620;
  text-align: center;
}

.player-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-size: 1.3rem;
  font-weight: 700;
}

.player-name-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.active-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.3s, box-shadow 0.3s;
}
.playerYou .active-dot {
  background: var(--p1);
  box-shadow: 0 0 12px var(--p1);
}
.playerAutoBot .active-dot {
  background: var(--p2);
  box-shadow: 0 0 12px var(--p2);
}

.position-display {
  background: #eee2d0;
  padding: 5px 18px;
  border-radius: 20px;
  font-size: 1rem;
}

.message {
  font-size: 1.4rem;
  margin: 10px 0;
  min-height: 2em;
  font-weight: 600;
  color: #6b4e31;
  letter-spacing: 0.5px;
}

.buttonWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin: 15px 0 20px;
}

#diceThrow {
  background-image: url("diceSpots.png");
  background-size: 50px;
  border: 3px solid var(--line-colour);
  border-radius: 12px;
  cursor: pointer;
  height: 60px;
  width: 60px;
  display: inline-block;
  box-shadow: 0 6px 0 #555, 0 10px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.3s;
  position: relative;
  background-color: rgba(255, 255, 240, 0.7);
  background-blend-mode: multiply;
}
#diceThrow:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #555, 0 14px 20px rgba(0, 0, 0, 0.35);
}
#diceThrow:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #555, 0 5px 10px rgba(0, 0, 0, 0.3);
}
/* Dice face positions */
#diceThrow.s6 {
  background-position: 0 0;
}
#diceThrow.s5 {
  background-position: 0 -50px;
}
#diceThrow.s4 {
  background-position: 0 -100px;
}
#diceThrow.s3 {
  background-position: 0 -150px;
}
#diceThrow.s2 {
  background-position: 0 -200px;
}
#diceThrow.s1 {
  background-position: 0 -250px;
}

/* Shaking animation while rolling */
.shaking {
  animation: shake 0.15s infinite;
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px) rotate(-5deg);
  }
  50% {
    transform: translateX(5px) rotate(5deg);
  }
  75% {
    transform: translateX(-3px) rotate(-3deg);
  }
  100% {
    transform: translateX(0);
  }
}

/* Player-specific dice styling */
.playerYou #diceThrow {
  background-color: var(--p1-alpha);
  border-color: var(--p1-dark2);
}
.playerAutoBot #diceThrow {
  background-color: var(--p2-alpha);
  border-color: var(--p2-dark2);
}

button {
  background: linear-gradient(180deg, #ffd966, #e6a800);
  border: none;
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 1.2rem;
  font-family: "Nunito", sans-serif;
  color: #3e2b1c;
  cursor: pointer;
  box-shadow: 0 5px 0 #b47d00, 0 8px 15px rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  letter-spacing: 0.5px;
}
button:hover {
  background: linear-gradient(180deg, #ffe28c, #f0b300);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #b47d00, 0 10px 20px rgba(0, 0, 0, 0.3);
}
button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b47d00, 0 4px 10px rgba(0, 0, 0, 0.2);
}

canvas {
  border: 6px solid #8b5a2b;
  border-radius: 20px;
  display: block;
  margin: 0 auto;
  box-shadow: inset 0 0 0 4px #d4a373, 0 10px 25px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s;
  background-image: url("bg.png");
  background-size: cover;
}

.playerYou canvas {
  border-color: var(--p1);
}
.playerAutoBot canvas {
  border-color: var(--p2);
}

.hidden {
  display: none !important;
}

@media (max-width: 550px) {
  .game-title {
    font-size: 2.5rem;
  }
  .wrapper {
    padding: 15px;
  }
  #diceThrow {
    height: 60px;
    width: 60px;
    background-size: 42px;
  }
}