/* VeloxityPlugin Plinko Widget Styles */

/* CSS Variables for customization */
: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: #333333;
}

/* Main Container with 9/16 aspect ratio */
.vlx-plinko-widget {
    width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.vlx-plinko-container {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    /* Fallback for older browsers */
    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, 0.2);
}

/* Remove padding-top when aspect-ratio is supported */
@supports (aspect-ratio: 9 / 16) {
    .vlx-plinko-container {
        padding-top: 0;
    }
}

/* Start Screen */
.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 0.3s ease;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.vlx-plinko-start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 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 0.3s ease;
}

.vlx-plinko-start-image:hover {
    transform: scale(1.05);
}

/* Game Screen */
.vlx-plinko-game-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Walls */
.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)
    );
}

/* Slots */
.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); /* visual gap equals separator thickness */
    z-index: 6; /* Slots under pegs (pegs z-index 7), but above background */
}

.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)); /* sit inside the gap */
    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%; /* ensure 100% width for percent-based icon sizing */
    padding-inline: 0; /* full width of computed slot */
    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 {
    /* Gradient colors for default icons */
    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, 0.2);
}

.vlx-plinko-slot-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2px;
}


/* Hide emoji until we size them to avoid flicker */
.vlx-plinko-slots:not(.vlx-slots-sized) .vlx-plinko-slot-emoji { visibility: hidden; }

.vlx-plinko-slot-emoji {
    font-size: 24px; /* JS will override to percent of slot width */
    margin-bottom: 2px;
    line-height: 1;
    text-align: center;
    display: block;
}

.vlx-plinko-default-emoji {
    /* Default emoji styling */
    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;
}

/* Pegs */
.vlx-plinko-pegs {
    position: absolute;
    top: 0; /* JS controls vertical positioning of pegs */
    left: 0; /* Fill full width; JS accounts for wall thickness */
    right: 0;
    height: 100%; /* JS will keep rows out of the slot area */
    pointer-events: none;
    z-index: 7; /* Above separators and slot content, below disc */
}

.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, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    z-index: 4; /* Above background but below disc */
}

.vlx-plinko-peg .inner-circle {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-color: var(--vlx-plinko-primary-color);
}

/* Disc */
.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); /* allow Elementor color or gradient to override */
    color: var(--vlx-plinko-disc-icon-color, #ffffff); /* default white; can be overridden by Elementor selectors */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 8; /* Above pegs and slots */
    transition: none; /* Remove transition to avoid conflicts with JS positioning */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Remove CSS positioning - let JavaScript handle it */
    transform-origin: 50% 50%; /* ensure rotation around center */

}

.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; /* let Elementor/inline style control color */
    line-height: 1;
    display: inline-block;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

/* Ensure any SVG inside the disc uses the disc color */
.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;
}

/* Popup icon glow pulse */
@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, 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: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.vlx-plinko-popup-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Editor Mode - Show invisible elements */
.vlx-editor-invisible {
    background-color: rgba(255, 0, 0, 0.4) !important;
    opacity: 0.6;
    border: 2px dashed red;
}

/* Error Styling */
.vlx-plinko-error {
    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

/* Animations */
@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 0.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;
}

/* Responsive Design */
@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;
    }

/* Alpine-powered overlay fade (not Tailwind-dependent) */
.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;
    }
}

/* Power charge bar */
[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; /* above pegs, below overlays */
    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,0.28);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
    overflow: hidden;
}
.vlx-plinko-power-fill {
    position: relative;
    height: 100%;
    width: 0%;
    background: #ff9b00; /* overridden inline */
    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,0.25), rgba(255,255,255,0.05) 45%, rgba(0,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,0.55), rgba(255,255,255,0.08));
    pointer-events: none;
}