/* Board and Layout Styles */
:root{
  --board-bg: #f3ead9;
  --board-edge: #332a21;
  --tile-bg: #fffdf7;
  --tile-accent: #e7c3a3;
  --muted: #666b6d;
  --accent: #b45a2f;
  --glass: rgba(255,255,255,0.6);
}

/* make sizing predictable */
*, *::before, *::after { box-sizing: border-box; }

/* Reset list markers globally to avoid stray bullets/dots */
ul, ol { list-style: none; padding-left: 0; margin: 0; }
li::marker { content: ''; }

body {
  margin: 0;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(0,0,0,0.02), transparent 20%),
    linear-gradient(180deg, #f8f6f2 0%, #efe6d6 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.board {
  position: relative;
  width: min(720px, 90vmin);
  height: min(720px, 90vmin);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--board-bg) 0%, #efe6d6 100%);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), inset 0 3px 0 rgba(255,255,255,0.2);
  border: 8px solid var(--board-edge);
  overflow: visible;
}

/* Layout: board + sidebar */
.layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  flex-wrap: wrap;
  max-width: 100%;
}

/* Left-side history panel showing game actions */
.history-panel {
  width: min(280px, 90vw);
  background: linear-gradient(180deg,#fffefb,#f6f6f8);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
  height: min(720px, 90vmin);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.history-header h3 { margin: 0; font-size: 1.05rem; }
.history-header button { padding:6px 8px; font-weight:700; border-radius:8px; cursor:pointer; border:none; background:#eee; }

.action-history {
  background: linear-gradient(180deg,#ffffff,#fbfbfd);
  border-radius: 10px;
  padding: 8px;
  height: calc(100% - 48px);
  overflow-y: auto;
  box-shadow: inset 0 6px 12px rgba(0,0,0,0.04);
}

.history-entry { font-size: 12px; color: var(--board-edge); margin-bottom: 8px; padding:6px 8px; border-radius:6px; background: rgba(0,0,0,0.03); }

.sidebar {
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.player-panels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.player-panel {
  background: linear-gradient(180deg,#fffef7,#f7f3ea);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--board-edge);
  position: relative;
}

.player-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

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

.player-panel .player-badge {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.player-panel.active {
  box-shadow: 0 16px 30px rgba(0,0,0,0.18), 0 0 0 3px rgba(255,165,0,0.18);
  transform: translateX(2px);
  border-left: 6px solid var(--accent);
  background: linear-gradient(180deg,#fffaf0,#fff3da);
}

.turn-indicator {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #a34700;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 16px rgba(255,165,0,0.25);
  position: relative;
}

.turn-indicator__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fffbeb 20%, #ff9800 100%);
  box-shadow: 0 0 0 0 rgba(255,152,0,0.55);
  animation: turnPulse 1.4s infinite ease-out;
}

.player-panel.active .turn-indicator { display: inline-flex; }

.player-panel.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: radial-gradient(circle at 10% 20%, rgba(255,183,77,0.25), rgba(255,148,0,0.05));
  pointer-events: none;
  opacity: 0.85;
  animation: turnGlow 1.8s infinite ease-in-out;
}

/* Player pieces */
.player-piece {
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg,#ffd27a,#ffb84d);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  box-shadow: 0 4px 8px rgba(0,0,0,0.28);
  border: 1px solid rgba(0,0,0,0.16);
  transition: transform 0.18s ease, top 0.3s, left 0.3s;
  pointer-events: none;
}

.player-panel h3 { margin: 0; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.2s ease; }
.player-panel h3.locked { cursor: default; }

@keyframes turnPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,152,0,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(255,152,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,152,0,0); }
}

@keyframes turnGlow {
  0% { opacity: 0.8; transform: scale(0.99); }
  50% { opacity: 1; transform: scale(1.01); }
  100% { opacity: 0.8; transform: scale(0.99); }
}

.player-piece.dimmed {
  opacity: 0.35;
  filter: brightness(0.8) saturate(0.8);
  transition: opacity 200ms ease, filter 200ms ease;
}

/* Responsive Layout */
@media (max-width: 900px) {
  .history-panel { 
    width: 100%;
    max-width: 500px;
    height: auto;
    min-height: 300px;
  }
  .layout {
    flex-direction: column-reverse;
    align-items: center;
  }
  .sidebar { width: 100%; max-width:640px; }
}

@media (max-width: 768px) {
  .board {
    width: min(95vw, 95vmin);
    height: min(95vw, 95vmin);
  }
  .layout {
    padding: 10px;
  }
}