/*
  v39 - Top libros con el lenguaje visual real de Studio Ghibli V4.
  Es el mismo patrón: verde translúcido, dorado, borde degradado, hojas 2D,
  scrollbar temático y bobbing de tarjetas.
  IMPORTANTE: está acotado a .mm-books-ghibli-exact-v39 para no afectar toda la página.
*/
:root {
  --book-ghibli-ink: #eaf8df;
  --book-ghibli-ink-soft: rgba(234,248,223,.74);
  --book-ghibli-leaf: #86ef9f;
  --book-ghibli-grass: #5fd188;
  --book-ghibli-sky: #8ee6ff;
  --book-ghibli-sun: #ffe28a;
  --book-ghibli-earth: #b88755;
  --book-ghibli-border: rgba(142,230,255,.34);
  --book-ghibli-card: rgba(13,33,30,.72);
}

html[data-theme="light"] {
  --book-ghibli-ink: #1a352c;
  --book-ghibli-ink-soft: rgba(26,53,44,.74);
  --book-ghibli-leaf: #2f9b63;
  --book-ghibli-grass: #4fb678;
  --book-ghibli-sky: #4cb8e6;
  --book-ghibli-sun: #c88c2a;
  --book-ghibli-earth: #916035;
  --book-ghibli-border: rgba(47,155,99,.28);
  --book-ghibli-card: rgba(255,252,238,.82);
}

.mm-books-ghibli-exact-v39 {
  --accent: var(--book-ghibli-leaf);
  --accent2: var(--book-ghibli-sun);
  color: var(--book-ghibli-ink) !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, var(--book-ghibli-sky), var(--book-ghibli-leaf), var(--book-ghibli-sun), var(--book-ghibli-earth)) border-box !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 38px color-mix(in srgb, var(--book-ghibli-leaf) 18%, transparent) !important;
  position: relative !important;
  overflow: hidden !important;
}

html[data-theme="light"] .mm-books-ghibli-exact-v39 {
  background:
    linear-gradient(rgba(255,252,238,.88), rgba(245,239,214,.84)) padding-box,
    linear-gradient(135deg, var(--book-ghibli-sky), var(--book-ghibli-leaf), var(--book-ghibli-sun), var(--book-ghibli-earth)) border-box !important;
  box-shadow:
    0 24px 62px rgba(75,95,74,.18),
    0 0 0 1px rgba(255,255,255,.72) inset !important;
}

.mm-books-ghibli-exact-v39::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .22 !important;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--book-ghibli-sky) 54%, transparent), transparent 22%),
    radial-gradient(circle at 80% 14%, color-mix(in srgb, var(--book-ghibli-sun) 42%, transparent), transparent 20%),
    radial-gradient(circle at 22% 94%, color-mix(in srgb, var(--book-ghibli-leaf) 42%, transparent), transparent 22%) !important;
}

.mm-books-ghibli-exact-v39::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .20 !important;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at center, var(--book-ghibli-leaf) 0 2px, transparent 3px),
    radial-gradient(ellipse at center, var(--book-ghibli-sun) 0 1.6px, transparent 2.8px),
    linear-gradient(135deg, transparent 0 46%, color-mix(in srgb, var(--book-ghibli-sky) 18%, transparent) 48% 52%, transparent 54%);
  background-size: 120px 70px, 170px 110px, 34px 34px;
  background-position: 0 0, 40px 20px, 0 0;
}

.mm-effects-ready .mm-books-ghibli-exact-v39.is-visible::after,
.mm-effects-ready .mm-books-ghibli-exact-v39::after {
  animation: mmBooksGhibliLeavesV39 18s linear infinite;
}

@keyframes mmBooksGhibliLeavesV39 {
  to { background-position: 260px 150px, -230px 190px, 34px 34px; }
}

.mm-books-ghibli-exact-v39 > * {
  position: relative;
  z-index: 1;
}

