/* Jidosen - Custom Styles */

/* Type Color Variables */
:root {
  /* Gradient angle for all type backgrounds */
  --type-gradient-angle: 135deg;

  /* Fire Type Colors */
  --type-fire-primary: #ff4444;
  --type-fire-secondary: #ff8800;
  --type-fire-gradient: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fire-primary),
    var(--type-fire-secondary)
  );

  /* Water Type Colors */
  --type-water-primary: #2196f3;
  --type-water-secondary: #00bcd4;
  --type-water-gradient: linear-gradient(
    var(--type-gradient-angle),
    var(--type-water-primary),
    var(--type-water-secondary)
  );

  /* Earth Type Colors */
  --type-earth-primary: #8d6e63;
  --type-earth-secondary: #5d4037;
  --type-earth-gradient: linear-gradient(
    var(--type-gradient-angle),
    var(--type-earth-primary),
    var(--type-earth-secondary)
  );

  /* Electric Type Colors */
  --type-electric-primary: #ffeb3b;
  --type-electric-secondary: #ff9800;
  --type-electric-gradient: linear-gradient(
    var(--type-gradient-angle),
    var(--type-electric-primary),
    var(--type-electric-secondary)
  );

  /* Poison Type Colors */
  --type-poison-primary: #ab47bc;
  --type-poison-secondary: #7b1fa2;
  --type-poison-gradient: linear-gradient(
    var(--type-gradient-angle),
    var(--type-poison-primary),
    var(--type-poison-secondary)
  );

  /* Fighting Type Colors */
  --type-fighting-primary: #f44336;
  --type-fighting-secondary: #d32f2f;
  --type-fighting-gradient: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fighting-primary),
    var(--type-fighting-secondary)
  );

  /* Undead Type Colors */
  --type-undead-primary: #607d8b;
  --type-undead-secondary: #37474f;
  --type-undead-gradient: linear-gradient(
    var(--type-gradient-angle),
    var(--type-undead-primary),
    var(--type-undead-secondary)
  );

  /* Neutral Type Colors */
  --type-neutral-primary: #9e9e9e;
  --type-neutral-secondary: #616161;
  --type-neutral-gradient: linear-gradient(
    var(--type-gradient-angle),
    var(--type-neutral-primary),
    var(--type-neutral-secondary)
  );

  /* Flying Type Colors */
  --type-flying-primary: #03a9f4;
  --type-flying-secondary: #0288d1;
  --type-flying-gradient: linear-gradient(
    var(--type-gradient-angle),
    var(--type-flying-primary),
    var(--type-flying-secondary)
  );

  /* Primary App Gradient */
  --primary-gradient: linear-gradient(
    var(--type-gradient-angle),
    #667eea 0%,
    #764ba2 100%
  );

  /* Rarity Colors */
  --rarity-common: #6c757d;
  --rarity-uncommon: #28a745;
  --rarity-rare: #17a2b8;
  --rarity-epic: #6f42c1;
  --rarity-legendary: #ffc107;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f9fa;
}

