/* Styles généraux */
* { 
  box-sizing: border-box; 
}

body {
  margin: 0; 
  padding: 20px;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
  color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start;
  align-items: center; 
  min-height: 100vh;
}

/* Couleur de chapitre (mise à jour par JS) */
:root {
  --chapter-color: #F7C8E0;
}

/* Layout principal */
.main-container { 
  display: flex; 
  gap: 30px; 
  max-width: 1400px; 
  width: 100%; 
  align-items: flex-start; 
}

.game-section { 
  flex: 1; 
  text-align: center; 
  position: relative; 
  min-width: 500px; 
}

.buildings-section {
  flex: 1; 
  min-width: 600px; 
  max-height: 80vh; 
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.05); 
  border-radius: 20px; 
  padding: 25px;
  backdrop-filter: blur(10px); 
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Titre principal */
.title {
  font-size: 2.5em; 
  margin-bottom: 20px;
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
  background-clip: text; 
  font-weight: bold;
}

/* Compteur principal */
#counter {
  font-size: 4em; 
  font-weight: bold; 
  user-select: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 15px; 
  text-shadow: 0 0 20px rgba(79, 172, 254, 0.5);
  position: relative;
}

/* Animation de particules pour le clignotement */
.blink-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  animation: particleFloat 0.8s ease-out forwards;
}

@keyframes particleFloat {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0);
  }
}

/* Animation de pulse pour le compteur */
@keyframes counterPulse {
  0% { transform: scale(1); }
  50% { transform: scale(var(--pulse-scale)); }
  100% { transform: scale(1); }
}

.counter-pulse {
  animation: counterPulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Affichage des ressources */
.resources-display {
  display: flex; 
  justify-content: center; 
  gap: 30px;
  margin-bottom: 20px; 
  flex-wrap: wrap;
}

.resource-item {
  background: rgba(255, 255, 255, 0.1); 
  padding: 15px 25px;
  border-radius: 15px; 
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.resource-value { 
  font-size: 1.8em; 
  font-weight: bold; 
  color: #4facfe; 
}

/* Rêves/sec (uniquement la valeur) suit la couleur de chapitre */
#rpsDisplay {
  color: var(--chapter-color);
  transition: color 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.resource-label { 
  font-size: 0.9em; 
  color: #ccc; 
  margin-top: 5px; 
}

/* Styles pour les sourires */
.resource-value-small {
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 8px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  color: #ffd700;
}

.resource-label-small {
  font-size: 0.8em;
  color: #ccc; 
  margin-top: 3px; 
}

/* Animation pour les sourires gagnés */
@keyframes smileFloat {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0.8);
  }
}

/* Section des bâtiments */
.buildings-title { 
  font-size: 2em; 
  margin-bottom: 25px; 
  color: #4facfe; 
  text-align: center; 
}

.building-categories { 
  display: flex; 
  flex-direction: column; 
  gap: 25px; 
}

.building-category {
  background: rgba(255, 255, 255, 0.03); 
  border-radius: 15px;
  padding: 20px; 
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.category-title { 
  font-size: 1.4em; 
  font-weight: bold; 
  margin-bottom: 15px; 
  color: #00f2fe; 
  text-align: center; 
}

.buildings-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 15px; 
}

/* Cartes de bâtiments */
.building-card {
  background: rgba(255, 255, 255, 0.08); 
  border-radius: 12px; 
  padding: 18px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease; 
  position: relative; 
  overflow: visible;
}

.building-card:hover {
  border-color: rgba(79, 172, 254, 0.5);
  transform: translateY(-2px); 
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.2);
}

.building-card.building-locked {
  border-color: rgba(255, 212, 59, 0.4);
  background: rgba(255, 212, 59, 0.05); 
  opacity: 0.9;
}

/* Bulle onirique pour bâtiments verrouillés */
.dream-bubble {
  position: absolute;
  left: 50%;
  top: -8px; /* juste au-dessus de la carte */
  transform: translate(-50%, 0);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.9em;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
  opacity: 0;
  animation: dreamFloat 3.2s ease-out forwards;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 212, 59, 0.5);
  box-shadow: 0 6px 20px rgba(255, 212, 59, 0.15);
}

