html {
  overflow-y: scroll; /* la scrollbar est toujours là, même quand pas nécessaire */
}


/* ---- Modal Classement ---- */
#ranking-modal {
  display: none; /* masqué par défaut */
  position: fixed;
  z-index: 5000;
  left: 0; 
  top: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* overlay sombre */
  backdrop-filter: blur(4px);
  animation: fadeIn 0.25s ease-in-out;
}

/* Contenu de la modal */
#ranking-modal .modal-content {
  background: linear-gradient(145deg, #f3e5f5, #ffffff);
  margin: 5% auto;
  padding: 25px;
  border-radius: 18px;
  width: 90%;
  max-width: 450px;
  max-height: 80vh;         /* limite la hauteur */
  overflow-y: auto;         /* scroll interne */
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  text-align: center;
  position: relative;
  animation: slideUp 0.3s ease;
  border: 2px solid #CC0000;
}

/* Bouton de fermeture */
#ranking-modal .close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 22px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
}
#ranking-modal .close:hover {
  color: #CC0000;
}

/* Titre */
#ranking-modal h2 {
  margin-top: 0;
  font-size: 1.6rem;
  color: #CC0000;
}

/* ==============================
   CLASSEMENT
============================== */
#ranking-list {
  margin-top: 15px;
  text-align: left;
  padding-left: 20px;
  list-style: none;
  counter-reset: ranking;
}

#ranking-list li {
  margin: 8px 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f8f3fa;
  font-weight: 500;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.05);
  position: relative;
}

.stats {
  margin-top: 4px;
}

.stats div {
  display: flex;
  align-items: center;
  gap: 6px; /* espace entre icône et texte */
  font-size: 14px;
}

.stats .icon {
  display: inline-block;
  width: 20px; /* fixe la largeur pour aligner verticalement */
  text-align: center;
}


/* ---- Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ==============================
   Modal inscription
============================== */
.hidden {
  display: none;
}

.modal {
  display: none; 
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 3000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  width: 300px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.modal-content h2 {
  margin-bottom: 15px;
}

.modal-content input {
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  border: 2px solid #333;
  border-radius: 6px;
}

.close {
  color: #CC0000;
  top: 10px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}


/* ========================= */
/* PokéClick - Carte globale */
/* ========================= */
.pokeclick-card {
  text-align: center;
  padding: 20px;
  font-family: 'Press Start 2P', monospace;
  color: white;
}
#pokeclick-balance,
#farm-progress-text,
.pokeclick-info
{
  color: rgb(0, 0, 0);
}


/* ========================= */
/* Pokéball principale       */
/* ========================= */
.pokeclick-ball {
  width: 300px;
  height: 300px;
  margin: 20px auto;
  border-radius: 50%;
  background: linear-gradient(to bottom, #CC0000 50%, white 50%);
  border: 6px solid black;
  position: relative;
  cursor: pointer;
  transition: transform 0.1s ease;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

/* Ligne centrale */
.pokeclick-ball::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 8px;
  background: black;
  transform: translateY(-50%);
}

/* Bouton central */
.pokeclick-ball::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  background: white;
  border: 6px solid black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

/* Effet rebond au clic */
.pokeclick-ball:active {
  transform: scale(0.9);
}

/* Animation secousse */
.pokeclick-ball.click-anim {
  animation: bounce 0.4s ease;
}

@keyframes bounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.8); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ========================= */
/* Texte flottant (gains)    */
/* ========================= */
.floating-text {
  position: absolute;
  font-size: 16px;
  color: gold;
  pointer-events: none;
  text-shadow: 1px 1px 3px black;
  opacity: 0;
  animation: floatRandom 1s ease forwards;
}

@keyframes floatRandom {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--x), var(--y)) scale(1.2) rotate(var(--rot));
  }
}

/* ========================= */
/* Progression journalière   */
/* ========================= */
.farm-progress {
  margin: 10px auto 20px;
  max-width: 400px;
}

.farm-progress-text {
  font-size: 0.7rem;
  margin-bottom: 5px;
  color: white;
  text-align: center;
}

.farm-progress-bar-bg {
  background: #333;
  border-radius: 6px;
  height: 12px;
  overflow: hidden;
}

.farm-progress-bar {
  background: #4CAF50;
  height: 100%;
  width: 0%;
  transition: width 0.3s ease, background 0.3s ease;
}

/* Couleur progressive */
.farm-progress-bar[data-percent="low"] {
  background: #4CAF50; /* vert */
}
.farm-progress-bar[data-percent="mid"] {
  background: #FFC107; /* orange */
}
.farm-progress-bar[data-percent="high"] {
  background: #F44336; /* rouge */
}



/* ==============================
   Base
============================== */

/* ✅ Filigrane Pokéball avec opacité contrôlée */
body::before {
  content: "";
  position: fixed; /* couvre tout l’écran même au scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("https://i.etsystatic.com/21972877/r/il/7d3708/3203082995/il_1080xN.3203082995_m9os.jpg");
  background-repeat: repeat;
  background-position: center;
  background-size: 240px;
  background-attachment: fixed;

  opacity: 0.1;   /* 🔥 règle ici la transparence du filigrane */
  z-index: -1;    /* reste derrière tout le contenu */
}


@keyframes glowPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 5px 2px rgb(255, 187, 41);
    transform: rotate(0deg);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 15px 6px rgb(255, 187, 41);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 5px 2px rgb(255, 187, 41);
  }
    0%   { transform: rotate(0deg); }
  20%  { transform: rotate(15deg); }
  40%  { transform: rotate(0deg); }
  50%  { transform: rotate(0deg); } /* petit arrêt */
  70%  { transform: rotate(15deg); }
  90%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ==============================
   Tabs & Cards
============================== */
.tab { 
  display: none; 
}
.tab.active { display: block; }

/* ==============================
   Inputs & Buttons
============================== */
input {
  font-family: system-ui;
  font-size: 15px;
  padding: 0.5rem;
  margin: 0.5rem;
  border: 2px solid #1e1e2f;
  border-radius: 6px;
}

/* =========================
   Table Pokémon (PokéGamble)
========================= */
.table-container {
  margin-top: 30px; /* espace entre la fenêtre de jeu et le tableau */
  max-height: 412px; /* plus grand */
  overflow-y: auto;
  border-radius: 12px;
  display: flex;
  justify-content: center;
}

.table-container::-webkit-scrollbar {
  display: none;
}
/* Table */
table {
  width: 70%;
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 6px; /* espace entre cases */
}

/* En-têtes */
thead th {
  position: sticky;
  top: 0;
  background: #fff;
  border-radius: 12px;
  color: #1e1e2f;
  text-transform: uppercase;
  border-radius: 8px;
  position: sticky;
  top: 0;
  z-index: 2;
}


/* Cellules */
th, td {
  border: 3px solid black;
  border-radius: 12px;
  padding: 0.7rem;
  text-align: center;
}

td:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* ✅ Cellules correctes */
td.green {
  background: linear-gradient(135deg, #81c784, #388e3c);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ❌ Cellules incorrectes */
td.red {
  background: linear-gradient(135deg, #e57373, #c62828);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}



/* ==============================
   Images
============================== */
.pokedex-img{
  cursor: pointer;
  width: 120px;
}
.arene-effet, .arene-effet-modal {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px;
  border-radius: 8px;
  font-size: 0.9em;
  color: #ddd;
}
.arene-effet p, .arene-effet-modal p {
  margin: 2px 0;
  font-size: 0.5rem;
}

.arene-img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  cursor: pointer;
}

.pokesarene-img{
  cursor: pointer;
  width: 136%;
}


#ombre-container {
  width: 150px;
  height: 150px;
  margin: 1rem auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ombre-img {
  width: 100%;
  height: auto;
  transform: scale(4);
  filter: brightness(0) saturate(100%);
}

#carte-container {
  width: 200px;
  height: 280px;
  margin: 1rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#carte-img {
  width: 100%;
  height: auto;
}

img {
  pointer-events: auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* ==============================
   Text & Feedback
============================== */
h2 { font-size: 1rem; color: #CC0000; }
p, #resultat, #compteur, #ombre-feedback, #cri-feedback, #carte-feedback { 
  font-size: 0.8rem; 
}
h1 {
  font-size: 0.8em;
}
#text-description{
  color: #CC0000;
}

.success { color: #2e7d32;  animation: pop 0.4s ease; }
.error { color: #CC0000; }

/* ==============================
   Animations
============================== */
#victory-message .reward {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: gold;
  text-shadow: 0 0 8px yellow, 0 0 12px orange, 0 0 20px red;
  margin-top: 15px;
  display: inline-block;
}

@keyframes reward-pop {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.3);
    opacity: 1;
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

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

/* Fenêtre modale */
/* Fenêtre modale cachée par défaut */
#victory-modal {
  display: none; /* reste caché au départ */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* Contenu du modal */
.victory-content {
  text-align: center;
  color: white;
  position: relative;
}

#victory-img.shiny {
  filter: drop-shadow(0 0 15px gold) drop-shadow(0 0 30px orange);
}
#victory-message.shiny-text {
  font-size: 12px;
  font-weight: bold;
  color: #ffcc00;
  text-shadow: 0 0 10px #ff9900, 0 0 20px #ff6600, 0 0 30px #ff3300;
  text-align: center;
  margin: 15px 0;
}

#victory-message.shiny-text .reward {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: gold;
  text-shadow: 0 0 8px yellow, 0 0 12px orange, 0 0 20px red;
  margin-top: 15px;
  display: inline-block;
}

/* Glow qui pulse */
@keyframes pulseGlow {
  0%   { filter: drop-shadow(0 0 5px gold) drop-shadow(0 0 10px orange); }
  50%  { filter: drop-shadow(0 0 20px gold) drop-shadow(0 0 40px orange); }
  100% { filter: drop-shadow(0 0 5px gold) drop-shadow(0 0 10px orange); }
}

/* Aura qui tourne doucement */
@keyframes shineRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Canvas pour confettis */
#confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.victory-pokemon {
  width: 250px;
  height: 250px;
  object-fit: contain;
  animation: pop 0.6s ease;
  margin-bottom: 1.5rem;
}

#defeat-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.defeat-content {
  text-align: center;
  color: white;
  position: relative;
}

#defeat-message {
  margin-top: 1rem;
  font-size: 1rem;
  color: #CC0000;
  text-shadow: 2px 2px 5px #1e1e2f;
}

.defeat-icon {
  width: 200px;
  height: 200px;
  object-fit: contain;
  animation: shake 0.6s ease infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}


/* ==============================
   Bouton PokéShop (comme MasterBall mais or/orange)
============================== */
.shop-balance {
  font-size: 0.8em;
  font-weight: normal;
  margin-left: 10px;
  color: #444;
}

.shopball-btn {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid black;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shopball-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px gold, 0 0 20px orange;
}

/* Haut doré */
.shopball-btn .pokeball-top {
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, gold 0%, orange 100%);
}

/* Bas blanc */
.shopball-btn .pokeball-bottom {
  width: 100%;
  height: 50%;
  background: white;
}

/* Cercle central */
.shopball-btn .pokeball-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: white;
  border: 3px solid black;
  border-radius: 50%;
  z-index: 2;
}


/* ==============================
   Historique en cartes
============================== */
.history-container {
  display: grid;
  max-width: 70%;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin: 1.5rem auto;
}

.history-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 0.8rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.history-card:hover {
  transform: translateY(-5px);
}

/* Image */
.history-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 0.5rem;
  pointer-events: none;
}

/* Nom */
.history-card h4 {
  font-size: 0.8rem;
  margin: 0.3rem 0;
  color: #2c2c2c;
}

/* Badge résultat */
.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  font-size: 0.7rem;
  margin: 0.3rem 0;
}

.badge.success {
  background: #4caf50;
  color: white;
}

.badge.error {
  background: #CC0000;
  color: white;
}

