/* 3D City Chef Custom Styles */
@keyframes pop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-pop {
  animation: pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Order Ticket Pulse */
@keyframes urgent-pulse {
  0%, 100% { border-color: rgb(239 68 68); transform: scale(1); }
  50% { border-color: rgb(254 202 202); transform: scale(1.03); }
}

.order-ticket-urgent {
  animation: urgent-pulse 0.8s infinite ease-in-out;
}

/* Three.js Container */
#canvas-container {
  touch-action: none;
}

#canvas-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Touch selection prevention */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Reticle animation & glow */
#fp-reticle {
  transition: transform 0.15s ease-out;
}

/* Glassmorphism on HUD buttons */
.hud-btn {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Ultra Realistic 3D canvas viewport styling */
#canvas-container canvas {
  image-rendering: auto;
  filter: contrast(1.05) saturate(1.15);
  transition: filter 0.3s ease;
}

/* Quality Preset Badge */
#graphics-badge {
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

/* Ping notification pop animation */
@keyframes ping-slide {
  0% { transform: translate(-50%, -10px) scale(0.9); opacity: 0; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

.animate-ping-toast {
  animation: ping-slide 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Shootout Penalty Dot Indicators */
.penalty-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #292524;
  border: 1.5px solid #57534e;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

.penalty-dot.goal {
  background-color: #22c55e;
  border-color: #86efac;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
  transform: scale(1.15);
}

.penalty-dot.miss {
  background-color: #ef4444;
  border-color: #fca5a5;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
  transform: scale(1.15);
}

/* Shootout Aiming Reticle */
#shootout-aim-target {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.8), inset 0 0 10px rgba(245, 158, 11, 0.4);
  animation: reticle-pulse 1.2s infinite ease-in-out;
}

@keyframes reticle-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Goalie Dive Buttons Glow */
.goalie-dive-btn:hover {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}