:root {
  --board-bg: #22c55e;
  --board-border: #166534;
  --tile-bg: #ffffff;
  --tile-border: #d1d5db;
  --dice-border: #4f46e5;
  --dice-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 0;
  background-color: var(--board-bg);
  border: 4px solid var(--board-border);
  aspect-ratio: 1 / 1;
}

.tile {
  position: relative;
  background-color: var(--tile-bg);
  border: 1px solid var(--tile-border);
  display: flex;
  flex-direction: column;
  font-size: 0.65rem;
  overflow: hidden;
}

.tile-header {
  height: 22%;
  width: 100%;
}

.tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2px;
  font-weight: 700;
  line-height: 1.2;
}

.token {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, left 0.3s ease, top 0.3s ease;
  z-index: 10;
}

.dice-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dice {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid var(--dice-border);
  background: #ffffff;
  color: #1f2937;
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--dice-shadow);
}

.dice.rolling {
  animation: dice-roll 0.9s ease-in-out;
}

@keyframes dice-roll {
  0% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(90deg) scale(1.05); }
  40% { transform: rotate(180deg) scale(0.95); }
  60% { transform: rotate(270deg) scale(1.08); }
  80% { transform: rotate(360deg) scale(0.98); }
  100% { transform: rotate(450deg) scale(1); }
}