body {
  margin: 0;
  display: block;
  font-family: 'Segoe UI', sans-serif;
  height: 100vh;
  transition: background 1s ease;
  color: #fff;
  animation: gradientCycle 20s linear infinite;
  background-size: 400% 400%;
}

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

/* Style général en cas de thème non défini */
body:not(.uchiha):not(.hyuga):not(.nara):not(.aburame):not(.akimichi):not(.akatsuki):not(.konoha) {
  background: linear-gradient(270deg, #2c3e50, #4ca1af, #2c3e50);
}

/* Conteneur principal */
.game-container {
  margin: 40px auto;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #ccc;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  position: relative;
  color: inherit;
}

h1 {
  font-family: 'Georgia', serif;
  color: inherit;
}

.choices {
  margin: 20px 0;
}

.choice {
  border-radius: 50%;
  font-size: 30px;
  margin: 0 10px;
  padding: 20px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.3s;
  background-color: #fff;
  color: #000;
}
.choice:hover {
  transform: scale(1.1);
}

.results p, #timer {
  font-size: 18px;
  margin: 10px 0;
  color: inherit;
}

/* Chakra flash */
#chakra-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 999;
}

/* Byakugan pulse */
.byakugan-effect {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 20px 10px #b4c0ff;
  animation: pulseByakugan 2s infinite;
  z-index: 1000;
}
@keyframes pulseByakugan {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Bouton mute */
#mute-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: #eee;
  border: none;
  font-size: 20px;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1001;
}

/* --- Thèmes dynamiques avec fond animé et contraste --- */
body.uchiha {
  background: linear-gradient(270deg, #1a1a1a, #b30000, #1a1a1a);
  animation: gradientCycle 15s linear infinite;
  background-size: 400% 400%;
  color: #ffcccc;
}
body.uchiha .choice {
  background-color: #b30000;
  color: #fff;
  border: 2px solid #6b0000;
}
body.uchiha #chakra-flash {
  background: radial-gradient(circle at center, rgba(255, 0, 0, 0.5), transparent 70%);
}

body.hyuga {
  background: linear-gradient(270deg, #e0e5f9, #b0c4de, #e0e5f9);
  animation: gradientCycle 15s linear infinite;
  background-size: 400% 400%;
  color: #1c1c4f;
}
body.hyuga .choice {
  background-color: #ccd6f6;
  color: #000;
  border: 2px solid #a6b0d6;
}
body.hyuga #chakra-flash {
  background: radial-gradient(circle at center, rgba(185, 207, 255, 0.5), transparent 70%);
}

body.nara {
  background: linear-gradient(270deg, #333333, #9acd32, #333333);
  animation: gradientCycle 15s linear infinite;
  background-size: 400% 400%;
  color: #f0ffe0;
}
body.nara .choice {
  background-color: #7fa95b;
  color: #000;
  border: 2px solid #445c29;
}
body.nara #chakra-flash {
  background: radial-gradient(circle at center, rgba(120, 200, 100, 0.5), transparent 70%);
}

body.aburame {
  background: linear-gradient(270deg, #2f4f4f, #556b2f, #2f4f4f);
  animation: gradientCycle 15s linear infinite;
  background-size: 400% 400%;
  color: #eaffea;
}
body.aburame .choice {
  background-color: #708070;
  color: #000;
  border: 2px solid #374f37;
}
body.aburame #chakra-flash {
  background: radial-gradient(circle at center, rgba(80, 120, 80, 0.5), transparent 70%);
}

body.akimichi {
  background: linear-gradient(270deg, #ffa07a, #ff4500, #ffa07a);
  animation: gradientCycle 15s linear infinite;
  background-size: 400% 400%;
  color: #fff5f0;
}
body.akimichi .choice {
  background-color: #ff7f50;
  color: #000;
  border: 2px solid #d64000;
}
body.akimichi #chakra-flash {
  background: radial-gradient(circle at center, rgba(255, 140, 0, 0.5), transparent 70%);
}

body.akatsuki {
  background: linear-gradient(270deg, #0f0f0f, #400000, #0f0f0f);
  animation: gradientCycle 15s linear infinite;
  background-size: 400% 400%;
  color: #ff4c4c;
}
body.akatsuki .choice {
  background-color: #4c0000;
  color: #fff;
  border: 2px solid #800000;
}
body.akatsuki #chakra-flash {
  background: radial-gradient(circle at center, rgba(150, 0, 0, 0.5), transparent 70%);
}
.akatsuki-cloud {
  position: fixed;
  top: 0;
  width: 100px;
  height: 60px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Akatsuki_symbol.svg/120px-Akatsuki_symbol.svg.png') no-repeat center;
  background-size: contain;
  opacity: 0.6;
  animation: floatCloud 20s linear infinite;
}
@keyframes floatCloud {
  0% { transform: translateY(-10vh); }
  100% { transform: translateY(110vh); }
}

body.konoha {
  background: linear-gradient(270deg, #d9fdd3, #a8e6a3, #d9fdd3);
  animation: gradientCycle 15s linear infinite;
  background-size: 400% 400%;
  color: #204020;
}
body.konoha .choice {
  background-color: #c8f7c5;
  color: #000;
  border: 2px solid #7acc7a;
}
body.konoha #chakra-flash {
  background: radial-gradient(circle at center, rgba(180, 255, 180, 0.5), transparent 70%);
}
.konoha-symbol {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Symbole_Konoha.svg/120px-Symbole_Konoha.svg.png') no-repeat center;
  background-size: contain;
  opacity: 0.8;
  animation: pulseLeaf 3s ease-in-out infinite;
}
@keyframes pulseLeaf {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}