/* =========================================================
   The Legend of Eisth — FULL CSS REWRITE (Eisth theme + PFM carousel layout)
   ========================================================= */

/* --- Font --- */
@font-face{
  font-family:'Thunderstrike Halftone';
  src: url('../../-footage-/fonts/thunderstrikehalf.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;

  font-display: swap;
}

/* --- Theme variables --- */
:root{
  --eisth-text:   #ff69b4; /* rose texte/boutons */
  --eisth-border: #ff66cc; /* cadre Eisth (menu / contours) */
  --bg-card:      #231642;
  --glow1: rgba(255, 51, 102, 0.5);
  --glow2: rgba(255, 51, 102, 0.5);
}

/* --- Active menu style (The World of Eisth) --- */
nav.menu-box li.pink-link a{
  font-family:'Thunderstrike Halftone', sans-serif;
  color:#ff69b4;
  text-shadow:
    0 0 8px rgba(255, 51, 102, 0.5),
    0 0 16px rgba(255, 51, 102, 0.5),
    0 0 24px rgba(255, 51, 102, 0.5),
    0 0 32px rgba(255, 51, 102, 0.5);
  position:relative;
  border:2px solid #ff66cc !important;
  border-radius:4px;
  box-shadow:none;
}

/* --- Section title --- */
.character-series-title{
  padding-bottom:0;
  font-family:'Thunderstrike Halftone', serif;
  color:#ff69b4;
  font-size:1.31rem;
  letter-spacing:.12em;
  font-weight:bold;
  text-align:center;
  margin-top:4px;
  margin-bottom:37px;
  text-shadow:0 0 8px var(--glow1),0 0 16px var(--glow2),0 0 24px var(--glow2),0 0 32px var(--glow2);
}

/* --- Main container --- */
.character-series-gallery-container{
  width:860px;
  min-height:unset;
  margin:19.5px auto;
  padding:40px 100px 20px 100px;
  background:#000;
  border:4px solid rgba(163,147,198,.30);
  box-shadow:0 0 25px rgba(163,147,198,.25);
  border-radius:0;
  position:relative;
}

/* --- Body/Gallery --- */
.character-series-body{
  display:flex;
  justify-content:center;
  margin:30px 0 20px;
  position:relative;
}

.character-series-gallery{
  display:flex;
  justify-content:center;
  margin-top:4.5px;
  flex-wrap:nowrap;
  gap:20px;
}

/* --- Thumbs --- */
.character-thumb{
  position:relative;
  width:180px;
  height:225px;
  overflow:hidden;
  border-radius:0;
  transition:box-shadow .2s;
  border:2.5px solid var(--eisth-border);
  background:var(--bg-card);
  box-shadow:0 4px 18px 0 #130b22;
  cursor:pointer;
}
/* Let clicks go to the thumb container so JS sees it */
.character-thumb *{ pointer-events:none; }

.character-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(10%) brightness(.95);
  transition:filter .2s;
}
.character-thumb:hover img{ filter:grayscale(0%) brightness(1.05); }

/* Caption overlay (full) */
.character-thumb-caption{
  position:absolute;
  inset:0;
  background:rgba(40, 10, 30, 0.86);
  color:var(--eisth-text);
  font-family:'Thunderstrike Halftone', serif;
  font-size:.92rem;
  letter-spacing:.08em;
  text-align:center;
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .22s;
  pointer-events:none;
  padding:0 32px;
  text-shadow:0 0 8px var(--glow1),0 0 16px var(--glow2);
}
.character-thumb:hover .character-thumb-caption{ opacity:1; }

