/* ══════════════════════════════════════════════════════════
   NEGODA SOLUTIONS — Lucky Spheres
   CSS fallback sphere + Three.js 3D upgrade
   ══════════════════════════════════════════════════════════ */

.lucky-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

/* ── CSS Fallback sphere (shown when WebGL unavailable) ── */
.lucky-sphere {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D4B06A, #B8924A 50%, #8A6B30);
  cursor: pointer; flex-shrink: 0;
  animation: lspin 8s linear infinite, lpulse 3s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(184,146,74,.3);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative; z-index: 3;
}
.lucky-sphere:hover { transform: scale(1.25); box-shadow: 0 4px 16px rgba(184,146,74,.5); }
.ls-sphere3d .lucky-sphere { display: none; } /* hidden when Three.js active */
.ls-sphere3d.ls-no-webgl .lucky-sphere { display: block; } /* show fallback if no WebGL */

@keyframes lspin { to { transform: rotateY(360deg); } }
@keyframes lpulse {
  0%,100% { box-shadow: 0 2px 8px rgba(184,146,74,.3); }
  50% { box-shadow: 0 2px 14px rgba(184,146,74,.5); }
}

/* ── Three.js canvas ── */
.ls-canvas {
  width: 35px !important; height: 35px !important;
  border-radius: 50%; flex-shrink: 0; cursor: pointer;
  position: relative; z-index: 3;
  transition: filter .4s ease;
  display: none; /* shown by JS after WebGL init */
}
.ls-sphere3d.ls-ready .ls-canvas { display: block; }
.ls-canvas:hover { filter: brightness(1.08) drop-shadow(0 0 6px rgba(184,146,74,.4)); }

/* ── Morph container ── */
.ls-morph {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 35px; height: 35px;
  border-radius: 50%; overflow: hidden;
  z-index: 1; display: flex; flex-direction: column;
  justify-content: center; padding: 0;
  pointer-events: none; opacity: 0;
  box-shadow: 0 12px 48px rgba(0,0,0,.6), 0 2px 12px rgba(0,0,0,.4);
}
.ls-inner { width: 284px; flex-shrink: 0; }
.ls-type {
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: #B8924A; margin-bottom: 6px; opacity: 0;
}
.ls-text {
  font-size: 14px; line-height: 1.6;
  color: rgba(250,250,248,.88); opacity: 0;
}

/* Right-aligned: morph opens to the left */
.lucky-right .ls-morph { left: auto; right: 50%; transform: translate(50%,-50%); }

/* ── Hint text ── */
.lucky-hint {
  font-size: 12px; color: rgba(26,60,52,.35);
  white-space: nowrap; transition: opacity .3s ease;
}
.sec-dark .lucky-hint { color: rgba(250,250,248,.3); }

@media (max-width: 768px) {
  .ls-canvas { width: 28px !important; height: 28px !important; }
  .ls-inner { width: 240px; }
  .ls-text { font-size: 13px; }
}