/* CHARACTER CARDS AND RARITY SYSTEM */

/* MOBILE CHARACTER CARDS CONTAINER */
.character-cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
  margin-bottom: 25px;
  align-items: center;
}

/* MOBILE CHARACTER CARDS */
.character-card {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 25px;
  padding: 25px;
  width: 100%;
  max-width: 350px;
  border: 3px solid;
  box-shadow: 0 0 20px rgba(0, 226, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  /* Mobile touch optimization */
  touch-action: manipulation;
}

/* RARITY-BASED CHARACTER CARD COLORS */

/* TIER 1 - COMMON (Gray-White with blue accent) */
.character-card.common {
  border-color: rgba(200, 200, 200, 0.6);
  box-shadow: 0 0 20px rgba(200, 200, 200, 0.3);
  background: rgba(0, 0, 0, 0.3);
}

/* TIER 2 - UNCOMMON (Green) */
.character-card.uncommon {
  border-color: rgba(76, 175, 80, 0.6);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
  background: rgba(0, 0, 0, 0.35);
}

/* TIER 3 - RARE (Blue) */
.character-card.rare {
  border-color: rgba(33, 150, 243, 0.6);
  box-shadow: 0 0 20px rgba(33, 150, 243, 0.4);
  background: rgba(0, 0, 0, 0.4);
}

/* TIER 4 - EPIC (Purple) */
.character-card.epic {
  border-color: rgba(156, 39, 176, 0.6);
  box-shadow: 0 0 20px rgba(156, 39, 176, 0.4);
  background: rgba(0, 0, 0, 0.45);
}

/* TIER 5 - MYTHIC (Crimson Red) */
.character-card.mythic {
  border-color: rgba(220, 20, 60, 0.7);
  box-shadow: 0 0 22px rgba(220, 20, 60, 0.5), 0 0 35px rgba(220, 20, 60, 0.3);
  background: rgba(0, 0, 0, 0.48);
  animation: mythicPulse 2.8s ease-in-out infinite;
}

/* TIER 6 - LEGENDARY (Orange-Gold) */
.character-card.legendary {
  border-color: rgba(255, 152, 0, 0.8);
  box-shadow: 0 0 25px rgba(255, 152, 0, 0.5), 0 0 40px rgba(255, 193, 7, 0.3);
  background: rgba(0, 0, 0, 0.5);
  animation: legendaryPulse 3s ease-in-out infinite;
}

@keyframes mythicPulse {
  0%, 100% {
    box-shadow: 0 0 22px rgba(220, 20, 60, 0.5), 0 0 35px rgba(220, 20, 60, 0.3);
  }
  50% {
    box-shadow: 0 0 28px rgba(220, 20, 60, 0.7), 0 0 45px rgba(220, 20, 60, 0.5);
  }
}

@keyframes legendaryPulse {
  0%, 100% {
    box-shadow: 0 0 25px rgba(255, 152, 0, 0.5), 0 0 40px rgba(255, 193, 7, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 152, 0, 0.7), 0 0 50px rgba(255, 193, 7, 0.5);
  }
}

/* MOBILE CHARACTER CARD ACTIVE STATE */
.character-card:active {
  transform: translateY(-3px) scale(0.98);
}

/* MOBILE CHARACTER ICON */
.character-icon {
  font-size: 3.5em;
  margin-bottom: 15px;
}

/* MOBILE CHARACTER CARD TITLES */
.character-card h3 {
  margin: 0 0 15px 0;
  font-size: 1.6em;
  font-family: 'Audiowide', cursive;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Character-specific colors (maintain original character colors) */
.character-card.common:nth-child(1) h3 {
  color: #FF8C00;
  text-shadow: 0 0 15px rgba(255, 140, 0, 0.6);
}

.character-card.common:nth-child(2) h3 {
  color: #ff00aa;
  text-shadow: 0 0 15px rgba(255, 0, 170, 0.6);
}

.character-card.uncommon h3 {
  color: #e5edff;
  text-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
}

.character-card.rare h3 {
  color: #e5edff;
  text-shadow: 0 0 15px rgba(33, 150, 243, 0.6);
}

.character-card.epic h3 {
  color: #e5edff;
  text-shadow: 0 0 15px rgba(156, 39, 176, 0.6);
}

.character-card.mythic h3 {
  color: #FFE4E1;
  text-shadow: 0 0 15px rgba(220, 20, 60, 0.8);
}

.character-card.legendary h3 {
  color: #FFD700;
  text-shadow: 0 0 15px rgba(255, 152, 0, 0.8);
}

/* RARITY TAGS */
.rarity-tag {
  font-size: 0.5em;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid;
}

.rarity-tag.common {
  background: rgba(200, 200, 200, 0.2);
  color: #c8c8c8;
  border-color: rgba(200, 200, 200, 0.4);
  text-shadow: none;
}

.rarity-tag.uncommon {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  border-color: rgba(76, 175, 80, 0.4);
  text-shadow: none;
}

.rarity-tag.rare {
  background: rgba(33, 150, 243, 0.2);
  color: #2196f3;
  border-color: rgba(33, 150, 243, 0.4);
  text-shadow: none;
}

.rarity-tag.epic {
  background: rgba(156, 39, 176, 0.2);
  color: #9c27b0;
  border-color: rgba(156, 39, 176, 0.4);
  text-shadow: none;
}

.rarity-tag.mythic {
  background: rgba(220, 20, 60, 0.25);
  color: #dc143c;
  border-color: rgba(220, 20, 60, 0.5);
  text-shadow: 0 0 8px rgba(220, 20, 60, 0.4);
  animation: mythicShimmer 2.5s ease-in-out infinite;
}

.rarity-tag.legendary {
  background: rgba(255, 152, 0, 0.3);
  color: #ff9800;
  border-color: rgba(255, 152, 0, 0.6);
  text-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
  animation: rarityShimmer 2s ease-in-out infinite;
}

@keyframes rarityShimmer {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 152, 0, 0.8);
  }
}

