/* Classic fruit machine engine (3 x 3, 5 lines). All classes are prefixed qt-classic-. */

.qt-classic {
  --qt-classic-acc: var(--qt-accent, #ff4f6d);
  --qt-classic-ink: var(--qt-ink, #f6f1ff);
  --qt-classic-chrome: linear-gradient(180deg, #fdfdff 0%, #b9bccb 18%, #f4f5fa 34%, #7d8194 55%, #d9dbe5 74%, #8a8ea0 100%);
  --qt-classic-gap: clamp(8px, 1.6vw, 14px);
  display: grid;
  gap: var(--qt-classic-gap);
  justify-items: center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  color: var(--qt-classic-ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- cabinet ---------- */
.qt-classic-cabinet {
  position: relative;
  display: grid;
  gap: clamp(8px, 1.4vw, 12px);
  width: min(100%, 620px, max(320px, calc((100svh - 330px) * .95)));
  padding: clamp(8px, 1.6vw, 14px);
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--qt-classic-acc) 55%, #1a0d18), color-mix(in srgb, var(--qt-classic-acc) 25%, #0c0610) 60%, #08040b);
  box-shadow:
    0 0 0 3px #d9dbe5,
    0 0 0 5px #6d7183,
    0 0 0 7px #e9eaf1,
    0 22px 46px rgba(0, 0, 0, .6),
    0 0 50px color-mix(in srgb, var(--qt-classic-acc) 40%, transparent);
}

/* ---------- marquee ---------- */
.qt-classic-marquee {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: clamp(10px, 2vw, 16px) 12px clamp(8px, 1.6vw, 12px);
  border-radius: 20px 20px 10px 10px;
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--qt-classic-acc) 70%, #fff3d6), color-mix(in srgb, var(--qt-classic-acc) 70%, #2a0a14) 70%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25), inset 0 -10px 18px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.qt-classic-bulbs {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
}
.qt-classic-bulb {
  width: clamp(8px, 1.5vw, 12px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe9a8 40%, var(--qt-gold, #ffcf4a) 70%, #b06d00);
  box-shadow: 0 0 8px var(--qt-gold, #ffcf4a), 0 0 2px #fff;
  animation: qt-classic-chase 1.6s linear infinite;
  animation-delay: calc(var(--i) * -0.18s);
}
.qt-classic.is-won .qt-classic-bulb { animation-duration: .5s; }
@keyframes qt-classic-chase {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.qt-classic-title { display: grid; justify-items: center; gap: 2px; text-align: center; }
.qt-classic-title__name {
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #fff0b8 40%, var(--qt-gold, #ffcf4a) 60%, #c27b00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(60, 20, 0, .55);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .45));
}
.qt-classic-title__sub {
  font-size: clamp(10px, 1.3vw, 12px);
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

/* ---------- body: lamps + window ---------- */
.qt-classic-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  gap: clamp(6px, 1.2vw, 10px);
}
.qt-classic-lamps {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 4px;
}
.qt-classic-lamp {
  display: grid;
  place-items: center;
  width: clamp(22px, 3.4vw, 28px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5b5566, #2a2531 70%);
  color: rgba(255, 255, 255, .55);
  font-size: clamp(10px, 1.4vw, 12px);
  font-weight: 900;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 2px 0 rgba(0, 0, 0, .5);
  transition: background-color .2s ease-out, color .2s ease-out, box-shadow .2s ease-out;
}
.qt-classic-lamp.is-lit {
  background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--qt-classic-acc) 70%, #fff) 45%, var(--qt-classic-acc));
  color: #2a0710;
  box-shadow: 0 0 14px var(--qt-classic-acc), 0 0 0 2px rgba(255, 255, 255, .6);
}

.qt-classic-window {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, .8vw, 6px);
  aspect-ratio: 5 / 4;
  padding: clamp(4px, .8vw, 6px);
  border-radius: 14px;
  background: var(--qt-classic-chrome);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .7);
}
.qt-classic-reel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  container-type: size;
  background: linear-gradient(90deg, #d8d2c4, #fffdf6 30%, #fffdf6 70%, #d8d2c4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.qt-classic-reel::after {
  /* cylinder shading */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .08) 22%, transparent 40%, transparent 60%, rgba(0, 0, 0, .08) 78%, rgba(0, 0, 0, .55) 100%);
  z-index: 2;
}
.qt-classic-strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.qt-classic-strip.is-moving .qt-classic-cell { filter: blur(1.6px); }
.qt-classic-cell {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  height: 33.3333cqh;
  transition: opacity .25s ease-out;
}
.qt-classic-cell.is-blank::before {
  content: "";
  width: 34%;
  height: 3px;
  border-radius: 3px;
  background: rgba(60, 50, 40, .12);
}
.qt-classic-img {
  height: 86%;
  width: auto;
  max-width: 86%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .35));
}
.qt-classic-window.is-showing .qt-classic-cell { opacity: .45; }
.qt-classic-window.is-showing .qt-classic-cell.is-win { opacity: 1; }
.qt-classic-cell.is-win > .qt-classic-img { animation: qt-classic-pulse .9s ease-in-out infinite; }
@keyframes qt-classic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.qt-classic-lines {
  position: absolute;
  inset: clamp(4px, .8vw, 6px);
  width: calc(100% - 2 * clamp(4px, .8vw, 6px));
  height: calc(100% - 2 * clamp(4px, .8vw, 6px));
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}
.qt-classic-line,
.qt-classic-line__glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.qt-classic-line { stroke: var(--qt-classic-acc); stroke-width: 4px; }
.qt-classic-line__glow { stroke: #fff; stroke-width: 10px; opacity: .6; }

/* ---------- display ---------- */
.qt-classic-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: clamp(44px, 6vw, 54px);
  padding: 6px clamp(12px, 2vw, 18px);
  border-radius: 12px;
  background: linear-gradient(180deg, #050307, #140a0d);
  box-shadow: inset 0 0 0 2px #3b3440, inset 0 4px 14px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .15);
  font-variant-numeric: tabular-nums;
}
.qt-classic-display__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(11px, 1.4vw, 13px);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--qt-classic-acc) 60%, #ffd9a0);
}
.qt-classic-display__value {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(22px, 3.6vw, 32px);
  font-weight: 800;
  color: #ffb43a;
  text-shadow: 0 0 10px rgba(255, 150, 30, .75), 0 0 2px #fff2c8;
}
.qt-classic.is-won .qt-classic-display__value { color: #ffe26a; }
.qt-classic.is-big .qt-classic-display { box-shadow: inset 0 0 0 2px var(--qt-gold, #ffcf4a), 0 0 26px color-mix(in srgb, var(--qt-gold, #ffcf4a) 55%, transparent); }

/* ---------- pay chart ---------- */
.qt-classic-pays {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: min(100%, 760px);
}
.qt-classic-pay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--qt-line, rgba(255, 255, 255, .14));
  border-radius: 999px;
  background: var(--qt-panel, rgba(14, 9, 28, .72));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
}
.qt-classic-pay__pics { display: inline-flex; }
.qt-classic-pay__img { width: 24px; height: 24px; object-fit: contain; margin-right: -5px; }
.qt-classic-pay__label { color: var(--qt-muted, #bfb6d6); margin-left: 4px; }
.qt-classic-pay__x { color: var(--qt-gold, #ffcf4a); font-weight: 900; margin-left: 4px; }

/* ---------- deck ---------- */
.qt-classic-deck {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  width: min(100%, 620px);
  padding: clamp(8px, 1.4vw, 12px) clamp(12px, 2vw, 18px);
  border: 1px solid var(--qt-line, rgba(255, 255, 255, .14));
  border-radius: calc(var(--qt-r, 16px) + 6px);
  background: var(--qt-panel, rgba(14, 9, 28, .72));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.qt-classic-info { display: grid; gap: 2px; font-size: clamp(11px, 1.4vw, 13px); color: var(--qt-muted, #bfb6d6); }
.qt-classic-info__top { font-size: clamp(13px, 1.7vw, 16px); font-weight: 800; color: var(--qt-classic-ink); }

.qt-classic-spin {
  appearance: none;
  min-width: clamp(150px, 26vw, 220px);
  min-height: clamp(58px, 8vw, 70px);
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--qt-classic-acc) 75%, #fff), var(--qt-classic-acc) 55%, color-mix(in srgb, var(--qt-classic-acc) 60%, #2a0610));
  color: #fff;
  font: inherit;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
  cursor: pointer;
  box-shadow:
    0 0 0 3px #e9eaf1,
    0 0 0 5px #6d7183,
    0 7px 0 5px rgba(0, 0, 0, .5),
    0 0 30px color-mix(in srgb, var(--qt-classic-acc) 50%, transparent);
  transition: transform .12s ease-out, filter .2s ease-out;
}
.qt-classic-spin:hover { filter: brightness(1.07); }
.qt-classic-spin:active { transform: translateY(4px); }
.qt-classic-spin:disabled { cursor: default; filter: saturate(.5) brightness(.8); }

.qt-classic-toggle {
  justify-self: end;
  appearance: none;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--qt-line, rgba(255, 255, 255, .18));
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
  color: var(--qt-classic-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45);
  transition: transform .12s ease-out, background-color .2s ease-out, border-color .2s ease-out;
}
.qt-classic-toggle:hover { border-color: color-mix(in srgb, var(--qt-classic-acc) 70%, white); }
.qt-classic-toggle:active { transform: translateY(2px); }
.qt-classic-toggle.is-on {
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--qt-classic-acc) 80%, white), color-mix(in srgb, var(--qt-classic-acc) 60%, #1a0610));
}
.qt-classic-spin:focus-visible,
.qt-classic-toggle:focus-visible {
  outline: 3px solid var(--qt-ember, #ffa63d);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  .qt-classic-deck { grid-template-columns: auto 1fr auto; }
  .qt-classic-spin { min-width: 0; width: 100%; padding: 0 16px; }
  .qt-classic-pay { padding: 3px 8px 3px 5px; font-size: 11px; }
  .qt-classic-pay__img { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .qt-classic-bulb,
  .qt-classic-cell.is-win > .qt-classic-img { animation: none; }
}
.qt-classic.is-calm .qt-classic-bulb,
.qt-classic.is-calm .qt-classic-cell.is-win > .qt-classic-img { animation: none; }