@keyframes dreamFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -14px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -22px);
  }
}

.building-card.affordable { 
  border-color: rgba(81, 207, 102, 0.6); 
  background: rgba(81, 207, 102, 0.1); 
}

.building-card.unaffordable { 
  opacity: 0.85; 
  border-color: rgba(255, 107, 107, 0.3); 
}

.building-name { 
  font-size: 1.1em; 
  font-weight: bold; 
  color: #ffffff; 
  margin-bottom: 8px; 
}

.building-stats { 
  display: flex; 
  justify-content: space-between; 
  margin-bottom: 12px; 
  font-size: 0.9em; 
}

.building-rps { 
  color: #51cf66; 
  font-weight: bold; 
}

.building-price { 
  color: #ffd43b; 
  font-weight: bold; 
}

.building-owned { 
  font-size: 0.8em; 
  color: #bbb; 
  margin-bottom: 10px; 
}

/* Boutons d'achat */
.buy-button {
  width: 100%; 
  background-color: var(--chapter-color);
  color: #F7C8E0; 
  border: none; 
  padding: 12px;
  border-radius: 50px;
  font-weight: 1000; 
  cursor: pointer; 
  transition: background-color 800ms cubic-bezier(0.4, 0, 0.2, 1), filter 300ms ease, transform 300ms ease, box-shadow 400ms ease;
}