.jumbotron {
  background: var(--primary-gradient);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card {
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.5rem;
}

.monster-card {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border: 2px solid #ff6b6b;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  width: 350px;
  max-width: 100%;
}

.monster-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.battle-arena {
  background: var(--primary-gradient);
  border-radius: 20px;
  padding: 30px;
  color: white;
  text-align: center;
}

.skill-badge {
  background: linear-gradient(45deg, #ff6b6b, #feca57);
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  margin: 2px;
  display: inline-block;
}

.type-badge {
  padding: 5px 15px;
  border-radius: 25px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* Legacy type classes removed - now using universal .type-background-{type} classes */

.btn-primary {
  background: var(--primary-gradient);
  border: none;
  border-radius: 25px;
  padding: 10px 25px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.quest-card {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border: 2px solid #ff9a9e;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 15px;
}

.reward-badge {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #333;
  padding: 5px 10px;
  border-radius: 15px;
  font-weight: bold;
  display: inline-block;
  margin: 2px;
}

/* Responsive design */
@media (max-width: 768px) {
  .jumbotron {
    padding: 2rem 1rem;
  }

  .monster-card {
    padding: 15px;
  }

  .battle-arena {
    padding: 20px;
  }
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Fancy Logo Animation */
.fancy-logo {
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease-in-out infinite;
  font-weight: bold;
  font-size: 1.8rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.fancy-logo:hover {
  transform: scale(1.05);
  text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Navigation Buttons - Homepage Navbar */
.navbar-nav .nav-button {
  background: var(--primary-gradient);
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  margin: 0.25rem;
  width: auto;
  text-align: center;
}

/* Navigation Buttons - Sidebar */
.sidebar-heading {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 0.25rem;
}

.sidebar .nav-button {
  background: var(--primary-gradient);
  border: none;
  color: white;
  padding: 0.4rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  margin: 0.25rem 0;
  width: 100%;
  text-align: left;
  font-size: 0.9rem;
}

.nav-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  color: white;
}

.nav-button.btn-outline {
  background: transparent;
  border: 2px solid #667eea;
  color: #667eea;
}

.nav-button.btn-outline:hover {
  background: #667eea;
  color: white;
}

.nav-button.active {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

/* Top Navigation Bar */
.top-nav {
  background: white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #e9ecef;
}

.top-nav .navbar-brand {
  font-weight: bold;
  font-size: 1.8rem;
}

.top-nav .navbar-nav {
  flex-direction: row;
  align-items: center;
}

.top-nav .nav-item {
  margin-left: 1.5rem;
}

.top-nav .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  background: var(--primary-gradient);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.top-nav .stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.top-nav .stat-value {
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.top-nav .stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
  line-height: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .top-nav .nav-item {
    margin-left: 0.75rem;
  }

  .top-nav .stat-item {
    padding: 0.2rem 0.5rem;
  }

  .top-nav .stat-value {
    font-size: 0.9rem;
  }

  .top-nav .stat-label {
    font-size: 0.65rem;
  }
}

/* Monster Cards */
.monster-card {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 15px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  height: 100%;
}

.monster-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.monster-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.monster-card:hover::before {
  opacity: 1;
}

.monster-name {
  color: #2c3e50;
  font-weight: bold;
  font-size: 1.2rem;
  word-break: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
}

.monster-stats .stat-item {
  padding: 0.5rem 0;
  border-radius: 8px;
  background: #f8f9fa;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.monster-stats .stat-item:hover {
  background: #e9ecef;
  transform: scale(1.05);
}

.monster-stats .stat-item i {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 0.25rem;
}

/* Skills Grid */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.skill-slot {
  aspect-ratio: 1;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: #f8f9fa;
  position: relative;
}

.skill-slot-empty {
  aspect-ratio: 1;
  border: 2px dashed #dee2e6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: #f8f9fa;
  position: relative;
}

.skill-badge {
  /* Background applied via .type-background-{type} class */
  color: white;
  padding: 0.5rem;
  border-radius: 8px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.skill-number-tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.75);
  font-size: 0.75rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding: 0 0 4px 4px;
  border-radius: 0 0 100% 0;
  z-index: 10;
  text-shadow: none;
}

.skill-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.skill-badge i {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.skill-slot-empty-link {
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  text-decoration: none;
}

.empty-skill-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(108, 117, 125, 0.2);
  border: 2px solid rgba(108, 117, 125, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #6c757d;
}

.skill-slot-empty-link:hover {
  color: #667eea;
  text-decoration: none;
}

.skill-slot:hover {
  border-color: #667eea;
  background: #f0f4ff;
}

/* Ultimate Section */
.ultimate-slot {
  border: none;
  border-radius: 10px;
  padding: 0;
  background: transparent;
  transition: all 0.3s ease;
  position: relative;
  height: 45px;
}

.ultimate-badge {
  /* Background applied via .type-background-{type} class */
  color: white;
  padding: 0.75rem;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.ultimate-badge:hover {
  transform: scale(1.02);
}

.ultimate-slot-empty {
  border: 2px dashed #dee2e6;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  background: #f8f9fa;
  position: relative;
  color: #6c757d;
  text-align: center;
  height: 45px;
  width: 100%;
}

.ultimate-slot:hover {
  border-color: #ff6b6b;
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
}

.ultimate-slot-empty:hover {
  border-color: #667eea;
  background: #f0f4ff;
}

/* Shared Ultimate Slot (match battle UI) */
.ultimate-slot-battle {
  position: relative;
  height: 45px;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #f1f3f5;
  border: 3px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #495057;
  transition: all 0.3s ease;
}

.ultimate-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 0.2rem;
}

/* White tint overlay inside the bar (not over the border) */
.ultimate-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  z-index: 1;
  pointer-events: none;
}

/* Infinity Gauntlet - use same styles as battle */
.ultimate-slot-battle.infinity-gauntlet .skill-name {
  display: none;
}

.ultimate-slot-battle.infinity-gauntlet {
  border: 3px solid transparent;
  background: linear-gradient(#f1f3f5, #f1f3f5) padding-box,
    linear-gradient(90deg, #f59e0b, #fbbf24, #fde047, #fbbf24, #f59e0b)
      border-box !important;
}

.ultimate-slot-battle.infinity-gauntlet .ultimate-inner {
  background: linear-gradient(
    90deg,
    #f59e0b,
    #fbbf24,
    #fef08a,
    #fbbf24,
    #f59e0b
  ) !important;
}

.infinity-stones-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 2;
  pointer-events: none;
  padding: 0 8px;
}

.infinity-stone {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: relative;
  background: #2d3748;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.infinity-stone.collected {
  transform: scale(1.1);
  box-shadow: 0 0 12px currentColor, 0 0 20px currentColor,
    inset 0 2px 4px rgba(255, 255, 255, 0.5);
  border-color: currentColor;
}

@keyframes stoneCollect {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4) rotate(180deg);
  }
  100% {
    transform: scale(1.1);
  }
}
.infinity-stone.collecting {
  animation: stoneCollect 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Stone Colors */
.infinity-stone[data-stone="0"] {
  color: #9333ea;
}
.infinity-stone[data-stone="1"] {
  color: #3b82f6;
}
.infinity-stone[data-stone="2"] {
  color: #dc2626;
}
.infinity-stone[data-stone="3"] {
  color: #eab308;
}
.infinity-stone[data-stone="4"] {
  color: #10b981;
}

.infinity-stone.collected[data-stone="0"] {
  background: radial-gradient(circle, #c084fc, #9333ea);
}
.infinity-stone.collected[data-stone="1"] {
  background: radial-gradient(circle, #60a5fa, #3b82f6);
}
.infinity-stone.collected[data-stone="2"] {
  background: radial-gradient(circle, #f87171, #dc2626);
}
.infinity-stone.collected[data-stone="3"] {
  background: radial-gradient(circle, #fde047, #eab308);
}
.infinity-stone.collected[data-stone="4"] {
  background: radial-gradient(circle, #34d399, #10b981);
}

/* Monster card override: show title over gauntlet like normal ultimates */
.monster-card
  .ultimate-slot
  .ultimate-slot-battle.infinity-gauntlet
  .skill-name {
  display: block !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  z-index: 3; /* above white overlay and stones */
  pointer-events: none;
}

/* Monster Actions */
.monster-actions .btn-group .btn {
  border-radius: 0;
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
}

.monster-actions .btn-group .btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.monster-actions .btn-group .btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Enhanced Type Badges */
.type-badge {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.type-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Type badge icons - make them larger for better visibility */
.type-badge i {
  font-size: 2em;
}

.type-icon-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Monster Footer */
.monster-footer {
  grid-row: 5;
  margin: 20px -1.5rem -1.5rem -1.5rem;
}

.monster-footer .status-message {
  border-radius: 0 0 15px 15px;
  font-weight: 500;
}

/* Resting status with soft purple/indigo gradient */
.status-resting {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border: none;
}

/* Incomplete move set status with gradient */
.status-incomplete-moveset {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
  border: none;
}

.onboarding-ultimate {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none;
}

.pulse-arrow {
  animation: pulse 1.5s ease-in-out infinite;
  color: white;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(-5px);
  }
}

/* Grid areas for monster card sections */
.monster-card .monster-header {
  grid-row: 1;
}

.monster-card .skills-section {
  grid-row: 2;
}

.monster-card .ultimate-section {
  grid-row: 3;
}

.monster-card .monster-runes {
  grid-row: 4;
}

/* Center align all footer text */
.monster-footer .status-message {
  text-align: center;
}

.monster-footer .btn {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monster-footer .btn i {
  margin-right: 0.5rem;
}

.monster-footer .btn {
  border-radius: 0 0 15px 15px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: var(--primary-gradient) !important;
  color: white !important;
  border: none !important;
  padding: 1.2rem !important;
  margin: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.monster-footer .btn:hover {
  transform: none;
  background: var(--primary-gradient) !important;
  color: white !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  filter: brightness(0.95);
}

.monster-footer .btn-success {
  background: linear-gradient(135deg, #6cbb6a 0%, #20c997 100%) !important;
}

.monster-footer .btn-success:hover {
  background: linear-gradient(135deg, #5aa558 0%, #1ea085 100%) !important;
  filter: none;
}

/* Fix type icon centering */
.type-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2em;
  cursor: help;
  transition: all 0.3s ease;
  line-height: 1;
}

/* Edit Name Link */
.edit-name-link {
  color: #6c757d;
  transition: color 0.3s ease;
  text-decoration: none;
}

.edit-name-link:hover {
  color: #667eea;
}

/* Monster Runes */
.runes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.rune-slot {
  aspect-ratio: 1;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.rune-slot.unlocked {
  background: #d4edda;
}

.rune-slot.locked {
  background: #f8d7da;
}

.rune-badge {
  color: white;
  padding: 0.5rem;
  border-radius: 8px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
  border: none;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.rune-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.rune-badge i {
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
}

.rune-level {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0;
}

.rune-slot-empty,
.rune-slot-locked {
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.rune-slot:hover {
  border-color: #667eea;
}

.rune-slot.unlocked:hover {
  background: #f0f4ff;
}

.rune-slot.locked:hover {
  background: #fff0f0;
}

/* Rune Type Colors by ID - Updated to use CSS variables */
/* Rune type classes - backgrounds applied via .type-background-{type} */
.rune-type-1,  /* Fire */
.rune-type-2,  /* Water */
.rune-type-3,  /* Earth */
.rune-type-4,  /* Neutral */
.rune-type-5,  /* Electric */
.rune-type-6,  /* Poison */
.rune-type-8,  /* Fighting */
.rune-type-10, /* Undead */
.rune-type-13  /* Flying */ {
  color: white;
}

/* Clickable Skills and Ultimate */
.skill-badge,
.ultimate-badge {
  text-decoration: none;
  color: white;
}

.skill-badge:hover,
.ultimate-badge:hover {
  color: white;
  text-decoration: none;
}

.skill-slot-empty,
.ultimate-slot-empty {
  text-decoration: none;
  color: inherit;
}

.skill-slot-empty:hover,
.ultimate-slot-empty:hover {
  color: inherit;
  text-decoration: none;
}

/* Clickable Runes */
.rune-badge {
  text-decoration: none;
  color: white;
}

.rune-badge:hover {
  color: white;
  text-decoration: none;
}

.rune-slot-empty,
.rune-slot-locked {
  text-decoration: none;
  color: inherit;
}

.rune-slot-empty:hover,
.rune-slot-locked:hover {
  color: inherit;
  text-decoration: none;
}

.rune-slot-locked:hover {
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
}

/* Shared info styling for all dropdown types */
.dropdown-item .type-icon-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.dropdown-item .skill-info,
.dropdown-item .ultimate-info,
.dropdown-item .rune-info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dropdown-item .skill-name,
.dropdown-item .ultimate-name,
.dropdown-item .rune-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.dropdown-item .skill-description,
.dropdown-item .ultimate-description,
.dropdown-item .rune-features {
  font-size: 0.875rem;
  color: #6c757d;
  line-height: 1.3;
  margin: 0;
}

/* Currently equipped styling for all types */
.currently-equipped {
  background-color: rgba(25, 135, 84, 0.1) !important;
  border-left: 3px solid #198754;
}

.currently-equipped:hover {
  background-color: rgba(25, 135, 84, 0.2) !important;
}

/* Better Status Styling */
.monster-status .badge {
  font-size: 0.75rem;
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
}

/* Responsive adjustments for monster cards */
@media (max-width: 768px) {
  .monster-card {
    padding: 1rem;
  }

  .monster-name {
    font-size: 1.1rem;
  }

  .skills-grid {
    gap: 0.25rem;
  }

  .skill-badge {
    font-size: 0.7rem;
    padding: 0.4rem;
  }

  .monster-actions .btn-group .btn {
    font-size: 0.75rem;
    padding: 0.4rem 0.5rem;
  }

  .runes-grid {
    gap: 0.25rem;
  }
}

/* Fix rune slot borders for display version */
.monster-card .rune-slot {
  border: 2px solid #dee2e6;
}

.monster-card .rune-slot.unlocked {
  border-color: #28a745;
}

.monster-card .rune-slot.locked {
  border-color: #dc3545;
}

.monster-card .rune-slot.with-rune {
  border: none;
}

/* Display-only monster card specific styles */
.monster-card-display {
  margin-bottom: 0 !important;
}

/* Type Tags */
.type-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.type-tag-sm {
  padding: 0.125rem 0.375rem;
  font-size: 0.65rem;
  border-radius: 0.75rem;
}

.type-tag-lg {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 1.25rem;
}

/* Type Colors - Consolidated with universal backgrounds */
.type-fire,
.type-water,
.type-earth,
.type-electric,
.type-poison,
.type-fighting,
.type-undead,
.type-neutral,
.type-flying {
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

/* Consolidated Type Background Classes - Now using universal .type-background-{type} */
/* Skills, Runes, and Ultimates now use .type-background-{type} with additional styling */
.skill-type-fire,
.skill-type-water,
.skill-type-earth,
.skill-type-electric,
.skill-type-poison,
.skill-type-fighting,
.skill-type-undead,
.skill-type-neutral,
.skill-type-flying,
.rune-type-fire,
.rune-type-water,
.rune-type-earth,
.rune-type-electric,
.rune-type-poison,
.rune-type-fighting,
.rune-type-undead,
.rune-type-neutral,
.rune-type-flying,
.ultimate-type-fire,
.ultimate-type-water,
.ultimate-type-earth,
.ultimate-type-electric,
.ultimate-type-poison,
.ultimate-type-fighting,
.ultimate-type-undead,
.ultimate-type-neutral,
.ultimate-type-flying {
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.monster-card-display .monster-runes {
  margin-bottom: 1.5rem;
}

/* Ensure skill slots fill their containers */
.skill-slot {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* Shared dropdown styling for all types */
.dropdown-item {
  padding: 0.5rem 0.75rem;
  min-height: auto;
  white-space: normal;
  word-wrap: break-word;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-bottom: 1px solid #e9ecef !important;
  margin-bottom: 0.25rem;
}

.dropdown-item:last-child {
  border-bottom: none !important;
  margin-bottom: 0;
}

.dropdown-item + .dropdown-item {
  margin-top: 0.25rem;
}

/* Shared info styling for all dropdown types */
.dropdown-item .type-icon-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}

.dropdown-item .skill-info,
.dropdown-item .ultimate-info,
.dropdown-item .rune-info {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dropdown-item .skill-name,
.dropdown-item .ultimate-name,
.dropdown-item .rune-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.dropdown-item .skill-description,
.dropdown-item .ultimate-description,
.dropdown-item .rune-features {
  font-size: 0.875rem;
  color: #6c757d;
  line-height: 1.3;
  margin: 0;
}

/* No option styling */
.dropdown-item.no-skill,
.dropdown-item.no-ultimate,
.dropdown-item.no-rune {
  padding-left: 0;
}

.dropdown-item.no-skill span,
.dropdown-item.no-ultimate span,
.dropdown-item.no-rune span {
  font-weight: 600 !important;
  color: #000 !important;
  margin-left: 0.75rem;
}

/* Ensure No options stay black even on hover */
.dropdown-item.no-skill:hover span,
.dropdown-item.no-skill:focus span,
.dropdown-item.no-skill:active span,
.dropdown-item.no-ultimate:hover span,
.dropdown-item.no-ultimate:focus span,
.dropdown-item.no-ultimate:active span,
.dropdown-item.no-rune:hover span,
.dropdown-item.no-rune:focus span,
.dropdown-item.no-rune:active span {
  color: #000 !important;
}

/* Current selection styling - unified light green background */
.dropdown-item.currently-equipped {
  background-color: rgba(25, 135, 84, 0.1) !important;
  border-left: 3px solid #198754;
}

/* Disabled state styling for items in use by other monsters */
.dropdown-item.disabled {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed !important;
  background-color: #f8f9fa !important;
}

.dropdown-item.disabled:hover {
  background-color: #f8f9fa !important;
}

/* View button section in dropdown items */
.dropdown-item-view-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 12px;
  margin-left: 12px;
  border-left: 1px solid #dee2e6;
  align-self: stretch;
  margin-top: 4px;
  margin-bottom: 4px;
}

.dropdown-item-view-section .btn {
  white-space: nowrap;
}

/* Ensure view buttons work even in disabled items */
.dropdown-item.disabled .dropdown-item-view-section {
  pointer-events: auto;
  opacity: 1;
}

.dropdown-item.disabled .dropdown-item-view-section .btn {
  opacity: 1;
}

/* In use by text styling */
.dropdown-item .in-use-text {
  font-size: 0.875rem;
  margin-left: auto;
  padding-right: 8px;
  white-space: nowrap;
}

/* Hover effects */
.dropdown-item:hover {
  background-color: #f8f9fa !important;
}

.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
  background-color: #e3f2fd !important;
  color: #1976d2 !important;
}

.dropdown-item:focus .skill-description,
.dropdown-item:focus .ultimate-description,
.dropdown-item:focus .rune-features,
.dropdown-item:active .skill-description,
.dropdown-item:active .ultimate-description,
.dropdown-item:active .rune-features,
.dropdown-item.active .skill-description,
.dropdown-item.active .ultimate-description,
.dropdown-item.active .rune-features {
  color: #1976d2 !important;
}

/* Shared dropdown menu styling */
.dropdown-menu-custom li {
  border-bottom: 1px solid #e9ecef !important;
  margin: 0;
}

.dropdown-menu-custom li:last-child {
  border-bottom: none !important;
}

/* Remove any padding/margin that might interfere */
.dropdown-menu-custom li a {
  border: none !important;
  margin: 0 !important;
}

/* Legacy - now handled by .dropdown-item .type-icon-badge */

/* Type icons container for ultimates with dual types */
.type-icons-container {
  flex-shrink: 0;
}

.type-icons-container .type-icon-badge {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
}

/* Ultimate dual type styling */
.ultimate-dual {
  position: relative;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.ultimate-dual-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Background applied via .dual-type-background-{type1}-{type2} class */
  border-radius: inherit;
  z-index: 1;
}

/* Left icon (primary type) */
.ultimate-left-icon {
  position: relative;
  z-index: 2;
  color: white;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  flex-shrink: 0;
}

/* Center title */
.ultimate-center-title {
  position: relative;
  z-index: 2;
  color: white !important;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  font-weight: 600;
  flex-grow: 1;
  text-align: center;
  margin: 0 0.5rem;
}

/* Right icon (secondary type) */
.ultimate-right-icon {
  position: relative;
  z-index: 2;
  color: white;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  flex-shrink: 0;
}

/* Legacy - now handled by .dropdown-item .skill-info, etc. */

/* Legacy - now handled by .dropdown-item .skill-name, etc. */

/* Legacy - now handled by .dropdown-item .no-skill, etc. */

/* View button styling */
.view-skill-btn,
.view-ultimate-btn {
  flex-shrink: 0;
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  align-self: center;
}

/* Dropdown button text styling */
#skill-dropdown-text,
#ultimate-dropdown-text {
  gap: 0.5rem;
  white-space: nowrap;
  flex-grow: 1;
}

#skill-dropdown-text .type-icon-badge,
#ultimate-dropdown-text .type-icon-badge {
  flex-shrink: 0;
}

/* Skill dropdown text styling - match ultimate styling */
#skill-dropdown-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 60px;
  padding: 0.5rem 0;
  text-align: left;
}

#skill-dropdown-text .skill-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

#skill-dropdown-text .skill-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  text-align: left;
  color: #212529 !important;
}

#skill-dropdown-text .skill-description {
  font-size: 0.8rem;
  color: #6c757d;
  text-align: left;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#ultimate-dropdown-text .type-icons-container {
  flex-shrink: 0;
}

#ultimate-dropdown-text .type-icons-container .type-icon-badge {
  width: 24px;
  height: 24px;
  font-size: 0.7rem;
}

/* Ultimate dropdown text styling */
#ultimate-dropdown-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 60px;
  padding: 0.5rem 0;
  text-align: left;
}

#ultimate-dropdown-text .ultimate-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

#ultimate-dropdown-text .ultimate-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  text-align: left;
  color: #212529 !important;
}

#ultimate-dropdown-text .ultimate-description {
  font-size: 0.8rem;
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  text-align: left;
}

/* Rune dropdown text styling */
#rune-dropdown-text {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 60px;
  padding: 0.5rem 0;
  text-align: left;
}

#rune-dropdown-text .type-icon-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
}

#rune-dropdown-text .rune-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

#rune-dropdown-text .rune-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  text-align: left;
  color: #212529 !important;
}

#rune-dropdown-text .rune-features {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.2;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Fix dropdown button hover background */
#skill-dropdown:hover,
#rune-dropdown:hover,
#ultimate-dropdown:hover,
#skill-dropdown.show,
#rune-dropdown.show,
#ultimate-dropdown.show {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

#skill-dropdown:hover .skill-description,
#skill-dropdown:hover .skill-name,
#rune-dropdown:hover .rune-features,
#ultimate-dropdown:hover .ultimate-description,
#rune-dropdown:hover .rune-name,
#ultimate-dropdown:hover .ultimate-name,
#skill-dropdown:hover::after,
#rune-dropdown:hover::after,
#ultimate-dropdown:hover::after {
  color: #212529 !important;
}

/* Ensure dropdown arrow stays dark */
#skill-dropdown::after,
#rune-dropdown::after,
#ultimate-dropdown::after {
  color: #212529 !important;
}

/* Fix dropdown menu item hover */
.dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

.dropdown-menu .dropdown-item:hover .rune-features,
.dropdown-menu .dropdown-item:hover .ultimate-description,
.dropdown-menu .dropdown-item:hover .skill-description {
  color: #212529 !important;
}

/* Ensure dropdown arrow stays on the right */
#skill-dropdown::after,
#ultimate-dropdown::after,
#rune-dropdown::after {
  flex-shrink: 0;
  margin-left: auto;
}

.view-skill-btn:hover,
.view-ultimate-btn:hover {
  background-color: #e9ecef;
}

/* Legacy - now handled by .dropdown-item:hover, etc. */

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: #f8f9fa !important;
  color: #495057 !important;
}

.dropdown-item:active {
  background-color: #e3f2fd !important;
  color: #1976d2 !important;
}

/* Legacy - now handled by .dropdown-item .skill-description */
/* .skill-dropdown-item .skill-description, */
/* Legacy - now handled by .dropdown-item .ultimate-description */
/* .ultimate-dropdown-item .ultimate-description { */
/* 	font-size: 0.875rem;
	color: #6c757d;
	line-height: 1.3;
	margin: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
} */

/* Quick Swap Section Styling */
.quick-swap-section .skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.25rem;
  margin-bottom: 1rem;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.skill-swap-btn {
  /* Background applied via .type-background-{type} class */
  color: white;
  padding: 0.25rem;
  border-radius: 6px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.skill-swap-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.skill-swap-btn i {
  font-size: 0.8rem;
  margin-bottom: 0.15rem;
}

.skill-swap-btn span {
  font-size: 0.6rem;
  line-height: 1;
}

/* Empty skill slot styling for quick swap */
.quick-swap-section .skill-slot-empty {
  aspect-ratio: 1;
  border: 2px dashed #dee2e6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: #f8f9fa;
  color: #6c757d;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.quick-swap-section .skill-slot-empty:hover {
  border-color: #667eea;
  background: #f0f4ff;
}

/* Wider modals for skill, ultimate, and rune selection */
#skillSlotModal .modal-dialog,
#ultimateModal .modal-dialog,
#runeModal .modal-dialog,
#monsterNameModal .modal-dialog,
#unlockRuneSlotModal .modal-dialog {
  max-width: 800px;
}

/* Center modals vertically on viewport regardless of page scroll */
.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
  margin: 0.5rem auto;
}

@media (min-width: 576px) {
  .modal-dialog {
    min-height: calc(100% - 3.5rem);
    margin: 1.75rem auto;
  }
}

/* Add padding under top nav for all pages */
main.col-md-9 {
  padding-top: 2rem;
}

/* Monster cards grid - flexible columns with max-width */
.monsters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
  align-items: stretch;
}

