/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* PÀGINA GENERAL */

body {
  margin: 0;
  padding: 50px 20px;
  background: #f4cbd5;
  font-family: Arial, sans-serif;
}


/* CAPÇALERA */

.home-header {
  text-align: center;
  margin-bottom: 55px;
}

.home-header h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
}

.home-header p {
  margin: 0;
  font-size: 14px;
}


/* GRAELLA DE MINIMONS */

.world-grid {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px 22px;
}


/* CADA CASELLA */

.world-card p {
  margin: 10px 0 0 0;
  padding-bottom: 8px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.5px;

  text-align: center;
  color: #5b3543;

  border-bottom: 2px solid #ffffff;
}


/* QUADRAT DE LA IMATGE */

.world-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.world-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* NOM DE SOTA */

.world-card p {
  margin: 8px 0 0 0;
  font-size: 14px;
  text-align: center;
}


/* EFECTE QUAN HI PASSES EL RATOLÍ */

.world-card:hover .main-image {
  opacity: 0.45;
}

.world-card:hover p {
  color: #a84f70;
}
.world-image {
  position: relative;
}

.hover-gif {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 50% !important;
height: auto !important;

  object-fit: contain;

  transform: translate(-50%, -50%);

  opacity: 0;
}

.world-card:hover .hover-gif {
  opacity: 1;
}
/* MUSIC: KATSEYE → KURT COBAIN */

.music-special .music-base {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.music-special .music-kurt {
  position: absolute;
  top: 0;
  left: 0;

  width: 100% !important;
  height: 100% !important;
  object-fit: cover;

  opacity: 0;
  z-index: 20;
}

.music-special:hover .music-kurt {
  opacity: 1;
}
/* FASHION: VOGUE → CARRIE */

.fashion-special .fashion-base {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fashion-special .fashion-carrie {
  position: absolute;
  top: 0;
  left: 0;

  width: 100% !important;
  height: 100% !important;
  object-fit: cover;

  opacity: 0;
  z-index: 20;
}

.fashion-special:hover .fashion-carrie {
  opacity: 1;
}
/* ========================================
   PÀGINES INTERIORS
   ======================================== */

.inside-layout {
  width: 1500px;
  max-width: 96%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 40px;

  align-items: start;
}




/* ---------- BARRA LATERAL ---------- */

.sidebar {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.9);

  padding: 18px 15px;
  box-sizing: border-box;

  text-align: center;
}

.sidebar-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: bold;

  color: #5b3543;

  margin-bottom: 18px;
}

.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-menu a {
  display: block;

  padding: 4px 7px;

  font-family: Arial, sans-serif;
  font-size: 12px;

  color: #684653;
  text-decoration: none;
}

.sidebar-menu a:hover {
  background: rgba(255, 255, 255, 0.65);
  color: #a84f70;
}

.sidebar-menu a.active {
  font-weight: bold;
  color: #a84f70;
}

.sidebar-section {
  margin-top: 13px;
  margin-bottom: 4px;

  padding-bottom: 4px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: bold;

  color: #5b3543;

  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
}

.sidebar-decoration {
  margin-top: 20px;
}


/* ---------- ZONA PRINCIPAL ---------- */

.inside-main {
  min-width: 0;
}


/* ---------- PESTANYES ---------- */

.inside-tabs {
  display: flex;
  align-items: flex-end;

  height: 32px;

  padding-left: 12px;
}

.inside-tabs a {
  display: block;

  padding: 8px 16px;

  background: rgba(255, 255, 255, 0.45);

  border: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: none;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;

  color: #684653;
  text-decoration: none;

  margin-right: 4px;
}

.inside-tabs a:hover {
  background: rgba(255, 255, 255, 0.7);
  color: #a84f70;
}

.inside-tabs a.active {
  background: rgba(255, 255, 255, 0.78);

  position: relative;
  z-index: 2;

  padding-top: 10px;
}


/* ---------- REQUADRE PRINCIPAL ---------- */

.inside-box {
  min-height: 800px;

  background: rgba(255, 255, 255, 0.78);

  border: 1px solid rgba(255, 255, 255, 0.9);

  padding: 30px;
  box-sizing: border-box;
}

/* GRAELLA DE RECOMANACIONS */

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 35px 25px;
  width: 100%;
}

.recommendation-card {
  text-align: center;
}

.recommendation-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.recommendation-card p {
  margin: 10px 0 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: bold;
  color: #5b3543;
}



/* ========================================
   MANGA — DECORACIÓ V3
   ======================================== */

