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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2a1810;
  font-family: Georgia, "Times New Roman", serif;
}

#game-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  gap: 8px;
  background: radial-gradient(ellipse at 50% 0%, #3d2818 0%, #1a1008 70%);
}

.table-header {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(800px, 100%);
  padding: 8px 14px;
  background: linear-gradient(180deg, #5c3d22 0%, #3d2814 100%);
  border: 2px solid #8b6914;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.15);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.stat-label {
  font-size: 10px;
  color: #c0a060;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #f0e8d0;
}

.header-btn {
  margin-left: auto;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 12px;
  color: #f0e8d0;
  background: linear-gradient(180deg, #6a4a28, #4a3018);
  border: 2px solid #a08040;
  border-radius: 3px;
  cursor: pointer;
}

.header-btn:active {
  background: linear-gradient(180deg, #4a3018, #3a2010);
}

#canvas-wrap {
  border: 8px solid #5c3d1e;
  border-radius: 6px;
  outline: 3px solid #2a1a0e;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  line-height: 0;
  max-width: 100%;
}

#game-canvas {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 130px);
  width: auto;
  height: auto;
  touch-action: none;
  cursor: crosshair;
}

.controls-hint {
  font-size: 11px;
  color: #a08060;
  text-align: center;
  max-width: 800px;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.overlay.hidden {
  display: none;
}

.dialog {
  background: linear-gradient(180deg, #5c3d22, #3d2814);
  border: 3px solid #8b6914;
  padding: 20px 28px;
  min-width: 280px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.dialog h2 {
  font-size: 20px;
  color: #f0d878;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.dialog p {
  font-size: 13px;
  color: #d0c0a0;
  margin-bottom: 12px;
  line-height: 1.5;
}

.dialog-btn {
  padding: 8px 24px;
  font-family: inherit;
  font-size: 13px;
  color: #f0e8d0;
  background: linear-gradient(180deg, #6a4a28, #4a3018);
  border: 2px solid #a08040;
  border-radius: 3px;
  cursor: pointer;
}

.mode-dialog {
  min-width: 320px;
}

.mode-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.mode-btn {
  width: 100%;
}

#stat-turn-wrap.player-1 { --turn-color: #7ec8ff; }
#stat-turn-wrap.player-2 { --turn-color: #ffb07e; }

#stat-turn-wrap #hud-turn {
  color: var(--turn-color);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

@keyframes turn-flash {
  0% {
    color: var(--turn-color);
    text-shadow: none;
    opacity: 1;
  }
  10% {
    color: #ffffff;
    text-shadow: 0 0 10px #fff, 0 0 20px rgba(255, 255, 255, 0.7);
    opacity: 1;
  }
  20% {
    color: var(--turn-color);
    text-shadow: 0 0 6px var(--turn-color);
    opacity: 0.85;
  }
  32% {
    color: #ffffff;
    text-shadow: 0 0 14px #fff, 0 0 28px rgba(255, 255, 255, 0.85);
    opacity: 1;
  }
  44% {
    color: var(--turn-color);
    text-shadow: 0 0 8px var(--turn-color);
    opacity: 0.9;
  }
  56% {
    color: #ffffff;
    text-shadow: 0 0 18px #fff, 0 0 36px #fff, 0 0 48px rgba(255, 255, 255, 0.6);
    opacity: 1;
  }
  68% {
    color: #f8f8f8;
    text-shadow: 0 0 22px #fff, 0 0 40px rgba(255, 255, 255, 0.9);
    opacity: 1;
  }
  82% {
    color: #ffffff;
    text-shadow: 0 0 16px #fff, 0 0 30px rgba(255, 255, 255, 0.75);
    opacity: 1;
  }
  100% {
    color: var(--turn-color);
    text-shadow: none;
    opacity: 1;
  }
}

#hud-turn.turn-flash {
  animation: turn-flash 2s ease-in-out 1 forwards;
}