/* Video poker engine — retro electric-blue cabinet, paytable, CSS cards. */

.qt-vp {
  --qt-vp-blue: var(--qt-accent, #4fb2ff);
  --qt-vp-gold: #ffe14d;
  container-type: inline-size;
  width: min(100%, 860px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2cqi, 16px);
  color: var(--qt-ink, #f6f1ff);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.qt-vp:focus-visible .qt-vp-cab { box-shadow: 0 0 0 3px #fff, 0 0 40px var(--qt-vp-blue); }

.qt-vp-cab {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.2cqi, 18px);
  padding: clamp(12px, 3cqi, 26px);
  border-radius: clamp(18px, 3.5cqi, 28px);
  border: 3px solid var(--qt-vp-blue);
  background:
    radial-gradient(110% 60% at 50% 0%, color-mix(in srgb, var(--qt-vp-blue) 38%, transparent), transparent 70%),
    linear-gradient(180deg, #0d238f 0%, #08166a 45%, #040b3a 100%);
  box-shadow:
    0 0 0 2px #050a26,
    0 0 0 7px color-mix(in srgb, var(--qt-vp-blue) 28%, #050a26),
    0 0 46px color-mix(in srgb, var(--qt-vp-blue) 70%, transparent),
    inset 0 0 50px color-mix(in srgb, var(--qt-vp-blue) 30%, transparent),
    0 26px 60px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.qt-vp-cab::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

/* ---------- marquee ---------- */
.qt-vp-marquee {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.qt-vp-title {
  font-weight: 900;
  font-size: clamp(18px, 5cqi, 34px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 6px var(--qt-vp-blue), 0 0 18px var(--qt-vp-blue), 0 3px 0 #04104d;
}
.qt-vp-tag {
  padding: .15em .55em;
  border-radius: 8px;
  font-weight: 900;
  font-size: clamp(11px, 2.6cqi, 15px);
  color: #04104d;
  background: var(--qt-vp-gold);
  box-shadow: 0 0 14px rgba(255, 225, 77, .6);
}

/* ---------- paytable ---------- */
.qt-vp-pay {
  display: grid;
  grid-template-columns: 1fr;
  padding: 6px;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, var(--qt-vp-blue) 70%, #fff);
  background: rgba(2, 8, 48, .72);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
}
.qt-vp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: clamp(2px, .6cqi, 5px) 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: clamp(12px, 2.9cqi, 16px);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--qt-vp-gold);
  text-shadow: 0 0 6px rgba(255, 225, 77, .35);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.qt-vp-row-v { font-variant-numeric: tabular-nums; }
.qt-vp-row.is-current {
  background: color-mix(in srgb, var(--qt-vp-blue) 34%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qt-vp-blue) 80%, #fff);
  color: #fff;
}
.qt-vp-row.is-win {
  background: var(--qt-vp-gold);
  color: #04104d;
  text-shadow: none;
  box-shadow: 0 0 22px rgba(255, 225, 77, .7);
  animation: qt-vp-blink .5s steps(2, jump-none) 4;
}
@keyframes qt-vp-blink { 50% { opacity: .55; } }

/* ---------- cards ---------- */
.qt-vp-screen {
  --qt-vp-cw: calc((100cqi - clamp(24px, 6cqi, 52px) - 4 * clamp(6px, 1.6cqi, 14px)) / 5);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.6cqi, 14px);
  padding-top: 26px;
}
.qt-vp-slot {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.qt-vp-slot:disabled { cursor: default; }
.qt-vp-slot:focus-visible { outline: none; }
.qt-vp-slot:focus-visible .qt-vp-card { box-shadow: 0 0 0 3px #fff; border-radius: 9px; }
.qt-vp-held {
  position: absolute;
  top: -24px;
  left: 50%;
  padding: 2px 10px;
  border-radius: 6px;
  font-weight: 900;
  font-size: clamp(10px, 2.4cqi, 14px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #04104d;
  background: var(--qt-vp-gold);
  box-shadow: 0 0 14px rgba(255, 225, 77, .75);
  opacity: 0;
  transform: translate(-50%, 4px) scale(.95);
  transition: opacity .15s ease-out, transform .15s ease-out;
  pointer-events: none;
}
.qt-vp-slot.is-held .qt-vp-held { opacity: 1; transform: translate(-50%, 0) scale(1); }
.qt-vp-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  container-type: inline-size;
  perspective: 800px;
  transition: transform .18s ease-out;
}
.qt-vp-slot.is-held .qt-vp-card { transform: translateY(-6px); }
.qt-vp-slot:not(:disabled):hover .qt-vp-card { transform: translateY(-3px); }
.qt-vp-slot.is-held:not(:disabled):hover .qt-vp-card { transform: translateY(-7px); }
.qt-vp-card-in {
  position: absolute;
  inset: 0;
  display: block;
  --qt-vp-cw: 100cqi;
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.qt-vp-card.is-down .qt-vp-card-in { transform: rotateY(180deg); }
.qt-vp-face {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: calc(var(--qt-vp-cw) * .09);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
.qt-vp-front {
  background: linear-gradient(160deg, #ffffff, #eef1fb);
  border: 1px solid rgba(0, 0, 0, .15);
}
.qt-vp-front.is-red { color: #d81f3c; }
.qt-vp-front.is-black { color: #121633; }
.qt-vp-slot.is-held .qt-vp-front { box-shadow: 0 0 0 3px var(--qt-vp-gold), 0 0 18px rgba(255, 225, 77, .55); }
.qt-vp-slot.is-part .qt-vp-front {
  box-shadow: 0 0 0 3px var(--qt-vp-blue), 0 0 26px var(--qt-vp-blue);
  animation: qt-vp-glow .9s ease-out 2;
}
@keyframes qt-vp-glow { 50% { filter: brightness(1.12); } }
.qt-vp-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.qt-vp-corner--tl { top: 6%; left: 7%; }
.qt-vp-corner--br { bottom: 6%; right: 7%; transform: rotate(180deg); }
.qt-vp-rank { font-weight: 900; font-size: calc(var(--qt-vp-cw) * .23); letter-spacing: -.05em; }
.qt-vp-pip { width: calc(var(--qt-vp-cw) * .15); height: calc(var(--qt-vp-cw) * .15); fill: currentColor; }
.qt-vp-big {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  transform: translate(-50%, -50%);
  fill: currentColor;
}
.qt-vp-big--ace { width: 60%; height: 60%; }
.qt-vp-court {
  position: absolute;
  inset: 16% 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: calc(var(--qt-vp-cw) * .06);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .85), transparent 70%),
    color-mix(in srgb, var(--qt-vp-blue) 22%, #f4f7ff);
}
.qt-vp-court-l {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: calc(var(--qt-vp-cw) * .4);
  line-height: .9;
}
.qt-vp-court-s { width: 38%; height: 26%; fill: currentColor; }
.qt-vp-back {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  border: calc(var(--qt-vp-cw) * .05) solid #e9f2ff;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .25), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .18) 0 5px, transparent 5px 10px),
    color-mix(in srgb, var(--qt-vp-blue) 60%, #061055);
}
.qt-vp-back-mark {
  width: 46%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
  font-weight: 900;
  font-size: calc(var(--qt-vp-cw) * .26);
  color: #fff;
  background: rgba(0, 0, 0, .2);
}
.qt-vp-key {
  font-size: 11px;
  font-weight: 800;
  color: rgba(246, 241, 255, .45);
  letter-spacing: .1em;
}

/* ---------- message ---------- */
.qt-vp-msg {
  margin: 0;
  min-height: 1.4em;
  text-align: center;
  font-weight: 900;
  font-size: clamp(16px, 4.4cqi, 28px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #dfeaff;
  text-shadow: 0 0 10px color-mix(in srgb, var(--qt-vp-blue) 80%, transparent);
  font-variant-numeric: tabular-nums;
}
.qt-vp-msg.is-current { color: #fff; }
.qt-vp-msg.is-win {
  color: var(--qt-vp-gold);
  text-shadow: 0 0 8px rgba(255, 225, 77, .8), 0 0 24px rgba(255, 225, 77, .5);
  animation: qt-vp-pop .32s cubic-bezier(.2, .9, .3, 1.35) both;
}
@keyframes qt-vp-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- controls ---------- */
.qt-vp-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.qt-vp-hint {
  padding: .4em .9em;
  border-radius: 999px;
  font-size: 13px;
  background: var(--qt-panel, rgba(16, 10, 30, .72));
  border: 1px solid var(--qt-line, rgba(255, 255, 255, .12));
}
.qt-vp-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-height: 60px;
  min-width: 220px;
  padding: 0 34px;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #021042;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--qt-vp-blue) 70%, #fff), var(--qt-vp-blue));
  box-shadow:
    inset 0 -5px 0 rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 0 0 2px #050a26,
    0 0 28px color-mix(in srgb, var(--qt-vp-blue) 75%, transparent);
  transition: transform .14s ease-out, opacity .2s ease-out, filter .2s ease-out;
}
.qt-vp-btn.is-draw {
  color: #2a1d00;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #fff08a, var(--qt-vp-gold));
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 2px #050a26, 0 0 28px rgba(255, 225, 77, .7);
}
.qt-vp-btn:hover:not(:disabled) { filter: brightness(1.08); }
.qt-vp-btn:active:not(:disabled) { transform: translateY(2px) scale(.98); }
.qt-vp-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.qt-vp-btn:disabled { opacity: .45; cursor: default; }

@container (min-width: 640px) {
  .qt-vp-pay { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 18px; padding: 10px 12px; }
  .qt-vp-row:first-child { grid-row: 1; grid-column: 1 / -1; font-size: clamp(14px, 2.4cqi, 18px); }
}

@container (max-width: 520px) {
  .qt-vp-hint { display: none; }
  .qt-vp-btn { width: 100%; min-width: 0; }
  .qt-vp-key { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qt-vp *,
  .qt-vp *::before,
  .qt-vp *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}