.monster-card-wrapper {
  flex: 1 1 300px;
  max-width: 300px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
}

.monster-card-wrapper .monster-card {
  height: 100%;
  flex: 1;
}

/* Fix cursor for type icons in dropdowns - no tooltips there */
.dropdown-item .type-icon-badge,
.dropdown-menu .type-icon-badge,
#skill-dropdown-text .type-icon-badge,
#ultimate-dropdown-text .type-icon-badge,
#rune-dropdown-text .type-icon-badge {
  cursor: default;
}

/* Remove hover effects for type icons in modals/dropdowns */
.dropdown-item .type-icon-badge:hover,
.dropdown-menu .type-icon-badge:hover,
#skill-dropdown-text .type-icon-badge:hover,
#ultimate-dropdown-text .type-icon-badge:hover,
#rune-dropdown-text .type-icon-badge:hover {
  transform: none;
  box-shadow: none;
}

/* Quest Cards */
.quest-card-wrapper {
  height: 100%;
}

.quest-card {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 15px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.quest-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quest-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #667eea;
}

.quest-card:hover::before {
  opacity: 1;
}

.quest-card.quest-completed {
  border-color: #28a745;
  background: #f8fff9;
}

.quest-card.quest-completed::before {
  background: linear-gradient(90deg, #28a745, #20c997);
}

.quest-title {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.quest-description {
  font-size: 0.9rem;
  line-height: 1.4;
}

.quest-details {
  flex-grow: 1;
}

.quest-info-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.quest-info-label {
  color: #6c757d;
  font-size: 0.85rem;
}

.quest-info-value {
  color: #495057;
  font-size: 0.9rem;
}

.quest-completed-info {
  border: 1px solid #28a745;
}

.quest-footer {
  margin-top: 1rem;
}

.quest-footer .btn {
  font-size: 1rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.quest-footer .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments for quest cards */
@media (max-width: 768px) {
  .quest-card {
    padding: 1rem;
  }

  .quest-title {
    font-size: 1.1rem;
  }

  .quest-info-label,
  .quest-info-value {
    font-size: 0.8rem;
  }
}

/* Quest Monster Dropdown Specific Styling */
.monster-dropdown-list {
  padding: 0;
  z-index: 1050 !important;
}

.monster-dropdown-list .dropdown-item {
  padding: 0.25rem 0.5rem;
  min-height: 75px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.monster-dropdown-list .dropdown-item:active {
  background-color: transparent !important;
  color: inherit !important;
}

.monster-dropdown-list .dropdown-item .monster-name {
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.2;
  color: #212529;
  font-size: 1rem;
  margin-right: 1rem;
  flex-grow: 1;
}

.monster-dropdown-list .dropdown-item .type-icons-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.monster-dropdown-list .dropdown-item .monster-moveset-dropdown {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  height: 100%;
  margin: -0.25rem -0.5rem -0.25rem 0;
  justify-content: flex-end;
}

.monster-dropdown-list .dropdown-item .skills-grid-dropdown {
  display: flex;
}

.monster-dropdown-list .dropdown-item .skill-card-dropdown {
  width: 75px;
  height: 75px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  position: relative;
  box-shadow: none;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.monster-dropdown-list .dropdown-item .skill-card-dropdown:first-child {
  border-left: 2px solid rgba(255, 255, 255, 0.5);
}

.monster-dropdown-list .dropdown-item .skill-card-dropdown .skill-icon {
  font-size: 1.2rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.1rem;
}

.monster-dropdown-list .dropdown-item .skill-card-dropdown .skill-name {
  font-size: 0.6rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.monster-dropdown-list .dropdown-item .ultimate-card-dropdown {
  width: 120px;
  height: 75px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  position: relative;
  box-shadow: none;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.monster-dropdown-list .dropdown-item .ultimate-card-dropdown .ultimate-icon {
  font-size: 1.2rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.1rem;
  display: flex;
  gap: 0.1rem;
}

.monster-dropdown-list .dropdown-item .ultimate-card-dropdown .ultimate-name {
  font-size: 0.6rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* Dual-type ultimate styling for quest dropdown */
.monster-dropdown-list .dropdown-item .ultimate-card-dropdown.ultimate-dual {
  position: relative;
  overflow: hidden;
}

.monster-dropdown-list
  .dropdown-item
  .ultimate-card-dropdown
  .ultimate-dual-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Background applied via .dual-type-background-{type1}-{type2} class */
  z-index: 1;
}

.monster-dropdown-list
  .dropdown-item
  .ultimate-card-dropdown
  .ultimate-primary-icon,
.monster-dropdown-list
  .dropdown-item
  .ultimate-card-dropdown
  .ultimate-secondary-icon,
.monster-dropdown-list
  .dropdown-item
  .ultimate-card-dropdown
  .ultimate-center-title {
  position: relative;
  z-index: 2;
}

.monster-dropdown-list
  .dropdown-item
  .ultimate-card-dropdown
  .ultimate-left-icon {
  position: absolute;
  left: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.monster-dropdown-list
  .dropdown-item
  .ultimate-card-dropdown
  .ultimate-right-icon {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.monster-dropdown-list
  .dropdown-item
  .ultimate-card-dropdown
  .ultimate-center-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 50%;
}

/* Skill card dropdown type colors for quest dropdown */
/* Skill card colors inherited from base .skill-type-* classes */

/* Ultimate card colors inherited from base .ultimate-type-* classes */

/* Monster dropdown button styling */
.monster-dropdown-selected {
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selected monster display in dropdown button */
.monster-dropdown-selected .monster-moveset-display {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  height: 75px;
  justify-content: flex-end;
}

.monster-dropdown-selected .type-icons-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 0.5rem;
}

.monster-dropdown-selected .skill-card-display {
  width: 75px;
  height: 75px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  position: relative;
  box-shadow: none;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.monster-dropdown-selected .skill-card-display:first-child {
  border-left: 2px solid rgba(255, 255, 255, 0.5);
}

.monster-dropdown-selected .skill-card-display .skill-icon {
  font-size: 1.1rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.1rem;
}

.monster-dropdown-selected .skill-card-display .skill-name {
  font-size: 0.55rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.monster-dropdown-selected .ultimate-card-display {
  width: 120px;
  height: 75px;
  border-radius: 0 0.375rem 0.375rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  position: relative;
  box-shadow: none;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.monster-dropdown-selected .ultimate-card-display .ultimate-icon {
  font-size: 1.1rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.1rem;
  display: flex;
  gap: 0.1rem;
}

.monster-dropdown-selected .ultimate-card-display .ultimate-name {
  font-size: 0.55rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* Dual-type ultimate display styling */
.monster-dropdown-selected .ultimate-card-display.ultimate-dual {
  position: relative;
  overflow: hidden;
}

.monster-dropdown-selected .ultimate-card-display .ultimate-dual-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.monster-dropdown-selected .ultimate-card-display .ultimate-primary-icon,
.monster-dropdown-selected .ultimate-card-display .ultimate-secondary-icon,
.monster-dropdown-selected .ultimate-card-display .ultimate-center-title {
  position: relative;
  z-index: 2;
}

.monster-dropdown-selected .ultimate-card-display .ultimate-left-icon {
  position: absolute;
  left: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.monster-dropdown-selected .ultimate-card-display .ultimate-right-icon {
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.monster-dropdown-selected .ultimate-card-display .ultimate-center-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 40%;
}

/* Type colors inherited from base classes */

/* Hide dropdown arrow when monster is selected */
.monster-dropdown-btn[aria-expanded="true"]::after,
.monster-dropdown-btn[aria-expanded="false"]::after {
  display: none;
}

.monster-dropdown-btn::after {
  display: none;
}

/* Quest dropdown button specific styling */
.monster-dropdown-btn {
  padding: 0;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.monster-dropdown-btn:hover {
  background-color: transparent !important;
  color: inherit !important;
}

.monster-dropdown-btn:focus,
.monster-dropdown-btn:active {
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

.monster-dropdown-btn.show {
  background-color: transparent !important;
  color: inherit !important;
}

.monster-dropdown-selected .type-icon-badge {
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  /* Background applied via .type-background-{type} class */ /* Fallback */
}

/* Universal Single-Type Background Classes */
.type-background-fire {
  background: var(--type-fire-gradient);
}

.type-background-water {
  background: var(--type-water-gradient);
}

.type-background-earth {
  background: var(--type-earth-gradient);
}

.type-background-electric {
  background: var(--type-electric-gradient);
}

.type-background-poison {
  background: var(--type-poison-gradient);
}

.type-background-fighting {
  background: var(--type-fighting-gradient);
}

.type-background-undead {
  background: var(--type-undead-gradient);
}

.type-background-neutral {
  background: var(--type-neutral-gradient);
}
/* Global Dual-Type Background Classes - 56 combinations (8 types, order matters) */
/* Fire combinations */
.dual-type-background-fire-water {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  );
}

.dual-type-background-fire-earth {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  );
}

.dual-type-background-fire-electric {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  );
}

.dual-type-background-fire-poison {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  );
}

.dual-type-background-fire-fighting {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  );
}

.dual-type-background-fire-undead {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  );
}

.dual-type-background-fire-neutral {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  );
}

/* Water combinations */
.dual-type-background-water-fire {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  );
}

.dual-type-background-water-earth {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  );
}

.dual-type-background-water-electric {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  );
}

.dual-type-background-water-poison {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  );
}

.dual-type-background-water-fighting {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  );
}

.dual-type-background-water-undead {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  );
}

.dual-type-background-water-neutral {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  );
}

/* Earth combinations */
.dual-type-background-earth-fire {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  );
}

