/* Déclaration de la police personnalisée */
@font-face {
  font-family: 'Hellios Gothic';
  src: url('../../-footage-/fonts/hellios-gothic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;

  font-display: swap;
}

.character-series-title {
    padding-bottom: 0px;
    font-family: 'Hellios Gothic', serif;
    color: #9f9fd0;
    font-size: 1.6rem;
    letter-spacing: 0.12em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
	
	    /* ★ Glow identique à The Character Series */
    text-shadow:
      0 0 2px #9f9fd0,
      0 0 6px rgba(159,159,208,0.7),
      0 0 12px rgba(159,159,208,0.5);
}

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

.character-thumb {
    position: relative;
    width: 180px;
    height: 225px;
    overflow: hidden;
    border-radius: 8px;
    transition: box-shadow 0.2s;
    border: 2px solid #bbaeff;
    background: #231642;
    box-shadow: 0 4px 18px 0 #130b22;
    margin-right: 20px;
}
.character-thumb:last-child {
    margin-right: 0;
}
.character-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(10%) brightness(0.95);
    transition: filter 0.2s;
}
.character-thumb:hover img {
    filter: grayscale(0%) brightness(1.05);
}
.character-thumb-caption {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0; /* ← couvre TOUTE la vignette */
    background: rgba(36, 26, 59, 0.92);
    color: #a393c6;
    font-family: 'Hellios Gothic', serif;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-align: center;
    opacity: 0;
    display: flex;                /* Flex pour centrer */
    align-items: center;          /* Centrage vertical */
    justify-content: center;      /* Centrage horizontal */
    transition: opacity 0.22s;
    pointer-events: none;
    padding: 0 32px;              /* Padding seulement sur les côtés */
}
.character-thumb:hover .character-thumb-caption {
    opacity: 1;
}

