/* ================= TAP WARS — CORE VISUAL SYSTEM ================= */

* { -webkit-tap-highlight-color: transparent; }

body {
  background: #05070d;
  position: relative;
}

/* ---- Animated aurora backdrop ---- */
.bg-aurora {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 25%, rgba(30,232,143,0.16), transparent 60%),
    radial-gradient(45% 40% at 80% 70%, rgba(255,122,26,0.16), transparent 60%),
    radial-gradient(30% 30% at 60% 15%, rgba(242,201,76,0.06), transparent 60%);
  animation: aurora-drift 18s ease-in-out infinite alternate;
  filter: blur(40px);
}
@keyframes aurora-drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(-3%, 4%) scale(1.08); }
}

/* ---- Glass panel ---- */
.glass {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 1.25rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}

.nav-link {
  padding: 0.5rem 0.85rem;
  border-radius: 0.6rem;
  color: rgba(255,255,255,0.65);
  transition: all .15s ease;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* ---- Team tap buttons ---- */
.tap-btn {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
  transition: transform .08s ease;
  isolation: isolate;
}
.tap-btn:active { transform: scale(0.96); }

.tap-btn-green {
  background: linear-gradient(145deg, #16a86a, #0d5c39);
  border: 1px solid rgba(30,232,143,0.5);
  box-shadow: 0 0 25px rgba(30,232,143,0.45), 0 0 70px rgba(30,232,143,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
.tap-btn-orange {
  background: linear-gradient(145deg, #ff8c2e, #a04a0d);
  border: 1px solid rgba(255,122,26,0.5);
  box-shadow: 0 0 25px rgba(255,122,26,0.45), 0 0 70px rgba(255,122,26,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}

.tap-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.25), transparent 60%);
  opacity: .8;
}

@keyframes pulse-glow-green {
  0%,100% { box-shadow: 0 0 25px rgba(30,232,143,0.45), 0 0 70px rgba(30,232,143,0.2); }
  50%     { box-shadow: 0 0 40px rgba(30,232,143,0.75), 0 0 100px rgba(30,232,143,0.35); }
}
@keyframes pulse-glow-orange {
  0%,100% { box-shadow: 0 0 25px rgba(255,122,26,0.45), 0 0 70px rgba(255,122,26,0.2); }
  50%     { box-shadow: 0 0 40px rgba(255,122,26,0.75), 0 0 100px rgba(255,122,26,0.35); }
}
.tap-btn-green.leading { animation: pulse-glow-green 1.6s ease-in-out infinite; }
.tap-btn-orange.leading { animation: pulse-glow-orange 1.6s ease-in-out infinite; }

.tap-btn.tapped { animation: tap-kick .18s ease; }
@keyframes tap-kick {
  0% { transform: scale(1); }
  40% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

/* ---- Progress bar ---- */
.energy-bar {
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.energy-fill-green { background: linear-gradient(90deg, #0f7a4d, #39ffb0); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.energy-fill-orange { background: linear-gradient(90deg, #a04a0d, #ffab5c); transition: width .5s cubic-bezier(.2,.8,.2,1); }

/* ---- Particle burst ---- */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-fly .8s ease-out forwards;
}
@keyframes particle-fly {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

/* ---- Number tick animation ---- */
.tick { animation: tick-pop .25s ease; }
@keyframes tick-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }

/* ---- Achievement badge shimmer ---- */
.badge-gold {
  background: linear-gradient(120deg, rgba(242,201,76,0.15), rgba(242,201,76,0.03));
  border: 1px solid rgba(242,201,76,0.35);
}

/* ---- Activity feed item enter ---- */
.feed-enter { animation: feed-slide .35s ease; }
@keyframes feed-slide {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora, .tap-btn-green.leading, .tap-btn-orange.leading, .particle, .feed-enter, .tick, .tap-btn.tapped {
    animation: none !important;
  }
}

/* ---- Focus visibility ---- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #f2c94c;
  outline-offset: 2px;
}