/* Infos en pastilles */
.pastille {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  margin: 0.1rem;
  border-radius: 6px;
  background: #eee;
  font-size: 0.6rem;
}

/* ==============================
   Cards (refonte commune)
============================== */

.card {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  margin: 1.5rem auto;
  max-width: 70%;
  backdrop-filter: blur(8px);
}

.card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}

.card h2 {
  color: #CC0000;
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}

.card .compteur {
  top: 10px;
  left: 15px;
  font-size: 0.7rem;
  color: #fff;
  background: #2c2c2c;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.3);
}

/* ==============================
   Indice
============================== */
/* Layout spécial pour la card avec indices */
.card-with-hints {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

/* Zone contenu principal */
.card-content {
  width: 100%;
  flex: 1;
}

/* Colonne verticale des cartes indices */
.hint-cards-column {
  display: flex;
  flex-direction: column;
}

/* Style cartes indices */
.hint-card {
  width: 90px;
  height: 125px;
  perspective: 1000px;
  cursor: not-allowed;
  position: relative;
}

.hint-card .front,
.hint-card .back {
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 8px;
  backface-visibility: hidden;
  transition: transform 0.6s, filter 0.3s;
  display: flex;
  align-items: flex-start; /* texte en haut */
  justify-content: center;
  padding: 3px;
  font-size: 0.7rem;
  font-family: 'Press Start 2P', monospace;
  text-align: center;
}

.hint-card .front {
  display: flex;
  align-items: center;      /* centrage vertical */
  justify-content: center;  /* centrage horizontal */
  text-align: center;
  font-size: 1.5rem;
  color: white;

  /* Glow doré */
  text-shadow:
    0 0 6px rgba(255, 215, 0, 0.9),
    0 0 12px rgba(255, 200, 0, 0.8),
    0 0 20px rgba(255, 180, 0, 0.7);
}

/* Dos de carte Pokémon grisé */
.hint-card .front {
  background: url("/img/backface.webp") center/cover no-repeat;
  filter: grayscale(100%) brightness(0.6);
}

/* Quand débloquée -> colorée */
.hint-card.unlocked .front {
  filter: none;
  cursor: pointer;
}

.hint-card.locked {
  pointer-events: none; /* empêche de cliquer */
  opacity: 0.5;
}

/* Verso de la carte (indice révélé) */
.hint-card .back {
  background: radial-gradient(circle at top left, #1e3c72, #2a5298);               /* fond sombre pour contraster avec le halo */
  border: 4px solid #FFD700;        /* contour doré fin */
  border-radius: 12px;
  color: #fff;
  font-size: 0.6rem;
  text-align: center;
  padding: 10px;
  transform: rotateY(180deg);

  /* Positionnement */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Halo lumineux autour du texte */
  text-shadow:
    0 0 6px rgba(255, 255, 150, 0.9),
    0 0 12px rgba(255, 220, 100, 0.7),
    0 0 20px rgba(255, 200, 50, 0.6);
  
  /* Animation subtile du halo */
  animation: haloPulse 2s infinite alternate ease-in-out;
}

@keyframes haloPulse {
  from {
    text-shadow:
      0 0 4px rgba(255, 255, 180, 0.6),
      0 0 10px rgba(255, 200, 80, 0.5),
      0 0 15px rgba(255, 180, 40, 0.4);
  }
  to {
    text-shadow:
      0 0 8px rgba(255, 255, 220, 1),
      0 0 16px rgba(255, 220, 100, 0.9),
      0 0 28px rgba(255, 200, 60, 0.8);
  }
}


/* Flip */
.hint-card.flipped .front {
  transform: rotateY(180deg);
}
.hint-card.flipped .back {
  transform: rotateY(0deg);
  padding: 0px;
}

#ombre .hint-card {
  transform-style: preserve-3d;
}

#cri .hint-card {
  transform-style: preserve-3d;
}
#text .hint-card {
  transform-style: preserve-3d;
}

/* Centre le texte H+V uniquement quand la carte est retournée */
#ombre .hint-card.flipped .back {
  display: flex;
  align-items: center;      /* centrage vertical */
  justify-content: center;  /* centrage horizontal */
  text-align: center;
  line-height: 1.25;
  word-break: break-word;   /* au cas où le texte est long */
}

#cri .hint-card.flipped .back {
  display: flex;
  align-items: center;      /* centrage vertical */
  justify-content: center;  /* centrage horizontal */
  text-align: center;
  line-height: 1.25;
  word-break: break-word;   /* au cas où le texte est long */
}

#text .hint-card.flipped .back {
  display: flex;
  align-items: center;      /* centrage vertical */
  justify-content: center;  /* centrage horizontal */
  text-align: center;
  line-height: 1.25;
  word-break: break-word;   /* au cas où le texte est long */
}

#maps .hint-card.flipped .back {
  display: flex;
  align-items: center;      /* centrage vertical */
  justify-content: center;  /* centrage horizontal */
  text-align: center;
  line-height: 1.25;
  word-break: break-word;   /* au cas où le texte est long */
}

/* ==============================
   Inputs
============================== */
.card input {
  width: 80%;
  padding: 0.6rem;
  margin: 0.5rem auto 1rem auto;
  border: 2px solid #2c2c2c;
  border-radius: 8px;
  font-family: system-ui;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card input:focus {
  border-color: #3b4cca;
  box-shadow: 0 0 6px rgba(59,76,202,0.5);
  outline: none;
}

/* ==============================
   Boutons
============================== */
/* Boutons avec taille fixe */
.btn-group button {
  width: 140px;      /* largeur fixe */
  height: 60px;     /* hauteur fixe */
  font-size: 8px;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;   /* taille emoji ou symbole */
  border: 3px solid black;
  border-radius: 8px; /* carré rétro, ou mets 50% pour rond */
  background: #CC0000; 
  color: white;
  cursor: pointer;

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

/* Effet hover */
.btn-group button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0px black;
  background: #525252;
}

/* Effet pressé */
.btn-group button:active {
  transform: translateY(2px);
  box-shadow: none;
}
/* ==============================
   TEST
============================== */

.status-bar {
  display: inline-flex;
  justify-content: flex-start; /* place les éléments l’un à côté de l’autre */
  align-items: center;
  gap: 10px; /* espace horizontal entre compteur et score */
  margin-bottom: 0.5rem;
}

.compteur, .score {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 6px;
  color: #fff;
  background: #2c2c2c;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.3);
}



.autocomplete {
  position: relative;
  width: 100%;
  overflow: visible; /* important */
}


.autocomplete-item.highlight {
  background: #CC0000;
  color: white;
}

.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #333;
  border-radius: 6px;
  max-height: 150px;
  overflow-y: auto;

  /* toujours au-dessus */
  z-index: 9999;

  display: none; /* caché par défaut */
}


.autocomplete-item {
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
}

.autocomplete-item img {
  width: 48px;   /* taille plus grande */
  height: 48px;
  margin-right: 10px;
  object-fit: contain; /* garde les proportions correctes */
}


.autocomplete-item:hover {
  background: #f0f0f0;
}

/* ==============================
   PokeMaps
============================== */

/* Boutons version */
.version-chooser {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  gap: 10px;
  justify-content: center;
  margin: .5rem 0 .75rem;
}

.version-btn {
  width: 80px; height: 80px;
  padding: 0; border: 3px solid #333; border-radius: 12px;
  background: #111; cursor: pointer; overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.version-btn img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.version-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,.3); }
.version-btn.selected { border-color: #e0b100; box-shadow: 0 0 0 3px rgba(224,177,0,.25) inset; }

.map-container {
  width: 260px; height: 180px; margin: .5rem auto .8rem;
  overflow: hidden; border: 4px solid #333; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  display: flex; justify-content: center; align-items: center;
  background: #0b1d2a;
}
#maps-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Indice 3 : grille de mini-cartes "ombre" */
.hint-card .back .silhouette-grid {
  display: grid;
  grid-template-columns: repeat(4, 38px);
  max-height: 160px;
  overflow: auto;
  padding: 2px;
}
.silhouette-tile {
  width: 38px; height: 38px; border-radius: 6px;
  display: flex; 
  justify-content: center; 
  align-items: center;
}
.silhouette-tile img {
  width: 90%; height: 90%; object-fit: contain;
  filter: brightness(0) contrast(220%); /* même silhouette que PokéOmbre */
}

/* (Optionnel) petit titre dans l'indice back */
.hint-card .back h4 {
  font-size: .75rem; margin: 0 0 6px 0; text-align: center; font-weight: 700;
}

/* ==============================
   Menu compte (MasterBall)
============================== */
.account-item {
  position: relative;
}

.account-menu {
  position: absolute;
  right: 0;
  background: white;
  border: 2px solid black;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.account-menu.hidden {
  display: none;
}

.account-menu li,
.account-menu button {
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;
  cursor: pointer;
  padding: 6px 12px;
  border: none;
  background: none;
  text-align: left;
}

.account-menu li:hover,
.account-menu button:hover {
  background: #eee;
}
/* Boutons Déconnexion & Classement */
.account-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  width: 100%;
}

.account-actions button {
  text-align: center;
  width: 100%;
}

/* Inventaire en deux colonnes */
.account-inventory {
  display: grid;
  grid-template-columns: repeat(4, auto); /* largeur auto adaptée au contenu */
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 auto;       /* 👉 centre horizontalement */
  align-items: center;
}

.account-inventory li {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9rem;
  gap: 4px;
}


.account-inventory img.ball-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 5px;
}


/* ==============================
   Pokédex
============================== */
.pokedex-counter {
  font-size: 18px;
  margin: 10px 0;
  text-align: center;
  color: #444;
}

.pokedex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 12px;
  padding: 15px;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
}

.pokedex-grid img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: brightness(0.2) grayscale(100%);
  transition: transform 0.2s, filter 0.3s;
  cursor: pointer;
}

.pokedex-grid img.captured {
  filter: brightness(1) grayscale(0%);
}

.pokedex-grid img:hover {
  transform: scale(1.2);
}

#pokedex-modal .modal-content {
  width: 80%;
  max-width: 900px;
  max-height: 80vh;              /* limite la hauteur */
  overflow-y: auto;              /* scroll interne si trop long */
  background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
  border: 3px solid #CC0000;
  border-radius: 15px;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.4);
  position: relative;
  padding: 20px;
  overflow: hidden;
}

#pokedex-modal .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  transition: color 0.2s;
}

#pokedex-modal .close:hover {
  color: #CC0000;
}

#pokedex-modal h2 {
  text-align: center;
  font-family: 'Press Start 2P', sans-serif;
  margin-bottom: 15px;
  color: #CC0000;
}

/* ==============================
   Onglets Pokédex / ShinyDex
============================== */
#pokedex-tabs {
  display: flex;
  justify-content: center;
  margin: 10px 0 15px;
}

#pokedex-tabs .tab-btn {
  padding: 8px 15px;
  color: black;
  border: none;
  cursor: pointer;
  background: #eee;
  margin: 0 5px;
  border-radius: 5px;
  transition: background 0.3s, transform 0.2s;
}

#pokedex-tabs .tab-btn:hover {
  background: #ddd;
  transform: scale(1.05);
}

#pokedex-tabs .tab-btn.active {
  background: #CC0000;   /* couleur assortie à ton thème */
  color: white;
  box-shadow: 0 0 10px #CC0000;
}

.pokedex-grid.hidden {
  display: none;
}

/* Effet spécial pour les shiny */
#capture-result {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

ul, li {
  list-style: none;   /* enlève puces ou numéros */
  padding-left: 0;    /* optionnel : retire l’espace à gauche */
  margin: 0;          /* optionnel : retire la marge */
}

/* Container */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

/* Barre arrière */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

/* Rond qui glisse */
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Quand activé (dark mode ON) */
input:checked + .slider {
  background-color: #4caf50; /* vert par défaut */
}

input:checked + .slider:before {
  transform: translateX(24px);
}

