:root{--vlx-plinko-disc-size:20px;--vlx-plinko-peg-size:8px;--vlx-plinko-slots:5;--vlx-plinko-peg-rows:8;--vlx-plinko-primary-color:#ffd700;--vlx-plinko-secondary-color:#ffa500;--vlx-plinko-wall-color:#8b4513;--vlx-plinko-separator-color:#333}.vlx-plinko-widget{width:100%;margin:0 auto;font-family:Arial,sans-serif}.vlx-plinko-container{position:relative;width:100%;aspect-ratio: 9 / 16;padding-top:177.78%;background:linear-gradient(to bottom,#87ceeb,#e0f6ff);border-radius:0;overflow:hidden;box-shadow:0 4px 8px rgba(0,0,0,.2)}@supports (aspect-ratio: 9 / 16) {
    .vlx-plinko-container {
        padding-top: 0;
    }
}.vlx-plinko-start-screen{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;z-index:10}.vlx-plinko-start-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.vlx-plinko-start-center{align-items:center}.vlx-plinko-start-top{align-items:flex-start;padding-top:20%}.vlx-plinko-start-bottom{align-items:flex-end;padding-bottom:20%}.vlx-plinko-start-button{padding:15px 30px;font-size:18px;font-weight:bold;border:none;border-radius:25px;cursor:pointer;transition:all .3s ease;background:linear-gradient(135deg,#ffd700,#ffa500);color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.3);box-shadow:0 4px 8px rgba(0,0,0,.2)}.vlx-plinko-start-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.3)}.vlx-plinko-start-button i{margin-right:8px}.vlx-plinko-start-image{max-width:200px;max-height:100px;cursor:pointer;transition:transform .3s ease}.vlx-plinko-start-image:hover{transform:scale(1.05)}.vlx-plinko-game-screen{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat}.vlx-plinko-wall{position:absolute;background-color:var(--vlx-plinko-wall-color);background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 4px,
            rgba(0, 0, 0, 0.1) 4px,
            rgba(0, 0, 0, 0.1) 8px
        )}.vlx-plinko-wall-left{left:0;top:0;width:8px;height:100%;--left-wall-color-1:#8b4513;--left-wall-color-2:#a0522d;background: repeating-linear-gradient(
        45deg,
        var(--left-wall-color-1),
        var(--left-wall-color-1) var(--vlx-plinko-wall-stripe, 4px),
        var(--left-wall-color-2) var(--vlx-plinko-wall-stripe, 4px),
        var(--left-wall-color-2) calc(var(--vlx-plinko-wall-stripe, 4px) * 2)
    )}.vlx-plinko-wall-right{right:0;top:0;width:8px;height:100%;--right-wall-color-1:#8b4513;--right-wall-color-2:#a0522d;background: repeating-linear-gradient(
        45deg,
        var(--right-wall-color-1),
        var(--right-wall-color-1) var(--vlx-plinko-wall-stripe, 4px),
        var(--right-wall-color-2) var(--vlx-plinko-wall-stripe, 4px),
        var(--right-wall-color-2) calc(var(--vlx-plinko-wall-stripe, 4px) * 2)
    )}.vlx-plinko-wall-bottom{bottom:0;left:0;width:100%;height:8px;--bottom-wall-color-1:#8b4513;--bottom-wall-color-2:#a0522d;background: repeating-linear-gradient(
        45deg,
        var(--bottom-wall-color-1),
        var(--bottom-wall-color-1) var(--vlx-plinko-wall-stripe, 4px),
        var(--bottom-wall-color-2) var(--vlx-plinko-wall-stripe, 4px),
        var(--bottom-wall-color-2) calc(var(--vlx-plinko-wall-stripe, 4px) * 2)
    )}.vlx-plinko-slots{position:absolute;bottom:var(--vlx-plinko-bottom-wall,8px);left:var(--vlx-plinko-left-wall,4px);right:var(--vlx-plinko-right-wall,4px);height: calc(100% / 7);display:flex;align-items:stretch;column-gap:var(--vlx-plinko-separator-thickness,4px);z-index:6}.vlx-plinko-slot{flex: 0 0 calc((100% - (var(--vlx-plinko-separator-thickness, 4px) * (var(--vlx-plinko-slots, 5) - 1))) / var(--vlx-plinko-slots, 5));position:relative;display:flex;align-items:center;justify-content:center;background:transparent!important;background-image:none!important;border-radius:0}.vlx-plinko-slot-separator{position:absolute;right: calc(-1 * var(--vlx-plinko-separator-thickness, 4px));top:0;width:var(--vlx-plinko-separator-thickness,4px);height:100%;background-color:var(--vlx-plinko-separator-color)}.vlx-plinko-slot-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;padding-inline:0;padding-block:4px;height:100%;box-sizing:border-box}.vlx-plinko-slot-image{width:var(--vlx-plinko-slot-icon-percent,40%);height:auto;max-width:100%;object-fit:contain;margin-bottom:2px}.vlx-plinko-default-icon{background:linear-gradient(135deg,#ffd700,#ffa500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.vlx-plinko-slot-info{display:flex;flex-direction:column;align-items:center;margin-top:2px}.vlx-plinko-slots:not(.vlx-slots-sized) .vlx-plinko-slot-emoji {visibility:hidden}.vlx-plinko-slot-emoji{font-size:24px;margin-bottom:2px;line-height:1;text-align:center;display:block}.vlx-plinko-default-emoji{filter:brightness(1.1) contrast(1.1)}.vlx-plinko-slot-title{font-size:10px;font-weight:bold;line-height:1.2;margin-bottom:1px;color:#333}.vlx-plinko-slot-score{font-size:12px;font-weight:bold;color:#666}.vlx-plinko-pegs{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;z-index:7}.vlx-plinko-peg{position:absolute;width:var(--vlx-plinko-peg-size);height:var(--vlx-plinko-peg-size);border-radius:50%;background-color:var(--vlx-plinko-secondary-color);box-shadow:0 2px 4px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);transform-origin:50% 50%;z-index:4}.vlx-plinko-peg .inner-circle{width:60%;height:60%;border-radius:50%;background-color:var(--vlx-plinko-primary-color)}.vlx-plinko-disc{position:absolute;width:var(--vlx-plinko-disc-size);height:var(--vlx-plinko-disc-size);border-radius:50%;background-color:var(--vlx-plinko-primary-color);color:var(--vlx-plinko-disc-icon-color,#fff);box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;z-index:8;transition:none;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%}.vlx-plinko-disc-image{width:100%;height:100%;border-radius:50%;object-fit:cover}.vlx-plinko-disc-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size: calc(var(--vlx-plinko-disc-size) * 0.6);width:1em;height:1em;color:inherit;line-height:1;display:inline-block;text-shadow:1px 1px 2px rgba(0,0,0,.3);.vlx-plinko-disc svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor !important;
    stroke: currentColor !important;
}
.vlx-plinko-disc svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}



