/* Star Sailors Charakter-Liste – Hintergründe nach Seltenheit für Tier-Karten */

/* Basis-Maße (wie Character-SR/SSR) */
#starsailors-formation-preview .Character-Tier-1,
#starsailors-formation-preview .Character-Tier-2,
#starsailors-formation-preview .Character-Tier-3,
#starsailors-adventurer-list .Character-Tier-1,
#starsailors-adventurer-list .Character-Tier-2,
#starsailors-adventurer-list .Character-Tier-3,
#starsailors-battle-partners-list .Character-Tier-1,
#starsailors-battle-partners-list .Character-Tier-2,
#starsailors-battle-partners-list .Character-Tier-3,
#starsailors-assist-partners-list .Character-Tier-1,
#starsailors-assist-partners-list .Character-Tier-2,
#starsailors-assist-partners-list .Character-Tier-3,
#starsailors-monsters-list .Character-Tier-1,
#starsailors-monsters-list .Character-Tier-2,
#starsailors-monsters-list .Character-Tier-3,
#starsailors-memory-pieces-list .Character-Tier-1,
#starsailors-memory-pieces-list .Character-Tier-2,
#starsailors-memory-pieces-list .Character-Tier-3,
#starsailors-builds-table .Character-Tier-1,
#starsailors-builds-table .Character-Tier-2,
#starsailors-builds-table .Character-Tier-3 {
  width: 140px !important;
  height: 200px !important;
  margin: 0 !important;
  transition: all 0.3s ease;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* Tier 1 = Grau (wie Star Savior N / R) */
#starsailors-formation-preview .Character-Tier-1,
#starsailors-adventurer-list .Character-Tier-1,
#starsailors-battle-partners-list .Character-Tier-1,
#starsailors-assist-partners-list .Character-Tier-1,
#starsailors-monsters-list .Character-Tier-1,
#starsailors-memory-pieces-list .Character-Tier-1,
#starsailors-builds-table .Character-Tier-1 {
  background: linear-gradient(160deg, #2d2d2d 0%, #6b7280 65%);
  border: none;
}

/* Tier 2 = Lila (wie Star Savior SR) */
#starsailors-formation-preview .Character-Tier-2,
#starsailors-adventurer-list .Character-Tier-2,
#starsailors-battle-partners-list .Character-Tier-2,
#starsailors-assist-partners-list .Character-Tier-2,
#starsailors-monsters-list .Character-Tier-2,
#starsailors-memory-pieces-list .Character-Tier-2,
#starsailors-builds-table .Character-Tier-2 {
  background: linear-gradient(160deg, #2d2f4d 0%, #7a5af8 65%);
  border: none;
}

/* Tier 3 = gold (like Star Savior SSR) */
#starsailors-formation-preview .Character-Tier-3,
#starsailors-adventurer-list .Character-Tier-3,
#starsailors-battle-partners-list .Character-Tier-3,
#starsailors-assist-partners-list .Character-Tier-3,
#starsailors-monsters-list .Character-Tier-3,
#starsailors-memory-pieces-list .Character-Tier-3,
#starsailors-builds-table .Character-Tier-3 {
  background: linear-gradient(160deg, #6e4c42 0%, #e0c870 65%);
  border: none;
}

/* character-name-overlay und character-image – wie Character List */
#starsailors-formation-preview .character-name-overlay,
#starsailors-adventurer-list .character-name-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  color: white;
  padding: 20px 4px 6px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 25;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
#starsailors-formation-preview .character-image,
#starsailors-adventurer-list .character-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 10;
  transition: all 0.6s;
  cursor: pointer;
  backface-visibility: hidden;
  perspective: 1000px;
}
#starsailors-formation-preview .character-image:hover,
#starsailors-adventurer-list .character-image:hover {
  transform: scale(1.08);
}

