/* Carnival Wheel engine */
.qt-eng-wheel { container-type: inline-size; }

.qt-wheel {
  --qt-wheel-glow: color-mix(in srgb, var(--qt-accent, #ffcf3d) 55%, transparent);
  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-wheel { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
}

.qt-wheel-play { display: grid; justify-items: center; gap: 10px; min-width: 0; }

.qt-wheel-box {
  position: relative;
  width: min(100%, 62vh, 520px);
  min-width: 240px;
  aspect-ratio: 1;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 32px var(--qt-wheel-glow));
}

.qt-wheel-frame, .qt-wheel-clip, .qt-wheel-disc, .qt-wheel-gloss { position: absolute; }
.qt-wheel-frame { inset: 0; width: 100%; height: 100%; }
.qt-wheel-clip { inset: 9.09%; border-radius: 50%; overflow: hidden; }
.qt-wheel-disc { inset: 0; border-radius: 50%; will-change: transform; transform: rotate(0deg); }
.qt-wheel-discsvg { display: block; width: 100%; height: 100%; }
.qt-wheel-gloss {
  inset: 9.09%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06) 46%, transparent 60%),
    radial-gradient(closest-side, transparent 82%, rgba(0, 0, 0, .35) 100%);
}

.qt-wheel-pointer {
  position: absolute;
  left: 50%;
  top: -3%;
  width: 11%;
  margin-left: -5.5%;
  transform-origin: 50% 28%;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
  z-index: 2;
}

