/**
 * =============================================================================
 * This is the file where all your styling should go in.
 * Instead of modifying the styles found in the monogatari.css file or others,
 * you should overwrite those styles in this file.
 *
 * The CSS selectors shown are not an extensive list but they are the most
 * common you might want to change. To find what other elements are available,
 * you can take a look at the monogatari.css file or use your browser's dev
 * tools to inspect the elements.
 * =============================================================================
**/

@font-face {
  font-family: "StyleScript";
  src: url("./assets/fonts/StyleScript-Regular.ttf") format("ttf");
}

/**
 * ===========================
 * General Styling
 * ===========================
**/

/* General Style */
body {
}

/* Simple Button styles*/
button {
  font-size: inherit; /* Inherit the font size from the wrapper */
  padding: 10px; /* Adjust padding for button appearance */
  text-align: center; /* Center text inside buttons */
  background-color: #fffbf9;
  color: #4d4d4d;
}

/* Simple Button Style on Hover */
button:hover {
  color: #4d4d4d;
  background-color: #70cccc;
}

/* General Styling for Menu Screens */
[data-screen] {
}

/**
 * ===========================
 * Main Menu Styling
 * ===========================
**/

/* Main Menu Styling */
[data-screen="main"] {
  background-image: url("bg-whiteboard-m.jpg"); /* Chemin vers votre image */
  background-size: cover; /* Pour que l'image occupe tout l'écran */
  background-position: center; /* Centrer l'image */
  background-repeat: no-repeat; /* Éviter que l'image se répète */
  background-attachment: fixed; /* Fixer l'image en arrière-plan */
}

[data-screen="main"] #main-text {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically (optional) */
  height: 100vh; /* Full viewport height */
  text-align: center;
}

[data-screen="main"] h1 {
  font-family: "Playwrite IE Guides", serif;
  font-weight: bold;
  font-size: 4em;
  color: #4d4d4d;
  margin-bottom: 1rem; /* Add spacing */
}

[data-screen="main"] h2 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 1.5em;
  color: #4d4d4d;
  margin-bottom: 1rem;
}

[data-screen="main"] p {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 1em;
  color: #4d4d4d;
}

[data-screen="main"] h1,
[data-screen="main"] h2,
[data-screen="main"] p {
  max-width: 80%; /* Restrict width (adjust as needed) */
  margin: 0 auto 1rem auto; /* Center horizontally + spacing */
}

[data-component="main-menu"] {
  position: absolute;
  top: calc(75%) !important; /* 2/3 de la hauteur de l'écran */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row; /* Les boutons en ligne */
  align-items: center; /* Centre les boutons verticalement */
  justify-content: space-around;
  width: 100%;
  bottom: calc(25%) !important;
}

