.series-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--p-surface-500), transparent 60%);
  background: color-mix(in srgb, var(--p-surface-900), transparent 30%);
  backdrop-filter: blur(10px);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 100%;

  &:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: color-mix(in srgb, var(--p-primary-400), transparent 50%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px color-mix(in srgb, var(--p-primary-500), transparent 70%);
    z-index: 10;
  }
}

.stacked-covers {
  position: relative;
  width: 100%;
  height: 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px 10px 4px;
}

.cover-img {
  position: absolute;
  width: calc(105px * var(--card-scale, 1));
  height: calc(152px * var(--card-scale, 1));
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, width 0.2s ease, height 0.2s ease;
}

// Cover positions by index (for 3+ covers)
.cover-0 {
  z-index: 7;
  transform: translateX(0);
}

.cover-1 {
  z-index: 6;
  transform: translateX(calc(-20px * var(--card-scale, 1))) rotate(-4deg);
  opacity: 0.9;
}

.cover-2 {
  z-index: 5;
  transform: translateX(calc(20px * var(--card-scale, 1))) rotate(4deg);
  opacity: 0.9;
}

.cover-3 {
  z-index: 4;
  transform: translateX(calc(-42px * var(--card-scale, 1))) rotate(-8deg);
  opacity: 0.8;
}

.cover-4 {
  z-index: 3;
  transform: translateX(calc(42px * var(--card-scale, 1))) rotate(8deg);
  opacity: 0.8;
}

.cover-5 {
  z-index: 2;
  transform: translateX(calc(-62px * var(--card-scale, 1))) rotate(-11deg);
  opacity: 0.7;
}

.cover-6 {
  z-index: 1;
  transform: translateX(calc(62px * var(--card-scale, 1))) rotate(11deg);
  opacity: 0.7;
}

// Single cover: centered and larger
.covers-1 .cover-0 {
  transform: translateX(0);
  width: calc(115px * var(--card-scale, 1));
  height: calc(165px * var(--card-scale, 1));
}

// Two covers: tighter spread
.covers-2 .cover-0 {
  transform: translateX(calc(14px * var(--card-scale, 1)));
}

.covers-2 .cover-1 {
  transform: translateX(calc(-14px * var(--card-scale, 1))) rotate(-5deg);
  opacity: 0.85;
}

// Hover: spread 2-cover fan
.series-card:hover .covers-2 .cover-1 {
  transform: translateX(calc(-20px * var(--card-scale, 1))) rotate(-7deg);
}

// Hover: spread 3+ cover fan
.series-card:hover .stacked-covers:not(.covers-1):not(.covers-2) {
  .cover-1 {
    transform: translateX(calc(-24px * var(--card-scale, 1))) rotate(-5deg);
  }

  .cover-2 {
    transform: translateX(calc(24px * var(--card-scale, 1))) rotate(5deg);
  }

  .cover-3 {
    transform: translateX(calc(-48px * var(--card-scale, 1))) rotate(-10deg);
  }

  .cover-4 {
    transform: translateX(calc(48px * var(--card-scale, 1))) rotate(10deg);
  }

  .cover-5 {
    transform: translateX(calc(-68px * var(--card-scale, 1))) rotate(-13deg);
  }

  .cover-6 {
    transform: translateX(calc(68px * var(--card-scale, 1))) rotate(13deg);
  }
}

.card-body {
  padding: 6px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-height: 0;
}

.series-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.series-authors {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.progress-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.card-actions {
  display: flex;
  align-items: center;
  margin-top: auto;
  gap: 4px;

  ::ng-deep .p-button {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
  }
}

.series-progress-bar {
  flex: 1;
  height: 6px;

  ::ng-deep .p-progressbar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
  }

  &.progress-complete ::ng-deep .p-progressbar-value {
    background: linear-gradient(90deg, #22c55e, #16a34a);
  }

  &.progress-incomplete ::ng-deep .p-progressbar-value {
    background: linear-gradient(90deg, var(--p-primary-400), var(--p-primary-600));
  }
}

.progress-label {
  font-size: 0.8rem;
  color: #cbd5e1;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.02em;
}
