/* A small, tangible library. The six catalog links remain native buttons. */
.manga-book-stage {
  --book-depth: 18px;
  position: relative;
  perspective: 1000px;
  isolation: isolate;
}

.manga-book-stage::before {
  content: '';
  position: absolute;
  width: 70%;
  height: 15%;
  left: 15%;
  bottom: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #0007, #0002 45%, transparent 72%);
  transform: rotate(-5deg);
  pointer-events: none;
}

.manga-book {
  --book-turn: 23deg;
  position: relative;
  display: block;
  width: 170px;
  aspect-ratio: 2 / 3;
  transform: rotateX(-7deg) rotateY(var(--book-turn)) rotateZ(-3deg);
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.2, .75, .25, 1);
}

.manga-book-front,
.manga-book-back {
  position: absolute;
  display: block;
  inset: 0;
  border-radius: 2px 5px 5px 2px;
  backface-visibility: hidden;
  background: var(--book-accent, #9ac7bb);
}

.manga-book-front {
  overflow: hidden;
  transform: translateZ(calc(var(--book-depth) / 2));
  box-shadow: inset 0 0 0 1px #fff2, 10px 14px 24px #0004;
}

.manga-book-front::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #10131d50, #fff2 3%, #1112 5%, transparent 10%, transparent 84%, #fff1);
  box-shadow: inset 0 0 0 1px #fff2;
}