/* Classe pour les couleurs de chapitre claires */
.buy-button.chapter-light {
  color: #606060;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.buy-button:hover:not(:disabled) { 
  filter: brightness(0.9);
  transform: translateY(-1px); 
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.buy-button:disabled { 
  background: #666; 
  cursor: not-allowed; 
  transform: none; 
}

/* Barres de progression */
.progress-bar { 
  width: 100%; 
  height: 8px; 
  background: rgba(255, 255, 255, 0.1); 
  border-radius: 4px; 
  overflow: hidden; 
  margin-bottom: 5px; 
}

.progress-fill { 
  height: 100%; 
  background: linear-gradient(to right, #ffd43b, #51cf66); 
  transition: width 0.3s ease; 
  border-radius: 4px; 
}

.progress-text { 
  font-size: 0.8em; 
  color: #ffd43b; 
  text-align: center; 
}

/* Messages */
.message {
  margin: 15px 0; 
  max-width: 100%; 
  text-align: center;
  font-size: 1.1em; 
  line-height: 1.6; 
  padding: 15px;
  border-radius: 12px; 
  backdrop-filter: blur(10px);
}

.error-msg { 
  background: rgba(255, 107, 107, 0.1); 
  border: 1px solid rgba(255, 107, 107, 0.3); 
  color: #ff6b6b; 
}

.info-msg { 
  background: rgba(116, 192, 252, 0.1); 
  border: 1px solid rgba(116, 192, 252, 0.3); 
  color: #74c0fc; 
}

.warning-msg { 
  background: rgba(255, 212, 59, 0.1); 
  border: 1px solid rgba(255, 212, 59, 0.3); 
  color: #ffd43b; 
}

/* Bouton de démarrage */
.start-button {
  background: linear-gradient(45deg, #4c6ef5, #364fc7);
  color: white; 
  border: none; 
  padding: 18px 40px;
  border-radius: 25px; 
  font-size: 1.2em; 
  font-weight: 600;
  cursor: pointer; 
  margin-top: 30px; 
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(76, 111, 245, 0.3);
}

.start-button:hover:not(:disabled) {
  background: linear-gradient(45deg, #364fc7, #2b3ba0);
  transform: translateY(-2px); 
  box-shadow: 0 12px 30px rgba(76, 111, 245, 0.4);
}

.start-button:disabled { 
  background: #666; 
  cursor: not-allowed; 
  transform: none; 
  box-shadow: none; 
}

/* Vidéo */
video { 
  display: none; 
}

/* Indicateurs de statut */
.status-indicator {
  display: inline-block; 
  width: 14px; 
  height: 14px;
  border-radius: 50%; 
  margin-right: 12px; 
  animation: pulse 2s infinite;
}

/* Bouton de paramètres */
.settings-button {
  position: fixed; 
  top: 20px; 
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white; 
  border-radius: 50%; 
  width: 50px; 
  height: 50px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer; 
  backdrop-filter: blur(10px);
  transition: all 0.3s ease; 
  font-size: 1.2em; 
  z-index: 1000;
}

.backgrounds-button {
  position: fixed;
  top: 80px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  font-size: 1.2em;
  z-index: 1000;
}

.backgrounds-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.settings-button:hover { 
  background: rgba(255, 255, 255, 0.2); 
  transform: rotate(90deg); 
}

/* Modal de paramètres */
.settings-modal {
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  background: rgba(0, 0, 0, 0.8); 
  backdrop-filter: blur(5px);
  display: none; 
  align-items: center; 
  justify-content: center;
  z-index: 10000; 
  padding: 20px;
  overflow-y: auto; /* ← Ajouter juste cette ligne */
}
.settings-content {
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.close-button {
  position: sticky;
  top: 0;
  z-index: 10;
  background: inherit;
}

/* Scrollbar personnalisée */
.settings-content::-webkit-scrollbar {
  width: 8px;
}

.settings-content::-webkit-scrollbar-thumb {
  background: #319bb0;
  border-radius: 4px;
}

.settings-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.settings-modal.show { 
  display: flex; 
}

.settings-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px; 
  padding: 30px; 
  max-width: 400px; 
  width: 100%;
  color: white; 
  position: relative; 
  backdrop-filter: blur(20px);
}

/* Backgrounds modal */
.backgrounds-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.backgrounds-modal.show {
  display: flex;
}

.backgrounds-content {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 20px;
  max-width: 900px;
  width: 100%;
  color: rgb(243, 239, 239);
  position: relative;
  backdrop-filter: blur(20px);
}

.backgrounds-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.background-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.background-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 172, 254, 0.5);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.2);
}

.background-thumb {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.background-meta {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.background-name {
  font-size: 0.95em;
  color: #fff;
}

.background-tag {
  font-size: 0.75em;
  color: #ffd43b;
  opacity: 0.9;
}

.background-card.locked {
  opacity: 0.6;
  filter: grayscale(0.6);
  cursor: not-allowed;
}

.background-card.selected {
  outline: 2px solid #51cf66;
  box-shadow: 0 0 0 3px rgba(81, 207, 102, 0.35);
}

/* Section pour l'import d'image personnalisée */
.custom-bg-section {
  margin: 20px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.import-custom-bg-btn {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
  margin-bottom: 10px;
}

.import-custom-bg-btn:hover {
  background: linear-gradient(135deg, #00f2fe, #4facfe);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
}

.import-custom-bg-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(79, 172, 254, 0.3);
}

.custom-bg-info {
  font-size: 0.9em;
  color: #ccc;
  margin-top: 8px;
}

/* Carte pour l'image personnalisée */
.background-card.custom-bg {
  border: 2px dashed rgba(79, 172, 254, 0.5);
  background: rgba(79, 172, 254, 0.1);
}

.background-card.custom-bg:hover {
  border-color: rgba(79, 172, 254, 0.8);
  background: rgba(79, 172, 254, 0.2);
}

.background-card.custom-bg.selected {
  outline: 2px solid #4facfe;
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.35);
}

.settings-title { 
  font-size: 1.5em; 
  margin-bottom: 25px; 
  text-align: center; 
  color: #4facfe; 
}

.setting-item {
  margin-bottom: 20px; 
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px; 
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.setting-label { 
  display: block; 
  margin-bottom: 10px; 
  font-weight: 600; 
  color: #ccc; 
}

.setting-description { 
  font-size: 0.9em; 
  color: #888; 
  margin-bottom: 10px; 
}

.threshold-container { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

.threshold-slider {
  flex: 1; 
  -webkit-appearance: none; 
  appearance: none;
  height: 6px; 
  border-radius: 3px;
  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); 
  outline: none;
}

.threshold-value {
  background: rgba(255, 255, 255, 0.1); 
  padding: 5px 10px;
  border-radius: 5px; 
  font-family: monospace; 
  min-width: 60px; 
  text-align: center;
}

.checkbox-container { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  cursor: pointer; 
}

.custom-checkbox {
  width: 20px; 
  height: 20px; 
  border: 2px solid #4facfe;
  border-radius: 4px; 
  background: transparent; 
  position: relative; 
  transition: all 0.3s ease;
}

.custom-checkbox.checked { 
  background: #4facfe; 
}

.custom-checkbox.checked::after {
  content: '✓'; 
  position: absolute; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%); 
  color: white; 
  font-size: 12px; 
  font-weight: bold;
}

.close-button {
  position: absolute; 
  top: 15px; 
  right: 15px; 
  background: none;
  border: none; 
  color: #888; 
  font-size: 1.5em; 
  cursor: pointer;
  width: 30px; 
  height: 30px; 
  display: flex; 
  align-items: center;
  justify-content: center; 
  border-radius: 50%; 
  transition: all 0.3s ease;
}

.close-button:hover { 
  background: rgba(255, 255, 255, 0.1); 
  color: white; 
}

/* Animations */
@keyframes pulse { 
  0%, 100% { opacity: 1; } 
  50% { opacity: 0.5; } 
}

.status-waiting { 
  background: #ffd43b; 
  box-shadow: 0 0 10px rgba(255, 212, 59, 0.5); 
}

.status-active { 
  background: #51cf66; 
  box-shadow: 0 0 10px rgba(81, 207, 102, 0.5); 
}

.status-error { 
  background: #ff6b6b; 
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.5); 
}

/* Informations de debug */
.debug-info {
  font-family: 'Courier New', monospace; 
  font-size: 0.9em; 
  color: #888;
  margin-top: 20px; 
  padding: 15px; 
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px; 
  backdrop-filter: blur(5px); 
  text-align: left;
}

/* Grille des statistiques */
.stats-grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px; 
  margin-top: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05); 
  padding: 20px;
  border-radius: 12px; 
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-value { 
  font-size: 2em; 
  font-weight: bold; 
  color: var(--chapter-color); 
  transition: color 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-label { 
  font-size: 0.9em; 
  color: #ccc; 
  margin-top: 5px; 
}

/* Media queries pour responsive */
@media (max-width: 1200px) {
  .main-container { 
    flex-direction: column; 
    align-items: center; 
  }
  .game-section, .buildings-section { 
    min-width: auto; 
    width: 100%; 
    max-width: 800px; 
  }
}

@media (max-width: 600px) {
  .title { 
    font-size: 2em; 
  }
  #counter { 
    font-size: 3em; 
  }
  .start-button { 
    padding: 15px 30px; 
    font-size: 1.1em; 
  }
  .buildings-grid { 
    grid-template-columns: 1fr; 
  }
}

/* Scrollbar personnalisée */
.buildings-section::-webkit-scrollbar { 
  width: 8px; 
}

.buildings-section::-webkit-scrollbar-track { 
  background: rgba(255, 255, 255, 0.1); 
  border-radius: 4px; 
}

.buildings-section::-webkit-scrollbar-thumb { 
  background: rgba(79, 172, 254, 0.5); 
  border-radius: 4px; 
}

.buildings-section::-webkit-scrollbar-thumb:hover { 
  background: rgba(79, 172, 254, 0.7); 
}

/* Modal de triche */
.cheat-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-out;
}

