/* File: src/styles/overlays.css */
/* ─────────────────────────────────────────────────────────────────────────────
   overlays.css
   Transient in-game overlays: pickup/action prompt.
───────────────────────────────────────────────────────────────────────────── */

/* ══ PICKUP PROMPT ══════════════════════════════════════════════════════════ */
.pickup-prompt {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  min-width: 200px;
  max-width: 400px;
  min-height: 38px;
  height: auto;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0) 100%);
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  gap: 10px;
}

.pickup-prompt.is-active {
  display: flex;
}

.pickup-prompt--weapon {
  background: radial-gradient(50% 50% at 50% 50%, rgba(24, 14, 2, 0.9) 0%, rgba(24, 14, 2, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
  border: none;
}

.pickup-prompt--weapon::before {
  display: none;
}

/* Apply HUD text-shadow to all floating text inside the prompt */
.pp-key, .pp-label, .pp-right, .pp-hint-secondary, .pp-verb, .pp-channel-label, .pp-cancel-hint, .pp-cancelled {
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.95),
    0 0 6px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 10px rgba(0, 0, 0, 0.8);
}

.pp-key {
  font-size: calc(12px * var(--txt-scale));
  font-weight: bold;
  color: #8fce50;
  flex-shrink: 0;
}
.pickup-prompt--weapon .pp-key { color: #e8a030; }

.pp-label {
  font-size: calc(12px * var(--txt-scale));
  font-weight: bold;
  color: #c0ee80;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pickup-prompt--weapon .pp-label { color: #f0b840; }

.pp-right, .pp-hint-secondary {
  font-size: calc(10px * var(--txt-scale));
  color: #8fce50;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.pickup-prompt--weapon .pp-right {
  font-weight: bold;
  color: #e8902a;
}

/* ── Channel / progress state ───────────────────────────────────────────── */
.pickup-prompt--channel {
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
  height: auto;
  padding: 16px 40px 18px;
  flex-direction: column;
  gap: 8px;
  border: none;
}

.pickup-prompt--drop {
  border: none;
}

.pp-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 200px;
}

.pp-channel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.pp-verb {
  font-size: calc(11px * var(--txt-scale));
  font-weight: bold;
  color: #8fce50;
  flex-shrink: 0;
}
.pickup-prompt--drop .pp-verb { color: #e8a030; }

.pp-channel-label {
  font-size: calc(11px * var(--txt-scale));
  color: #c0ee80;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pickup-prompt--drop .pp-channel-label { color: #f0b840; }

.pp-cancel-hint {
  font-size: calc(9px * var(--txt-scale));
  color: #8fce50;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Styled to match the HUD vitals bar */
.pp-bar-wrap {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.5);
  overflow: hidden;
}

.pp-bar-fill {
  height: 100%;
  background: #8fce50;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
  transition: width 0.05s linear;
}
.pickup-prompt--drop .pp-bar-fill { background: #e8a030; }

/* ── Cancelled flash ────────────────────────────────────────────────────── */
.pickup-prompt--cancelled {
  background: radial-gradient(50% 50% at 50% 50%, rgba(30, 4, 4, 0.9) 0%, rgba(30, 4, 4, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
  border: none;
  justify-content: center;
}

.pp-cancelled {
  font-size: calc(12px * var(--txt-scale));
  font-weight: bold;
  color: #ff5050;
  letter-spacing: 0.05em;
}