.dual-type-background-earth-water {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  );
}

.dual-type-background-earth-electric {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  );
}

.dual-type-background-earth-poison {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  );
}

.dual-type-background-earth-fighting {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  );
}

.dual-type-background-earth-undead {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  );
}

.dual-type-background-earth-neutral {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  );
}

/* Electric combinations */
.dual-type-background-electric-fire {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  );
}

.dual-type-background-electric-water {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  );
}

.dual-type-background-electric-earth {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  );
}

.dual-type-background-electric-poison {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  );
}

.dual-type-background-electric-fighting {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  );
}

.dual-type-background-electric-undead {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  );
}

.dual-type-background-electric-neutral {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  );
}

/* Poison combinations */
.dual-type-background-poison-fire {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  );
}

.dual-type-background-poison-water {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  );
}

.dual-type-background-poison-earth {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  );
}

.dual-type-background-poison-electric {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  );
}

.dual-type-background-poison-fighting {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  );
}

.dual-type-background-poison-undead {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  );
}

.dual-type-background-poison-neutral {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  );
}

/* Fighting combinations */
.dual-type-background-fighting-fire {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  );
}

.dual-type-background-fighting-water {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  );
}

.dual-type-background-fighting-earth {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  );
}

.dual-type-background-fighting-electric {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  );
}

