@font-face {
  font-family: 'MaPolice';
  src: url('fonts/MaPolice.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


body {
  
  font-family: 'Fredoka', sans-serif;
  background: 
    url('images/background/grass_tile.png') repeat,
    linear-gradient(to bottom, #d0f0fd 0%, #a8e6cf 100%);
  background-size: auto 240px, cover;
  background-repeat: repeat, no-repeat;
  background-position: top;
  image-rendering: auto;
  color: #333;
  margin: 0;
  padding: 0;
}

/* Titres personnalisés avec ta police locale */
h1, h2, .titre-section {
  font-family: 'MaPolice', sans-serif;
}

/* Section général */
section {
    margin-bottom: 40px;
}

/* Header */
#header {
    background: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Farm */
#farm {
    margin-top: 50px;
    background: url('images/background/platform-farm.jpg') repeat-x bottom;
    background-size: auto 100%; /* hauteur à 100%, largeur en automatique */
    background-position: bottom;
    padding: 20px;
    height: 300px;
    overflow: hidden;
    position: relative;
    border-top: 2px solid #aad8d3;
    transition: background-size 0.3s ease;
}

/* Zone où apparaissent les pets, parents positionement pets */ 
#farm-pets {
    position: absolute;
    bottom: 95px;
    width: 100%;
    height: 80px;
    z-index: 2;
}

/* Pets animés */
.pet-moving {
  width: 64px;
  height: 64px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-size: 256px 64px;
  image-rendering: pixelated;
  animation: walkAnimation 0.4s steps(4) infinite, moveLeftRight 20s linear infinite;
}




/* Animation respiration */
@keyframes breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Boutique, Missions, Mes pets */
#shop, #missions, #my-pets {
    margin-top: 30px;
    background: #ffffff;
    padding: 20px;
    border-top: 2px solid #aad8d3;
}

/* Conteneur des shop items */
#shop-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Carte de shop */
.shop-item {
    background: white;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
    width: 140px;
    text-align: center;
    transition: 0.3s ease;
    
}

.shop-item:hover {
    box-shadow: 0px 6px 15px rgba(0,0,0,0.25);
    transform: scale(1.05);
}

.shop-item img {
    width: 80px;
    height: 80px;
    image-rendering: pixelated;
}

/* Animation sparkle */
@keyframes sparkle {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

.sparkle-effect {
    animation: sparkle 0.6s ease-out forwards;
}

/* Conteneur du pet (badge + image) */
.pet-container {
    position: absolute;
    bottom: 50px;
    width: 80px;
    text-align: center;
    z-index: 2;
    animation: move-horizontal 30s linear infinite, breathe 2s ease-in-out infinite, hop 1s ease-in-out infinite;
}

/* Badge de niveau amélioré */
.pet-badge {
    font-size: 12px;
    background: linear-gradient(145deg, #ffe066, #ffd700);
    color: #333333;
    padding: 3px 6px;
    border-radius: 12px;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
    font-weight: bold;
    margin-bottom: 4px;
}

/* Animation level up */
@keyframes level-up-sparkle {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.level-up-animation {
    animation: level-up-sparkle 0.6s ease-out forwards;
}

/* Boutons modernes */
button {
    background-color: #9f99ee; /* Vert pastel */
    color: #333333;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: bold;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

button:hover {
    background-color: #ffe066; /* Jaune clair */
    transform: scale(1.05);
}

.life-bar-container {
    width: 100%;
    height: 10px;
    background: #eee;
    border-radius: 8px;
    margin: 6px 0;
    overflow: hidden;
  }
  
  .life-bar {
    height: 100%;
    transition: width 0.5s linear;
  }
 
  #daily-chest {
    background: #fff9e6;
    padding: 20px;
    border-top: 2px solid #ffe066;
    margin-top: 30px;
    text-align: center;
  }
  
  #treasure-chest {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }
  
  #chest-img {
    width: 200px;
    max-width: 90%;
    cursor: pointer;
    animation: pulseChest 2s ease-in-out infinite;
    transition: transform 0.3s ease;
  }
  
  #chest-img:hover {
    transform: scale(1.05);
  }
  
  @keyframes pulseChest {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
  }
  
  #chest-result {
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
    color: #cc4444;
  }
  
  #chest-status {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
  }
  #pet-enclosure {
  background: #f8fff0;
  padding: 20px;
  text-align: center;
  border-top: 2px solid #aad8d3;
  margin-top: 40px;
}

#enclosure-background {
  background: url('images/background/your-background.png') center center no-repeat;
  background-size: contain; /* 🔁 peut ajuster à cover si tu veux tout remplir */
  position: relative;
  height: 300px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#enclosure-pets {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
}