body.manga-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* El contingut de Manga baixa una mica per deixar lloc a Cinnamoroll. */
.manga-page .inside-layout {
  position: relative;
  z-index: 2;
  margin-top: 52px;
}

/* FLORITURES V4:
   ara són elements HTML reals, no pseudo-elements.
   Això elimina el problema de capes que feia que no apareguessin. */

body.manga-page::before {
  width: 520px;
  height: 780px;
  left: -205px;
  top: -150px;
  background-position: left top;
  opacity: .48;
  transform: rotate(-5deg);
}

body.manga-page::after {
  width: 480px;
  height: 720px;
  right: -195px;
  bottom: -220px;
  background-position: right bottom;
  opacity: .38;
  transform: scaleX(-1) rotate(7deg);
}


.manga-flourish {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  display: block;
  height: auto;
}

.manga-flourish-left {
  width: 520px;
  left: -205px;
  top: -150px;
  opacity: .48;
  transform: rotate(-5deg);
}

.manga-flourish-right {
  width: 480px;
  right: -195px;
  bottom: -220px;
  opacity: .38;
  transform: scaleX(-1) rotate(7deg);
}

@media (max-width: 1100px) {
  .manga-flourish-left {
    width: 390px;
    opacity: .38;
  }
  .manga-flourish-right {
    width: 370px;
    opacity: .30;
  }
}

/* Sidebar i caixa principal sempre per damunt del dibuix del fons. */
.manga-page .sidebar,
.manga-page .inside-main {
  position: relative;
  z-index: 3;
}

/* NANA:
   - mateixa amplada que la sidebar (230 px)
   - comença 18 px després d'acabar la sidebar
   - l'alçada s'adapta AUTOMÀTICAMENT a l'espai que queda fins al final
     de la caixa principal.
   El JS de les dues pàgines calcula aquest espai segons la mida real. */
.manga-nana-decoration {
  position: absolute;
  left: 0;
  top: var(--nana-top, 360px);
  width: 230px;
  height: var(--nana-height, 230px);
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 4;
}

/* CINNAMOROLL:
   ara s'agafa a la part superior del requadre principal,
   entre les zones de Tenshi Nanka Ja Nai / Gokinjo Monogatari.
   Està ancorat al main, així que es mou amb la finestra. */
.manga-bottom-decoration {
  position: absolute;
  top: -24px;
  left: 58%;
  transform: translateX(-50%);
  width: auto;
  margin: 0;
  z-index: 7;
  pointer-events: none;
}

.manga-bottom-decoration img {
  width: 190px;
  max-width: none;
  height: auto;
  display: block;
}

/* Kuromi continua traient el cap de la vora dreta. */
.manga-kuromi-decoration {
  position: fixed;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 155px;
  height: auto;
  z-index: 6;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .manga-kuromi-decoration {
    width: 110px;
    right: -18px;
  }

  body.manga-page::before {
    width: 390px;
    opacity: .38;
  }

  body.manga-page::after {
    width: 370px;
    opacity: .30;
  }
}

@media (max-width: 760px) {
  .manga-nana-decoration,
  .manga-kuromi-decoration {
    display: none;
  }

  .manga-page .inside-layout {
    margin-top: 42px;
  }

  .manga-bottom-decoration {
    left: 55%;
    top: -40px;
  }

  .manga-bottom-decoration img {
    width: 125px;
  }
}

/* ========================================
   HOME — TÍTOL I DECORACIÓ
   ======================================== */

body.home-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  isolation: isolate;
}

/* Floritures transparents: el fons real continua sent #f4cbd5. */
body.home-page::before,
body.home-page::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  background-image: url("images/home/decoration/home-flourish.png");
  background-repeat: no-repeat;
  background-size: contain;
}

body.home-page::before {
  width: 590px;
  height: 800px;
  left: -210px;
  top: -200px;
  background-position: left top;
  opacity: 0.40;
  transform: rotate(-7deg);
}

body.home-page::after {
  width: 630px;
  height: 850px;
  right: -235px;
  bottom: -275px;
  background-position: right bottom;
  opacity: 0.34;
  transform: scaleX(-1) rotate(6deg);
}

/* El header guanya presència sense tocar la graella. */
.home-page .home-header {
  position: relative;
  z-index: 2;
  margin-bottom: 48px;
}

.home-page .home-header p {
  margin-top: 13px;
}

/* Títol tipus retalls de revista. */
.cutout-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0 auto;
  padding: 15px 0 5px;
  font-size: clamp(27px, 3.2vw, 48px);
  line-height: 1;
  white-space: nowrap;
}