.dual-type-background-fighting-poison {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  );
}

.dual-type-background-fighting-undead {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  );
}

.dual-type-background-fighting-neutral {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  );
}

/* Undead combinations */
.dual-type-background-undead-fire {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  );
}

.dual-type-background-undead-water {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  );
}

.dual-type-background-undead-earth {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  );
}

.dual-type-background-undead-electric {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  );
}

.dual-type-background-undead-poison {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  );
}

.dual-type-background-undead-fighting {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  );
}

.dual-type-background-undead-neutral {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  );
}

/* Neutral combinations */
.dual-type-background-neutral-fire {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  );
}

.dual-type-background-neutral-water {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  );
}

.dual-type-background-neutral-earth {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  );
}

.dual-type-background-neutral-electric {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  );
}

.dual-type-background-neutral-poison {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  );
}

.dual-type-background-neutral-fighting {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  );
}

.dual-type-background-neutral-undead {
  background: linear-gradient(
    var(--type-gradient-angle),
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  );
}

/* Monster Type Badge Styling for Gauntlet Table */
.monster-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  min-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.monster-type-badge .monster-type-icons {
  font-size: 1.25rem;
  color: white;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  flex-shrink: 0;
  width: 1.25rem;
}

.monster-type-badge .monster-type-name {
  font-weight: 600;
  font-size: 1rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  flex-grow: 1;
  text-align: center;
  padding: 0 0.75rem;
}

