/* Double Dice Derby engine */
.qt-eng-dice { container-type: inline-size; }

.qt-dice {
  --qt-dice-glow: color-mix(in srgb, var(--qt-accent, #ff7a3d) 50%, transparent);
  --qt-dice-win: #39e58c;
  --qt-dice-lose: #ff4f6a;
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  color: var(--qt-ink, #f6f1ff);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@container (min-width: 780px) {
  .qt-dice { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
}

.qt-dice-play {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: clamp(14px, 3vw, 26px);
  border-radius: calc(var(--qt-r, 16px) + 6px);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--qt-accent, #ff7a3d) 20%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(30, 20, 56, .86), rgba(12, 8, 28, .92));
  border: 1px solid color-mix(in srgb, var(--qt-accent, #ff7a3d) 35%, transparent);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 34px var(--qt-dice-glow), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
}

.qt-dice-show { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 34px); padding: 6px 0 4px; }
.qt-dice-pair { display: flex; gap: clamp(8px, 2vw, 14px); }
.qt-dice-die {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8%;
  width: clamp(54px, 12vw, 84px);
  aspect-ratio: 1;
  padding: 13%;
  border-radius: 22%;
  background: linear-gradient(150deg, #ffffff, #e9e3f5 60%, #c8bfdc);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .14), inset 0 2px 0 #fff, 0 8px 18px rgba(0, 0, 0, .45);
}
.qt-dice-die--a {
  background: linear-gradient(150deg, color-mix(in srgb, var(--qt-accent, #ff7a3d) 55%, #fff), var(--qt-accent, #ff7a3d) 60%, color-mix(in srgb, var(--qt-accent, #ff7a3d) 70%, #000));
  transform: rotate(-8deg);
}
.qt-dice-die--b { transform: rotate(7deg); }
.qt-dice-pip { border-radius: 50%; background: transparent; }
.qt-dice-pip.is-on { background: radial-gradient(circle at 35% 30%, #4a3a66, #160c28); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
.qt-dice-die--a .qt-dice-pip.is-on { background: radial-gradient(circle at 35% 30%, #fff, #f1e6ff); }
.qt-dice-die.is-tumble { animation: qt-dice-tumble .32s linear infinite; }
.qt-dice-die--b.is-tumble { animation-direction: reverse; animation-duration: .28s; }
@keyframes qt-dice-tumble {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

.qt-dice-readout { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.qt-dice-num {
  font-size: clamp(40px, 9vw, 70px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .3);
}
.qt-dice-tag { font-size: 13px; color: var(--qt-muted, #b9b0d6); text-align: center; }
.qt-dice.is-win .qt-dice-num { color: var(--qt-dice-win); text-shadow: 0 0 24px rgba(57, 229, 140, .55), 0 4px 0 rgba(0, 0, 0, .3); animation: qt-dice-pop .3s ease-out; }
.qt-dice.is-win .qt-dice-tag { color: var(--qt-ember, #ffa63d); font-weight: 800; }
.qt-dice.is-lose .qt-dice-num { color: var(--qt-dice-lose); }
@keyframes qt-dice-pop { from { transform: scale(.95); } 60% { transform: scale(1.06); } to { transform: scale(1); } }

/* track */
.qt-dice-trackbox { position: relative; height: 64px; margin-top: 30px; container-type: inline-size; }
.qt-dice-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--qt-dice-win) 0 var(--qt-dice-b, 50%), var(--qt-dice-lose) var(--qt-dice-b, 50%) 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 5px rgba(0, 0, 0, .35), 0 0 0 6px rgba(255, 255, 255, .08);
}
.qt-dice-trackbox.is-over .qt-dice-track {
  background: linear-gradient(90deg, var(--qt-dice-lose) 0 var(--qt-dice-b, 50%), var(--qt-dice-win) var(--qt-dice-b, 50%) 100%);
}
.qt-dice-rail { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 3; will-change: transform; }
.qt-dice-pin {
  position: absolute;
  left: 0;
  bottom: -18px;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #1a0b2e;
  background: linear-gradient(180deg, #fff, #e6dcf7);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .2s ease-out;
}
.qt-dice-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: #e6dcf7;
}
.qt-dice-trackbox.has-pin .qt-dice-pin { opacity: 1; }
.qt-dice.is-win .qt-dice-pin { background: linear-gradient(180deg, #d4ffe6, var(--qt-dice-win)); }
.qt-dice.is-win .qt-dice-pin::after { border-top-color: var(--qt-dice-win); }
.qt-dice.is-lose .qt-dice-pin { background: linear-gradient(180deg, #ffd9df, var(--qt-dice-lose)); }
.qt-dice.is-lose .qt-dice-pin::after { border-top-color: var(--qt-dice-lose); }

.qt-dice-range {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: -14px;
  right: -14px;
  width: calc(100% + 28px);
  top: 13px;
  height: 36px;
  margin: 0;
  background: transparent;
  cursor: grab;
  z-index: 2;
}
.qt-dice-range:disabled { cursor: default; }
.qt-dice-range::-webkit-slider-runnable-track { height: 36px; background: transparent; }
.qt-dice-range::-moz-range-track { height: 36px; background: transparent; }
.qt-dice-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 36px;
  border-radius: 9px;
  border: 0;
  background:
    linear-gradient(90deg, transparent 9px, rgba(0, 0, 0, .25) 9px 11px, transparent 11px 13px, rgba(0, 0, 0, .25) 13px 15px, transparent 15px 17px, rgba(0, 0, 0, .25) 17px 19px, transparent 19px),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--qt-accent, #ff7a3d) 30%, #fff));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), 0 0 0 3px var(--qt-accent, #ff7a3d);
}
.qt-dice-range::-moz-range-thumb {
  width: 28px;
  height: 36px;
  border-radius: 9px;
  border: 0;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--qt-accent, #ff7a3d) 30%, #fff));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), 0 0 0 3px var(--qt-accent, #ff7a3d);
}
.qt-dice-range:focus-visible { outline: none; }
.qt-dice-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--qt-accent, #ff7a3d), 0 0 0 6px #fff; }

.qt-dice-scale { display: flex; justify-content: space-between; margin-top: -10px; font-size: 11.5px; font-weight: 700; color: var(--qt-muted, #b9b0d6); font-variant-numeric: tabular-nums; }

.qt-dice-hist { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; min-height: 26px; overflow: hidden; justify-content: center; }
.qt-dice-pill {
  flex: none;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #10061e;
  opacity: .8;
  animation: qt-dice-in .22s ease-out;
}
.qt-dice-pill.is-win { background: var(--qt-dice-win); }
.qt-dice-pill.is-lose { background: color-mix(in srgb, var(--qt-dice-lose) 80%, #fff); }
.qt-dice-pill:first-child { opacity: 1; }
@keyframes qt-dice-in { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); } }

/* panel */
.qt-dice-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--qt-r, 16px);
  background: linear-gradient(180deg, rgba(44, 26, 60, .86), rgba(16, 9, 30, .92));
  border: 1px solid var(--qt-line, rgba(255, 255, 255, .12));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
}
.qt-dice-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .32); }
.qt-dice-opt {
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--qt-ink, #f6f1ff);
  background: transparent;
  cursor: pointer;
  transition: transform .15s ease-out, opacity .15s ease-out;
}
.qt-dice-opt:hover { transform: translateY(-1px); }
.qt-dice-opt[aria-pressed="true"] {
  color: #2a0e00;
  background: linear-gradient(180deg, color-mix(in srgb, var(--qt-accent, #ff7a3d) 55%, #fff), var(--qt-accent, #ff7a3d));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 16px var(--qt-dice-glow);
}
.qt-dice-opt:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.qt-dice-opt:focus-visible, .qt-dice-step:focus-visible { outline: 2px solid var(--qt-ember, #ffa63d); outline-offset: 2px; }

.qt-dice-steps { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px; }
.qt-dice-steps-l { text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.qt-dice-step {
  height: 40px;
  border: 1px solid var(--qt-line, rgba(255, 255, 255, .12));
  border-radius: 11px;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  color: var(--qt-ink, #f6f1ff);
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  transition: transform .12s ease-out, opacity .15s ease-out;
}
.qt-dice-step:active { transform: scale(.95); }
.qt-dice-step:disabled { opacity: .4; cursor: default; }

.qt-dice-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qt-dice-stat { display: grid; gap: 1px; padding: 8px 10px; border-radius: 11px; background: rgba(0, 0, 0, .28); border: 1px solid var(--qt-line, rgba(255, 255, 255, .12)); min-width: 0; }
.qt-dice-stat-l { font-size: 11px; color: var(--qt-muted, #b9b0d6); }
.qt-dice-stat-v { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qt-dice-stat:first-child .qt-dice-stat-v { color: var(--qt-gold, #ffcf4a); }
.qt-dice-stat:last-child .qt-dice-stat-v { color: var(--qt-ember, #ffa63d); }

.qt-dice-go {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 21px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #2a1200;
  cursor: pointer;
  background: linear-gradient(180deg, #ffd9a0 0%, var(--qt-ember, #ffa63d) 45%, #e07a1f 100%);
  box-shadow: 0 5px 0 #8a3d00, 0 10px 28px rgba(255, 166, 61, .35), inset 0 2px 0 rgba(255, 255, 255, .7);
  transition: transform .1s ease-out, opacity .2s ease-out;
}
.qt-dice-go:hover { transform: translateY(-1px); }
.qt-dice-go:active { transform: translateY(4px); }
.qt-dice-go:disabled { cursor: default; opacity: .55; transform: none; }
.qt-dice-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@container (max-width: 779px) {
  .qt-dice-panel { padding: 12px; gap: 10px; }
  .qt-dice-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qt-dice-stat-v { font-size: 15px; }
  .qt-dice-trackbox { margin-left: 6px; margin-right: 6px; }
  .qt-dice-scale { margin-left: 6px; margin-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .qt-dice-die.is-tumble, .qt-dice.is-win .qt-dice-num, .qt-dice-pill { animation: none; }
  .qt-dice-rail { transition: none !important; }
}