/* =====================
   Hero Grid View
   Card-based layout for heroes
   ===================== */

/* Hero cards container */
.hero-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 0;
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 10;
}

/* Individual hero card */
.hero-card {
  background: linear-gradient(135deg, rgba(20, 35, 55, 0.95) 0%, rgba(15, 25, 45, 0.98) 100%);
  border: 2px solid rgba(0, 217, 255, 0.3);
  border-radius: 8px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: all 0.3s ease;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(0, 217, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: visible;
}

/* Placeholder hero card */
.hero-card-placeholder {
  background: linear-gradient(135deg, rgba(20, 35, 55, 0.3) 0%, rgba(15, 25, 45, 0.4) 100%);
  border: 2px dashed rgba(0, 217, 255, 0.15);
  opacity: 0.4;
  pointer-events: none;
}

.hero-card-placeholder:hover {
  transform: none;
  border-color: rgba(0, 217, 255, 0.15);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(0, 217, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-card-placeholder-portrait {
  background: rgba(10, 20, 35, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(0, 217, 255, 0.15);
}

.hero-card-placeholder-skills {
  opacity: 0.3;
}

.placeholder-ability {
  width: 36px;
  height: 36px;
  border: 2px dashed rgba(0, 217, 255, 0.15);
  border-radius: 4px;
  background: rgba(10, 20, 35, 0.3);
}

.hero-card-placeholder-level {
  opacity: 0.3;
  background: rgba(10, 20, 35, 0.3);
  border: 1px dashed rgba(0, 217, 255, 0.1);
}

.hero-card-placeholder-name {
  height: 18px;
  background: rgba(10, 20, 35, 0.2);
  border-radius: 3px;
  border: 1px dashed rgba(0, 217, 255, 0.1);
}

.hero-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 217, 255, 0.6);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(0, 217, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  z-index: 100;
}

/* Hero portrait */
.hero-card-portrait {
  width: 100%;
  max-width: 85px;
  aspect-ratio: 1;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  border: 2px solid rgba(0, 217, 255, 0.4);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  order: 1;
}

.hero-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.hero-card:hover .hero-card-image {
  transform: scale(1.05);
}

/* Hero skills section */
.hero-card-skills {
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 3px 3px;
  width: 100%;
  max-width: 160px;
  padding: 2px 0 1px;
  justify-content: center;
  overflow: visible;
  order: 4;
}

.ability-icon-stack-grid {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: help;
  transition: transform 0.2s ease, box-shadow 0.16s;
  pointer-events: auto;
}

.ability-icon-stack-grid:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 3px 12px rgba(0, 217, 255, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 999998;
  cursor: default;
  position: relative;
}

.ability-icon-stack-grid::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 5px 9px;
  border-radius: 4px;
  border: 1px solid rgba(0, 217, 255, 0.5);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 999999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  filter: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.ability-icon-stack-grid:hover::after {
  opacity: 1;
}

/* Greyed out style for unchosen abilities */
/* Removed filter/opacity from container so tooltip isn't affected */

.ability-icon-stack-grid.greyed-out .skill-icon-grid {
  opacity: 0.35;
  filter: grayscale(0.8);
  border-color: rgba(100, 100, 100, 0.3);
}

.ability-icon-stack-grid.greyed-out .skill-bars-under {
  opacity: 0.35;
  filter: grayscale(0.8);
}

.ability-icon-stack-grid.greyed-out:hover .skill-icon-grid {
  opacity: 0.65;
  transform: translateY(-1px) scale(1.02);
  filter: grayscale(0.6);
}

.ability-icon-stack-grid.greyed-out .skill-bars-under::before,
.ability-icon-stack-grid.greyed-out .skill-bars-under::after,
.ability-icon-stack-grid.greyed-out .skill-bars-under span {
  background: rgba(80, 80, 80, 0.3);
}

/* Ensure tooltip is always clear and readable even on greyed out abilities */
/* No filter needed here anymore as parent isn't filtered */

.ability-icon-stack-grid.greyed-out:hover::after {
  opacity: 1;
}

.skill-icon-grid {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1.5px solid rgba(0, 217, 255, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
  object-fit: cover;
}

.ability-icon-stack-grid:hover .skill-icon-grid {
  filter: brightness(1.18) drop-shadow(0 0 8px rgba(0, 217, 255, 1));
  border-color: rgba(0, 217, 255, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 217, 255, 0.4);
}

/* Skill bars under hover brightness */
.ability-icon-stack-grid:hover .skill-bars-under {
  filter: brightness(1.18);
}

/* Skill bars under icons in grid view */
.hero-card-skills .skill-bars-under {
  display: flex;
  gap: 1.5px;
  margin-top: 3px;
  width: 36px;
  justify-content: flex-start;
}

.hero-card-skills .skill-bars-under::before,
.hero-card-skills .skill-bars-under::after,
.hero-card-skills .skill-bars-under span {
  width: 11px;
  height: 4px;
}

/* Hero level bar */
.hero-card-level {
  width: 100%;
  max-width: 160px;
  height: 36px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Match table view sizing (hero-name-bar) */
  padding: 2px 9px;
  background: rgba(var(--race-rgb, 30,35,50), 0.13);
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--race-color, #00eaff);
  border-left: 3px solid rgba(var(--race-rgb, 0, 217, 255), 1.0);
  box-shadow: 0 1px 4px 0 rgba(var(--race-rgb,255,255,255),0.08);
  font-size: 0.92em;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  color: #fff;
  order: 3;
}

/* Base hero level fill - overridden by race-specific styles below */
.hero-card-level .hero-level-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: 0%;
  height: 100%;
  clip-path: inset(0 0 0 0 round 8px 0 0 8px);
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.7s cubic-bezier(.4,1.6,.6,1), background 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.12), 0 2px 18px 0 rgba(0,0,0,0.10) inset;
  mix-blend-mode: lighten;
}

.hero-card-level-text {
  position: relative;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.88em;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  min-width: 44px;
  background: linear-gradient(90deg, rgba(var(--race-rgb,255,255,255),0.18) 0%, rgba(var(--race-rgb,255,255,255),0.32) 100%);
  border-radius: 4px;
  border: 1.5px solid var(--race-color, #00eaff);
  box-shadow: 0 1px 6px 0 var(--race-color, #00eaff22);
  text-shadow: none;
  z-index: 1;
}

/* Hero name */
.hero-card-name {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.5px;
  width: 100%;
  max-width: 130px;
  order: 2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

/* Hero death counter */
.hero-card-deaths {
  position: relative;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(220, 60, 60, 0.95);
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.5px;
  width: 100%;
  max-width: 130px;
  order: 3;
  padding-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: help;
  transition: transform 0.2s ease;
}

.hero-card-deaths:hover {
  transform: translateY(-2px);
}

.hero-card-deaths::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 5px 9px;
  border-radius: 4px;
  border: 1px solid rgba(220, 60, 60, 0.5);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 999999;
  filter: none;
  backdrop-filter: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.hero-card-deaths::before {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0, 0, 0, 0.95);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1000000;
  filter: drop-shadow(0 -1px 1px rgba(220, 60, 60, 0.3));
}

.hero-card-deaths:hover::before,
.hero-card-deaths:hover::after {
  opacity: 1;
}

/* Race-specific hero card styling */
.hero-card.human {
  --race-color: #ffd700;
  --race-rgb: 255, 215, 0;
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(255, 215, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-card.human:hover {
  border-color: rgba(255, 215, 0, 0.7);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(255, 215, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-card.human .hero-card-portrait {
  border-color: rgba(255, 215, 0, 0.5);
}

.hero-card.human .hero-card-level {
  border-color: rgba(255, 215, 0, 0.4);
}

/* Human: Arcane shimmer */
.hero-card.human .hero-card-level .hero-level-fill {
  background: linear-gradient(120deg, #ffe066 0%, #ffd700 60%, #bfa100 100%);
  box-shadow: 0 2px 18px 0 #ffd700cc, 0 0 16px 2px #bfa10099 inset, 0 0 0 2px #6a5a0a99, 0 0 8px 2px #ffe066cc;
  border: 1.5px solid #6a5a0a;
  filter: drop-shadow(0 0 6px #6a5a0a) drop-shadow(0 0 2px #000a);
  mix-blend-mode: screen;
}
.hero-card.human .hero-card-level .hero-level-fill::before {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 200%; height: 100%;
  background: url('data:image/svg+xml;utf8,<svg width="200" height="24" viewBox="0 0 200 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.5"><ellipse cx="30" cy="12" rx="10" ry="6" fill="%23fffbe6"/><ellipse cx="80" cy="10" rx="7" ry="4" fill="%23ffe066"/><ellipse cx="150" cy="16" rx="8" ry="5" fill="%23ffd700"/></g></svg>');
  background-size: 120px 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: hero-arcane-scroll 3.2s linear infinite;
  opacity: 0.7;
  pointer-events: none;
  filter: blur(1px) drop-shadow(0 0 8px #ffe066cc);
}
.hero-card.human .hero-card-level .hero-level-fill::after {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 100%);
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
  animation: hero-arcane-shimmer 2.2s linear infinite;
}

.hero-card.human .skill-icon-grid {
  border-color: rgba(255, 215, 0, 0.3);
}

.hero-card.human .ability-icon-stack-grid:hover .skill-icon-grid {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 8px rgba(255, 215, 0, 0.4);
}

.hero-card.orc {
  --race-color: #f44336;
  --race-rgb: 244, 67, 54;
  border-color: rgba(244, 67, 54, 0.4);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(244, 67, 54, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-card.orc:hover {
  border-color: rgba(244, 67, 54, 0.7);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(244, 67, 54, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-card.orc .hero-card-portrait {
  border-color: rgba(244, 67, 54, 0.5);
}

.hero-card.orc .hero-card-level {
  border-color: rgba(244, 67, 54, 0.4);
}

/* Orc: Burning fire/inferno */
.hero-card.orc .hero-card-level .hero-level-fill {
  background: linear-gradient(120deg, #ffb347 0%, #ff512f 60%, #7c1d00 100%);
  box-shadow: 0 2px 18px 0 #ffb34799, 0 0 16px 2px #ff512f77 inset, 0 0 8px 2px #ff512fcc;
  filter: drop-shadow(0 0 6px #ff512f) drop-shadow(0 0 2px #7c1d00cc);
  mix-blend-mode: lighten;
}
.hero-card.orc .hero-card-level .hero-level-fill::before {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 200%; height: 100%;
  background: url('data:image/svg+xml;utf8,<svg width="200" height="24" viewBox="0 0 200 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.55"><path d="M10 15 Q 12 9 16 15 T 22 15 T 28 15 T 34 15 T 40 15 T 46 15 T 52 15 T 58 15 T 64 15 T 70 15 T 76 15 T 82 15 T 88 15 T 94 15 T 100 15 T 106 15 T 112 15 T 118 15 T 124 15 T 130 15 T 136 15 T 142 15 T 148 15 T 154 15 T 160 15 T 166 15 T 172 15 T 178 15 T 184 15 T 190 15 T 196 15 Q 198 9 200 15" stroke="%23ffecb3" stroke-width="2" fill="none"/><path d="M0 15 Q 10 7 20 15 T 40 15 T 60 15 T 80 15 T 100 15 T 120 15 T 140 15 T 160 15 T 180 15 T 200 15" stroke="%23ff9800" stroke-width="3" fill="none"/><path d="M0 15 Q 20 3 40 15 T 80 15 T 120 15 T 160 15 T 200 15" stroke="%23ff512f" stroke-width="4" fill="none"/></g></svg>');
  background-size: 120px 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: hero-fire-scroll 3.8s linear infinite;
  opacity: 0.85;
  pointer-events: none;
  filter: blur(0.5px) drop-shadow(0 0 8px #ffb347cc) drop-shadow(0 0 2px #ff512fcc);
}
.hero-card.orc .hero-card-level .hero-level-fill::after {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);
  mix-blend-mode: screen;
  opacity: 0.45;
  pointer-events: none;
  animation: hero-fire-flicker 2.2s linear infinite;
}

.hero-card.orc .skill-icon-grid {
  border-color: rgba(244, 67, 54, 0.3);
}

.hero-card.orc .ability-icon-stack-grid:hover .skill-icon-grid {
  border-color: rgba(244, 67, 54, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 8px rgba(244, 67, 54, 0.4);
}

.hero-card.undead {
  --race-color: #607d8b;
  --race-rgb: 96, 125, 139;
  border-color: rgba(96, 125, 139, 0.4);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(96, 125, 139, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-card.undead:hover {
  border-color: rgba(96, 125, 139, 0.7);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(96, 125, 139, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-card.undead .hero-card-portrait {
  border-color: rgba(96, 125, 139, 0.5);
}

.hero-card.undead .hero-card-level {
  border-color: rgba(96, 125, 139, 0.4);
}

/* Undead: Ghostly souls/mist */
.hero-card.undead .hero-card-level .hero-level-fill {
  background: linear-gradient(120deg, #b0bec5 0%, #607d8b 60%, #00ffe7 100%);
  box-shadow: 0 2px 18px 0 #607d8b99, 0 0 16px 2px #00ffe799 inset, 0 0 8px 2px #00ffe7cc;
  filter: drop-shadow(0 0 8px #607d8b) drop-shadow(0 0 2px #00ffe7cc);
  mix-blend-mode: lighten;
}
.hero-card.undead .hero-card-level .hero-level-fill::before {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 200%; height: 100%;
  background: url('data:image/svg+xml;utf8,<svg width="200" height="24" viewBox="0 0 200 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.32"><ellipse cx="20" cy="12" rx="10" ry="6" fill="%23607d8b"/><ellipse cx="60" cy="10" rx="7" ry="4" fill="%2300ffe7"/><ellipse cx="110" cy="16" rx="8" ry="5" fill="%23b0bec5"/><ellipse cx="160" cy="8" rx="6" ry="3.5" fill="%2300ffe7"/></g></svg>');
  background-size: 120px 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: hero-soul-scroll 4.2s linear infinite;
  opacity: 0.7;
  pointer-events: none;
  filter: blur(1.5px) drop-shadow(0 0 8px #607d8bcc) drop-shadow(0 0 2px #00ffe7cc);
}
.hero-card.undead .hero-card-level .hero-level-fill::after {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 100%);
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
  animation: hero-soul-shimmer 2.8s linear infinite;
}

.hero-card.undead .skill-icon-grid {
  border-color: rgba(96, 125, 139, 0.3);
}

.hero-card.undead .ability-icon-stack-grid:hover .skill-icon-grid {
  border-color: rgba(96, 125, 139, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 8px rgba(96, 125, 139, 0.4);
}

.hero-card.nightelf {
  --race-color: #9c27b0;
  --race-rgb: 156, 39, 176;
  border-color: rgba(156, 39, 176, 0.4);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(156, 39, 176, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-card.nightelf:hover {
  border-color: rgba(156, 39, 176, 0.7);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(156, 39, 176, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-card.nightelf .hero-card-portrait {
  border-color: rgba(156, 39, 176, 0.5);
}

.hero-card.nightelf .hero-card-level {
  border-color: rgba(156, 39, 176, 0.4);
}

/* Night Elf: Ethereal wisps */
.hero-card.nightelf .hero-card-level .hero-level-fill {
  background: linear-gradient(120deg, #7c4dff 0%, #4e2fae 60%, #00e6d8 100%);
  box-shadow: 0 2px 18px 0 #7c4dff99, 0 0 16px 2px #00e6d899 inset, 0 0 8px 2px #00e6d8cc;
  filter: drop-shadow(0 0 8px #7c4dff) drop-shadow(0 0 2px #00e6d8cc);
  mix-blend-mode: lighten;
}
.hero-card.nightelf .hero-card-level .hero-level-fill::before {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 200%; height: 100%;
  background: url('data:image/svg+xml;utf8,<svg width="200" height="24" viewBox="0 0 200 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.32"><ellipse cx="30" cy="12" rx="10" ry="6" fill="%237c4dff"/><ellipse cx="100" cy="10" rx="7" ry="4" fill="%234e2fae"/><ellipse cx="170" cy="16" rx="8" ry="5" fill="%2300e6d8"/></g></svg>');
  background-size: 120px 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: hero-wisp-scroll 4.2s linear infinite;
  opacity: 0.7;
  pointer-events: none;
  filter: blur(1.5px) drop-shadow(0 0 8px #7c4dffcc) drop-shadow(0 0 2px #00e6d8cc);
}
.hero-card.nightelf .hero-card-level .hero-level-fill::after {
  content: '';
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%);
  mix-blend-mode: screen;
  opacity: 0.45;
  pointer-events: none;
  animation: hero-wisp-shimmer 2.8s linear infinite;
}

.hero-card.nightelf .skill-icon-grid {
  border-color: rgba(156, 39, 176, 0.3);
}

.hero-card.nightelf .ability-icon-stack-grid:hover .skill-icon-grid {
  border-color: rgba(156, 39, 176, 0.6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 8px rgba(156, 39, 176, 0.4);
}

/* Light theme adjustments */
body.light-theme .hero-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 250, 255, 0.98) 100%);
  border-color: rgba(0, 150, 200, 0.3);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 15px rgba(0, 150, 200, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.light-theme .hero-card:hover {
  border-color: rgba(0, 150, 200, 0.5);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 150, 200, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.light-theme .hero-card-portrait {
  border-color: rgba(0, 150, 200, 0.4);
}

body.light-theme .hero-card-level {
  background: rgba(var(--race-rgb, 0, 150, 200), 0.12);
  border-color: rgba(var(--race-rgb, 0, 150, 200), 0.22);
  color: #1a202c;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.06);
}

body.light-theme .hero-card-level .hero-level-fill {
  background: linear-gradient(90deg, 
    rgba(0, 150, 200, 0.6) 0%, 
    rgba(0, 150, 200, 0.8) 50%,
    rgba(0, 150, 200, 0.6) 100%);
  border-right-color: rgba(0, 150, 200, 0.6);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08), 0 2px 12px 0 rgba(0, 150, 200, 0.3) inset;
  mix-blend-mode: normal;
}

body.light-theme .hero-card-level-text {
  /* Default light theme label (overridden per race below) */
  color: #1a202c;
  text-shadow: none;
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}

/* Light theme: match table view's race-colored level badge style */
body.light-theme .hero-card.human .hero-card-level-text,
body.light-theme .hero-card.h .hero-card-level-text {
  color: #ffffff;
  background: rgba(184, 134, 11, 0.90);
  border: 1px solid rgba(184, 134, 11, 1.0);
  box-shadow: 0 4px 24px 0 #b8860b55, 0 0 0 2.5px #fff2, 0 0 16px 4px #b8860b33 inset, 0 1.5px 8px 0 #000a;
  text-shadow: none;
}

body.light-theme .hero-card.orc .hero-card-level-text,
body.light-theme .hero-card.o .hero-card-level-text {
  color: #ffffff;
  background: rgba(211, 47, 47, 0.90);
  border: 1px solid rgba(211, 47, 47, 1.0);
  box-shadow: 0 4px 24px 0 #d32f2f55, 0 0 0 2.5px #fff2, 0 0 16px 4px #d32f2f33 inset, 0 1.5px 8px 0 #000a;
  text-shadow: none;
}

body.light-theme .hero-card.nightelf .hero-card-level-text,
body.light-theme .hero-card.elf .hero-card-level-text,
body.light-theme .hero-card.n .hero-card-level-text {
  color: #ffffff;
  background: rgba(123, 31, 162, 0.90);
  border: 1px solid rgba(123, 31, 162, 1.0);
  box-shadow: 0 4px 24px 0 #7b1fa255, 0 0 0 2.5px #fff2, 0 0 16px 4px #7b1fa233 inset, 0 1.5px 8px 0 #000a;
  text-shadow: none;
}

body.light-theme .hero-card.undead .hero-card-level-text,
body.light-theme .hero-card.u .hero-card-level-text {
  color: #ffffff;
  background: rgba(69, 90, 100, 0.90);
  border: 1px solid rgba(69, 90, 100, 1.0);
  box-shadow: 0 4px 24px 0 #455a6455, 0 0 0 2.5px #fff2, 0 0 16px 4px #455a6444 inset, 0 1.5px 8px 0 #000a;
  text-shadow: none;
}

/* Light theme: align race variables with table view */
body.light-theme .hero-card.human,
body.light-theme .hero-card.h {
  --race-color: #b8860b;
  --race-rgb: 184, 134, 11;
}
body.light-theme .hero-card.orc,
body.light-theme .hero-card.o {
  --race-color: #d32f2f;
  --race-rgb: 211, 47, 47;
}
body.light-theme .hero-card.nightelf,
body.light-theme .hero-card.n,
body.light-theme .hero-card.elf {
  --race-color: #7b1fa2;
  --race-rgb: 123, 31, 162;
}
body.light-theme .hero-card.undead,
body.light-theme .hero-card.u {
  --race-color: #455a64;
  --race-rgb: 69, 90, 100;
}

body.light-theme .hero-card-name {
  color: rgba(20, 40, 60, 0.95);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

body.light-theme .hero-card .skill-icon-grid {
  border-color: rgba(var(--race-rgb, 0, 150, 200), 0.30);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.light-theme .hero-card .ability-icon-stack-grid:hover .skill-icon-grid {
  border-color: rgba(var(--race-rgb, 0, 150, 200), 0.55);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), 0 0 6px rgba(var(--race-rgb, 0, 150, 200), 0.24);
}

/* Light theme race-specific */
body.light-theme .hero-card.human {
  background: linear-gradient(135deg, rgba(255, 237, 185, 0.96) 0%, rgba(255, 245, 212, 0.99) 55%, rgba(255, 250, 228, 0.98) 100%);
  border-color: rgba(200, 160, 0, 0.55);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 18px rgba(200, 160, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.light-theme .hero-card.human:hover {
  border-color: rgba(200, 160, 0, 0.6);
}

body.light-theme .hero-card.human .hero-card-level .hero-level-fill {
  background: linear-gradient(90deg, 
    rgba(200, 160, 0, 0.6) 0%, 
    rgba(200, 160, 0, 0.8) 50%,
    rgba(200, 160, 0, 0.6) 100%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08), 0 2px 12px 0 rgba(200, 160, 0, 0.3) inset;
  mix-blend-mode: normal;
}

body.light-theme .hero-card.orc {
  background: linear-gradient(135deg, rgba(255, 220, 210, 0.96) 0%, rgba(255, 237, 232, 0.99) 55%, rgba(255, 246, 244, 0.98) 100%);
  border-color: rgba(200, 50, 40, 0.55);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 18px rgba(200, 50, 40, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.light-theme .hero-card.orc:hover {
  border-color: rgba(200, 50, 40, 0.6);
}

body.light-theme .hero-card.orc .hero-card-level .hero-level-fill {
  background: linear-gradient(90deg, 
    rgba(200, 50, 40, 0.6) 0%, 
    rgba(200, 50, 40, 0.8) 50%,
    rgba(200, 50, 40, 0.6) 100%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08), 0 2px 12px 0 rgba(200, 50, 40, 0.3) inset;
  mix-blend-mode: normal;
}

body.light-theme .hero-card.undead {
  background: linear-gradient(135deg, rgba(178, 223, 230, 0.96) 0%, rgba(200, 235, 240, 0.99) 55%, rgba(220, 245, 248, 0.98) 100%);
  border-color: rgba(0, 120, 130, 0.55);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 18px rgba(0, 130, 140, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.light-theme .hero-card.undead:hover {
  border-color: rgba(0, 120, 130, 0.7);
}

body.light-theme .hero-card.undead .hero-card-level .hero-level-fill {
  background: linear-gradient(90deg, 
    rgba(0, 130, 140, 0.6) 0%, 
    rgba(0, 130, 140, 0.8) 50%,
    rgba(0, 130, 140, 0.6) 100%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08), 0 2px 12px 0 rgba(0, 130, 140, 0.3) inset;
  mix-blend-mode: normal;
}

body.light-theme .hero-card.nightelf {
  background: linear-gradient(135deg, rgba(235, 214, 246, 0.96) 0%, rgba(245, 232, 252, 0.99) 55%, rgba(252, 246, 255, 0.98) 100%);
  border-color: rgba(130, 30, 150, 0.55);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 18px rgba(130, 30, 150, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.light-theme .hero-card.nightelf:hover {
  border-color: rgba(130, 30, 150, 0.6);
}

body.light-theme .hero-card.nightelf .hero-card-level .hero-level-fill {
  background: linear-gradient(90deg, 
    rgba(130, 60, 150, 0.6) 0%, 
    rgba(130, 60, 150, 0.8) 50%,
    rgba(130, 60, 150, 0.6) 100%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08), 0 2px 12px 0 rgba(130, 60, 150, 0.3) inset;
  mix-blend-mode: normal;
}

/* Animations for race-specific level bar effects */
@keyframes hero-arcane-scroll {
  0% { background-position-x: 0; }
  100% { background-position-x: -120px; }
}
@keyframes hero-arcane-shimmer {
  0% { opacity: 0.5; }
  50% { opacity: 0.85; }
  100% { opacity: 0.5; }
}
@keyframes hero-fire-scroll {
  0% { background-position-x: 0; }
  100% { background-position-x: -120px; }
}
@keyframes hero-fire-flicker {
  0%, 100% { opacity: 0.45; }
  10% { opacity: 0.52; }
  20% { opacity: 0.55; }
  30% { opacity: 0.50; }
  40% { opacity: 0.48; }
  50% { opacity: 0.53; }
  60% { opacity: 0.47; }
  70% { opacity: 0.51; }
  80% { opacity: 0.46; }
  90% { opacity: 0.54; }
}
@keyframes hero-wisp-scroll {
  0% { background-position-x: 0; }
  100% { background-position-x: -120px; }
}
@keyframes hero-wisp-shimmer {
  0% { opacity: 0.5; }
  50% { opacity: 0.85; }
  100% { opacity: 0.5; }
}
@keyframes hero-soul-scroll {
  0% { background-position-x: 0; }
  100% { background-position-x: -120px; }
}
@keyframes hero-soul-shimmer {
  0% { opacity: 0.5; }
  50% { opacity: 0.85; }
  100% { opacity: 0.5; }
}

/* Winner/trophy icon visibility tweaks
   - Add a compact badge style so the emoji/trophy is readable
   - Provide a stronger visual treatment on the light theme */
.winner-icon {
  font-size: 1.03em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 8px;
  transition: all 0.18s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.22));
  background: rgba(0,0,0,0.14);
  box-shadow: 0 2px 6px rgba(0,0,0,0.22);
  vertical-align: middle;
}

/* Light theme: ensure trophy is clear against pale backgrounds */
body.light-theme .winner-icon {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0,0,0,0.06);
  text-shadow: 0 1px 0 #ffffff, 0 1px 6px rgba(0,0,0,0.20);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
  box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 0 6px rgba(255,215,0,0.04) inset;
}

/* Dark theme: subtle golden glow to make trophy pop */
body:not(.light-theme) .winner-icon {
  background: rgba(0,0,0,0.18);
  box-shadow: 0 3px 10px rgba(0,0,0,0.45), 0 0 8px rgba(255,215,0,0.12);
}