/* Gauntlet Reward Rarity Styling */
/* Common Rarity */
.reward-rarity-common {
  border: 2px solid #6c757d !important;
  background-color: rgba(108, 117, 125, 0.1) !important;
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.rarity-badge-common {
  background-color: #6c757d !important;
  color: white !important;
}

/* Uncommon Rarity */
.reward-rarity-uncommon {
  border: 3px solid #28a745 !important;
  background-color: rgba(40, 167, 69, 0.15) !important;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
  transition: all 0.3s ease;
}

.rarity-badge-uncommon {
  background-color: #28a745 !important;
  color: white !important;
  font-weight: 600;
}

/* Rare Rarity */
.reward-rarity-rare {
  border: 3px solid #17a2b8 !important;
  background: linear-gradient(
    135deg,
    rgba(23, 162, 184, 0.2) 0%,
    rgba(23, 162, 184, 0.1) 100%
  ) !important;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 3px 6px rgba(23, 162, 184, 0.3),
    inset 0 1px 3px rgba(23, 162, 184, 0.2);
  transition: all 0.3s ease;
}

.rarity-badge-rare {
  background-color: #17a2b8 !important;
  color: white !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Epic Rarity */
.reward-rarity-epic {
  border: 4px solid #6f42c1 !important;
  background: linear-gradient(
    135deg,
    rgba(111, 66, 193, 0.25) 0%,
    rgba(111, 66, 193, 0.1) 50%,
    rgba(111, 66, 193, 0.25) 100%
  ) !important;
  border-radius: 1rem !important;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 8px rgba(111, 66, 193, 0.4),
    0 0 15px rgba(111, 66, 193, 0.2), inset 0 2px 4px rgba(111, 66, 193, 0.3);
  position: relative;
  transition: all 0.3s ease;
}

.reward-rarity-epic:first-child {
  border-top-left-radius: 1rem !important;
  border-top-right-radius: 1rem !important;
}

.reward-rarity-epic:last-child {
  border-bottom-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
}

.reward-rarity-epic::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #6f42c1, #8e44ad, #6f42c1);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.5;
}

.rarity-badge-epic {
  background-color: #6f42c1 !important;
  color: white !important;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  padding: 0.5em 0.75em;
}

/* Legendary Rarity */
.reward-rarity-legendary {
  border: 5px solid #ffc107 !important;
  background: linear-gradient(
    135deg,
    rgba(255, 193, 7, 0.3) 0%,
    rgba(255, 215, 0, 0.15) 25%,
    rgba(255, 193, 7, 0.2) 50%,
    rgba(255, 215, 0, 0.15) 75%,
    rgba(255, 193, 7, 0.3) 100%
  ) !important;
  border-radius: 1.25rem !important;
  margin-bottom: 0.5rem;
  box-shadow: 0 5px 15px rgba(255, 193, 7, 0.6), 0 0 25px rgba(255, 215, 0, 0.4),
    inset 0 2px 5px rgba(255, 193, 7, 0.4),
    inset 0 -2px 5px rgba(255, 193, 7, 0.3);
  position: relative;
  animation: legendary-glow 2s ease-in-out infinite;
  transition: all 0.3s ease;
}

.reward-rarity-legendary:first-child {
  border-top-left-radius: 1.25rem !important;
  border-top-right-radius: 1.25rem !important;
}

.reward-rarity-legendary:last-child {
  border-bottom-left-radius: 1.25rem !important;
  border-bottom-right-radius: 1.25rem !important;
}

.reward-rarity-legendary::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(
    45deg,
    #ffc107,
    #ffeb3b,
    #ffd700,
    #ffc107,
    #ffeb3b
  );
  background-size: 200% 200%;
  border-radius: inherit;
  z-index: -1;
  opacity: 0.7;
  animation: legendary-border 3s linear infinite;
}

.rarity-badge-legendary {
  background: linear-gradient(135deg, #ffc107, #ffeb3b) !important;
  color: #000 !important;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
  padding: 0.5em 0.75em;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.6);
}

@keyframes legendary-glow {
  0%,
  100% {
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.6),
      0 0 25px rgba(255, 215, 0, 0.4), inset 0 2px 5px rgba(255, 193, 7, 0.4),
      inset 0 -2px 5px rgba(255, 193, 7, 0.3);
  }
  50% {
    box-shadow: 0 5px 20px rgba(255, 193, 7, 0.8),
      0 0 35px rgba(255, 215, 0, 0.6), inset 0 2px 8px rgba(255, 193, 7, 0.5),
      inset 0 -2px 8px rgba(255, 193, 7, 0.4);
  }
}

@keyframes legendary-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Battle Result Badges - EXTRAVAGANT & DRAMATIC */
.battle-result-badge {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 2rem;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.battle-result-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
}

.battle-result-badge:hover::before {
  left: 100%;
}

/* VICTORY Badge - Golden Glory */
.badge-victory {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  color: #000;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(184, 134, 11, 0.4);
  border: 3px solid #ffed4e;
}

.badge-victory:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 215, 0, 0.6),
    inset 0 2px 6px rgba(255, 255, 255, 0.8);
}

/* DEFEAT Badge - Crimson Devastation */
.badge-defeat {
  background: linear-gradient(135deg, #dc3545 0%, #ff4757 50%, #dc3545 100%);
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(220, 53, 69, 0.8);
  box-shadow: 0 6px 25px rgba(220, 53, 69, 0.6), 0 0 40px rgba(220, 53, 69, 0.4),
    inset 0 2px 4px rgba(255, 107, 107, 0.6),
    inset 0 -2px 4px rgba(139, 0, 0, 0.6);
  border: 3px solid #ff6b6b;
}

.badge-defeat:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(220, 53, 69, 0.8), 0 0 50px rgba(220, 53, 69, 0.6),
    inset 0 2px 6px rgba(255, 107, 107, 0.8);
}

/* TIE Badge - Silver Stalemate */
.badge-tie {
  background: linear-gradient(135deg, #6c757d 0%, #95a5a6 50%, #6c757d 100%);
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 20px rgba(108, 117, 125, 0.5),
    inset 0 2px 4px rgba(189, 195, 199, 0.6),
    inset 0 -2px 4px rgba(52, 58, 64, 0.6);
  border: 2px solid #95a5a6;
}

/* Victory Pulse Animation - Glorious */
@keyframes victory-pulse {
  0% {
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 8px 35px rgba(255, 215, 0, 0.9),
      0 0 60px rgba(255, 215, 0, 0.7);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 215, 0, 0.4);
  }
}

.victory-pulse {
  animation: victory-pulse 2s ease-in-out infinite;
}

/* Defeat Shake Animation - Dramatic */
@keyframes defeat-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

.defeat-shake {
  animation: defeat-shake 0.8s ease-in-out;
}

