/* ============================================================
   DOPAMINE VFX — efeitos visuais + dopamine triggers
   Respeita prefers-reduced-motion globalmente
   ============================================================ */

/* --- Shake --- */
.shake-intense { animation: dopamine-shake-heavy 0.4s cubic-bezier(.36,.07,.19,.97) both; }
.shake-light   { animation: dopamine-shake-light  0.3s cubic-bezier(.36,.07,.19,.97) both; }

@media (prefers-reduced-motion: reduce) {
  .shake-intense, .shake-light { animation: none; }
}

@keyframes dopamine-shake-heavy {
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  10%{ transform:translate(-4px,-4px) rotate(-1deg); filter:brightness(1.2); }
  20%{ transform:translate(4px,4px) rotate(1deg); }
  30%{ transform:translate(-4px,4px) rotate(-1deg); }
  40%{ transform:translate(4px,-4px) rotate(1deg); }
  60%{ transform:translate(2px,2px) rotate(.5deg); filter:brightness(1.1); }
  80%{ transform:translate(2px,-2px) rotate(.5deg); }
}
@keyframes dopamine-shake-light {
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-2px,-2px); filter:brightness(1.1); }
  40%{ transform:translate(2px,2px); }
  60%{ transform:translate(-2px,2px); }
  80%{ transform:translate(2px,-2px); }
}

/* --- Floating money --- */
.floating-money {
  position: fixed;
  color: #00f5b8;
  font-weight: 900;
  font-size: 24px;
  text-shadow: 0 0 10px rgba(0,245,184,.8), 0 0 20px rgba(0,245,184,.5), 0 2px 4px rgba(0,0,0,.8);
  pointer-events: none;
  z-index: 100000;
  animation: float-up-fade 1.5s cubic-bezier(0.1,0.8,0.3,1) forwards;
  white-space: nowrap;
  transform: translate(-50%,-50%);
}
@media (prefers-reduced-motion: reduce) { .floating-money { animation: none; opacity: 0; } }
@keyframes float-up-fade {
  0%  { opacity:0; transform:translate(-50%, 0) scale(.5); }
  15% { opacity:1; transform:translate(-50%,-30px) scale(1.2); }
  30% { transform:translate(-50%,-40px) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-100px) scale(1); }
}

/* --- Confetti --- */
.css-confetti {
  position: fixed;
  top: -10px;
  z-index: 99998;
  pointer-events: none;
  animation: fall-rotate 3s linear forwards;
}
@keyframes fall-rotate {
  0%  { transform:translateY(0) rotate(0deg); opacity:1; }
  80% { opacity:1; }
  100%{ transform:translateY(100vh) rotate(720deg); opacity:0; }
}

/* --- Particle trail --- */
.drag-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  animation: particle-fade .6s ease-out forwards;
}
@keyframes particle-fade {
  0%  { transform: scale(1); opacity: .9; }
  100%{ transform: scale(0); opacity: 0; }
}

/* --- Combo text --- */
.combo-text {
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%) scale(.5);
  font-size: clamp(28px, 7vw, 48px);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  pointer-events: none;
  z-index: 100001;
  animation: combo-pop 1.4s cubic-bezier(.34,1.56,.64,1) forwards;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .combo-text { animation: none; opacity: 0; } }
@keyframes combo-pop {
  0%  { transform:translate(-50%,-50%) scale(.4); opacity:0; }
  15% { transform:translate(-50%,-70%) scale(1.2); opacity:1; }
  30% { transform:translate(-50%,-65%) scale(1); }
  70% { transform:translate(-50%,-65%) scale(1); opacity:1; }
  100%{ transform:translate(-50%,-80%) scale(.9); opacity:0; }
}

/* --- Piece tilt (via JS inline transform) + glow on drag --- */
.piece-dragging {
  filter: drop-shadow(0 0 12px rgba(139,107,255,.9)) drop-shadow(0 0 24px rgba(0,212,255,.5));
  transition: filter .1s ease;
}

/* --- Pulsing gold balance --- */
@keyframes pulse-gold {
  0%  { text-shadow: 0 0 8px rgba(255,210,77,.4); }
  100%{ text-shadow: 0 0 16px rgba(255,210,77,.8), 0 0 30px rgba(255,210,77,.4); transform:scale(1.02); }
}

/* --- Cashout button rainbow --- */
.cashout-ready {
  background: linear-gradient(90deg,#ff4d6d,#8b6bff,#00d4ff,#00f5b8) !important;
  background-size: 300% 300% !important;
  animation: rgb-bg 3s ease infinite, pulse-button 1.5s infinite alternate !important;
  color: #fff !important;
  font-weight: 900 !important;
  border: none !important;
}
@keyframes rgb-bg {
  0%  { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes pulse-button {
  0%  { box-shadow:0 0 10px rgba(139,107,255,.5); transform:scale(1); }
  100%{ box-shadow:0 0 25px rgba(0,212,255,.8), 0 0 40px rgba(255,77,109,.6); transform:scale(1.05); }
}

/* ==========================================================================
   LEGO PROGRESS BAR — Componente da barra de progresso LEGO com peça 3D
   ========================================================================== */
.lpb-wrapper {
  width: min(360px, 94%);
  margin: 10px auto;
  position: relative;
  z-index: 10;
}

.lpb {
  position: relative;
  padding: 0 26px 0 0; /* espaço pra peça andar até a ponta */
}
.lpb-track {
  position: relative;
  height: 26px;
  width: 100%;
  flex: 1;
  border-radius: 999px;
  background: linear-gradient(180deg, #0f2a16, #0a2010);
  border: 2px solid #2c5c33;
  box-shadow: inset 0 3px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.lpb-track::before {
  content:"";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 0 2.5px, transparent 3px);
  background-size: 22px 22px;
  background-position: 10px 13px;
}
.lpb-fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd23f 0%, #39ff8a 55%, #2f6fed 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 8px rgba(0,0,0,.25), 0 0 18px rgba(57,255,138,.45);
  transition: width .6s cubic-bezier(.3,.9,.25,1);
  overflow: hidden;
}
.lpb-fill::before {
  content:"";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 30px, rgba(0,0,0,.18) 30px, rgba(0,0,0,.18) 33px);
}
.lpb-fill::after {
  content:"";
  position: absolute; top:0; left:-40%;
  width: 30%; height: 100%;
  background: linear-gradient(75deg, transparent, rgba(255,255,255,.55), transparent);
  animation: lpb-sweep 2.6s ease-in-out infinite;
}
@keyframes lpb-sweep { 0%{left:-40%;} 60%{left:130%;} 100%{left:130%;} }

.lpb-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  z-index: 2;
}

.lpb-brick {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 46px;
  height: 40px;
  transform: translate(-8px, -50%);
  transition: left .6s cubic-bezier(.3,.9,.25,1);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.55));
  z-index: 3;
  animation: lpb-bob 1.1s ease-in-out infinite;
}
@keyframes lpb-bob {
  0%,100%{ transform: translate(-8px, -50%) rotate(0deg); }
  50%{ transform: translate(-8px, calc(-50% - 3px)) rotate(-2deg); }
}
.lpb-brick svg { width:100%; height:100%; display:block; }
.lpb-brick .lpb-stud,
.lpb-brick .lpb-body { transition: fill .4s ease; }
.lpb-brick .lpb-top-hl { fill:#ffffff; opacity:.35; }
.lpb-brick .lpb-bottom-sh { opacity:.35; }