.qt-wheel-seg { stroke: rgba(30, 10, 40, .55); stroke-width: .5; }
.qt-wheel-num {
  font-size: 7.4px;
  font-weight: 900;
  fill: #fff;
  stroke: rgba(30, 8, 40, .75);
  stroke-width: 1.5px;
  paint-order: stroke;
  letter-spacing: -.2px;
}
.qt-wheel-peg { fill: #fff3c4; stroke: #8a5a00; stroke-width: .5; }
.qt-wheel-star { fill: var(--qt-accent, #ffcf3d); stroke: #fff6cf; stroke-width: 1; }
.qt-wheel-hit {
  fill: rgba(255, 255, 255, .28);
  stroke: #fff;
  stroke-width: 2.2;
  opacity: 0;
  transition: opacity .2s ease-out;
}
.qt-wheel-hit.is-on { opacity: 1; animation: qt-wheel-hitpulse .9s ease-in-out 3; }
.qt-wheel.is-lose .qt-wheel-hit.is-on { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .7); animation: none; }

.qt-wheel-bulb { fill: #fff2b0; stroke: #a8740a; stroke-width: .8; }
.qt-wheel-bulb--a { animation: qt-wheel-blink 1.4s ease-in-out infinite; }
.qt-wheel-bulb--b { animation: qt-wheel-blink 1.4s ease-in-out -.7s infinite; }
.qt-wheel.is-spinning .qt-wheel-bulb--a, .qt-wheel.is-spinning .qt-wheel-bulb--b { animation-duration: .36s; }
.qt-wheel.is-win .qt-wheel-bulb { fill: var(--qt-accent, #ffcf3d); animation-duration: .24s; }

@keyframes qt-wheel-blink { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
@keyframes qt-wheel-hitpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* result + history */
.qt-wheel-result {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 52px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--qt-panel, rgba(18, 12, 38, .72));
  border: 1px solid var(--qt-line, rgba(255, 255, 255, .12));
  backdrop-filter: blur(8px);
  text-align: center;
  max-width: 100%;
}
.qt-wheel-result-main { font-weight: 800; font-size: clamp(16px, 2.4vw, 20px); }
.qt-wheel-result-sub { font-size: 12.5px; color: var(--qt-muted, #b9b0d6); }
.qt-wheel-result-amt { color: var(--qt-ember, #ffa63d); font-variant-numeric: tabular-nums; }
.qt-wheel.is-win .qt-wheel-result { border-color: var(--qt-wheel-glow); box-shadow: 0 0 26px var(--qt-wheel-glow); animation: qt-wheel-pop .32s ease-out; }
@keyframes qt-wheel-pop { from { transform: scale(.95); opacity: .4; } to { transform: scale(1); opacity: 1; } }

.qt-wheel-strip { display: flex; align-items: center; gap: 8px; max-width: 100%; overflow: hidden; }
.qt-wheel-strip-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--qt-muted, #b9b0d6); flex: none; }
.qt-wheel-strip-list { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; min-height: 28px; }
.qt-wheel-pill {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 900;
  color: #1a0b2e;
  background: linear-gradient(180deg, color-mix(in srgb, var(--qt-wheel-c) 70%, #fff), var(--qt-wheel-c));
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
  opacity: .82;
  animation: qt-wheel-pillin .25s ease-out;
}
.qt-wheel-pill:first-child { opacity: 1; }
.qt-wheel-pill.is-hit { outline: 2px solid var(--qt-ember, #ffa63d); outline-offset: 1px; }
@keyframes qt-wheel-pillin { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); } }

/* panel */
.qt-wheel-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--qt-r, 16px);
  background: linear-gradient(180deg, rgba(40, 22, 70, .82), rgba(16, 9, 32, .9));
  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-wheel-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qt-wheel-kicker { font-weight: 800; font-size: 15px; }
.qt-wheel-hint { font-size: 12px; color: var(--qt-muted, #b9b0d6); }

.qt-wheel-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qt-wheel-chip {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 9px 4px 8px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  color: #1a0b2e;
  cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--qt-wheel-c) 55%, #fff) 0%, var(--qt-wheel-c) 55%, color-mix(in srgb, var(--qt-wheel-c) 70%, #000) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 4px 10px rgba(0, 0, 0, .35);
  opacity: .78;
  transition: transform .16s ease-out, opacity .16s ease-out;
}
.qt-wheel-chip:hover { transform: translateY(-2px); opacity: .95; }
.qt-wheel-chip:active { transform: translateY(1px) scale(.98); }
.qt-wheel-chip[aria-pressed="true"] {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 0 3px #fff, 0 0 22px var(--qt-wheel-c);
}
.qt-wheel-chip:disabled { cursor: default; }
.qt-wheel-chip:focus-visible { outline: 3px solid var(--qt-ember, #ffa63d); outline-offset: 3px; }
.qt-wheel-chip-v { font-size: 24px; font-weight: 950; line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.qt-wheel-chip-odds { font-size: 12px; font-weight: 800; }
.qt-wheel-chip-n { font-size: 10.5px; font-weight: 700; opacity: .7; }

.qt-wheel-pays {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--qt-line, rgba(255, 255, 255, .12));
}
.qt-wheel-pays-label { font-size: 13px; color: var(--qt-muted, #b9b0d6); }
.qt-wheel-pays-val { font-size: 18px; color: var(--qt-gold, #ffcf4a); font-variant-numeric: tabular-nums; }

.qt-wheel-go {
  position: relative;
  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 .12s ease-out, opacity .2s ease-out;
}
.qt-wheel-go:hover { transform: translateY(-1px); }
.qt-wheel-go:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a3d00, 0 4px 14px rgba(255, 166, 61, .3), inset 0 2px 0 rgba(255, 255, 255, .7); }
.qt-wheel-go:disabled { cursor: default; opacity: .55; transform: none; }
.qt-wheel-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@container (max-width: 779px) {
  .qt-wheel-box { width: min(100%, 50vh, 460px); }
  .qt-wheel-panel { padding: 12px; }
  .qt-wheel-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .qt-wheel-chip { padding: 7px 2px 6px; border-radius: 12px; }
  .qt-wheel-chip-v { font-size: 19px; }
  .qt-wheel-chip-odds { font-size: 10.5px; }
  .qt-wheel-chip-n { display: none; }
  .qt-wheel-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qt-wheel-bulb--a, .qt-wheel-bulb--b, .qt-wheel-hit.is-on, .qt-wheel-pill, .qt-wheel.is-win .qt-wheel-result { animation: none; }
  .qt-wheel-disc { transition-duration: .2s !important; }
}