.cutout-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: .68em;
  padding: .13em .10em .10em;
  color: #4e303b;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 1px 2px 0 rgba(91,53,67,.10);
  transform-origin: center;
  animation: cutoutFloat 3.8s ease-in-out infinite alternate;
}

/* Variació deliberada de paper, tipografia, angle i ritme. */
.cutout-letter:nth-child(4n+1) {
  font-family: Georgia, "Times New Roman", serif;
  background: #f8e7e8;
}
.cutout-letter:nth-child(4n+2) {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  background: #fff8f2;
}
.cutout-letter:nth-child(4n+3) {
  font-family: "Times New Roman", Georgia, serif;
  font-style: italic;
  background: #e8bdca;
}
.cutout-letter:nth-child(4n) {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: #fff8f2;
  background: #684653;
}

.l1,.l6,.l11,.l15 { --r:-3deg; --x:-1px; --y:-2px; animation-delay:-.7s; }
.l2,.l8,.l13,.l17 { --r:2deg;  --x:1px;  --y:2px;  animation-delay:-1.9s; }
.l3,.l7,.l12,.l16 { --r:-1deg; --x:2px;  --y:-1px; animation-delay:-2.6s; }
.l4,.l9,.l14       { --r:3deg;  --x:-2px; --y:1px;  animation-delay:-1.2s; }
.l5,.l10           { --r:-2deg; --x:1px;  --y:1px;  animation-delay:-3.1s; }

.title-space {
  width: .34em;
  flex: 0 0 .34em;
}

@keyframes cutoutFloat {
  0% {
    transform: translate(0, 0) rotate(var(--r, 0deg));
  }
  100% {
    transform: translate(var(--x, 1px), var(--y, -2px))
               rotate(calc(var(--r, 0deg) * -0.65));
  }
}

/* Llaç: a la part superior dreta del conjunt central. */
.home-bow-decoration {
  position: absolute;
  top: 38px;
  left: calc(50% + 430px);
  width: 92px;
  height: auto;
  z-index: 4;
  pointer-events: none;
}

/* V2: sense tercer retall de textura al Home. */

@media (max-width: 1050px) {
  .cutout-title {
    font-size: clamp(22px, 3.5vw, 36px);
  }

  .home-bow-decoration {
    left: auto;
    right: 5%;
    width: 72px;
  }

  body.home-page::before,
  body.home-page::after {
    opacity: .28;
  }
}

@media (max-width: 720px) {
  .cutout-title {
    flex-wrap: wrap;
    max-width: 94%;
    gap: 1px;
  }

  .title-space {
    flex-basis: 100%;
    height: 0;
  }

  .home-bow-decoration {
    width: 55px;
    top: 18px;
    right: 2%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cutout-letter {
    animation: none;
  }
}


/* =========================================================
   MUSIC — Charlotte's Corner
   Albums · Songs ♡ · Music Videos
   ========================================================= */

.music-page {
  position: relative;
  overflow-x: hidden;
}

.music-page .music-layout {
  position: relative;
  z-index: 2;
  margin-top: 52px;
}

.music-page .music-main {
  position: relative;
  min-width: 0;
}

.music-page .music-box {
  position: relative;
  min-height: 800px;
}

/* Floritures: mateixa família visual que Home/Manga */
.music-flourish {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  display: block;
  height: auto;
}

.music-flourish-left {
  width: 520px;
  left: -205px;
  top: -150px;
  opacity: .46;
  transform: rotate(-5deg);
}

.music-flourish-right {
  width: 480px;
  right: -195px;
  bottom: -220px;
  opacity: .36;
  transform: scaleX(-1) rotate(7deg);
}

/* ---------- ALBUMS: 6 × 3 ---------- */
.albums-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px 18px;
  width: 100%;
  align-items: start;
}

.album-card,
.song-card {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
}

.album-card:not(:disabled),
.song-card:not(:disabled) {
  cursor: pointer;
}

.album-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(244,203,213,.42);
  box-shadow: 0 3px 12px rgba(91,53,67,.09);
}

.album-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-hover-gif {
  opacity: 0;
  z-index: 2;
}

.album-swap:hover .album-hover-gif,
.album-swap:focus-visible .album-hover-gif {
  opacity: 1;
}

.album-swap:hover .album-cover,
.album-swap:focus-visible .album-cover {
  opacity: 0;
}

.album-gif-cover:hover .album-cover-gif,
.album-gif-cover:focus-visible .album-cover-gif {
  opacity: .48;
}

.album-cover,
.album-hover-gif,
.album-cover-gif {
  transition: opacity .18s ease;
}

