/* Dice visualisation (#11): CSS 3D d6 cubes, the tray they tumble in, and the inline roll chips.
   Spec: docs/superpowers/specs/2026-10-24-dice-viz-design.md. Worn bone dice that sit with the Salvaged Workhorse
   themes; tokens below follow [data-theme="day"|"night"] like style.css. No overlay, no layout shift: the tray is
   absolutely positioned and click-through, and chips that are still to be revealed keep their space. */
:root,
[data-theme="day"],
[data-theme="light"] {
  --die-hi: #f3ead2;
  --die-body: #e2d5b4;
  --die-lo: #bfae86;
  --die-edge: #8c7a55;
  --die-pip: #2b1d17;
  --die-pip-red: #8a2d20;
}
[data-theme="night"],
[data-theme="dark"] {
  --die-hi: #d9c79d;
  --die-body: #bca67a;
  --die-lo: #8f7b52;
  --die-edge: #5d4c30;
  --die-pip: #1a120e;
  --die-pip-red: #7a241a;
}

/* ---------------------------------------------------------------- one pip face (cube sides and chip dice) */
.dface {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  box-sizing: border-box;
  padding: 15%;
  border-radius: 20%;
  background:
    radial-gradient(circle at 18% 82%, rgb(0 0 0 / 9%) 0 5%, transparent 6%),
    radial-gradient(circle at 84% 14%, rgb(0 0 0 / 7%) 0 4%, transparent 5%),
    radial-gradient(circle at 30% 24%, var(--die-hi), var(--die-body) 60%, var(--die-lo));
  box-shadow: inset 0 0 0 1px var(--die-edge), inset 0 -0.18em 0.3em rgb(0 0 0 / 20%);
}
.dface .pip {
  place-self: center;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: var(--die-pip);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 55%);
  opacity: 0;
}
.pip.p1 { grid-area: 1 / 1; }
.pip.p2 { grid-area: 1 / 2; }
.pip.p3 { grid-area: 1 / 3; }
.pip.p4 { grid-area: 2 / 1; }
.pip.p5 { grid-area: 2 / 2; }
.pip.p6 { grid-area: 2 / 3; }
.pip.p7 { grid-area: 3 / 1; }
.pip.p8 { grid-area: 3 / 2; }
.pip.p9 { grid-area: 3 / 3; }
.dface[data-v="1"] .p5,
.dface[data-v="2"] .p1, .dface[data-v="2"] .p9,
.dface[data-v="3"] .p1, .dface[data-v="3"] .p5, .dface[data-v="3"] .p9,
.dface[data-v="4"] .p1, .dface[data-v="4"] .p3, .dface[data-v="4"] .p7, .dface[data-v="4"] .p9,
.dface[data-v="5"] .p1, .dface[data-v="5"] .p3, .dface[data-v="5"] .p5, .dface[data-v="5"] .p7, .dface[data-v="5"] .p9,
.dface[data-v="6"] .p1, .dface[data-v="6"] .p3, .dface[data-v="6"] .p4,
.dface[data-v="6"] .p6, .dface[data-v="6"] .p7, .dface[data-v="6"] .p9 {
  opacity: 1;
}
.dface[data-v="1"] .p5 {
  background: var(--die-pip-red);
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- the tray and the cubes */
.chat-msg {
  position: relative;
}
.dice-tray {
  position: absolute;
  top: -2px;
  right: 14px;
  width: 190px;
  height: 58px;
  z-index: 30;
  pointer-events: none;
}
.dice-set {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.55rem;
  filter: drop-shadow(0 5px 3px rgb(0 0 0 / 38%));
  transition: transform 320ms cubic-bezier(0.5, 0, 0.85, 0.35), opacity 320ms ease-in;
}
.dice-set.is-flying {
  opacity: 0;
}
.die {
  --s: 2.1rem;
  display: block;
  width: var(--s);
  height: var(--s);
  perspective: 460px;
}
.die-hop {
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.die-cube {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* The settled orientation: face data-v toward the viewer, a few degrees off square. */
  transform: rotateX(var(--ex)) rotateY(var(--ey)) rotateZ(var(--ez));
}
.die .side {
  position: absolute;
  inset: 0;
}
.side-front  { transform: translateZ(calc(var(--s) / 2)); }
.side-back   { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.side-right  { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.side-left   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.side-top    { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.side-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.dice-set.is-tumbling .die-cube {
  animation: die-tumble 650ms cubic-bezier(0.15, 0.65, 0.3, 1) both;
}
.dice-set.is-tumbling .die-hop {
  animation: die-hop 650ms ease-out both;
}
.dice-set.is-tumbling .die:nth-child(2) .die-cube { animation-duration: 600ms; }
.dice-set.is-tumbling .die:nth-child(3) .die-cube { animation-duration: 700ms; }
@keyframes die-tumble {
  from { transform: rotateX(var(--sx)) rotateY(var(--sy)) rotateZ(var(--sz)); }
  to   { transform: rotateX(var(--ex)) rotateY(var(--ey)) rotateZ(var(--ez)); }
}
@keyframes die-hop {
  0%   { transform: translate(var(--tx), -0.9rem) scale(1.15); }
  50%  { transform: translate(0, 0) scale(1); }
  68%  { transform: translate(0, -0.4rem) scale(1.04); }
  84%  { transform: translate(0, 0) scale(1); }
  92%  { transform: translate(0, -0.12rem); }
  100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------- the inline chip */
.roll-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0 0.25em;
  padding: 0.04em 0.5em 0.04em 0.32em;
  background: var(--paper-2);
  color: var(--paper-ink);
  border: 1px solid var(--brass);
  border-radius: 0.5em;
  font: 600 0.8em/1.5 var(--font-mono);
  white-space: nowrap;
  vertical-align: baseline;
  cursor: pointer;
  user-select: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.roll-chip:hover {
  border-color: var(--inline-accent);
}
.roll-chip:focus-visible {
  outline: 2px solid var(--inline-accent);
  outline-offset: 2px;
}
.roll-chip .chip-dice {
  display: inline-flex;
  gap: 0.18em;
}
.dface--flat {
  display: inline-grid;
  width: 1.4em;
  height: 1.4em;
  padding: 0.16em;
  border-radius: 0.24em;
  vertical-align: -0.25em;
}
.roll-chip .chip-note {
  color: var(--inline-accent);
}
.roll-chip.is-pending {
  opacity: 0;
  transform: scale(0.6);
}
.roll-chip.is-hit {
  animation: chip-hit 1500ms ease-out;
}
.roll-chip.is-still {
  background: var(--hazard);
  border-color: var(--inline-accent);
}
@keyframes chip-hit {
  0%   { transform: scale(0.8); background: var(--hazard); box-shadow: 0 0 0 0 var(--inline-accent); }
  18%  { transform: scale(1.14); }
  40%  { transform: scale(1); box-shadow: 0 0 0 0.5em transparent; }
  100% { background: var(--paper-2); box-shadow: 0 0 0 0 transparent; }
}
.roll-chip[data-tooltip]:hover::after,
.roll-chip[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 50;
  left: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 260px;
  padding: 7px 9px;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border: 2px ridge var(--brass);
  font: 11px/1.4 var(--font-mono);
  white-space: normal;
}
/* Rolls with no matching spot in the text sit in a row at the end of the message. */
.roll-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--brass);
}
.roll-chips .roll-chip {
  margin: 0;
}

/* ---------------------------------------------------------------- the on/off control (sidebar) */
#btn-dice[aria-pressed="false"] svg {
  opacity: 0.45;
}

@media (max-width: 640px) {
  .dice-tray {
    right: 8px;
    top: -2px;
    width: 150px;
  }
  .die {
    --s: 1.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dice-tray {
    display: none;
  }
  .roll-chip.is-pending {
    opacity: 1;
    transform: none;
  }
}