.dice-formula {
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--ink));
  color: var(--cream);
  background: color-mix(in srgb, var(--night) 88%, var(--red));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  font-weight: 700;
}

.dice-stage {
  position: relative;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1.2rem 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--night) 34%, var(--color-black));
  color: var(--light);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--red-dark) 32%, transparent), transparent 55%),
    linear-gradient(135deg, transparent 75%, color-mix(in srgb, var(--gold) 11%, transparent) 75%),
    var(--night);
  box-shadow:
    inset 0 0 2.5rem color-mix(in srgb, var(--night) 14%, var(--color-black)),
    0 2px 0 color-mix(in srgb, var(--cream) 35%, transparent);
}

.dice-stage::before {
  content: "";
  position: absolute;
  inset: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  clip-path: polygon(0 0, 36% 0, 39% 3px, 61% 3px, 64% 0, 100% 0, 100% 100%, 64% 100%, 61% calc(100% - 3px), 39% calc(100% - 3px), 36% 100%, 0 100%);
  pointer-events: none;
}

.dice-result-label,
.dice-detail {
  z-index: 1;
  color: color-mix(in srgb, var(--light) 68%, transparent);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.visual-dice {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0.75rem 0 0.35rem;
  padding-inline: 1rem;
  perspective: 40rem;
  transform-style: preserve-3d;

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 18%;
    bottom: 0.25rem;
    left: 18%;
    height: 0.8rem;
    border-radius: 50%;
    opacity: 0.48;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--color-black) 65%, transparent), transparent 72%);
    transform: scaleX(0.72);
  }

  &:has(.rolling)::after {
    animation: tray-impact 900ms ease-out both;
  }
}

.die {
  --die-size: 4.6rem;
  --die-face: linear-gradient(145deg, var(--red-bright), var(--red-dark));
  --start-x: -5.5rem;
  --land-x: 0.7rem;
  --bounce-x: 0.35rem;
  --settle-x: 0.175rem;
  --start-rx: 560deg;
  --start-ry: 420deg;
  --start-rz: 90deg;
  --land-rx: 195deg;
  --land-ry: 150deg;
  --land-rz: 24deg;
  --bounce-rx: 112deg;
  --bounce-ry: 82deg;
  --bounce-rz: -12deg;
  --settle-rx: 38deg;
  --settle-ry: 24deg;
  --settle-rz: 5deg;
  --last-rx: 16deg;
  --last-ry: 10deg;
  --last-rz: -2deg;
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  display: grid;
  place-items: center;
  flex: 0 0 var(--die-size);
  color: var(--cream);
  background: var(--gold);
  filter: drop-shadow(0 0.45rem 0.35rem color-mix(in srgb, var(--color-black) 35%, transparent));
  font-family: "Palatino Linotype", Palatino, serif;
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 1px 1px color-mix(in srgb, var(--color-black) 60%, transparent);
  transform-style: preserve-3d;
  transform-origin: 50% 72%;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0.18rem;
    border-radius: inherit;
    background: var(--die-face);
    clip-path: inherit;
    box-shadow: inset 0.12rem 0.12rem 0.18rem color-mix(in srgb, var(--light) 18%, transparent);
  }

  &.rolling {
    animation: die-toss 760ms cubic-bezier(0.22, 0.72, 0.2, 1) backwards;
    animation-delay: calc(var(--die-index) * 55ms);
  }

  &:nth-child(even) {
    --start-x: 5.5rem;
    --land-x: -0.7rem;
    --bounce-x: -0.35rem;
    --settle-x: -0.175rem;
    --start-rx: -560deg;
    --start-ry: -420deg;
    --start-rz: -90deg;
    --land-rx: -195deg;
    --land-ry: -150deg;
    --land-rz: -24deg;
    --bounce-rx: -112deg;
    --bounce-ry: -82deg;
    --bounce-rz: 12deg;
    --settle-rx: -38deg;
    --settle-ry: -24deg;
    --settle-rz: -5deg;
    --last-rx: -16deg;
    --last-ry: -10deg;
    --last-rz: 2deg;
  }

  &:nth-child(3n) {
    --start-x: -2.8rem;
    --land-x: 1rem;
    --bounce-x: 0.5rem;
    --settle-x: 0.25rem;
  }

  &:nth-child(4n) {
    --start-x: 3.8rem;
    --land-x: -1rem;
    --bounce-x: -0.5rem;
    --settle-x: -0.25rem;
  }
}

