/* Style.css - Version responsive avec fond de terre et ciel */
body {
  margin: 0;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  font-family: 'Segoe UI', sans-serif;
  color: white;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #87CEEB;
}

/* Conteneur du ciel */
#skyBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg, 
    #4A90E2 0%,
    #87CEEB 30%,
    #B0E0E6 60%,
    #E8F4F8 100%
  );
}

/* Nuages */
.cloud {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  animation: floatCloud 10s ease-in-out infinite;
}

.cloud img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes floatCloud {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(15px);
  }
  75% {
    transform: translateX(-15px);
  }
}

/* Variation d'animation pour les nuages */
.cloud:nth-child(odd) {
  animation-duration: 12s;
  animation-delay: -3s;
}

.cloud:nth-child(even) {
  animation-duration: 9s;
  animation-delay: -1s;
}

.cloud:nth-child(3n) {
  animation-duration: 11s;
  animation-delay: -5s;
}

/* Oiseaux qui traversent le ciel */
.birds {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  will-change: left;
}

.birds img {
  width: 100%;
  height: auto;
  display: block;
}

/* Conteneur de fond de terre */
#groundBackground {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Sol de terre */
#groundLayer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, 
    #3d2817 0%,
    #4a3728 15%,
    #5c4633 30%,
    #6b5240 50%,
    #7a6048 70%,
    #8b6f52 100%
  );
  border-radius: 30% 30% 0 0 / 20px 20px 0 0;
  box-shadow: 
    inset 0 20px 30px rgba(0,0,0,0.3),
    0 -10px 20px rgba(0,0,0,0.2);
}

/* Texture de terre avec petits points */
#groundLayer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.15) 1px, transparent 1px),
    radial-gradient(circle at 40% 50%, rgba(0,0,0,0.1) 1.5px, transparent 1.5px),
    radial-gradient(circle at 60% 20%, rgba(0,0,0,0.12) 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,0.08) 1.2px, transparent 1.2px),
    radial-gradient(circle at 10% 70%, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.03) 1.3px, transparent 1.3px),
    radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 1px, transparent 1px),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,0.04) 1.1px, transparent 1.1px),
    radial-gradient(circle at 90% 45%, rgba(0,0,0,0.12) 1.4px, transparent 1.4px),
    radial-gradient(circle at 15% 55%, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 200px 200px;
  opacity: 0.7;
}

