/* games/dice.css  -  Dice: horizontal threshold-slider hero + roll-history strip. */
.dice-slider {
  padding: var(--s-7) 0;
  background: linear-gradient(90deg, transparent, rgba(255,107,53,0.05) 50%, transparent), var(--paper);
  border-bottom: 1px solid var(--rule);
}
.dice-slider__h1 { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3.2rem); margin: var(--s-3) 0 var(--s-3);  line-height: 1.05; }
.dice-slider__id { display: inline-block; padding: 5px 12px; background: rgba(255,107,53,0.08); border-left: 3px solid var(--brand); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.2em; color: var(--brand); text-transform: uppercase; }
.dice-slider__lede { color: var(--ink-dim); font-size: 1.05rem;  }

.dice-range {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--rule);
}
.dice-range__bar {
  position: relative; height: 18px;
  background: linear-gradient(90deg, var(--surface-3), var(--surface-3));
  border: 1px solid var(--rule);
  margin: var(--s-4) 0;
}
.dice-range__fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 50%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.dice-range__needle {
  position: absolute; top: -4px; bottom: -4px;
  left: 50%; width: 3px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--brand);
}
.dice-range__scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 14px; color: var(--ink-mute); letter-spacing: 0.18em; }
.dice-range__stats {
  display: flex; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: 14px;
}
.dice-range__stats strong { color: var(--brand); }

.dice-rolls {
  padding: var(--s-7) 0; border-bottom: 1px solid var(--rule);
}
.dice-rolls__head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-5); }
.dice-rolls__head h2 { font-family: var(--font-serif); font-size: var(--t-h2); margin: 0; }
.dice-rolls__strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px;
  font-family: var(--font-mono);
}
.dice-roll {
  padding: var(--s-3) var(--s-2);
  background: var(--surface); border: 1px solid var(--rule);
  text-align: center; font-size: 14px; color: var(--ink-mute);
  letter-spacing: 0.1em;
}
.dice-roll strong { display: block; font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); }
.dice-roll--hit { border-color: var(--brand); color: var(--brand); }
.dice-roll--hit strong { color: var(--brand); }
.dice-roll--miss { background: var(--surface-2); }

.dice-body { padding: var(--s-7) 0; }
.dice-body__inner {  }

.dice-related { padding: var(--s-7) 0; border-top: 1px solid var(--rule); }
.dice-related h2 { font-family: var(--font-serif); font-size: var(--t-h2); margin: 0 0 var(--s-5); }
.dice-related__list { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.dice-related-chip {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--brand); text-decoration: none; color: inherit;
}
.dice-related-chip strong { font-family: var(--font-serif); color: var(--ink); }
.dice-related-chip span { font-family: var(--font-mono); font-size: 14px; color: var(--brand); }

.dice-toc { padding: var(--s-5) 0; background: var(--surface-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.dice-toc__title { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.22em; color: var(--brand); margin: 0 0 var(--s-3); text-transform: uppercase; }
.dice-toc__list { display: grid; gap: 4px; }
.dice-toc__row { display: grid; grid-template-columns: 44px 1fr 100px; gap: var(--s-3); align-items: center; padding: 6px var(--s-3); background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 14px; }
.dice-toc__num { color: var(--brand); font-weight: 700; }
.dice-toc__bar { height: 6px; background: var(--rule); position: relative; }
.dice-toc__bar span { display: block; height: 100%; background: var(--brand); }
.dice-toc__row:hover { background: var(--brand-soft); }