.album-name,
.song-name {
  display: block;
  margin-top: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.15;
  font-weight: bold;
  color: #5b3543;
}

.album-artist,
.song-artist {
  display: block;
  margin-top: 3px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.2;
  color: #8b6673;
}

.album-card:hover .album-name,
.song-card:hover .song-name {
  color: #a84f70;
}

.album-placeholder {
  opacity: .65;
}

.album-placeholder-art {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(168,79,112,.36);
  box-sizing: border-box;
  background: rgba(244,203,213,.28);
}

.album-placeholder-art span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  color: #b76f8a;
}

.album-pending-spotify {
  opacity: 1;
}

/* ---------- SONGS ♡: 3 × 2 ---------- */
.songs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px 25px;
  width: 100%;
  align-items: start;
}

.song-visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(244,203,213,.34);
  box-shadow: 0 3px 12px rgba(91,53,67,.09);
}

.song-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.song-image-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 32px;
  color: #b76f8a;
  background: rgba(244,203,213,.25);
}

.song-hover-gif {
  z-index: 2;
  opacity: 0;
  transition: opacity .18s ease;
}

.song-card:hover .song-hover-gif,
.song-card:focus-visible .song-hover-gif {
  opacity: 1;
}

/* Encara sense Spotify: que disabled no apagui visualment les targetes */
.song-card:disabled {
  opacity: 1;
}

/* Dos GIFs decoratius sota la sidebar */
.music-songs-side-decorations {
  position: absolute;
  left: 0;
  top: 345px;
  width: 230px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 4;
  pointer-events: none;
}

.music-songs-side-decorations img {
  width: 100%;
  height: auto;
  max-height: 205px;
  object-fit: cover;
  display: block;
}

/* Espai reservat per al GIF vertical/decoració d'Albums */
.music-side-decoration {
  position: absolute;
  left: 0;
  top: 345px;
  width: 230px;
  z-index: 4;
  pointer-events: none;
}

/* ---------- SPOTIFY ---------- */
.spotify-player-shell {
  width: 100%;
  margin-top: 34px;
  overflow: hidden;
}

.spotify-player-shell iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}

/* ---------- MUSIC VIDEOS: preparat per 2 × 3 ---------- */
.music-videos-grid,
.videos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 26px;
  width: 100%;
}

.music-video-card,
.video-card {
  min-width: 0;
  text-align: center;
}

.music-video-frame,
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  box-shadow: 0 3px 12px rgba(91,53,67,.09);
}

.music-video-frame iframe,
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.music-video-title,
.video-title {
  margin: 9px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: bold;
  color: #5b3543;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .albums-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .music-page .inside-layout {
    grid-template-columns: 1fr;
  }
  .music-page .sidebar {
    width: 100%;
  }
  .albums-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .songs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .music-songs-side-decorations,
  .music-side-decoration { display: none; }
}

@media (max-width: 560px) {
  .albums-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .songs-grid,
  .music-videos-grid,
  .videos-grid { grid-template-columns: 1fr; }
  .music-page .inside-box { padding: 20px; }
  .music-flourish-left,
  .music-flourish-right { opacity: .22; }
}

/* ===== MUSIC FIX 22-09 ===== */
.music-page .music-layout { grid-template-columns: 230px minmax(0,1fr); }
.music-page .music-main { grid-column: 2; grid-row: 1; }
.music-page .sidebar { grid-column: 1; grid-row: 1; }

/* Decorations always live below sidebar, never in the content grid. */
.music-left-decorations,
.music-songs-side-decorations {
  position: absolute;
  left: 0;
  top: 0;
  width: 230px;
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.music-left-decorations img,
.music-songs-side-decorations img {
  display: block;
  width: 230px;
  min-height: 0;
  flex: 1 1 0;
  object-fit: cover;
}

/* Songs: GIF is visible from the start; hover only fades it. */
.song-main-gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity .18s ease;
}
.song-card:hover .song-main-gif,
.song-card:focus-visible .song-main-gif { opacity: .48; }
.song-image-placeholder,
.song-hover-gif { display: none !important; }

/* Keep videos in the right-hand panel. */
.music-videos-page .inside-main { grid-column: 2; grid-row: 1; }


/* ========================================
   ANIME — MATEIXA PLANTILLA QUE MANGA
   ======================================== */
