/* ============================================================
   BOLÃO COPA 2026 - KBET | DESIGN TOKENS & GLOBAL STYLES
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   TOKENS DE DESIGN
   ============================================================ */
:root {
  /* Paleta Seleção Brasileira Premium */
  --color-bg:           #051937;
  --color-bg-deep:      #020D1E;
  --color-bg-surface:   #0A2240;
  /* Cards mais claros para melhor leitura sobre o fundo imersivo */
  --color-bg-card:      rgba(8, 28, 60, 0.82);
  --color-bg-card-hover:rgba(10, 36, 72, 0.92);

  --color-primary:      #FFCC00;  /* Amarelo Canarinho */
  --color-primary-dark: #D4A500;
  --color-primary-glow: rgba(255, 204, 0, 0.35);
  --color-primary-dim:  rgba(255, 204, 0, 0.12);

  --color-secondary:    #006437;  /* Verde Bandeira */
  --color-secondary-dark: #004B23;
  --color-secondary-light:#00A058;
  --color-secondary-glow: rgba(0, 100, 55, 0.4);

  --color-success:      #00C878;
  --color-error:        #FF4B5C;
  --color-warning:      #FFB020;
  --color-info:         #3B9EFF;

  --color-text:         #F0F4FF;
  --color-text-muted:   rgba(240, 244, 255, 0.55);
  --color-text-dim:     rgba(240, 244, 255, 0.30);
  --color-border:       rgba(255, 204, 0, 0.12);
  --color-border-hover: rgba(255, 204, 0, 0.35);

  /* Glassmorphism — tons mais claros sobre fundo escuro */
  --glass-bg:     rgba(8, 28, 60, 0.78);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur:   blur(18px);
  --glass-blur-lg:blur(32px);

  /* Tipografia */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Espaçamentos */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.5);
  --shadow-primary: 0 0 20px rgba(255,204,0,0.25), 0 0 60px rgba(255,204,0,0.1);
  --shadow-success: 0 0 20px rgba(0,100,55,0.35), 0 0 60px rgba(0,100,55,0.15);

  /* Transições */
  --transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base:    1;
  --z-above:   10;
  --z-modal:   100;
  --z-toast:   200;
  --z-top:     300;
}

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

html {
  font-size: 18px; /* Aumentado de 16px para 18px para melhorar a legibilidade em todo o site */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-deep);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--font-body); }
ul, ol { list-style: none; }

/* ============================================================
   SCROLLBAR CUSTOMIZADA
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 204, 0, 0.20); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); border: 2px solid transparent; background-clip: padding-box; }

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }

.text-gold    { color: var(--color-primary); }
.text-green   { color: var(--color-secondary-light); }
.text-muted   { color: var(--color-text-muted); }
.text-center  { text-align: center; }
.text-sm      { font-size: 0.875rem; }
.text-xs      { font-size: 0.75rem; }
.text-lg      { font-size: 1.125rem; }
.text-xl      { font-size: 1.25rem; }
.font-display { font-family: var(--font-display); }
.font-bold    { font-weight: 700; }
.font-semibold{ font-weight: 600; }
.font-medium  { font-weight: 500; }

/* ============================================================
   LAYOUT UTILITÁRIOS
   ============================================================ */
.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-lg {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }

.w-full  { width: 100%; }
.h-full  { height: 100%; }
.relative{ position: relative; }
.absolute{ position: absolute; }

.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================================
   SISTEMA DE FUNDO IMERSIVO COM PARALLAX
   ============================================================ */

/* Camada 1 — Imagem do estádio (estática, sem parallax) */
#parallax-stadium {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/stadium_bg.png');
  background-size: cover;
  background-position: center 30%;
  z-index: -3;
}

/* Camada 2 — Overlay de profundidade (gradiente multicamada) */
#parallax-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    /* Vinheta das bordas */
    radial-gradient(ellipse at center, transparent 30%, rgba(2, 13, 30, 0.65) 100%),
    /* Gradiente vertical — campo na base, céu no topo */
    linear-gradient(
      to bottom,
      rgba(2, 13, 30, 0.55) 0%,      /* topo: céu azul escuro */
      rgba(5, 25, 55, 0.45) 35%,     /* meio: estádio */
      rgba(3, 18, 40, 0.70) 65%,     /* campo */
      rgba(2, 10, 24, 0.90) 100%     /* base: escuro total */
    );
}

/* Camada 3 — Glow desativado */
#parallax-glow {
  display: none;
}

/* Camada 4 — Luzes de estádio (raios) */
#parallax-lights {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

#parallax-lights::before,
#parallax-lights::after {
  content: '';
  position: absolute;
  top: -10%;
  width: 5px;
  height: 75%;
  background: linear-gradient(to bottom,
    rgba(255, 220, 120, 0.85),
    rgba(180, 220, 255, 0.45),
    transparent);
  filter: blur(5px);
  animation: stadiumBeam 2s ease-in-out infinite alternate;
}

#parallax-lights::before {
  left: 22%;
  transform: rotate(-14deg);
  transform-origin: top center;
  animation-delay: 0s;
}

#parallax-lights::after {
  right: 22%;
  transform: rotate(14deg);
  transform-origin: top center;
  animation-delay: 0.7s;
}

@keyframes trophyGlow {
  0%, 100% { opacity: 0.60; }
  50%       { opacity: 1.0; }
}

@keyframes stadiumBeam {
  from { opacity: 0.50; }
  to   { opacity: 1.0; }
}

/* Estrelas/partículas de fundo (mantidas para sparkle) */
.stars-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.bg-gradient-main {
  background: linear-gradient(135deg, var(--color-bg-deep) 0%, var(--color-bg) 50%, var(--color-secondary-dark) 100%);
}

.bg-gradient-card {
  background: linear-gradient(145deg, rgba(10,34,64,0.8) 0%, rgba(0,75,35,0.3) 100%);
}

/* ============================================================
   TELA / ROTEAMENTO
   ============================================================ */
.screen {
  display: none;
  min-height: 100vh;
  padding-bottom: 88px; /* espaço para a nav bar */
  animation: screenFadeIn 0.35s ease forwards;
  position: relative;
  z-index: 1;
}

.screen.active {
  display: flex;
  flex-direction: column;
}

/* Melhor distribuição vertical — conteúdo ocupa toda a tela */
.screen > .container,
.screen > .screen-header + .container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 var(--space-3); }
  .grid-2 { gap: var(--space-3); }
}

@media (min-width: 768px) {
  .container { max-width: 600px; }
  .container-lg { max-width: 1024px; }
}