.dice-board {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  min-height: 520px;
  padding: 20px 32px 28px;
  background:
    radial-gradient(700px 300px at 50% 55%, rgb(34 224 143 / 0.06), transparent 70%),
    var(--bg-0);
}

/* ---------- Recent results ---------- */

.dice-history {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  height: 32px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 30%);
}
.dice-pill {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 62px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: pill-in 360ms var(--ease-spring);
}
.dice-pill.is-win { background: var(--win); color: var(--win-ink); }
.dice-pill:first-child { box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3px currentColor; }
@keyframes pill-in { from { opacity: 0; transform: translateX(-16px) scale(0.8); } }

/* ---------- Slider ---------- */

.dice-stage { display: grid; align-items: center; }
.dice-slider {
  padding: 22px 26px 16px;
  border-radius: 999px;
  background: var(--bg-2);
  box-shadow: inset 0 2px 0 rgb(0 0 0 / 0.25), 0 0 0 1px var(--line);
}
.dice-track {
  --pos: 0.5;
  --win-color: var(--win);
  --lose-color: var(--loss);
  position: relative;
  height: 12px;
  border-radius: 12px;
  background: var(--bg-0);
}
.dice-track__lose, .dice-track__win {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: left 120ms var(--ease-out), right 120ms var(--ease-out), background-color 200ms;
}
/* "Under": win on the left of the handle. "Over": win on the right. */
.dice-track__win { left: 0; right: calc((1 - var(--pos)) * 100%); background: var(--win-color); border-radius: 12px 0 0 12px; }
.dice-track__lose { left: calc(var(--pos) * 100%); right: 0; background: var(--lose-color); border-radius: 0 12px 12px 0; }
.dice-track.is-over .dice-track__win { left: calc(var(--pos) * 100%); right: 0; border-radius: 0 12px 12px 0; }
.dice-track.is-over .dice-track__lose { left: 0; right: calc((1 - var(--pos)) * 100%); border-radius: 12px 0 0 12px; }
.dice-track.is-swapping .dice-track__win,
.dice-track.is-swapping .dice-track__lose { animation: track-swap 360ms var(--ease-out); }
@keyframes track-swap { from { opacity: 0.2; } }
.dice-track.flash-win { animation: track-glow-win 700ms var(--ease-out); }
.dice-track.flash-loss { animation: track-glow-loss 500ms var(--ease-out); }
@keyframes track-glow-win { from { box-shadow: 0 0 28px 4px rgb(34 224 143 / 0.55); } }
@keyframes track-glow-loss { from { box-shadow: 0 0 22px 2px rgb(255 77 99 / 0.45); } }

.dice-thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--pos) * 100%);
  width: 34px;
  height: 34px;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 9px;
  background: linear-gradient(180deg, #7fb6ff, #3d86f0);
  box-shadow: 0 2px 0 #1f5cbf, 0 6px 16px rgb(0 0 0 / 0.45);
  pointer-events: none;
  transition: left 120ms var(--ease-out), transform 160ms var(--ease-spring);
  z-index: 2;
}
.dice-thumb span { width: 2px; height: 14px; border-radius: 2px; background: rgb(255 255 255 / 0.7); }
.dice-range:active ~ .dice-thumb, .dice-track:has(.dice-range:active) .dice-thumb { transform: scale(1.1); }

/* The native range sits on top, invisible, so keyboard and screen readers work as usual. */
.dice-range {
  position: absolute;
  inset: -14px -17px;
  width: calc(100% + 34px);
  height: 40px;
  margin: 0;
  opacity: 0;
  cursor: grab;
  z-index: 3;
}
.dice-range:active { cursor: grabbing; }
.dice-track:has(.dice-range:focus-visible) .dice-thumb { outline: 2px solid var(--info); outline-offset: 3px; }

.dice-scale {
  display: flex;
  justify-content: space-between;
  margin: 20px -6px 0;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}
.dice-scale span { width: 24px; text-align: center; }

/* ---------- Result marker ---------- */

.dice-marker {
  --x: 0.5;
  --dur: 500ms;
  position: absolute;
  bottom: calc(100% + 18px);
  left: calc(var(--x) * 100%);
  translate: -50% 0;
  transition: left var(--dur) cubic-bezier(0.2, 0.9, 0.25, 1.08);
  z-index: 4;
  pointer-events: none;
}
.dice-marker__hex {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 78px;
  height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg-0);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.45);
  transition: background-color 160ms, color 160ms;
}
.dice-marker__hex::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% -1px;
  border: 8px solid transparent;
  border-top-color: var(--marker-tip, var(--text));
}
.dice-marker.is-win .dice-marker__hex { background: var(--win); color: var(--win-ink); --marker-tip: var(--win); }
.dice-marker.is-loss .dice-marker__hex { background: var(--loss); color: #fff; --marker-tip: var(--loss); }
.dice-marker.is-landed .dice-marker__hex { animation: fx-pop 380ms var(--ease-spring); }

.dice-float-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.dice-float {
  position: absolute;
  bottom: calc(100% + 72px);
  left: calc(var(--x) * 100%);
  translate: -50% 0;
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: float-up 1100ms var(--ease-out) forwards;
}
.dice-float.is-win { color: var(--win); }
.dice-float.is-loss { color: var(--text-3); }
@keyframes float-up {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-26px); }
}

/* ---------- Stats row ---------- */

.dice-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-l);
  background: var(--bg-1);
}
.dice-stats .input { background: var(--bg-0); }
.dice-target input { font-weight: 700; }

@media (max-width: 1000px) {
  .dice-board { min-height: 420px; padding: 16px 18px 18px; }
}
@media (max-width: 600px) {
  .dice-stats { grid-template-columns: 1fr 1fr; }
  .dice-stats > .field:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .dice-slider { padding: 18px 20px 14px; }
}