/* ================================
   12. WIDGETS DE JEU
   ================================ */

/* Contraintes */
.constraints-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.constraint-box {
  background-color: #444;
  color: #fff;
  padding: 0.75rem 1rem;
  border-left: 4px solid #ff6600;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  min-width: 150px;
  box-sizing: border-box;
}

/* Points gagnés */
.points-box {
  background-color: #4a4;
  color: #fff;
  padding: 1rem;
  border-left: 4px solid #4ab34a;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  max-width: 300px;
  margin: 1rem auto;
  box-sizing: border-box;
}

/* Compte à rebours */
.timer-box {
  background-color: #a33;
  color: #fff;
  padding: 1rem;
  border-left: 4px solid #b34a4a;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  max-width: 220px;
  margin: 1rem auto;
  box-sizing: border-box;
  animation: pulse 1s infinite alternate;
}

/* Contrôles du chrono */
.chrono-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.chrono-controls .btn {
  flex: 1 1 auto;
  max-width: 120px;
  padding: 0.5rem 1rem;
}

/* Résultats unifiés */
.chrono-unified-box {
  background-color: #333;
  color: #fff;
  padding: 1rem;
  border-left: 4px solid #ffbb00;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

/* Résultats détaillés */
.chrono-results-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.chrono-dice-result,
.repetition-box {
  background-color: #333;
  color: #fff;
  padding: 0.75rem 1rem;
  border-left: 4px solid #4ab34a;
  border-radius: 6px;
  font-weight: bold;
  box-sizing: border-box;
}

.loader-waiting {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0;
}

.loader-waiting span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  background-color: #bf40ff;
  box-shadow: 0 0 8px #bf40ff;
  animation: pulse 1.2s infinite ease-in-out;
}

.loader-waiting span:nth-child(2) { animation-delay: 0.2s; }
.loader-waiting span:nth-child(3) { animation-delay: 0.4s; }