.mm-books-ghibli-exact-v39 :is(.mm-section-head, .top-books-force-head, .mm-top15-final-head, .mm-top15-head, .mm-top15-standalone-head) {
  align-items: center !important;
  border-bottom: 1px dashed color-mix(in srgb, var(--book-ghibli-leaf) 34%, transparent) !important;
  padding-bottom: 1rem !important;
}

.mm-books-ghibli-exact-v39 :is(.mm-kicker, .top-books-force-kicker, .mm-top15-final-kicker, .mm-top15-kicker, .mm-top15-standalone-kicker) {
  color: var(--book-ghibli-sun) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--book-ghibli-sun) 20%, transparent) !important;
}

.mm-books-ghibli-exact-v39 :is(h1,h2,h3,.mm-title,.top-books-force-title,.mm-top15-final-title,.mm-top15-title,.mm-top15-standalone-title) {
  color: var(--book-ghibli-ink) !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.12) !important;
}

.mm-books-ghibli-exact-v39 :is(p,small,.mm-desc,.top-books-force-subtitle,.top-books-force-reason,.mm-top15-final-subtitle,.mm-top15-subtitle,.mm-top15-standalone-subtitle) {
  color: var(--book-ghibli-ink-soft) !important;
}

.mm-books-ghibli-exact-v39 :is(.mm-link, .top-books-force-all, .mm-top15-final-badge, .mm-top15-badge, .mm-top15-standalone-badge, a[class*="all"], a[class*="link"]) {
  border: 1px solid color-mix(in srgb, var(--book-ghibli-leaf) 42%, var(--line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--book-ghibli-sky) 16%, transparent),
      color-mix(in srgb, var(--book-ghibli-leaf) 14%, transparent)) !important;
  color: var(--book-ghibli-ink) !important;
}

.mm-books-ghibli-exact-v39 :is(.mm-rail, .top-books-force-track, .mm-top15-final-rail, .mm-top15-rail, .mm-top15-standalone-rail) {
  gap: 1rem !important;
  padding: .45rem .15rem 1.05rem !important;
  scrollbar-width: thin;
  scrollbar-color: var(--book-ghibli-leaf) color-mix(in srgb, var(--book-ghibli-earth) 22%, transparent);
}

.mm-books-ghibli-exact-v39 :is(.mm-rail, .top-books-force-track, .mm-top15-final-rail, .mm-top15-rail, .mm-top15-standalone-rail)::-webkit-scrollbar { height: 12px; }
.mm-books-ghibli-exact-v39 :is(.mm-rail, .top-books-force-track, .mm-top15-final-rail, .mm-top15-rail, .mm-top15-standalone-rail)::-webkit-scrollbar-track {
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--book-ghibli-earth) 18%, transparent),
      color-mix(in srgb, var(--book-ghibli-sky) 16%, transparent));
  border: 1px solid color-mix(in srgb, var(--book-ghibli-leaf) 22%, transparent);
}
.mm-books-ghibli-exact-v39 :is(.mm-rail, .top-books-force-track, .mm-top15-final-rail, .mm-top15-rail, .mm-top15-standalone-rail)::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--bg) 72%, transparent);
  background: linear-gradient(90deg, var(--book-ghibli-leaf), var(--book-ghibli-sky), var(--book-ghibli-sun));
}

.mm-books-ghibli-exact-v39 :is(.mm-media, .top-books-force-card, .mm-top15-final-card, .mm-top15-card, .mm-top15-standalone-card, article[class*="card"]) {
  border-radius: 24px 18px 26px 18px !important;
  border: 2px solid color-mix(in srgb, var(--book-ghibli-leaf) 28%, var(--line)) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--book-ghibli-card) 92%, transparent),
      color-mix(in srgb, var(--book-ghibli-card) 72%, transparent)) !important;
  box-shadow:
    0 16px 30px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.06) inset !important;
  transform-origin: center bottom !important;
}

