/* =============================================
   ALVO.CSS – Estilos do jogo "Tocar no Alvo"
   Depende de css/global.css e css/games/_base.css.
   ============================================= */

html, body { --game-bg: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%); }

/* HEADER */
.game-header {
  position: fixed;
  top: 10px; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 8px;
}

/* ARENA */
#arena {
  position: fixed;
  top: 70px; left: 0; right: 0; bottom: 60px;
}

/* BARRA INFERIOR (override) */
.bottom-bar p {
  font-size: 1.1rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ALVOS */
.target {
  position: absolute;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  touch-action: none;
  animation: t-pop 0.32s cubic-bezier(0.34,1.56,0.64,1) forwards;
  z-index: 5;
}
@keyframes t-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}
.target-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.55);
  animation: ring-p 1.6s ease-out infinite;
}
@keyframes ring-p {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(1.75); opacity: 0; }
}
.t1 { background: radial-gradient(circle at 35% 35%, #fff9c4, #f9a825); }
.t2 { background: radial-gradient(circle at 35% 35%, #b2ebf2, #0097a7); }
.t3 { background: radial-gradient(circle at 35% 35%, #f8bbd0, #c2185b); }
.t4 { background: radial-gradient(circle at 35% 35%, #c8e6c9, #2e7d32); }
.t5 { background: radial-gradient(circle at 35% 35%, #e1bee7, #6a1b9a); }

.hit-label {
  position: fixed;
  pointer-events: none;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 200;
  animation: hl-float 0.75s ease forwards;
}
@keyframes hl-float {
  0%   { opacity: 1; transform: translateY(0)   scale(1.1); }
  100% { opacity: 0; transform: translateY(-55px) scale(0.8); }
}