/* =========================
   Einarmiger Bandit – Responsive Stage Layout (Elementor-safe)
   ========================= */

/* Scope alles in den Wrapper, damit Theme/Elementor weniger reinfunkt */
.ea-bandit-wrap,
.ea-bandit-wrap * { box-sizing: border-box; }

.ea-bandit-wrap{
  /* Base Maße (Design-Koordinatensystem) */
  --ea-base-w: 392;     /* 263 + 129 */
  --ea-base-h: 762;     /* coin(100) + gap(110) + machine(552) */
  --ea-scale: 1;

  /* Slot Variablen (vormals :root) */
  --cell: 60px;
  --reel-w: 35px;
  --speed-0: 900ms;
  --speed-1: 1100ms;
  --speed-2: 1300ms;
  --speed-3: 1500ms;

  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  color:#005500;
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;

  isolation: isolate; /* saubere z-index Welt */
}

/* Shell: nimmt die verfügbare Breite (Elementor Container), setzt Höhe per JS */
.ea-bandit-shell{
  width: min(100%, calc(var(--ea-base-w) * 1px));
  position: relative;
  margin: 0 auto;
  height: calc(var(--ea-base-h) * var(--ea-scale) * 1px);
}

/* Stage: das komplette Gerät läuft im festen Koordinatensystem und wird skaliert */
.ea-bandit-shell .slotmachine{
  width: calc(var(--ea-base-w) * 1px);
  height: calc(var(--ea-base-h) * 1px);

  position: absolute;
  top: 0;
  left: 50%;

  transform-origin: top center;
  transform: translateX(-50%) scale(var(--ea-scale));

  /* 3D-Perspektive für den Arm */
  perspective: 900px;

  /* Bezugssystem für alle Absolutes */
  position: absolute;
}

/* Standard-SR only */
.ea-bandit-wrap .sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* =========================
   Layer-Positionen (BASE)
   ========================= */

/* Coin (oben) */
.scene{
  position: absolute;
  left: 68px;   /* grob mittig über dem Gehäuse (nicht über dem Hebel) */
  top: 0;
  perspective: 1000px;
  z-index: 6;
}
.coin{
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: coin-spin 2s ease-in-out infinite;
}
.coin__face{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.coin__face img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.coin__face--back{ transform: rotateY(180deg); }

@keyframes coin-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Crown / Win Visual */
#win-visual{
  position: absolute;
  left: 19px;
  top: 100px;
  width: 200px;
  height: 125px;
  z-index: 5;
}
#win-png,
#win-gif{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* GIF größer als PNG (zentriert, X+Y skaliert) */
#win-gif{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.06);   /* ggf. 1.10–1.20 feinjustieren */
  transform-origin: center;
  object-fit: contain;

  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s linear;
}


#win-visual.gif-active #win-gif{ opacity: 1; }
#win-visual.gif-active #win-png{ opacity: 0; }

/* Gehäuse */
.slot-img{
  position: absolute;
  left: 0;
  top: 210px;           /* 100 coin + 110 Abstand */
  width: 263px;
  height: 552px;
  z-index: 2;
  display: block;
}

/* Reels / Walzen */
.slot-stage{
  position: absolute;
  left: 38px;
  top: 452px;
  width: 175px;
  height: var(--cell);
  display: grid;
  grid-template-columns: repeat(4, var(--reel-w));
  gap: 6px;
  align-items: center;
  z-index: 4;
}
.reel{
  width: var(--reel-w);
  height: var(--cell);
  overflow: hidden;
  border-radius: 0px;

  background: transparent; /* <- war #fff */

  box-shadow: 0 6px 18px rgba(0,0,0,.4); /* optional: inset-Teil weglassen */
  position: relative;
}

.strip{
  transform: translate3d(0,0,0);
}
/* nur während des Spins */
.reel.is-spinning .strip{
  will-change: transform;
}
.symbol{
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--cell);
  font-size: 40px;
  line-height: 1;
  user-select: none;
  font-family: "Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",system-ui,sans-serif;
  font-weight: bold;

  border: 2px solid #000;
  background: #fff;              /* <- neu */
  background-clip: padding-box;  /* <- hilft gegen Kanten-Artefakte */
}

.symbol--emoji{ font-size: 22px; }

