/**
 * File: C:\xampp\htdocs\charapp\assets\css\character-death.css
 * 
 * Purpose:
 * - Styles for dead/killed/banned characters
 */

/* ============================================================================
   CHARACTER DEATH STATES
   ============================================================================ */

/* Dead Card */
.character-dead {
  opacity: 0.85;
  border: 2px solid #dc3545 !important;
  background: linear-gradient(135deg, rgba(220,53,69,0.05) 0%, transparent 100%);
}

/* Portrait States */
.character-portrait {
  transition: filter 0.3s ease, transform 0.3s ease;
  position: relative;
}

.character-portrait-dead {
  filter: grayscale(100%) brightness(0.4);
}

/* Death Overlay */
.character-death-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #dc3545;
  text-shadow: 
    0 0 10px rgba(0,0,0,0.9),
    0 0 20px rgba(220,53,69,0.8),
    0 0 30px rgba(220,53,69,0.6);
  pointer-events: none;
  animation: death-pulse 2s ease-in-out infinite;
  z-index: 10;
}

@keyframes death-pulse {
  0%, 100% { 
    opacity: 0.8; 
    transform: translate(-50%, -50%) scale(1);
  }
  50% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Death Text */
.character-death-overlay .death-text {
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.5rem;
}

/* Killed State (darker) */
.character-killed .character-portrait {
  filter: grayscale(100%) brightness(0.2);
}

.character-killed .character-death-overlay {
  color: #721c24;
}

/* Banned State */
.character-banned {
  opacity: 0.7;
  border: 2px dashed #6c757d !important;
}

.character-banned .character-portrait {
  filter: grayscale(80%) opacity(0.6);
}

/* ============================================================================
   HP/MANA BARS (Enhanced)
   ============================================================================ */

.progress {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.progress-bar {
  transition: width 0.3s ease;
}

/* HP Bar States */
.progress-bar.bg-success {
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%) !important;
}

.progress-bar.bg-danger {
  background: linear-gradient(90deg, #dc3545 0%, #c82333 100%) !important;
  animation: hp-low-pulse 1s ease-in-out infinite;
}

@keyframes hp-low-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Mana Bar */
.progress-bar.bg-primary {
  background: linear-gradient(90deg, #007bff 0%, #0056b3 100%) !important;
}

/* ============================================================================
   ALERTS (Death/Ban States)
   ============================================================================ */

.alert {
  border-left: 4px solid currentColor;
}

.alert-warning {
  background: rgba(255, 193, 7, 0.1);
  border-color: #ffc107;
  color: #856404;
}

.alert-danger {
  background: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
  color: #721c24;
}

.alert-dark {
  background: rgba(52, 58, 64, 0.1);
  border-color: #343a40;
  color: #1b1e21;
}

/* Dark Mode Adjustments */
[data-bs-theme="dark"] .alert-warning {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

[data-bs-theme="dark"] .alert-danger {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

[data-bs-theme="dark"] .alert-dark {
  background: rgba(52, 58, 64, 0.15);
  color: #adb5bd;
}

/* ============================================================================
   DANGER ZONE
   ============================================================================ */

.border-top {
  border-color: rgba(var(--bs-border-color-rgb), 0.3) !important;
}

/* Danger Buttons */
.btn-outline-danger:hover,
.btn-outline-dark:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 576px) {
  .character-death-overlay {
    font-size: 2rem;
  }
  
  .death-text {
    font-size: 0.75rem !important;
  }
}

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

/* Fade in when states change */
.character-dead,
.character-banned {
  animation: fade-in 0.3s ease;
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Button pulse on hover */
.btn-outline-danger:hover,
.btn-danger:hover {
  animation: btn-pulse 0.5s ease;
}

@keyframes btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}