/* Main Menu Buttons Styling */
[data-screen="main"] button {
  background-color: #ffffff00 !important;
  color: #444444ad !important;
  font-family: "Playwrite IE Guides", serif;
  font: bold;
  font-size: 1.5em;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

[data-screen="main"] button:hover {
  background-color: #ffffff00 !important;
  color: #4d4d4d !important;
  font-family: "Playwrite IE Guides", serif;
  font: bold;
  font-size: 1.5em;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/**
 * ===========================
 * Save and Load Menus Styling
 * ===========================
**/

/* Slots Style */
[data-component="save-slot"] figure {
}

/* Slot's Image Style */
[data-component="save-slot"] img {
}

/* Slots Title Style */
[data-component="save-slot"] figcaption {
}

/* Slots Delete Button Style */
[data-component="save-slot"] button {
}

/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/

[data-component="choice-container"] {
  top: 33%;
}

/* Choice Buttons style */
[data-component="choice-container"] button {
  background-color: #fffbf9;
  color: #4d4d4d;
  display: flex; /* Active le flexbox */
  align-items: center; /* Centre le contenu verticalement */
  justify-content: center; /* Centre le contenu horizontalement */
  height: 100%; /* Les boutons auront tous la même hauteur */
}

/* Choice Button Style on Hover */
[data-component="choice-container"] button:hover {
  color: #ffffff;
  background-color: #70cccc;
}

[data-component="choice-container"] > button {
  height: auto; /* Pour que la hauteur du plus grand bouton s'applique */
}

/* Text Box styling */
[data-component="text-box"] {
  border-color: #4d4d4d;
  background-color: #fffbf9;
  color: #4d4d4d;
  border-top: solid 5px #4d4d4d;
}

/* Character Name Style */
[data-ui="who"] {
}

/* Style for Centered Text */
[data-component="centered-dialog"] {
}

/* Character Images Styles */
[data-screen="game"] [data-character] {
}

/* Other Images Styles */
[data-screen="game"] [data-image] {
}

/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* These styles are applied to the Mobile version of the Quick Menu */

/* Quick Menu Style */
[data-component="quick-menu"] {
}

/* Quick Menu Buttons Style */
[data-component="quick-menu"] span {
}

/* Quick Menu Buttons Style on Hover */
[data-component="quick-menu"] span:hover {
}

/* Quick Menu Buttons Icon Style */
[data-component="quick-menu"] > span > .fa {
}

[data-open="save"] {
  display: none;
}

[data-open="load"] {
  display: none;
}

[data-action="distraction-free"] {
  display: none;
}

/**
 * ===========================
 * Character Styling
 * ===========================
**/
/* Character position */

[data-sprite].left {
  left: 0% !important;
  right: auto !important;
}

[data-sprite].right {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  left: auto;
  right: 0% !important;
}

/**
 * ===========================
 * Range Styling
 * ===========================
**/

/* Use the background property to set a color for these */
/* Définition des couleurs */
:root {
  --slider-color-light: #ff8c8c; /* Couleur plus claire pour la barre */
  --slider-color-dark: #e50707; /* Couleur plus foncée pour le dot */
}

/* Style de la barre (track) du slider */
input[type="range"]::-webkit-slider-runnable-track {
  background: var(--slider-color-light);
  height: 5px;
  border-radius: 5px;
}

input[type="range"]::-moz-range-track {
  background: var(--slider-color-light);
  height: 5px;
  border-radius: 5px;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: var(--slider-color-light);
}

/* Style du curseur (dot) */
input[type="range"]::-webkit-slider-thumb {
  background: var(--slider-color-dark);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  cursor: pointer;
  margin-top: -5px; /* Ajuste le positionnement */
}

input[type="range"]::-moz-range-thumb {
  background: var(--slider-color-dark);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

input[type="range"]::-ms-thumb {
  background: var(--slider-color-dark);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Ajout d'une légère ombre sur le curseur pour un effet visuel */
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 5px rgba(229, 7, 7, 0.5);
}

[data-icon="arrow-left"] {
  color: white;
}
/**
 * ===========================
** Custom Focus character sprite **
* ===========================
**/

/* Ensure the focus class has priority */
/* Ensure the focus class adds a white outline without affecting the character */
img.focus {
  /* Premier contour NET (3 fois plus épais) */
  filter: drop-shadow(3px 3px 0px rgb(255, 255, 255))
    drop-shadow(-3px -3px 0px rgb(255, 255, 255))
    drop-shadow(3px -3px 0px rgb(255, 255, 255))
    drop-shadow(-3px 3px 0px rgb(255, 255, 255))
    /* Deuxième contour moins flou et pulsant */
    drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.8));

  animation: glow-pulse 1s ease-in-out infinite alternate;
}

/* Animation du deuxième contour pulsant */
@keyframes glow-pulse {
  0% {
    filter: drop-shadow(3px 3px 0px rgb(255, 255, 255))
      drop-shadow(-3px -3px 0px rgb(255, 255, 255))
      drop-shadow(3px -3px 0px rgb(255, 255, 255))
      drop-shadow(-3px 3px 0px rgb(255, 255, 255)) /* Glow plus sharp */
      drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.8));
  }

  100% {
    filter: drop-shadow(3px 3px 0px rgba(84, 202, 249, 1))
      drop-shadow(-3px -3px 0px rgba(84, 202, 249, 1))
      drop-shadow(3px -3px 0px rgba(84, 202, 249, 1))
      drop-shadow(-3px 3px 0px rgba(84, 202, 249, 1))
      /* Glow plus net et légèrement plus grand */
      drop-shadow(0px 0px 16px rgba(84, 202, 249, 1));
  }
}