.cheat-modal-content {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.12) 0%, 
    rgba(255, 255, 255, 0.08) 100%);
  border-radius: 20px;
  padding: 30px;
  max-width: 450px;
  width: 90%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 215, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cheat-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.cheat-modal-header h3 {
  color: #FFD700;
  font-size: 1.5em;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.cheat-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2em;
  transition: all 0.3s ease;
}

.cheat-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
  transform: rotate(90deg);
}

.cheat-modal-body p {
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 1.1em;
}

.cheat-input {
  width: 100%;
  padding: 15px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 1.1em;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.cheat-input:focus {
  outline: none;
  border-color: #FFD700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  background: rgba(255, 255, 255, 0.15);
}

.cheat-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.cheat-buttons {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.cheat-btn {
  padding: 12px 25px;
  border: none;
  border-radius: 10px;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.cheat-apply {
  background: linear-gradient(45deg, #FFD700, #FFA500);
  color: #000;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.cheat-apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.cheat-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cheat-cancel:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive pour le modal de triche */
@media (max-width: 600px) {
  .cheat-modal-content {
    padding: 25px;
    width: 95%;
  }
  
  .cheat-buttons {
    flex-direction: column;
  }
  
  .cheat-btn {
    width: 100%;
  }
}

.cadre_1 {
  position: absolute;
  top: 170px;
  left: 675px;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 160px;
}

.cadre_2 {
  position: absolute;
  top: 170px;
  left: 120px;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 160px;
  transform-origin: left;
  transition: transform 1s ease;
}

.cadre_2.ouverte {
  transform: rotateY(90deg);
}

/* Tooltip générique pour améliorations */
.upgrade-tooltip {
  position: fixed;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  background: rgb(246, 244, 244);
  color: #fefcfc;
  padding: 4px 4px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  font-size: 11px;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 2000;
  word-wrap: break-word; /* casse les mots trop longs */
  text-align: center;
  word-wrap: break-word; /* casse les mots trop longs */
}

.upgrade-tooltip.show {
  opacity: 1;
  transform: translate(-30%, -8px);
}

.upgrade-tooltip .title {
  font-weight: 700;
  margin-bottom: 4px;

}


#prestigeFlash {
  position: fixed; inset: 0;
  background: white; opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  z-index: 9999;
}
#prestigeText {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-size: 64px; font-weight: 800; color: gold;
  opacity: 0; transition: all 1.2s ease;
  z-index: 10000;
}
#prestigeText.show { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }

#prestigeBtn {
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  margin: 20px auto; /* centre le bouton dans le modal */
}

#prestigeBtn:hover {
  background: linear-gradient(135deg, #ffb74d, #ff7043);
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

#prestigeBtn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}


#prestigeFlash {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 1s ease; /* fondu entrée */
}

#prestigeText {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 20px #000;
  opacity: 0;
  transition: opacity 2s ease; /* fondu sortie */
  z-index: 10000;
}

#prestigeText.show {
  opacity: 1;
}


