* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #17130f;
  color: #f8ead0;
  font-family: Arial, sans-serif;
  min-height: 100vh;
}

.topbar {
  height: 75px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #241b14;
  border-bottom: 1px solid #57412b;
}

.brand {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 2px;
}

.brand span {
  color: #d9a45b;
}

.status {
  color: #e9bc77;
  font-weight: bold;
}

button, select {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  background: #bd8545;
  color: #fff;
  font-weight: bold;
}

button:hover {
  background: #d39b59;
}

.game-layout {
  max-width: 1250px;
  margin: 35px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 800px) 280px;
  gap: 30px;
  align-items: start;
}

.board-wrapper {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #9a592b, #4a2613);
  border: 5px solid #c08a4b;
  border-radius: 15px;
  box-shadow: 0 15px 40px #0009;
}

canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
  touch-action: none;
}

.instruction {
  text-align: center;
  margin: 18px 0;
  color: #d5b88f;
  font-size: 14px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel {
  padding: 20px;
  background: #292018;
  border: 1px solid #59412b;
  border-radius: 12px;
}

.panel h2 {
  font-size: 14px;
  color: #dca85f;
  margin-bottom: 18px;
  letter-spacing: 1px;
}

.panel select {
  width: 100%;
}

.score-row {
  display: flex;
  justify-content: space-between;
  margin: 17px 0;
  font-size: 16px;
}

.score-row strong {
  color: #e5b66d;
  font-size: 22px;
}

.turn-indicator {
  background: #49331e;
  color: #f2c782;
  padding: 12px;
  border-radius: 7px;
  text-align: center;
  font-size: 13px;
  margin-top: 15px;
}

.panel p {
  font-size: 13px;
  color: #d6c4ad;
  line-height: 2;
}

.sound-button {
  width: 100%;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: #000c;
  z-index: 10;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: #302116;
  border: 2px solid #d4a25d;
  border-radius: 15px;
  padding: 40px;
  text-align: center;
}

.modal-content h1 {
  color: #e5b66d;
  margin-bottom: 20px;
}

.modal-content h2 {
  margin-bottom: 25px;
}

@media (max-width: 900px) {
  .game-layout {
    grid-template-columns: 1fr;
    max-width: 650px;
  }

  .sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .topbar {
    padding: 0 12px;
    height: 65px;
  }

  .brand {
    font-size: 17px;
  }

  .status {
    font-size: 11px;
  }

  .topbar button {
    padding: 9px;
    font-size: 11px;
  }

  .game-layout {
    padding: 0 10px;
    margin-top: 20px;
  }

  .board-wrapper {
    padding: 6px;
  }

  .sidebar {
    grid-template-columns: 1fr;
  }
}
/* ===== CARROM ARENA PREMIUM UPGRADE ===== */

body {
  background:
    radial-gradient(circle at top, #382416 0%, #17110d 45%, #090807 100%);
  color: #f8ead5;
  font-family: "Segoe UI", sans-serif;
}

header {
  background: linear-gradient(135deg, #24170f, #120d09);
  border-bottom: 1px solid rgba(212, 164, 91, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

h1 {
  color: #e8bd79;
  letter-spacing: 4px;
  text-shadow: 0 0 18px rgba(232, 189, 121, 0.2);
}

button, select {
  background: linear-gradient(135deg, #d5a45e, #98632f);
  color: #1b1008;
  border: 1px solid #edc88e;
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.25s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(213, 164, 94, 0.3);
  filter: brightness(1.12);
}

select {
  background: #24180f;
  color: #f8ead5;
}

canvas {
  border: 9px solid #70421f;
  border-radius: 15px;
  box-shadow:
    0 0 0 2px #d2a064,
    0 20px 55px rgba(0, 0, 0, 0.65),
    0 0 35px rgba(190, 133, 65, 0.12);
}

section, .panel, .scoreboard, .game-info {
  background: linear-gradient(145deg, #241a13, #17100c);
  border: 1px solid rgba(218, 172, 105, 0.2);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.scoreboard {
  padding: 18px;
}

.scoreboard h2, h2 {
  color: #e8bd79;
}

#turnIndicator {
  color: #f2c982;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(242, 201, 130, 0.3);
}

@media (max-width: 768px) {
  canvas {
    max-width: 100%;
    height: auto;
  }

  h1 {
    font-size: 23px;
    letter-spacing: 2px;
  }
}