.visual-dice:is([data-count="4"], [data-count="5"], [data-count="6"]) .die {
  --die-size: 3.45rem;
  font-size: 1.05rem;
}

.die-d4 {
  --die-face: conic-gradient(from 210deg at 50% 68%, var(--red-dark), var(--red-bright) 33%, var(--red) 33% 67%, var(--red-dark) 67%);
  clip-path: polygon(50% 2%, 98% 92%, 2% 92%);
  padding-top: 1.1rem;
}

.die-d6 {
  --die-face:
    linear-gradient(145deg, color-mix(in srgb, var(--red-bright) 78%, var(--light)), transparent 34%),
    linear-gradient(145deg, var(--red-bright), var(--red-dark));
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 0.65rem;
  border-radius: 0.45rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cream) 22%, transparent);
}

.pip {
  width: 0.62rem;
  height: 0.62rem;
  place-self: center;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 0.12rem 0.08rem color-mix(in srgb, var(--border-dark) 38%, transparent);
}

.visual-dice:is([data-count="4"], [data-count="5"], [data-count="6"]) .pip {
  width: 0.46rem;
  height: 0.46rem;
}

.pip[data-position="tl"] { grid-area: 1 / 1; }
.pip[data-position="tr"] { grid-area: 1 / 3; }
.pip[data-position="ml"] { grid-area: 2 / 1; }
.pip[data-position="c"] { grid-area: 2 / 2; }
.pip[data-position="mr"] { grid-area: 2 / 3; }
.pip[data-position="bl"] { grid-area: 3 / 1; }
.pip[data-position="br"] { grid-area: 3 / 3; }

.die-d8 {
  --die-face: conic-gradient(from 45deg, var(--red-bright) 0 25%, var(--red) 0 50%, var(--red-dark) 0 75%, color-mix(in srgb, var(--red) 48%, var(--color-black)) 0);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.die-d10 {
  --die-face: conic-gradient(from 18deg, var(--red-dark), var(--red-bright) 20%, var(--red) 40%, var(--red-dark) 60%, var(--red-bright) 80%, var(--red-dark));
  clip-path: polygon(50% 0, 95% 35%, 78% 92%, 22% 92%, 5% 35%);
}

.die-d12 {
  --die-face: conic-gradient(from 30deg, var(--red-bright), var(--red) 17%, var(--red-dark) 34%, var(--red-bright) 51%, var(--red) 68%, var(--red-dark) 85%, var(--red-bright));
  clip-path: polygon(50% 0, 90% 20%, 100% 62%, 72% 100%, 28% 100%, 0 62%, 10% 20%);
}

.die-d20 {
  --die-face:
    linear-gradient(60deg, transparent 47%, color-mix(in srgb, var(--gold) 28%, transparent) 48% 51%, transparent 52%),
    linear-gradient(-60deg, transparent 47%, color-mix(in srgb, var(--gold) 24%, transparent) 48% 51%, transparent 52%),
    conic-gradient(from 30deg, var(--red-bright), var(--red-dark) 17%, var(--red) 34%, var(--red-bright) 51%, var(--red-dark) 68%, var(--red) 85%, var(--red-bright));
  clip-path: polygon(50% 0, 95% 24%, 100% 72%, 50% 100%, 0 72%, 5% 24%);
}

.total-label {
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: color-mix(in srgb, var(--light) 60%, transparent);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dice-result {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

@keyframes die-toss {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), -5.8rem, 0) rotateX(var(--start-rx)) rotateY(var(--start-ry)) rotateZ(var(--start-rz)) scale(0.72);
  }
  16% { opacity: 1; }
  48% {
    transform: translate3d(var(--land-x), 0.55rem, 0) rotateX(var(--land-rx)) rotateY(var(--land-ry)) rotateZ(var(--land-rz)) scale(1.08, 0.86);
  }
  62% {
    transform: translate3d(var(--bounce-x), -1.25rem, 0) rotateX(var(--bounce-rx)) rotateY(var(--bounce-ry)) rotateZ(var(--bounce-rz)) scale(0.96, 1.04);
  }
  78% {
    transform: translate3d(var(--settle-x), 0.18rem, 0) rotateX(var(--settle-rx)) rotateY(var(--settle-ry)) rotateZ(var(--settle-rz)) scale(1.04, 0.94);
  }
  88% {
    transform: translate3d(0, -0.32rem, 0) rotateX(var(--last-rx)) rotateY(var(--last-ry)) rotateZ(var(--last-rz)) scale(0.99, 1.01);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
  }
}

