/* ============================================================================
 * 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: 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;
}

/* Fundo do lobby (arte real assets/bg-lobby.png) */
.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)} }