.vlx-plinko-disc-icon svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
    stroke: currentColor;
}

.vlx-plinko-disc-icon svg path,
.vlx-plinko-disc-icon svg polygon,
.vlx-plinko-disc-icon svg circle,
.vlx-plinko-disc-icon svg rect {
    fill: currentColor;
    stroke: currentColor;
}



/* Trail */
.vlx-plinko-trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

/* Popup */
.vlx-plinko-popup-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.vlx-plinko-popup-content {
    overflow: visible !important;
    background: white;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
}

/* Popup rayburst under icon */

/* Popup enter animation: scale-in with quick inertia (after overlay fade) */
@keyframes vlx-popup-in {
  0% { opacity: 0; transform: scale(0.86); }
  60% { opacity: 1; transform: scale(1.04); }
  82% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* Real popup content defaults (animation is applied inline via JS) */
.vlx-plinko-popup-content {
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}

/* Base centering for popup content (kept when transition classes are removed) */
.vlx-pop-base { transform-origin: 50% 50%; }


/* Animate popup on mount when inside viewport (x-teleport) */
.vlx-plinko-popup-viewport .vlx-plinko-popup-content {
  animation: vlx-popup-in 340ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}


/* Alpine transition classes for popup content */
.vlx-pop-enter,
.vlx-pop-leave {
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vlx-pop-enter-start {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
}
.vlx-pop-enter-end {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.vlx-pop-leave-start {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.vlx-pop-leave-end {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
}



.vlx-plinko-popup-award { position: relative; overflow: visible !important; }
.vlx-plinko-popup-award .vlx-highlight,
.vlx-plinko-popup-award .vlx-rayburst {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
}
.vlx-plinko-popup-award .vlx-highlight { z-index: 0; pointer-events: none; }

/* Visual wrapper around the main award icon to anchor absolute layers */
.vlx-plinko-award-visual { position: relative; display: inline-block; }
.vlx-plinko-award-visual > *:not(.vlx-rayburst):not(.vlx-highlight) { position: relative; z-index: 2; }

/* Ensure highlight and rayburst inside visual wrapper are centered on the icon */
.vlx-plinko-award-visual .vlx-highlight,
.vlx-plinko-award-visual .vlx-rayburst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Stronger fallback blur in case inline style is overridden */
.vlx-plinko-award-visual .vlx-highlight-image,
.vlx-plinko-award-visual .vlx-highlight-emoji,
.vlx-plinko-award-visual .vlx-highlight-icon { filter: blur(34px) saturate(1.05); }

.vlx-plinko-popup-award .vlx-highlight::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  /* Much stronger golden glow */
  background:
    radial-gradient(circle at center,
      rgba(255,220,0,0.85) 0% 28%,
      rgba(255,215,0,0.45) 28% 55%,
      rgba(255,215,0,0.00) 70%
    );
  filter: blur(8px) drop-shadow(0 0 20px rgba(255,215,0,0.75)) drop-shadow(0 0 30px rgba(255,215,0,0.45));
}
.vlx-plinko-popup-award .vlx-rayburst {
  z-index: 1;
}
.vlx-plinko-popup-award .vlx-rayburst::before {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.50), rgba(255,255,255,0) 56%),
    repeating-conic-gradient(
      from 0deg,
      rgba(255,215,0,0.85) 0deg 14deg,
      rgba(255,215,0,0.00) 14deg 28deg
    );
  animation: vlx-spin 6s linear infinite;
  filter: drop-shadow(0 0 14px rgba(255,215,0,0.65)) drop-shadow(0 0 22px rgba(255,180,0,0.45));
  transform-origin: 50% 50%;
  opacity: 1;
}

/* Pulsing halo ring below the icon/image */
/* Creates a soft color pulse expanding from center */
/* Hidden under the prize because award children have higher z-index */
.vlx-plinko-popup-award .vlx-rayburst::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.28) 0%, rgba(255, 215, 0, 0.18) 40%, rgba(255, 215, 0, 0) 70%);
  transform: scale(0.85);
  animation: vlx-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vlx-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1.05); }
}

