/* ========================= */
/* === DRONE COMPANION ===== */
/* ========================= */
.drone {
  position: absolute;
  z-index: 11;
  width: 28px;
  height: 24px;
  transition: none;
  filter: drop-shadow(0 0 4px rgba(100,180,255,0.15));
  animation: droneTilt 2s ease-in-out infinite;
}
@keyframes droneTilt {
  0% { transform: rotate(-5deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(6deg); }
  100% { transform: rotate(-5deg); }
}

.drone-body {
  position: absolute;
  bottom: 0;
  left: 2px;
  width: 24px;
  height: 18px;
  background: linear-gradient(180deg, #2a2520 0%, #1a1614 100%);
  border-radius: 6px 6px 4px 4px;
  border: 1px solid #3a3028;
}
.drone-eye {
  position: absolute;
  top: 4px;
  left: 6px;
  width: 12px;
  height: 10px;
  background: radial-gradient(circle at 50% 50%, #66bbff 0%, #3388cc 50%, #1a4466 100%);
  border-radius: 50%;
  border: 1px solid #2266aa;
  box-shadow: 0 0 6px rgba(100,180,255,0.3), inset 0 0 3px rgba(255,255,255,0.1);
  animation: droneEyePulse 2s ease-in-out infinite alternate;
}
@keyframes droneEyePulse {
  0% { box-shadow: 0 0 4px rgba(100,180,255,0.2); }
  100% { box-shadow: 0 0 10px rgba(100,180,255,0.5), 0 0 20px rgba(100,180,255,0.15); }
}
.drone-eye::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.7;
}

.drone-prop-arm {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 5px;
  background: #2a2520;
  border-radius: 2px;
}
.drone-prop-arm.dl { left: 3px; transform: rotate(-10deg); }
.drone-prop-arm.dr { right: 3px; transform: rotate(10deg); }

.drone-prop {
  position: absolute;
  top: -6px;
  width: 14px;
  height: 3px;
  background: rgba(150,150,150,0.4);
  border-radius: 2px;
  animation: propSpin 0.08s linear infinite;
}
.drone-prop.pl { left: -3px; }
.drone-prop.pr { right: -3px; }
@keyframes propSpin {
  0% { transform: scaleX(1); opacity: 0.4; }
  50% { transform: scaleX(0.2); opacity: 0.2; }
  100% { transform: scaleX(1); opacity: 0.4; }
}

.drone-leg {
  position: absolute;
  bottom: -5px;
  width: 2px;
  height: 6px;
  background: #2a2520;
  border-radius: 0 0 1px 1px;
}
.drone-leg.dll { left: 6px; transform: rotate(5deg); }
.drone-leg.dlr { right: 6px; transform: rotate(-8deg); }

.drone-light {
  position: absolute;
  bottom: -2px;
  left: 11px;
  width: 4px;
  height: 3px;
  background: #ff4422;
  border-radius: 50%;
  box-shadow: 0 0 4px #ff4422;
  animation: droneBlink 3s steps(1) infinite;
}
@keyframes droneBlink {
  0% { opacity: 1; }
  10% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  85% { opacity: 0; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

/* === SPEECH BUBBLE === */
.speech-bubble {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,16,12,0.92);
  color: #ddc8a8;
  font-size: 8px;
  font-family: monospace;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #3a3028;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.speech-bubble.show { opacity: 1; }
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(20,16,12,0.92);
}