/* --- Side buttons (left/right stacks) --- */
.character-series-buttons,
.character-series-buttons-left{
  position:absolute;
  top:51.6%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.character-series-buttons{ right:-176px; }

.character-series-buttons-left{ left:-176px; }

.character-series-buttons button,
/* === Buttons (gauche + droite) — version consolidée & responsive === */

.character-series-buttons button,
.character-series-buttons-left button{
  width: clamp(128px, 14vw, 150px);
  min-height: clamp(35.7px, 4.57vh, 46.7px); /* +0.2px */
min-height: clamp(35.3px, 4.53vh, 46.3px); /* -0.2px */
padding: clamp(11.3px, 1.13vh, 14.3px) 8px; /* -0.2px vertical */
transform: translateY(0.6px); /* ↑ remonte légèrement pour compenser */


  /* Style existant (inchangé) */
  background:#000;
  border:2px solid var(--eisth-border);
  color:var(--eisth-text);
  font-family:'Thunderstrike Halftone', serif;
  font-size:.75rem;
  cursor:pointer;
  transition:background .3s, color .3s, border-color .3s, text-shadow .2s;
  text-shadow:0 0 8px var(--glow1), 0 0 16px var(--glow2), 0 0 24px var(--glow2);
  line-height:1.1;
  text-wrap:balance;
}








.character-series-buttons-left button{ align-self:flex-start; }
.character-series-buttons button{ align-self:flex-end; }
.character-series-buttons button:hover,
.character-series-buttons-left button:hover{
  background:var(--eisth-border);
  color:#231642;
  border-color:#fff;
  text-shadow:none;
}



/* --- Text blocks --- */
.text-container{ max-width:700px; margin:0 auto; }
.character-series-description{
  max-width:500px;
  margin:54.2px auto 28px;
  text-align:center;
  font-family:'Thunderstrike Halftone', serif;
  font-size:.71rem; /* slightly larger than prev .70 for readability */
  line-height:1.28;
  transform: scaleY(1.2);
  transform-origin: center;

}

/* --- Collectibles reveal (PFM look, Eisth font) --- */
/* SAFE rollback + tiny adjustments only */

.collectibles-button{
  width: clamp(220px, 32vw, 300px);
  min-height: clamp(11.5px, 2.55vh, 21.5px);
  padding: 0 clamp(8px, 1.5vw, 12px);
  margin: clamp(23px, 4.5vh, 51px) auto clamp(18px, 3vh, 32px) auto; /* -3px en haut */
  font-size: .8rem;
  line-height: clamp(11.5px, 2.55vh, 21.5px);
  font-family: 'Thunderstrike Halftone', serif;
  border-radius: 0;
  color: #d4af37;
  background: #23232c !important;
  display: flex;
  align-items: center; /* garde le centrage vertical */
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
  transform: translateY(0.25px); /* ne pas toucher */
}



/* Ajustement du texte à l’intérieur */
.collectibles-button span {
  display: inline-block;
  transform: translateY(0.5px); /* ajuste finement le centrage vertical */
}



/* --- Back link --- */
.go-back-btn{
  display:inline-block;
  background:rgba(255, 102, 204, 0.05);
  border:2px solid var(--eisth-border);
  color:var(--eisth-text);
  font-family:'Thunderstrike Halftone', serif;
  font-size:.7rem;
  padding:16.8px 25px;
  letter-spacing:.05em;
  max-width:500px;
  margin-top:12px;
  text-decoration:none;
  text-shadow:0 0 8px var(--glow1),0 0 16px var(--glow2),0 0 24px var(--glow2);
  transition:background .3s, color .3s, border-color .3s, text-shadow .2s;
}
.go-back-btn:hover{ background:var(--eisth-border); color:#231642; border-color:#fff; text-shadow:none; }

/* --- Separators --- */
.character-series-separator{
  width:70%;
  border:none;
  border-top:2px solid rgba(163,147,198,.6);
  margin-top:40px;
  margin-left:auto;
  margin-right:auto;
}
.section-separator{
  border-bottom:2px solid rgba(163,147,198,.25);
  width:90%;
  margin:34px auto 0;
}

/* =========================================================
   Carousel / Lightbox — PFM layout, Eisth styling (CSS-only)
   ========================================================= */


/* Carousel/Lightbox */
.carousel-lightbox-overlay {
    position: fixed;
    z-index: 10001;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.carousel-lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.carousel-lightbox-title {
    color: #a393c6;
    font-size: 1.19rem;
    font-family: 'Hellios Gothic', serif;
    text-align: center;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    padding: 22px 0 18px 0;  
}
.carousel-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.7rem;
    background: none;
    border: none;
    color: #a393c6;
    cursor: pointer;
    padding: 8px 18px;
    z-index: 10;
    opacity: 0.82;
    transition: color 0.15s, opacity 0.2s;
}
.carousel-lightbox-arrow.left { left: 0; }
.carousel-lightbox-arrow.right { right: 0; }
.carousel-lightbox-arrow:hover { color: #d4af37; opacity: 1; }
.carousel-lightbox-content .carousel-lightbox-close {
    position: absolute;
    top: -46px;
    right: -38px;
    font-size: 2.2rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 12000;
    opacity: 0.90;
    transition: color 0.18s, opacity 0.18s;
}
.carousel-lightbox-video {
    border-radius: 0 !important;
}
.carousel-media-frame {
    display: inline-block;
    background: #000;
    border:  1.5px solid rgba(188,188,188,0.68);
    border-radius: 0;
    padding: 7px;
    margin: 0 auto;
}
.carousel-lightbox-video {
    border: none !important;
    border-radius: 0 !important;
    background: #000;
    display: block;
    margin: 0;
}
.carousel-lightbox-close {
    position: absolute !important;
    top: -46px !important;
    right: -38px !important;
    z-index: 12000 !important;
    font-size: 2.2rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    opacity: 0.90;
    transition: color 0.18s, opacity 0.18s;
}
.carousel-lightbox-content {
    position: relative;
    background: #000;
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.26);
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 320px;
    max-width: 98vw;
    max-height: 94vh;
    justify-content: center;
}
.carousel-media-frame {
    width: 552px;           /* ← ici tu mets la largeur désirée */
    height: 690px;          /* ← ici tu mets largeur × 1.25 pour respecter le ratio */
    max-width: 96vw;        /* ← pour garder le responsive si l’écran est petit */
    max-height: 90vh;       /* ← pour ne pas dépasser la hauteur de l’écran */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #191329;
    margin: 0 auto;
    overflow: hidden;
    border: 1.5px solid rgba(188,188,188,0.68);
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}
.carousel-media-frame video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #191329;
}
.carousel-lightbox-video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    background: #191329 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}










/* Media frame */

.carousel-media-frame img,

.carousel-lightbox-img,


/* Header utilities are hidden under overlay */
body:has(.carousel-lightbox-overlay.active) .header-utils,
body:has(.carousel-lightbox-overlay.active) .sign-in,
body:has(.carousel-lightbox-overlay.active) .signin,
body:has(.carousel-lightbox-overlay.active) .cart,
body:has(.carousel-lightbox-overlay.active) .basket,


/* Keep layout stable when scrollbars appear/disappear */
html{ scrollbar-gutter: stable; }

/* Do not let page overlay block clicks over the lightbox */
.overlay{ pointer-events:none !important; }

/* Unclip containers that used to crop arrows/close — only while open */
body:has(.carousel-lightbox-overlay.active) .character-thumb,


/* Optional: visually freeze background when overlay open (CSS-only) */
html:has(.carousel-lightbox-overlay.active),


/* =========================================================
   Responsive
   ========================================================= */

/* ===== Responsive (mirrored from characters.css) ===== */

@media (max-width: 1100px) {

  /* Container breathes but keeps your style */
  .character-series-gallery-container {
    width: 96%;
    padding: 28px 20px 28px 20px;
  }

  /* Stack the side buttons under the title, not absolutely placed */
  .character-series-buttons,
  .character-series-buttons-left {
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    margin: 16px 0 6px 0;
  }

  .character-series-buttons button,
  .character-series-buttons-left button {
    width: auto;            /* let buttons size naturally */
    min-width: 150px;
  }

  /* Center the gallery and allow wrapping */
  .character-series-gallery {
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 12px;
  }

  /* remove the desktop right-margin that created the 3-in-a-row lock */
  .character-thumb { margin-right: 0; }
}

@media (max-width: 800px) {
  /* Make thumbs scale with the screen and keep their 180x225 ratio */
  .character-thumb {
    width: 44vw;
    height: calc(44vw * 1.25); /* ~225/180 ratio */
  }

  .text-container { padding: 0 14px; }
}

@media (max-width: 520px) {
  /* Stack buttons vertically for tap comfort */
  .character-series-buttons,
  .character-series-buttons-left {
    flex-direction: column;
    gap: 10px;
  }

  .character-series-title { font-size: 1.35rem; }

  .character-series-gallery {
    gap: 14px;
  }

  .character-series-description {
    margin: 28px auto 20px auto;
    padding: 0 12px;
    font-size: 0.98rem;
  }

  .collectibles-button {
    width: 92%;
    max-width: 380px;
  }
}

@media (max-width: 1100px) {

  /* Le conteneur garde ton style mais passe en pile verticale */
  .character-series-body {
    display: flex;
    flex-direction: column;
    align-items: center; /* centre la colonne d’images */
  }

  /* Galerie = colonne centrée */
  .character-series-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    margin-top: 12px;
  }

  /* On “défixe” les blocs boutons et on les aligne sous la galerie */
  .character-series-buttons,
  .character-series-buttons-left {
    position: static;        /* enlève les positions absolues */
    transform: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;         /* permet 1 ou 2 lignes si besoin */
    justify-content: center; /* CENTRE les boutons */
    gap: 12px;
    margin: 16px 0 0 0;      /* juste sous la colonne d’images */
  }

  /* Taille confortable des boutons */
  .character-series-buttons button,
  .character-series-buttons-left button {
    min-width: 170px;
  }

  /* Si tes vignettes doivent aussi rétrécir un peu */
  .character-thumb {
    width: 260px;                 /* ajuste si tu veux plus petit */
    height: calc(260px * 1.25);   /* conserve le ratio 180x225 */
  }
}

