/* THE BONES TABLE (futures plan F09, 2026-10-09; client/js/ui/dice.js).
   Three dice with CSS pips, no images. A set's own colours come from its item
   record (dice.colour, dice.pip) as --dice-colour / --dice-pip; plain dice
   are parchment with dark pips. One column on a phone, 56px faces. */
.dice-overlay {
  position: fixed;
  inset: 0;
  z-index: 550; /* above modals (500), below the tour */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--bg-base) 78%, transparent);
}
.dice-panel {
  width: 100%;
  max-width: 22rem;
  box-sizing: border-box;
  background: var(--bg-panel);
  border: 1px solid var(--gild-faint);
  border-radius: 8px;
  padding: 0.8rem;
}
.dice-head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-small); color: var(--accent-gold); margin-bottom: 0.6rem; }
.dice-row { display: flex; justify-content: center; gap: 0.6rem; }
.dice-slot { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.dice-keep { font-size: var(--fs-micro); color: var(--accent-gold); min-height: 1em; }
.dice-face {
  --dice-colour: var(--text-primary);
  --dice-pip: var(--bg-base);
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  padding: 7px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  background: var(--dice-colour);
  border: 2px solid var(--border-dim);
  border-radius: 9px;
  cursor: default;
}
button.dice-face { cursor: pointer; }
.dice-face.kept { border-color: var(--accent-gold); box-shadow: 0 0 0 2px var(--gild-faint); }
.dice-face span { width: 9px; height: 9px; border-radius: 50%; }
.dice-face span.pip { background: var(--dice-pip); }
.dice-hand { text-align: center; font-size: var(--fs-small); color: var(--text-primary); margin: 0.4rem 0; min-height: 1.2em; }
.dice-sides { display: flex; flex-direction: column; gap: 0.6rem; }
.dice-who { text-align: center; font-size: var(--fs-fine); color: var(--text-muted); margin-bottom: 0.25rem; }
.dice-note { text-align: center; font-size: var(--fs-fine); color: var(--accent-ember); margin-top: 0.4rem; }
.dice-win { color: var(--status-online); }
.dice-loss { color: var(--text-danger); }
.dice-actions { display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; }

/* THE TABLE MOVES (her list G, 2026-10-11). CSS only: a thrown die tumbles in,
   a kept one settles, the two hands are turned up one after the other, and the
   pot slides to whoever took it. `.thrown` is set by ui/dice.js on the dice the
   last throw rolled; `.dice-side` carries its turn in --dice-turn. */
@keyframes dice-tumble {
  0%   { transform: translate(-18px, -26px) rotate(-200deg) scale(0.7); opacity: 0; }
  60%  { transform: translate(4px, 3px) rotate(14deg) scale(1.04); opacity: 1; }
  80%  { transform: translate(-2px, 0) rotate(-6deg); }
  100% { transform: none; }
}
@keyframes dice-turn-up {
  0%   { transform: rotateX(90deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes dice-pot-win  { 0% { transform: translateY(1.6rem) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-1.1rem); opacity: 0; } }
@keyframes dice-pot-loss { 0% { transform: translateY(-1.6rem) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(1.1rem); opacity: 0; } }
.dice-face.thrown { animation: dice-tumble 0.55s cubic-bezier(.2, .7, .3, 1) both; }
.dice-row .dice-slot:nth-child(2) .dice-face.thrown { animation-delay: 0.06s; }
.dice-row .dice-slot:nth-child(3) .dice-face.thrown { animation-delay: 0.12s; }
.dice-face { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.dice-face.kept { transform: translateY(3px); }
.dice-side { animation: dice-turn-up 0.45s ease both; animation-delay: var(--dice-turn, 0s); }
.dice-side .dice-face { animation: dice-tumble 0.5s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--dice-turn, 0s) + 0.1s); }
.dice-pot { position: relative; height: 0; display: flex; justify-content: center; pointer-events: none; }
.dice-pot::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-gold); box-shadow: 0 0 6px var(--gild-faint); opacity: 0; }
.dice-pot.win::before  { animation: dice-pot-win 0.9s ease 1.1s both; }
.dice-pot.loss::before { animation: dice-pot-loss 0.9s ease 1.1s both; }
@media (prefers-reduced-motion: reduce) {
  .dice-face, .dice-face.thrown, .dice-side, .dice-side .dice-face, .dice-pot::before { animation: none !important; transition: none !important; }
  .dice-pot::before { opacity: 0; }
}