/* ============================================================================
 * FLAPYCOPA — Base / reset / frame do app
 * ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: #02060f;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  font-weight: 700;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input { font-family: inherit; }

/* O app vive em um "frame" centralizado tipo celular */
#app {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--navy-900);
  box-shadow: 0 0 60px rgba(0,0,0,.6);
}

/* Fundo do estádio (sem assets externos: gradientes + grama). Você pode
   sobrepor uma arte real definindo --bg-home no #screen-home via CSS. */
.stadium-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 8%, rgba(31,111,255,.30), transparent 60%),
    linear-gradient(180deg, #0b2a66 0%, #0a1e4a 38%, #0a1838 60%, #08381f 60%, #0c5a2c 100%);
  z-index: 0;
}
.stadium-bg::before { /* arquibancada / luzes */
  content: ''; position: absolute; inset: 0 0 40% 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 6px, transparent 6px 14px),
    radial-gradient(60% 40% at 50% 0%, rgba(120,180,255,.18), transparent 70%);
  opacity: .5;
}
.stadium-bg::after { /* gramado listrado */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background:
    repeating-linear-gradient(75deg, rgba(0,0,0,.10) 0 26px, transparent 26px 52px),
    linear-gradient(180deg, #0e6b34, #0a4f26);
}
.bg-home-art { /* slot opcional */
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0; pointer-events: none;
}

/* Tela de carregamento (estilo splash) — UMA imagem cobrindo a tela + barra embaixo */
#loading-screen { position: fixed; inset: 0; z-index: 9999; background: #04132f; transition: opacity .55s ease; }
#loading-screen.hide { opacity: 0; pointer-events: none; }
#loading-screen .ld-art { position: absolute; inset: 0; background-color: #04132f;
  background-size: cover; background-position: center; background-repeat: no-repeat; }
/* pássaro VOA na barra de carregamento (marcador que anda conforme carrega) */
#loading-screen .ld-bird { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); z-index: 3;
  width: 42px; height: auto; display: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); transition: left .28s linear; }
#loading-screen .ld-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 90px 24px calc(28px + var(--safe-bottom)); background: linear-gradient(to top, #04132f 48%, rgba(4,19,47,.7) 74%, rgba(4,19,47,0)); }
#loading-screen .ld-bar { position: relative; height: 13px; border-radius: 999px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18); }
#loading-screen .ld-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #ff3db4, #ffd24d); box-shadow: 0 0 14px rgba(255,210,77,.7); transition: width .28s ease; }
#loading-screen .ld-text { text-align: center; font-size: 13px; font-weight: 800; color: #cfe0ff; margin-top: 22px; letter-spacing: .4px; }
#loading-screen .ld-foot { text-align: center; font-size: 11px; color: #7e8aa6; margin-top: 6px; }

/* Fundo do lobby (arte real assets/bg-lobby.jpg) */
.lobby-bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--navy-900) center top / cover no-repeat;
  animation: lobbyZoom 18s ease-in-out infinite alternate;
}
@keyframes lobbyZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.lobby-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(31,111,255,.18), transparent 60%),
    radial-gradient(80% 40% at 50% 100%, rgba(3,8,26,.85), transparent 70%),
    linear-gradient(180deg, rgba(3,8,26,.25) 0%, transparent 26%, transparent 62%, rgba(3,8,26,.55) 100%);
}
/* varredura de luz lenta (sofisticada) sobre o lobby */
.lobby-glow::after {
  content: ''; position: absolute; inset: -10%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.06) 50%, transparent 58%);
  animation: lobbySweep 9s ease-in-out infinite;
}
@keyframes lobbySweep { 0%,100% { transform: translateX(-35%); opacity: .4; } 50% { transform: translateX(35%); opacity: .9; } }

/* raios de luz do estádio varrendo (de cima) */
.lobby-rays { position: absolute; left: 50%; top: -25%; width: 150%; height: 95%; z-index: 0; pointer-events: none;
  opacity: .16; mix-blend-mode: screen; transform-origin: 50% 0%;
  background: conic-gradient(from 0deg at 50% 0%,
    transparent 0deg, rgba(255,222,130,.55) 7deg, transparent 15deg, transparent 30deg,
    rgba(130,185,255,.45) 37deg, transparent 45deg, transparent 62deg,
    rgba(255,222,130,.55) 69deg, transparent 77deg, transparent 96deg,
    rgba(130,185,255,.45) 103deg, transparent 111deg);
  animation: lobbyRays 12s ease-in-out infinite alternate; }
@keyframes lobbyRays { from { transform: translateX(-50%) rotate(-16deg); } to { transform: translateX(-50%) rotate(16deg); } }

/* partículas subindo (lobby claramente vivo) */
.lobby-particles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lobby-particles i { position: absolute; bottom: -16px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9a8, #f59a12); box-shadow: 0 0 9px rgba(255,200,60,.75); opacity: 0; animation: rise linear infinite; }
.lobby-particles i:nth-child(even) { background: radial-gradient(circle, #bfe0ff, #2f74b5); box-shadow: 0 0 9px rgba(90,160,255,.7); }
@keyframes rise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(-104vh) scale(1.1); opacity: 0; } }
.lobby-particles i:nth-child(1){left:6%;width:6px;height:6px;animation-duration:9s;animation-delay:0s}
.lobby-particles i:nth-child(2){left:16%;animation-duration:11s;animation-delay:1.4s}
.lobby-particles i:nth-child(3){left:27%;width:5px;height:5px;animation-duration:8s;animation-delay:2.6s}
.lobby-particles i:nth-child(4){left:38%;animation-duration:12s;animation-delay:.6s}
.lobby-particles i:nth-child(5){left:47%;width:9px;height:9px;animation-duration:10s;animation-delay:3.1s}
.lobby-particles i:nth-child(6){left:56%;animation-duration:9.5s;animation-delay:1.9s}
.lobby-particles i:nth-child(7){left:64%;width:5px;height:5px;animation-duration:13s;animation-delay:.3s}
.lobby-particles i:nth-child(8){left:72%;animation-duration:8.5s;animation-delay:2.2s}
.lobby-particles i:nth-child(9){left:81%;width:8px;height:8px;animation-duration:11.5s;animation-delay:3.6s}
.lobby-particles i:nth-child(10){left:88%;animation-duration:9s;animation-delay:1.1s}
.lobby-particles i:nth-child(11){left:33%;width:6px;height:6px;animation-duration:10.5s;animation-delay:4s}
.lobby-particles i:nth-child(12){left:60%;animation-duration:12.5s;animation-delay:2.8s}

/* Telas empilhadas */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; z-index: 1; }
.screen.active { display: flex; }

/* Conteúdo rolável dentro de uma tela */
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }

/* Utilitários */
.hidden { display: none !important; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.grow { flex: 1; }
.center { align-items: center; justify-content: center; }
.spread { justify-content: space-between; }
.text-dim { color: var(--text-dim); }
.text-gold { color: var(--gold-400); }
.text-green { color: var(--green-400); }
.text-red { color: var(--red-500); }
.t-sm { font-size: 12px; } .t-xs { font-size: 10px; }
.upper { text-transform: uppercase; letter-spacing: .5px; }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulseGlow { 0%,100% { box-shadow: var(--sh-btn-gold); } 50% { box-shadow: var(--sh-btn-gold), var(--glow-gold); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }