/* ==========================================================================
   ANIMA · COMIC SHELF
   The comics wing. It reuses the shelf layout from games.css and adds a
   paper-and-ink accent, plus a stack of physical volumes in the hero.
   ========================================================================== */

.manga-page .games-title em {
  color: #aa6257;
}

.manga-page .games-filter.is-active {
  border-color: rgba(156, 79, 68, 0.5);
  background: #a45c50;
  box-shadow: 0 5px 16px rgba(127, 63, 54, 0.2);
}

.manga-page .games-feature-stamp {
  color: #a45c50;
  border-color: rgba(164, 92, 80, 0.4);
}

.manga-hero {
  grid-template-columns: minmax(0, 1.06fr) minmax(300px, 0.76fr);
}

.manga-feature {
  position: relative;
  justify-self: end;
  width: min(100%, 430px);
  padding: 28px 0 0;
}

.manga-stack-back {
  position: absolute;
  top: 50px;
  width: 67%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 22px 55px rgba(48, 72, 88, 0.17);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.manga-stack-back img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.manga-stack-a {
  left: 2%;
  transform: rotate(-7.5deg);
}

.manga-stack-b {
  top: 31px;
  right: 0;
  transform: rotate(6.5deg);
}

.manga-feature-card {
  position: relative;
  z-index: 3;
  width: 66%;
  margin: 0 auto;
  padding: 7px;
  transform: rotate(-1.6deg);
}

.manga-feature-card:hover {
  transform: rotate(-0.6deg) translateY(-5px);
}

.manga-feature-caption {
  margin-top: 20px;
  margin-left: 8%;
}

.manga-feature-caption strong {
  font-family: var(--serif);
  font-size: 24px;
}

.manga-feature-stamp {
  right: -3px;
  bottom: 36px;
  width: auto;
  height: auto;
  min-width: 28px;
  padding: 10px 6px;
  border-radius: 2px;
  font-family: var(--serif);
  font-size: 11px;
  writing-mode: vertical-rl;
  letter-spacing: 0.18em;
}

.manga-card .game-cover::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  z-index: 2;
  width: 1px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 3px 0 0 rgba(9, 34, 49, 0.12);
  pointer-events: none;
}

.manga-card .game-card-body {
  position: relative;
}

.manga-card .game-card-body::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  width: 18px;
  height: 1px;
  background: rgba(164, 92, 80, 0.45);
}

.manga-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1120px) {
  .manga-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .manga-hero {
    grid-template-columns: none;
  }

  .manga-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manga-feature {
    width: min(330px, 76%);
    margin: 54px 0 0 auto;
    padding-top: 10px;
  }

  .manga-feature-card {
    width: 66%;
  }

  .manga-feature-stamp {
    right: -2px;
    bottom: 28px;
  }
}

@media (max-width: 720px) {
  .manga-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .manga-feature {
    width: min(285px, 83%);
    margin-top: 44px;
  }

  .manga-stack-a {
    left: 0;
  }

  .manga-stack-b {
    right: -2px;
  }

  .manga-feature-caption strong {
    font-size: 20px;
  }

  .manga-feature-stamp {
    width: auto;
    height: auto;
    padding: 8px 5px;
    font-size: 10px;
  }
}