/* Galerie-Fenster (im Gehäuse) */
.galerie1,
.galerie2{
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.galerie1{
  left: 26px;
  top: 250px;
  width: 133px;
  height: 130px;
  background: #ffaf2e;
}
.galerie2{
  left: 22px;
  top: 596px;
  width: 190px;
  height: 130px;
  background: #C0C0BF;
}

.galerie1 img,
.galerie2 img{
  padding: 15px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Carousel Track (wird per JS erzeugt) */
.carousel-track{
  display: flex;
  position: absolute;
  inset: 0;
  height: 100%;
  will-change: transform;
}
.galerie2 .carousel-track{
	left:34px;
	top:4px;
}
.carousel-slide{
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-slide img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* Richtungsoptionen Galerien */
.ea-bandit-wrap .galerie1.carousel-dir-right,
.ea-bandit-wrap .galerie2.carousel-dir-right{ transform: scaleX(-1); }
.ea-bandit-wrap .galerie1.carousel-dir-right img,
.ea-bandit-wrap .galerie2.carousel-dir-right img{ transform: scaleX(-1); }

/* Marquee (jetzt innerhalb der Stage) */
.marquee-box{
  position: absolute;
  left: 23px;
  top: 394px; /* falls nötig, später 1–2px justieren */
  width: 188px;
  height: 29px;
  overflow: hidden;
  background: var(--ea-marquee-bg, #111);
  display: flex;
  align-items: center;
  z-index: 4;
}
.marquee-track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-loop 40s linear infinite;
}
.marquee-text{
  white-space: nowrap;
  padding-right: 5px;
  font-size: var(--ea-marquee-font-size, 14px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ea-marquee-color, #ffd166);
}
@keyframes marquee-loop{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ea-bandit-wrap .marquee-box.marquee-dir-right{ transform: scaleX(-1); }
.ea-bandit-wrap .marquee-box.marquee-dir-right .marquee-text{ transform: scaleX(-1); display:inline-block; }

/* =========================
   Hebel / Arm (hand.png) – 3D-Animation
   ========================= */

/* slot-controls bleibt im Markup – wir nutzen ihn nur als Container */
.slot-controls{
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none; /* nur der Button soll klickbar sein */
}

#lever.lever{
  position: absolute;
  left: 251px;  /* aus alter Layout-Logik abgeleitet (attach am Gehäuse) */
  top: 269px;

  width: 129px;
  height: 322px;

  padding: 0;
  border: none;
  background: none;
  cursor: pointer;

  transform-style: preserve-3d;
  transform-origin: 100px 160px;

  box-shadow: none;
  pointer-events: auto;
  touch-action: manipulation;
}

/* Hover/Active neutralisieren */
#lever.lever,
#lever.lever:hover,
#lever.lever:active{
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent;
}

#lever.lever .lever-img{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
}

/* „Dicke“ faken: versetzter Doppelgänger – mit 2x Support */
#lever.lever::before{
  content: "";
  position: absolute;
  inset: 0;

  /* Fallback */
  background: url("hand.png") no-repeat 0 0 / contain;
  /* 2x */
  background: image-set(
    url("hand.png") 1x,
    url("hand@2x.png") 2x
  ) no-repeat 0 0 / contain;

  transform: translateZ(-8px) translate(1px, 1px);
  filter: brightness(0.5) saturate(0.9);
}

/* Animation */
#lever.lever.is-pulling{
  animation: leverPullForward 0.7s cubic-bezier(0.22, 0.7, 0.25, 1.1);
}
#lever.lever.is-pulling .lever-img{
  animation: leverShadow 0.7s cubic-bezier(0.22, 0.7, 0.25, 1.1);
}

@keyframes leverPullForward{
  0%   { transform: rotateX(0deg) translateZ(0) translateY(0) scale(1); }
  45%  { transform: rotateX(-75deg) translateZ(90px) translateY(45px) scale(1.05); }
  65%  { transform: rotateX(-40deg) translateZ(40px) translateY(20px) scale(1.02); }
  100% { transform: rotateX(0deg) translateZ(0) translateY(0) scale(1); }
}
@keyframes leverShadow{
  0%   { filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4)); }
  35%  { filter: drop-shadow(0 10px 12px rgba(0,0,0,0.6)); }
  100% { filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4)); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .strip{ transition: none !important; }
  .marquee-track{ animation: none !important; }
  .coin{ animation: none !important; }
}