/* Mouvement et respiration */
@keyframes move-horizontal {
  0% { left: 0; }
  50% { left: calc(100% - 80px); }
  100% { left: 0; }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
#header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    background-color: #f9f9f9;
  }
  
  #coin-center {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    font-family: 'Fredoka', sans-serif;
    font-size: 22px;
    font-weight: bold;
  }
  
  .coin-icon {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
  .chest-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    padding: 12px 24px;
    border-radius: 16px;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    font-family: 'Fredoka', sans-serif;
    margin-bottom: 20px;
    animation: pop-fade 0.5s ease-in-out;
  }
  
  .chest-icon {
    font-size: 1.8rem;
    filter: drop-shadow(1px 1px 0px #111);
  }
  
  .chest-title {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  }
  
  @keyframes pop-fade {
    from {
      transform: scale(0.95);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes hop {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }
  
  @keyframes walk-mirror {
    0% {
      left: 0;
      transform: scaleX(1); /* Regarde à droite */
    }
    50% {
      left: calc(100% - 80px);
      transform: scaleX(1);
    }
    50.001% {
      left: calc(100% - 80px);
      transform: scaleX(-1); /* Se retourne pour revenir */
    }
    100% {
      left: 0;
      transform: scaleX(-1); /* Regarde à gauche */
    }
  }
  
  .pet-production {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 10px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
  }
  
  #main-menu {
    background: linear-gradient(to right, #ffd54f, #ffb300);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    padding: 10px 0;
    position: sticky;
    top: 60px;
    z-index: 99;
  }
  
  #main-menu ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 25px;
  }
  
  #main-menu li a {
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 14px;
    border-radius: 12px;
    transition: background 0.2s ease;
  }
  
  #main-menu li a:hover {
    background: rgba(255,255,255,0.5);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  #my-pets-list img {
    margin-bottom: 10px;
    border-radius: 10px;
  }
  #my-pets-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    overflow-x: auto;
  }
  
  #my-pets-list .shop-item {
    flex: 0 0 auto; /* empêche l'élargissement */
  }
  .energy-bar-container {
    width: 100%;
    height: 10px;
    background-color: #ddd;
    border-radius: 5px;
    margin-top: 4px;
  }
  .energy-bar {
    height: 100%;
    background-color: #4c6faf;
    border-radius: 5px;
    transition: width 0.5s ease;
  }
  
  .life-bar-container {
    position: relative;
    height: 10px;
    background-color: #ddd;
    border-radius: 5px;
    margin: 5px 0;
    overflow: hidden;
  }
  .life-bar {
    height: 100%;
    transition: width 0.3s ease;
  }
  .life-bar-text {
    position: absolute;
    top: -18px;
    right: 5px;
    font-size: 12px;
    color: #333;
  }
  
  
  
  #notifications-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 280px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 999;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
  }
  
  #notifications-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  #notifications-list li {
    background: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: slide-in 0.3s ease;
    border-left: 4px solid #4caf50;
  }
  
  @keyframes slide-in {
    from {
      transform: translateX(20px);
      opacity: 0;
    }
    to {
      transform: translateX(0px);
      opacity: 1;
    }
  }
 #daily-chest {
  padding: 30px;
  background-color: #fef9ec;
  border-radius: 15px;
  max-width: 500px;
  margin: 20px auto;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.chest-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#chest-button {
  background: linear-gradient(to right, #ff9f1c, #ffbf00);
  color: white;
  border: none;
  padding: 12px 24px;
  font-weight: bold;
  font-size: 18px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  cursor: default;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chest-img-container {
  transition: transform 0.3s ease;
}

.chest-img-container:hover {
  transform: scale(1.1);
}

#chest-img {
  width: 110px;
  transition: transform 0.4s ease;
  cursor: pointer;
}

#chest-img.opening {
  transform: scale(1.2) rotate(-5deg);
}

.chest-result, .chest-status {
  margin-top: 12px;
  font-weight: bold;
  font-size: 14px;
}
#daily-chest {
  background-color: #fff6dd;
  padding: 40px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-width: 500px;
  margin: 40px auto;
  transition: all 0.3s ease;
}

.chest-title {
  background: linear-gradient(to right, #ff9800, #ffc107);
  padding: 12px 24px;
  border-radius: 25px;
  color: white;
  font-size: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  display: inline-block;
  font-weight: bold;
  margin-bottom: 20px;
}

.chest-img-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

#chest-img {
  width: 120px;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
  cursor: pointer;
}

#chest-img:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 15px #ffd700);
  animation: bounce 0.6s;
}

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

.chest-result {
  font-size: 16px;
  margin-top: 10px;
  color: #333;
  font-weight: bold;
}

.chest-status {
  font-size: 14px;
  color: #d32f2f;
  font-weight: bold;
  margin-top: 5px;
}

#resource-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  background: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: bold;
}

.resource-item {
  
  display: flex;
  align-items: center;
  gap: 6px;
}

.resource-item img {
  width: 24px;
  height: 24px;
}
.floating-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 90px;
  font-size: 24px;
  font-weight: 900;
  color: #ffd700;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 14px;
  border-radius: 12px;
  animation: float-up-long 10s ease-out forwards;
  pointer-events: none;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8), 0 0 10px #ffd700;
  z-index: 30;
}



@keyframes float-up-long {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(-70px);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-80px);
  }
}