@media (max-width: 520px) {
  .character-series-buttons button,
  .character-series-buttons-left button {
    min-width: 140px;
  }
  .character-series-gallery { gap: 14px; }
}





/* Stronger specificity for the title above the thumbnails (Power From Moon) */
.character-series-gallery-container .character-series-title {
  color: #cfc4ff;
  text-shadow:
    0 0 6px #8ab6ff,
    0 0 14px #8ab6ff,
    0 0 28px #5f5fa0,
    0 0 48px #5f5fa0;
}

@media (max-width: 1100px) {

  /* Container breathes but keeps your style */
  .character-series-gallery-container {
    width: 96%;
    padding: 28px 20px 28px 20px;
  }

  /* Stack the side buttons under the title, not absolutely placed */
  .character-series-buttons,
  .character-series-buttons-left {
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    margin: 16px 0 6px 0;
  }

  .character-series-buttons button,
  .character-series-buttons-left button {
    width: auto;            /* let buttons size naturally */
    min-width: 150px;
  }

  /* Center the gallery and allow wrapping */
  .character-series-gallery {
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 12px;
  }

  /* remove the desktop right-margin that created the 3-in-a-row lock */
  .character-thumb { margin-right: 0; }
}

/* Large phones / small tablets */
@media (max-width: 800px) {
  /* Make thumbs scale with the screen and keep their 180x225 ratio */
  .character-thumb {
    width: 44vw;
    height: calc(44vw * 1.25); /* ~225/180 ratio */
  }

  .text-container { padding: 0 14px; }
}