.vlx-plinko-popup-award > *:not(.vlx-rayburst):not(.vlx-highlight) { position: relative; z-index: 2; }

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


/* Clone-based highlight that uses the actual award content (image/emoji/icon) */
.vlx-plinko-popup-award .vlx-highlight.vlx-highlight--clone-mode::before { content: none; }
.vlx-plinko-popup-award .vlx-highlight--clone-mode, .vlx-plinko-popup-award .vlx-highlight--clone-mode * { pointer-events: none; }
.vlx-plinko-popup-award .vlx-highlight-image,
.vlx-plinko-popup-award .vlx-highlight-emoji,
.vlx-plinko-popup-award .vlx-highlight-icon {
  position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);
  filter: blur(28px) saturate(1.05);
  opacity: 0.9;
}

/* Improve smoothness of the rotating rayburst */
.vlx-plinko-popup-award .vlx-rayburst::before { will-change: transform; }

/* Fade in the blurred clone highlight when popup appears */
@keyframes vlx-clone-fade-in {
  from { opacity: 0; }
  to { opacity: var(--vlx-clone-final-op, 0.5); }
}
.vlx-plinko-popup-viewport .vlx-highlight--clone-mode {
  opacity: var(--vlx-clone-final-op, 0.5);
  animation: vlx-clone-fade-in 420ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms both;
}


/* Slot hit rayburst (temporary) */
.vlx-plinko-slot-content { position: relative; }
.vlx-plinko-slot-content.vlx-slot-rayburst-active::before {
  content: "";
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 120%; height: 120%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.2), rgba(255,255,255,0) 60%),
    conic-gradient(from 0deg,

      rgba(255,215,0,0.25) 0deg, rgba(255,215,0,0.0) 12deg,
      rgba(255,215,0,0.25) 24deg, rgba(255,215,0,0.0) 36deg,
      rgba(255,215,0,0.25) 48deg, rgba(255,215,0,0.0) 60deg,
      rgba(255,215,0,0.25) 72deg, rgba(255,215,0,0.0) 84deg,
      rgba(255,215,0,0.25) 96deg, rgba(255,215,0,0.0) 108deg,
      rgba(255,215,0,0.25) 120deg, rgba(255,215,0,0.0) 132deg,
      rgba(255,215,0,0.25) 144deg, rgba(255,215,0,0.0) 156deg,
      rgba(255,215,0,0.25) 168deg, rgba(255,215,0,0.0) 180deg,
      rgba(255,215,0,0.25) 192deg, rgba(255,215,0,0.0) 204deg,
      rgba(255,215,0,0.25) 216deg, rgba(255,215,0,0.0) 228deg,
      rgba(255,215,0,0.25) 240deg, rgba(255,215,0,0.0) 252deg,

/* After popup intro completes, pulse the real icon/image a few times */
@keyframes vlx-pop-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  70% { transform: scale(0.985); }
  100% { transform: scale(1); }
}
.vlx-pulse-active .vlx-plinko-popup-icon,
.vlx-pulse-active .vlx-plinko-popup-emoji,
.vlx-pulse-active .vlx-plinko-popup-image {
  animation: vlx-pop-pulse 900ms ease-out 2 60ms; /* 2 pulses */
}