.shake-effect {
  animation: shake 0.5s ease;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.xp-bar-container {
  width: 100%;
  height: 18px;
  background-color: #ddd;
  border-radius: 12px;
  margin: 8px 0;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

.xp-bar {
  height: 100%;
  background: linear-gradient(90deg, #6ee7b7, #3b82f6);
  transition: width 0.5s ease;
  border-radius: 12px 0 0 12px;
}
.floating-profile {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 200px;
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  font-size: 14px;
  font-family: 'Fredoka', sans-serif;
  z-index: 1000;
  opacity: 0.95;
  transition: all 0.3s ease;
}

.floating-profile:hover {
  opacity: 1;
  transform: scale(1.02);
}

.floating-profile p {
  margin: 6px 0;
  font-weight: bold;
  color: #333;
}

.profile-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #3b82f6;
  text-align: center;
}
.production-flash {
  animation: flash-grow 0.6s ease-out;
}

@keyframes flash-grow {
  0% {
    transform: scale(1);
    color: #333;
  }
  50% {
    transform: scale(1.3);
    color: #4caf50;
  }
  100% {
    transform: scale(1);
    color: #333;
  }
}
#missions {
  background: #fff6e8;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  margin: 20px auto;
  max-width: 500px;
}
@keyframes walkAnimation {
  from { background-position: 0px 0; }
  to   { background-position: -256px 0; } /* 4 frames x 64px */
}

@keyframes moveLeftRight {
  0%   { left: 0; transform: scaleX(-1); }
  50%  { left: calc(100% - 64px); transform: scaleX(-1); }
  51%  { transform: scaleX(1); }
  100% { left: 0; transform: scaleX(1); }
}



/* fragments images */
.icon-ui { 
  width: 24px;
  height: 24px;
  margin-right: 6px;
  image-rendering: pixelated;
}
/* badges couleurs */
.level-yellow  { background: linear-gradient(145deg, #ffe066, #ffd700); color: #333; }
.level-green   { background: linear-gradient(145deg, #a8e6cf, #77dd77); color: #333; }
.level-blue    { background: linear-gradient(145deg, #a0c4ff, #4dabf7); color: white; }
.level-purple  { background: linear-gradient(145deg, #d0b3ff, #a66cff); color: white; }
.level-red     { background: linear-gradient(145deg, #ff6b6b, #ff5252); color: white; }

/* Pour xp general */
.player-yellow  { color: #f1c40f; }  /* Niveau 1–4 */
.player-green   { color: #2ecc71; }  /* Niveau 5–9 */
.player-blue    { color: #3498db; }  /* Niveau 10–14 */
.player-purple  { color: #9b59b6; }  /* Niveau 15–19 */
.player-red     { color: #e74c3c; }  /* Niveau 20+ */


.icon-inline {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  image-rendering: auto; /* ou remove cette ligne */
}

/*Barre energie et nourriture */
.bar-wrapper .bar-icon {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  margin-right: 6px;
  vertical-align: middle;
}


.bar-track {
  flex: 1;
  height: 10px;
  background-color: #ddd;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.3s ease;
}

.bar-text {
  font-size: 10px;
  min-width: 24px;
  text-align: right;
  color: #333;
}
/* Style pour le bouton entier */
.upgrade-pixel-btn {
  background-color: #f3e5ab;
  border: 2px solid #c5a947;
  border-radius: 8px;
  padding: 6px;
  width: 100%;
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  color: #333;
  box-shadow: 2px 2px 0 #888;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Titre "Améliorer" */
.upgrade-label {
  font-size: 11px;
  font-weight: bold;
}

/* Zone contenant les coûts */
.upgrade-costs {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* Icônes réduites */
.icon-cost {
  width: 16px;              /* tu peux ajuster à 14px ou 12px */
  height: 16px;
  image-rendering: pixelated;
  vertical-align: middle;
  object-fit: contain;      /* assure le redimensionnement sans débordement */
  max-width: 100%;
}
.shop-item.aura {
  border-radius: 20px;
  transition: box-shadow 0.3s ease;
}

.aura-brown       { box-shadow: 0 0 15px 4px rgba(255, 222, 89, 0.8); }
.aura-yellow      { box-shadow: 0 0 20px 6px rgba(255, 222, 89, 0.8); }
.aura-green       { box-shadow: 0 0 20px 6px rgba(0, 255, 150, 0.7); }
.aura-blue        { box-shadow: 0 0 20px 6px rgba(70, 130, 180, 0.6); }
.aura-purple      { box-shadow: 0 0 20px 6px rgba(186, 85, 211, 0.7); }
.aura-red         { box-shadow: 0 0 20px 6px rgba(255, 69, 0, 0.8); }
.aura-silver      { box-shadow: 0 0 20px 6px rgba(192, 192, 192, 0.8); }
.aura-purpledark  { box-shadow: 0 0 20px 6px rgba(148, 0, 211, 0.8); }
.aura-aqua        { box-shadow: 0 0 20px 6px rgba(0, 255, 255, 0.7); }
.aura-orange      { box-shadow: 0 0 20px 6px rgba(255, 140, 0, 0.8); }
.aura-lime        { box-shadow: 0 0 20px 6px rgba(173, 255, 47, 0.8); }
.aura-deepblue    { box-shadow: 0 0 20px 6px rgba(25, 25, 112, 0.8); }
.aura-pink        { box-shadow: 0 0 20px 6px rgba(255, 105, 180, 0.8); }
.aura-gold        { box-shadow: 0 0 25px 8px rgba(255, 215, 0, 0.9); }
.aura-white       { box-shadow: 0 0 25px 10px rgba(255, 255, 255, 1); }
.level-copper  { background: linear-gradient(145deg, #b87333, #c28840); color: white; }
.level-teal    { background: linear-gradient(145deg, #64ffda, #00bfa5); color: #333; }
.level-rose    { background: linear-gradient(145deg, #ffb6c1, #ff69b4); color: #333; }
.level-ice     { background: linear-gradient(145deg, #d0f0fd, #a8e6cf); color: #333; }
.level-stone   { background: linear-gradient(145deg, #b0b0b0, #888888); color: white; }

.aura-copper  { box-shadow: 0 0 20px 6px rgba(184, 115, 51, 0.8); }
.aura-teal    { box-shadow: 0 0 20px 6px rgba(0, 191, 165, 0.7); }
.aura-rose    { box-shadow: 0 0 20px 6px rgba(255, 105, 180, 0.7); }
.aura-ice     { box-shadow: 0 0 20px 6px rgba(168, 230, 207, 0.7); }
.aura-stone   { box-shadow: 0 0 20px 6px rgba(136, 136, 136, 0.7); }
.level-cyan  { background: linear-gradient(145deg, #b2fefa, #0ed2f7); color: #333; }
.aura-cyan   { box-shadow: 0 0 20px 6px rgba(14, 210, 247, 0.7); }


/* Bouton spécial pour Nourrir */
.btn-nourrir {
  width: 100%;
  max-width: 160px;      /* empêche le débordement */
  margin-top: 10px;

  background-color: #ff9900;
  border: none;
  border-radius: 14px;
  padding: 6px 10px;

  font-weight: bold;
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  box-sizing: border-box;
}


.btn-nourrir:hover {
  background-color: #ffbc57;   /* vert plus clair au survol */
  transform: scale(1.05);      /* petit zoom doux */
}

.btn-nourrir:disabled {
  background-color: #A5D6A7;   /* vert grisé quand désactivé */
  cursor: not-allowed;
  transform: none;
}

.icon-nourrir {
  width: 26px;     /* ⬅️ au lieu de 38px */
  height: 26px;
  object-fit: contain;
}


/* Ligne de statut + badge (chip) */
/* avant: .status-line en row */
.status-line{
  display: flex;
  flex-direction: column;   /* ⬅️ empile label puis badge */
  align-items: center;
  gap: 4px;
  margin: 6px 0 2px;
  width: 100%;
}

.status-label{
  color: #555;
  font-weight: 600;
  white-space: nowrap;
  margin: 0;                /* évite un saut de ligne inutile */
  /* pas de “:” ici, on l’enlève du texte */
}

/* tu peux garder tes .status-chip / .chip-expedition / .chip-active / .chip-hungry tels quels */


/* Le badge */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;         /* empêche le retour à la ligne */
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.06);
}

/* Variantes de couleurs */
.chip-expedition { background: #eef2ff; color: #4f46e5; }
.chip-active     { background: #e8f5e9; color: #2e7d32; }
.chip-hungry     { background: #ffebee; color: #c62828; }

/* Icône dans le badge */
.status-chip img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

/* Texte du temps restant */
.status-remaining {
  margin-top: 4px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #555;
}
/* === Boutique Crypto === */
#crypto-shop { background:#fff6e8; padding:20px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.05); margin:20px auto; max-width:620px; }
.crypto-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.crypto-card { background:#fff; border-radius:12px; padding:14px; box-shadow:0 2px 6px rgba(0,0,0,.08); display:flex; flex-direction:column; gap:10px; }
.crypto-card h4 { margin:0; font-size:16px; }
.crypto-meta { font-size:13px; color:#666; }
.crypto-card button { width:100%; }
.cap-note { font-size:12px; color:#777; text-align:center; }

/* Badge boost sur la fiche pet */
.boost-chip { 
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; border-radius:999px; font-weight:700; font-size:12px;
  background:#e8f5ff; color:#1769aa; margin-bottom:6px;
  white-space: nowrap;              /* évite le retour à la ligne */
}
.boost-chip .boost-icon {
  width:20px; 
  height:20px;          /* 16 → 20 pour mieux ressortir */
  image-rendering:auto;             /* icône lisse */
  position:relative;
  top: 2px;  
}
.prod-bonus { color:#1769aa; font-weight:700; margin-left:4px; }
/* Badge total prod/h dans la ferme */
/* Panneau discret : production totale /h (fixe à gauche de l'écran) */
/* Panneau discret : production totale /h (fixe à gauche) */
#farm-prod-pill{
  position: fixed;
  left: 12px;
  top: 120px;                    /* ajuste si besoin */
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 6px 10px;
  font: 700 13px/1.1 'Fredoka', sans-serif;
  color: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  z-index: 100;
  pointer-events: none;          /* panneau passif */
}
#farm-prod-pill .row{ display:flex; align-items:center; gap:6px; }
#farm-prod-pill img{ width:16px; height:16px; image-rendering:auto; }
#farm-prod-pill .sub{ font-size:12px; font-weight:600; color:#555; margin-top:2px; padding-left:22px; }

@media (max-width: 768px){
  #farm-prod-pill{ left:8px; bottom:76px; top:auto; font-size:12px; }
}

/* Bouton Expédition : normal vs sélectionné (en mission) */
.shop-item .expedition-btn{
  background:#6e60da;          /* ta couleur violette actuelle */
  color:#2b2b2b;
  cursor:pointer;
}
.shop-item .expedition-btn:hover{ background:#c9c2ff; }

/* État sélectionné (= pet en expédition) */
.shop-item .expedition-btn.is-active,
.shop-item .expedition-btn:disabled{
  background:#6781b9;          /* bleu “actif” */
  color:#fff;
  border:1px solid #1e40af;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
  cursor:default;
}
/* Karma */
.karma-widget{position:fixed;right:18px;bottom:18px;z-index:1000;font-family:inherit}
.karma-widget .karma-toggle{padding:10px 14px;border:0;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.15);cursor:pointer}
.karma-widget .karma-panel{display:none;position:absolute;right:0;bottom:46px;width:280px;background:#111;border:1px solid #2b2b2b;border-radius:14px;padding:12px;box-shadow:0 12px 28px rgba(0,0,0,.3)}
.karma-widget.open .karma-panel{display:block}
.karma-row{display:flex;align-items:center;gap:8px;margin:8px 0;justify-content:space-between}
.karma-actions{display:flex;justify-content:flex-end;margin-top:6px}
.karma-actions button{padding:8px 12px;border-radius:10px;border:0;cursor:pointer}

/* Leaderboard */
.leaderboard-widget{position:fixed;left:18px;bottom:18px;z-index:1000;font-family:inherit}
.leaderboard-widget .leaderboard-toggle{padding:10px 14px;border:0;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.15);cursor:pointer}
.leaderboard-widget .leaderboard-panel{display:none;position:absolute;left:0;bottom:46px;width:360px;background:#111;border:1px solid #2b2b2b;border-radius:14px;padding:12px;box-shadow:0 12px 28px rgba(0,0,0,.3)}
.leaderboard-widget.open .leaderboard-panel{display:block}
.lb-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.lb-name{display:flex;align-items:center;gap:8px}
.lb-name input{max-width:180px}
.lb-table{width:100%;border-collapse:collapse;font-size:14px}
.lb-table th,.lb-table td{padding:6px;border-bottom:1px dashed #2b2b2b}
.lb-row.me{background:rgba(255,255,255,.04)}
.lb-rank{width:46px;opacity:.8}
.lb-karma{font-weight:700;text-align:right}
.lb-week-card,.lb-season-card{border:1px solid #2b2b2b;border-radius:10px;padding:8px;margin-bottom:8px;background:#0c0c0c}
.lb-week-title,.lb-season-title{font-weight:700;margin-bottom:4px}
.lb-week-points,.lb-week-cap,.lb-season-total{font-size:13px;opacity:.9}
#weekly-pill{position:fixed;left:50%;transform:translateX(-50%);bottom:86px;background:#0c0c0c;border:1px solid #2b2b2b;border-radius:100px;padding:8px 14px;display:flex;gap:8px;align-items:center;z-index:990}
#weekly-pill .dot{width:8px;height:8px;border-radius:50%;background:#27d27d;display:inline-block}
/* ===== THEME variables (facile à tweaker) ===== */
:root{
  --panel-bg-1:#1e1e2f;
  --panel-bg-2:#2a2a45;
  --panel-border:#4b4b6e;
  --panel-soft:#0c0c18;
  --accent:#6c5ce7;        /* violet néon */
  --accent-2:#00cec9;      /* cyan pour le Karma */
  --accent-3:#fd79a8;      /* rose hover */
  --text:#ffffff;
  --text-dim:rgba(255,255,255,.85);
  --shadow:0 10px 24px rgba(108,92,231,.35);
}

/* ===== Convertisseur Karma ===== */
.karma-widget .karma-panel{
  background: linear-gradient(145deg,var(--panel-bg-1),var(--panel-bg-2));
  border:1px solid var(--panel-border);
  border-radius:16px;
  box-shadow: var(--shadow);
  color:var(--text);
}
.karma-row{color:var(--text-dim)}
#karma-preview{color:var(--accent-2); font-weight:700}

.karma-actions button{
  background:var(--accent);
  color:#fff;
  border:0;
  border-radius:12px;
  padding:8px 14px;
  font-weight:700;
  transition:transform .08s ease, box-shadow .15s ease, background .15s;
}
.karma-actions button:hover{ background:var(--accent-3); box-shadow:0 0 10px var(--accent-3) }
.karma-actions button:active{ transform:translateY(1px) }
.karma-actions button:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none }

/* Slider cohérent */
#karma-coins{
  -webkit-appearance: none; appearance: none; width:100%; height:6px; border-radius:999px;
  background: linear-gradient(90deg,var(--accent) 0%, var(--accent) var(--value,0%), #50506f var(--value,0%));
  outline:none;
}
#karma-coins::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent-3); border:2px solid #fff; box-shadow:0 0 8px var(--accent-3);
  cursor:pointer;
}
#karma-coins::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--accent-3); border:2px solid #fff; box-shadow:0 0 8px var(--accent-3);
  cursor:pointer;
}

/* ===== Leaderboard ===== */
.leaderboard-widget .leaderboard-panel{
  background: linear-gradient(145deg,var(--panel-bg-1),var(--panel-bg-2));
  border:1px solid var(--panel-border);
  border-radius:18px;
  box-shadow: var(--shadow);
  color:var(--text);
}
.lb-week-card,.lb-season-card{
  background:var(--panel-soft);
  border:1px solid var(--panel-border);
}
.lb-karma{ color:var(--accent-2); font-weight:800 }
.lb-meta{ opacity:.9 }

/* Podium */
.lb-row:nth-child(1) .lb-rank{ color:#ffd700; font-weight:700 }
.lb-row:nth-child(2) .lb-rank{ color:#c0c0c0; font-weight:700 }
.lb-row:nth-child(3) .lb-rank{ color:#cd7f32; font-weight:700 }

/* Boutons flottants */
.karma-widget .karma-toggle,
.leaderboard-widget .leaderboard-toggle{
  background:var(--panel-soft); color:#fff; border:1px solid var(--panel-border);
}
.karma-widget .karma-toggle:hover,
.leaderboard-widget .leaderboard-toggle:hover{
  box-shadow:0 0 8px rgba(108,92,231,.5);
}

/* Pastille semaine */
#weekly-pill{
  background:var(--panel-soft);
  border:1px solid var(--panel-border);
  color:#fff;
}

/* Accessibilité : focus visible */
.karma-widget button:focus,
.leaderboard-widget button:focus,
#lb-display-name:focus,
#karma-coins-input:focus{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(0,206,201,.25);
}

/* Mobile: panels un peu plus larges et lisibles */
@media (max-width: 640px){
  .karma-widget .karma-panel{ width: 88vw }
  .leaderboard-widget .leaderboard-panel{ width: 92vw }
  .lb-table{ font-size:13px }
}


.lb-week-cooldown {
  font-size: 12px;
  opacity: .85;
  margin-top: 4px;
  color: #00cec9; /* cyan Karma */
}
.icon-food{
  width:18px;height:18px;vertical-align:-3px;margin-right:6px;image-rendering:pixelated
}
/* Rendre la pièce non pixelisée partout */
.icon-coin { image-rendering: auto !important; }

/* Au cas où l’icône est dans des cartes qui pixellisent par défaut */
.shop-item .icon-coin,
.upgrade-pixel-btn .icon-coin { image-rendering: auto !important; }

/* Si tu veux aussi cibler par chemin (utile si un coin échappe à la classe) */
img[src*="images/ui/monnaie_coin.png"] { image-rendering: auto !important; }
#crypto-shop .crypto-hero{
  display:flex;
  justify-content:center;
  margin: 8px 0 18px;
}
#crypto-shop .crypto-hero img{
  width: 120px;      /* ajuste si besoin (80–140) */
  height: auto;
  image-rendering: pixelated;
}
/* ================================
   HK Variant — NEO-EMBER (pro)
   ================================ */
:root {
  /* Palette braise/orange + vert succès */
  --hk-grad-1: #ffcf6e;   /* amber soft */
  --hk-grad-2: #ff8a3d;   /* orange vif */
  --hk-grad-3: #f2492f;   /* rouge braise */
  --hk-ok-1: #38ef7d;     /* vert connecté */
  --hk-ok-2: #1bcf66;
  --hk-ok-3: #0a7a3f;

  --hk-radius: 16px;
  --hk-pad-y: 11px;
  --hk-pad-x: 16px;

  --hk-txt: #1d1b19;
  --hk-txt-dim: #6b6f78;

  /* Verre */
  --hk-glass-bg: rgba(255,255,255,.70);
  --hk-glass-brd: rgba(0,0,0,.06);
}

/* Badge adresse — pill verre haute lisibilité */
.hk-mm-badge{
  padding: 7px 12px;
  font-weight: 700;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  border: 1px solid var(--hk-glass-brd);
  color: var(--hk-txt);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 6px 18px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}

/* ---------- Bouton Ember premium ---------- */
.hk-mm-btn{
  position: relative;
  isolation: isolate; /* pour les pseudos */
  border-radius: var(--hk-radius);
  padding: var(--hk-pad-y) var(--hk-pad-x);
  font-weight: 900;
  letter-spacing: .2px;
  color: #fff;
  background:
    linear-gradient(135deg, var(--hk-grad-1), var(--hk-grad-2) 48%, var(--hk-grad-3) 100%);
  /* triple profondeur (relief + glow ambiant) */
  box-shadow:
    0 2px 0 rgba(0,0,0,.18) inset,                 /* bord bas interne */
    0 1px 0 rgba(255,255,255,.28) inset,           /* liseré top */
    0 10px 22px rgba(242, 73, 47, .28),            /* glow orange */
    0 2px 6px rgba(0,0,0,.10);
  transition:
    transform 120ms ease,
    filter 180ms ease,
    box-shadow 220ms ease;
  overflow: clip;
}

/* Liseré externe subtil (anneau lumière) */
.hk-mm-btn::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background:
    radial-gradient(140% 100% at 50% 0%,
      rgba(255,255,255,.35), rgba(255,255,255,0) 40%) ,
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%);
  mix-blend-mode: screen;
  pointer-events:none;
  opacity:.9;
}

/* Aura floue sous le bouton (réalisme mobile) */
.hk-mm-btn::after{
  content:"";
  position:absolute; inset:auto -20% -26% -20%;
  height:56%;
  filter: blur(18px);
  background: radial-gradient(60% 90% at 50% 0%,
    rgba(255,115,64,.35), rgba(255,115,64,0) 70%);
  z-index:-1;
}

/* Shine dynamique déjà présent : on le rend plus “liquide” */
.hk-mm-shine{
  background:
    radial-gradient(120px 84px at var(--mx,50%) var(--my,0%),
      rgba(255,255,255,.28), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%);
  opacity:.95;
}

/* Texture animée très douce (grain) */
.hk-mm-btn > .hk-mm-text,
.hk-mm-btn > .hk-mm-ico{
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

/* Hover/Press dignes d’un jeu mobile */
.hk-mm-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.04) saturate(1.02);
  box-shadow:
    0 2px 0 rgba(0,0,0,.16) inset,
    0 1px 0 rgba(255,255,255,.28) inset,
    0 14px 28px rgba(242,73,47,.34),
    0 3px 8px rgba(0,0,0,.10);
}
.hk-mm-btn:active{ transform: translateY(0); filter: brightness(.99); }

/* Focus visible (pad tactile + clavier) */
.hk-mm-btn:focus-visible{
  outline: 3px solid rgba(255, 207, 110, .65);
  outline-offset: 3px;
}

/* État CONNE*
/* Progression & explications */
.lb-season-card { background: rgba(255,255,255,0.06); padding:12px; border-radius:12px; margin:8px 0 12px; }
.lb-progress { margin: 8px 0; }
.lb-progress-bar { height: 8px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; }
#lb-progress-fill { display:block; height:100%; background: linear-gradient(90deg, #ffd54f, #ff9800); }
.lb-progress-text { font-size: 12px; opacity: 0.85; margin-top: 6px; }

.lb-inline-stats { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.lb-badge { background: rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); padding:4px 8px; border-radius: 999px; font-size: 12px; }
.lb-tip { font-size: 12px; opacity: 0.95; }

.lb-how { margin-top: 10px; }
.lb-how summary { cursor: pointer; list-style: none; }
.lb-how summary::marker { display:none; }
.lb-how summary { font-weight: 600; }
.lb-how-body { font-size: 13px; opacity: 0.95; padding-top: 6px; }
.lb-how-body ul { margin: 6px 0 6px 18px; }
.lb-how-body em { opacity: 0.95; }
/* Pet sélectionné (pause) */
.pet-paused {
  animation-play-state: paused !important;
  filter: drop-shadow(0 0 10px rgba(255, 200, 80, 0.9));
  cursor: pointer;
}

/* =========================
   PET ACTION MENU (ALT UI)
   ========================= */

/* Menu flottant */
#pet-action-menu{
  position: fixed;                 /* plus stable qu'absolute (évite les scroll weird) */
  z-index: 9999;
  display: none;
  width: 220px;
  padding: 12px;
  border-radius: 16px;

  background: rgba(20, 18, 28, 0.88);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}

/* Petite flèche */
#pet-action-menu::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(20, 18, 28, 0.88);
  border-right: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

/* Boutons du menu */
#pet-action-menu button{
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 7px 0;

  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 15px;

  color: #fff;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  cursor: pointer;

  transition: transform .10s ease, filter .15s ease, background .15s ease;
}

#pet-action-menu button:hover{
  background: rgba(255,255,255,0.16);
  filter: brightness(1.05);
  transform: translateY(-1px);
}
#pet-action-menu button:active{
  transform: translateY(0px) scale(0.99);
}

/* Variantes */
#pet-action-menu .btn-nourrir{
  background: linear-gradient(135deg, #ffb100, #ff7a00);
  box-shadow: 0 10px 22px rgba(255, 140, 0, 0.25);
}
#pet-action-menu .btn-nourrir:hover{ filter: brightness(1.08); }

#pet-action-menu .btn-expedition{
  background: linear-gradient(135deg, #7c5cff, #4aa3ff);
  box-shadow: 0 10px 22px rgba(90, 120, 255, 0.25);
}
#pet-action-menu .btn-caress{
  background: linear-gradient(135deg, #ff5aa5, #ff7ad9);
  box-shadow: 0 10px 22px rgba(255, 90, 165, 0.22);
}

/* =========================
   PAUSE PET (NE TOUCHE PAS TRANSFORM)
   ========================= */

/* highlight du pet sélectionné */
.pet-selected {
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
}

/* la PAUSE: on fige les animations sans override transform */
.pet-paused{
  animation-play-state: paused !important;
}

/* si tu as un container qui bouge aussi, pause-le également */
.pet-container.pet-paused,
.pet-container.pet-paused *{
  animation-play-state: paused !important;
}

/* Option: petit “idle” pendant pause (sans transform: on évite) */
.pet-paused{
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.35)) brightness(1.05);
}
.pet-exp-cd{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:95px;           /* au-dessus du pet */
  background:rgba(0,0,0,.75);
  color:#fff;
  font-size:12px;
  padding:4px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  white-space:nowrap;
  z-index:999;
}
.care-popup {
  position: fixed;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,20,20,0.9);
  color: #fff;
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 18px;
  z-index: 9999;
  pointer-events: none;
  animation: careFade 2s ease forwards;
}

.hidden {
  display: none;
}

@keyframes careFade {
  0% { opacity: 0; transform: translate(-50%, 20px); }
  20% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
.pet-care-indicator {
  position: absolute;
  top: -18px;
  right: 10px;
  font-size: 20px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255,100,150,0.8));
  animation: carePulse 1.6s infinite;
}

.pet-care-indicator.active {
  opacity: 1;
  transform: scale(1);
}

@keyframes carePulse {
  0%   { transform: scale(1);   }
  50%  { transform: scale(1.15);}
  100% { transform: scale(1);   }
}



/* 🔷 Icône Karma premium */
.karma-highlight .karma-icon {
  width: 64px;          /* ⬆⬆ beaucoup plus gros */
  height: 64px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 10px rgba(90,140,255,0.7));
}


/* Valeur Karma mise en avant */
.karma-value {
  font-size: 20px;
  font-weight: 800;
  color: #4a6cff;
}
.karma-highlight {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(80, 130, 255, 0.18),
    rgba(160, 120, 255, 0.18)
  );
  box-shadow: 0 0 16px rgba(100, 140, 255, 0.35);

  /* 🔑 ALIGNEMENT */
  display: flex;
  align-items: center;
  gap: 14px;
}

/*widget karma*/

/* Bouton ouverture widget Karma */
.karma-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}

/* Icône Karma du widget */
.karma-widget-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 6px rgba(90,140,255,0.7));
}
/* 🟣 Founders Pass Card */
.founders-card {
  position: relative;
  transform: scale(1.08);              /* 🔥 plus grande */
  margin: 40px auto;
  padding: 22px 20px 20px;
  border-radius: 22px;

  background: linear-gradient(
    135deg,
    rgba(110,160,255,0.25),
    rgba(190,140,255,0.28)
  );

  box-shadow:
    0 0 40px rgba(120,160,255,0.55),
    0 0 80px rgba(160,120,255,0.35),
    inset 0 0 18px rgba(255,255,255,0.12);

  z-index: 2;
}


/* Badge Saison */
.founders-badge {
  top: -16px;
  right: 18px;
  font-size: 13px;
  padding: 6px 14px;
  letter-spacing: 0.5px;

  background: linear-gradient(135deg, #ffd36a, #ff9f43);
  box-shadow:
    0 0 12px rgba(255,190,90,0.9),
    0 0 24px rgba(255,160,60,0.6);
}


/* Header */
.founders-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.founders-icon {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 8px rgba(120,160,255,0.8));
}

.founders-header h3 {
  margin: 0;
  font-size: 20px;
}

/* Perks */
.founders-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.founders-perks li {
  margin: 6px 0;
  font-size: 14px;
  opacity: 0.95;
}

/* Footer */
.founders-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.founders-price {
  font-size: 22px;
  font-weight: 800;
  color: #ffd36a;
}

.founders-buy-btn {
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 16px;

  background: linear-gradient(135deg, #6d8bff, #b07cff);

  box-shadow:
    0 0 18px rgba(140,160,255,0.7),
    inset 0 0 8px rgba(255,255,255,0.2);

  transition: all 0.2s ease;
}

.founders-buy-btn:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 30px rgba(170,190,255,1),
    inset 0 0 10px rgba(255,255,255,0.3);
}


.founders-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(150,170,255,0.9);
}

/* Note légale */
.founders-note {
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.65;
  text-align: center;
}
@keyframes foundersGlow {
  0% {
    box-shadow:
      0 0 35px rgba(120,160,255,0.45),
      0 0 70px rgba(160,120,255,0.25);
  }
  50% {
    box-shadow:
      0 0 55px rgba(150,190,255,0.75),
      0 0 100px rgba(190,140,255,0.45);
  }
  100% {
    box-shadow:
      0 0 35px rgba(120,160,255,0.45),
      0 0 70px rgba(160,120,255,0.25);
  }
}

.founders-card {
  animation: foundersGlow 3.5s ease-in-out infinite;
}
.crypto-grid {
  position: relative;
}

.founders-card {
  outline: 2px solid rgba(180,200,255,0.35);
}

/* bande qui passe */
.lore-banner {
  width: 100%;
  padding: 10px 14px;
  text-align: center;

  font-size: 14px;
  font-weight: 500;
  color: #f5f7ff;

  background: linear-gradient(
    90deg,
    rgba(90,140,255,0.85),
    rgba(160,120,255,0.85)
  );

  box-shadow: 0 2px 10px rgba(120,160,255,0.35);
  z-index: 5;
}

.lore-banner strong {
  color: #ffd36a;
  font-weight: 700;
}
@keyframes loreGlow {
  0% { opacity: 0.85; }
  50% { opacity: 1; }
  100% { opacity: 0.85; }
}

.lore-banner {
  animation: loreGlow 6s ease-in-out infinite;
}
/* =========================
   🐾 BOUTIQUE DES PETS — VARIANTE RPG
   ========================= */

#shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 24px;
}

/* Carte pet */
.shop-item {
  position: relative;
  background: #fffaf0;
  border-radius: 16px;
  padding: 14px 12px 16px;
  text-align: center;

  border: 2px solid rgba(180,160,120,0.35);

  box-shadow:
    0 6px 16px rgba(0,0,0,0.12),
    inset 0 0 10px rgba(255,255,255,0.6);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Effet carte au hover */
.shop-item:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 26px rgba(120,140,255,0.3),
    inset 0 0 12px rgba(255,255,255,0.8);
}

/* Sprite pet mis en avant */
.shop-item img {
  margin: 6px auto 10px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}

/* Nom du pet */
.shop-item p:first-of-type {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 4px;
  color: #3a2b18;
}

/* Infos */
.shop-item p {
  font-size: 13px;
  margin: 3px 0;
  color: #4a3b2a;
}

/* Bouton acheter */
.shop-item button {
  margin-top: 12px;
  padding: 9px 16px;
  border-radius: 14px;
  border: none;
  cursor: pointer;

  background: linear-gradient(135deg, #ffb347, #ffcc66);
  color: #3a2500;
  font-weight: 800;
  font-size: 13px;

  box-shadow: 0 4px 10px rgba(255,180,90,0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover bouton */
.shop-item button:hover:not(:disabled) {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(255,200,120,0.9);
}

/* Désactivé */
.shop-item button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
#shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; /* ⬅️ plus serré */
  margin-top: 18px;
}

.shop-item {
  padding: 12px 10px 14px; /* ⬅️ moins large */
}
/* CSS pour boutique objets comme founder pack */ 

/* 🧩 Base carte boutique (objets + founders) */
.crypto-card,
.founders-pass {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f7f5ff);
  border-radius: 18px;
  padding: 16px 14px 18px;

  box-shadow:
    0 10px 24px rgba(60, 60, 120, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.6);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.crypto-card:hover,
.founders-pass:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(60, 60, 120, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
.crypto-card h4 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #2e2e55;
}
.crypto-meta,
.cap-note {
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 6px;
}
.crypto-card button {
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;

  border: none;
  border-radius: 14px;

  font-weight: 800;
  font-size: 13px;

  background: linear-gradient(135deg, #8f8cff, #6d7cff);
  color: white;

  cursor: pointer;
  box-shadow: 0 6px 14px rgba(120, 120, 255, 0.35);

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.crypto-card button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(120, 120, 255, 0.45);
}
.founders-pass {
  background: linear-gradient(180deg, #fff6e5, #efe3ff);
  border: 2px solid rgba(255, 190, 120, 0.6);
  box-shadow:
    0 0 26px rgba(255, 180, 90, 0.55),
    inset 0 0 20px rgba(255,255,255,0.6);
}
.crypto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: stretch;
}
/* 🎖️ Ruban "Meilleure valeur" */
.value-ribbon {
  position: absolute;
  top: 12px;
  left: -6px;

  background: linear-gradient(135deg, #ffb347, #ff8c00);
  color: #fff;

  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;

  padding: 6px 10px;
  border-radius: 0 12px 12px 0;

  box-shadow: 0 4px 12px rgba(255, 160, 60, 0.45);
  z-index: 2;
}

/* petit triangle décoratif */
.value-ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;

  border-width: 6px 6px 0 0;
  border-style: solid;
  border-color: rgba(200, 100, 20, 0.8) transparent transparent transparent;
}
.founder-buy-btn:disabled {
  background: linear-gradient(135deg, #bdbdbd, #9e9e9e);
  color: #333;
}
.founders-perks {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}

.founders-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 6px;
  color: #2b2b2b;
}

.perk-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: auto;   /* ⬅️ IMPORTANT */
  flex-shrink: 0;
}

.founder-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;        /* ⬅️ PLUS GRAND */
  border-radius: 20px;

  background: linear-gradient(
    135deg,
    rgba(255, 205, 120, 0.35),
    rgba(255, 165, 60, 0.35)
  );

  box-shadow:
    0 0 18px rgba(255, 185, 90, 0.55),
    inset 0 0 6px rgba(255, 255, 255, 0.4);

  overflow: hidden;
}


.founder-badge img {
  width: 54px;      /* ⬅️ +20% mais SAFE */
  height: 54px;

  object-fit: contain;
  display: block;
}


.founder-badge.hidden {
  display: none;
}
.coin-icon-inline {
  width: 12px !important;
  height: 12px !important;
   vertical-align: middle;
  transform: translateY(-1px);
  margin: 0 4px;
}
/* ============================= */
/* AUTH BUTTONS – KARMAPETS UI   */
/* ============================= */

.auth-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Base bouton */
.auth-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 3px 0 rgba(0,0,0,0.25);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Effet clic */
.auth-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Couleurs */
.auth-btn.primary {
  background: linear-gradient(180deg, #7da7ff, #5c7cff);
  color: #fff;
}

.auth-btn.secondary {
  background: linear-gradient(180deg, #ffe08a, #ffc94a);
  color: #5a3b00;
}

.auth-btn.danger {
  background: linear-gradient(180deg, #ff8a8a, #ff5c5c);
  color: #fff;
}

/* Hover */
.auth-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Déconnexion (état connecté) */
.auth-btn.danger {
  border-color: rgba(255, 0, 0, 0.35);
}

/* Caché */
.hidden {
  display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
  .auth-btn {
    font-size: 9px;
    padding: 6px 10px;
  }
}
.auth-user {
  font-size: 9px;
  opacity: 0.85;
  margin-left: 6px;
}
.auth-lock {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.75);
  backdrop-filter: blur(4px);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-lock.hidden {
  display: none;
}

.auth-lock-box {
  background: #14182a;
  border: 2px solid #2f3cff;
  border-radius: 16px;
  padding: 24px 28px;
  max-width: 360px;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 40px rgba(47, 60, 255, 0.4);
}

.auth-lock-box h2 {
  margin-bottom: 12px;
  font-size: 22px;
}

.auth-lock-box p {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 18px;
}

.auth-lock-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.auth-lock-actions button {
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

#overlay-login {
  background: #2f3cff;
  color: white;
}

#overlay-signup {
  background: #1f8f4d;
  color: white;
}

.auth-lock-actions button:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}
@keyframes movePet {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(var(--range)); }
  100% { transform: translateX(0); }
}
@keyframes flipPet {
  0%   { transform: scaleX(-1); }
  49%  { transform: scaleX(-1); }
  50%  { transform: scaleX(1); }
  99%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
/* =========================
   🎵 Bouton son (UI Gaming)
========================= */
#sound-toggle {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;

  background: linear-gradient(145deg, #2a2a2a, #111);
  border: 2px solid #ffaa00;
  color: #ffaa00;

  font-size: 22px;
  padding: 8px 12px;
  border-radius: 10px;

  cursor: pointer;
  box-shadow: 0 4px 0 #000;
  transition: all 0.15s ease;

  font-family: inherit;
}

/* Hover = léger glow */
#sound-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 0 #000, 0 0 8px rgba(255, 170, 0, 0.4);
}

/* Click */
#sound-toggle:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #000;
}

/* Version désactivée (quand 🔇) */
#sound-toggle.muted {
  border-color: #555;
  color: #777;
  box-shadow: 0 3px 0 #000;
  opacity: 0.7;
}
.edit-name-btn{
  margin-left: 8px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #222;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.edit-name-btn:hover{
  transform: translateY(-1px);
  opacity: 1;
}
.edit-name-btn:active{
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}