.histogram-section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.histogram-section h2 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.histogram-section p {
  max-width: 640px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 1rem;
}

.forecast-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
  margin-bottom: 1rem;
}

.forecast-toggle input {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
}

.histogram-widget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  margin: 1.5rem 0;
}

.coin-widget,
.die-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* perspective on the parent, transform-style on the coin itself: standard
   pairing needed for the flip to look like it's rotating in 3D rather than
   just squashing flat. */
.coin-stage {
  perspective: 600px;
}

.coin {
  width: 72px;
  height: 72px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 3px solid var(--accent-dark);
  backface-visibility: hidden;
}

/* Pre-rotated so it only ever faces the viewer once the coin itself has
   turned another 180 degrees to meet it -- the two faces never show at once. */
.coin-face-tails {
  transform: rotateY(180deg);
  background: #1baf7a;
  border-color: #199e70;
}

.die-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
}

.two-dice-stage {
  gap: 12px;
}

.die {
  width: 72px;
  height: 72px;
  box-sizing: border-box;
  background: #fff;
  border: 3px solid var(--accent-dark);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.die.rolling {
  animation: die-roll 0.65s ease-in-out;
}

@keyframes die-roll {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-14deg) scale(1.08); }
  50% { transform: rotate(12deg) scale(0.94); }
  75% { transform: rotate(-6deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

.pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent-dark);
  align-self: center;
  justify-self: center;
  opacity: 0;
}

/* Each face lights up exactly the pips a physical die shows for that
   number, using the standard 3x3 layout (pip-1 = top-left ... pip-9 =
   bottom-right, numbered left-to-right, top-to-bottom). */
.die[data-face="1"] .pip-5 {
  opacity: 1;
}

.die[data-face="2"] .pip-1,
.die[data-face="2"] .pip-9 {
  opacity: 1;
}

.die[data-face="3"] .pip-1,
.die[data-face="3"] .pip-5,
.die[data-face="3"] .pip-9 {
  opacity: 1;
}

.die[data-face="4"] .pip-1,
.die[data-face="4"] .pip-3,
.die[data-face="4"] .pip-7,
.die[data-face="4"] .pip-9 {
  opacity: 1;
}

.die[data-face="5"] .pip-1,
.die[data-face="5"] .pip-3,
.die[data-face="5"] .pip-5,
.die[data-face="5"] .pip-7,
.die[data-face="5"] .pip-9 {
  opacity: 1;
}

.die[data-face="6"] .pip-1,
.die[data-face="6"] .pip-3,
.die[data-face="6"] .pip-4,
.die[data-face="6"] .pip-6,
.die[data-face="6"] .pip-7,
.die[data-face="6"] .pip-9 {
  opacity: 1;
}

.histogram-controls {
  display: flex;
  gap: 0.75rem;
}

.histogram-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}

.histogram-btn:hover:not(:disabled) {
  background: var(--accent-dark);
}

.histogram-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.histogram-btn-batch {
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.histogram-btn-batch:hover:not(:disabled) {
  background: var(--bg-alt);
}

.probability-widget {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.probability-widget .probability-question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.probability-select {
  font: inherit;
  font-weight: 700;
  color: var(--accent-dark);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  background: #fff;
}

.probability-comparison-group {
  display: inline-flex;
  gap: 0.4rem;
}

.probability-comparison-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}

.probability-comparison-btn.is-selected {
  color: #fff;
  background: var(--accent);
}

.chart {
  width: 100%;
  max-width: 360px;
  height: auto;
}

.chart .axis {
  stroke: var(--border);
  stroke-width: 1;
}

.chart .tick {
  stroke: var(--border);
  stroke-width: 1;
}

.chart .tick-label {
  fill: var(--muted);
  font-size: 8px;
  text-anchor: middle;
}

.chart .tick-label-y {
  text-anchor: end;
}

.chart .axis-label {
  fill: var(--muted);
  font-size: 9px;
  text-anchor: middle;
}

.chart .histogram-bar {
  fill: var(--accent);
  fill-opacity: 0.75;
}

.chart .histogram-percent-label {
  fill: var(--accent-dark);
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
}

.chart .coin-face-circle {
  fill: var(--accent);
  stroke: var(--accent-dark);
  stroke-width: 1.5;
}

.chart .coin-face-icon-tails .coin-face-circle {
  fill: #1baf7a;
  stroke: #199e70;
}

.chart .coin-face-text {
  fill: #fff;
  font-size: 10px;
  font-weight: 700;
}

.chart .bucket-tails {
  fill: #1baf7a;
}

.chart .die-face-rect {
  fill: #fff;
  stroke: var(--accent-dark);
  stroke-width: 1.5;
}

.chart .die-face-pip {
  fill: var(--accent-dark);
}

/* Forecast boundary + range on the die chart: a muted dashed line marks
   where the qualifying rolls start, matched by an accent-colored line
   spanning across them, labeled with the live percentage. */
.chart .reference-line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.chart .forecast-line {
  stroke: var(--accent-dark);
  stroke-width: 1.5;
}

/* A white halo (paint-order + stroke) keeps the label legible over any bar
   it happens to sit above. */
.chart .forecast-line-label {
  fill: var(--accent-dark);
  font-size: 8px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* ── Presentation mode (see spec.md's "Presentation mode", ../styles.css) ──
   One section at a time (presentation.ts shows only the current chapter).
   The coin or dice and their buttons sit left of the chart, which grows as
   far as the screen's height allows once the heading, slide title and the
   toggle or probability question below it are counted; the chart is 4:3. */
@media (min-width: 601px) {
  /* The heading stays at the top of every slide, so it doesn't jump between
     sections of different heights; the auto margins above the widget and on
     ::after centre the rest in the space below it. */
  body[data-presenting] .histogram-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  body[data-presenting] .histogram-section::after {
    content: "";
    margin-top: auto;
  }

  body[data-presenting] .histogram-section h2 {
    font-size: 1.5rem;
  }

  body[data-presenting] .histogram-widget {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4rem;
    margin: auto 0 1.5rem;
  }

  body[data-presenting] .histogram-section > .forecast-toggle {
    display: flex;
  }

  body[data-presenting] .histogram-section > .forecast-toggle,
  body[data-presenting] .probability-widget {
    width: fit-content;
    margin-inline: auto;
  }

  body[data-presenting] .chart {
    flex: 1;
    min-width: 0;
    max-width: calc((var(--present-height) - 20rem - var(--present-title-height)) * 4 / 3);
  }
}