/* ===========================================================================
   AIM TRAINER — a range, ringed targets with a life halo, a crosshair
   =========================================================================== */

.aim-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* A receding floor grid gives the range depth. */
.aim-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -10%;
  height: 60%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(46, 216, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 216, 255, 0.22) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(0deg, #000 10%, transparent 90%);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 90%);
  opacity: 0.55;
}

.aim-field {
  position: absolute;
  inset: 4px 8px 8px;
  touch-action: none;
  cursor: crosshair;
}

@media (hover: hover) and (pointer: fine) {
  .aim-field { cursor: none; }
}

/* --- Targets --- */
.aim-target {
  --life: 1;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  animation: aim-spawn 0.18s var(--ease-spring);
}

@keyframes aim-spawn {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: none; }
}

.aim-target__rings {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      #FFFFFF 0 13%,
      #FFD447 14% 29%,
      #0A0D1C 30% 34%,
      var(--game-accent) 35% 63%,
      #0A0D1C 64% 68%,
      color-mix(in srgb, var(--game-accent) 55%, #0A0D1C) 69% 100%);
  box-shadow: 0 0 22px var(--game-glow), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

/* A halo that drains clockwise as the target's time runs out. */
.aim-target__life {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(var(--game-accent) calc(var(--life) * 360deg), rgba(255, 255, 255, 0.06) 0);
  mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px));
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px));
  opacity: 0.85;
}

.aim-stage[data-mode="grid"] .aim-target__life { display: none; }

.aim-target.popped {
  animation: aim-pop 0.24s var(--ease) forwards;
}

@keyframes aim-pop {
  to { opacity: 0; scale: 1.6; filter: brightness(2) blur(2px); }
}

.aim-target.expired {
  animation: aim-expire 0.24s var(--ease) forwards;
}

@keyframes aim-expire {
  to { opacity: 0; scale: 0.2; filter: grayscale(1); }
}

/* --- Crosshair --- */
.aim-cross {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.aim-cross.on { opacity: 1; }

.aim-cross i {
  position: absolute;
  background: #fff;
  box-shadow: 0 0 6px var(--game-accent);
  border-radius: 1px;
}

.aim-cross i:nth-child(1) { left: -1px; top: -16px; width: 2px; height: 9px; }
.aim-cross i:nth-child(2) { left: -1px; top: 7px; width: 2px; height: 9px; }
.aim-cross i:nth-child(3) { top: -1px; left: -16px; width: 9px; height: 2px; }
.aim-cross i:nth-child(4) { top: -1px; left: 7px; width: 9px; height: 2px; }

.aim-cross b {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--game-accent);
  box-shadow: 0 0 6px var(--game-accent);
}

.aim-cross.fire i:nth-child(1) { animation: aim-kick-up 0.14s var(--ease); }
.aim-cross.fire i:nth-child(2) { animation: aim-kick-down 0.14s var(--ease); }
.aim-cross.fire i:nth-child(3) { animation: aim-kick-left 0.14s var(--ease); }
.aim-cross.fire i:nth-child(4) { animation: aim-kick-right 0.14s var(--ease); }

@keyframes aim-kick-up { 50% { translate: 0 -5px; } }
@keyframes aim-kick-down { 50% { translate: 0 5px; } }
@keyframes aim-kick-left { 50% { translate: -5px 0; } }
@keyframes aim-kick-right { 50% { translate: 5px 0; } }

/* --- Phase banner --- */
.aim-phase {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 40px var(--game-accent);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.aim-phase.show {
  animation: aim-phase 1.4s var(--ease) forwards;
}

@keyframes aim-phase {
  0% { opacity: 0; transform: scale(1.4); filter: blur(8px); }
  20% { opacity: 1; transform: scale(1); filter: none; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.95); }
}