/* Option : icône lune/soleil */
.slider::after {
  content: "☀️";
  position: absolute;
  right: 6px;
  top: 3px;
  font-size: 14px;
  transition: opacity 0.3s;
}

input:checked + .slider::after {
  content: "🌙";
  left: 6px;
  right: auto;
}


/* Animation ouverture menu */
@keyframes menuOpen {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Quand le menu est visible */
.account-menu {
  animation: menuOpen 0.25s ease-out;
  transform-origin: top right; /* ça part depuis la MasterBall */
}

/* Animation pulsation MasterBall */
@keyframes masterPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 5px 2px rgba(161, 66, 244, 0.5);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 15px 6px rgba(161, 66, 244, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 5px 2px rgba(161, 66, 244, 0.5);
  }
}

/* Appliquer l'animation au survol */
.account-item:hover .masterball-btn {
  cursor: pointer;
  animation: masterPulse 1.2s infinite ease-in-out;
}

/* Onglets Pokédex */
.pokedex-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  gap: 5px;
}

.pokedex-tabs button {
  padding: 6px 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  border: 2px solid black;
  cursor: pointer;
  background: #eee;
  border-radius: 6px;
}

.pokedex-tabs button.active {
  background: #CC0000;
  color: white;
}

.pokedex-tab {
  display: none;
}
.pokedex-tab.active {
  display: grid;
}

/* === Overlay === */

/* === Boîte style glassmorphism === */
.modal-box {
  background: rgba(0, 0, 0, 0.164);
  backdrop-filter: blur(12px);
  border: 2px solid rgba(143, 143, 143, 0.61);
  border-radius: 18px;
  padding: 2rem 1.5rem;
  width: 360px;
  max-width: 90%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  animation: fadePop 0.3s ease;
}

@keyframes fadePop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* === Bouton fermer === */
/* === Bouton fermer === */
.modal-close {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.modal-close:hover {
  background: rgba(255,255,255,0.3);
  color: #ffcc00;
}


/* === Tabs === */
.modal-tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.3);
}
.tab-btn {
  font-family: 'Press Start 2P', monospace;
  flex: 1;
  padding: 0.8rem;
  font-size: 0.65rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #fff;
}
.tab-btn.active {
  background: rgba(255,255,255,0.2);
}

/* === Formulaires === */
.modal-form {
  display: none;
  flex-direction: column;
  gap: 1rem;
}
.modal-form.active { display: flex; }

/* === Inputs glow === */
.modal-form input {
  padding: 0.9rem;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  font-size: 0.75rem;
  background: rgba(255,255,255,0.15);
  color: #fff;
  transition: border 0.25s, box-shadow 0.25s;
}
.modal-form input::placeholder {
  color: rgba(255,255,255,0.6);
}
.modal-form input:focus {
  border-color: #ffcc00;
  box-shadow: 0 0 10px rgba(255,204,0,0.6);
  outline: none;
}

/* === Boutons dégradés Pokémon === */
.modal-btn {
  padding: 1rem;
  font-family: 'Press Start 2P', monospace;
  border: none;
  border-radius: 12px;
  font-size: 0.75rem;
  background: rgba(255,255,255,0.5);
  color: #000; /* noir pour contraster avec le blanc */
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
}

/* Glow jaune au hover */
.modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 12px 4px rgba(255, 221, 0, 0.8);
}

/* Effet pressé */
.modal-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 6px 2px rgba(255, 221, 0, 0.6);
}


/* === Feedback === */
.modal-feedback {
  font-size: 0.65rem;
  text-align: center;
  color: #ffcc00;
}

.inventory-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
}

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

body.dark-mode .inventory-item {
  display: flex;
  color: black;
  align-items: center;
  gap: 6px;
}

.inventory-item img {
  width: 30px;
  height: 30px;
}

.ball-icon {
  width: 50px;
  height: 50px;
  vertical-align: middle;
}

/* Pokémon déjà capturé → effet grisé */
/* Conteneur pour image + badge */
#victory-img-container {
  position: relative;
  display: inline-block;
}

.hidden {
  display: none;
}

/* Conteneur modal */
#shop-modal .modal-content {
  position: relative;
  max-width: 840px;   /* limite en desktop */
  width: 90%;
  max-height: 80vh;   /* pas plus de 80% de la hauteur écran */
  margin: auto;
  padding: 20px;
  background: white;
  border-radius: 12px;
  overflow-y: auto;   /* si trop de contenu → scroll interne */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Titre */
#shop-modal h2 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
  color: #d33;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
}
#shop-modal .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Items */
.shop-item {
  align-items: center;
  justify-content: space-between;
  background: #f8f8f8;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 10px;
  transition: transform 0.1s ease;
  margin: 10px 0;
}

.shop-item:hover {
  transform: scale(1.02);
  background: #fffbe8;
}


/* ==============================
   Modal Capture
============================== */

#capture-live-modal {
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.85);
  position: fixed;
  inset: 0;
  z-index: 9999;
}

#capture-live-modal.active {
  display: flex;
}

.capture-live-content {
  text-align: center;
  color: white;
}

#capture-live-ball {
  width: 180px;
  height: 180px;
  margin: 20px auto;
  animation: shakeBall 5s infinite;
}
#capture-live-ball::after {
      content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 30% 30%, #fff, #ccc);
    border: 8px solid black;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

#capture-live-status {
  font-size: 1.2rem;
  margin-top: 10px;
}

.capture-success {
  color: limegreen;
  animation: glowGreen 1s alternate infinite;
}

.capture-fail {
  color: #CC0000;
  animation: glowRed 1s alternate infinite;
}

/* Animation "ball qui tremble" */
@keyframes shakeBall {
  0%   { transform: rotate(0deg) scale(1); }
  15%  { transform: rotate(15deg) scale(1.05); }
  30%  { transform: rotate(-15deg) scale(1.05); }
  45%  { transform: rotate(10deg) scale(1.05); }
  60%  { transform: rotate(-10deg) scale(1.05); }
  75%  { transform: rotate(5deg) scale(1.02); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Glow neutre (pendant la tentative) */
#capture-live-ball {
  animation: shakeBall 0.5s infinite;
  box-shadow: 0 0 8px 3px rgb(255, 255, 255);
  transition: box-shadow 0.3s;
}

/* Succès → glow vert */
#capture-live-ball.capture-success {
  animation: none;
  box-shadow: 0 0 15px 7px limegreen, 0 0 40px 12px limegreen;
}

/* Échec → glow rouge */
#capture-live-ball.capture-fail {
  animation: none;
  box-shadow: 0 0 15px 7px red, 0 0 40px 12px red;
}

/* Effets lumineux */
@keyframes glowGreen {
  from { text-shadow: 0 0 5px #0f0, 0 0 10px #0f0; }
  to { text-shadow: 0 0 15px #0f0, 0 0 30px #0f0; }
}

@keyframes glowRed {
  from { text-shadow: 0 0 5px #f00, 0 0 10px #f00; }
  to { text-shadow: 0 0 15px #f00, 0 0 30px #f00; }
}


#capture-alert {
  font-size: 28px;
  font-weight: bold;
  color: #ffcc00;
  text-shadow: 0 0 10px #ff9900, 0 0 20px #ff6600, 0 0 30px #ff3300;
  text-align: center;
  margin: 15px 0;
  animation: bounce 0.8s infinite;
}

@keyframes bounce {
  0%, 100% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.3) translateY(-10px); }
  50% { transform: scale(1.1) translateY(0); }
  70% { transform: scale(1.3) translateY(-6px); }
}

.ball-btn {
  position: relative;
  width: 80px;
  height: 80px;
  border: 3px solid black;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.ball-btn:hover:not(:disabled) {
  transform: scale(1.08);
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

.ball-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bande noire */
.ball-btn::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 0;
  width: 100%;
  height: 6%;
  background: black;
  z-index: 2;
}

/* Bouton central */
.ball-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 21px;
  height: 21px;
  background: radial-gradient(circle at 30% 30%, #fff, #ccc);
  border: 3px solid black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.ball-btn-live::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 21px;
  height: 21px;
  background: radial-gradient(circle at 30% 30%, #fff, #ccc);
  border: 3px solid black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* Texte au centre */
.chance-text {
  position: absolute;
  top: 80%;
  left: 52%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: black;
  z-index: 4;
  text-shadow: 0 0 5px white, 1px 1px 3px rgba(0,0,0,0.6);
}

/* Dégradés lissés */
.pokeball {
  background: linear-gradient(to bottom, #ff4c4c 0%, #c00000 45%, #ffffff 55%, #f5f5f5 100%);
}

.superball {
  background: linear-gradient(to bottom, #4c6cff 0%, #0022aa 45%, #ffffff 55%, #f5f5f5 100%);
}

.hyperball {
  background: linear-gradient(to bottom, #ffd84c 0%, #c7a200 45%, #ffffff 55%, #f5f5f5 100%);
}

.masterball {
  background: linear-gradient(to bottom, #b84cff 0%, #6a0099 45%, #ffffff 55%, #f5f5f5 100%);
}

button.cooldown {
  opacity: 0.6;
  cursor: not-allowed;
}


/* Bouton flottant */
/* Effet Pokéball qui tremble */
@keyframes poke-vibrate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-10deg) scale(1.05); }
  40% { transform: rotate(10deg) scale(1.05); }
  60% { transform: rotate(-6deg) scale(1.05); }
  80% { transform: rotate(6deg) scale(1.05); }
}

/* Classe appliquée quand un nouveau message arrive */
#chat-toggle.unread {
  animation: poke-vibrate 0.6s infinite ease-in-out;
  box-shadow: 0 0 10px #ff0000, 0 0 20px #ff4444, 0 0 30px #ff7777;
}


#chat-toggle {
  position: fixed;
  bottom: 5%;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #000;
  background: linear-gradient(to bottom, #CC0000 50%, #ffffff 50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #000;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 9999;
  overflow: hidden;
}

/* Ligne noire centrale de la Pokéball */
#chat-toggle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 6px;
  background: #000;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}

/* Bouton central (le cercle blanc avec contour noir) */
#chat-toggle::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Effet hover */
#chat-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}


/* Fenêtre du chat */
#chat-window {
  position: fixed;
  bottom: 70px;
  right: 20px;
  width: 320px;
  height: 400px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 10000;
}

#chat-window.hidden {
  display: none;
}

/* Header */
#chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #CC0000;
  color: white;
  padding: 6px 10px;
  border-radius: 8px 8px 0 0;
}

#chat-header button {
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* Messages */
#messages {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  font-size: 14px;
}

#messages li {
  margin-bottom: 6px;
  font-size: 10px
}

/* Zone d’input */
#chat-input {
  display: flex;
  border-top: 1px solid #ccc;
}

#chat-input input {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 14px;
}

#chat-input input:focus {
  outline: none;
}

#chat-input button {
  border: none;
  background: #CC0000;
  color: white;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 97px
}



/* ==============================
   PokeCasino
============================== */

/* === Slots Plinko === */
#plinko-wrapper {
  width: 100%;          /* occupe toute la largeur dispo */
  max-width: 100%; 
  overflow-x: hidden;   /* évite le scroll horizontal */
  display: flex;
  justify-content: center;
}

#plinko-board canvas {
  width: 100% !important;   /* le canvas se scale automatiquement */
  height: auto !important;  /* conserve le ratio */
  display: block;
  margin: 0 auto;
}

#plinko-slots {
  width: 100% !important; 
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.plinko-slot {
  position: absolute;
  text-align: center;
  transform: translateY(-50%); /* centre verticalement */
  font-size: 12px;
  font-weight: bold;
  color: #CC0000;
}

.plinko-slot.highlight{
    animation: bounceHighlight 0.7s cubic-bezier(.28,.84,.42,1),
             shinyGlow 1s ease-out;

}

@keyframes bounceHighlight {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.3); }
  50%  { transform: scale(0.9); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes shinyGlow {
  0% {
    box-shadow: 0 0 0px rgba(255, 215, 0, 0.0);
  }
  25% {
    box-shadow: 0 0 12px 6px rgba(255, 215, 0, 0.6);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 223, 100, 0.9),
                0 0 30px 15px rgba(255, 215, 0, 0.6);
  }
  75% {
    box-shadow: 0 0 12px 6px rgba(255, 215, 0, 0.6);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 215, 0, 0.0);
  }
}

/* =================
General
===================*/

/* Fond global */
main {
  max-width: 100%;        /* largeur lisible */
  margin: 0 auto;          /* centre horizontalement */
  padding: 20px;
  min-height: 100vh;       /* occupe toute la hauteur */
  align-items: center;
}
body {
  font-family: 'Press Start 2P', system-ui;
  background-color: #f4f4f4; /* couleur de fond */
  position: relative; /* nécessaire pour le pseudo-élément */
  z-index: 0;
}
h2 {
 padding-bottom: 5px;
}

/* =================
General
===================*/
* {
  box-sizing: border-box;
}
body {
  font-family: 'Press Start 2P', system-ui;
  background-color: #f4f4f4; /* couleur de fond */
  position: relative; /* nécessaire pour le pseudo-élément */
  z-index: 0;
}
h2 {
 padding-bottom: 5px;
}

/* ✅ Filigrane Pokéball avec opacité contrôlée */
body::before {
  content: "";
  position: fixed; /* couvre tout l’écran même au scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-image: url("https://i.etsystatic.com/21972877/r/il/7d3708/3203082995/il_1080xN.3203082995_m9os.jpg");
  background-repeat: repeat;
  background-position: center;
  background-size: 240px;
  background-attachment: fixed;

  opacity: 0.1;   /* 🔥 règle ici la transparence du filigrane */
  z-index: -1;    /* reste derrière tout le contenu */
}

/* Header */
.site-header {
  width: 100%;
  text-align: center;
}

/* Logo */
.site-logo {
  width: 100%;
  cursor: pointer;
  max-width: 450px;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}

/* ==============================
   MENU FLOTTANT GAUCHE
============================== */
/* Menu flottant gauche */
.side-menu {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 10;
}
.side-menu nav .nav-center {
  display: flex;
  flex-direction: column; /* car tes items sont en colonne */
  gap: 12px;              /* espace entre chaque section */
  padding: 10px 0;        /* espace haut/bas global */
}
.side-menu.right nav {
  display: flex;
  flex-direction: column;
  gap: 12px;       /* espace vertical entre chaque bloc */
  padding: 10px 0; /* espace haut/bas global */
}

.side-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.side-menu li {
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Label sous chaque Pokéball */
/* Pokéball */
.pokeball-btn {
  position: relative;
  width: 80px;
  height: 80px;
  border: 3px solid black;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 1 4px 0px black;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Texte centré dans la Pokéball */
.pokeball-btn .nav-label {
    position: relative;
    z-index: 3;
    font-size: 0.45rem;
    text-align: center;
    color: #ffffff;
    background: #00000099;
    line-height: 1.2;
    padding: 2px;
    border-radius: 5px;
}

/* Fond Pokéball */
.pokeball-top,
.pokeball-bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
}

.pokeball-top {
  top: 0;
  background: #CC0000;
  border-bottom: 3px solid black;
}

.pokeball-bottom {
  bottom: 0;
  background: white;
  border-top: 3px solid black;
}

.pokeball-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background: white;
  border: 3px solid black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.nav-item:hover .pokeball-btn {
  box-shadow: 0 0 15px 5px rgb(255, 187, 41);
}
.nav-item.active .pokeball-btn {
  box-shadow: 0 0 15px 5px rgb(255, 187, 41);
  border-radius: 50%;
  animation: glowPulse 1.5s infinite alternate;
  transform-origin: center center;
}

@keyframes glowPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 5px 2px rgb(255, 187, 41);
    transform: rotate(0deg);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 15px 6px rgb(255, 187, 41);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 5px 2px rgb(255, 187, 41);
  }
    0%   { transform: rotate(0deg); }
  20%  { transform: rotate(15deg); }
  40%  { transform: rotate(0deg); }
  50%  { transform: rotate(0deg); } /* petit arrêt */
  70%  { transform: rotate(15deg); }
  90%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ==============================
   Menu flottant joueur (droite)
============================== */
.side-menu.right {
  z-index: 2100;
  right: 20px;
  left: auto;
}

/* Icônes du shop/pokedex */
.nav-icon-btn {
  width: 80px;
  height: 80px;
  border: 3px solid black;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: white;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nav-icon-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px 5px rgb(255, 187, 41);
}

/* Masterball spéciale */
.masterball-btn .pokeball-top {
  background: purple;
}

.masterball-btn .pokeball-bottom {
  background: white;
}

.masterball-btn .pokeball-center {
  background: white;
  border: 3px solid black;
}

/* Labels sous les icônes */
.side-menu.right .nav-label {
    font-size: 0.45rem;
    text-align: center;
    display: block;
    color: #ffffff;
}

/* Bouton thème = pokéball */
.theme-toggle .pokeball-btn {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.theme-toggle .pokeball-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.8);
}

/* Soleil / Lune au centre */
.theme-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.4s ease;
}

/* Soleil */
.theme-icon.sun {
  background: radial-gradient(circle, yellow 60%, orange 100%);
  box-shadow: 0 0 8px yellow;
}

/* Lune */
.theme-icon.moon {
  background: radial-gradient(circle at 30% 30%, white 60%, gray 100%);
  box-shadow: 0 0 8px rgba(255, 200, 0, 0.8);
}

/* Mode nuit */
body.dark-theme {
  color: white;
}
/* Animation de rotation */
@keyframes rotateBall {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1); }
}
.pokeball-btn.rotating {
  animation: rotateBall 0.5s linear forwards;
}

/* ==============================
   Mode sombre
============================== */
body.dark-mode {
  background-color: #1a1a40;
  color: #f4f4f4;
}

/* Main centré reste pareil, mais on peut ajuster les cards */
body.dark-mode .card {
  background: #1e1e2f;
  color: #f5f5f5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}


body.dark-mode::before {
  background-image: url("https://i.etsystatic.com/21972877/r/il/7d3708/3203082995/il_1080xN.3203082995_m9os.jpg");
  opacity: 0.05; /* moins visible */
}

/* Inputs */
body.dark-mode input,
body.dark-mode .card input {
  background: #1e1e2f;
  color: white;
}

body.dark-mode input:focus,
body.dark-mode .card input:focus {
  border-color: #ffcc00;
  box-shadow: 0 0 6px rgba(255,204,0,0.5);
}

/* Historique */
body.dark-mode .history-card {
  background: #1e1e2f;
  color: #ddd;
}

body.dark-mode .history-card h4 {
  color: #eee;
}

/* Boutons */
body.dark-mode #theme-toggle .pokeball-top {
  background: linear-gradient(to bottom, #1a1a40, #0d0d1a); /* effet nuit */
}

body.dark-mode .autocomplete-list {
  background: #111;   /* fond bien noir */
  border: 2px solid #444;
}

body.dark-mode .autocomplete-item {
  color: #f4f4f4;
}

body.dark-mode .autocomplete-item:hover {
  background: #222;   /* gris foncé au survol */
}

/* Pastille en dark mode */
body.dark-mode .pastille {
  background: #f4f4f4; /* fond clair */
  color: #000;         /* texte noir */
}

body.dark-mode li {
  color: #000;         /* texte noir */
}

body.dark-mode .shop-item{
  color:black
}

body.dark-mode #pokeclick-balance,
body.dark-mode #farm-progress-text,
body.dark-mode #farm-progress-bar
{
  color: rgb(255, 255, 255);
}


@keyframes masterGlowRotate {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px 2px rgb(253, 250, 255);
  }
  50% {
    transform: rotate(15deg);
    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.9);
  }
  100% {
    transform: rotate(0deg);
    box-shadow: 0 0 5px 2px rgb(255, 255, 255);
  }
}

/* ==============================
   Pokeshop
============================== */
/* Conteneur du shop */
.shop h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.2rem;
  margin-bottom: 20px;
  text-align: center;
  color: #CC0000;
}

.shop-balance {
  font-size: 0.9rem;
  color: rgb(255,187,41);
  margin-left: 10px;
}

/* Feedback */
#shop-feedback {
  margin: 10px 0;
  font-size: 12px;
  color: green;
  text-align: center;
}

/* Grille des items */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

/* Carte d’item */
.shop-item {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

.shop-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.shop-item span {
  display: block;
  margin-bottom: 10px;
  font-size: 0.85rem;
  word-wrap: break-word;      /* coupe les mots trop longs */
  overflow-wrap: break-word;  /* support moderne */
  white-space: normal;        /* autorise le retour à la ligne */
  text-align: center;
}

.buy-btn {
  background-color: #28a745; /* vert */
  color: white;
  border: none;
  padding: 5px 10px;
  margin: 2px;
  cursor: pointer;
  border-radius: 5px;
}

.sell-btn {
  background-color: #dc3545; /* rouge */
  color: white;
  border: none;
  padding: 5px 10px;
  margin: 2px;
  cursor: pointer;
  border-radius: 5px;
}

.buy-btn:hover {
  background-color: #218838;
}

.sell-btn:hover {
  background-color: #c82333;
}

.shop-item span {
  display: block;
  text-align: center;
  margin-top: 5px;
}

.shop-item small {
  font-size: 12px;
  color: #888;
}



/* ==============================
   RESPONSIVE DESIGN
============================== */

/* ==============================
   MENU RESPONSIVE PATCH (ASIDE)
============================== */


/* Bouton burger Pokéball */
.menu-btn {
  display: none;
  width: 40px;
  height: 30px;
  position: fixed;
  top: 15px;
  left: 15px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 3001;
  padding: 0;
}

/* Barres du burger */
.menu-btn span,
.menu-btn::before,
.menu-btn::after {
  content: "";
  display: block;
  height: 10px;
  width: 100%;
  margin: 5px 0;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Barre du haut : rouge -> noir */
.menu-btn span {
  background: black;
}

/* Barre du milieu : noir plein */
.menu-btn::before {
  background: #CC0000;
}

/* Barre du bas : noir -> blanc */
.menu-btn::after {
  background: white;
}

/* Effet hover */
.menu-btn:hover span,
.menu-btn:hover::before,
.menu-btn:hover::after {
  transform: scale(1.05);
  box-shadow: 0 0 6px rgb(255,187,41);
}

/* ==============================
   Easter Egg
============================== */
/* ========================= */
/* BULLES (Easter Eggs)      */
/* ========================= */
.easter-egg {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  overflow: hidden;

  /* Flottement + pulsation */
  animation: drift linear infinite;
  animation-duration: var(--drift-duration, 4s), var(--pulse-duration, 4s);
  animation-delay: var(--drift-delay, 0s), var(--pulse-delay, 0s);
}

.easter-egg img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  pointer-events: none;
}

/* Raretés avec fond semi-transparent teinté */
.rarity-pokedollars {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
  border: 2px solid rgba(255,255,255,0.6);
}

.rarity-resettimer {
  background: radial-gradient(circle at 30% 30%, rgba(0,150,255,0.4), rgba(0,150,255,0.1));
  border: 2px solid rgba(0,150,255,0.8);
  box-shadow: 0 0 12px rgba(0,150,255,0.7);
}

.rarity-superball {
  background: radial-gradient(circle at 30% 30%, rgba(255,215,0,0.4), rgba(255,215,0,0.1));
  border: 2px solid gold;
  box-shadow: 0 0 15px rgba(255,215,0,0.8);
}

.rarity-hyperball {
  background: radial-gradient(circle at 30% 30%, #CC0000, #cc000038);
  border: 2px solid #CC0000;
  box-shadow: 0 0 15px #CC0000;
}

.rarity-masterball {
  background: radial-gradient(circle at 30% 30%, rgba(200,0,255,0.5), rgba(200,0,255,0.1));
  border: 2px solid violet;
  box-shadow: 0 0 20px rgba(200,0,255,0.9);
  animation: drift 6s ease-in-out infinite, sparkle 1.5s infinite alternate;
}

/* Flottement */
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-12px, -8px) rotate(-3deg); }
  50%  { transform: translate(10px, -14px) rotate(3deg); }
  75%  { transform: translate(14px, 8px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Zoom/dézoom fluide */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Scintillement Masterball */
@keyframes sparkle {
  from { filter: drop-shadow(0 0 8px violet); }
  to   { filter: drop-shadow(0 0 20px white); }
}

/* ========================= */
/* MODAL Succès (Achievements) */
/* ========================= */

/* Fond noir transparent */
#achievements-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 4000;
}

/* Visible */
#achievements-modal:not(.hidden) {
  display: flex;
}

