/* Safety Car Queue - traffic light + queue */
.safety-arena { gap: 22px; }

.safety-lights {
  display: flex;
  gap: 18px;
  padding: 16px 22px;
  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);
}

.s-light {
  width: clamp(44px, 13vw, 62px);
  height: clamp(44px, 13vw, 62px);
  border-radius: 50%;
  border: 3px solid #0a0a10;
  background: radial-gradient(circle at 35% 30%, #33333f, #14141b 72%);
  box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.6);
  transition: background 0.08s ease, box-shadow 0.08s ease;
}

.s-light.red.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);
}

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

.safety-queue {
  font-size: clamp(1.3rem, 6vw, 1.9rem);
  letter-spacing: 6px;
  filter: grayscale(0.4) brightness(0.85);
  text-align: center;
  word-break: break-all;
}

.safety-pad { border-color: rgba(0, 210, 106, 0.55); color: var(--f1-green); }
