/* ---------------------------------------------------------------
   Mensch aergere dich nicht - kreisfoermiges Spielfeld statt des
   klassischen Kreuz-Bretts: die Feldpositionen lassen sich als reine
   Prozentwerte berechnen und bleiben so ohne JS-Resize-Logik responsiv.
   --------------------------------------------------------------- */

.mensch-felt { padding: 22px 14px; }

.mensch-board {
  position: relative;
  width: min(84vw, 430px);
  aspect-ratio: 1;
  margin: 0 auto;
}

.mensch-ring-bg {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    var(--uno-red) 0% 25%, var(--uno-blue) 25% 50%,
    var(--uno-yellow) 50% 75%, var(--uno-green) 75% 100%);
  opacity: 0.15;
  mask: radial-gradient(circle, transparent 61%, #000 63%, #000 100%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 63%, #000 100%, transparent 100%);
}

.mensch-cell {
  position: absolute;
  width: 6%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.mensch-cell--start { background: color-mix(in srgb, var(--cell-color) 60%, transparent); }
.mensch-cell--home { background: color-mix(in srgb, var(--cell-color) 38%, transparent); }

.mensch-pawn {
  position: absolute;
  width: 8.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  padding: 0;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.55), transparent 55%), var(--pawn-color);
  border: 2px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 5px 12px -4px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  z-index: 2;
  transition: box-shadow 0.2s ease;
}
.mensch-pawn--playable {
  cursor: pointer;
  animation: mensch-bob 1s ease-in-out infinite;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pawn-color) 50%, transparent), 0 5px 12px -4px rgba(0, 0, 0, 0.7);
}
.mensch-pawn:disabled { cursor: default; }

@keyframes mensch-bob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -60%) scale(1.1); }
}

.mensch-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-left: auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}

/* ------------------------------------------------------------- Wuerfel */
.die {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 58px;
  height: 58px;
  padding: 9px;
  border-radius: 16px;
  background: linear-gradient(160deg, #fdfdfd, #e4e7f2);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}
.die--empty { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.die__pip { border-radius: 50%; }
.die__pip--on { background: #1a1a24; }
.die--rolled { animation: die-settle 0.5s cubic-bezier(0.3, 1.6, 0.4, 1); }
@keyframes die-settle {
  0% { transform: scale(0.4) rotate(-25deg); opacity: 0.3; }
  60% { transform: scale(1.12) rotate(8deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@media (max-width: 480px) {
  .mensch-felt { padding: 16px 8px; }
}