/* Boîte centrale */
#achievements-modal .modal-content {
  background: #fff;
  color: #000;
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 800px;   /* + large sur PC */
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  font-family: 'Press Start 2P', monospace;
}

/* Liste */
.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

/* Carte de succès en 3 colonnes */
.achievement {
  display: grid;
  grid-template-columns: 1fr 2fr auto; /* Nom / Description / Bouton */
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
  font-size: 0.65rem;
  line-height: 1.4;
}

/* États */
.achievement.unlocked {
  border-color: gold;
  background: #fffbe6;
}
.achievement.claimed {
  opacity: 0.6;
}

/* Nom du succès */
.achievement-title {
  font-weight: bold;
  text-align: left;
  word-wrap: break-word;
}

/* Description */
.achievement-desc {
  margin: 0;
  text-align: left;
  font-size: 0.55rem;
}

/* Bouton */
.achievement button {
  font-size: 0.65rem;
  padding: 6px 12px;
  white-space: nowrap;
  cursor: pointer;
  background: #4CAF50;
  border: none;
  border-radius: 5px;
  color: #fff;
  transition: background 0.2s;
}
.achievement button:hover:not(:disabled) {
  background: #45a049;
}
.achievement button:disabled {
  background: #aaa;
  cursor: not-allowed;
}

/* ========================= */
/* MODAL (potion)        */
/* ========================= */
/* Potion modal - caché par défaut */
#potion-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 4000;
}

/* Quand la classe hidden est retirée → affichage */
#potion-modal:not(.hidden) {
  display: flex;
}

/* Contenu interne */
#potion-modal .modal-content {
  background: white;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
/* Container des boutons */
#potion-modal .potion-games {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

/* Bouton potion stylisé */
#potion-modal .potion-games button {
  font-family: 'Press Start 2P', monospace;
  padding: 14px;
  border: 3px solid black;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(145deg, #ff4c4c, #cc0000);
  color: white;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 0px #222, inset 0 -3px 6px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

/* Glow subtil */
#potion-modal .potion-games button::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.3), transparent 60%);
  pointer-events: none;
}

/* Hover */
#potion-modal .potion-games button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0px #000, 0 0 12px rgba(255, 76, 76, 0.7);
}

/* Pressé */
#potion-modal .potion-games button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0px #000 inset;
}

/* Version spéciale si disabled (partie finie) */
#potion-modal .potion-games button:disabled {
  background: linear-gradient(145deg, #aaa, #888);
  color: #444;
  cursor: not-allowed;
  box-shadow: none;
}


/* ========================= */
/* MODAL (récompense)        */
/* ========================= */
.reward-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  animation: fadeIn 0.3s ease;
}

.reward-modal {
  background: white;
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  animation: scaleIn 0.3s ease;
  max-width: 320px;
  width: 90%;
}

.reward-modal h2 {
  margin-bottom: 10px;
  font-size: 20px;
  color: #333;
}

.reward-modal p {
  font-size: 16px;
  margin-bottom: 15px;
  color: #555;
}

.reward-modal button {
  margin-top: 5px;
  padding: 10px 18px;
  border: none;
  background: #4CAF50;
  color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.reward-modal button:hover {
  background: #43a047;
}

/* Animations modal */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.mobile-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.feedback-toast {
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 10px 15px;
  border-radius: 10px;
  animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(20px); }
}
/* ==============================
   MODAL SUPPORT
============================== */
#support-modal {
  display: none; /* masqué par défaut */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 5000;
  font-family: 'Press Start 2P', monospace;
}

#support-modal:not(.hidden) {
  display: flex;
}

/* Boîte */
#support-modal .modal-content {
  background: #fff;
  padding: 20px 25px;
  border-radius: 14px;
  width: 95%;
  max-width: 420px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  position: relative;
  animation: popIn 0.3s ease;
}

/* Titre */
#support-modal h2 {
  font-size: 1.2rem;
  color: #CC0000;
  margin-bottom: 15px;
  text-align: center;
  text-shadow: 1px 1px 0px #000;
}

/* Labels */
#support-modal label {
  display: block;
  margin: 8px 0 4px;
  font-size: 0.7rem;
  color: #444;
}

/* Inputs / textarea */
#support-modal input,
#support-modal textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #222;
  border-radius: 8px;
  font-size: 0.75rem;
  font-family: 'Press Start 2P', monospace;
  margin-bottom: 10px;
  background: #1e1e2f;
  color: #fff;
}

#support-modal input:focus,
#support-modal textarea:focus {
  border-color: #ffcc00;
  outline: none;
  box-shadow: 0 0 8px rgba(255,204,0,0.7);
}

/* Bouton envoyer */
#support-modal button[type="submit"] {
  display: block;
  width: 100%;
  padding: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(145deg, #CC0000, #a00000);
  color: white;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

#support-modal button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0px black;
}

#support-modal button[type="submit"]:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* Bouton fermer */
#support-modal .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  color: #888;
  cursor: pointer;
  transition: color 0.2s;
}
#support-modal .close:hover {
  color: #CC0000;
}

/* Feedback */
#support-feedback {
  margin-top: 8px;
  font-size: 0.7rem;
  text-align: center;
}

/* Animation */
@keyframes popIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.inventory-title {
  font-size: 14px;
  text-align: center;
  margin: 10px 0 5px;
  color: var(--text-color, #000000);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Container */
.passives-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 8px;
}

/* Élément passif */
.passive-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 12px;
  padding: 8px 5px;
  text-align: center;
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
}

.passive-item:hover {
  transform: scale(1.05);
}

.passive-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 4px;
  transition: filter 0.3s ease;
}

.passive-label {
  font-size: 11px;
  color: #fff;
  user-select: none;
}



/* 🔴 Objet obtenu mais inactif */
.passive-unlocked {
  background: rgba(100, 20, 20, 0.4);
  border: 1px solid rgba(255, 0, 0, 0.4);
  filter: hue-rotate(0deg) saturate(1.2);
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
}

/* 🟢 Objet actif */
.passive-active {
  background: rgba(0, 100, 50, 0.5);
  border: 1px solid rgba(0, 255, 100, 0.6);
  filter: hue-rotate(90deg) saturate(1.5);
  box-shadow: 0 0 10px rgba(0, 255, 100, 0.7);
  transform: scale(1.08);
}
.reward-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-left: 5px;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.4));
}
.passive-item {
  position: relative;
}

/* 🔒 Objet non obtenu */
.passive-locked {
  background: rgba(60, 60, 60, 0.4);
  border: 1px solid rgba(100, 100, 100, 0.4);
  filter: grayscale(100%) brightness(0.5);
  cursor: not-allowed;
  opacity: 1;
}
/* Tooltip */
.passive-item::after {
  content: attr(data-description);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: normal; /* autorise le retour à la ligne */
  max-width: 150px; /* évite les débordements sur petits écrans */
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
  word-wrap: break-word;
}

/* Petite flèche */
.passive-item::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Hover (ou tap simulé sur mobile) */
.passive-item:hover::after,
.passive-item:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* ✅ Protection contre le dépassement de l’écran */
@media (max-width: 500px) {
  .passive-item::after {
    left: auto;
    right: 50%;
    transform: translateX(50%);
    max-width: 120px;
  }
}

.item {
  position: relative;
}

/* Tooltip */
.item::after {
  content: attr(data-description);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: normal; /* autorise le retour à la ligne */
  max-width: 150px; /* évite les débordements sur petits écrans */
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
  word-wrap: break-word;
}

/* Petite flèche */
.item::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Hover (ou tap simulé sur mobile) */
.item:hover::after,
.item:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* ✅ Protection contre le dépassement de l’écran */
@media (max-width: 500px) {
  .item::after {
    left: auto;
    right: 50%;
    transform: translateX(50%);
    max-width: 120px;
  }
}



/* ==============================
   Game-atq
============================== */
.move-item{
  color: #CC0000 !important;
}


/* ==============================
   MOBILE
============================== */

@media (max-width: 900px) {
  #achievements-modal .modal-content {
    padding: 15px;
    max-width: 95%;
  }

  .achievement {
    grid-template-columns: 1fr; /* pile verticale */
    text-align: center;
    font-size: 0.6rem;
  }

  .achievement-title {
    font-size: 0.65rem;
    text-align: center;
  }

  .achievement-desc {
    font-size: 0.55rem;
    text-align: center;
  }

  .achievement button {
    margin-top: 6px;
    width: 100%; /* bouton plein écran */
  }
  .site-logo {
    width: 60%;
  }
    .mobile-tools {
    flex-direction: row;
    justify-content: center;
    gap: 15px;
  }

  .mobile-tools .account-item {
    flex: 1;
    text-align: center;
  }
  .menu-btn {
    display: block; /* bouton burger visible */
  }

  /* Cacher les menus latéraux en mobile */
  .side-menu,
  .side-menu.right {
    display: none !important;
  }
  .table-container {
  width: 100%;
  overflow-x: auto; /* utile si tu veux scroll en cas de contenu trop large */
}

.table-container table {
  width: 100%;          /* occupe 100% de la largeur */
  border-collapse: collapse; /* pour éviter les espaces entre cellules */
  table-layout: fixed;  /* optionnel, force un partage égal des colonnes */
  font-size: 8px;
}

.table-container th,
.table-container td {
  padding: 8px;

  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.2); /* ou ce que tu veux pour le style */
}

  /* Overlay visible quand activé */
  .nav-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }
  .card{
    max-width: 100%;
    margin: 0;
  }
  .history-container{
    max-width: 100%;
  }

  .menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }

  .nav-menu {
    gap: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .nav-menu .nav-item {
    font-family: 'Press Start 2P', monospace;
    font-size: 1rem;
    color: white;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
  }

  .nav-menu .nav-item:hover {
    transform: scale(1.1);
    color: #ffcc00;
  }
    #shop-modal .modal-content {
    width: 95%;       /* quasi full largeur */
    max-height: 70vh; /* un peu plus compact */
    padding: 15px;
  }

  .shop-item {
    width: 100%;      /* les items prennent toute la largeur */
    flex: 1 1 100%;
  }
    #pokedex-modal .modal-content {
    width: 95%;       /* quasi full largeur */
    padding: 15px;
  }

  #pokedex-modal h2 {
    font-size: 1rem;  /* texte plus petit */
    margin-bottom: 10px;
  }
    #ranking-modal .modal-content {
    width: 95%;       /* quasi full largeur */
    max-height: 70vh; /* plus compact en hauteur */
    padding: 15px;
  }

  #ranking-modal h2 {
    font-size: 1.2rem;
  }
}

/* ==============================
   DESKTOP
============================== */
@media (min-width: 900px) {
  .menu-btn {
    display: none; /* burger caché */
  }
    .account-menu {
    display: ruby;   /* Affichage ruby (inline-blocks qui se suivent) */
    gap: 10px;       /* espace entre les éléments */
  }

  .nav-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .side-menu,
  .side-menu.right {
    display: flex !important; /* menus latéraux visibles */
  }
}