/* Phones */
@media (max-width: 520px) {
  /* Stack buttons vertically for tap comfort */
  .character-series-buttons,
  .character-series-buttons-left {
    flex-direction: column;
    gap: 10px;
  }

  .character-series-title { font-size: 1.35rem; }

  .character-series-gallery {
    gap: 14px;
  }

  .character-series-description {
    margin: 28px auto 20px auto;
    padding: 0 12px;
    font-size: 0.98rem;
  }

  .collectibles-button {
    width: 92%;
    max-width: 380px;
  }
}

/* ======= Responsive : images en colonne + boutons centrés en bas ======= */
@media (max-width: 1100px) {

  /* Le conteneur garde ton style mais passe en pile verticale */
  .character-series-body {
    display: flex;
    flex-direction: column;
    align-items: center; /* centre la colonne d’images */
  }

  /* Galerie = colonne centrée */
  .character-series-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    margin-top: 12px;
  }

  /* On “défixe” les blocs boutons et on les aligne sous la galerie */
  .character-series-buttons,
  .character-series-buttons-left {
    position: static;        /* enlève les positions absolues */
    transform: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;         /* permet 1 ou 2 lignes si besoin */
    justify-content: center; /* CENTRE les boutons */
    gap: 12px;
    margin: 16px 0 0 0;      /* juste sous la colonne d’images */
  }

  /* Taille confortable des boutons */
  .character-series-buttons button,
  .character-series-buttons-left button {
    min-width: 170px;
  }

  /* Si tes vignettes doivent aussi rétrécir un peu */
  .character-thumb {
    width: 260px;                 /* ajuste si tu veux plus petit */
    height: calc(260px * 1.25);   /* conserve le ratio 180x225 */
  }
}

