/* ═══════════════════════════════════════════
   SLOT MACHINE
════════════════════════════════════════════ */
#slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: var(--slot-height-em);
  align-self: center;
}

@media (max-width: 1440px) { #slot { width: 110em; } }

/* ── Frame ────────────────────────────────────────── */
.slot__frame {
  position: absolute;
  z-index: var(--z-slot-frame);
  left: 50%; top: 50%;
  height: 120%;
  width: auto;
  aspect-ratio: 900/670;
  background-image: url(../../assets/images/ui/game-frame.webp);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -52.5%);
}

@media (max-width: 1023px) {
  .slot__frame {
    width: 100%;
    height: 108%;
    aspect-ratio: unset;   /* reset desktop 900/670 — slot is square on mobile */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);  /* slight upward shift shows gold top */
  }
}

/* ── Reels container ──────────────────────────────── */
#slot #reels {
  display: flex;
  position: relative;
  z-index: var(--z-slot-reels);
  width: 151em;
  max-width: 870px;
  height: 100%;
  transform: none;
  justify-content: center;
}

@media (max-width: 1023px) {
  #slot #reels {
    width: 100%;
    height: auto;
    max-width: 74em;
    aspect-ratio: 1;
  }
}
@media (max-width: 399px) { #slot #reels { font-size: 90%; } }

#slot #reels::before,
#slot [data-symbol=win].is--win::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

#slot #reels::before {
  width: 100%; height: 100%;
  z-index: -1;
  background: linear-gradient(180deg, transparent, transparent);
}

/* ── Single reel ──────────────────────────────────── */
.slot__reel {
  position: relative;
  overflow: hidden;
  overflow-y: hidden;
  width: 20%;
  height: 100%;
}

@media (max-width: 1023px) { .slot__reel { width: 33.333%; } }

body[data-slot-config="3"] .slot__reel { width: 33.333%; }

#slot [data-js=reel]        { overflow: hidden; }
#slot [data-js=symbol-inner]{ height: 100%; width: 100%; }
#slot [data-js=symbol-inner] img { width: 100%; height: 100%; object-fit: contain; }

#slot #reels .icons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

#slot #reels .icons .symbol {
  flex: 1 1 0;
  min-height: 0;          /* allow proper flex shrink */
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
  box-sizing: border-box;
}

#slot #reels .icons .symbol-inner {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#slot #reels .icons .symbol .symbol-inner img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: none !important;
  rotate: unset;
  scale: unset;
}

@media (max-width: 1023px) {
  #slot #reels .icons .symbol .symbol-inner img {
    max-width: 72%;
    max-height: 72%;
  }
}
@media (max-width: 768px) {
  #slot #reels .icons .symbol .symbol-inner img {
    max-width: 66%;
    max-height: 66%;
  }
}
@media (max-width: 430px) {
  #slot #reels .icons .symbol .symbol-inner img {
    max-width: 62%;
    max-height: 62%;
  }
}

#slot #reels .symbol,
#slot #reels .symbol .symbol-inner { position: relative; }
#slot #reels .symbol .symbol-inner img { transform: none; }

/* ── Win line effect ──────────────────────────────── */
#slot.is--winner #reels::after {
  position: absolute;
  z-index: -1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(33deg);
  content: "";
  background: var(--color-white);
  height: 2em; width: 120em;
  border: .9em solid var(--color-orange);
  border-radius: 20%;
  filter: blur(3px) brightness(2.5) contrast(2);
  box-shadow: 0 0 1.5em .5em var(--color-orange);
}

@media (max-width: 1023px) {
  #slot.is--winner #reels::after {
    width: 95em;
    transform: translate(-50%, -50%) rotate(43deg);
    height: 1em;
    border: .3em solid var(--color-orange);
    box-shadow: 0 0 .75em .25em var(--color-orange);
  }
}

#slot.is--winner.is--win-1 #reels::after { transform: translate(-50%, -50%) rotate(-33deg); }
#slot.is--winner.is--win-2 #reels::after { transform: translate(-50%, -50%) rotate(33deg); }
#slot.is--winner.is--win-3 #reels::after { transform: translate(-50%, -50%) rotate(0deg); }

@media (max-width: 1023px) {
  #slot.is--winner.is--win-1 #reels::after { transform: translate(-50%, -50%) rotate(-43deg); }
  #slot.is--winner.is--win-2 #reels::after { transform: translate(-50%, -50%) rotate(43deg); }
  #slot.is--winner.is--win-3 #reels::after { transform: translate(-50%, -50%) rotate(0deg); }
}

/* ── Win symbol overlay (from CSS, not engine) ────── */
#slot [data-symbol=win].is--win::before {
  aspect-ratio: 343/262;
  width: auto; height: 120%;
  background-image: url(../../assets/images/ui/symbol-win-orange.gif);
  background-size: contain;
  background-position: center;
}
@media (max-width: 1023px) {
  #slot [data-symbol=win].is--win::before { height: 100%; }
}

/* ── Win symbol animations ────────────────────────── */
#slot #reels .symbol.is--win.is--flip .symbol-inner {
  animation: flipSymbol 2s ease-in-out infinite;
}

#slot #reels .symbol.is--win.is--lightning::before,
#slot #reels .symbol.is--win.is--x2::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  left: 5%; top: 5%;
  width: 90%; height: 90%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#slot #reels .symbol.is--win.is--lightning::before {
  mix-blend-mode: plus-lighter;
  background-image: url(../../assets/images/ui/effect-win-lightning-orange.gif);
  animation: scaleSymbolGif 1.5s linear infinite;
}
#slot #reels .symbol.is--win.is--lightning .symbol-inner {
  animation: scaleSymbol 1.5s linear infinite;
}

#slot #reels .symbol.is--win.is--x2::before {
  background-image: url(../../assets/images/ui/effect-win-x2.gif);
  transform: scaleY(-1);
  animation: x2Anim .5s linear;
}
#slot #reels .symbol.is--win.is--blinking .symbol-inner {
  animation: blinkSymbol 2s ease-in-out infinite;
}
#slot #reels .symbol.is--win.is--border::before { display: none; }
#slot #reels .symbol.is--win.is--border .symbol-inner img { animation: none; }

#slot #reels .icons .symbol.is--win .symbol-inner img {
  filter: drop-shadow(0 0 10px rgba(252, 98, 0, 0.9));
  animation: winPulse 0.85s ease-in-out infinite alternate;
}

/* ── Ambient effects (glow + sparks) ─────────────── */
.effects {
  position: absolute;
  top: 50%; left: 50%;
  pointer-events: none;
}

.effects__layer {
  position: absolute;
  max-width: none;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1/1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform, opacity;
}

.effects__glow {
  background-image: url(../../assets/images/ui/effect-glow-orange.webp);
  width: 220em;
  animation: effect1 1.6s ease-in-out infinite alternate;
}

.effects__spark {
  background-image: url(../../assets/images/ui/effect-sparks.gif);
  width: 180em;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  /* recolor pink-violet sparks → CuatroBet orange (#FC6200) */
  /* recolor pink-violet sparks to brand orange */
  filter: hue-rotate(100deg) saturate(1.8) brightness(1.15) contrast(1.1);
}