/* Quick slot background flash on hit */
.vlx-plinko-slot-content.vlx-slot-rayburst-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.55);
  animation: vlx-slot-flash 260ms ease-out forwards;
  pointer-events: none;
}
@keyframes vlx-slot-flash {
  from { opacity: 0.9; }
  to { opacity: 0; }
}


      rgba(255,215,0,0.25) 264deg, rgba(255,215,0,0.0) 276deg,
      rgba(255,215,0,0.25) 288deg, rgba(255,215,0,0.0) 300deg,
      rgba(255,215,0,0.25) 312deg, rgba(255,215,0,0.0) 324deg,
      rgba(255,215,0,0.25) 336deg, rgba(255,215,0,0.0) 348deg,
      rgba(255,215,0,0.25) 360deg);
  animation: vlx-spin-slot 2.8s linear infinite, vlx-fade-slot 2.8s ease-out forwards;
  z-index: 0;
}
@keyframes vlx-spin-slot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes vlx-fade-slot { 0% { opacity: 0.9; } 100% { opacity: 0; } }

    margin-bottom: 20px}.vlx-plinko-popup-icon{font-size:80px;color:var(--vlx-plinko-primary-color);margin-bottom:10px;display:block}@keyframes vlx-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,215,0,0.3)); }
  50% { filter: drop-shadow(0 0 14px rgba(255,215,0,0.6)); }
}.vlx-plinko-popup-award .vlx-plinko-popup-icon,.vlx-plinko-popup-award .vlx-plinko-popup-emoji,.vlx-plinko-popup-award .vlx-plinko-popup-image{animation:vlx-glow-pulse 2.2s ease-in-out infinite}.vlx-plinko-popup-image{width:80px;height:80px;object-fit:contain;margin-bottom:10px}.vlx-plinko-popup-emoji{font-size:60px;line-height:1;text-align:center;display:block;margin-bottom:10px}.vlx-plinko-popup-title{font-size:24px;font-weight:bold;margin:10px 0;color:#333}.vlx-plinko-popup-score{font-size:32px;font-weight:bold;color:var(--vlx-plinko-primary-color);margin-bottom:15px;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.vlx-plinko-popup-extra{font-size:16px;color:#666;margin-bottom:20px;line-height:1.4}.vlx-plinko-popup-button{background:linear-gradient(135deg,#ffd700,#ffa500);color:#fff;border:none;padding:12px 30px;border-radius:25px;font-size:16px;font-weight:bold;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 8px rgba(0,0,0,.2)}.vlx-plinko-popup-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px rgba(0,0,0,.3)}.vlx-editor-invisible{background-color:rgba(255,0,0,.4)!important;opacity:.6;border:2px dashed red}.vlx-plinko-error{background:#f8d7da;color:#721c24;padding:15px;border:1px solid #f5c6cb;border-radius:4px;font-weight:bold;text-align:center}@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}.vlx-plinko-disc.bouncing{animation:bounce .3s ease-out}@keyframes glow {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.6);
    }
}.vlx-plinko-disc:hover{animation:glow 1s ease-in-out infinite}@media (max-width:480px){.vlx-plinko-start-button{padding:12px 24px;font-size:16px}.vlx-plinko-slot-title{font-size:9px}.vlx-plinko-slot-score{font-size:10px}.vlx-plinko-popup-content{padding:20px}.vlx-plinko-popup-title{font-size:20px}.vlx-plinko-popup-score{font-size:28px}.vlx-fade-enter{transition:opacity 300ms ease-out}.vlx-fade-enter-start{opacity:0}.vlx-fade-enter-end{opacity:1}.vlx-fade-leave{transition:opacity 200ms ease-in}.vlx-fade-leave-start{opacity:1}.vlx-fade-leave-end{opacity:0}}@media (max-width:320px){.vlx-plinko-slot-title{font-size:8px}.vlx-plinko-slot-score{font-size:9px}}[x-cloak]{display:none!important}.vlx-plinko-power{position:absolute;display:flex;align-items:center;justify-content:center;padding:4px;box-sizing:border-box;z-index:9;transition:opacity 120ms ease , transform 120ms ease;will-change:transform , opacity , left , top , width}.vlx-plinko-power-shell{position:relative;width:100%;height:100%;border-radius:inherit;border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 2px 6px rgba(0,0,0,.35) , 0 2px 6px rgba(0,0,0,.25);overflow:hidden}.vlx-plinko-power-fill{position:relative;height:100%;width:0%;background:#ff9b00;transition:width 80ms linear}.vlx-plinko-power-fill::after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.25),rgba(255,255,255,.05) 45%,rgba(0,0,0,.10))}.vlx-plinko-power-gloss{position:absolute;left:4px;right:4px;top:3px;height:45%;border-radius:inherit;background:linear-gradient(to bottom,rgba(255,255,255,.55),rgba(255,255,255,.08));pointer-events:none}