/* Tumble engine (6x5 pay-anywhere grid). Everything is scoped to qt-cascade-*. */

.qt-cascade-root {
  --qt-cascade-pad: clamp(6px, 1.4vw, 12px);
  --qt-cascade-gap: clamp(2px, .5vw, 5px);
  --qt-cascade-glass: color-mix(in srgb, var(--qt-accent, #ff6fd8) 18%, rgba(14, 6, 32, .78));
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.6vw, 14px);
  padding: clamp(6px, 1.5vw, 14px) 0 clamp(10px, 2vw, 18px);
  color: var(--qt-ink, #f6f1ff);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ---------- HUD ---------- */
.qt-cascade-hud {
  width: min(100%, 760px, calc((100svh - 300px) * 1.2));
  min-width: min(100%, 320px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "chain win bonus" "chain win multi";
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  min-height: 52px;
}
.qt-cascade-chain { grid-area: chain; justify-self: start; }
.qt-cascade-winbox { grid-area: win; }
.qt-cascade-bonuspill { grid-area: bonus; justify-self: end; }
.qt-cascade-multipill { grid-area: multi; justify-self: end; }

.qt-cascade-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: clamp(11px, 1.4vw, 13px);
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  background: rgba(10, 4, 24, .62);
  border: 1px solid color-mix(in srgb, var(--qt-accent, #ff6fd8) 45%, rgba(255, 255, 255, .15));
  box-shadow: 0 0 18px color-mix(in srgb, var(--qt-accent, #ff6fd8) 30%, transparent);
  opacity: 0;
  transform: translateY(4px) scale(.95);
  transition: opacity .22s ease-out, transform .22s ease-out;
}
.qt-cascade-pill.is-on { opacity: 1; transform: none; }
.qt-cascade-chain.is-bump { animation: qt-cascade-bump .32s ease-out; }
.qt-cascade-multipill { color: var(--qt-gold, #ffcf4a); }

.qt-cascade-winbox {
  display: grid;
  justify-items: center;
  padding: 4px 18px 6px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 4, 24, .7), rgba(10, 4, 24, .45));
  border: 1px solid rgba(255, 255, 255, .12);
  min-width: 128px;
}
.qt-cascade-winlabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--qt-muted, #b9add6);
}
.qt-cascade-winvalue {
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: rgba(246, 241, 255, .5);
  transition: color .2s ease-out;
}
.qt-cascade-winbox.is-on .qt-cascade-winvalue {
  background: linear-gradient(180deg, #fff6c9 0%, var(--qt-gold, #ffcf4a) 55%, #ff9f2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(255, 170, 40, .35));
}

/* ---------- board ---------- */
.qt-cascade-board {
  position: relative;
  width: min(100%, 760px, calc((100svh - 300px) * 1.2));
  min-width: min(100%, 300px);
  aspect-ratio: 6 / 5;
  border-radius: clamp(16px, 2.4vw, 26px);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--qt-accent, #ff6fd8) 32%, transparent), transparent 60%),
    linear-gradient(180deg, var(--qt-cascade-glass), rgba(8, 3, 20, .86));
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--qt-accent, #ff6fd8) 40%, transparent),
    0 0 42px color-mix(in srgb, var(--qt-accent, #ff6fd8) 35%, transparent),
    0 24px 60px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -18px 40px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: box-shadow .3s ease-out;
}
.qt-cascade-board::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 28%);
}
.qt-cascade-board.is-bonus {
  box-shadow:
    0 0 0 3px var(--qt-gold, #ffcf4a),
    0 0 60px color-mix(in srgb, var(--qt-gold, #ffcf4a) 45%, transparent),
    0 24px 60px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -18px 40px rgba(0, 0, 0, .35);
}

.qt-cascade-slots {
  position: absolute;
  inset: var(--qt-cascade-pad);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: var(--qt-cascade-gap);
}
.qt-cascade-slot {
  border-radius: clamp(8px, 1.4vw, 14px);
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 70%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.qt-cascade-grid,
.qt-cascade-floats {
  position: absolute;
  inset: var(--qt-cascade-pad);
}
.qt-cascade-grid { overflow: hidden; border-radius: clamp(8px, 1.4vw, 14px); }
.qt-cascade-floats { pointer-events: none; z-index: 3; }

.qt-cascade-cell {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / 6);
  height: 20%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  transition: transform var(--qt-cascade-fall, 340ms) cubic-bezier(.3, 1.28, .55, 1), opacity var(--qt-cascade-fall, 340ms) ease-out;
  will-change: transform;
}
.qt-cascade-cell--still { transition: none; }
.qt-cascade-cell--out { opacity: 0; transition-timing-function: cubic-bezier(.4, 0, .6, 1), ease-out; }
.qt-cascade-img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .4));
}
.qt-cascade-cell::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 30%;
  background: radial-gradient(circle, color-mix(in srgb, var(--qt-accent, #ff6fd8) 70%, #fff) 0%, transparent 68%);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .2s ease-out, transform .2s ease-out;
  pointer-events: none;
}
.qt-cascade-cell.is-win::before { opacity: .85; transform: scale(1.05); }
.qt-cascade-cell.is-win .qt-cascade-img,
.qt-cascade-cell.is-win .qt-cascade-bubble { animation: qt-cascade-throb .42s ease-out infinite alternate; }
.qt-cascade-cell.is-scatter::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--qt-gold, #ffcf4a) 85%, #fff) 0%, transparent 70%);
  opacity: .9;
  transform: scale(1.1);
}
.qt-cascade-cell.is-scatter .qt-cascade-img { animation: qt-cascade-throb .5s ease-out infinite alternate; }
.qt-cascade-cell.is-pop .qt-cascade-img,
.qt-cascade-cell.is-pop .qt-cascade-bubble { animation: qt-cascade-pop .3s ease-out forwards; }
.qt-cascade-cell.is-pop::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--qt-accent, #ff6fd8) 60%, #fff);
  animation: qt-cascade-ring .32s ease-out forwards;
  pointer-events: none;
}
.qt-cascade-cell.is-pop::before { opacity: 0; }

/* multiplier bubble (drawn, no art) */
.qt-cascade-bubble {
  position: relative;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .45) 11%, transparent 26%),
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--qt-accent, #ff6fd8) 55%, #fff) 0%, var(--qt-accent, #ff6fd8) 55%, color-mix(in srgb, var(--qt-accent, #ff6fd8) 55%, #120022) 100%);
  border: 2px solid rgba(255, 255, 255, .7);
  box-shadow: 0 0 16px color-mix(in srgb, var(--qt-accent, #ff6fd8) 70%, transparent), inset 0 -6px 10px rgba(0, 0, 0, .25);
  color: #fff;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 0 8px rgba(0, 0, 0, .35);
}
.qt-cascade-bubble--big {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .45) 11%, transparent 26%),
    radial-gradient(circle at 50% 60%, #fff3b0 0%, var(--qt-gold, #ffcf4a) 50%, #c26a00 100%);
  box-shadow: 0 0 20px rgba(255, 196, 60, .8), inset 0 -6px 10px rgba(0, 0, 0, .2);
}
.qt-cascade-bubble--mega {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .45) 11%, transparent 26%),
    conic-gradient(from 30deg, var(--qt-pink, #ff4fa8), var(--qt-gold, #ffcf4a), var(--qt-ember, #ffa63d), #5ad7ff, var(--qt-pink, #ff4fa8));
  box-shadow: 0 0 26px rgba(255, 255, 255, .8), 0 0 40px color-mix(in srgb, var(--qt-pink, #ff4fa8) 60%, transparent);
}
.qt-cascade-bubble-x { font-size: clamp(9px, 1.6vw, 15px); opacity: .9; }
.qt-cascade-bubble-v { font-size: clamp(13px, 2.8vw, 26px); }

/* floating amounts */
.qt-cascade-float {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% / 6);
  height: 20%;
  display: grid;
  place-items: center;
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  font-size: clamp(14px, 2.6vw, 24px);
  font-weight: 900;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 14px color-mix(in srgb, var(--qt-accent, #ff6fd8) 90%, transparent);
  animation: qt-cascade-rise 1.2s ease-out forwards;
}
.qt-cascade-float--gold { color: var(--qt-gold, #ffcf4a); }
.qt-cascade-float--multi {
  font-size: clamp(30px, 7vw, 64px);
  color: var(--qt-gold, #ffcf4a);
  text-shadow: 0 3px 0 #7a3b00, 0 0 24px rgba(255, 190, 60, .8);
}

/* feature banner */
.qt-cascade-banner {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(20, 6, 40, .55), rgba(8, 2, 18, .88) 75%);
  opacity: 0;
  transition: opacity .2s ease-out;
}
.qt-cascade-banner.is-on { opacity: 1; }
.qt-cascade-banner.is-on > * { animation: qt-cascade-enter .32s ease-out both; }
.qt-cascade-banner-kick {
  font-size: clamp(11px, 1.6vw, 14px);
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--qt-muted, #b9add6);
}
.qt-cascade-banner-title {
  font-size: clamp(30px, 7vw, 66px);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #fff4b8 35%, var(--qt-gold, #ffcf4a) 60%, #ff8a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(90, 30, 0, .55)) drop-shadow(0 0 22px rgba(255, 180, 60, .45));
}
.qt-cascade-banner-sub { font-size: clamp(14px, 2vw, 18px); font-weight: 700; }

/* ---------- controls ---------- */
.qt-cascade-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 34px);
  padding-top: 4px;
}
.qt-cascade-side {
  appearance: none;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: clamp(58px, 9vw, 70px);
  height: clamp(58px, 9vw, 70px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 60%), rgba(12, 5, 28, .78);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: var(--qt-ink, #f6f1ff);
  font: inherit;
  cursor: pointer;
  align-content: center;
  transition: transform .14s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}
.qt-cascade-side:hover { border-color: color-mix(in srgb, var(--qt-accent, #ff6fd8) 70%, #fff); }
.qt-cascade-side:active { transform: translateY(2px) scale(.97); }
.qt-cascade-side:disabled { opacity: .45; cursor: default; }
.qt-cascade-side:focus-visible,
.qt-cascade-go:focus-visible,
.qt-cascade-autoopt:focus-visible { outline: 3px solid var(--qt-ember, #ffa63d); outline-offset: 3px; }
.qt-cascade-ico {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qt-cascade-turbo .qt-cascade-ico { fill: currentColor; stroke-width: 1.2; }
.qt-cascade-sidelabel { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.qt-cascade-turbo.is-on,
.qt-cascade-auto.is-running {
  color: #1a0b00;
  border-color: rgba(255, 255, 255, .6);
  background: radial-gradient(circle at 50% 25%, #fff6c9, var(--qt-gold, #ffcf4a) 55%, #d78a00);
  box-shadow: 0 4px 0 #8a5200, 0 0 22px rgba(255, 196, 60, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
}

.qt-cascade-go {
  appearance: none;
  position: relative;
  width: clamp(84px, 12vw, 104px);
  height: clamp(84px, 12vw, 104px);
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0;
  font: inherit;
  color: #241005;
  cursor: pointer;
  isolation: isolate;
  background: radial-gradient(circle at 50% 28%, #fff1dc 0%, var(--qt-ember, #ffa63d) 42%, #d46a12 80%, #9a4a0c 100%);
  box-shadow:
    0 6px 0 #6e2c00,
    0 12px 28px rgba(0, 0, 0, .45),
    0 0 34px color-mix(in srgb, var(--qt-ember, #ffa63d) 55%, transparent),
    inset 0 -8px 14px rgba(0, 60, 0, .3),
    inset 0 5px 8px rgba(255, 255, 255, .65);
  transition: transform .14s ease-out, box-shadow .2s ease-out, filter .2s ease-out;
}
.qt-cascade-go::before {
  content: "";
  position: absolute;
  inset: -8px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--qt-accent, #ff6fd8), var(--qt-gold, #ffcf4a), var(--qt-pink, #ff4fa8), var(--qt-accent, #ff6fd8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.qt-cascade-go:hover { filter: brightness(1.06); }
.qt-cascade-go:active { transform: translateY(3px) scale(.97); box-shadow: 0 3px 0 #6e2c00, 0 6px 16px rgba(0, 0, 0, .45), inset 0 -6px 12px rgba(0, 60, 0, .3), inset 0 5px 8px rgba(255, 255, 255, .6); }
.qt-cascade-go:disabled { cursor: default; filter: saturate(.55) brightness(.85); }
.qt-cascade-go.is-busy .qt-cascade-goico { animation: qt-cascade-turn .9s linear infinite; }
.qt-cascade-goring { display: grid; place-items: center; }
.qt-cascade-goico {
  width: clamp(30px, 4.4vw, 38px);
  height: clamp(30px, 4.4vw, 38px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qt-cascade-golabel { font-size: clamp(12px, 1.6vw, 14px); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.qt-cascade-autowrap { position: relative; }
.qt-cascade-automenu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(10, 4, 24, .92);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  z-index: 5;
  animation: qt-cascade-enter .18s ease-out;
}
.qt-cascade-automenu[hidden] { display: none; }
.qt-cascade-autoopt {
  appearance: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--qt-accent, #ff6fd8) 60%, #fff), var(--qt-accent, #ff6fd8) 70%);
  color: #fff;
  font: inherit;
  font-weight: 900;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: transform .14s ease-out;
}
.qt-cascade-autoopt:active { transform: scale(.94); }

.qt-cascade-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- motion ---------- */
@keyframes qt-cascade-throb { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes qt-cascade-pop {
  0% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.28); opacity: 1; filter: brightness(1.6); }
  100% { transform: scale(.15); opacity: 0; }
}
@keyframes qt-cascade-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes qt-cascade-rise {
  0% { opacity: 0; transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%)) scale(.6); }
  18% { opacity: 1; transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100% - 10%)) scale(1.08); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100% - 55%)) scale(1); }
}
@keyframes qt-cascade-bump { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes qt-cascade-enter { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
@keyframes qt-cascade-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .qt-cascade-cell { transition: none; }
  .qt-cascade-cell.is-win .qt-cascade-img,
  .qt-cascade-cell.is-win .qt-cascade-bubble,
  .qt-cascade-cell.is-scatter .qt-cascade-img,
  .qt-cascade-go.is-busy .qt-cascade-goico,
  .qt-cascade-chain.is-bump { animation: none; }
  .qt-cascade-float { animation-duration: .01s; animation-delay: .9s; }
}