.character-buttons {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.character-buttons button {
    padding: 14px 28px;
    background: transparent;
    border: 2px solid #a393c6;
    color: #a393c6;
    font-family: 'Hellios Gothic', serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}
.character-buttons button:hover {
    background: #a393c6;
    color: #000;
}

.character-series-body {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 30px;
    position: relative;
}

.character-series-buttons {
    position: absolute;
    right: -176px;
    top: 52%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.character-series-buttons button {
    width: 150px;
    background-color: #000;
    border: 2px solid #a393c6;
    color: #a393c6;
    font-family: 'Hellios Gothic', serif;
    font-size: 1.05rem;
    padding: 12px 0;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.3s, color 0.3s;
}
.character-series-buttons button:hover {
    background: #a393c6;
    color: #000;
}

.character-title-wrapper {
    position: relative;
    top: -40px;
    text-align: center;
}
.character-series-title-outside {
    font-family: 'Aegis Gothic', sans-serif;
    color: white;
    font-size: 28px;
    text-align: center;
    margin-top: 30px;
    margin-bottom: -20px;
}

.character-series-separator {
    width: 70%;
    border: none;
    border-top: 2px solid rgba(163, 147, 198, 0.6);
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

.character-series-description {
    max-width: 500px;
    margin: 43px auto 30px auto; 
    text-align: center;
    font-family: 'Hellios Gothic', serif;
}

.collectibles-button {
    width: 300px;
    display: block;
    margin: 35px auto 25px auto;
    font-size: 1.2rem;
    font-family: 'Hellios Gothic', serif;
    border-radius: 0;
    color: #d4af37;
    background: #23232c !important;
}

.text-container {
    max-width: 700px;
    margin: 0 auto;
}

.character-series-gallery-container {
    width: 860px;
    min-height: unset;             /* plus de hauteur mini */
    margin: 20px auto;
    padding: 40px 100px 24px 100px; /* padding-bottom réduit à 24px */
    background-color: #000;
    border: 4px solid rgba(163, 147, 198, 0.3); /* opacité ajustée ! */
    box-shadow: 0 0 25px rgba(163, 147, 198, 0.25);
    border-radius: 0;
    position: relative;
}

.section-separator {
    border-bottom: 2px solid rgba(163, 147, 198, 0.25);
    width: 90%;
    margin: 40px auto 0;
}

.character-series-buttons-left {
    position: absolute;
    left: -176px;
    top: 52%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.character-series-buttons-left button {
    width: 150px;
    background-color: #000;
    border: 2px solid #a393c6;
    color: #a393c6;
    font-family: 'Hellios Gothic', serif;
    font-size: 1.05rem;
    padding: 12px 0;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.3s, color 0.3s;
}
.character-series-buttons-left button:hover {
    background: #a393c6;
    color: #000;
}




/* Arrondir les boutons */
.character-buttons button,
.character-series-buttons button,
.character-series-buttons-left button {
  border-radius: 5px; /* arrondi subtil */
}

/* 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-img,
.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-img,
.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 img,
.carousel-media-frame video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #191329;
}

.carousel-lightbox-img,
.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;
}


.character-series-title {
    margin-bottom: 36px !important;
}

nav.menu-box li a[href="../../main/the-character-series.html"] {
  border-color: #a393c6 !important; /* violet */
  box-shadow: 0 0 10px 1.2px #a393c6; /* glow violet */
}












/* =========================================================
   RESPONSIVE ONLY — keeps your desktop layout unchanged
   Paste at the very end of css/sub pages/characters.css
   =======================================================*/

/* Tablet & small laptop */

/* === End: Header utils aligned to .menu-box === */

}
/* === End: Header utils anchored to banner === */

/* === End: Header utils anchored to banner (wrapper) === */



/* =============================
   OVERRIDES — Colors & Glow ONLY
   (Placed before responsive)
   ============================= */

/* Title: match The Character Series color + glow */
.character-series-title {
  color: #cfc4ff;
  text-shadow:
    0 0 6px #8ab6ff,
    0 0 14px #8ab6ff,
    0 0 28px #5f5fa0,
    0 0 48px #5f5fa0;
}

/* Buttons (center + sides): same frame color + text color + glow as TCS */
.character-buttons button,
.character-series-buttons button,
.character-series-buttons-left button {
  border-color: #bbaeff;
  color: #cfc4ff;
  text-shadow:
    0 0 6px #8ab6ff,
    0 0 14px #8ab6ff,
    0 0 28px #5f5fa0,
    0 0 48px #5f5fa0;
}

/* Keep hover readable on light background */
.character-buttons button:hover,
.character-series-buttons button:hover,
.character-series-buttons-left button:hover {
  text-shadow: none;
}

/* Thumbnails: add hover glow (TCS) and keep frame color */
.character-thumb:hover {
  box-shadow: 0 0 20px #8ab6ff, 0 0 12px #5f5fa0;
  border-color: #bbaeff;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}



/* Active menu state: “The Character Series” in the top menu (match TCS) */
nav.menu-box li a[href="../../main/the-character-series.html"] {
  color: #cfc4ff !important;
  text-shadow:
    0 0 6px #8ab6ff,
    0 0 14px #8ab6ff,
    0 0 28px #5f5fa0,
    0 0 48px #5f5fa0 !important;
  border-color: #bbaeff !important;
  box-shadow: none !important;
}

/* ===========================
   END OVERRIDES
   =========================== */



/* 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 */
}


.character-series-gallery-container{
  border-radius: 12px !important;
  border-width: 3px !important;
  border-color: rgba(186, 170, 255, 0.90) !important; /* violet lumineux */
  background-color: rgba(0, 0, 0, 0.4) !important;
  box-shadow:
    0 0 12px rgba(156, 140, 255, 0.55),
    0 0 24px rgba(156, 140, 255, 0.35) !important; /* halo violet doux */
  margin-top: -36px; /* remonte le cadre */
}



/* Subtitle frame + text — indigo bleuté avec juste un soupçon de violet */
.subtitle-box {
  border-color: #9fa5f0 !important; /* base bleue, très légère touche violette */
  box-shadow:
    inset 0 0 20px rgba(159, 165, 240, 0.36),
    0 0 12px rgba(159, 165, 240, 0.46);
}

.frame-container .digital-screen-content > .content .subtitle-box .subtitle {
  color: #bcc2ff !important; /* bleu clair avec une nuance violette très subtile */
  text-shadow:
    0 0 7px  #bcc2ff,
    0 0 16px #bcc2ff,
    0 0 30px #7d85e8,
    0 0 48px #5f68cf !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 */
  }
}