/* container de base */
.difficulty-container {
  border: 1px solid #555;
  min-width: 300px;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  display: inline-block;
  /* couleur de fond par défaut si tu veux */
  background-color: #333;
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Conteneur général */
.difficulty-card {
  display: flex;
  background: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  overflow: hidden;
  margin: 1rem auto;
  max-width: 350px;
}

/* La bande de couleur à gauche */
.difficulty-strip {
  width: 6px;
  background: var(--diff-color);
}

/* Contenu texte */
.difficulty-content {
  padding: 0.8rem 1rem;
  flex: 1;
}

/* Header avec titre + badge */
.difficulty-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.difficulty-title {
  font-size: 0.95rem;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.difficulty-badge {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.2rem;
  text-align: center;
  font-weight: bold;
  border-radius: 4px;
  background: var(--diff-color);
  color: #111;
}

/* Texte de description */
.difficulty-text {
  font-size: 0.9rem;
  color: #ddd;
  line-height: 1.4;
}

/* Variables de couleurs par niveau */
.difficulty-1 { --diff-color: #0057b8; } /* bleu */
.difficulty-2 { --diff-color: #2ca02c; } /* vert */
.difficulty-3 { --diff-color: #d4a017; } /* jaune */
.difficulty-4 { --diff-color: #b22222; } /* rouge */

.constraints-list {
  margin: 0.5rem 0 0 1.5rem;
  padding: 0;
  list-style-type: disc;
  color: #f0f0f0;
  font-size: 0.95rem;
}
.constraints-list li {
  margin-bottom: 0.3rem;
}

/* === Overlay plein écran Glassmorphic === */
#chrono-overlay {
  position: fixed;
  inset: 0;
  background: var(--chrono-overlay-bg);
  backdrop-filter: blur(10px) saturate(150%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

/* === Fenêtre centrale stylisée === */
.chrono-modal {
  position: relative;
  background: rgba(30,30,30,0.8);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Croix de fermeture minimaliste */
.chrono-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  background: var(--control-btn-bg);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.chrono-close:hover {
  background: var(--control-btn-hover-bg);
  transform: scale(1.1);
}

/* Compte-à-rebours stylé */
#countdown-timer {
  font-size: 4rem;
  color: #0ff;
  text-shadow: 0 0 8px #0ff;
  margin: 0;
}

/* === Contrôles alignés et arrondis === */
.chrono-controls {
  display: flex;
  gap: 1rem;
}

/* Boutons ronds translucides */
.chrono-controls .btn.chrono-icon {
  width: var(--control-btn-size);
  height: var(--control-btn-size);
  background: var(--control-btn-bg);
  border: none;
  border-radius: 50%;
  backdrop-filter: blur(6px);
  color: var(--control-btn-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.chrono-controls .btn.chrono-icon:hover {
  background: var(--control-btn-hover-bg);
  box-shadow: 0 0 8px var(--control-btn-color);
  transform: translateY(-2px);
}
.chrono-controls .btn.chrono-icon:active {
  transform: translateY(0) scale(0.95);
}

/* Ajuste la taille des icônes SVG */
.chrono-controls .btn.chrono-icon i {
  width: 1.6rem;
  height: 1.6rem;
}

.chrono-unified-box.compact {
  background-color: #333;
  color: #fff;
  border-left: 4px solid #ffbb00;
  border-radius: 6px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  box-sizing: border-box;
}

.chrono-unified-box.compact .compact-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.chrono-unified-box.compact .compact-list {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}

.chrono-unified-box.compact .compact-list li {
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

/* 1) Espace entre chaque petit bouton “dé” */
#chrono-dice-buttons {
  display: flex;
  justify-content: center; /* ou flex-start / flex-end selon ton besoin */
  gap: 0.5rem;             /* espace horizontal de 0.5 rem entre les boutons */
  margin-top: 1rem;
}

.chrono-unified-box.compact.pulse {
  animation: beat 2s infinite ease-in-out;
  transform-origin: center center;
}

#dice-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.dice-animation {
  width: 100px;
  height: 100px;
  background: url('./images/dice-sprite.png') no-repeat 0 0;
  background-size: 100% auto;
  animation: roll-sprite 0.6s steps(6) forwards;
}

.separator {
  width: 80%;
  height: 3px;
  border-radius: 10px;
  margin: 1rem auto 2rem;

  background: linear-gradient(
    90deg,
    #00ffe1,
    #ff00cc,
    #00ff66,
    #00ffe1
  );
  background-size: 300% 100%;
  animation: neonScroll 6s linear infinite;

  box-shadow:
    0 0 10px #00ffe1,
    0 0 20px #ff00cc,
    0 0 30px #00ff66,
    0 0 40px rgba(255, 0, 204, 0.2),
    inset 0 0 10px rgba(0, 255, 225, 0.1);
}

@keyframes neonScroll {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}



/* 2) Le style pour le chiffre */
.dice-number {
  color: #0ff;         /* bleu (tu peux changer la nuance) */
  vertical-align: middle; /* pour l’aligner si besoin */
}

/* Conteneur de taille fixe et perspective 3D */
/* ===========================================
   Flip 3D pour la carte Malus (mise à jour)
   =========================================== */

/* On donne un ratio 2/3 (largeur :hauteur) pour que la carte ne fasse pas 0px d'hauteur. */
.malus-card {
  width: 70vw;           /* occupe 80% de la largeur de la fenêtre */
  max-width: 450px;      /* ne dépasse pas 500 px de large */
  aspect-ratio: 2 / 3;   /* ratio large :hauteur = 2 : 3 (taille carte standard) */
  perspective: 1200px;   /* profondeur pour le 3D flip */
  cursor: pointer;       /* on montre que c'est cliquable */
}

/* Le “flip” proprement dit */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;             /* remplit tout l’espace du parent grâce à aspect-ratio */
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}
.card-inner.flipped {
  transform: rotateY(180deg);
}

/* Les deux faces superposées */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}

/* On retourne la face “dos” de 180° par défaut */
.card-back {
  transform: rotateY(180deg);
}

/* Pour que l’image remplisse bien la face */
.card-front img,
.card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

/* Overlay plein écran sombre (déjà présent dans votre CSS, rappelez-vous simplement que display:none par défaut) */
#malus-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: none;             /* caché par défaut */
  align-items: center;       /* centre la carte */
  justify-content: center;   /* centre la carte */
  z-index: 900;
}



/* On ajoute une boîte « perspective » autour de la carte */
#malus-overlay .malus-container {
  perspective: 1000px;
}

/* On définit l’élément qui tournera en 3D */
#malus-overlay .card-inner {
  position: relative;
  width: auto;             /* s’ajustera à l’image */
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  cursor: pointer;         /* pour montrer que c’est cliquable */
}

/* Quand on ajoute .flipped, on effectue une rotation à 180° */
#malus-overlay .card-inner.flipped {
  transform: rotateY(180deg);
}

/* Les deux faces (front/back) superposées, avec backface invisibilité */
#malus-overlay .card-front,
#malus-overlay .card-back {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* La face « dos » est déjà tournée de 180° au départ */
#malus-overlay .card-back {
  transform: rotateY(180deg);
}

/* Pour que l’image remplisse bien l’un ou l’autre côté */
#malus-overlay .card-front img,
#malus-overlay .card-back img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

/* 1) Initialisation de l’overlay en opacité 0 + caché */
#malus-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  /* on garde les flex pour centrer la carte, mais on force opacité/visibility au lieu de display */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 900;
}

/* 2) Quand on veut afficher l’overlay, on passe opacity à 1 + visibility */
#malus-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* === Overlay de fin de partie === */
#endgame-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000; /* doit être au-dessus de tout le reste */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Quand on veut réellement afficher l’overlay, on lui ajoute .show */
#endgame-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* Boîte centrale à l’intérieur de l’overlay */
#endgame-overlay .endgame-popup {
  background-color: rgba(30, 30, 30, 0.9);
  padding: 2rem 2.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  text-align: center;
  max-width: 90%;
  width: 350px;
  color: #fff;
}

#endgame-overlay .endgame-popup h2 {
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  color: #0ff;
}

#endgame-overlay .endgame-popup button {
  background-color: #8b0000;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#endgame-overlay .endgame-popup button:hover {
  background-color: #a60000;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

.challenge-theme {
  font-size: 0.8em;
  font-weight: normal;
  color: #ffeb3b;
  margin-left: 0.5em;
}


/* Overlay plein écran sombre */
#challenge-overlay {
  display: none;           /* caché par défaut */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px) saturate(105%);
  -webkit-backdrop-filter: blur(10px) saturate(105%); /* Safari */
  z-index: 9999;

  /* on centre img + texte via Flexbox, MAIS on n’active FLEX que depuis le JS */
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
}


