/* ============================================================
   EYES ONLY - Commerce Drag-Drop Visual Feedback
   Context-sensitive styling for debrief feed drop zone
   ============================================================ */

/* ========== Base Debrief Drop Zone ========== */
.debrief-screen {
  transition: all 0.2s ease;
  position: relative;
}

.debrief-drop-target-active {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: -4px;
}

/* ========== BUYING CONTEXT - Money Bag Transformation ========== */
.debrief-screen.context-buying {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(255, 180, 0, 0.10) 100%
  );
  border: 2px solid #FFD700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.debrief-screen.context-buying::before {
  content: '💰';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  opacity: 0.5;
  animation: money-bob 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

.debrief-screen.context-buying::after {
  content: 'DROP TO BUY';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #FFD700;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
  animation: pulse-text 1s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes money-bob {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-8px);
  }
}

/* ========== SELLING CONTEXT - Incinerator Transformation ========== */
.debrief-screen.context-selling {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 53, 0.15) 0%,
    rgba(255, 69, 0, 0.10) 100%
  );
  border: 2px solid #FF6B35;
  box-shadow: 0 0 20px rgba(255, 107, 53, 0.4);
}

.debrief-screen.context-selling::before {
  content: '🔥';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  opacity: 0.5;
  animation: fire-flicker 0.3s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

.debrief-screen.context-selling::after {
  content: 'DROP TO SELL';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #FF6B35;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
  pointer-events: none;
  z-index: 10;
}

@keyframes fire-flicker {
  0%, 100% {
    opacity: 0.5;
    filter: hue-rotate(0deg);
  }
  25% {
    opacity: 0.6;
    filter: hue-rotate(10deg);
  }
  50% {
    opacity: 0.4;
    filter: hue-rotate(-10deg);
  }
  75% {
    opacity: 0.7;
    filter: hue-rotate(5deg);
  }
}

/* ========== GAMBLING CONTEXT - Slot Machine Transformation ========== */
.debrief-screen.context-gambling {
  background: linear-gradient(
    135deg,
    rgba(156, 39, 176, 0.15) 0%,
    rgba(103, 58, 183, 0.10) 100%
  );
  border: 2px solid #9C27B0;
  box-shadow: 0 0 20px rgba(156, 39, 176, 0.4);
}

.debrief-screen.context-gambling::before {
  content: '🎰';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  opacity: 0.5;
  animation: slot-spin 0.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

.debrief-screen.context-gambling::after {
  content: 'DROP TO GAMBLE';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #9C27B0;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
  pointer-events: none;
  z-index: 10;
}

@keyframes slot-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ========== DISPOSING CONTEXT - Recycling Bin Transformation ========== */
.debrief-screen.context-disposing {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 53, 0.10) 0%,
    rgba(200, 80, 30, 0.08) 100%
  );
  border: 2px solid rgba(255, 107, 53, 0.45);
  box-shadow: 0 0 14px rgba(255, 107, 53, 0.25);
  transition: all 0.2s ease;
}

.debrief-screen.context-disposing::before {
  content: '\u267B\uFE0F';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 42px;
  opacity: 0.55;
  animation: recycle-bob 1.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

.debrief-screen.context-disposing::after {
  content: 'DROP TO DISPOSE';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #FF6B35;
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
  pointer-events: none;
  z-index: 10;
  opacity: 0.7;
}

@keyframes recycle-bob {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
    opacity: 0.55;
  }
  50% {
    transform: translate(-50%, -50%) translateY(-5px) rotate(8deg);
    opacity: 0.7;
  }
}

/* ========== DISABLED CONTEXT ========== */
.debrief-screen.context-disabled {
  background: rgba(64, 64, 64, 0.10);
  border: 1px dashed #606060;
  opacity: 0.6;
}

.debrief-screen.context-disabled::before {
  content: '⛔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 10;
}

/* ========== SUCCESS ANIMATIONS ========== */

/* Money bag animation on successful purchase */
.debrief-screen.money-bag-active {
  animation: money-bag-success 0.6s ease-out;
}

@keyframes money-bag-success {
  0% {
    background: rgba(255, 215, 0, 0.3);
    transform: scale(1);
  }
  50% {
    background: rgba(255, 215, 0, 0.6);
    transform: scale(1.05);
  }
  100% {
    background: transparent;
    transform: scale(1);
  }
}

/* Incinerator animation on successful sell */
.debrief-screen.incinerator-active {
  animation: incinerator-burn 0.6s ease-out;
}