/* === MODAL DE SPÉCIALISATION === */
.spec-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 25, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 9999;
}

.spec-overlay.spec-visible {
  opacity: 1;
  transform: scale(1);
}

.spec-container {
  width: 90%;
  max-width: 900px;
  background: radial-gradient(circle at center, #161633, #0b0b1b);
  border-radius: 24px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
  padding: 2.5rem;
  color: #f0f4f5;
  position: relative;
  overflow: hidden;
}

/* En-tête */
.spec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  border-bottom: 2px solid rgba(174, 238, 255, 0.2);
  padding-bottom: 1rem;
}

.spec-title {
  font-size: 2.2rem;
  text-shadow: 0 0 20px #aef, 0 0 40px #6cf;
  margin: 0;
  font-weight: 700;
}

.spec-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, color 0.3s ease;
  line-height: 1;
}

.spec-close:hover {
  transform: scale(1.2) rotate(90deg);
  color: #ff6b6b;
}

/* Corps du modal */
.spec-body {
  text-align: center;
}

.spec-intro {
  font-size: 1.1rem;
  color: #e0e0e0;
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* Grille des options */
.spec-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin: 2rem 0;
}

.spec-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Boutons de spécialisation */
.spec-button {
  background: linear-gradient(145deg, #ff8c00, #ff6600);
  border: none;
  border-radius: 20px;
  padding: 1.6rem 2.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.3s ease;
  z-index: 2;
  width: 100%;
  box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
}

.spec-button:hover {
  transform: scale(1.15);
  box-shadow: 0 0 30px rgba(255, 140, 0, 0.8), 0 0 50px rgba(255, 102, 0, 0.5);
  background: linear-gradient(145deg, #ffa500, #ff7700);
}

.spec-button:active {
  transform: scale(1.05);
}

/* Effet de paillettes sur les boutons */
.spec-button::before,
.spec-button::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: sparkle-anim 4s linear infinite;
  pointer-events: none;
}

.spec-button::after {
  animation-delay: 2s;
  opacity: 0.6;
}

@keyframes sparkle-anim {
  from { 
    transform: translate(0, 0) rotate(0deg); 
  }
  to { 
    transform: translate(10px, 10px) rotate(360deg); 
  }
}

/* Descriptions */
.spec-description {
  color: #b8b8b8;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  max-width: 250px;
  text-align: center;
}

/* Avertissement */
.spec-warning {
  color: #ff6b6b;
  font-size: 1rem;
  font-weight: 500;
  margin-top: 2.5rem;
  padding: 1rem;
  background: rgba(255, 107, 107, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

/* Responsive */
@media (max-width: 900px) {
  .spec-options {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .spec-container {
    width: 95%;
    padding: 2rem;
  }
  
  .spec-title {
    font-size: 1.8rem;
  }
  
  .spec-button {
    font-size: 1.2rem;
    padding: 1.4rem 2rem;
  }
}

@media (max-width: 480px) {
  .spec-container {
    padding: 1.5rem;
  }
  
  .spec-title {
    font-size: 1.5rem;
  }
  
  .spec-intro {
    font-size: 1rem;
  }
}


/* 🌐 Styles communs à tous les boutons UUID (version petite) */
.connaître-UUID,
.Mettre-UUID {
  display: inline-block;
  padding: 6px 14px;       /* plus petit */
  border-radius: 10px;     /* légèrement arrondi */
  border: 2px solid transparent;
  color: #fff;
  font-weight: 600;
  font-size: 13px;         /* texte plus petit */
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12); /* ombre plus discrète */
}

/* 🧠 Bouton "Connaître UUID" (bleu) */
.connaître-UUID {
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  border-color: #1e88e5;
}

.connaître-UUID:hover {
  background: linear-gradient(135deg, #1e88e5, #1565c0);
  transform: translateY(-1px);  /* déplacement plus subtil */
  box-shadow: 0 4px 8px rgba(30, 136, 229, 0.3);
}

/* ⚙️ Bouton "Mettre UUID" (vert) */
.Mettre-UUID {
  background: linear-gradient(135deg, #66bb6a, #43a047);
  border-color: #43a047;
}

.Mettre-UUID:hover {
  background: linear-gradient(135deg, #43a047, #2e7d32);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(67, 160, 71, 0.3);
}

/* ✨ Effet de clic */
.connaître-UUID:active,
.Mettre-UUID:active {
  transform: scale(0.95); /* clic légèrement plus marqué */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}




/* === MODAL UUID (affichage et import) === */
.uuid-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.uuid-modal-content {
  background: #181818;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 25px;
  width: 380px;
  text-align: center;
  color: #eee;
  box-shadow: 0 0 15px rgba(255,255,255,0.05);
  font-family: "Inter", sans-serif;
}

.uuid-modal-content h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #fff;
}

.uuid-modal-content p {
  color: #ccc;
  margin-bottom: 15px;
  word-wrap: break-word;
}

.uuid-modal-content input {
  width: 90%;
  padding: 8px;
  border: 1px solid #444;
  background: #111;
  color: #eee;
  border-radius: 6px;
  text-align: center;
  margin-bottom: 12px;
}

.uuid-modal-content button {
  background: #222;
  color: #ddd;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  margin: 5px;
  transition: 0.2s;
}

.uuid-modal-content button:hover {
  background: #333;
  color: #fff;
  border-color: #555;
}

.confidentialite-link {
  display: inline-block;
  font-size: 14px;
  color: #66ccff; /* bleu clair */
  text-decoration: none;
  margin-top: 12px;
  transition: color 0.3s, transform 0.2s;
  cursor: pointer;
}

.confidentialite-link:hover {
  color: #99e0ff; /* bleu encore plus clair au survol */
  transform: translateY(-1px); /* petit effet de soulèvement */
  text-decoration: underline;
}


#pub-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
  padding: 10px 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#pub-banner.visible {
  opacity: 1;
}

#pub-banner.hidden {
  display: none;
}

.petit-texte {
  position: absolute;
  top: 248px;     
  left: 250px;    
  font-size: 10px;  
  color: rgb(246, 245, 245);      
  opacity: 0.7;    
}