/* Image du challenge */
#challenge-overlay-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  position: relative;      /* pour que le texte absolute soit positionné par rapport à tout l’overlay */
}

/* Conteneur du texte (titre + description) */
#challenge-overlay-text {
  position: absolute;   /* relative au parent #challenge-overlay */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;           /* ajustez en fonction de la largeur que vous voulez */
  text-align: center;   /* centre le contenu h1 + p */
  pointer-events: none; /* pour que les clics passent à travers si besoin */
}


/* Style pour <h1> */
#challenge-overlay-text h1 {
  font-family: 'SunsetHeavy-Text', 'Segoe UI', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
  color: #0ff;
  line-height: 1.2;
}

/* Style pour <p> */
#challenge-overlay-text p {
  font-family: 'LTKaraoke-Regular', 'Segoe UI', sans-serif;
  font-size: 1.2rem;
  line-height: 1.4;
  color: #e0e0e0;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  margin: 0 auto;
  max-width: 70%;
}

/* Style général pour toutes les icônes (PNG, SVG…) */
.theme-ripple-container .center-circle img.theme-icon {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  display: block;
}

/* Appliquer un filtre blanc uniquement aux SVG */
.theme-ripple-container .center-circle img.theme-icon[src$=".svg"] {
  filter: brightness(0) invert(1);
}

/* ───────────────────────────────────────────────────────────── */
/*  Sélecteur d’onglets (box-selector & box-tile)               */
/* ───────────────────────────────────────────────────────────── */
.box-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.box-selector .box-tile {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 1rem;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 4px;
  color: #f0f0f0;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.2s, border-color 0.2s;
}

.box-selector .box-tile svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  overflow: visible;
}

.box-selector .box-tile:hover {
  background-color: #2a2a2a;
  border-color: #555;
}

.box-selector .box-tile.active {
  background-color: #0ff;
  color: #111;
  border-color: #0cc;
}

.box-selector a.box-tile {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5rem 0.5rem;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 4px;
  color: #f0f0f0;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}

.box-selector a.box-tile:hover {
  background-color: #2a2a2a;
  border-color: #555;
}

.box-selector.profile-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 1rem;
  padding: 1rem 1rem;
  justify-content: flex-start;
  scroll-padding-left: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;         /* ← ça évite qu'elle déborde du conteneur */
}

.box-selector.profile-scroll > .box-vertical-tile {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.box-vertical-tile svg {
  width: 1.8rem;
  height: 1.8rem;
  color: #0ff;
}

.box-selector.profile-scroll {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* Internet Explorer/Edge */
}

.box-selector.profile-scroll::-webkit-scrollbar {
  display: none;                    /* Chrome, Safari, Opera */
}

.box-vertical-tile i[data-feather] {
  width: 2rem;
  height: 2rem;
  stroke: #0ff;
  stroke-width: 2;
  background: none;
  display: block;
}


/* actuellement */
.box-selector .box-vertical-tile:hover,
.box-selector .box-vertical-tile:focus {
  background-color: #4b4b4b;
  border-color: #666;
  transform: translateY(-3px);
}

/* ÉTAT ACTIVE (clic enfoncé) */
.box-selector .box-vertical-tile:active {
  background-color: #1e1e1e;
  border-color: #0ff;
  transform: translateY(0);
}

.box-selector .box-vertical-tile.active {
  background-color: rgba(131, 131, 131, 0.4) !important;
  border-color: #0cc !important;
  transform: translateY(-3px) !important;
  box-shadow:
    0 0 8px rgba(0, 255, 255, 0.3),
    0 0 16px rgba(0, 255, 255, 0.15);
}

/* couleur par défaut sur la tuile */
.box-vertical-tile { color: #0ff; }

/* les SVG suivent la couleur du parent */
.box-vertical-tile svg { color: currentColor; }

/* ─── STYLE UNIFIÉ POUR TOUTES LES TUILES ─── */
.box-selector .box-vertical-tile {
  display: inline-flex;              /* pour centrer icon + label */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(26, 26, 26, 0.7);
  border: 1px solid #333;
  border-radius: 5px;
  color: #f0f0f0;
  font-size: 1rem;
  font-style: bold;
  text-decoration: none;
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s,
              border-color     0.2s,
              transform        0.2s;
}
.box-login-tile {
  width: 160px;
  height: 220px;
}

.box-profile-tile {
  width: 140px;
  height: 160px;
}

.box-vertical-tile.is-green svg { color:#36ff21 !important; }

/* Cyan par défaut pour TOUTES les tuiles */
.box-selector .box-vertical-tile { color: #0ff; }
.box-selector .box-vertical-tile svg { color: currentColor; stroke: currentColor; }

/* Tuile Jouer en vert */
.box-vertical-tile.is-green { color: #36ff21 !important; }

/* Si certains SVG utilisent .animated-icon, ne les force pas en blanc */
.box-vertical-tile .animated-icon { fill: currentColor; } /* (facultatif) */

/* Texte en blanc */
.box-selector .box-vertical-tile {
  color: #fff;
}

/* Icônes par défaut en cyan */
.box-selector .box-vertical-tile svg {
  color: #0ff;
  stroke: #0ff;
  transition: color 0.3s ease, stroke 0.3s ease;
}

/* Icône de la tuile Jouer en vert par défaut */
.box-selector .box-vertical-tile.is-green svg {
  color: #36ff21;
  stroke: #36ff21;
}

/* Effet au survol : l’icône change de couleur, texte inchangé */
.box-selector .box-vertical-tile:hover svg {
  color: rgb(255, 255, 255); /* jaune au survol */
  stroke: rgb(255, 255, 255);
}

/* ========== Tuiles scrollables + flèches ========== */

/* ① Wrapper : container des tuiles, masque tout débordement horizontal */
.tile-scroll-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ② Zone scrollable : 
     - padding gauche/droite = largeur des flèches + marge
     - flex-start pour que la première tuile reste toujours visible
     - width:100% pour remplir le parent */
#tile-scroll {
  display: flex;
  gap: 1em;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1em 3rem;   /* réserve 3rem de chaque côté pour les flèches */
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}

/* ④ Flèches : dimension fixe, cercle parfait, pas d’ombre ni outline */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  z-index: 2;
}

/* ⑤ Hover / focus : seul le fond change */
.scroll-arrow:hover,
.scroll-arrow:focus {
  background: rgba(255, 255, 255, 0.3);
}

/* ⑥ Positionnement horizontal des deux flèches */
#scroll-left  { left: 0.5rem; }
#scroll-right { right: 0.5rem; }

/* ⑦ Suppression du « focus inner border » sur Firefox */
.scroll-arrow::-moz-focus-inner {
  border: 0;
}

/* ⑧ Icône à l’intérieur : pas de marge parasite */
.scroll-arrow i {
  margin: 0;
  display: inline-block;
}

/* 1) Désactive outline / box-shadow et verrouille position & transform */
.scroll-arrow,
.scroll-arrow:hover,
.scroll-arrow:focus {
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* 2) Supprime l’écho bleu au clic sur mobile */
.scroll-arrow {
  -webkit-tap-highlight-color: transparent;
}

/*************************************** Overlay thèmes *******************************************/

/* === THEME OVERLAY — mêmes caractéristiques que avatar-overlay === */
.theme-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  /* même flou que l’avatar */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* avatar-overlay n’a pas de voile sombre ; décommente si tu veux assombrir :
  background: rgba(0,0,0,0.7);
  */
  background: transparent;
  padding: 0;
  transition: none; /* on s’aligne sur avatar-overlay */
}

.theme-overlay.hidden { display: none; }

.theme-overlay-content {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  border: 1px solid #333;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);


  /* sizing proche de l’avatar */
  max-width: 480px;
  width: auto;
  max-height: 90vh;
  overflow: auto;
}


.overlay-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5em;
}

#selected-themes-preview {
  margin-top: 1rem;
  color: #0ff;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.9em;
}