/* Subtle Pulse for Tie */
@keyframes pulse-subtle {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.pulse-subtle {
  animation: pulse-subtle 3s ease-in-out infinite;
}

/* Compact Badges for Skills, Ultimates, and Runes in Tables */
.skill-badge-compact,
.ultimate-badge-compact,
.rune-badge-compact {
  display: inline-flex;
  align-items: center;
  border-radius: 1rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.skill-badge-compact:hover,
.rune-badge-compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ultimate-badge-compact {
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.ultimate-badge-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* Gauntlet Run Row Layout */
.gauntlet-run-row {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Prevent card hover effect on gauntlet runs container */
.card:has(.gauntlet-run-row):hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Prevent card hover effect on monster selector (Choose Your Monster) */
.card:has(.monster-dropdown-btn):hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Prevent card hover effect on monsters running the gauntlet table */
.card:has(table.table):hover {
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Monster Header */
.gauntlet-monster-header {
  height: 75px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  font-weight: 600;
  font-size: 1.1rem;
}

.gauntlet-monster-header .monster-type-icons {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 1.5rem;
}

.gauntlet-monster-header .monster-type-name {
  flex-grow: 1;
  text-align: center;
  padding: 0 0.75rem;
}

/* Stats Horizontal Layout */
.gauntlet-stats-horizontal {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  padding: 0.5rem;
}

.stat-box-horizontal {
  text-align: center;
  flex: 1;
}

.stat-box-horizontal .stat-value {
  font-size: 1.5rem;
  line-height: 1;
}

.stat-box-horizontal .stat-label {
  margin-top: 0.25rem;
}

/* Moveset + Runes Row */
.gauntlet-moveset-runes-row {
  display: flex;
  align-items: flex-start;
  background-color: transparent;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.gauntlet-skill-card {
  width: 75px;
  height: 75px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  position: relative;
  box-shadow: none;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
}

.gauntlet-skill-card:first-child {
  border-left: 2px solid rgba(255, 255, 255, 0.5);
}

.gauntlet-skill-card .skill-icon {
  font-size: 1.2rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.1rem;
}

.gauntlet-skill-card .skill-name {
  font-size: 0.6rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.gauntlet-ultimate-card {
  width: 160px;
  height: 75px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  position: relative;
  box-shadow: none;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
}

.gauntlet-ultimate-card .ultimate-icon {
  font-size: 1.4rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.1rem;
  display: flex;
  gap: 0.1rem;
}

.gauntlet-ultimate-card .ultimate-name {
  font-size: 0.7rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* Dual-type ultimate support for gauntlet cards */
.gauntlet-ultimate-card.ultimate-dual {
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
}

.gauntlet-ultimate-card .ultimate-center-title {
  font-size: 0.7rem;
  flex-grow: 1;
  text-align: center;
  padding: 0 0.25rem;
}

/* Rune Cards - Same style as Skills */
.gauntlet-rune-card {
  width: 75px;
  height: 75px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  position: relative;
  box-shadow: none;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
}

.gauntlet-rune-card .rune-icon {
  font-size: 1.2rem;
  color: white;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  margin-bottom: 0.1rem;
}

.gauntlet-rune-card .rune-level {
  font-size: 0.55rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  line-height: 1;
}

.gauntlet-rune-card .rune-name {
  font-size: 0.6rem;
  font-weight: 500;
  color: white;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.gauntlet-rune-empty {
  background-color: #e9ecef;
  border: 2px dashed #adb5bd;
}

/* Section 3: Actions */
.gauntlet-run-section-3 {
  background-color: #f8f9fa;
  border-left: 1px solid #dee2e6;
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .gauntlet-run-section-3 {
    border-left: none;
    border-top: 1px solid #dee2e6;
  }
}

/* ========================================
   Skill Cards (My Skills Page)
   ======================================== */
.skill-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid #e9ecef;
}

.skill-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Rarity borders for skill cards */
.skill-card.rarity-common {
  border-color: var(--rarity-common);
}

.skill-card.rarity-uncommon {
  border-color: var(--rarity-uncommon);
}

.skill-card.rarity-rare {
  border-color: var(--rarity-rare);
}

.skill-card.rarity-epic {
  border-color: var(--rarity-epic);
}

.skill-card.rarity-legendary {
  border-color: var(--rarity-legendary);
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.skill-card.rarity-legendary:hover {
  box-shadow: 0 8px 16px rgba(255, 193, 7, 0.5);
}

/* Skill card header */
.skill-card-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  padding: 1rem;
}

/* Cast time box in header */
.skill-card-header .skill-stat-box {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Combined stat box (cast time + cooldown) */
.skill-stat-box-combined {
  padding: 0.25rem 0.5rem !important;
}

.skill-stat-box-combined .skill-stat-label {
  font-size: 0.65rem !important;
  margin-bottom: -0.25rem;
}

.skill-stat-box-combined .skill-stat-value {
  font-size: 0.9rem !important;
  margin-top: 0 !important;
  white-space: nowrap;
}

.skill-type-badge {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  color: white !important;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* Skill description */
.skill-description {
  font-size: 0.95rem;
  line-height: 1.5;
  min-height: 3rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Skill stat boxes */
.skill-stat-box {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 0.75rem;
  text-align: center;
  border: 1px solid #e9ecef;
}

.skill-stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6c757d;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.skill-stat-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #212529;
  margin-top: 0.25rem;
  white-space: nowrap;
}

/* Gradient outline button */
.btn-gradient-outline {
  background: white;
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), var(--primary-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #667eea;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
}

.btn-gradient-outline:hover {
  color: white;
  background: var(--primary-gradient);
  background-clip: padding-box;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-gradient-outline:active {
  transform: translateY(0);
}

.btn-gradient-outline:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: white;
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), var(--primary-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #667eea;
}

.btn-gradient-outline:disabled:hover {
  transform: none;
  box-shadow: none;
  background: white;
  background-clip: padding-box, border-box;
  color: #667eea;
}

/* Skill Detail Page */
.skill-detail-header {
  padding: 2rem;
}

.skill-detail-header h2,
.skill-detail-header i {
  color: white !important;
}

.skill-detail-header .skill-stat-box {
  background: white;
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.skill-detail-header .skill-stat-box .skill-stat-label {
  font-size: 0.65rem;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.skill-detail-header .skill-stat-box .skill-stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: #212529;
  white-space: nowrap;
}

.skill-detail-header .skill-stat-box.skill-stat-box-combined {
  padding: 0.25rem 0.5rem;
}

.skill-detail-header .skill-stat-box.skill-stat-box-combined .skill-stat-label {
  font-size: 0.65rem;
  margin-bottom: -0.25rem;
}

.skill-detail-header .skill-stat-box.skill-stat-box-combined .skill-stat-value {
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Remove all hover effects on skill detail pages */
.skill-detail-view .table tr:hover {
  background-color: transparent !important;
}

.skill-detail-view .btn:not(.btn-gradient-outline):hover {
  transform: none !important;
}

.skill-detail-view .card:hover {
  transform: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.skill-detail-view .alert:hover {
  transform: none !important;
}

.skill-detail-view .badge:hover {
  transform: none !important;
}

/* Secondary effect row styling */
.secondary-effect-row {
  background-color: #f8f9fa;
  font-size: 0.9em;
}

.secondary-effect-row td {
  border-top: none;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.status-badge {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  font-weight: 600;
  cursor: help;
}

/* Rarity badges */
.rarity-badge-common {
  background-color: var(--rarity-common) !important;
  color: white !important;
}

.rarity-badge-uncommon {
  background-color: var(--rarity-uncommon) !important;
  color: white !important;
}

.rarity-badge-rare {
  background-color: var(--rarity-rare) !important;
  color: white !important;
}

.rarity-badge-epic {
  background-color: var(--rarity-epic) !important;
  color: white !important;
}

.rarity-badge-legendary {
  background: linear-gradient(
    135deg,
    #ffd700 0%,
    #ffed4e 50%,
    #ffd700 100%
  ) !important;
  color: #000 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

/* ============================================
   Skill/Ultimate Tooltip Cards
   ============================================ */

.skill-tooltip-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  min-width: 280px;
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: none !important;
  overflow: hidden;
}

/* Type-specific gradient backgrounds for tooltip headers only */
.skill-tooltip-header.skill-tooltip-type-fire {
  background: var(--type-fire-gradient) !important;
}

.skill-tooltip-header.skill-tooltip-type-water {
  background: var(--type-water-gradient) !important;
}

.skill-tooltip-header.skill-tooltip-type-earth {
  background: var(--type-earth-gradient) !important;
}

.skill-tooltip-header.skill-tooltip-type-electric {
  background: var(--type-electric-gradient) !important;
}

.skill-tooltip-header.skill-tooltip-type-poison {
  background: var(--type-poison-gradient) !important;
}

.skill-tooltip-header.skill-tooltip-type-fighting {
  background: var(--type-fighting-gradient) !important;
}

.skill-tooltip-header.skill-tooltip-type-undead {
  background: var(--type-undead-gradient) !important;
}

.skill-tooltip-header.skill-tooltip-type-neutral {
  background: var(--type-neutral-gradient) !important;
}

.skill-tooltip-header.skill-tooltip-type-flying {
  background: var(--type-flying-gradient) !important;
}

/* Dual-type tooltip headers - higher specificity to override single-type backgrounds */
.skill-tooltip-header.dual-type-background-fire-water {
  background: linear-gradient(
    135deg,
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fire-earth {
  background: linear-gradient(
    135deg,
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fire-electric {
  background: linear-gradient(
    135deg,
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fire-poison {
  background: linear-gradient(
    135deg,
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fire-fighting {
  background: linear-gradient(
    135deg,
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fire-undead {
  background: linear-gradient(
    135deg,
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fire-neutral {
  background: linear-gradient(
    135deg,
    var(--type-fire-primary) 0%,
    var(--type-fire-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-water-fire {
  background: linear-gradient(
    135deg,
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-water-earth {
  background: linear-gradient(
    135deg,
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-water-electric {
  background: linear-gradient(
    135deg,
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-water-poison {
  background: linear-gradient(
    135deg,
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-water-fighting {
  background: linear-gradient(
    135deg,
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-water-undead {
  background: linear-gradient(
    135deg,
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-water-neutral {
  background: linear-gradient(
    135deg,
    var(--type-water-primary) 0%,
    var(--type-water-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-earth-fire {
  background: linear-gradient(
    135deg,
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-earth-water {
  background: linear-gradient(
    135deg,
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-earth-electric {
  background: linear-gradient(
    135deg,
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-earth-poison {
  background: linear-gradient(
    135deg,
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-earth-fighting {
  background: linear-gradient(
    135deg,
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-earth-undead {
  background: linear-gradient(
    135deg,
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-earth-neutral {
  background: linear-gradient(
    135deg,
    var(--type-earth-primary) 0%,
    var(--type-earth-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-electric-fire {
  background: linear-gradient(
    135deg,
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-electric-water {
  background: linear-gradient(
    135deg,
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-electric-earth {
  background: linear-gradient(
    135deg,
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-electric-poison {
  background: linear-gradient(
    135deg,
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-electric-fighting {
  background: linear-gradient(
    135deg,
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-electric-undead {
  background: linear-gradient(
    135deg,
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-electric-neutral {
  background: linear-gradient(
    135deg,
    var(--type-electric-primary) 0%,
    var(--type-electric-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-poison-fire {
  background: linear-gradient(
    135deg,
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-poison-water {
  background: linear-gradient(
    135deg,
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-poison-earth {
  background: linear-gradient(
    135deg,
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-poison-electric {
  background: linear-gradient(
    135deg,
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-poison-fighting {
  background: linear-gradient(
    135deg,
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-poison-undead {
  background: linear-gradient(
    135deg,
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-poison-neutral {
  background: linear-gradient(
    135deg,
    var(--type-poison-primary) 0%,
    var(--type-poison-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fighting-fire {
  background: linear-gradient(
    135deg,
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fighting-water {
  background: linear-gradient(
    135deg,
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fighting-earth {
  background: linear-gradient(
    135deg,
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fighting-electric {
  background: linear-gradient(
    135deg,
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fighting-poison {
  background: linear-gradient(
    135deg,
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fighting-undead {
  background: linear-gradient(
    135deg,
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-fighting-neutral {
  background: linear-gradient(
    135deg,
    var(--type-fighting-primary) 0%,
    var(--type-fighting-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-undead-fire {
  background: linear-gradient(
    135deg,
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-undead-water {
  background: linear-gradient(
    135deg,
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-undead-earth {
  background: linear-gradient(
    135deg,
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-undead-electric {
  background: linear-gradient(
    135deg,
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-undead-poison {
  background: linear-gradient(
    135deg,
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-undead-fighting {
  background: linear-gradient(
    135deg,
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-undead-neutral {
  background: linear-gradient(
    135deg,
    var(--type-undead-primary) 0%,
    var(--type-undead-secondary) 49.9%,
    var(--type-neutral-primary) 50.1%,
    var(--type-neutral-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-neutral-fire {
  background: linear-gradient(
    135deg,
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-fire-primary) 50.1%,
    var(--type-fire-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-neutral-water {
  background: linear-gradient(
    135deg,
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-water-primary) 50.1%,
    var(--type-water-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-neutral-earth {
  background: linear-gradient(
    135deg,
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-earth-primary) 50.1%,
    var(--type-earth-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-neutral-electric {
  background: linear-gradient(
    135deg,
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-electric-primary) 50.1%,
    var(--type-electric-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-neutral-poison {
  background: linear-gradient(
    135deg,
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-poison-primary) 50.1%,
    var(--type-poison-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-neutral-fighting {
  background: linear-gradient(
    135deg,
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-fighting-primary) 50.1%,
    var(--type-fighting-secondary) 100%
  ) !important;
}

.skill-tooltip-header.dual-type-background-neutral-undead {
  background: linear-gradient(
    135deg,
    var(--type-neutral-primary) 0%,
    var(--type-neutral-secondary) 49.9%,
    var(--type-undead-primary) 50.1%,
    var(--type-undead-secondary) 100%
  ) !important;
}

.skill-tooltip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 12px 6px 12px;
  margin: -12px -12px 8px -12px;
  border-radius: 6px 6px 0 0;
}

.skill-tooltip-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: 4px;
}

.skill-tooltip-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skill-tooltip-type-icon {
  font-size: 20px;
  color: white;
}

.skill-tooltip-title {
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: left;
  margin: 0;
}

.skill-tooltip-badges {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 2px;
}

.skill-tooltip-rarity {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.skill-tooltip-cast-time {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
  min-width: 50px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.skill-tooltip-charges {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
  margin-bottom: 8px;
}

.cast-time-label,
.charges-label {
  font-size: 8px;
  font-weight: bold;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
}

.cast-time-value,
.charges-value {
  font-size: 12px;
  font-weight: bold;
  color: #495057;
}

.skill-tooltip-divider {
  height: 1px;
  background: #dee2e6;
  margin: 8px 0;
}

.skill-tooltip-description {
  font-size: 13px;
  color: #495057;
  line-height: 1.4;
  text-align: left;
}

/* Tooltip trigger styling */
.reward-tooltip-trigger {
  cursor: help;
  transition: all 0.2s ease;
}

.reward-link.reward-tooltip-trigger {
  cursor: pointer;
}

.reward-name {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

.reward-name:hover {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

/* Reward link styling - no hover effects */
.reward-link {
  text-decoration: none !important;
  color: inherit !important;
}

.reward-link:hover {
  text-decoration: none !important;
  color: inherit !important;
}

.reward-link:focus {
  text-decoration: none !important;
  color: inherit !important;
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.reward-link:visited {
  color: inherit !important;
}

/* Custom card system - Override Bootstrap hover effects for list-group inside custom-card */
.custom-card .list-group {
  border-radius: 0.375rem;
  overflow: hidden;
}

/* Override Bootstrap hover effects for list-group-item inside custom-card */
.custom-card .list-group-item:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.custom-card .list-group-item:focus,
.custom-card .list-group-item:active {
  background-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  outline: none !important;
}

/* Prevent any focus/active states from changing border colors */
.custom-card .list-group-item:focus-visible {
  outline: none !important;
}

/* Override any potential Bootstrap button-like styling that might cause black borders */
.custom-card .list-group-item.reward-link:focus,
.custom-card .list-group-item.reward-link:active,
.custom-card .list-group-item.reward-link:hover {
  outline: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Custom reward rarity styling for list-group-item */
.custom-card .list-group-item.reward-rarity-common {
  background-color: #f8f9fa;
  border-color: #dee2e6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-card .list-group-item.reward-rarity-uncommon {
  background: linear-gradient(
    135deg,
    rgba(40, 167, 69, 0.05) 0%,
    rgba(40, 167, 69, 0.02) 100%
  );
  border-color: rgba(40, 167, 69, 0.2);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.1);
}

.custom-card .list-group-item.reward-rarity-rare {
  background: linear-gradient(
    135deg,
    rgba(23, 162, 184, 0.08) 0%,
    rgba(23, 162, 184, 0.04) 100%
  );
  border-color: rgba(23, 162, 184, 0.3);
  box-shadow: 0 3px 6px rgba(23, 162, 184, 0.2),
    inset 0 1px 3px rgba(23, 162, 184, 0.1);
}

.custom-card .list-group-item.reward-rarity-epic {
  background: linear-gradient(
    135deg,
    rgba(111, 66, 193, 0.1) 0%,
    rgba(111, 66, 193, 0.05) 100%
  );
  border-color: rgba(111, 66, 193, 0.3);
  box-shadow: 0 4px 8px rgba(111, 66, 193, 0.2),
    inset 0 2px 4px rgba(111, 66, 193, 0.1);
}

.custom-card .list-group-item.reward-rarity-legendary {
  background: linear-gradient(
    135deg,
    rgba(255, 193, 7, 0.12) 0%,
    rgba(255, 215, 0, 0.08) 100%
  );
  border-color: rgba(255, 193, 7, 0.4);
  box-shadow: 0 6px 12px rgba(255, 193, 7, 0.3),
    inset 0 3px 6px rgba(255, 193, 7, 0.2);
}

/* Custom card system - No Bootstrap hover effects */
.custom-card {
  border: none;
  border-radius: 0.375rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: none !important;
  animation: none !important;
  transform: none !important;
}

.custom-card:hover {
  transform: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.custom-card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-top-left-radius: calc(0.375rem - 1px);
  border-top-right-radius: calc(0.375rem - 1px);
}

.custom-card-body {
  flex: 1 1 auto;
  padding: 1rem 1.25rem;
}

.custom-card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  border-bottom-right-radius: calc(0.375rem - 1px);
  border-bottom-left-radius: calc(0.375rem - 1px);
}

.custom-card.h-100 {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.custom-card-body {
  flex: 1 1 auto;
  padding: 1rem 1.25rem;
}

.custom-card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  border-bottom-right-radius: calc(0.375rem - 1px);
  border-bottom-left-radius: calc(0.375rem - 1px);
  margin-top: auto;
}

/* Custom tooltip styling for Bootstrap */
.tooltip-inner {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  color: #000000 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  border-radius: 8px !important;
  padding: 0 !important;
  max-width: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  opacity: 1 !important;
}

.tooltip {
  pointer-events: auto !important;
  opacity: 1 !important;
}

.tooltip.show {
  opacity: 1 !important;
}

.tooltip .tooltip-inner {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  opacity: 1 !important;
}

/* Additional overrides for tooltip transparency */
.tooltip[data-bs-popper] {
  opacity: 1 !important;
}

.tooltip[data-bs-popper] .tooltip-inner {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  opacity: 1 !important;
}

/* Force solid background on all tooltip states */
.tooltip.fade.show .tooltip-inner,
.tooltip.show .tooltip-inner,
.tooltip .tooltip-inner {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  opacity: 1 !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #dee2e6 !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #dee2e6 !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #dee2e6 !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #dee2e6 !important;
}

/* Mobile-friendly tooltip behavior */
@media (max-width: 768px) {
  .reward-tooltip-trigger {
    cursor: pointer;
  }

  .skill-tooltip-card {
    min-width: 260px;
    max-width: 300px;
    font-size: 12px;
  }

  .skill-tooltip-title {
    font-size: 16px;
  }

  .skill-tooltip-button {
    font-size: 12px;
    padding: 6px 10px;
  }
}