@keyframes incinerator-burn {
  0% {
    background: rgba(255, 107, 53, 0.3);
    transform: scale(1);
  }
  30% {
    background: rgba(255, 69, 0, 0.7);
    transform: scale(1.08);
  }
  60% {
    background: rgba(255, 140, 0, 0.5);
  }
  100% {
    background: transparent;
    transform: scale(1);
  }
}

/* Slot machine animation on successful gamble */
.debrief-screen.slot-active {
  animation: slot-machine-roll 0.6s ease-out;
}

@keyframes slot-machine-roll {
  0% {
    background: rgba(156, 39, 176, 0.3);
  }
  25% {
    background: rgba(103, 58, 183, 0.5);
    transform: rotate(2deg);
  }
  50% {
    background: rgba(156, 39, 176, 0.7);
    transform: rotate(-2deg);
  }
  75% {
    background: rgba(103, 58, 183, 0.5);
    transform: rotate(1deg);
  }
  100% {
    background: transparent;
    transform: rotate(0deg);
  }
}

/* ========== FAILURE ANIMATION ========== */
.debrief-screen.transaction-failed {
  animation: transaction-shake 0.4s ease-out;
  background: rgba(255, 0, 0, 0.2);
}

@keyframes transaction-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}

/* ========== TEXT PULSE ANIMATION ========== */
@keyframes pulse-text {
  0%, 100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.7;
    transform: translateX(-50%) scale(1.05);
  }
}

/* ========== DRAG PREVIEW STYLES ========== */
.drag-preview {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  padding: 8px 12px;
  background: rgba(30, 35, 40, 0.95);
  border: 2px solid;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
}

.drag-preview.purchase {
  border-color: #FFD700;
  animation: purchase-bob 1.2s ease-in-out infinite;
}

.drag-preview .preview-emoji {
  font-size: 28px;
}

.drag-preview .preview-details {
  display: flex;
  flex-direction: column;
}

.drag-preview .preview-price {
  font-size: 14px;
  color: #FFD700;
  font-weight: bold;
}

.drag-preview .preview-destination {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

@keyframes purchase-bob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-4px); }
}

/* Legacy preview styles for compatibility */
.drag-preview.preview-buy {
  background: rgba(255, 215, 0, 0.9);
  border: 2px solid #FFD700;
  color: #000;
}

.drag-preview.preview-sell {
  background: rgba(255, 107, 53, 0.9);
  border: 2px solid #FF6B35;
  color: #fff;
}

.drag-preview.preview-gamble {
  background: rgba(156, 39, 176, 0.9);
  border: 2px solid #9C27B0;
  color: #fff;
}

.preview-emoji {
  font-size: 18px;
}

.preview-price {
  font-size: 14px;
}

/* ========== DROP ZONE GLOW STYLES ========== */
.drop-zone-active {
  animation: gentle-pulse 1.5s ease-in-out infinite;
}

@keyframes gentle-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
}

/* Specific drop zone enhancements */
#hand-fan-container.drop-zone-active {
  border: 2px solid #4CAF50 !important;
}

#action-button-container.drop-zone-active {
  border: 2px solid #2196F3 !important;
}

#inventory-grid.drop-zone-active {
  border: 2px solid #9C27B0 !important;
}

#active-item-slot.drop-zone-active {
  border: 2px solid #FF9800 !important;
}


/* ========== MOBILE OPTIMIZATIONS ========== */
@media (max-width: 768px) {
  .debrief-screen.context-buying::before,
  .debrief-screen.context-selling::before,
  .debrief-screen.context-gambling::before {
    font-size: 36px;
  }

  .debrief-screen.context-buying::after,
  .debrief-screen.context-selling::after,
  .debrief-screen.context-gambling::after {
    font-size: 8px;
    bottom: 4px;
  }
}

/* ========== SHOP CARD DRAGGABLE STYLES ========== */
.shop-card[draggable="true"] {
  cursor: grab;
}

.shop-card[draggable="true"]:active {
  cursor: grabbing;
}

.shop-card.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

/* ========== HAND CARD SELL MODE ========== */
.hand-card.sell-mode {
  border-color: #FF6B35 !important;
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.5);
  cursor: grab;
}

.hand-card.sell-mode:active {
  cursor: grabbing;
}

.hand-card.dragging-sell {
  opacity: 0.6;
  filter: hue-rotate(20deg);
}