/* 1) Container : flex + gap pour l’espacement */
.overlay-actions {
  display: flex;
  gap: 0.5rem;           /* espace entre les boutons */
  flex-wrap: wrap;       /* autorise le retour à la ligne si trop serré */
  justify-content: flex-end;
}

/*************************************** Overlay Avatar TestMe *******************************************/

.avatar-overlay {
  position: fixed;
  inset: 0;
  backdrop-filter: blur(10px);   /* flou du fond derrière */
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.avatar-overlay-content {
  background: rgba(30,30,30,0.95);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  border: 1px solid #333;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}


.avatar-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  justify-items: center;
  margin: 1em 0;
  width: 100%;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.avatar-choice-grid img {
  width: 100px;
  height: 100px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border 0.2s ease;
}


.icon-word span {
  animation-duration: 1.5s !important;
  animation-delay: calc(var(--i) * 100ms) !important;
}

.icon-word img {
  width: 3rem;                     /* ← plus grand */
  height: 3rem;
  vertical-align: middle;
  display: inline-block;
  animation: iconFade 1.2s ease forwards;
  animation-delay: calc(var(--i) * 100ms);
  opacity: 0;
  transform: translateY(20px);

  filter: brightness(0) invert(1); /* ⬅️ rend l’image blanche */
}


/* animation spéciale pour icônes */
@keyframes iconFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated-icon {
  width: 2rem;
  height: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: iconFade 1.2s ease forwards;
  animation-delay: calc(var(--i) * 100ms);
  vertical-align: middle;
  display: inline-block;
  filter: none;            /* ⬅️ Supprime les ombres */
  fill: white;             /* ⬅️ Force le SVG en blanc (si inline ou bien paramétré) */
}


@keyframes iconFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes iconFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.orb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.icon-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.icon-row.visible {
  opacity: 1;
  transform: translateY(0);
}


.animated-text span {
  animation-delay: calc(var(--i) * 50ms);
}

.icon-row img {
  width: 4rem;
  height: auto;
  filter: brightness(1) contrast(1);  /* au cas où elle serait trop pâle */
}

.logo-row {
  height: 120px; /* ou la hauteur réelle du logo, fixe */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.logo-row.visible {
  opacity: 1;
  transform: translateY(0);
}

.hidden-text {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ================================
   12. WIDGETS DE JEU
   ================================ */

/* Contraintes */
.constraints-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem 0;
}

.constraint-box {
  background-color: #444;
  color: #fff;
  padding: 0.75rem 1rem;
  border-left: 4px solid #ff6600;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  min-width: 150px;
  box-sizing: border-box;
}

/* Points gagnés */
.points-box {
  background-color: #4a4;
  color: #fff;
  padding: 1rem;
  border-left: 4px solid #4ab34a;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  max-width: 300px;
  margin: 1rem auto;
  box-sizing: border-box;
}

/* Compte à rebours */
.timer-box {
  background-color: #a33;
  color: #fff;
  padding: 1rem;
  border-left: 4px solid #b34a4a;
  border-radius: 6px;
  font-weight: bold;
  text-align: center;
  max-width: 220px;
  margin: 1rem auto;
  box-sizing: border-box;
  animation: pulse 1s infinite alternate;
}

/* Contrôles du chrono */
.chrono-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.chrono-controls .btn {
  flex: 1 1 auto;
  max-width: 120px;
  padding: 0.5rem 1rem;
}

/* Résultats unifiés */
.chrono-unified-box {
  background-color: #333;
  color: #fff;
  padding: 1rem;
  border-left: 4px solid #ffbb00;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
}

/* container de base */
.difficulty-container {
  border: 1px solid #555;
  min-width: 300px;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  display: inline-block;
  /* couleur de fond par défaut si tu veux */
  background-color: #333;
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dice-animation {
  width: 100px;
  height: 100px;
  background: url('./images/dice-sprite.png') no-repeat 0 0;
  background-size: 100% auto;
  animation: roll-sprite 0.6s steps(6) forwards;
}
/* Boîte centrale à l’intérieur de l’overlay */
#endgame-overlay .endgame-popup {
  background-color: rgba(30, 30, 30, 0.9);
  padding: 2rem 2.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  text-align: center;
  max-width: 90%;
  width: 350px;
  color: #fff;
}

/* ② Zone scrollable : 
     - padding gauche/droite = largeur des flèches + marge
     - flex-start pour que la première tuile reste toujours visible
     - width:100% pour remplir le parent */
#tile-scroll {
  display: flex;
  gap: 1em;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1em 3rem;   /* réserve 3rem de chaque côté pour les flèches */
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
}

.avatar-overlay-content {
  background: rgba(0, 0, 0, 0.7); /* arrière-plan assombri */
  padding: 2em;
  border-radius: 10px;
  text-align: center;
}

.avatar-choice-grid {
  display: flex;
  gap: 2em;
  justify-content: center;
  margin: 1em 0;
}

.avatar-choice-grid img {
  width: 80px;
  height: 80px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border 0.2s ease;
}


/* ========== INTRO TILES ========== */
#intro-tiles {
  position: fixed;
  inset: 0;
  background: #111;
  z-index: 9999;
  overflow: hidden;
}

.intro-tile {
  position: absolute;
  inset: 0;
  background-color: #1e1e1e;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: #fff;
  transition: transform 0.8s ease-in-out, opacity 0.5s ease;
}

.intro-tile .down-arrow {
  position: absolute;
  bottom: 2rem;
  font-size: 2rem;
  animation: bounce 1.5s infinite;
  cursor: pointer;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}

.intro-tile.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}


