* { box-sizing: border-box; }
body {
  font-family: Arial, sans-serif;
  color: #333;
  padding: 50px;
  line-height: 1.5;
  background: #fff;
}
h1 { margin: 0 0 12px; }
p { margin: 0 0 16px; }

.panel { border-radius: 0; border: none; padding: 20px; margin-bottom: 12px; }

.panel.controls,
.panel.actions { background-color: aliceblue; }

.panel.board { background-color: #eaeaea; }

.panel.actions { background-color: silver; display: flex; gap: 8px; align-items: center; }

.board {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.player {
  border: 1px dashed #cfd8e3;
  padding: 20px;
  border-radius: 0;
  background: transparent;
}
.player.active { outline: 2px solid #7aa6d8; }
.total { font-weight: bold; }

.dicearea { display: flex; gap: 12px; justify-content: center; align-items: center; padding: 8px; }
.dicearea img { width: 72px; height: 72px; object-fit: cover; border: 1px solid #cfd8e3; border-radius: 6px; }

label { display: inline-flex; align-items: center; gap: 6px; }
input[type="text"], input[type="number"] {
  padding: 6px 8px;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
}
button {
  padding: 10px;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
button:disabled { opacity: .6; cursor: not-allowed; }

.small { font-size: 12px; color: #555; margin-left: 8px; }