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

:root {
  --gold: #fbbf24;
  --gold-dark: #b45309;
  --ink: #f1f5f9;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 50% -10%, #166534, #06281a 70%);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.game { width: min(94vw, 460px); display: flex; flex-direction: column; gap: 1rem; }

header { text-align: center; }
h1 { font-size: 2rem; letter-spacing: 1px; }
.tagline { color: #86efac; font-size: .9rem; margin-top: .25rem; }

.scoreboard { display: flex; gap: .75rem; }
.score-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .9rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .08);
}
.score-card.player { border-color: rgba(74, 222, 128, .4); }
.score-card.ai { border-color: rgba(248, 113, 113, .4); }
.who { font-weight: 600; }
.pts strong { font-size: 1.5rem; }
.pts small { opacity: .55; }

.board {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: .8rem;
  text-align: center;
}
.board h2 {
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: .7;
  margin-bottom: .6rem;
}

.dice { display: flex; justify-content: center; gap: .7rem; }

.die {
  width: clamp(46px, 17vw, 68px);
  aspect-ratio: 1;
  background: linear-gradient(150deg, #ffffff, #dbe3ec);
  border-radius: 14px;
  border: none;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  box-shadow: 0 4px 0 #8b97a8, 0 6px 14px rgba(0, 0, 0, .45);
  transition: transform .12s ease, box-shadow .12s ease;
}
button.die { cursor: pointer; }
button.die:hover { transform: translateY(-2px); }
.die .cell { display: flex; align-items: center; justify-content: center; }
.die .cell.pip::after {
  content: "";
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0f172a;
}
.die.locked {
  box-shadow: 0 0 0 3px var(--gold), 0 4px 0 var(--gold-dark), 0 8px 18px rgba(251, 191, 36, .45);
  transform: translateY(-4px);
}
.die.hidden {
  background: repeating-linear-gradient(45deg, #1e293b 0 8px, #273449 8px 16px);
  color: #94a3b8;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 #0b1220, 0 6px 14px rgba(0, 0, 0, .45);
}

.hand { margin-top: .6rem; font-weight: 700; color: var(--gold); min-height: 1.2em; }

.message {
  text-align: center;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #e2e8f0;
}

.controls { display: flex; gap: .6rem; }
.btn {
  flex: 1;
  padding: .75rem 1rem;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, .12);
  color: var(--ink);
  transition: transform .1s ease, background .2s ease, opacity .2s ease;
}
.btn:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #34d399, #059669); color: #04231a; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #4ade80, #10b981); }
.btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .25); }

.rules {
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: .8rem 1rem;
  font-size: .88rem;
  line-height: 1.5;
}
.rules summary { cursor: pointer; font-weight: 700; color: #86efac; }
.rules ul, .rules ol { margin: .6rem 0 .6rem 1.2rem; }
.rules li { margin: .15rem 0; }