.overlay-endgame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-endgame .endgame-content {
    background: #1f1f1f;
    color: white;
    padding: 2em;
    max-width: 90%;
    width: 480px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: popup-fade-in 0.3s ease-out;
}

.overlay-endgame h1 {
    font-size: 1.8em;
    margin-bottom: 0.5em;
}

.overlay-endgame p {
    font-size: 1.1em;
    margin-bottom: 1.5em;
}

.overlay-endgame img.overlay-img {
    max-width: 100%;
    border-radius: 12px;
    margin-bottom: 1em;
}

.overlay-endgame .flex-btn-row {
    display: flex;
    justify-content: space-around;
    gap: 1em;
}

.overlay-endgame {
    padding: 0.8em 1.2em;
    font-size: 1em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: #2196f3;
    color: white;
    transition: background 0.3s;
}

.overlay-endgame:hover {
    background: #1976d2;
}

.overlay-endgame {
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.6);
}

.intro-tile .down-arrow {
  position: absolute;
  bottom: 2rem;
  color: #0ff;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  cursor: pointer;
  animation: bounce 1.5s infinite;
  margin-left:-1rem;
}

.intro-tile .down-arrow i {
  stroke: #0ff;
  stroke-width: 2.5;
  width: 2.5rem;
  height: 2.5rem;
}


.animated-text {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.6s forwards;
}

.animated-text span {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
  animation: letterFade 0.5s forwards;
  animation-delay: calc(var(--i) * 50ms);
}

@keyframes letterFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#intro-tiles.closing {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(8px);
  transition: all 0.8s ease;
  pointer-events: none;
}
.page-wrapper.blur {
  filter: blur(5px);
  transition: filter 0.8s ease;
}

.swipe-hint {
  position: absolute;
  bottom: 1.5rem;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  opacity: 0.6;
}

.animated-text {
  font-size: 1.8rem; /* augmente selon ton goût */
  line-height: 1.4;
  text-align: center;
  max-width: 90%;
  margin: 0 auto;
}