.manga-book-back {
  transform: translateZ(calc(var(--book-depth) / -2)) rotateY(180deg);
  background: linear-gradient(110deg, #0004, transparent), var(--book-accent, #9ac7bb);
}

.manga-book-spine,
.manga-book-pages,
.manga-book-page-top,
.manga-book-page-bottom {
  position: absolute;
  display: block;
  backface-visibility: hidden;
}

.manga-book-spine {
  top: 0;
  left: 0;
  width: var(--book-depth);
  height: 100%;
  transform-origin: left center;
  transform: translateZ(calc(var(--book-depth) / 2)) rotateY(-90deg);
  overflow: hidden;
  border-radius: 2px 0 0 2px;
  color: #172321;
  background: linear-gradient(90deg, #0004, #fff2 45%, #0002), var(--book-accent, #9ac7bb);
}

.manga-book-spine-title {
  position: absolute;
  left: 50%;
  top: 18%;
  max-height: 68%;
  overflow: hidden;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .09em;
  white-space: nowrap;
}

.manga-book-pages {
  top: 2px;
  right: 0;
  width: var(--book-depth);
  height: calc(100% - 4px);
  transform-origin: right center;
  transform: translateZ(calc(var(--book-depth) / 2)) rotateY(90deg);
  background: repeating-linear-gradient(90deg, #e9e4d9 0, #e9e4d9 1px, #c8c0b1 1px, #c8c0b1 1.5px);
}

.manga-book-page-top,
.manga-book-page-bottom {
  left: 1px;
  width: calc(100% - 2px);
  height: var(--book-depth);
  background: repeating-linear-gradient(0deg, #f7f2e7 0, #f7f2e7 1px, #c8c0b1 1px, #c8c0b1 1.5px);
}

.manga-book-page-top {
  top: 0;
  transform-origin: center top;
  transform: translateZ(calc(var(--book-depth) / 2)) rotateX(90deg);
}

.manga-book-page-bottom {
  bottom: 0;
  transform-origin: center bottom;
  transform: translateZ(calc(var(--book-depth) / 2)) rotateX(-90deg);
}

.manga-book-stage .manga-book-front img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;
  border-radius: inherit;
  object-fit: cover;
  filter: none;
  transform: none;
  transition: none;
}

.manga-book-stage .manga-cover-fallback {
  inset: 0;
  padding: 12px;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #112023e8, #263133ea), var(--book-accent);
  color: #f1e6ec;
  font-size: 1rem;
}

.manga-card-open {
  border-radius: 18px;
  background: linear-gradient(160deg, #22263580, #171b2680);
  box-shadow: 0 8px 28px #0001;
  transition: border-color 250ms, background 250ms, box-shadow 350ms;
}

.manga-card-cover {
  aspect-ratio: 1.1;
  background: radial-gradient(ellipse at 50% 35%, #ffffff15, transparent 66%),
    linear-gradient(150deg, #ffffff03, transparent 70%),
    color-mix(in srgb, var(--book-accent) 10%, #1b1e2c);
}

.manga-card-cover::after {
  content: '';
  position: absolute;
  inset: auto 8% 13%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff17, transparent);
  pointer-events: none;
}

.manga-card-cover .manga-book {
  position: absolute;
  top: 7%;
  left: 26%;
  width: 48%;
}

.manga-card:nth-child(even) .manga-book { --book-turn: -21deg; }
.manga-card:nth-child(3n) .manga-book { transform: rotateX(-6deg) rotateY(20deg) rotateZ(3deg); }
.manga-card-badge { z-index: 2; left: 16px; bottom: 12px; }
.manga-card-meta { font-size: .5625rem; }
.manga-card-bottom .icon { transition: transform 300ms; }

.manga-spotlight { background: radial-gradient(ellipse at 12% 40%, #8db9a839, transparent 48%), linear-gradient(125deg, #233632, #202631 75%); }
.manga-spotlight-art.manga-book-stage { min-height: 300px; }
.manga-spotlight-art .manga-book { --book-depth: 22px; width: min(70%, 185px); }
.manga-spotlight-art.manga-book-stage::before { bottom: 2%; height: 15%; width: 86%; left: 7%; }

.manga-detail-cover.manga-book-stage {
  min-height: 225px;
  padding: 14px 18px 20px;
  display: grid;
  place-items: center;
  border-color: transparent;
  background: radial-gradient(ellipse at 50% 40%, #ffffff0c, transparent 72%);
}

.manga-detail-cover .manga-book { --book-depth: 14px; width: 100%; }
.manga-detail-cover.manga-book-stage::before { bottom: 3%; width: 100%; left: 0; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .manga-card-open:hover { border-color: color-mix(in srgb, var(--book-accent) 45%, transparent); box-shadow: 0 15px 36px #0003; }
  .manga-card-open:hover .manga-book { transform: translateY(-9px) rotateX(-3deg) rotateY(7deg) rotateZ(0); }
  .manga-card-open:hover .manga-book-front img { transform: none; }
  .manga-card-open:hover .manga-card-bottom .icon { transform: translateX(3px); }
  .manga-spotlight:hover .manga-book { transform: translateY(-5px) rotateX(-5deg) rotateY(12deg) rotateZ(-2deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .manga-card-open:focus-visible .manga-book { transform: translateY(-5px) rotateX(-3deg) rotateY(7deg) rotateZ(0); }
}

@media (max-width: 700px) {
  .manga-book-stage { --book-depth: 14px; }
  .manga-card-cover { aspect-ratio: .8; }
  .manga-card-cover .manga-book { width: 66%; left: 17%; top: 6%; }
  .manga-card-cover::before { width: 88%; left: 6%; bottom: 12%; }
  .manga-card-meta { font-size: .4375rem; }
  .manga-card-badge { left: 8px; bottom: 10px; }
  .manga-spotlight-art.manga-book-stage { min-height: 265px; }
  .manga-spotlight-art .manga-book { width: 156px; }
  .manga-detail-cover.manga-book-stage { min-height: 155px; padding: 10px 9px 15px; }
  .manga-detail-cover .manga-book { --book-depth: 10px; }
  .manga-book-spine-title { font-size: 6px; }
}

@media (max-width: 360px) {
  .manga-card-cover { aspect-ratio: 1.1; }
  .manga-card-cover .manga-book { width: 48%; left: 26%; top: 7%; }
  .manga-card-meta { font-size: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .manga-book,
  .manga-card-open,
  .manga-card-bottom .icon { transition: none; }
}

/* A bookmark invites An to choose a story without adding another carousel. */
.manga-discovery { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; margin-top: 26px; padding: 25px 29px 24px 45px; overflow: hidden; border: 1px solid #c7d7bb29; border-radius: 14px; background: radial-gradient(ellipse at 0 0, #6e93692b, transparent 65%), #202c2e85; }
.manga-discovery-bookmark { position: absolute; display: block; top: 0; left: 18px; width: 12px; height: 52px; background: #d9ddbd; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); box-shadow: 0 6px 14px #0003; }
.manga-discovery-copy h3 { margin: 0; color: #e7ead4; font: 400 clamp(1.3rem, 2.2vw, 1.65rem)/1.5 'Playfair Display', Georgia, serif; }
.manga-discovery-copy p { margin: 7px 0 0; color: #bac7c0; font-size: .6875rem; line-height: 1.85; }
.manga-pick { display: inline-flex; justify-content: center; align-items: center; align-self: center; gap: 11px; min-height: 44px; padding: 10px 16px; color: #d4e1ce; background: #e0eccc09; border: 1px solid #c7d7bb40; border-radius: 6px; font-size: .6875rem; }
.manga-pick > .icon { width: 15px; height: 15px; }
.manga-pick:hover:not(:disabled) { border-color: #c7d7bb85; background: #e0eccc12; }
.manga-moods { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px; }
.manga-moods button { min-height: 40px; padding: 8px 13px; border: 1px solid #c7d7bb25; border-radius: 100px; color: #c4cec8; background: #151e210e; font-size: .6875rem; }
.manga-moods button[aria-pressed="true"] { border-color: #d3dfb9; background: #d3dfb9; color: #31412f; }
.manga-room .manga-toolbar { margin-top: 24px; }
.manga-room .manga-search input { border-color: #c7d7bb2e; border-radius: 9px; }
.manga-room .manga-filters button { font-size: .6875rem; }
.manga-room .manga-filters button[aria-pressed="true"] { background: #e4cfbc; border-color: #e4cfbc; color: #43372f; }
.manga-room .manga-library-head .eyebrow { color: #cfbea8; }
.manga-room .manga-library-head h2 { color: #efe5d4; }
.manga-room .manga-library-head strong { color: #dfc4a8; }
@keyframes manga-book-reveal {
  from { opacity: 0; transform: translateY(9px) rotateX(-7deg) rotateY(-9deg) rotateZ(-3deg); }
  to { opacity: 1; transform: rotateX(-7deg) rotateY(var(--book-turn)) rotateZ(-3deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .manga-dialog[open] .manga-detail-cover .manga-book { animation: manga-book-reveal 450ms cubic-bezier(.2, .75, .25, 1) both; }
}
@media (max-width: 700px) {
  .manga-discovery { padding: 23px 20px 21px 36px; gap: 15px; grid-template-columns: 1fr; margin-top: 21px; }
  .manga-discovery-bookmark { left: 12px; width: 10px; height: 43px; }
  .manga-discovery-copy h3 { font-size: 1.4rem; }
  .manga-pick { justify-self: start; }
  .manga-moods { gap: 7px; }
  .manga-moods button { font-size: .625rem; padding-inline: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .manga-moods button, .manga-pick { transition: none; }
}