.mm-books-ghibli-exact-v39 :is(.mm-media, .top-books-force-card, .mm-top15-final-card, .mm-top15-card, .mm-top15-standalone-card, article[class*="card"]):nth-child(odd) { transform: rotate(-.45deg); }
.mm-books-ghibli-exact-v39 :is(.mm-media, .top-books-force-card, .mm-top15-final-card, .mm-top15-card, .mm-top15-standalone-card, article[class*="card"]):nth-child(even) { transform: rotate(.45deg); }

.mm-books-ghibli-exact-v39 :is(.mm-media, .top-books-force-card, .mm-top15-final-card, .mm-top15-card, .mm-top15-standalone-card, article[class*="card"]):hover {
  transform: translateY(-7px) rotate(0deg) scale(1.015) !important;
  border-color: color-mix(in srgb, var(--book-ghibli-sun) 62%, var(--book-ghibli-leaf)) !important;
  box-shadow:
    0 24px 52px rgba(0,0,0,.30),
    0 0 28px color-mix(in srgb, var(--book-ghibli-leaf) 20%, transparent) !important;
}

.mm-books-ghibli-exact-v39 :is(.mm-cover, .top-books-force-cover, .mm-top15-final-cover, .mm-top15-cover, .mm-top15-standalone-cover, [class*="cover"]) {
  border-radius: 18px 14px 18px 14px !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--book-ghibli-sky) 18%, transparent),
    0 10px 26px rgba(0,0,0,.22) !important;
  background-color: color-mix(in srgb, var(--book-ghibli-leaf) 10%, var(--bg2)) !important;
}

.mm-books-ghibli-exact-v39 :is(.mm-body, .top-books-force-body, .mm-top15-final-body, .mm-top15-body) { padding: .72rem .82rem .95rem !important; }
.mm-books-ghibli-exact-v39 :is(.mm-title, .top-books-force-title, .mm-top15-final-title, .mm-top15-title) {
  color: var(--book-ghibli-ink) !important;
  font-weight: 1000 !important;
  letter-spacing: -.015em !important;
}
.mm-books-ghibli-exact-v39 :is(.mm-sub, .top-books-force-author, .mm-top15-final-author, .mm-top15-author) {
  color: color-mix(in srgb, var(--book-ghibli-sun) 78%, var(--book-ghibli-ink)) !important;
  font-weight: 800 !important;
}
.mm-books-ghibli-exact-v39 :is(.mm-desc, .top-books-force-reason, .mm-top15-final-reason, .mm-top15-reason) {
  color: var(--book-ghibli-ink-soft) !important;
  -webkit-line-clamp: 3;
}

.mm-effects-ready .mm-books-ghibli-exact-v39.is-visible :is(.mm-media, .top-books-force-card, .mm-top15-final-card, .mm-top15-card, .mm-top15-standalone-card):nth-child(4n+1) {
  animation: mmBooksGhibliCardBobA 7s ease-in-out infinite alternate;
}
.mm-effects-ready .mm-books-ghibli-exact-v39.is-visible :is(.mm-media, .top-books-force-card, .mm-top15-final-card, .mm-top15-card, .mm-top15-standalone-card):nth-child(4n+3) {
  animation: mmBooksGhibliCardBobB 8s ease-in-out infinite alternate;
}

@keyframes mmBooksGhibliCardBobA { from { translate: 0 0; } to { translate: 0 -5px; } }
@keyframes mmBooksGhibliCardBobB { from { translate: 0 0; } to { translate: 0 -3px; } }

@media (max-width: 700px) {
  .mm-books-ghibli-exact-v39 :is(.mm-section-head, .top-books-force-head, .mm-top15-final-head) { display: block !important; }
  .mm-books-ghibli-exact-v39 :is(.mm-media, .top-books-force-card, .mm-top15-final-card, .mm-top15-card, .mm-top15-standalone-card) {
    border-radius: 20px 16px 22px 16px !important;
  }
  .mm-books-ghibli-exact-v39 :is(.mm-desc, .top-books-force-reason, .mm-top15-final-reason) { display: none !important; }
}
