.dice-game {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.dice-board,.dice-params,.dice-stake,.dice-totals {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 10px;
}
.dice-board {
  background: radial-gradient(ellipse at top,var(--theme-glow),var(--panel) 78%);
  padding-inline: clamp(10px,3.5vw,17px);
}
.dice-history-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.dice-history-strip > button { flex: none; white-space: nowrap; }
.dice-recent { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.dice-pill {
  display: inline-grid;
  place-items: center;
  border-radius: 20px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: var(--rail);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.dice-pill.won { color: #c1f2bd; border-color: #80bf7a7d; background: #29553c; }
.dice-pill.lost { color: #efc0bd; border-color: #cf837765; background: #4d3534; }
.dice-scale { position: relative; height: 42px; margin: 27px 11px 0; }
.dice-track {
  position: absolute;
  inset: 14px 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #ffffff27;
  border-radius: 20px;
  background: #aa554e;
  box-shadow: inset 0 1px 3px #0004;
}
.dice-win-zone,.dice-lose-zone { position: absolute; inset: 0; }
.dice-lose-zone { background: linear-gradient(#c47164,#a64e49); }
.dice-win-zone { background: linear-gradient(#76b96f,#438858); }
[data-direction=over] .dice-win-zone { clip-path: inset(0 0 0 var(--split)); }
[data-direction=under] .dice-win-zone { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.dice-scale[data-flash=won] .dice-win-zone { animation: dice-win-flash 650ms ease-out; }
.dice-scale[data-flash=lost] .dice-lose-zone { animation: dice-loss-flash 650ms ease-out; }
.dice-scale[data-flash=won] .dice-track { animation: dice-track-flash 650ms ease-out; color: #a6ea9c; }
.dice-scale[data-flash=lost] .dice-track { animation: dice-track-flash 650ms ease-out; color: #f5a092; }
input.dice-slider[type=range] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0 auto 0 calc(var(--range-start) - 11px);
  width: calc(100% - var(--range-start) - var(--range-end) + 22px);
  height: 42px;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}
.dice-slider::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.dice-slider::-moz-range-track { height: 22px; background: transparent; }
.dice-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #f6e2be;
  border-radius: 50%;
  background: #554735;
  box-shadow: 0 2px 5px #0008;
}
.dice-slider::-moz-range-thumb {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 2px solid #f6e2be;
  border-radius: 50%;
  background: #554735;
  box-shadow: 0 2px 5px #0008;
}
.dice-slider:disabled { cursor: default; }
.dice-marker {
  position: absolute;
  top: 1px;
  z-index: 2;
  width: 2px;
  height: 36px;
  border-radius: 2px;
  translate: -50% 0;
  background: currentColor;
  color: #f9e0ab;
  box-shadow: 0 0 6px currentColor;
  pointer-events: none;
}
.dice-marker b {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  border: 1px solid currentColor;
  border-radius: 7px;
  padding: 3px 5px;
  background: var(--rail);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dice-marker[data-result=won],.dice-outcome[data-result=won] { color: #b6e8a8; }
.dice-marker[data-result=lost],.dice-outcome[data-result=lost] { color: #f0a79b; }
.dice-ticks {
  position: relative;
  height: 14px;
  margin: -3px 11px 0;
  color: var(--muted);
  font-size: 11px;
}
.dice-ticks > span { position: absolute; translate: -50% 0; }
.dice-ticks > :nth-child(2) { left: 25%; }
.dice-ticks > :nth-child(3) { left: 50%; }
.dice-ticks > :nth-child(4) { left: 75%; }
.dice-ticks > :last-child { left: 100%; }
.dice-outcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 21px;
  margin-top: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.dice-outcome:empty { display: none; }
.dice-fields { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dice-params,.dice-stake { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.dice-params label,.dice-stake label,.dice-totals > span { color: var(--muted); font-size: 12px; }
.dice-params label,.dice-stake label,.dice-direction-field,.dice-totals > span { display: grid; gap: 4px; min-width: 0; }
.dice-chance { grid-column: 1 / -1; }
.dice-direction-input,.dice-amount-actions { display: flex; gap: 4px; }
.dice-input {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding-inline: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--rail);
}
.dice-direction-input .dice-input { flex: 1; }
.dice-input:focus-within { border-color: var(--accent); }
.dice-input input {
  width: 100%;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.dice-input input:focus-visible { outline: 0; }
.dice-switch.btn { flex: none; width: 44px; padding: 0; font-size: 21px; }
.dice-amount-actions { align-self: end; }
.dice-amount-actions .btn { min-width: 0; min-height: 44px; flex: 1; padding: 0 3px; white-space: nowrap; }
.dice-totals { text-align: center; }
.dice-totals strong { color: var(--ink); font-size: 16px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.dice-note { margin: 0; color: var(--muted); font-size: 12px; }
.dice-note:empty { display: none; }
.dice-submit.btn,.dice-repeat.btn { min-height: 44px; }
.dice-history-list { display: grid; gap: 7px; }
.dice-history-row {
  display: grid;
  grid-template-columns: 62px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.dice-history-row > div { display: grid; gap: 3px; min-width: 0; }
.dice-history-row small { color: var(--muted); }
@keyframes dice-win-flash { from { filter: brightness(1.6); } }
@keyframes dice-loss-flash { from { filter: brightness(1.4); } }
@keyframes dice-track-flash { from { box-shadow: 0 0 13px currentColor; } }
@media (prefers-reduced-motion: reduce) {
  .dice-game * { animation: none !important; transition: none !important; }
}