.animated-text {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.intro-tile > div {
  max-width: 90%;
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.animated-text .word {
  display: inline-block;
  white-space: nowrap;
}

#intro-orb-background-wrapper {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

#orb-background {
  width: 100%;
  height: 100%;
  display: block;
}

#intro-orb-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.intro-tile {
  position: absolute;
  inset: 0;
  background-color: rgba(30, 30, 30, 0.2); /* assombri mais semi-transparent */
  background-image: url('../images/voronoi-pattern.png');
  background-size: 200px 200px; /* ↩️ petite texture répétée */
  background-repeat: repeat;
  background-position: center;
  background-blend-mode: overlay; /* ou try: soft-light, multiply */
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(2px); /* optionnel pour fond plus diffus */
}


.icon-word span {
  animation-duration: 1.5s !important;
  animation-delay: calc(var(--i) * 100ms) !important;
}

.icon-word img {
  width: 3rem;                     /* ← plus grand */
  height: 3rem;
  vertical-align: middle;
  display: inline-block;
  animation: iconFade 1.2s ease forwards;
  animation-delay: calc(var(--i) * 100ms);
  opacity: 0;
  transform: translateY(20px);

  filter: brightness(0) invert(1); /* ⬅️ rend l’image blanche */
}

.svg-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  vertical-align: middle;
  filter: brightness(0) saturate(100%) invert(86%) sepia(91%) saturate(1737%) hue-rotate(149deg) brightness(103%) contrast(103%) drop-shadow(0 0 3px #0ff) !important;
}

.svg-icon:nth-child(1) { animation-delay: 0.1s; }
.svg-icon:nth-child(2) { animation-delay: 0.3s; }
.svg-icon:nth-child(3) { animation-delay: 0.5s; }

@keyframes iconPop {
  from {
    transform: scale(0.7) translateY(20px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.animated-text span {
  animation-delay: calc(var(--i) * 50ms);
}

.icon-row img {
  width: 4rem;
  height: auto;
  filter: brightness(1) contrast(1);  /* au cas où elle serait trop pâle */
}

.logo-row img {
  width: 150px;
  height: auto;
  max-width: 100%;
  margin-top: 3rem;
  margin-bottom: 2rem;
  filter: brightness(1.1) drop-shadow(0 0 6px #0ff);
  transition: transform 0.5s ease;
}

.hidden-text {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.logo-row {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-row.visible {
  opacity: 1;
  visibility: visible;
}

/* Animation d’apparition en agrandissement */
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.logo-row.visible img {
  animation: zoomIn 0.8s ease-out forwards;
}

.permanent-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* plus discret que 0.6 */
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.permanent-overlay-content {
  background-color: #333;
  color: #fff;
  padding: 1.5rem 2rem;
  border-left: 6px solid #00ff00; /* orange vif */
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
  max-width: 400px;
  text-align: center;
  font-weight: bold;
  animation: fadeInScale 0.3s ease;
}

/* Garde l’animation existante */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* override : toujours visible */
.icon-row {
  opacity: 1 !important;
  transform: none !important;
}

#box-packs .available-packs .icon-row img {
  /* transforme toute la teinte en blanc */
  filter: brightness(0) invert(1) !important;
}

.user-level {
  font-size: 1rem;
  color: #bbb;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

/* Icône verte + lueur */
.floating-square-btn[title="Accueil"] svg {
  stroke: #36ff21; /* couleur principale */
  filter: drop-shadow(0 0 5px #36ff21); /* halo/lueur */
}



#players-intro-overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
}

.players-intro-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  color: white;
  font-size: 2rem;
}

.players-intro-content .player {
  text-align: center;
}

.players-intro-content .player img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 0 20px rgba(255,255,255,0.6);
}

.players-intro-content .vs {
  font-size: 3rem;
  font-weight: bold;
}

.male-glow {
  animation: malePulse 1.5s infinite alternate;
}

.female-glow {
  animation: femalePulse 1.5s infinite alternate;
}

@keyframes malePulse {
  0% { box-shadow: 0 0 10px rgba(0, 150, 255, 0.6), 0 0 20px rgba(0, 150, 255, 0.4); }
  100% { box-shadow: 0 0 30px rgba(0, 150, 255, 0.9), 0 0 50px rgba(0, 150, 255, 0.7); }
}

@keyframes femalePulse {
  0% { box-shadow: 0 0 10px rgba(255, 105, 180, 0.6), 0 0 20px rgba(255, 105, 180, 0.4); }
  100% { box-shadow: 0 0 30px rgba(255, 105, 180, 0.9), 0 0 50px rgba(255, 105, 180, 0.7); }
}

.packs-title {
    display: inline-flex; /* reste sur la même ligne */
    align-items: center;  /* aligne verticalement */
    gap: 5px;             /* petit espace */
    margin: 0;            /* pour éviter un retour à la ligne */
}

.packs-icon {
    height: 120px; /* petite taille */
    width: auto;
    margin-bottom: -0.5rem;
}

.packs-icon2 {
    height: 250px; /* petite taille */
    width: auto;
}
.packs-icon3 {
    height: 150px; /* petite taille */
    width: auto;
    margin-top: 1rem;
    margin-bottom: -1rem;
}

/* pour positionner la croix */
.theme-overlay-content { position: relative; }

/* croix blanche minimaliste (lien) */
.theme-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.8rem;     /* taille de la croix */
  line-height: 1;
  background: transparent;
  border: none;
  padding: .25rem;       /* zone cliquable invisible */
  cursor: pointer;
  text-decoration: none;
}
.theme-close:hover { opacity: 0.85; }
.theme-close:focus { outline: none; text-shadow: 0 0 4px rgba(255,255,255,.6); }

/* le conteneur doit servir de référence au positionnement */
#avatar-overlay .avatar-overlay-content {
  position: relative;
}

/* croix blanche en haut-droite, assez grande */
.overlay-close {
  position: absolute;
  top: .5rem;
  right: .6rem;
  color: #fff;
  text-decoration: none;
  font-size: 2rem;      /* ⇦ taille de la croix */
  line-height: 1;
  background: transparent;
  border: 0;
  padding: .25rem;      /* zone cliquable un peu plus grande */
  cursor: pointer;
}
.overlay-close:hover { opacity: .85; }
.overlay-close:focus { outline: none; text-shadow: 0 0 4px rgba(255,255,255,.6); }

/* Avatar overlay : forcer le vrai fixe plein écran au-dessus de tout */
#avatar-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100001 !important; /* > #endgame-overlay (100000) */
  display: none;              /* fermé par défaut */
}
#avatar-overlay.open { display: flex !important; } /* on ouvre via une classe */

#avatar-overlay { display: none; }
#avatar-overlay.open { display: flex; }

.challenge-infos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 10px;
}

