/* ==========================================================================
   TCG ZONE — Cyber-Nexus design system
   Estilos base compartidos por todas las páginas
   ========================================================================== */

@layer base {
  html, body { margin: 0; padding: 0; }
  body {
    overscroll-behavior: none;
    background-image: radial-gradient(circle at 50% 50%, #1b1b25 0%, #12121d 100%);
  }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}

::-webkit-scrollbar { display: none; }
.custom-scrollbar::-webkit-scrollbar { display: block; width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #3b494b; border-radius: 4px; }

/* Header glass */
header.site-header {
  background: rgba(18, 18, 29, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(125, 244, 255, 0.1);
}

/* Animated underline nav links */
.nav-link { position: relative; overflow: hidden; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: #00dbe9;
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }

/* Marquee ticker */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.animate-marquee { animation: marquee 20s linear infinite; }

/* 3D card helpers */
.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; }
.rotate-x-6 { transform: rotateX(6deg); }
.group:hover .hover-rotate-y-12 { transform: rotateY(12deg) rotateX(6deg); }

/* Toast (feedback al añadir al carrito) */
#toast-stack {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.toast {
  background: rgba(31, 31, 41, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 219, 233, 0.4);
  box-shadow: 0 0 20px rgba(0, 219, 233, 0.15);
  color: #e4e1f0;
  padding: 12px 18px;
  border-radius: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast.show { transform: translateX(0); }
.toast .material-symbols-outlined { color: #00dbe9; font-size: 18px; }

/* Cart badge */
.cart-badge {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #00dbe9;
  color: #00363a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(0, 219, 233, 0.6);
}
.cart-badge.hidden { display: none; }

/* Language switcher dropdown */
.lang-menu { display: none; }
.lang-menu.open { display: block; }

/* Utility to hide elements the JS controls before hydration */
[data-cloak] { visibility: hidden; }