@keyframes mythicShimmer {
  0%, 100% {
    text-shadow: 0 0 8px rgba(220, 20, 60, 0.4);
    border-color: rgba(220, 20, 60, 0.5);
  }
  50% {
    text-shadow: 0 0 12px rgba(220, 20, 60, 0.7);
    border-color: rgba(220, 20, 60, 0.8);
  }
}

/* MOBILE CHARACTER ABILITY DESCRIPTIONS */
.character-ability {
  background: rgba(0, 226, 255, 0.08);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  border: 1px solid rgba(0, 226, 255, 0.2);
}

.character-ability h4 {
  font-size: 1.1em;
  margin: 0 0 8px 0;
  color: #00e2ff;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0, 226, 255, 0.4);
  font-family: 'Audiowide', cursive;
}

.character-ability p {
  font-size: 0.95em;
  margin: 0;
  color: #c8e6ff;
  line-height: 1.5;
  font-weight: 400;
}

/* MOBILE CHARACTER STATS */
.character-stats {
  font-size: 1em;
  color: #e5edff;
  margin-bottom: 20px;
  line-height: 1.5;
}

.character-description p {
  font-size: 0.9em;
  color: #e5edff;
}

/* CHARACTER SVG STYLING */
.character-card:nth-child(1) .character-svg {
  filter: drop-shadow(0 0 12px #19ffb9);
}

.character-card:nth-child(2) .character-svg {
  filter: drop-shadow(0 0 12px #ff00aa);
}

.character-card:nth-child(3) .character-svg {
  filter: drop-shadow(0 0 12px #00CED1);  /* Wizard - Teal/Cyan */
}

.character-card:nth-child(4) .character-svg {
  filter: drop-shadow(0 0 12px #1B5E20);  /* Bandit - Green */
}

.character-card:nth-child(5) .character-svg {
  filter: drop-shadow(0 0 12px #7C3AED);  /* Mage - Purple */
}

.character-card:nth-child(6) .character-svg {
  filter: drop-shadow(0 0 12px #8B0000);  /* Sinreaper - Dark Red */
}

.character-card:nth-child(7) .character-svg {
  filter: drop-shadow(0 0 12px #1E5799);  /* Guardian - Blue */
}

.character-card:nth-child(8) .character-svg {
  filter: drop-shadow(0 0 12px #dc143c);  /* Samurai - Crimson */
}

/* Priest Character Card (15th position) - Gold Theme */
.character-card:nth-child(15) h3 {
  color: #FFD700 !important;
  text-shadow: 0 0 15px rgba(255, 152, 0, 0.8) !important;
}

.character-card:nth-child(15) .character-svg {
  filter: drop-shadow(0 0 12px #FFD700) !important;
}

/* CHARACTER-SPECIFIC COLOR OVERRIDES BY POSITION */
/* Monk (1st position) - Orange */
.character-card:nth-child(1) h3 {
  color: #FF8C00 !important;
  text-shadow: 0 0 15px rgba(255, 140, 0, 0.8) !important;
}

/* Archer (2nd position) - Pink */
.character-card:nth-child(2) h3 {
  color: #ff00aa !important;
  text-shadow: 0 0 15px rgba(255, 0, 170, 0.8) !important;
}

/* Wizard (3rd position) - Cyan */
.character-card:nth-child(3) h3 {
  color: #00CED1 !important;
  text-shadow: 0 0 15px rgba(0, 206, 209, 0.8) !important;
}

/* Bandit (4th position) - Green */
.character-card:nth-child(4) h3 {
  color: #4CAF50 !important;
  text-shadow: 0 0 15px rgba(76, 175, 80, 0.8) !important;
}

/* Mage (5th position) - Purple */
.character-card:nth-child(5) h3 {
  color: #9F7AEA !important;
  text-shadow: 0 0 15px rgba(124, 58, 237, 0.8) !important;
}

/* Sinreaper (6th position) - Grey */
.character-card:nth-child(6) h3 {
  color: #A0A0A0 !important;
  text-shadow: 0 0 15px rgba(128, 128, 128, 0.8) !important;
}

/* Guardian (7th position) - Blue */
.character-card:nth-child(7) h3 {
  color: #3498DB !important;
  text-shadow: 0 0 15px rgba(52, 152, 219, 0.8) !important;
}

/* Samurai (8th position) - Crimson */
.character-card:nth-child(8) h3 {
  color: #DC143C !important;
  text-shadow: 0 0 15px rgba(220, 20, 60, 0.8) !important;
}

/* Druid (9th position) - Forest Green */
.character-card:nth-child(9) h3 {
  color: #32CD32 !important;
  text-shadow: 0 0 15px rgba(50, 205, 50, 0.8) !important;
}

/* Gambler (10th position) - Red */
.character-card:nth-child(10) h3 {
  color: #DC143C !important;
  text-shadow: 0 0 15px rgba(220, 20, 60, 0.8) !important;
}

/* Musician (11th position) - Purple */
.character-card:nth-child(11) h3 {
  color: #E8BFFF !important;
  text-shadow: 0 0 15px rgba(156, 39, 176, 0.8) !important;
}

/* Nerd (12th position) - Yellow */
.character-card:nth-child(12) h3 {
  color: #FFD700 !important;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
}

/* Joker (13th position) - Lime Green */
.character-card:nth-child(13) h3 {
  color: #32CD32 !important;
  text-shadow: 0 0 15px rgba(50, 205, 50, 0.8) !important;
}

/* Barbarian (14th position) - Bright Red */
.character-card:nth-child(14) h3 {
  color: #FF6B6B !important;
  text-shadow: 0 0 15px rgba(220, 20, 60, 0.8) !important;
}

/* Ensure Priest character name is always gold in legendary cards */
.character-card.legendary h3 {
  color: #FFD700 !important;
  text-shadow: 0 0 15px rgba(255, 152, 0, 0.8) !important;
}

/* CHARACTER STATS DISPLAY */
.character-card .character-stats {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 15px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.character-card .stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 1em;
  padding: 2px 0;
}

.character-card .stat-row:last-child {
  margin-bottom: 0;
}

.character-card .stat-name {
  color: #a6f9ff;
  font-weight: 500;
}

.character-card .stat-value {
  color: #e5edff;
  font-weight: bold;
  font-family: 'Audiowide', cursive;
}

/* === UNIVERSAL STAT ROW FIXES === */
/* Apply to ALL character cards (1-15) for consistent display */
.character-card:nth-child(1) .stat-row,
.character-card:nth-child(2) .stat-row,
.character-card:nth-child(3) .stat-row,
.character-card:nth-child(4) .stat-row,
.character-card:nth-child(5) .stat-row,
.character-card:nth-child(6) .stat-row,
.character-card:nth-child(7) .stat-row,
.character-card:nth-child(8) .stat-row,
.character-card:nth-child(9) .stat-row,
.character-card:nth-child(10) .stat-row,
.character-card:nth-child(11) .stat-row,
.character-card:nth-child(12) .stat-row,
.character-card:nth-child(13) .stat-row,
.character-card:nth-child(14) .stat-row,
.character-card:nth-child(15) .stat-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px !important;
  font-size: 0.95em;
  flex-wrap: nowrap;
  width: 100% !important;
  flex-direction: row !important;
}

/* Ensure stat labels and values are properly styled */
.stat-label {
  color: #888;
  font-weight: normal;
  flex: 1;
  text-align: left;
}

.stat-value {
  color: #fff;
  font-weight: bold;
  text-align: right;
  min-width: 50px;
}

/* UNIVERSAL CHARACTER STAT FIXES - Applied to all character cards */
.character-card:nth-child(1) .character-stats,
.character-card:nth-child(2) .character-stats,
.character-card:nth-child(3) .character-stats,
.character-card:nth-child(4) .character-stats,
.character-card:nth-child(5) .character-stats,
.character-card:nth-child(6) .character-stats,
.character-card:nth-child(7) .character-stats,
.character-card:nth-child(8) .character-stats,
.character-card:nth-child(9) .character-stats,
.character-card:nth-child(10) .character-stats,
.character-card:nth-child(11) .character-stats,
.character-card:nth-child(12) .character-stats,
.character-card:nth-child(13) .character-stats,
.character-card:nth-child(14) .character-stats,
.character-card:nth-child(15) .character-stats {
  padding: 12px;
  display: block !important; /* Ensure vertical stacking */
  flex-direction: column !important; /* Force vertical layout if flex is applied */
}

.character-card:nth-child(1) .stat-row,
.character-card:nth-child(2) .stat-row,
.character-card:nth-child(3) .stat-row,
.character-card:nth-child(4) .stat-row,
.character-card:nth-child(5) .stat-row,
.character-card:nth-child(6) .stat-row,
.character-card:nth-child(7) .stat-row,
.character-card:nth-child(8) .stat-row,
.character-card:nth-child(9) .stat-row,
.character-card:nth-child(10) .stat-row,
.character-card:nth-child(11) .stat-row,
.character-card:nth-child(12) .stat-row,
.character-card:nth-child(13) .stat-row,
.character-card:nth-child(14) .stat-row,
.character-card:nth-child(15) .stat-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  gap: 10px; /* Ensure minimum gap between name and value */
  margin-bottom: 6px !important;
  font-size: 0.95em; /* Slightly smaller to fit better */
  flex-wrap: nowrap; /* Prevent wrapping */
  width: 100% !important; /* Take full width */
  flex-direction: row !important; /* Each row should be horizontal internally */
}

.character-card:nth-child(1) .stat-name,
.character-card:nth-child(2) .stat-name,
.character-card:nth-child(3) .stat-name,
.character-card:nth-child(4) .stat-name,
.character-card:nth-child(5) .stat-name,
.character-card:nth-child(6) .stat-name,
.character-card:nth-child(7) .stat-name,
.character-card:nth-child(8) .stat-name,
.character-card:nth-child(9) .stat-name,
.character-card:nth-child(10) .stat-name,
.character-card:nth-child(11) .stat-name,
.character-card:nth-child(12) .stat-name,
.character-card:nth-child(13) .stat-name,
.character-card:nth-child(14) .stat-name,
.character-card:nth-child(15) .stat-name {
  flex: 1 1 auto;
  min-width: 0; /* Allow text to shrink if needed */
  white-space: nowrap; /* Keep stat names on one line */
  overflow: hidden;
  text-overflow: ellipsis; /* Add ellipsis if too long */
  padding-right: 8px;
}

.character-card:nth-child(1) .stat-value,
.character-card:nth-child(2) .stat-value,
.character-card:nth-child(3) .stat-value,
.character-card:nth-child(4) .stat-value,
.character-card:nth-child(5) .stat-value,
.character-card:nth-child(6) .stat-value,
.character-card:nth-child(7) .stat-value,
.character-card:nth-child(8) .stat-value,
.character-card:nth-child(9) .stat-value,
.character-card:nth-child(10) .stat-value,
.character-card:nth-child(11) .stat-value,
.character-card:nth-child(12) .stat-value,
.character-card:nth-child(13) .stat-value,
.character-card:nth-child(14) .stat-value,
.character-card:nth-child(15) .stat-value {
  flex: 0 0 auto; /* Don't allow value to shrink */
  text-align: right;
  min-width: 35px; /* Ensure values have minimum space */
}

/* For very small screens, reduce font size further for all characters */
@media (max-width: 480px) {
  .character-card:nth-child(1) .stat-row,
  .character-card:nth-child(2) .stat-row,
  .character-card:nth-child(3) .stat-row,
  .character-card:nth-child(4) .stat-row,
  .character-card:nth-child(5) .stat-row,
  .character-card:nth-child(6) .stat-row,
  .character-card:nth-child(7) .stat-row,
  .character-card:nth-child(8) .stat-row,
  .character-card:nth-child(9) .stat-row,
  .character-card:nth-child(10) .stat-row,
  .character-card:nth-child(11) .stat-row,
  .character-card:nth-child(12) .stat-row,
  .character-card:nth-child(13) .stat-row,
  .character-card:nth-child(14) .stat-row,
  .character-card:nth-child(15) .stat-row {
    font-size: 0.9em;
    margin-bottom: 5px;
  }
  
  .character-card:nth-child(1) .character-stats,
  .character-card:nth-child(2) .character-stats,
  .character-card:nth-child(3) .character-stats,
  .character-card:nth-child(4) .character-stats,
  .character-card:nth-child(5) .character-stats,
  .character-card:nth-child(6) .character-stats,
  .character-card:nth-child(7) .character-stats,
  .character-card:nth-child(8) .character-stats,
  .character-card:nth-child(9) .character-stats,
  .character-card:nth-child(10) .character-stats,
  .character-card:nth-child(11) .character-stats,
  .character-card:nth-child(12) .character-stats,
  .character-card:nth-child(13) .character-stats,
  .character-card:nth-child(14) .character-stats,
  .character-card:nth-child(15) .character-stats {
    padding: 10px;
  }
}

/* UPGRADE LEVELS DISPLAY */
.upgrade-levels {
  margin-top: 20px;
}

.upgrade-info {
  background: rgba(0, 226, 255, 0.05);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid rgba(0, 226, 255, 0.2);
}

.upgrade-level {
  margin-bottom: 8px;
  font-size: 0.9em;
  color: #c8e6ff;
}

.upgrade-level:last-child {
  margin-bottom: 0;
}

/* CHARACTER SELECTION GRID */
.character-selection {
  width: 100%;
  margin-bottom: 25px;
}

.character-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  justify-content: center;
  padding: 0 10px;
}

.character-select-btn {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 20px 15px;
  border: 3px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 120px;
  position: relative;
  touch-action: manipulation;
  text-align: center;
}

/* CHARACTER SELECTION BUTTON RARITY COLORS */
.character-select-btn.common {
  border-color: rgba(200, 200, 200, 0.6);
  box-shadow: 0 0 15px rgba(200, 200, 200, 0.3);
}

.character-select-btn.uncommon {
  border-color: rgba(76, 175, 80, 0.6);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}

.character-select-btn.rare {
  border-color: rgba(33, 150, 243, 0.6);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
}

.character-select-btn.epic {
  border-color: rgba(156, 39, 176, 0.6);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);
}

.character-select-btn.mythic {
  border-color: rgba(220, 20, 60, 0.7);
  box-shadow: 0 0 22px rgba(220, 20, 60, 0.5), 0 0 35px rgba(220, 20, 60, 0.3);
  background: rgba(0, 0, 0, 0.48);
  animation: mythicPulse 2.8s ease-in-out infinite;
}

.character-select-btn.legendary {
  border-color: rgba(255, 152, 0, 0.8);
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
  animation: legendaryPulse 3s ease-in-out infinite;
}

/* CHARACTER SELECTION BUTTON ELEMENTS */
.character-select-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-select-icon .character-svg-small {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(0, 226, 255, 0.4));
  object-fit: contain;
}

.character-select-name {
  font-family: 'Audiowide', cursive;
  font-size: 1.1em;
  font-weight: 600;
  color: #00e2ff;
  margin-bottom: 5px;
  text-shadow: 0 0 8px rgba(0, 226, 255, 0.4);
  text-align: center;
  line-height: 1.2;
}

.character-select-level {
  font-size: 0.9em;
  color: #a6f9ff;
  font-weight: 500;
}

/* CHARACTER SELECTION BUTTON HOVER EFFECTS */
.character-select-btn:active {
  transform: translateY(-3px) scale(0.98);
}

.character-select-btn.common:active {
  box-shadow: 0 0 25px rgba(200, 200, 200, 0.5);
}

.character-select-btn.uncommon:active {
  box-shadow: 0 0 25px rgba(76, 175, 80, 0.6);
}

.character-select-btn.rare:active {
  box-shadow: 0 0 25px rgba(33, 150, 243, 0.6);
}

.character-select-btn.epic:active {
  transform: scale(0.97);
}

.character-select-btn.mythic:active {
  transform: scale(0.97);
  box-shadow: 0 0 28px rgba(220, 20, 60, 0.7), 0 0 45px rgba(220, 20, 60, 0.5);
}

.character-select-btn.legendary:active {
  transform: scale(0.97);
}

/* CHARACTER DETAILS ANIMATION */
.character-details {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================================
   ONITAMA CARDS SHOWCASE - 3x3 GRID FOR SAMURAI CHARACTER
   =================================================================== */

/* Tactica Cards Showcase Container */
.tactica-cards-showcase {
  margin: 20px 0;
  padding: 20px;
  background: linear-gradient(135deg, 
    rgba(220, 20, 60, 0.08) 0%, 
    rgba(139, 0, 0, 0.15) 50%,
    rgba(220, 20, 60, 0.08) 100%);
  border: 2px solid rgba(220, 20, 60, 0.25);
  border-radius: 15px;
  box-shadow: 
    inset 0 0 20px rgba(220, 20, 60, 0.1),
    0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Showcase Title */
.showcase-title {
  text-align: center;
  color: #DC143C;
  font-family: 'Audiowide', cursive;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 20px 0;
  text-shadow: 0 0 10px rgba(220, 20, 60, 0.6);
  letter-spacing: 1px;
}

/* 3x3 Grid Container */
.tactica-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  max-width: 100%;
  margin: 0 auto;
}

/* Individual Tactica Card Display */
.tactica-card-display {
  background: linear-gradient(135deg, 
    rgba(14, 21, 48, 0.9) 0%, 
    rgba(25, 30, 55, 0.9) 50%,
    rgba(14, 21, 48, 0.9) 100%);
  border: 2px solid rgba(220, 20, 60, 0.3);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  
  /* Hardware acceleration for smooth interactions */
  will-change: transform, box-shadow, border-color;
  backface-visibility: hidden;
  isolation: isolate;
}

/* Card Name Styling */
.tactica-card-display .card-name {
  font-family: 'Audiowide', cursive;
  font-size: 13px;
  font-weight: 600;
  color: #FF6347;
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(255, 99, 71, 0.6);
  letter-spacing: 0.5px;
}

/* Pattern Grid Container */
.card-pattern {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3x3 Pattern Grid */
.pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(220, 20, 60, 0.4);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Individual Pattern Cells */
.pattern-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: bold;
  background: rgba(30, 30, 50, 0.4);
  border: 1px solid rgba(100, 100, 120, 0.3);
  color: transparent;
  transition: all 0.2s ease;
}

/* Center Position (Samurai) */
.pattern-cell.center {
  background: linear-gradient(135deg, #DC143C, #FF6347);
  color: #FFFFFF;
  border-color: rgba(220, 20, 60, 0.8);
  box-shadow: 
    0 0 8px rgba(220, 20, 60, 0.6),
    inset 0 0 5px rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  font-size: 8px;
}

/* Movable Positions */
.pattern-cell.movable {
  background: linear-gradient(135deg, #FF8C00, #FFD700);
  color: #000000;
  border-color: rgba(255, 140, 0, 0.8);
  box-shadow: 
    0 0 6px rgba(255, 140, 0, 0.5),
    inset 0 0 3px rgba(255, 255, 255, 0.3);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  font-size: 8px;
}

/* ===================================================================
   RESPONSIVE DESIGN FOR ONITAMA CARDS GRID
   =================================================================== */

/* Large screens - more spacing */
@media (min-width: 1200px) {
  .tactica-grid {
    gap: 15px;
  }
  
  .tactica-card-display {
    padding: 12px;
  }
  
  .pattern-grid {
    width: 54px;
    height: 54px;
  }
  
  .pattern-cell {
    width: 14px;
    height: 14px;
  }
  
  .showcase-title {
    font-size: 20px;
  }
  
  .tactica-card-display .card-name {
    font-size: 14px;
  }
}

/* Medium screens - standard layout */
@media (min-width: 768px) and (max-width: 1199px) {
  .tactica-grid {
    gap: 10px;
  }
  
  .pattern-grid {
    width: 45px;
    height: 45px;
  }
  
  .pattern-cell {
    width: 11px;
    height: 11px;
  }
}

/* Small screens - compact layout */
@media (max-width: 767px) {
  .tactica-cards-showcase {
    margin: 15px 0;
    padding: 15px;
  }
  
  .tactica-grid {
    gap: 8px;
  }
  
  .tactica-card-display {
    padding: 8px;
  }
  
  .tactica-card-display .card-name {
    font-size: 11px;
    margin-bottom: 6px;
  }
  
  .pattern-grid {
    width: 36px;
    height: 36px;
    padding: 3px;
  }
  
  .pattern-cell {
    width: 8px;
    height: 8px;
    font-size: 7px;
  }
  
  .showcase-title {
    font-size: 16px;
    margin-bottom: 15px;
  }
}

/* Very small screens - ultra-compact */
@media (max-width: 480px) {
  .tactica-cards-showcase {
    margin: 10px 0;
    padding: 12px;
  }
  
  .tactica-grid {
    gap: 6px;
  }
  
  .tactica-card-display {
    padding: 6px;
  }
  
  .tactica-card-display .card-name {
    font-size: 10px;
    margin-bottom: 4px;
  }
  
  .pattern-grid {
    width: 30px;
    height: 30px;
    padding: 2px;
    gap: 1px;
  }
  
  .pattern-cell {
    width: 7px;
    height: 7px;
    font-size: 6px;
  }
  
  .showcase-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

/* ===================================================================
   ANIMATION EFFECTS FOR ONITAMA CARDS
   =================================================================== */

/* Subtle pulse animation for center pieces */
@keyframes centerPulse {
  0%, 100% {
    box-shadow: 
      0 0 8px rgba(220, 20, 60, 0.6),
      inset 0 0 5px rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 
      0 0 12px rgba(220, 20, 60, 0.8),
      inset 0 0 8px rgba(255, 255, 255, 0.3);
  }
}

/* Apply pulse animation to center pieces */
.pattern-cell.center {
  animation: centerPulse 3s ease-in-out infinite;
}

/* Card entrance animation */
@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Stagger the entrance animations */
.tactica-card-display:nth-child(1) { animation: cardEntrance 0.6s ease-out 0.1s both; }
.tactica-card-display:nth-child(2) { animation: cardEntrance 0.6s ease-out 0.2s both; }
.tactica-card-display:nth-child(3) { animation: cardEntrance 0.6s ease-out 0.3s both; }
.tactica-card-display:nth-child(4) { animation: cardEntrance 0.6s ease-out 0.4s both; }
.tactica-card-display:nth-child(5) { animation: cardEntrance 0.6s ease-out 0.5s both; }
.tactica-card-display:nth-child(6) { animation: cardEntrance 0.6s ease-out 0.6s both; }
.tactica-card-display:nth-child(7) { animation: cardEntrance 0.6s ease-out 0.7s both; }
.tactica-card-display:nth-child(8) { animation: cardEntrance 0.6s ease-out 0.8s both; }
.tactica-card-display:nth-child(9) { animation: cardEntrance 0.6s ease-out 0.9s both; }

/* DRUID - Forest green theme for nature summoner */
.character-select-btn[data-character="druid"] {
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.7) 0%, 
    rgba(34, 139, 34, 0.15) 30%, 
    rgba(34, 139, 34, 0.25) 70%, 
    rgba(0, 0, 0, 0.7) 100%);
  border-color: #228B22;
  box-shadow: 0 0 15px rgba(34, 139, 34, 0.4);
}

.character-select-btn[data-character="druid"] .character-select-name {
  color: #228B22;
  text-shadow: 0 0 8px rgba(34, 139, 34, 0.6);
}

.character-select-btn[data-character="druid"] .character-svg-small {
  filter: drop-shadow(0 0 8px #228B22);
}

/* GAMBLER - Cosmic Red Galaxy theme for epic-tier space casino */
.character-select-btn[data-character="gambler"] {
  background: linear-gradient(135deg, #1A0606 0%, #4D0F1A 50%, #330A14 100%);
  border-color: rgba(156, 39, 176, 0.6);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);
}

.character-select-btn[data-character="gambler"] .character-select-name {
  color: #DC143C;
  text-shadow: 0 0 8px rgba(220, 20, 60, 0.8), 0 0 15px rgba(220, 20, 60, 0.6);
}

.character-select-btn[data-character="gambler"] .character-svg-small {
  filter: drop-shadow(0 0 8px #DC143C) drop-shadow(0 0 12px #B71C1C);
}

/* Musician - Cosmic Purple Galaxy theme for mythic-tier performer */
.character-select-btn[data-character="musician"] {
  background: linear-gradient(135deg, #1A0A1A 0%, #4D1A4D 50%, #330A33 100%);
  border-color: rgba(156, 39, 176, 0.6);
  box-shadow: 0 0 15px rgba(156, 39, 176, 0.4), 0 0 25px rgba(156, 39, 176, 0.3);
}

.character-select-btn[data-character="musician"] .character-select-name {
  color: #9C27B0;
  text-shadow: 0 0 8px rgba(156, 39, 176, 0.8), 0 0 15px rgba(156, 39, 176, 0.6);
}

.character-select-btn[data-character="musician"] .character-svg-small {
  filter: drop-shadow(0 0 8px #9C27B0) drop-shadow(0 0 12px #7B1FA2);
}