@keyframes tray-impact {
  0%, 35% { opacity: 0.12; transform: scaleX(0.35); }
  48% { opacity: 0.66; transform: scaleX(1.08); }
  62% { opacity: 0.35; transform: scaleX(0.76); }
  78% { opacity: 0.56; transform: scaleX(0.94); }
  100% { opacity: 0.48; transform: scaleX(0.72); }
}

.dice-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: end;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.stepper {
  height: 2.75rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--control-background);
}

.stepper button,
.stepper output {
  width: 2.6rem;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  color: var(--ink);
  background: transparent;
}

.stepper button {
  cursor: pointer;
  font-family: ui-sans-serif, sans-serif;
  font-size: 1.25rem;
}

.stepper button:active { background: color-mix(in srgb, var(--red) 14%, transparent); }

.stepper output {
  border-inline: 1px solid var(--line);
  font-family: ui-monospace, monospace;
  font-weight: 700;
}

.chip-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(2.4rem, 1fr));
  gap: 0.3rem;
}

.chip-row button {
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--control-background-subtle);
  cursor: pointer;
  font-family: ui-monospace, monospace;
  font-size: 0.76rem;
  font-weight: 700;
}

.chip-row button.selected {
  border-color: color-mix(in srgb, var(--red) 38%, var(--color-black));
  color: var(--cream);
  background: linear-gradient(var(--red), var(--red-dark));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 32%, transparent);
}

.roll-button {
  width: 100%;
  min-height: 3.4rem;
  margin-top: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--red) 38%, var(--color-black));
  color: var(--light);
  background: linear-gradient(180deg, var(--red-bright), var(--red-dark));
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--gold-bright) 24%, transparent),
    0 5px 0 color-mix(in srgb, var(--red) 42%, var(--color-black));
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(0.7rem 0, calc(100% - 0.7rem) 0, 100% 50%, calc(100% - 0.7rem) 100%, 0.7rem 100%, 0 50%);

  & span {
    margin-right: 0.5rem;
    color: var(--gold-bright);
  }

  &:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--red) 58%, var(--border));
  }

  &:disabled {
    cursor: wait;
    opacity: 0.72;
  }
}

.history {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.history h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.history ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.history li {
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  color: var(--muted);
  font-family: ui-sans-serif, sans-serif;
  font-size: 0.7rem;
}

.history li strong {
  display: block;
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
}

@media (max-width: 760px) {
  .dice-controls { grid-template-columns: 1fr; }
  .stepper { width: 8rem; }
  .stepper button,
  .stepper output { flex: 1; }
}

@media (max-width: 390px) {
  .chip-row { grid-template-columns: repeat(3, 1fr); }
  .history ol { grid-template-columns: repeat(2, 1fr); }
}