:root {
  --comic-purple: #8d32f4;
  --comic-magenta: #e04f9b;
  --comic-orange: #ff7a20;
  --comic-paper: #f6f1e8;
}

.ai-comics-page {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 24%, rgba(141, 50, 244, .17), transparent 30rem),
    radial-gradient(circle at 88% 40%, rgba(255, 122, 32, .13), transparent 34rem),
    #07070a;
  color: #fff;
}

.ai-comics-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.ai-comics-page .header {
  background: rgba(7, 7, 10, .82);
  backdrop-filter: blur(18px);
  border-bottom-color: rgba(255, 122, 32, .25);
}

.ai-comics-page section.comic-hero.container {
  padding: clamp(3rem, 6vh, 4.5rem) 20px 2.4rem;
  padding-bottom: 2.4rem;
  text-align: center;
}

.comic-title-mark {
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 1rem;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--comic-purple), var(--comic-orange));
  box-shadow: 0 0 0 8px rgba(141,50,244,.08), 0 15px 35px rgba(0,0,0,.35);
  animation: comicMarkFloat 3s ease-in-out infinite;
}

.comic-title-mark i { font-size: 1.2rem; }

.comic-kicker,
.comic-reader-kicker {
  margin: 0 0 .65rem;
  color: #ff9a4e;
  font-family: "Sora", sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .16em;
}

.comic-hero h1 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: .02em;
  background: linear-gradient(100deg, #fff 10%, #c675ff 43%, #ff7a20 75%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: comicTitleGlow 7s linear infinite;
}

.comic-intro { margin: 1rem auto 0; color: rgba(255,255,255,.68); font-size: 1rem; }
.comic-library { padding-bottom: clamp(5rem, 10vh, 8rem); }

.comic-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 330px));
  justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem 0 3.5rem;
  perspective: 1400px;
}

.comic-volume {
  appearance: none;
  position: relative;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.75,.25,1), filter .35s ease;
}

.comic-volume:focus-visible { outline: 3px solid #ff8b35; outline-offset: 8px; border-radius: 8px; }
.comic-volume:hover { transform: translateY(-12px); filter: drop-shadow(0 28px 32px rgba(0,0,0,.5)); }
.comic-volume.is-opening { animation: comicLaunch .42s cubic-bezier(.2,.8,.25,1) both; }

.comic-cover-wrap {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 5px 12px 12px 5px;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .16s ease-out;
  background: #17131c;
  box-shadow: -8px 9px 0 #241d2e, -13px 14px 25px rgba(0,0,0,.5), inset 5px 0 8px rgba(255,255,255,.08);
}

.comic-cover-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: inherit;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 30%), rgba(255,255,255,.34), rgba(255,255,255,.07) 18%, transparent 46%);
  mix-blend-mode: screen;
  opacity: .72;
}

.comic-cover-wrap::after {
  content: "";
  position: absolute;
  top: 2%;
  bottom: 2%;
  left: 7px;
  z-index: 3;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.55), transparent);
  opacity: .55;
}

.comic-cover { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.comic-open-label {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .82rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(8,7,12,.72);
  backdrop-filter: blur(12px);
  font-family: "Sora", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  transform: translateZ(28px);
  transition: background .25s ease, border-color .25s ease;
}

.comic-volume:hover .comic-open-label { background: linear-gradient(105deg, var(--comic-purple), var(--comic-orange)); border-color: transparent; }
.comic-open-label i { transition: transform .3s ease; }
.comic-volume:hover .comic-open-label i { transform: translateX(3px); }
.comic-volume-copy { display: block; padding: 1.35rem .25rem 0; }
.comic-volume-number { display: block; color: #ff9b50; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.comic-volume-title { display: block; margin-top: .35rem; font-family: "Sora", sans-serif; font-size: 1.28rem; font-weight: 700; letter-spacing: .02em; }
.comic-volume-meta { display: block; margin-top: .35rem; color: rgba(255,255,255,.58); font-size: .9rem; }

.comic-reader-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 1rem;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(3, 2, 6, .91);
  backdrop-filter: blur(18px);
  transition: opacity .3s ease, visibility .3s ease;
}

.comic-reader-modal.show { visibility: visible; opacity: 1; pointer-events: auto; }

.comic-reader-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1500px, 96vw);
  height: min(940px, 95vh);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 46%, rgba(141,50,244,.2), transparent 35%), linear-gradient(145deg, #121019, #08070c 60%, #160d08);
  box-shadow: 0 34px 100px rgba(0,0,0,.75);
  transform: translateY(24px) scale(.97);
  transition: transform .42s cubic-bezier(.2,.75,.25,1);
}

