/* Styles for the embedded dice simulator. Uses paper.css's colours so
   it tracks light/dark mode automatically. */
.dice-sim {
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  background: var(--paper-inset);
  font-size: 0.85rem;
}

.ds-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 1rem;
}
.ds-spacer { flex: 1 1 auto; }

.dice-sim button {
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 5px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.dice-sim button:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.ds-toggle.ds-on {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--paper);
}

.ds-label {
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.6rem 0 0.3rem;
}

/* Histogram: one flex column per sum, bar height set as a percentage. */
.ds-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  height: 140px;
}
.ds-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}
.ds-count {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: var(--ink-muted);
  height: 1em;
}
.ds-stack {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
}
.ds-bar {
  width: 100%;
  height: 0;
  background: var(--teal);
  border-radius: 2px 2px 0 0;
  transition: height 0.25s ease;
}
/* Dashed line marking the expected count under fair 2d6, for comparison. */
.ds-marker {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 55%, transparent);
  transition: bottom 0.25s ease;
}
.ds-axis {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}

/* Deck panel: a small stack of cards per sum, dimmed as they are drawn. */
.ds-deck {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  transition: opacity 0.2s ease;
}
.ds-deck.ds-faded { opacity: 0.4; }
.ds-deck-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}
.ds-deck-col .ds-axis { order: 1; }
.ds-card {
  height: 9px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--teal) 70%, transparent);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.ds-card.ds-drawn {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.ds-status {
  margin-top: 0.8rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}