/* Lucky Jet Optimizations & Visual Improvements */

/* === GPU Acceleration for Smooth Animations === */
.multiplier,
.graph-moon,
.graph-clouds,
.game-value-element,
.bet,
.betted,
.guymove,
[class*="animate"],
[class*="flew"] {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* === Glow Effect on Multiplier Text === */
.multiplier {
  text-shadow: 0 0 10px rgba(94, 40, 250, 0.3),
               0 0 20px rgba(94, 40, 250, 0.2),
               0 0 40px rgba(94, 40, 250, 0.1);
  transition: text-shadow 0.3s ease;
}

/* === Smooth Modal Transitions === */
.modal-overlay,
[class*="modal"],
.deposit-choice,
[class*="deposit"] {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* === Prettier Bet Panel Buttons === */
.bet-controls button,
.deposit-submit,
[class*="submit"],
.auth-form input[type="submit"] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bet-controls button:hover,
.deposit-submit:hover,
.auth-form input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(94, 40, 250, 0.4);
}

.bet-controls button:active,
.deposit-submit:active,
.auth-form input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(94, 40, 250, 0.3);
}

/* === Gradient Accent Elements === */
.deposit-top span,
.header span,
[class*="title"],
[class*="heading"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Smooth Header Border Animation === */
header {
  border-image: linear-gradient(90deg, transparent, #5e28fa, #9250f5, transparent) 1;
  animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* === Enhanced Game State Transitions === */
.game-awaiting-container {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* === Input Field Improvements === */
.deposit-input,
.auth-form input,
input[class*="input"] {
  transition: all 0.2s ease !important;
  background: rgba(31, 23, 60, 0.6) !important;
  border: 1px solid rgba(80, 55, 127, 0.3) !important;
}

.deposit-input:focus,
.auth-form input:focus,
input[class*="input"]:focus {
  border-color: #5e28fa !important;
  box-shadow: 0 0 0 3px rgba(94, 40, 250, 0.15) !important;
}

/* === History/List Item Animations === */
[class*="history"] [class*="item"],
[class*="bet-item"],
.bets-info > div {
  transition: background 0.2s ease, transform 0.2s ease;
}

[class*="history"] [class*="item"]:hover,
[class*="bet-item"]:hover {
  background: rgba(31, 23, 60, 0.5) !important;
  transform: translateX(4px);
}

/* === Scrollbar Styling === */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--block-darker-1, #100d20);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5e28fa, #9250f5);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #764ba2;
}

/* === Loading Spinner Enhancement === */
[class*="loading"],
[class*="spinner"] {
  border-color: rgba(94, 40, 250, 0.2) !important;
  border-top-color: #5e28fa !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === Notification Animation Improvement === */
@keyframes notificationSlideIn {
  0% { opacity: 0; transform: translateX(100px) scale(0.9); }
  60% { transform: translateX(-10px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

[class*="notification"],
[class*="alert"] {
  animation: notificationSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === Graph Area Enhancement === */
.graph-container {
  position: relative;
  overflow: hidden;
}

.graph-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(94, 40, 250, 0.03) 0%,
    transparent 70%);
}

/* === Moon/Cloud Smooth Movement === */
@keyframes moonSmooth {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  25% { transform: translate(3px, -2px) scale(1.01) rotate(1deg); }
  75% { transform: translate(-2px, 1px) scale(0.99) rotate(-0.5deg); }
}

.moonMove,
[class*="moon"] {
  animation: moonSmooth 8s ease-in-out infinite !important;
}

/* === Flight Animation Improvement === */
@keyframes flySmooth {
  0% { opacity: 1; transform: translate(-65px, -90px) scale(1); }
  50% { opacity: 0.8; transform: translate(-70px, -100px) scale(1.1); }
  100% { opacity: 0; transform: translate(-80px, -120px) scale(1.2); }
}

[class*="flew"],
[class*="fly"] {
  animation: flySmooth 1.5s ease-out forwards !important;
}

/* === Text Animation for Multiplier === */
@keyframes multiplierPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.game-value-element,
.multiplier {
  animation: multiplierPulse 2s ease-in-out infinite;
}

/* === Responsive Improvements === */
@media (max-width: 768px) {
  .deposit-input,
  .auth-form input {
    font-size: 16px !important;
  }
  
  [class*="modal"],
  .deposit-choice {
    max-width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
  }
}

/* === Floating Particles Background === */
.graph-container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.1) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,0.08) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.12) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.06) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.1) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 80%, rgba(255,255,255,0.08) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 90%, rgba(255,255,255,0.06) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 15%, rgba(255,255,255,0.1) 0%, transparent 100%);
  animation: floatParticles 15s ease-in-out infinite;
}

@keyframes floatParticles {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-20px); opacity: 1; }
}

/* === Multiplier Highlight at High Values === */
.game-value-element[data-high="true"],
.multiplier.high {
  text-shadow:
    0 0 20px rgba(255, 200, 0, 0.4),
    0 0 40px rgba(255, 200, 0, 0.2),
    0 0 80px rgba(255, 200, 0, 0.1) !important;
  color: #ffcc00 !important;
}

/* === Smooth Balance Update === */
[class*="balance"],
.wallet-amount {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Button Press Ripple === */
.bet-controls button,
.deposit-submit {
  position: relative;
  overflow: hidden;
}

.bet-controls button::after,
.deposit-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bet-controls button:active::after,
.deposit-submit:active::after {
  opacity: 1;
}