/* Correctifs visuels anti-rayures : suppression des effets réguliers (scanlines, grilles,
   textures répétées et calques GPU forcés) qui pouvaient donner l'impression d'un écran cassé. */
.home-holo-panel::after {
  background:
    radial-gradient(circle at 46% 36%, hsl(var(--accent) / 0.13), transparent 34%),
    radial-gradient(circle at 64% 68%, hsl(var(--primary) / 0.10), transparent 42%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.22;
  animation: none;
}

.star-field,
.home-star-parallax {
  background-image:
    radial-gradient(circle at 9% 12%, hsl(var(--foreground) / 0.28) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 22% 74%, hsl(var(--accent) / 0.24) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 37% 28%, hsl(var(--foreground) / 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 51% 86%, hsl(var(--primary) / 0.20) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 68% 18%, hsl(var(--foreground) / 0.24) 0 1.1px, transparent 2.1px),
    radial-gradient(circle at 79% 57%, hsl(var(--accent) / 0.20) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 91% 34%, hsl(var(--foreground) / 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 13% 46%, hsl(var(--warning) / 0.16) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 44% 61%, hsl(var(--foreground) / 0.18) 0 1.1px, transparent 2.1px),
    radial-gradient(circle at 86% 81%, hsl(var(--primary) / 0.18) 0 1.3px, transparent 2.3px);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.home-star-parallax {
  animation: none;
}

.home-cosmic-grid {
  background-image:
    radial-gradient(circle at 26% 30%, hsl(var(--accent) / 0.12), transparent 14rem),
    radial-gradient(circle at 72% 65%, hsl(var(--primary) / 0.10), transparent 18rem),
    radial-gradient(circle at 50% 50%, hsl(var(--warning) / 0.06), transparent 22rem);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  mask-image: radial-gradient(circle at center, black, transparent 84%);
  opacity: 0.48;
  animation: none;
}

.home-laser-scan {
  height: 2px;
  background: radial-gradient(ellipse at center, hsl(var(--accent) / 0.32), transparent 72%);
  filter: blur(2px);
  opacity: 0.42;
}

.arcade-stage,
.game-canvas,
.home-ship-panel,
.home-rocket-image,
.shop-rocket-photo {
  backface-visibility: visible;
  transform: none;
  will-change: auto;
}

.game-canvas {
  background-clip: padding-box;
  image-rendering: auto;
  contain: paint;
}

.game-app {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  overflow: hidden;
}

.game-app > .mx-auto,
.game-app .grid.flex-1 {
  min-height: 0;
}

.game-app .arcade-stage {
  width: min(100%, 30rem);
}

.shop-fit-screen article > div[class*="grid-cols-[5rem_minmax"] {
  grid-template-columns: 5rem minmax(0, 1fr) !important;
}

.pass-rail [role="tooltip"] {
  position: fixed !important;
  top: 50% !important;
  left: clamp(0.75rem, 4vw, 2rem) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(17rem, calc(46vw - 1rem)) !important;
  max-width: calc(100vw - 1.5rem);
  transform: translateY(-50%) !important;
}

@media (max-width: 1023px) {
  .game-app .arcade-stage {
    width: fit-content;
    max-width: 100%;
    max-height: calc(100dvh - 5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin-left: auto;
    margin-right: auto;
  }

  .game-canvas {
    width: auto;
    height: calc(100dvh - 5.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-width: 100%;
    max-height: calc(100dvh - 5.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  .game-app > .mx-auto > div:first-child span.rounded-full {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .game-app > .mx-auto > div:first-child {
    gap: 0.35rem;
  }

  .pass-rail [role="tooltip"] {
    top: 56% !important;
    left: 0.5rem !important;
    width: min(9.75rem, 43vw) !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .game-app > .mx-auto > div:first-child {
    min-height: 3.25rem;
  }

  .game-app .arcade-stage {
    width: fit-content;
    max-width: 100%;
  }

  .game-canvas {
    width: auto;
    height: calc(100dvh - 4.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 4.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .pass-rail [role="tooltip"] {
    top: 58% !important;
    left: 0.75rem !important;
    width: min(15rem, 36vw) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-holo-panel::after,
  .home-cosmic-grid,
  .home-laser-scan,
  .home-star-parallax {
    animation: none !important;
  }
}

/* Custom Space Pass animations */
@keyframes scaleUp {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.animate-scale-up {
  animation: scaleUp 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes fadeInUp {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pulseSubtle {
  0%, 100% { border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 0 8px rgba(245, 158, 11, 0.15); }
  50% { border-color: rgba(245, 158, 11, 0.95); box-shadow: 0 0 16px rgba(245, 158, 11, 0.45); }
}
.animate-pulse-subtle {
  animation: pulseSubtle 1.8s infinite;
}

/* Custom scrollbar behavior for horizontal road */
.custom-scrollbar::-webkit-scrollbar {
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--border) / 0.8);
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary));
}