/* Herbes et fleurs sauvages sur le sol */
#groundLayer::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    /* Herbes */
    linear-gradient(75deg, #2d5a1e 2px, transparent 2px),
    linear-gradient(85deg, #3a7a28 1.5px, transparent 1.5px),
    linear-gradient(95deg, #4a8a38 2px, transparent 2px),
    linear-gradient(70deg, #2d5a1e 1.8px, transparent 1.8px),
    linear-gradient(80deg, #3a7a28 2.2px, transparent 2.2px),
    /* Petites fleurs */
    radial-gradient(circle at 15% 40%, #ff69b4 3px, transparent 3px),
    radial-gradient(circle at 25% 35%, #ffeb3b 2.5px, transparent 2.5px),
    radial-gradient(circle at 35% 45%, #ff69b4 2.8px, transparent 2.8px),
    radial-gradient(circle at 45% 38%, #ffeb3b 3px, transparent 3px),
    radial-gradient(circle at 55% 42%, #ff69b4 2.5px, transparent 2.5px),
    radial-gradient(circle at 65% 36%, #ffeb3b 2.8px, transparent 2.8px),
    radial-gradient(circle at 75% 44%, #ff69b4 3px, transparent 3px),
    radial-gradient(circle at 85% 39%, #ffeb3b 2.5px, transparent 2.5px),
    radial-gradient(circle at 95% 41%, #ff69b4 2.8px, transparent 2.8px);
  background-size: 
    150px 150px,
    120px 120px,
    180px 180px,
    140px 140px,
    160px 160px,
    200px 200px;
  background-position:
    0 0,
    50px 20px,
    100px 10px,
    150px 30px,
    200px 15px,
    0 0;
  opacity: 0.3;
}

/* Plantes décoratives */
.decorative-plant {
  position: fixed;
  pointer-events: none;
  transform-origin: bottom center;
  animation: swayPlant 3s ease-in-out infinite;
  filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.4));
  transition: all 0.3s ease;
}

.decorative-plant img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes swayPlant {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

/* Ombres portées sous les plantes */
.decorative-plant::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.3), transparent);
  border-radius: 50%;
}

canvas {
  display: block;
  margin: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #1f2937, #0b1220);
  border: 2px solid rgba(255,255,255,0.08);
  box-shadow:
    0 10px 40px rgba(0,0,0,0.5),
    0 0 60px rgba(96,165,250,0.08);
  border-radius: 16px;
  touch-action: none;
  z-index: 5;
  overflow: hidden;
}

#ui {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: clamp(14px, 4vw, 22px);
  font-weight: bold;
  z-index: 10;
  color: #e2e8f0;
  text-shadow: 0 0 12px rgba(255,255,255,0.15);
}

#score {
  position: fixed;
  top: clamp(30px, 8vw, 40px);
  left: 10px;
  z-index: 10;
  color: #fde68a;
  font-size: clamp(14px, 3.5vw, 18px);
  text-shadow: 0 0 10px rgba(253,224,71,0.2);
}

#resetBtn {
  position: fixed;
  top: clamp(8px, 2vw, 10px);
  right: clamp(8px, 2vw, 10px);
  padding: clamp(8px, 2vw, 10px) clamp(10px, 2.5vw, 14px);
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: white;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
  z-index: 10;
  box-shadow: 0 0 20px rgba(239,68,68,0.25);
  -webkit-tap-highlight-color: transparent;
}

#resetBtn:active {
  transform: scale(0.95);
  filter: brightness(1.1);
}

#muteBtn {
  position: fixed;
  top: clamp(55px, 12vw, 60px);
  right: clamp(8px, 2vw, 10px);
  padding: clamp(8px, 2vw, 10px) clamp(10px, 2.5vw, 14px);
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  color: white;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
  z-index: 10;
  box-shadow: 0 0 20px rgba(59,130,246,0.25);
  -webkit-tap-highlight-color: transparent;
}

#muteBtn:active {
  transform: scale(0.95);
  filter: brightness(1.1);
}

#nextPiece {
  position: fixed;
  width: clamp(50px, 15vw, 90px);
  height: clamp(50px, 15vw, 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  font-size: clamp(24px, 7vw, 36px);
  text-align: center;
  transition: transform 0.2s ease;
  box-shadow:
    0 0 20px rgba(96,165,250,0.1),
    inset 0 0 10px rgba(255,255,255,0.05);
  z-index: 15;
  pointer-events: none;
}

#nextPiece::before {
  content: "NEXT";
  font-size: clamp(8px, 2vw, 10px);
  opacity: 0.9;
  font-weight: bold;
  position: absolute;
  top: clamp(4px, 1vw, 6px);
  color: #cbd5f5;
}

@media (min-width: 1025px) {
  #nextPiece:hover {
    transform: scale(1.05);
    box-shadow:
      0 0 25px rgba(96,165,250,0.25),
      inset 0 0 12px rgba(255,255,255,0.08);
  }
  
  #resetBtn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
  
  #muteBtn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
}

/* Infobulle de fusion */
.fusion-bubble {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: bold;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: bubbleIn 0.3s ease-out;
}

.fusion-points {
  color: #fde68a;
  font-size: 16px;
  margin-bottom: 5px;
}

.fusion-plant {
  color: #6ee7b7;
  font-size: 14px;
}

.fusion-combo {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 5px;
}

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

/* Style du bouton guide */
#guideBtn:active {
  transform: scale(0.95);
  filter: brightness(1.1);
}

@media (min-width: 1025px) {
  #guideBtn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
}

/* Style du bouton de fermeture au survol - Guide */
#closeGuideBtn:hover {
  background: #dc2626 !important;
  transform: scale(1.1);
}

#closeGuideBtn:active {
  transform: scale(0.95);
}

/* ============================================= */
/* STYLES POUR LE DRAGON */
/* ============================================= */

/* Dragon volant */
.birds.dragon {
  pointer-events: none !important;
  will-change: left, transform;
  filter: drop-shadow(0 0 15px rgba(255, 100, 0, 0.4));
  animation: dragonBreath 3s ease-in-out infinite;
}

/* Animation de respiration du dragon */
@keyframes dragonBreath {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(255, 100, 0, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(255, 150, 0, 0.8));
  }
}

/* Effet de feu sous le dragon (desktop uniquement) */
@media (min-width: 768px) {
  .birds.dragon::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 40px;
    background: linear-gradient(
      to bottom,
      rgba(255, 100, 0, 0.4),
      rgba(255, 50, 0, 0.1),
      transparent
    );
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0;
    animation: dragonFire 2s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes dragonFire {
    0%, 100% {
      opacity: 0;
      transform: translateX(-50%) scale(0.8);
    }
    50% {
      opacity: 0.6;
      transform: translateX(-50%) scale(1.2);
    }
  }
}

