/* ============================================================
   DESIGN SYSTEM — PokéArena
   ============================================================ */

:root {
  /* Paleta principal */
  --clr-bg:          #05060f;
  --clr-bg-2:        #0a0d1f;
  --clr-surface:     #0f1328;
  --clr-surface-2:   #161b38;
  --clr-border:      rgba(99, 120, 255, 0.18);
  --clr-border-glow: rgba(99, 120, 255, 0.45);

  /* Azul elétrico */
  --clr-primary:     #4f6ef7;
  --clr-primary-h:   #6f8fff;
  --clr-primary-glow:rgba(79, 110, 247, 0.4);

  /* Dourado / energia */
  --clr-gold:        #f5c842;
  --clr-gold-h:      #ffd966;
  --clr-gold-glow:   rgba(245, 200, 66, 0.35);

  /* Vermelho Pokébola */
  --clr-red:         #e63950;
  --clr-red-glow:    rgba(230, 57, 80, 0.35);

  /* Texto */
  --clr-text:        #e8eaf6;
  --clr-text-muted:  #7b85b8;
  --clr-text-dim:    #3d4470;

  /* Tipografia */
  --font-display:    'Orbitron', sans-serif;
  --font-body:       'Rajdhani', sans-serif;

  /* Espaçamento */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* Raios */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Transições */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.6s ease;

  /* Sombras */
  --shadow-card: 0 8px 40px rgba(0,0,0,0.6);
  --shadow-glow-blue: 0 0 40px var(--clr-primary-glow);
  --shadow-glow-gold: 0 0 40px var(--clr-gold-glow);
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--clr-primary-h);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--clr-gold); }

img { display: block; max-width: 100%; }

/* Utilitários */
.hidden { display: none !important; }

/* ============================================================
   POKÉBOLA — componente reutilizável
   ============================================================ */
.pokeball-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 20px var(--clr-red-glow), inset 0 0 20px rgba(0,0,0,0.4);
}
.pb-top {
  height: 50%;
  background: linear-gradient(135deg, #e63950 0%, #c0213a 100%);
}
.pb-bottom {
  height: 50%;
  background: linear-gradient(135deg, #e8eaf6 0%, #b0b8d8 100%);
}
.pb-middle {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 6px;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pb-button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, #aab0d0 100%);
  border: 2px solid #111;
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.pb-button.spinning {
  animation: spin 1s linear infinite;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb {
  background: var(--clr-primary);
  border-radius: 3px;
}

/* ============================================================
   ANIMAÇÕES BASE
   ============================================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px var(--clr-primary-glow); }
  50%       { box-shadow: 0 0 40px var(--clr-primary-glow), 0 0 80px var(--clr-primary-glow); }
}

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

@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(250%) skewX(-15deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes glitch {
  0%   { clip-path: inset(40% 0 61% 0); transform: skewX(-5deg); }
  20%  { clip-path: inset(92% 0 1% 0);  transform: skewX(3deg); }
  40%  { clip-path: inset(43% 0 1% 0);  transform: skewX(-2deg); }
  60%  { clip-path: inset(25% 0 58% 0); transform: skewX(4deg); }
  80%  { clip-path: inset(54% 0 7% 0);  transform: skewX(-1deg); }
  100% { clip-path: inset(58% 0 43% 0); transform: skewX(2deg); }
}

@keyframes scan-line {
  0%   { top: -10%; }
  100% { top: 110%; }
}