@media (max-width: 768px) {
  #starsailors-formation-preview .Character-Tier-1 .character-name-overlay,
  #starsailors-formation-preview .Character-Tier-2 .character-name-overlay,
  #starsailors-formation-preview .Character-Tier-3 .character-name-overlay,
  #starsailors-adventurer-list .Character-Tier-1 .character-name-overlay,
  #starsailors-adventurer-list .Character-Tier-2 .character-name-overlay,
  #starsailors-adventurer-list .Character-Tier-3 .character-name-overlay {
    font-size: 0.825rem !important;
    padding: 9px 3px 6px !important;
    -webkit-text-stroke: 0.225px rgba(0, 0, 0, 0.6) !important;
  }

  #starsailors-formation-preview .Character-Tier-1,
  #starsailors-formation-preview .Character-Tier-2,
  #starsailors-formation-preview .Character-Tier-3,
  #starsailors-adventurer-list .Character-Tier-1,
  #starsailors-adventurer-list .Character-Tier-2,
  #starsailors-adventurer-list .Character-Tier-3,
  #starsailors-battle-partners-list .Character-Tier-1,
  #starsailors-battle-partners-list .Character-Tier-2,
  #starsailors-battle-partners-list .Character-Tier-3,
  #starsailors-assist-partners-list .Character-Tier-1,
  #starsailors-assist-partners-list .Character-Tier-2,
  #starsailors-assist-partners-list .Character-Tier-3,
  #starsailors-monsters-list .Character-Tier-1,
  #starsailors-monsters-list .Character-Tier-2,
  #starsailors-monsters-list .Character-Tier-3,
  #starsailors-memory-pieces-list .Character-Tier-1,
  #starsailors-memory-pieces-list .Character-Tier-2,
  #starsailors-memory-pieces-list .Character-Tier-3,
  #starsailors-builds-table .Character-Tier-1,
  #starsailors-builds-table .Character-Tier-2,
  #starsailors-builds-table .Character-Tier-3 {
    width: 105px !important;
    height: 150px !important;
  }
}

/* Formation-Vorschau – Star Sailors Einführung */
.formation-preview {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.formation-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}
.formation-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.formation-label {
  font-size: 0.8rem;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.formation-card-link {
  text-decoration: none;
  display: block;
}
.formation-placeholder {
  width: 140px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: linear-gradient(160deg, #2d2d2d 0%, #6b7280 65%);
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.formation-placeholder-monster {
  background: linear-gradient(160deg, #1a2d1a 0%, #2d4a2d 65%);
}
.placeholder-text {
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  text-align: center;
  padding: 8px;
}
@media (max-width: 768px) {
  .formation-placeholder {
    width: 105px;
    height: 150px;
  }
}

/* TBR (To Be Reviewed) – Label und Ausgrauung (grauer) */
#starsailors-battle-partners-list .char-tbr,
#starsailors-assist-partners-list .char-tbr,
#starsailors-formation-preview .char-tbr,
.teams-list-container .char-tbr,
#sstb-team-builder .sstb-char-grid-item.char-tbr {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
#starsailors-battle-partners-list .char-tbr:hover,
#starsailors-assist-partners-list .char-tbr:hover,
#starsailors-formation-preview .char-tbr:hover,
.teams-list-container .char-tbr:hover,
#sstb-team-builder .sstb-char-grid-item.char-tbr:hover {
  opacity: 0.75;
}
#starsailors-battle-partners-list .char-tbr-label,
#starsailors-assist-partners-list .char-tbr-label,
#starsailors-formation-preview .char-tbr-label,
.teams-list-container .char-tbr-label,
#sstb-team-builder .sstb-char-grid-item .char-tbr-label {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.75);
  color: #fbbf24;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  z-index: 2;
}

/* Monster & Memory Piece Card Icons – links am Rand, untereinander ohne Abstand */
.monster-card-icons-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.monster-card-icon-item {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
.monster-card-icon-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.monster-card-icon-item:not(:has(img)) {
  font-size: 0.55rem;
  font-weight: 600;
  color: #e6e6e6;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px;
  text-align: center;
}
.monster-card-icon-item:empty {
  display: none;
}
.monster-card-wrapper {
  display: block;
}