.challenge-infos p {
  font-size: 18px;
}

.challenge-infos .info-col {
  background: rgba(15,16,32,.5);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 12px;
}

.challenge-infos .label {
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .4px;
  opacity: .8;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.challenge-infos .value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
}

.lvl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #232447;
  color: #fff;
  font-weight: 800;
}
.lvl-1 { background: #1e8449; }
.lvl-2 { background: #2471a3; }
.lvl-3 { background: #b9770e; }
.lvl-4 { background: #922b21; }

.theme-icon {
  width: 80px; height: 80px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.2));
}
.theme-name { text-transform: capitalize; }

.constraints-list {
  margin: 6px 0 0;
  padding-left: 18px;
}
.muted { opacity: .8; font-size: 13px; line-height: 1.35; }


/* Centrer le bloc Niveau + Thème (texte + icône) */
.challenge-infos { 
  justify-items: center;                 /* centre le contenu des cellules de la grille */
}

.challenge-infos .info-col {
  text-align: center;                    /* centre le texte dans chaque “carte” */
}

.challenge-infos .value,
.challenge-infos .theme-value {
  justify-content: center;               /* centre le contenu du flex (badge/icone + texte) */
}

.challenge-infos .theme-icon {
  display: block;                        /* évite de “tirer” le texte à gauche/droite */
}

/* Laisse la liste des contraintes alignée à gauche, mais centrée dans sa carte */
.challenge-infos .constraints-list {
  display: inline-block;                 /* pour centrer le bloc dans la carte */
  text-align: left;                      /* bullets alignés à gauche */
  margin: 6px auto 0;                    /* centrée horizontalement */
  padding-left: 18px;                    /* tes puces gardent leur retrait */
}

/* Mobile: étire les cartes à 100% de la largeur */
@media (max-width: 640px) {
  /* 1 colonne pleine largeur */
  .challenge-infos {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .challenge-infos .info-col {
    width: 100%;
  }
  .challenge-infos .value,
  .challenge-infos .theme-value {
    justify-content: center; /* garde le centrage des contenus */
  }

  /* Optionnel : homogénéiser les autres petits blocs sur mobile */
  .difficulty-card,
  .points-box,
  .timer-box,
  .chrono-unified-box {
    width: 100%;
    max-width: none;
  }
}

/* ===== FAB pour les dés chrono (flottants) ===== */
#roll-chrono-dice-btn-1,
#roll-chrono-dice-btn-2 {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 5000;

  /* look "bouton rond" + fond */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* juste l’icône (l’emoji 🎲 que tu mets déjà) */
  font-size: 1.6rem;
  line-height: 1;

  /* fond + verre + lueur */
  background: radial-gradient(70% 70% at 30% 30%, #2a2a2a, #151515);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 10px rgba(0,255,255,.25);
  backdrop-filter: blur(6px);
}

/* Quand les deux dés sont nécessaires, on empile le 2ᵉ au-dessus du 1er */
#roll-chrono-dice-btn-2 {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)); /* 56 + marge */
}

/* Option: un peu plus compact sur mobile */
@media (max-width: 640px) {
  #roll-chrono-dice-btn-1,
  #roll-chrono-dice-btn-2 {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  #roll-chrono-dice-btn-2 { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* Force le vrai fixed quand placé directement sous <body> */
body > #roll-chrono-dice-btn-1,
body > #roll-chrono-dice-btn-2 {
  position: fixed !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 12000 !important;
}

/* Le 2e dé se “stack” au-dessus du 1er */
body > #roll-chrono-dice-btn-2 {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; /* 56 + 12 + safe-area */
}

/* [LVLIMG-CSS-1] — container centré */
.level-image-box{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 12px 0 8px;
}

/* [LVLIMG-CSS-2] — l’icône de niveau */
.level-hero{
  width: 140px;           /* ajuste à ton goût */
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
  transition: transform .15s ease;
  cursor: pointer;
}
.level-hero:active { transform: scale(.97); }

/* [LVLIMG-CSS-3] */
.level-hero-mini{
  width: 100px;
  height: 100px;
  object-fit: contain;
  vertical-align: middle;
}

/* ===== Dock de dés (draggable vertical) ===== */
#dice-dock{
  position: fixed;
  right: calc(12px + env(safe-area-inset-right, 0px));
  top: 60vh;                 /* position par défaut, sera surchargée en JS si déjà enregistrée */
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: top .08s linear;
  max-height: calc(100vh - 16px);
}