/* =========================================================
   🏟️ ARÈNES — CSS SCOPÉ (ne touche qu'à #arene-card)
========================================================= */

/* Variables locales au bloc arènes */
#arene-card{
  --pk-w:260px;         /* largeur carte */
  --pk-h:380px;         /* hauteur carte */
  --pk-types-h:86px;    /* hauteur zone types */
  --pk-card1:#151823;
  --pk-card2:#0f111a;
  --pk-text:#f6f7ff;
  --pk-muted:#a9b2c6;
  --pk-border:rgba(255,255,255,.08);
  --pk-r:16px;
  --pk-t:.25s ease;
  --pk-shadow:0 12px 26px rgba(0,0,0,.4);
  --pk-accent:#ffd54a;  /* fallback */
}

/* --- Grille des arènes --- */
#arene-card .arenes-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--pk-w), 1fr));
  gap:28px;
  padding:32px;
  justify-items:center;
  align-items:stretch;
}

/* --- Carte d’arène --- */
#arene-card .arene-card{
  /* chaque carte peut surcharger --pk-accent via data-type */
  --pk-accent: var(--pk-accent);

  width:100%;
  max-width:var(--pk-w);
  height:var(--pk-h);

  background:linear-gradient(180deg,var(--pk-card1),var(--pk-card2));
  color:var(--pk-text);
  border:8px solid var(--pk-border);
  border-radius:var(--pk-r);
  box-shadow:var(--pk-shadow);
  padding:16px 14px 14px;
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;

  transition: transform var(--pk-t), box-shadow var(--pk-t), border-color var(--pk-t);
}
#arene-card .arene-card:hover{
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--pk-accent) 45%, transparent);
  box-shadow: 0 18px 34px rgba(0,0,0,.45),
              0 0 0 1px color-mix(in oklab, var(--pk-accent) 32%, transparent);
}
#arene-card .arene-card::after{
  content:"";
  position:absolute; left:-40%; right:-40%; top:-40%; height:56%;
  background: radial-gradient(120px 60px at 50% 18% ,
              color-mix(in oklab, var(--pk-accent) 26%, transparent), transparent 65%);
  pointer-events:none;
}

/* --- Header --- */
#arene-card .arene-header{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-height:60px;
}
#arene-card .arene-badge-icon{
  width:38px; height:38px; object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
#arene-card .arene-champion-name{
  font-size:.72rem; color:var(--pk-accent);
  text-shadow:0 0 8px color-mix(in oklab, var(--pk-accent) 45%, transparent);
  white-space:nowrap; max-width:85%;
}

/* --- Portrait --- */
#arene-card .arene-champion{
  width:96px; height:96px; border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  outline:6px solid color-mix(in oklab, var(--pk-accent) 8%, transparent);
  background:rgba(255,255,255,.05);
  object-fit:cover; image-rendering:pixelated;
  transition: transform var(--pk-t), outline-color var(--pk-t), box-shadow var(--pk-t);
}
#arene-card .arene-card:hover .arene-champion{
  transform:scale(1.04);
  outline-color: color-mix(in oklab, var(--pk-accent) 14%, transparent);
  box-shadow:0 0 0 6px color-mix(in oklab, var(--pk-accent) 12%, transparent);
}

/* --- Ville --- */
#arene-card h3{
  margin:0;
  font-size:.92rem; font-weight:800; letter-spacing:.4px;
  white-space:nowrap; text-overflow:ellipsis; max-width:90%;
}

/* --- Types (chips) — hauteur FIXE + scroll au hover --- */
#arene-card .arene-type{
  width:100%; max-width:220px; padding:8px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--pk-border);
  border-radius:12px;

  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;

  height: var(--pk-types-h);
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0));
          mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0));
}
#arene-card .arene-card:hover .arene-type{
  overflow:auto;
  -webkit-mask-image: none; mask-image: none;
}
#arene-card .type-chip{
  padding:4px 8px; font-size:.64rem; line-height:1;
  color:var(--pk-muted);
  border-radius:999px;
  white-space:nowrap;
}

/* --- Bouton (en bas) --- */
#arene-card .arene-btn{
  margin-top:auto; /* pousse le bouton en bas de la carte */
  width:86%; height:46px;
  border:none; border-radius:12px;
  font-size:.72rem; font-weight:900; letter-spacing:.3px;
  cursor:pointer;
  color:#1b1302;
  background:linear-gradient(180deg,#ffd54a,#e9a91a);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  box-shadow:0 6px 0 rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.3);
  transition: transform var(--pk-t), box-shadow var(--pk-t), background var(--pk-t), opacity var(--pk-t);
}
#arene-card .arene-card:hover .arene-btn{
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--pk-accent) 86%, #ffd54a),
    color-mix(in oklab, var(--pk-accent) 72%, #e9a91a));
  transform:translateY(-2px);
  box-shadow:0 8px 0 rgba(0,0,0,.25), 0 16px 26px rgba(0,0,0,.35);
}
#arene-card .arene-btn.resume{   background:linear-gradient(180deg,#5aa9ff,#297bd6); color:#fff; }
#arene-card .arene-btn.finished{ background:linear-gradient(180deg,#2ecc71,#1f9d59); color:#fff; }
#arene-card .arene-btn.cooldown{ background:linear-gradient(180deg,#95a5a6,#7f8c8d); color:#fff; }
#arene-card .arene-btn.locked{   background:linear-gradient(180deg,#676e7f,#4f5563); color:#e6e9f2; }

/* --- Teinte par type (via data-type sur la carte) --- */
#arene-card .arene-card[data-type="rock"]     { --pk-accent:#a38f21; }
#arene-card .arene-card[data-type="water"]    { --pk-accent:#1e90ff; }
#arene-card .arene-card[data-type="electric"] { --pk-accent:#ffb300; }
#arene-card .arene-card[data-type="grass"]    { --pk-accent:#31c36b; }
#arene-card .arene-card[data-type="ghost"]    { --pk-accent:#7b61ff; }
#arene-card .arene-card[data-type="psychic"]  { --pk-accent:#ff4fa0; }
#arene-card .arene-card[data-type="fire"]     { --pk-accent:#ff5c33; }
#arene-card .arene-card[data-type="ground"]   { --pk-accent:#c79d63; }
#arene-card .arene-card[data-type="dragon"]   { --pk-accent:#7db2ff; }

/* --- Responsive (toujours limité à #arene-card) --- */
@media (max-width:1200px){
  #arene-card{ --pk-w:240px; --pk-h:360px; }
}
@media (max-width:760px){
  #arene-card{ --pk-w:210px; --pk-h:330px; --pk-types-h:80px; }
  #arene-card .arenes-grid{ gap:22px; padding:22px; }
}
@media (max-width:420px){
  #arene-card{ --pk-w:180px; --pk-h:310px; --pk-types-h:74px; }
  #arene-card .type-chip{ font-size:.6rem; }
}