/* ============================================= */
/* SÉLECTEUR DE LANGUE */
/* ============================================= */

#languageSelector {
  position: fixed;
  top: clamp(100px, 20vw, 110px);
  right: clamp(8px, 2vw, 10px);
  padding: clamp(8px, 2vw, 10px) clamp(10px, 2.5vw, 14px);
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.25);
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s ease;
}

#languageSelector:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

#languageSelector:active {
  transform: scale(0.95);
}

/* ============================================= */
/* BOUTON PLAY AGAIN (RÉSUMÉ FIN DE JEU) */
/* ============================================= */

#playAgainBtn:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 15px 35px rgba(16, 185, 129, 0.5) !important;
}

#playAgainBtn:active {
  transform: scale(0.95) !important;
}

/* ============================================= */
/* VERSION MOBILE - AJUSTEMENTS SPÉCIFIQUES */
/* ============================================= */

@media (max-width: 767px) {
  /* Réduire la hauteur du sol pour laisser plus de place */
  #groundBackground {
    height: 35vh;
  }
  
  /* Ajuster la taille du canvas */
  canvas {
    margin-bottom: 0;
  }
  
  /* Cacher les plantes sur les côtés en mobile */
  .decorative-plant[data-side="left"],
  .decorative-plant[data-side="right"] {
    display: none;
  }
  
  /* Style pour les plantes EN BAS du canvas en mobile */
  .decorative-plant[data-position="below-canvas"] {
    display: block !important;
    position: fixed;
    z-index: 4;
  }
  
  /* NEXT Piece en dessous du canvas en mobile */
  #nextPiece {
    position: fixed;
    top: auto !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 10px rgba(96,165,250,0.1);
    z-index: 15;
  }
  
  /* Barre de progression plus petite */
  #progressContainer {
    width: 150px !important;
    padding: 6px 8px !important;
    bottom: 5px !important;
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.6);
  }
  
  #progressContainer .progress-text {
    font-size: 9px !important;
    min-width: 35px !important;
  }
  
  /* Réduire les ombres et effets */
  #resetBtn, #muteBtn, #guideBtn, #languageSelector {
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  
  .fusion-bubble {
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.9);
  }
  
  canvas {
    box-shadow:
      0 5px 20px rgba(0,0,0,0.4),
      0 0 30px rgba(96,165,250,0.05);
  }

  /* Dragon en mobile : au-dessus du board */
  .birds.dragon {
    z-index: 50 !important;
    filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.3));
  }
  
  /* Pas d'effet de feu sur mobile */
  .birds.dragon::after {
    display: none;
  }

  /* Ajustement position sélecteur de langue */
  #languageSelector {
    top: clamp(100px, 22vw, 110px) !important;
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .cloud {
    opacity: 0.3;
  }
  
  #groundBackground {
    height: 30vh;
  }
}

/* Tablette mode paysage */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #nextPiece {
    width: clamp(60px, 12vw, 80px);
    height: clamp(60px, 12vw, 80px);
  }
}

/* Desktop : masquer les plantes sous le canvas */
@media (min-width: 768px) {
  .decorative-plant[data-position="below-canvas"] {
    display: none;
  }
}



/* ============================================= */
/* ANIMAUX DU SOL (LAPIN, GRENOUILLE, TAUPE) */
/* ============================================= */

/* Animaux qui se déplacent sur le sol */
.ground-animal {
  pointer-events: none !important;
  will-change: left;
  image-rendering: auto;
}

/* Lapin : déplacement fluide */
.ground-animal.rabbit {
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5)) !important;
}

/* Grenouille : déplacement fluide */
.ground-animal.frog {
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5)) !important;
}

/* Style pour la taupe */
.ground-animal.mole {
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5)) !important;
}

/* Animation d'avertissement avant disparition de la taupe */
@keyframes moleWarn {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Monticule de terre pour la taupe */
.mole-mound {
  animation: moundPulse 2s ease-in-out infinite;
}

@keyframes moundPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translateX(-50%) scale(1.15);
    opacity: 1;
  }
}

/* Version mobile */
@media (max-width: 767px) {
  .ground-animal.rabbit,
  .ground-animal.frog {
    bottom: 10% !important;
  }
  
  .ground-animal.mole {
    bottom: 10% !important;
  }
  
  .mole-mound {
    height: 15px !important;
  }
}