/**
 * ===========================
** Custom Score Chart Component **
* ===========================
**/

[data-component="score-chart"] {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  position: fixed; /* Fix the component to the screen */
  top: 0; /* Start at the top */
  left: 0; /* Start at the left */
  background: rgba(0, 0, 0, 0.5); /* Add a semi-transparent background */
  z-index: 1000; /* Ensure it appears above other elements */
}

.score-chart {
  display: flex;
  flex-direction: column; /* Organize elements vertically */
  align-items: center; /* Center items horizontally */
  justify-content: flex-start; /* Align content to the top */
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 45px;
  max-width: 90%; /* Prevent the container from exceeding screen width */
  max-height: 90%; /* Prevent the container from exceeding screen height */
  overflow-y: auto; /* Allow vertical scrolling if content overflows */
}

#percentage-display {
  font-size: 3rem; /* Adjust size for readability */
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

#skills-container {
  display: flex;
  flex-wrap: wrap; /* Permet de passer à une nouvelle ligne si nécessaire */
  justify-content: center; /* Centre les jauges horizontalement */
  align-items: center; /* Centre les jauges verticalement */
  gap: 10px; /* Espacement entre les jauges */
  padding: 10px; /* Espacement autour du conteneur */
  width: 100%;
  box-sizing: border-box;
}

#skills-container > div {
  display: flex;
  flex-direction: column; /* Organiser la jauge et le texte verticalement */
  align-items: center;
  gap: 10px; /* Espacement entre la jauge et le label */
  flex: 1 1 calc(20% - 20px); /* Chaque jauge occupe 20% moins l'espace du gap */
  max-width: 150px; /* Limite la taille maximale des jauges */
}

.progressbar-container {
  width: 100%;
  max-width: 150px; /* Taille maximale pour les petits écrans */
  aspect-ratio: 1 / 1; /* Garde la jauge carrée */
  display: flex;
  justify-content: center;
  align-items: center;
}

.progressbar-container svg {
  width: 100%;
  height: 100%;
}

.progressbar-text {
  font-size: 1rem; /* Taille du texte des scores */
  font-weight: bold;
  text-align: center;
}

#skills-container > div > div:first-child {
  font-size: 1rem; /* Taille pour les labels des soft skills */
  font-weight: bold;
  text-align: center;
}

/**
 * ===========================
** Custom **
* ===========================
**/

/* Fullscreen Images eg: blue-alert*/
.full-s {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* Ajuste l'image pour couvrir tout l'écran */
}

/* Changement colors button menu individually*/

span[data-string="Settings"]:hover {
  color: #e50707;
}

span[data-string="Help"]:hover {
  color: #70cccc;
}

/* Hide paramatrage useless */
[data-string="Voice"],
[data-string="Video"],
[data-target="voice"],
[data-target="video"],
[data-settings="auto-play-speed"],
[data-action="dialog-log"],
[data-action="auto-play"] {
  display: none;
}

/* When a choice container appears, hide all character images */
[data-component="choice-container"] ~ img,
[data-component="choice-container"] + img {
  opacity: 0 !important;
  transition: opacity 0.3s ease-in-out !important; /* Smooth fade out effect */
}

/* Style pour le bouton Tutoriel plus grand */

choice-container [data-content="wrapper"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  max-height: none; /* Supprime la limite de hauteur */
  height: auto; /* Ajuste la hauteur en fonction du contenu */
  font-size: calc(0.9em * (75% / 100%));
  line-height: 1.2;
  justify-content: space-around;
}