/* =========================================================
   🎮 Modale (déjà isolée par sa classe)
========================================================= */
.arene-modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); z-index:999;
}
.arene-modal.hidden{ display:none; }
.arene-modal-content{
  text-align: center;
  width:90%; max-width:720px; overflow:auto;
  background:linear-gradient(180deg,#151823,#0f111a);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; box-shadow:0 12px 26px rgba(0,0,0,.4);
  padding:26px 22px; color:#f6f7ff;
}
.arene-modal-header h2{ margin:0 0 6px; }
.arene-modal-header p{ margin:0; opacity:.85; }

/* =========================================================
   🎮 PHASE 1 — UI unifiée (scopée à .arene-modal-content)
========================================================= */

.arene-modal-content{
  --accent: #ffd54a;
  --bg1: #151823;
  --bg2: #0f111a;
  --text: #f6f7ff;
  --muted: #a9b2c6;
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 46px rgba(0,0,0,.45);
  color: var(--text);
}

/* ===== Intro (titre + règles) ===== */
.arene-modal-content .p1-wrapper{ display:flex; flex-direction:column; gap:14px; }
.arene-modal-content .p1-intro{ padding:8px 10px 2px; }
.arene-modal-content .p1-intro-title{
  font-weight:900; letter-spacing:.3px; margin-bottom:6px;
  color: color-mix(in oklab, var(--accent) 85%, #fff 0%);
}
.arene-modal-content .p1-intro-rules{
  font-size:.95rem; color:var(--muted);
  border-bottom:1px dashed rgba(255,255,255,.14); padding-bottom:10px; margin-bottom:6px;
}
.arene-modal-content .p1-game-title{ font-weight:800; margin-bottom:4px; color:#fff; }
.arene-modal-content .p1-game-desc{ margin-bottom:4px; }
.arene-modal-content .p1-rules{ margin:6px 0 0; padding-left:18px; }

/* ===== HUD ===== */
.arene-modal-content .p1-hud{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius: 14px;
}
.arene-modal-content .p1-hud-left{ display:flex; align-items:center; gap:10px; }
.arene-modal-content .p1-champ{
  width:44px; height:44px; border-radius:12px; object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.arene-modal-content .p1-title{ font-weight:800; }
.arene-modal-content .p1-hud-center{
  flex:1; display:flex; flex-direction:column; gap:8px; align-items:center;
}
.arene-modal-content .p1-meter{
  width:100%; max-width:520px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid var(--border);
  overflow:hidden; position:relative;
}
.arene-modal-content .p1-meter > i{
  position:absolute; inset:0 0 0 0; width:0%;
  background: linear-gradient(90deg,
     color-mix(in oklab, var(--accent) 75%, #ffffff 0%),
     color-mix(in oklab, var(--accent) 45%, #ffffff 0%));
  transition: width .18s ease;
}
.arene-modal-content .p1-msg{ font-size:.92rem; color:var(--muted); min-height:1.2em; }
.arene-modal-content .p1-hud-right{ display:flex; align-items:center; gap:10px; font-weight:800; }
.arene-modal-content .p1-timer{ padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.06); }
.arene-modal-content .hidden{ display:none !important; }

/* ===== Zone de jeu (CRT) ===== */
.arene-modal-content .p1-area{
  min-height: 280px;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  border:1px solid var(--border); border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  padding:16px; position:relative; display:grid; place-items:center;
}
.arene-modal-content .p1-area.p1-crt{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.05)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 2px, transparent 4px),
    linear-gradient(180deg, #12151d, #0b0e14);
}

/* ===== Footer ===== */
.arene-modal-content .p1-footer{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.arene-modal-content .btn-primary{
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 86%, #ffd54a), color-mix(in oklab, var(--accent) 65%, #e9a91a));
  color:#1b1302; border:none; border-radius:12px; padding:10px 14px; font-weight:900; cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.3);
  transition: transform .12s ease, box-shadow .12s ease;
}
.arene-modal-content .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 0 rgba(0,0,0,.25), 0 16px 26px rgba(0,0,0,.35); }
.arene-modal-content .btn-ghost{
  background: rgba(255,255,255,.08); color:#fff; border:1px solid var(--border);
  border-radius:12px; padding:10px 14px; cursor:pointer;
}
.arene-modal-content .game-btn{
  border:1px solid var(--border); background:rgba(255,255,255,.08);
  color:#fff; border-radius:12px; padding:10px 14px; font-weight:800; cursor:pointer;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.arene-modal-content .game-btn:hover{
  transform:translateY(-2px);
  background: color-mix(in oklab, var(--accent) 18%, rgba(255,255,255,.1));
  box-shadow:0 10px 18px rgba(0,0,0,.35);
}
.arene-modal-content .center{ display:flex; justify-content:center; gap:10px; }
.arene-modal-content .p1-log{ width:100%; text-align:center; margin-top:10px; color:var(--muted); }

/* =========================================================
   🪨 PIERRE — RPS
========================================================= */
.arene-modal-content .rps{
  display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.arene-modal-content .rps .choice{
  width:88px; height:88px; border-radius:18px;
  font-size:2rem; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.arene-modal-content .rps .choice:hover{
  transform:translateY(-4px) scale(1.04);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}

/* =========================================================
   💧 ONDINE — Bulle Bulle
========================================================= */
.arene-modal-content .bb-zone{
  position:relative; width:100%; max-width:660px; height:240px;
  background: radial-gradient(180px 80px at 15% 30%, rgba(255,255,255,.05), transparent 60%),
              radial-gradient(200px 90px at 85% 60%, rgba(255,255,255,.05), transparent 60%);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.arene-modal-content .bb-bubble{
  position:absolute; width:46px; height:46px; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 0 18px rgba(255,255,255,.35), 0 8px 22px rgba(0,0,0,.25);
  cursor:pointer; display:grid; place-items:center;
  animation: bubblePop .2s ease;
}
@keyframes bubblePop{ from{ transform:scale(.7); opacity:.2 } to{ transform:scale(1); opacity:1 } }

/* =========================================================
   ⚡ BOB — Barre de timing
========================================================= */
.arene-modal-content .timing-bar{
  width: min(620px, 92%); height:18px; border-radius:999px; position:relative;
  background: rgba(255,255,255,.08); border:1px solid var(--border); overflow:hidden; margin-bottom:14px;
}
.arene-modal-content .timing-bar .zone{
  position:absolute; top:0; bottom:0; left:20%; width:30%;
  background: color-mix(in oklab, var(--accent) 45%, #18ffbc 0%);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 45%, transparent) inset;
}
.arene-modal-content .timing-bar .cursor{
  position:absolute; top:-6px; width:3px; height:30px; left:0%;
  background:#fff; box-shadow:0 0 10px rgba(255,255,255,.6);
}

/* =========================================================
   🌿 ERIKA — Panier Botanique (inclut contrôles tactiles)
========================================================= */
.arene-modal-content .catch-zone{
  position:relative; width:100%; max-width:700px; height:260px;
  background: linear-gradient(180deg, #0e1410, #0a0f0a);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.arene-modal-content #basket{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  width:84px; height:54px; border-radius:12px;
  background: linear-gradient(180deg, #4b2e17, #2e1b0f);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.25), 0 8px 20px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; font-size:1.4rem;
}
.arene-modal-content .drop{
  position:absolute; top:-10%; width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; font-size:1.2rem; color:#fff;
  box-shadow:0 10px 18px rgba(0,0,0,.35);
}
.arene-modal-content .plant{
  background: linear-gradient(180deg, #3da65d, #2d8649);
  border:1px solid rgba(255,255,255,.12);
}
.arene-modal-content .bomb{
  background: linear-gradient(180deg, #3a3a3a, #1d1d1d);
  border:1px solid rgba(255,255,255,.18);
}
.arene-modal-content .touch-ctrl{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px;
}
.arene-modal-content .touch-ctrl .game-btn{ width:64px; height:44px; }
@media (min-width: 840px){
  .arene-modal-content .touch-ctrl{ display:none; } /* cache sur desktop large */
}

/* =========================================================
   👻 KOGA — Mini Pac-Fantôme (maze + d-pad)
========================================================= */
.arene-modal-content .maze{
  --size: 28px;
  display:grid; grid-template-columns: repeat(var(--w), var(--size));
  grid-template-rows: repeat(var(--h), var(--size));
  gap:4px; padding:6px;
  background:#0a0d14; border:1px solid var(--border); border-radius:12px;
}
.arene-modal-content .maze .wall{
  width:var(--size); height:var(--size); border-radius:8px;
  background: linear-gradient(180deg, #10162b, #0b0f1f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.arene-modal-content .maze .cell{
  width:var(--size); height:var(--size); border-radius:8px;
  background: linear-gradient(180deg, #0f1220, #0c0f1a);
  position:relative;
}
.arene-modal-content .maze .cell.orb::after{
  content:""; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:999px;
  background: #ffd54a; box-shadow:0 0 8px color-mix(in oklab, var(--accent) 50%, transparent);
}
.arene-modal-content .maze .player{
  width:var(--size); height:var(--size); border-radius:999px;
  background:#ffd54a; box-shadow:0 0 16px color-mix(in oklab, var(--accent) 55%, transparent);
}
.arene-modal-content .maze .ghost{
  width:var(--size); height:var(--size); border-radius:6px 6px 2px 2px;
  background: linear-gradient(180deg, #7b61ff, #5240b3);
  outline:2px solid rgba(255,255,255,.08);
  box-shadow:0 0 18px rgba(123,97,255,.35);
}
/* d-pad */
.arene-modal-content .dpad{
  display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:12px;
}
.arene-modal-content .dpad > div{ display:flex; gap:8px; }
.arene-modal-content .dpad button{
  width:56px; height:40px; border-radius:10px; border:1px solid var(--border);
  background:rgba(255,255,255,.08); color:#fff; font-weight:800; cursor:pointer;
}

/* =========================================================
   🔮 MORGANE — Simon
========================================================= */
.arene-modal-content .simon{
  display:grid; grid-template-columns: repeat(2, 120px); gap:14px;
}
.arene-modal-content .sbtn{
  width:120px; height:120px; border-radius:18px; border:1px solid var(--border); cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.25); transition: transform .1s ease, filter .1s ease;
}
.arene-modal-content .sbtn.green{ background:#2ecc71; }
.arene-modal-content .sbtn.blue{  background:#3498db; }
.arene-modal-content .sbtn.yellow{background:#f1c40f; }
.arene-modal-content .sbtn.red{   background:#e74c3c; }
.arene-modal-content .sbtn:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.arene-modal-content .sbtn.on{ filter: brightness(1.25) saturate(1.2); box-shadow:0 0 24px rgba(255,255,255,.35); }

/* =========================================================
   🔥 AUGUSTE — Jauge de chaleur
========================================================= */
.arene-modal-content .heat-gauge{
  position:relative; width:min(640px, 94%); height:18px; border-radius:999px;
  background: rgba(255,255,255,.08); border:1px solid var(--border); overflow:hidden; margin-bottom:14px;
}
.arene-modal-content .heat-gauge .gold{
  position:absolute; top:0; bottom:0;
  background: linear-gradient(90deg, #ffe082, #ffc107);
  box-shadow:0 0 12px rgba(255,193,7,.55) inset;
}
.arene-modal-content .heat-gauge .needle{
  position:absolute; top:-6px; width:3px; height:30px;
  background:#fff; box-shadow:0 0 10px rgba(255,255,255,.6);
}

/* =========================================================
   🪨 GIOVANNI — Tape-Taupe
========================================================= */
.arene-modal-content .holes{
  display:grid; grid-template-columns: repeat(3, 110px); gap:14px;
}
.arene-modal-content .hole{
  width:110px; height:90px; border-radius:16px;
  background: radial-gradient(90px 40px at 50% 75%, #20190f, #14100a);
  border:1px solid var(--border);
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.25), 0 10px 18px rgba(0,0,0,.35);
  cursor:pointer; font-size:1.4rem; display:grid; place-items:center;
  transition: transform .08s ease, box-shadow .12s ease;
}
.arene-modal-content .hole.up{
  transform: translateY(-6px);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 16px 26px rgba(0,0,0,.45);
}

/* =========================================================
   🕹️ KISSO — Mastermind (historique lisible)
========================================================= */
.arene-modal-content .mm-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.arene-modal-content .mm-slot{
  width:52px; height:52px; border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,.08); color:#fff; font-size:1.2rem; cursor:pointer;
  display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.arene-modal-content .mm-log{ width:100%; margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.arene-modal-content .mm-hrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 10px; border:1px dashed var(--border); border-radius:10px;
  background: rgba(255,255,255,.04);
}
.arene-modal-content .mm-hcode span{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px; margin-right:6px;
  background:rgba(255,255,255,.08); border:1px solid var(--border);
  font-size:1.1rem;
}
.arene-modal-content .mm-hfb{ font-weight:800; letter-spacing:2px; }

/* =========================================================
   📱 Responsive
========================================================= */
@media (max-width: 640px){
  .arene-modal-content .p1-hud{ flex-direction:column; align-items:stretch; }
  .arene-modal-content .p1-hud-right{ align-self:flex-end; }
  .arene-modal-content .simon{ grid-template-columns: repeat(2, 100px); }
  .arene-modal-content .sbtn{ width:100px; height:100px; }
  .arene-modal-content .holes{ grid-template-columns: repeat(3, 92px); gap:10px; }
  .arene-modal-content .hole{ width:92px; height:78px; }
}

/* Koga overlay: s'assure que les entités n'affectent pas la grille */
.arene-modal-content .maze-wrap { margin: 0 auto; }
.arene-modal-content .maze-grid { position: relative; z-index: 1; }
.arene-modal-content .maze-entities { z-index: 2; pointer-events:none; }
.arene-modal-content .dpad { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:12px; }
.arene-modal-content .dpad > div{ display:flex; gap:8px; }
.arene-modal-content .dpad button{ width:56px; height:40px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.08); color:#fff; font-weight:800; cursor:pointer; }

/* ====== PIERRE — mode "duel" ====== */
.arene-modal-content .rps-duel{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.arene-modal-content .rps-duel .side-left{ flex:1; display:flex; justify-content:flex-start; gap:16px; }
.arene-modal-content .rps-duel .side-right{
  flex:1; display:flex; align-items:center; justify-content:flex-end; gap:14px;
}
.arene-modal-content .rps-judge .rps-champ{
  width:64px; height:64px; border-radius:14px; object-fit:cover;
  border:1px solid rgba(255,255,255,.1); box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.arene-modal-content .rps-hand{
  width:80px; height:80px; border-radius:16px; display:grid; place-items:center;
  font-size:2rem; background:rgba(255,255,255,.06); border:1px solid var(--border);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.arene-modal-content .rps-hand.pop{ animation: rpsPop .22s ease; }
@keyframes rpsPop{ from{ transform:scale(.7); opacity:.3 } to{ transform:scale(1); opacity:1 } }

/* ====== BOB — aide visuelle ====== */
.arene-modal-content .timing-bar .zone{
  box-shadow: 0 0 0 2px rgba(0,0,0,.2) inset, 0 0 14px rgba(80,255,180,.25) inset;
}
.arene-modal-content .timing-bar .cursor{
  width:5px; height:34px; top:-8px;
  box-shadow: 0 0 10px rgba(255,255,255,.8), 0 0 20px rgba(255,255,255,.35);
}
.arene-modal-content .t-hint{
  margin-top:6px; font-weight:800; letter-spacing:.3px; text-align:center;
  color:#c9d2e3; opacity:.9;
}
.arene-modal-content .t-hint.ok{ color:#17e3a2; text-shadow:0 0 10px rgba(23,227,162,.45); }

/* ====== ERIKA — rien côté CSS (logiciel) ====== */

/* ====== AUGUSTE — aiguille un poil plus large (visible) ====== */
.arene-modal-content .heat-gauge .needle{ width:3px; height:28px; top:-5px; }

/* ====== GIOVANNI — badge discret pour piège ====== */
.arene-modal-content .hole.up.trap{
  position:relative;
}
.arene-modal-content .hole.up.trap::after{
  content:"!"; position:absolute; right:8px; top:6px;
  font-weight:900; font-size:.9rem; color:#ffb0b0;
  text-shadow:0 0 10px rgba(255,120,120,.35);
  opacity:.85;
}

/* ====== KISSO — focus lumineux + palette améliorée ====== */
.arene-modal-content .mm-row .mm-slot{
  width:56px; height:56px; font-size:1.25rem;
}
.arene-modal-content .mm-row .mm-slot.focus{
  outline:0; box-shadow:0 0 0 2px rgba(255,213,74,.45), 0 0 18px rgba(255,213,74,.35);
  transform: translateY(-2px);
}
.arene-modal-content .mm-palette{
  gap:10px; flex-wrap:wrap;
}
.arene-modal-content .mm-palette .mm-color{
  min-width:54px; height:46px; border-radius:12px; font-size:22px;
  border:1px solid var(--border); background:rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.arene-modal-content .mm-palette .mm-color:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:0 12px 26px rgba(0,0,0,.35);
}
.arene-modal-content .mm-palette .mm-clear{
  height:46px; padding:0 12px; border-radius:12px;
  border:1px solid rgba(255,120,120,.25);
  background:linear-gradient(180deg, rgba(255,120,120,.18), rgba(255,120,120,.1));
}

/* =========================================================
   PHASE 2 — Modal content (scopé à .arene-modal-content.p2)
   ========================================================= */
.arene-modal-content.p2{
  --p2-bg1:#151823;
  --p2-bg2:#0f111a;
  --p2-text:#f6f7ff;
  --p2-muted:#a9b2c6;
  --p2-border:rgba(255,255,255,.12);
  --p2-accent:#ffd54a;
  color:var(--p2-text);
  background:linear-gradient(180deg,var(--p2-bg1),var(--p2-bg2));
  border:1px solid var(--p2-border);
  border-radius:18px;
  box-shadow:0 12px 26px rgba(0,0,0,.45);
  padding:18px 16px;
  width:min(96vw,980px);
  max-height:92vh;              /* évite de sortir de l'écran */
  overflow:auto;                /* scroll interne propre si besoin */
}

/* Titres + paragraphes */
.arene-modal-content.p2 h3{ margin:0 0 8px; font-size:1.15rem; }
.arene-modal-content.p2 p{ margin:6px 0 12px; color:var(--p2-muted); }

/* Boutons phase 2 (réutilisables) */
.arene-modal-content.p2 .arene-btn{
  border:none; border-radius:12px; padding:10px 14px; font-weight:900; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.arene-modal-content.p2 .arene-btn.available{
  color:#1b1302;
  background:linear-gradient(180deg,#ffd54a,#e9a91a);
  box-shadow:0 6px 0 rgba(0,0,0,.25),0 10px 22px rgba(0,0,0,.3);
}
.arene-modal-content.p2 .arene-btn.special{
  color:#fff; background:linear-gradient(180deg,#7b61ff,#5240b3);
  box-shadow:0 6px 0 rgba(0,0,0,.25),0 10px 22px rgba(0,0,0,.3);
}
.arene-modal-content.p2 .arene-btn.danger{
  color:#fff; background:linear-gradient(180deg,#ef4444,#b42323);
  box-shadow:0 6px 0 rgba(0,0,0,.25),0 10px 22px rgba(0,0,0,.3);
}
.arene-modal-content.p2 .arene-btn:hover{ transform:translateY(-2px); filter:brightness(1.03); }

/* =========================
   Sélection d'équipe
   ========================= */
.arene-modal-content.p2 .p2-select{ text-align:center; }
.arene-modal-content.p2 .pokemon-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
  padding:8px;
  max-height:58vh;              /* scrolle si trop d'items */
  overflow:auto;
}
.arene-modal-content.p2 .pokemon-card{
  background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px 8px;
  color:var(--p2-text);
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease, filter .12s ease;
}
.arene-modal-content.p2 .pokemon-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.35);
  filter:brightness(1.03);
}
.arene-modal-content.p2 .pokemon-card.is-selected{
  border-color:#22c55e;                 /* ✅ Cadre vert sélection */
  box-shadow:0 0 0 3px rgba(34,197,94,.25), 0 12px 26px rgba(0,0,0,.35);
}
.arene-modal-content.p2 .pokemon-card img{
  image-rendering:pixelated;
  width:64px; height:64px;
}

/* =========================
   Combat minimaliste
   ========================= */
.arene-modal-content.p2 .p2-battle{ text-align:center; }
.arene-modal-content.p2 .teams-dots{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:6px 0 10px;
}
.arene-modal-content.p2 .team-dots{
  display:flex; gap:8px; align-items:center; justify-content:center;
}

/* Pastilles style Pokéball */
.arene-modal-content.p2 .team-dots .dot{
  width:18px; height:18px; border-radius:999px; position:relative;
  background:linear-gradient(180deg,#ef4444 0 50%, #fff 50%); /* rouge/ blanc */
  border:2px solid #0e0e11;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 0 6px rgba(0,0,0,.25);
  opacity:.95;
}
.arene-modal-content.p2 .team-dots .dot::before{ /* bande noire */
  content:""; position:absolute; left:-2px; right:-2px; top:50%; height:2px;
  transform:translateY(-50%); background:#0e0e11;
}
.arene-modal-content.p2 .team-dots .dot::after{  /* bouton central */
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px; transform:translate(-50%,-50%);
  border-radius:999px; background:#fff; border:1px solid #0e0e11;
}
.arene-modal-content.p2 .team-dots .dot.active{
  box-shadow:0 0 0 3px rgba(255,213,74,.35), 0 0 10px rgba(255,213,74,.35);
}
.arene-modal-content.p2 .team-dots .dot.ko{
  filter:grayscale(1); opacity:.45;
}

/* Duel: sprites + HP bars */
.arene-modal-content.p2 .duel{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:end;
  gap:24px;
  margin:10px 0 12px;
}
@media (max-width: 560px){
  .arene-modal-content.p2 .duel{ grid-template-columns:1fr; gap:18px; }
}

.arene-modal-content.p2 .sprite-wrap{
 flex-direction:column; align-items:center; gap:8px;
}
.arene-modal-content.p2 .sprite{
  width:min(220px, 42vw);
  height:auto;
  image-rendering:pixelated;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.arene-modal-content.p2 .sprite.flip{ transform:scaleX(-1); }

/* HP bars avec texte interne + couleurs dynamiques */
.arene-modal-content.p2 .hpbar{
  position:relative;
  top: -15px;
  width:min(340px, 72%);
  height:16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--p2-border);
  overflow:hidden;
}
.arene-modal-content.p2 .hpbar .fill{
  position:absolute; inset:0 auto 0 0;
  width:100%; height:100%;
  transition:width .18s ease;
  background:linear-gradient(90deg,#22c55e,#16a34a); /* par défaut (high) */
  box-shadow:0 0 8px rgba(34,197,94,.45) inset;
}
.arene-modal-content.p2 .hpbar.low .fill{
  background:linear-gradient(90deg,#ef4444,#b42323);
  box-shadow:0 0 8px rgba(239,68,68,.45) inset;
}
.arene-modal-content.p2 .hpbar.mid .fill{
  background:linear-gradient(90deg,#f59e0b,#d97706);
  box-shadow:0 0 8px rgba(245,158,11,.45) inset;
}
.arene-modal-content.p2 .hpbar .text{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-weight:800; font-size:.86rem; letter-spacing:.3px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  color:#0b0b0f;
}

/* Actions combat */
.arene-modal-content.p2 .battle-actions{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-top:8px;
}
.arene-modal-content.p2 .battle-log{
  margin-top:10px;
  border:1px solid var(--p2-border);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:var(--p2-text);
}

/* =========================
   Type picker (petit menu)
   ========================= */
.arene-modal-content.p2 .type-picker{
  background:#10131b; color:#fff;
  border:1px solid var(--p2-border);
}
.arene-modal-content.p2 .type-picker .type-chip{
  background:rgba(255,255,255,.08);
  color:#fff; border-radius:999px;
}

/* ===== PHASE 2 — add-on (scopé à .arene-modal-content) ===== */
.arene-modal-content .p2-select-toolbar{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center;
  margin:8px 0 12px;
}
.arene-modal-content .p2-select-toolbar input,
.arene-modal-content .p2-select-toolbar select,
.arene-modal-content .p2-select-toolbar label{
  padding:8px 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff;
}
.arene-modal-content .p2-count{ font-weight:900; letter-spacing:.3px; }

.arene-modal-content .pokemon-card.selected{
  outline:3px solid #22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.25) inset;
}

/* Duel minimal + HP bars + FX */
.arene-modal-content .arena-duel{ position:relative; display:flex; gap:24px; justify-content:center; align-items:center; margin:12px 0; }
.arene-modal-content .side{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.arene-modal-content .sprite-wrap{ position:relative; width:140px; height:140px; display:grid; place-items:center; }
.arene-modal-content .sprite-wrap img{ max-width:100%; max-height:100%; image-rendering:pixelated; }
.arene-modal-content .hit-flash{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:0; }
.arene-modal-content .hit-flash.on{ animation: p2flash .18s ease both; }
@keyframes p2flash{ from{opacity:0} 50%{opacity:.7} to{opacity:0} }

.arene-modal-content .hp2{
  position:relative; width:min(280px, 80vw); height:16px; border-radius:10px;
  background:#1b2231; border:1px solid rgba(255,255,255,.15); overflow:hidden;
}
.arene-modal-content .hp2 .fill{
  height:100%; width:100%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.8rem; color:#0b0d12; text-shadow:0 1px 0 rgba(255,255,255,.3);
  transition: width .28s ease, background .28s ease;
}
.arene-modal-content .hp2[data-state="high"] .fill{ background:linear-gradient(90deg,#22c55e,#16a34a); }
.arene-modal-content .hp2[data-state="mid"]  .fill{ background:linear-gradient(90deg,#f59e0b,#d97706); }
.arene-modal-content .hp2[data-state="low"]  .fill{ background:linear-gradient(90deg,#ef4444,#dc2626); }

.arene-modal-content .dmg-pop{
  position:absolute; left:50%; top:12%; transform:translateX(-50%);
  font-weight:900; font-size:1rem; pointer-events:none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  animation: dmgRise .6s ease forwards;
}
@keyframes dmgRise{
  from{ opacity:0; transform:translate(-50%, 6px) scale(.9) }
  40%{ opacity:1 }
  to{ opacity:0; transform:translate(-50%, -26px) scale(1.1) }
}

.arene-modal-content .sfx-toggle{
  position:absolute; right:8px; top:8px;
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18);
  border-radius:10px; padding:6px 10px; cursor:pointer; opacity:.85;
}

/* ===== Mes badges ===== */
.account-inventory.badges-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(92px,1fr));
  gap:10px;
  padding:8px 0;
}

.badge-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 6px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  user-select:none;
  cursor:default;
}

.badge-item.unlocked{
  border-color:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.18) inset, 0 6px 18px rgba(0,0,0,.25);
}

.badge-item.locked{
  filter: grayscale(1);
  opacity:.7;
}

.badge-icon{
  width:42px; height:42px; object-fit:contain;
}

.badge-label{
  font-size:.82rem; font-weight:700; text-align:center; line-height:1.1;
}

.badge-item[data-description]{
  position:relative;
}
.badge-item[data-description]:hover::after{
  content:attr(data-description);
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(100% + 6px);
  background:#0f111a; color:#fff; border:1px solid rgba(255,255,255,.18);
  padding:6px 8px; border-radius:8px; white-space:nowrap; font-size:.78rem;
  pointer-events:none; z-index:5;
}

/* ===== Badges (compte) ===== */
.account-inventory.badges-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 10px;
  padding: 6px 0;
}

.badge-item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  text-align: center;
  font-size: .8rem;
}

.badge-item img.badge-icon {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  filter: grayscale(1) opacity(.55);
  transition: filter .2s ease, transform .15s ease;
}

.badge-item.unlocked img.badge-icon {
  filter: none;
}

.badge-item.unlocked:hover img.badge-icon {
  transform: translateY(-2px);
}

.arene-finish-btn {
  margin-top: 15px;
  background: linear-gradient(90deg, #ffcc00, #ff8800);
  color: #222;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.arene-finish-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #ffd633, #ffaa33);
}

.battle-result.victory {
  border-radius: 12px;
  padding: 25px;
  color: white;
  animation: fadeIn 0.5s ease-in-out;
}

.battle-result.victory img.badge-reward {
  width: 100px;
  height: 100px;
  margin: 10px auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.8));
}