/* Five Red Lights - start gantry + tap pad */
.lights-arena { gap: 22px; }

.lights-gantry {
  display: flex;
  gap: clamp(8px, 2.5vw, 16px);
  padding: clamp(12px, 3vw, 20px) clamp(14px, 4vw, 26px);
  background: linear-gradient(180deg, #23232e, #101017);
  border: 1px solid var(--f1-line);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.light {
  width: clamp(40px, 12vw, 64px);
  height: clamp(40px, 12vw, 64px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3a46, #16161d 70%);
  border: 3px solid #0a0a10;
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6);
  transition: background 0.1s ease, box-shadow 0.1s ease;
}

.light.on {
  background: radial-gradient(circle at 35% 30%, #ff6a55, var(--f1-red) 65%);
  box-shadow: 0 0 26px rgba(225, 6, 0, 0.85), inset 0 2px 6px rgba(255, 255, 255, 0.35);
}

.light.out {
  background: radial-gradient(circle at 35% 30%, #2c2c38, #101016 75%);
  box-shadow: none;
}

.tap-pad {
  width: min(420px, 92%);
  min-height: 96px;
  border-radius: 18px;
  border: 2px dashed rgba(255, 212, 0, 0.55);
  background: linear-gradient(180deg, rgba(255, 212, 0, 0.1), rgba(225, 6, 0, 0.12));
  color: var(--f1-yellow);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  letter-spacing: 3px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.tap-pad:active,
.tap-pad.hit {
  background: linear-gradient(180deg, rgba(255, 212, 0, 0.32), rgba(225, 6, 0, 0.3));
  border-style: solid;
  transform: scale(0.99);
}

@media (max-width: 860px) {
  .tap-pad { min-height: 110px; }
}