/* Petits téléphones : boutons sur deux lignes propres */
@media (max-width: 520px) {
  .character-series-buttons button,
  .character-series-buttons-left button {
    min-width: 140px;
  }
  .character-series-gallery { gap: 14px; }
}

/* safety: l’overlay ne capte pas les clics */
.overlay { pointer-events: none !important; }



@media (max-width:1100px){
  /* Le body devient une colonne centrée */
  .character-series-body{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* La galerie = pile verticale parfaitement centrée sous le titre */
  .character-series-gallery{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    margin: 12px auto 0 auto !important; /* centre horizontalement */
  }

  /* Les boutons latéraux descendent sous la galerie, centrés */
  .character-series-buttons,
  .character-series-buttons-left{
    position: static !important;
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 16px 0 0 !important;
  }

  /* On enlève tout décalage résiduel sur les vignettes */
  .character-thumb{ margin: 0 !important; }
}


/* Glow bleu/violet pour tous les boutons principaux */
.character-buttons button,
.character-series-buttons button,
.character-series-buttons-left button {
  background: #000; /* fond noir comme Unveil Other Stories */
  color: #cfc4ff;
  border: 2px solid #bbaeff;
  border-radius: 5px;
  box-shadow: 0 0 8px #9f9fd0; /* glow autour du bouton */
  text-shadow:
    0 0 6px  #8ab6ff,
    0 0 14px #8ab6ff,
    0 0 28px #5f5fa0,
    0 0 48px #5f5fa0;
  transition: background 0.2s, color 0.2s, border-color 0.2s, text-shadow 0.2s;
}

.character-buttons button:hover,
.character-series-buttons button:hover,
.character-series-buttons-left button:hover {
  background: #a393c6;
  color: #231642;
  border-color: #fff;
  text-shadow: none;
}


/* “UNVEIL OTHER STORIES” button (go-back) — color + glow + frame */


/* ================================
   Bouton Go Back
   ================================ */
.go-back-btn {
  display: inline-block;
  padding: 14px 32px;
  margin-top: 12px;

  font-family: 'Hellios Gothic', serif;
  font-size: 1.07rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;

  background: #000; /* fond noir comme Switch Universe */
  color: #cfc4ff;
  border: 2px solid #bbaeff;
  border-radius: 5px;

  box-shadow: 0 0 8px #9f9fd0; /* glow autour du bouton */
  text-shadow:
    0 0 6px  #8ab6ff,
    0 0 14px #8ab6ff,
    0 0 28px #5f5fa0,
    0 0 48px #5f5fa0;

  position: relative;
  z-index: 10; /* au-dessus du digital screen */
  transition: background 0.2s, color 0.2s, border-color 0.2s, text-shadow 0.2s;
}

.go-back-btn:hover {
  background: #a393c6;
  color: #231642;
  border-color: #fff;
  text-shadow: none;
}





/* ================================
   Cadre Power From Moon au-dessus du digital screen
   ================================ */
.character-series-gallery-container,
.collectibles-button {
  position: relative;
  z-index: 2 !important; /* > digital-screen (z-index:1) */
}

/* ================================
   Stacking & layout — néons intacts
   ================================ */
.frame-container {
  padding-bottom: 498px; /* ajuste si besoin */
}

/* Galerie PowerFrameMoon — cadre rose lumineux */
.character-series-gallery-container{
  border-radius: 12px !important;
  border-width: 3px !important;
  border-color: rgba(255, 102, 204, 0.90) !important; /* rose #ff66cc ~90% */
  background-color: rgba(0, 0, 0, 0.4) !important;    /* noir ~40% */
  box-shadow:
    0 0 12px rgba(255, 119, 192, 0.55),
    0 0 24px rgba(255, 119, 192, 0.35) !important;     /* halo rose */
  margin-top: -36px; /* remonte le cadre */
}



/* ——— ICI: cadre Follow the Candle — version rose clair uniforme ——— */
.subtitle-box {
  position: relative;
  overflow: hidden;
  border-color: #ffb3e0;  /* rose clair */
  box-shadow:
    0 0 8px rgba(255, 179, 224, 0.45),
    0 0 16px rgba(255, 128, 204, 0.45);
}

.subtitle-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 4px,
    rgba(255, 179, 224, 0.20) 4px,   /* rayures rose clair */
    rgba(255, 179, 224, 0.20) 6px
  );
  z-index: 0;
}