#dice-dock.hidden { display: none; }

#dice-dock .dice-dock-inner{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Petite poignée pour déplacer le dock */
#dice-dock .dice-dock-handle{
  height: 14px;
  margin-bottom: 6px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;       /* indispensable pour le drag sur mobile */
  user-select: none;
  opacity: .7;
}
#dice-dock .dice-dock-handle::before{
  content:'';
  width: 26px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,.35);
  box-shadow: 0 0 8px rgba(0,0,0,.4);
}

/* (optionnel) bloque la sélection de texte pendant le drag */
body.noselect, body.noselect * { user-select: none !important; }

/* ——— Boutons dans le dock : NE DOIVENT PAS être fixed ——— */
#dice-dock #roll-chrono-dice-btn-1,
#dice-dock #roll-chrono-dice-btn-2,
#dice-dock #open-chrono-btn-inline,
#dice-dock #roll-dice-btn,
#dice-dock #buy-bonus-dock-btn {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

/* Taille/présentation cohérentes dans la colonne du dock */
#dice-dock .btn-dice-small,
#dice-dock .dice-btn {
  width: 48px;
  height: 48px;
}

/* Petit confort de rendu pour l’animation du top */
#dice-dock { will-change: top; }

/* Poignée plus “drag-friendly” (facultatif) */
#dice-dock .dice-dock-handle {
  cursor: grab;
}
#dice-dock .dice-dock-handle:active {
  cursor: grabbing;
}

#dice-dock.dragging { transition: none !important; }
.dice-dock-handle, .dice-dock-handle * { touch-action: none; }

#dice-dock { will-change: top; }
#dice-dock.dragging { transition: none !important; cursor: grabbing; }

/* Dock : état replié */
#dice-dock.is-collapsed .dice-dock-inner { display: none; }
#dice-dock.is-collapsed { width: 48px; padding: 8px 6px; }
#dice-dock.is-collapsed .dice-dock-handle { height: 22px; }


#dice-dock .dice-dock-toggle{
  position: absolute;
  top: 6px;
  right: 6px;

  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  /* zone cliquable confortable sans style visible */
  padding: 6px;
  width: auto;
  height: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;           /* évite le décalage vertical */
}

/* Taille/poids de l’icône Feather + centrage parfait */
#dice-dock .dice-dock-toggle svg{
  width: 18px;
  height: 18px;
  stroke-width: 2.5;        /* optionnel: un peu plus épais */
  display: block;           /* supprime l'espace inline */
  pointer-events: none;     /* clic = le bouton, pas le svg */
}


#dice-dock { will-change: top; }
#dice-dock.dragging { transition:none !important; cursor:grabbing; }


/* Taille du bouton (au besoin, ajuste la valeur) */
#open-chrono-btn-inline {
  width: 48px;         /* ou 44px/56px selon ton design */
  height: 48px;
}

/* Le bouton chrono ne garde aucun padding interne */
.btn-dice-small.chrono-icon {
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* L'image remplit 100% de l'espace du bouton */
#open-chrono-btn-inline .icon-clock {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;       /* garde le ratio de ton PNG */
  /* object-fit: cover;      // si tu veux VRAIMENT recouvrir (peut rogner) */
}


/* Taille contrôlée via une variable si tu veux (48px par défaut) */
:root { --chrono-btn-size: 48px; }

/* Le bouton : plus de fond, plus de bordure, pas de padding */
#open-chrono-btn-inline {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto;
  height: auto;
  line-height: 0;                  /* supprime la hauteur “texte” */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;                 /* curseur main */
}

/* Seule l’image est visible et cliquable (click reste sur le bouton) */
#open-chrono-btn-inline .icon-clock {
  width: var(--chrono-btn-size);
  height: var(--chrono-btn-size);
  display: block;
  object-fit: contain;
  pointer-events: none;            /* le clic cible le bouton parent */
}

/* Un petit feedback visuel (optionnel mais utile) */
#open-chrono-btn-inline:hover .icon-clock { transform: scale(1.06); }
#open-chrono-btn-inline:active .icon-clock { transform: scale(0.96); }

/* Anneau d’accessibilité au focus, sans “révéler” le bouton */
#open-chrono-btn-inline:focus-visible .icon-clock {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
  border-radius: 6px; /* ajuste selon la forme de ton PNG */
}

:root { --dock-icon-size: 48px; } /* ajuste si besoin */

#buy-bonus-dock-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto;
  height: auto;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#buy-bonus-dock-btn .icon-gift {
  width: var(--dock-icon-size);
  height: var(--dock-icon-size);
  display: block;
  object-fit: contain;
  pointer-events: none; /* le clic reste sur le bouton */
}

/* Feedback (optionnel) */
#buy-bonus-dock-btn:hover .icon-gift { transform: scale(1.06); }
#buy-bonus-dock-btn:active .icon-gift { transform: scale(0.96); }

/* Accessibilité focus visible */
#buy-bonus-dock-btn:focus-visible .icon-gift {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 2px;
  border-radius: 6px;
}