:root {
  --novel-bg: rgb(10 14 26 / 92%);
  --novel-card-bg: rgb(18 24 42 / 90%);
  --novel-border: rgb(135 168 255 / 26%);
  --novel-gold: rgb(230 200 139 / 85%);
  --novel-azure: rgb(178 196 255 / 92%);
}

body.novels-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  min-height: 100vh;
  padding: clamp(1.2rem, 4vw, 2.6rem);
  background: radial-gradient(circle at top, rgb(28 30 46 / 96%), rgb(6 8 20 / 95%));
  color: rgb(236 238 255 / 94%);
  gap: clamp(1.6rem, 4vw, 2.8rem);
}

@media (width <= 960px) {
  body.novels-page {
    grid-template-columns: 1fr;
  }
}

.novels-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--novel-border);
  border-radius: 24px;
  background: rgb(16 22 40 / 85%);
  box-shadow: 0 24px 54px rgb(8 0 35 / 45%);
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-column: 1 / -1;
}

.novels-hero__content {
  display: grid;
  max-width: 680px;
  gap: .6rem;
}

.novels-hero__back {
  color: var(--novel-azure);
  font-size: .92rem;
  letter-spacing: .08rem;
  text-decoration: none;
}

.novels-hero__title {
  margin: 0;
  color: var(--novel-gold);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-family: Cinzel, serif;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

.novels-hero__subtitle {
  margin: 0;
  color: rgb(214 222 255 / 75%);
  font-size: 1rem;
  line-height: 1.6;
}

.novels-hero__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.novels-chip {
  padding: .55rem 1.2rem;
  border: 1px solid rgb(135 168 255 / 28%);
  border-radius: 999px;
  background: rgb(10 14 30 / 90%);
  color: rgb(214 222 255 / 78%);
  transition: all  .2s ease;
  cursor: pointer;
  letter-spacing: .08rem;
  text-transform: uppercase;
}

.novels-chip:hover,
.novels-chip:focus-visible {
  border-color: rgb(230 200 139 / 60%);
  color: var(--novel-gold);
}

.novels-chip--active {
  border-color: rgb(230 200 139 / 70%);
  background: linear-gradient(135deg, rgb(135 168 255 / 25%), rgb(230 200 139 / 22%));
  color: var(--novel-gold);
  box-shadow: 0 12px 28px rgb(6 0 30 / 40%);
}

.novels-layout {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

.novels-list {
  min-height: 420px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--novel-border);
  border-radius: 22px;
  background: rgb(12 18 32 / 82%);
  box-shadow: 0 22px 52px rgb(6 0 32 / 46%);
}

.novels-grid {
  display: grid;
  margin: 0;
  padding: 0;
  gap: clamp(1rem, 2vw, 1.6rem);
  list-style: none;
}

.novel-card {
  position: relative;
  border: 1px solid rgb(135 168 255 / 32%);
  border-radius: 20px;
  background: linear-gradient(135deg, rgb(22 28 48 / 95%), rgb(14 20 36 / 92%));
  transition: transform  .25s ease, box-shadow  .25s ease, border-color  .25s ease;
  box-shadow: inset 0 0 40px rgb(12 16 34 / 50%), 0 18px 42px rgb(6 0 33 / 45%);
  overflow: hidden;
}

.novel-card:hover,
.novel-card:focus-within {
  border-color: rgb(230 200 139 / 65%);
  box-shadow: 0 28px 64px rgb(12 2 40 / 52%);
  transform: translateY(-6px);
}

.novel-card--preview {
  min-height: 360px;
}

.novel-card article {
  display: grid;
  grid-template-columns: 180px 1fr;
  padding: clamp(1rem, 2vw, 1.8rem);
  gap: 1.4rem;
}

@media (width <= 760px) {
  .novel-card article {
    grid-template-columns: 1fr;
  }
}

.novel-card__cover {
  position: relative;
  display: grid;
  border: 1px solid rgb(135 168 255 / 32%);
  border-radius: 16px;
  background: rgb(10 14 30 / 85%);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  place-items: center;
}

.novel-card__cover-placeholder {
  color: rgb(214 222 255 / 55%);
  font-size: .85rem;
  letter-spacing: .08rem;
  text-transform: uppercase;
}

.novel-card__cover-image,
#novel-preview-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.novel-card__body {
  display: grid;
  gap: .75rem;
}

.novel-card__header {
  display: grid;
  gap: .55rem;
}

.novel-card__status {
  color: rgb(214 222 255 / 58%);
  font-size: .75rem;
  letter-spacing: .12rem;
  text-transform: uppercase;
}

.novel-card__title {
  margin: 0;
  color: rgb(236 238 255 / 95%);
  font-size: 1.35rem;
  letter-spacing: .06rem;
}

.novel-card__summary {
  margin: 0;
  color: rgb(214 222 255 / 75%);
  line-height: 1.6;
}

.novel-card__stats {
  display: inline-flex;
  flex-wrap: wrap;
  color: rgb(230 200 139 / 75%);
  font-size: .86rem;
  gap: .6rem;
  letter-spacing: .06rem;
}

.novel-card__excerpt {
  margin: 0;
  padding: .9rem 1rem;
  border: 1px solid rgb(135 168 255 / 22%);
  border-radius: 14px;
  background: rgb(10 14 30 / 85%);
  line-height: 1.6;
}

.novel-card__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: 0;
  gap: .6rem;
}

.novel-card__meta dt {
  color: rgb(214 222 255 / 60%);
  font-size: .78rem;
  letter-spacing: .08rem;
  text-transform: uppercase;
}

.novel-card__meta dd {
  margin: 0;
  color: rgb(236 238 255 / 90%);
  font-size: .95rem;
}

.novel-card__roles {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.novel-card__link,
#novel-preview-read-button {
  color: var(--novel-azure);
  font-size: .88rem;
  letter-spacing: .08rem;
  text-decoration: none;
  text-transform: uppercase;
}

.novel-card__link:hover,
.novel-card__link:focus,
#novel-preview-read-button:hover,
#novel-preview-read-button:focus {
  color: var(--novel-gold);
}

.novels-empty,
.novels-error {
  font-size: .95rem;
  text-align: center;
  letter-spacing: .06rem;
  margin-top: 2rem;
}

.novels-error {
  color: #fdaaaa;
}

.novels-skeleton {
  display: grid;
  gap: 1rem;
}

.novels-skeleton__card {
  height: 140px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgb(24 30 48 / 40%), rgb(16 22 38 / 45%), rgb(24 30 48 / 40%));
  animation: novels-pulse 1.8s ease-in-out infinite;
  background-size: 400% 100%;
}

@keyframes novels-pulse {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.novels-aside {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
}

.novels-preview,
.novels-tips {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--novel-border);
  border-radius: 22px;
  background: rgb(14 20 34 / 86%);
  box-shadow: 0 18px 42px rgb(6 0 32 / 42%);
}

.novels-preview__title,
.novels-tips__title {
  margin: 0 0 1rem;
  color: var(--novel-azure);
  font-size: 1.2rem;
  font-family: Cinzel, serif;
  letter-spacing: .12rem;
  text-transform: uppercase;
}

.novels-tips__list {
  display: grid;
  margin: 0;
  color: rgb(214 222 255 / 76%);
  line-height: 1.6;
  gap: .65rem;
  padding-left: 1.2rem;
}