:root{
  --felt-dark:#0f3d2e;
  --felt:#164a37;
  --ivory:#f6f2e7;
  --ivory-dim:#ece5d3;
  --header-gray:#dedad0;
  --header-gray-text:#6b6a5f;
  --ink:#22281f;
  --ink-soft:#5c5c52;
  --gold:#c79a4b;
  --gold-dark:#a17d38;
  --gold-bg:#f2e6c8;
  --line:#d8d2c0;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:radial-gradient(ellipse at top, var(--felt) 0%, var(--felt-dark) 70%);
  font-family:'Manrope',sans-serif;
  color:var(--ink);
  padding:48px 20px;
  display:flex;
  justify-content:center;
}
.board{ width:100%; max-width:640px; }
h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:32px;
  color:var(--ivory);
  text-align:center;
  margin:0 0 4px;
  letter-spacing:0.3px;
}
.sub{ text-align:center; color:#b9cfc2; font-size:14px; margin:0 0 32px; }
.tray{
  background:var(--felt-dark);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.dice{ display:flex; gap:12px; }
.die{
  width:52px;
  height:52px;
  background:var(--ivory);
  border-radius:9px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  padding:8px;
  box-shadow:0 3px 0 rgba(0,0,0,0.25);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  cursor:pointer;
}
.die.rolling{ transform:rotate(-8deg) scale(0.95); }
.die.held{
  background:var(--gold-bg);
  box-shadow:0 0 0 2px var(--gold), 0 3px 0 rgba(0,0,0,0.25);
}
.pip{
  width:8px; height:8px; border-radius:50%;
  background:var(--felt-dark);
  align-self:center; justify-self:center;
  opacity:0;
}
.pip.on{ opacity:1; }
.roll-side{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
button.roll{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--felt-dark);
  background:linear-gradient(180deg, #dcb668, var(--gold-dark));
  border:none;
  padding:14px 28px;
  border-radius:10px;
  cursor:pointer;
  letter-spacing:0.2px;
  box-shadow:0 3px 0 #7a5e28;
}
button.roll:active{ transform:translateY(2px); box-shadow:0 1px 0 #7a5e28; }
button.roll:disabled{
  background:#8b8b80;
  box-shadow:0 3px 0 #5f5f56;
  cursor:not-allowed;
  color:#e4e2d8;
}
.rolls-left{ font-size:12px; color:#a9c2b4; }
.turn{ text-align:center; color:var(--ivory); font-size:13px; margin:0 0 18px; letter-spacing:0.3px; }
.turn b{ color:var(--gold); font-weight:700; }
table{
  width:100%;
  border-collapse:collapse;
  background:var(--ivory);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,0.28);
}
thead th{
  background:var(--header-gray);
  color:var(--header-gray-text);
  font-family:'Manrope',sans-serif;
  font-weight:500;
  font-size:12.5px;
  letter-spacing:0.4px;
  padding:14px 10px;
  text-align:center;
  border-bottom:1px solid var(--line);
  transition:background 0.15s ease, color 0.15s ease;
}
thead th:first-child{ text-align:left; padding-left:20px; }
thead th.active{ background:var(--gold); color:var(--felt-dark); }
tbody td{
  font-size:14px;
  padding:11px 10px;
  text-align:center;
  border-bottom:1px solid var(--line);
  color:var(--ink-soft);
}
tbody td:first-child{
  text-align:left;
  padding-left:20px;
  font-family:'Fraunces',serif;
  font-weight:400;
  font-size:15.5px;
  color:var(--ink);
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr.section-end td{ border-bottom:1px solid var(--gold); }
tbody tr.total td{ font-weight:700; color:var(--ink); background:var(--ivory-dim); }
tbody tr.total td:first-child{ font-weight:500; }
td.cell{ color:var(--ink-soft); cursor:default; }
td.cell.filled{ color:var(--ink); font-weight:500; }
td.cell.possible{
  color:var(--gold-dark);
  font-weight:700;
  cursor:pointer;
  background:var(--gold-bg);
  border-radius:6px;
}
td.cell.possible:hover{ background:var(--gold); color:var(--felt-dark); }
.bonus-tag{
  font-size:11px;
  font-weight:700;
  color:var(--gold-dark);
  margin-left:2px;
}