choice-container {
  display: flex !important;
  flex-direction: column !important ; /* Force l’image au-dessus du texte */
  align-items: center !important;
  justify-content: center !important;
  width: 90%;
  overflow-y: visible !important;
}

.big-button {
  display: flex;
  justify-content: center; /* Centre le contenu horizontalement */
  align-items: center; /* Centre verticalement */
  text-align: center;
  font-size: 1.7em; /* Ajuste la taille du texte */
  padding: 15px 30px;
  border-radius: 8px;
  margin: 10px;
  flex-direction: column; /* Force les éléments internes à s'empiler verticalement */
}

.big-button .choice-container img {
  max-width: 100%; /* Empêche l'image de dépasser */
  height: auto; /* Conserve les proportions */
  margin-bottom: 20px; /* Espace entre l'image et les boutons */
}

.big-button .choice-container {
  display: flex !important;
  flex-direction: column; /* Organise les éléments en colonne */
  align-items: center; /* Centre horizontalement */
  justify-content: center; /* Centre verticalement */
  text-align: center;
}

.choice-icon {
  filter: invert(0.2); /* Transforme noir en gris */
  opacity: 0.9; /* Régle la transparence */
  position: initial !important;
  width: 80px; /* Ajuste la taille de l’image */
  height: auto; /* Garde les proportions */
  margin-bottom: 10px; /* Ajoute de l’espace entre l’image et le texte */
  display: block; /* Empêche les bugs de positionnement */
}

.big-button:hover .choice-icon {
  filter: invert(1); /* Devient blanc */
  opacity: 1; /* Pleine opacité */
}

choice-container button {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInButton 0.5s ease-in-out forwards;
}

/* Ajout de `>` pour s'assurer que seuls les boutons directs sont ciblés */
choice-container > div > button:nth-child(1) {
  animation-delay: 0.5s;
}

choice-container > div > button:nth-child(2) {
  animation-delay: 1s;
}

choice-container > div > button:nth-child(3) {
  animation-delay: 1.5s;
}

choice-container > div > button:nth-child(4) {
  animation-delay: 2s;
}

@keyframes fadeInButton {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/** Medium Screens, Phablets (601px) **/
@media screen and (min-width: 37.56255em) {
  /* Styles for the desktop version of the Quick Menu */

  /* Quick Menu Style */
  [data-component="quick-menu"] {
    justify-content: space-around;
  }

  /* Quick Menu Buttons Style */
  [data-component="quick-menu"] span {
  }

  /* Quick Menu Buttons Style on Hover */
  [data-component="quick-menu"] span:hover {
  }
}

/** Medium Devices, Tablets (992px)**/
@media screen and (min-width: 62em) {
  choice-container {
    width: 90% !important;
  }
  [data-screen="main"] h1 {
    font-size: 2em;
  }
}

/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
@media screen and (min-width: 75em) {
  choice-container [data-content="wrapper"] {
    width: 90% !important;
  }
  [data-screen="main"] h1 {
    font-size: 4em;
  }
}

/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
@media screen and (min-width: 120em) {
  choice-container {
    width: 90% !important;
  }

  [data-screen="main"] h1 {
    font-size: 5em;
  }
}

/** Retina Screen , Large Devices, Wide Screens(2560px) **/
@media screen and (min-width: 160em) {
  [data-screen="main"] h1 {
    font-size: 6em;
  }
}

/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {
  [data-screen="main"] h1 {
    font-size: 8em;
  }
}

/** 5k Screens, Large Devices, Wide Screens (5000px) **/
@media screen and (min-width: 312.5em) {
  [data-screen="main"] h1 {
    font-size: 9em;
  }
}

/** 8k Screens, Large Devices, Wide Screens (8000px) **/
@media screen and (min-width: 500em) {
  [data-screen="main"] h1 {
    font-size: 10em;
  }
}