.subtitle-box .subtitle {
  position: relative;
  z-index: 1;
  color: #ffb3e0 !important; /* texte rose clair */
  text-shadow:
    0 0 4px #ffb3e0,
    0 0 10px #ff80cc,
    0 0 18px #ff80cc !important;
}






/* === CTAs Eisth — mêmes couleurs/glow que WoE, sans changer la taille === */
/* Cible: Lore, Behind the Scenes, Shop Now, Watch Trailer, Ignite, Other Stories... */
:root { --neon-pink:#ff66cc; --neon-pink-strong:#ff3399; }

.character-series-gallery-container .character-series-buttons button,
.character-series-gallery-container .character-series-buttons-left button,
.go-back-btn {
  /* Couleurs WoE */
  color: #ff69b4 !important;
  background: #000 !important;

  /* Bordure: même couleur (on ne change PAS l’épaisseur) */
  border-color: var(--neon-pink) !important;

  /* Glow rose */
  box-shadow: 0 0 8px var(--neon-pink) !important;
  text-shadow:
    0 0 8px rgba(255, 51, 102, 0.5),
    0 0 16px rgba(255, 51, 102, 0.5),
    0 0 24px rgba(255, 51, 102, 0.5),
    0 0 32px rgba(255, 51, 102, 0.5) !important;

  /* Coins arrondis WoE — optionnel (n’affecte pas la taille) */
  border-radius: 5px !important;
}

/* (on garde tes :hover existants; aucun :hover défini ici) */



/* === Override: titre The Legend of Ys en rose identique aux boutons === */
.character-series-gallery-container .character-series-title {
  color: #ff69b4 !important; /* même rose que les boutons */
  text-shadow:
    0 0 8px rgba(255, 51, 102, 0.5),
    0 0 16px rgba(255, 51, 102, 0.5),
    0 0 24px rgba(255, 51, 102, 0.5),
    0 0 32px rgba(255, 51, 102, 0.5) !important;
}


/* === Vignettes The Legend of Eisth — même arrondi que WoE (5px) === */
.character-thumb {
  border-radius: 8px !important;
}


/* === Rétablir le hover d'origine sur Lore, Behind the Scenes, Watch Trailer, Shop Now === */
.character-series-gallery-container .character-series-buttons button:hover,
.character-series-gallery-container .character-series-buttons-left button:hover,
.go-back-btn:hover {
  background: #ff66cc !important; /* remplissage rose */
  color: #231642 !important;      /* texte sombre */
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}



/* Responsive adjustments */
@media (max-width: 768px) {
  .frame-container {
    padding-bottom: 80px;
  }
}

@media (max-width: 980px) {
  .character-series-gallery-container {
    width: 100%;
    max-width: 860px;
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-height: 800px) {
  .digital-screen-content {
    min-height: 360px;
  }
}

/* Desktop widening */
@media (min-width: 1101px) {
  .character-series-gallery-container {
    width: 940px !important;     /* +20px vs 920 */
    max-width: 940px !important; /* si c’est max-width qui s’applique */
  }
}