body.anime-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}
.anime-page .inside-layout {
  position: relative;
  z-index: 2;
  margin-top: 52px;
}
.anime-page .sidebar,
.anime-page .inside-main {
  position: relative;
  z-index: 3;
}
.anime-flourish {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  display: block;
  height: auto;
}
.anime-flourish-left {
  width: 520px;
  left: -205px;
  top: -150px;
  opacity: .48;
  transform: rotate(-5deg);
}
.anime-flourish-right {
  width: 480px;
  right: -195px;
  bottom: -220px;
  opacity: .38;
  transform: scaleX(-1) rotate(7deg);
}
/* Kuromi ocupa exactament la zona equivalent a Nana. */
.anime-side-decoration {
  position: absolute;
  left: 0;
  top: var(--anime-side-top, 360px);
  width: 230px;
  height: var(--anime-side-height, 230px);
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 4;
}
/* Quatre stickers píxel petits al voltant de la pantalla. */
.anime-sticker {
  position: fixed;
  height: auto;
  z-index: 5;
  pointer-events: none;
}

/* Kuromi, Cinnamoroll i Hello Kitty: visibles però encara com petits detalls. */
.anime-sticker-1 { width: 112px; left: 62px; top: 42px; transform: rotate(-5deg); }
.anime-sticker-2 { width: 106px; right: 68px; top: 112px; transform: rotate(4deg); }
.anime-sticker-4 { width: 112px; left: 68px; bottom: 58px; transform: rotate(3deg); }

/* El gatet queda intencionadament més petit que la resta. */
.anime-sticker-3 { width: 78px; right: 72px; bottom: 148px; transform: rotate(-4deg); }

@media (max-width: 1100px) {
  .anime-flourish-left { width: 390px; opacity: .38; }
  .anime-flourish-right { width: 370px; opacity: .30; }
  .anime-sticker-1 { width: 94px; left: 38px; }
  .anime-sticker-2 { width: 90px; right: 42px; }
  .anime-sticker-4 { width: 94px; left: 42px; }
  .anime-sticker-3 { width: 66px; right: 44px; }
}
@media (max-width: 760px) {
  .anime-side-decoration { display: none; }
  .anime-page .inside-layout { margin-top: 42px; }
  .anime-sticker-1,
  .anime-sticker-2,
  .anime-sticker-4 { width: 72px; opacity: .88; }
  .anime-sticker-3 { width: 52px; opacity: .88; }
}


/* Anime: fons turquesa pastel, només per aquesta secció. */
body.anime-page {
  background: #bfe4e2;
}


/* ========================================
   SERIES — MATEIXA ESTRUCTURA QUE MANGA/ANIME
   ======================================== */
body.series-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: #555257;
}

.series-page .inside-layout {
  position: relative;
  z-index: 2;
  margin-top: 52px;
}

.series-page .sidebar,
.series-page .inside-main {
  position: relative;
  z-index: 3;
}

/* Manté la plantilla però integra els panells amb el fons gris. */
.series-page .sidebar {
  background: rgba(255,255,255,.72);
}
.series-page .inside-box {
  background: rgba(255,255,255,.88);
}
.series-page .inside-tabs a {
  background: rgba(255,255,255,.62);
}
.series-page .inside-tabs a.active {
  background: rgba(255,255,255,.88);
}

/* Floritures vermell vi. */
.series-flourish {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  display: block;
  height: auto;
}
.series-flourish-left {
  width: 520px;
  left: -205px;
  top: -150px;
  opacity: .58;
  transform: rotate(-5deg);
}
.series-flourish-right {
  width: 480px;
  right: -195px;
  bottom: -220px;
  opacity: .50;
  transform: scaleX(-1) rotate(7deg);
}

/* Dos GIFs petits als extrems indicats. */
.series-corner {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  height: auto;
}
.series-corner-klaus {
  width: 105px;
  left: 58px;
  top: 42px;
}
.series-corner-lukes {
  width: 112px;
  right: 62px;
  bottom: 54px;
}

/* Dos GIFs apilats sota el sidebar dins del mateix espai total. */
.series-side-decorations {
  position: absolute;
  left: 0;
  top: var(--series-side-top, 360px);
  width: 230px;
  height: var(--series-side-height, 300px);
  z-index: 4;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  overflow: hidden;
}
.series-side-decorations img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 1100px) {
  .series-flourish-left { width: 390px; opacity: .46; }
  .series-flourish-right { width: 370px; opacity: .40; }
  .series-corner-klaus { width: 90px; left: 38px; }
  .series-corner-lukes { width: 94px; right: 42px; }
}

@media (max-width: 760px) {
  .series-side-decorations { display: none; }
  .series-page .inside-layout { margin-top: 42px; }
  .series-corner-klaus { width: 72px; left: 20px; }
  .series-corner-lukes { width: 76px; right: 20px; }
}