.comic-reader-modal.show .comic-reader-shell { transform: translateY(0) scale(1); }
.comic-reader-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; padding: .9rem 4.7rem .9rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(7,7,10,.62); }
.comic-reader-topbar h2 { margin: 0; font-family: "Sora", sans-serif; font-size: clamp(1.1rem, 2vw, 1.55rem); letter-spacing: .02em; }
.comic-reader-kicker { display: block; margin-bottom: .25rem; font-size: .66rem; }
.comic-reader-status { flex: 0 0 auto; padding: .48rem .78rem; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.055); font-size: .82rem; font-weight: 700; }

.comic-reader-close,
.comic-reader-nav {
  appearance: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.17);
  color: #fff;
  background: rgba(10,8,14,.72);
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, opacity .25s ease;
}

.comic-reader-close { position: absolute; top: 1rem; right: 1rem; z-index: 20; width: 42px; height: 42px; border-radius: 50%; font-size: 1.65rem; line-height: 1; }
.comic-reader-close:hover { transform: rotate(90deg) scale(1.08); border-color: transparent; background: linear-gradient(135deg, var(--comic-purple), var(--comic-orange)); }
.comic-reader-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 1rem 4.8rem; overflow: hidden; }
.comic-reader-stage::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 4%; height: 12%; pointer-events: none; border-radius: 50%; background: rgba(0,0,0,.65); filter: blur(28px); }
.comic-book { position: relative; z-index: 2; margin: auto; }
.comic-book .stf__parent,
.comic-book .stf__wrapper { margin: auto !important; }
.comic-page { overflow: hidden; background: var(--comic-paper); box-shadow: inset 0 0 18px rgba(60,40,22,.12); }
.comic-page-inner { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: var(--comic-paper); }
.comic-page img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--comic-paper); user-select: none; -webkit-user-drag: none; }
.comic-page-cover,
.comic-page-cover .comic-page-inner,
.comic-page-cover img { background: #08070c; }
.comic-page-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #786d62; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.comic-page img[src] + .comic-page-loading { display: none; }
.comic-reader-nav { position: absolute; top: 50%; z-index: 12; width: 48px; height: 48px; border-radius: 50%; transform: translateY(-50%); }
.comic-reader-nav:hover:not(:disabled) { transform: translateY(-50%) scale(1.1); border-color: transparent; background: linear-gradient(135deg, var(--comic-purple), var(--comic-orange)); box-shadow: 0 10px 30px rgba(141,50,244,.28); }
.comic-reader-nav:disabled { opacity: .25; cursor: default; }
.comic-reader-prev { left: 1.15rem; }
.comic-reader-next { right: 1.15rem; }
.comic-reader-hint { position: relative; z-index: 3; margin: 0; padding: .75rem 1rem 1rem; color: rgba(255,255,255,.48); text-align: center; font-size: .78rem; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@keyframes comicMarkFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes comicTitleGlow { to { background-position: -220% 0; } }
@keyframes comicLaunch { 50% { transform: translateY(-18px) scale(1.035); } 100% { transform: translateY(8px) scale(.97); opacity: .3; } }

@media (max-width: 760px) {
  .ai-comics-page section.comic-hero.container { padding: 2.5rem 20px 1.2rem; }
  .comic-hero h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .comic-shelf { grid-template-columns: minmax(0, 270px); gap: 3rem; padding-top: 1.2rem; }
  .comic-reader-modal { padding: .4rem; }
  .comic-reader-shell { width: 100%; height: calc(100dvh - .8rem); border-radius: 8px; }
  .comic-reader-topbar { min-height: 68px; padding: .72rem 3.6rem .72rem .85rem; }
  .comic-reader-status { position: absolute; left: 50%; bottom: 2.65rem; z-index: 15; transform: translateX(-50%); background: rgba(8,7,12,.82); }
  .comic-reader-close { top: .72rem; right: .72rem; width: 39px; height: 39px; }
  .comic-reader-stage { padding: .45rem 2.8rem 2.6rem; }
  .comic-reader-nav { top: auto; bottom: .55rem; width: 42px; height: 42px; transform: none; }
  .comic-reader-nav:hover:not(:disabled) { transform: scale(1.08); }
  .comic-reader-prev { left: .8rem; }
  .comic-reader-next { right: .8rem; }
  .comic-reader-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .comic-title-mark,
  .comic-hero h1,
  .comic-volume.is-opening { animation: none; }
  .comic-volume,
  .comic-cover-wrap,
  .comic-reader-shell { transition-duration: .01ms; }
}