/* =============================================================
   global.css — Styles partagés par toutes les pages Personadle
   Contient : base, fond d'écran, logo, boutons link-wrapper,
   toggle dark mode, filtres opus, champ texte, autocomplete,
   compteurs, modales, zone titre, victoire, mauvaises réponses,
   navigation, footer, animations globales, dark mode partagé,
   responsive partagé.
   ============================================================= */

/* =====================================================
   0. DESIGN TOKENS — Charte couleurs unifiée
   Toutes les valeurs répétées dans le CSS viennent d'ici.
   ===================================================== */

:root {
  /* Couleur d'accent rouge Persona (source unique — ex-7 valeurs différentes) */
  --color-accent:        #e63946;
  --color-accent-dark:   #c62828;
  --color-accent-light:  #ff8a80;
  --color-accent-glow:   rgba(230, 57, 70, 0.35);

  /* Surfaces & texte — light mode */
  --color-surface:       rgba(255, 255, 255, 0.92);
  --color-surface-alt:   rgba(245, 240, 255, 0.88);
  --color-text:          #1e1830;
  --color-text-muted:    #5a4a72;
  --color-border:        rgba(160, 80, 100, 0.22);

  /* Overlays */
  --color-overlay-dark:  rgba(0, 0, 0, 0.75);
  --color-overlay-light: rgba(255, 255, 255, 0.85);

  /* Succès / Erreur */
  --color-success:       #43a047;
  --color-error:         #e53935;
  --color-warning:       #f9a825;

  /* Rayons & espacements courants */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.18);
  --shadow-glow: 0 0 20px var(--color-accent-glow);
}

/* Dark mode overrides */
body.darkmode {
  --color-surface:    rgba(14, 10, 24, 0.92);
  --color-surface-alt: rgba(8, 6, 14, 0.9);
  --color-text:       #e8e4f0;
  --color-text-muted: #a89ec0;
  --color-border:     rgba(160, 80, 100, 0.3);
  --shadow-card:      0 4px 20px rgba(0, 0, 0, 0.5);
}

/* =====================================================
   0. POLICES PERSONNALISÉES
   ===================================================== */

/* Persona 5 Font — utilisée pour les titres Persona-style */
@font-face {
  font-family: "Persona5";
  src: url("../font/Persona5Font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =====================================================
   1. BASE & BODY
   ===================================================== */

html {
  /* Défilement fluide et scroll natif sur iOS */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  /* Empêche le scroll horizontal sur mobile */
  overflow-x: hidden;
}

/* Pseudo-élément pour la transition douce du fond au changement de mode.
   position:fixed + z-index:-1 remplace background-attachment:fixed sur body,
   évitant ainsi une double couche de repaint à chaque scroll. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("../img/personadle_wallpaper.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 1;
  transition: background-image 0.5s ease-in-out;
  pointer-events: none;
}

/* Fond sombre spécifique au dark mode */
body.darkmode::before {
  background-image: url("../img/personadle_wallpaper_dark.jpg");
}

/* Fond adapté format portrait sur mobile */
@media (max-width: 768px) {
  body::before {
    background-image: url("../img/personadle_wallpaper_phone.jpeg");
  }

  body.darkmode::before {
    background-image: url("../img/personadle_wallpaper_dark_phone.jpeg");
  }
}

/* Bloque le scroll de la page quand une modale est ouverte */
body.modal-open {
  overflow: hidden;
}

/* =====================================================
   2. LOGO DE LA PAGE D'ACCUEIL
   ===================================================== */

#imgHomePage {
  width: min(460px, 80vw);
  height: auto;
  transition: transform 0.3s ease-in-out;
  display: block;
  margin: 15px auto 0;
}

#imgHomePage:hover {
  /* Légère mise à l'échelle au survol du logo */
  transform: scale(1.1);
}

/* =====================================================
   3. SYSTÈME DE BOUTONS LINK-WRAPPER
   Boutons image avec images normale/active, formes SVG
   décoratives au survol et animations jelly.
   ===================================================== */

.link-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 16px;
  width: fit-content;
  height: fit-content;
  min-width: 100px;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.2s ease;
}

/* Texte fallback si l'image ne charge pas */
.link-wrapper .fallback {
  font-size: 2.25em;
  letter-spacing: 4px;
  line-height: 0;
  opacity: 0;
  position: relative;
  top: 15px;
  left: 0;
}

/* Fixe la taille des boutons Submit / Replay */
#guessButton,
#resetButton {
  display: block;
  height: 90px;
  flex-shrink: 0;
}

/* Conteneur interne de l'image */
.img-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.img-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.15s ease;
  pointer-events: none;
}

/* Image par défaut (affichée au repos) */
.img-wrapper .normal {
  display: block;
}

/* Image active (affichée au survol) */
.img-wrapper .active {
  display: none;
}

/* Effets au survol du bouton */
.link-wrapper:hover {
  z-index: 9999;
  transform: scale(1.05);
}

/* Affiche le wrapper de formes décoratives */
.link-wrapper:hover .shape-wrapper {
  display: block;
  transform: rotate(-6deg);
}

/* Rotation alternative pour les boutons en position paire */
.link-wrapper:nth-child(even):hover .shape-wrapper {
  transform: rotate(11deg);
}

/* Étire la forme cyan */
.link-wrapper:hover .shape-wrapper .cyan-fill {
  transform: scale(3, 0.1);
}

/* Bascule l'image normale → active au survol */
.link-wrapper:hover .img-wrapper .normal {
  display: none;
}

.link-wrapper:hover .img-wrapper .active {
  display: block;
  animation: tiltBounce 0.15s ease forwards;
}

/* Conteneur SVG des formes décoratives (rouge + cyan) */
.shape-wrapper {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: sepia(50%) saturate(3);
  z-index: 1;
}

.shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: all 0.1s linear;
}

.shape svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Forme cyan : blend screen pour effet lumineux */
.shape.cyan-fill {
  mix-blend-mode: screen;
  animation-delay: 0.05s;
  animation-duration: 0.4s;
  opacity: 0.6;
}

/* Forme rouge */
.shape.red-fill {
  animation-delay: 0.08s;
  animation-duration: 0.45s;
  opacity: 0.8;
}

/* Classe d'animation jelly (appliquée aux formes SVG) */
.jelly {
  animation-name: jelly;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center;
}

/* Bouton Rules (?) : pas de bord ni d'effet hover */
.rules-link-wrapper {
  border: none;
  box-shadow: none;
  transition: none;
}

/* =====================================================
   4. TOGGLE MODE SOMBRE
   Bouton fixe en haut à droite pour basculer le thème.
   ===================================================== */

.darkmode-toggle {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 12px;
  border-radius: 14px;
  box-shadow: 0 0 6px black;
}

/* Conteneur du toggle (label) */
.switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Cache la checkbox native */
.switch input {
  display: none;
}

/* Piste du toggle */
.switch .slider {
  width: 40px;
  height: 22px;
  background-color: #ccc;
  border-radius: 30px;
  position: relative;
  transition: 0.2s;
}

/* Curseur rond du toggle */
.switch .slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background-color: white;
  transition: 0.2s;
}

/* Déplace le curseur vers la droite quand activé */
.switch input:checked + .slider::before {
  transform: translateX(18px);
}

/* Couleur verte quand le dark mode est activé */
.switch input:checked + .slider {
  background-color: #4caf50;
}

/* Variantes de couleur pour d'autres toggles filtres */
input:checked + .slider.blue {
  background-color: #0074d9;
}
input:checked + .slider.yellow {
  background-color: #ffdc00;
}
input:checked + .slider.red {
  background-color: #ff4136;
}

.slider.round {
  border-radius: 30px;
}

/* Libellé à droite du toggle */
.label-text {
  font-family: "Arial Black", sans-serif;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-size: 0.9rem;
}

/* =====================================================
   5. BOUTONS FILTRES OPUS (P1 à PQ)
   Permettent de filtrer les personnages par jeu Persona.
   ===================================================== */

/* Conteneur positionné en haut à gauche de la page */
.filter-buttons {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
  z-index: 999;
}

/* Variante avec switches (utilisée sur certains modes) */
.filter-switches {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 15px;
  z-index: 1000;
}

/* Style commun de chaque bouton filtre */
.filter-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  font-family: "Arial Black", sans-serif;
  text-shadow: 1px 1px 2px black;
  transition: 0.2s;
  opacity: 0.8;
}

.filter-btn:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Filtre actif : halo blanc + noir */
.filter-btn.active {
  box-shadow:
    0 0 0 3px white,
    0 0 0 5px black;
  opacity: 1;
}

/* Persona 1 — Violet mystique et ésotérique */
.filter-p1 {
  background: linear-gradient(135deg, #4b0082 0%, #8b00ff 50%, #9370db 100%);
  color: #ffffff;
  border: 2px solid #2e0854;
  box-shadow:
    0 0 12px rgba(139, 0, 255, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* Persona 2 — Orange feu et passion */
.filter-p2 {
  background: linear-gradient(135deg, #ff6b00 0%, #df9b1e 50%, #ffa500 100%);
  color: #2c1810;
  border: 2px solid #8b4000;
  box-shadow:
    0 0 12px rgba(255, 107, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

/* Persona 3 — Bleu nuit et mélancolie */
.filter-p3 {
  background: linear-gradient(135deg, #001f5c 0%, #0074d9 50%, #4da6ff 100%);
  color: #ffffff;
  border: 2px solid #001233;
  box-shadow:
    0 0 12px rgba(0, 116, 217, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Persona 4 — Jaune lumineux et optimiste */
.filter-p4 {
  background: linear-gradient(135deg, #ffd700 0%, #ffdc00 50%, #fff200 100%);
  color: #2c2c2c;
  border: 2px solid #b8860b;
  box-shadow:
    0 0 12px rgba(255, 220, 0, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
}

/* Persona 5 — Rouge rebelle et stylé */
.filter-p5 {
  background: linear-gradient(135deg, #cc0000 0%, #ff4136 50%, #ff6b6b 100%);
  color: #ffffff;
  border: 2px solid #8b0000;
  box-shadow:
    0 0 12px rgba(255, 65, 54, 0.6),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Persona 5X — Néon noir et rouge */
.filter-p5x {
  background: linear-gradient(145deg, #1a1a1a, #8b0000);
  color: #ffffff;
  border: 1px solid #ff003c;
  box-shadow: 0 0 6px #ff003c80;
}

/* Persona Q — Or aventure cartoonesque */
.filter-pq {
  background: linear-gradient(135deg, #ffd700 0%, #ffa500 50%, #ff8c00 100%);
  color: #2c1810;
  border: 3px solid #8b4513;
  box-shadow:
    0 0 10px rgba(255, 215, 0, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
  position: relative;
}

/* =====================================================
   6. CHAMP DE SAISIE ET ZONE D'INPUT
   Textbar centré avec boutons Replay à gauche et Submit
   à droite.
   ===================================================== */

#textbar {
  width: 280px;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 2px solid #444;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* Conteneur positionnel du textbar */
.textbar-container {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Wrapper global centré */
.input-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

/* Ligne contenant les trois éléments : Replay | Textbar | Submit */
.input-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
  margin-top: 25px;
  width: fit-content;
}

/* Blocs gauche et droite (boutons image) */
.button-left,
.button-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Groupe de boutons côte à côte */
.button-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
}

/* =====================================================
   7. AUTOCOMPLÉTION
   Dropdown de suggestions de noms de personnages.
   ===================================================== */

/* Dropdown créé dynamiquement par les JS de chaque mode */
/* Vide, la liste dessinait quand même sa boîte blanche bordée — un artefact
   visible sur toutes les pages tant qu'on n'avait rien tapé. */
.autocomplete-items:empty {
  display: none;
}

.autocomplete-items {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border: 2px solid #000000;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 600; /* au-dessus de .bottom-nav (z-index 500) */
  top: 100%;
  margin-top: 6px;
  width: 340px;
  max-height: 320px;
  overflow-y: auto;
  font-family: "Segoe UI", sans-serif;
}

/* Chaque option de l'autocomplétion */
.list-options {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.2s ease-in-out;
  white-space: nowrap;
}

.list-options:last-child {
  border-bottom: none;
}

.list-options:hover {
  background-color: #f0f0f0;
}

/* Portrait miniature dans l'option */
.list-options img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background-color: white;
  border-radius: 8px;
  margin-right: 12px;
  flex-shrink: 0;
  border: 1px solid #ccc;
}

/* Nom du personnage dans l'option */
.list-options span {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: 230px;
  line-height: 1.2;
}

/* Option sélectionnée au clavier */
.autocomplete-active {
  background-color: #7b8383 !important;
}

/* Real name displayed under a codename in autocomplete suggestions */
.realname {
  font-size: 14px;
  color: #555;
  font-style: italic;
  line-height: 1.1;
}

/* Pastille d'opus sous un nom homonyme (« Junpei Iori » ⟨P4AU⟩) — distingue deux
   versions du MÊME personnage, là où .realname révèle un autre nom. Volontairement
   non-italique et encadrée, pour ne pas se confondre avec un sous-titre. */
.opus-tag {
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 7px;
  border: 1px solid #b48ead;
  border-radius: 999px;
  background-color: #f3e8f1;
  color: #6d3f66;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}

/* =====================================================
   8. COMPTEURS D'ESSAIS (Hint / Give Up)
   ===================================================== */

/* Bloc Hint + Give Up côte à côte */
.hint-giveup-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* Bloc individuel (bouton + compteur) */
.hint-block,
.giveup-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Badge compteur stylisé */
.counter {
  display: inline-block;
  background-color: #2e2e2e;
  color: #fdd835;
  border: 2px solid #fdd835;
  border-radius: 10px;
  padding: 4px 10px;
  margin-left: 8px;
  font-size: 15px;
  font-weight: bold;
  font-family: "Segoe UI", sans-serif;
  box-shadow: 0 0 6px rgba(255, 193, 7, 0.5);
  transition:
    transform 0.2s ease,
    background-color 0.3s ease;
}

/* Compteur activé (max d'essais atteint) */
.counter.activated {
  background-color: #fdd835;
  color: black;
  transform: scale(1.05);
}

/* =====================================================
   9. MODALES
   Overlay partagé par les modales de règles, légal,
   news et daily sur toutes les pages.
   ===================================================== */

/* Overlay de fond — centré avec flou */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

/* Masque la modale via classe JS */
.modal.hidden {
  display: none;
}

/* Boîte de contenu */
.modal-content {
  background-color: #ffffff;
  color: #000;
  margin: 5% auto;
  padding: 30px;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  font-family: "Arial", sans-serif;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Bouton de fermeture positionné en haut à droite */
.modal-content .close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 24px;
  cursor: pointer;
  color: #333;
  font-weight: bold;
}

.modal-content .close:hover {
  color: red;
}

/* Fermeture flottante générique (float: right) */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: #000;
}

/* Formatage du texte des règles */
#rulesText {
  line-height: 1.7;
}

#rulesText ul {
  margin-top: 10px;
  margin-bottom: 25px;
  padding-left: 20px;
}

#rulesText ul ul {
  margin-top: 5px;
  margin-bottom: 10px;
}

#rulesText strong {
  display: block;
  margin-top: 20px;
  font-size: 1.1em;
}

/* Ligne de séparation en pointillés dans les modales */
.separator {
  border: none;
  border-top: 2px dashed #ccc;
  margin: 30px 0;
  opacity: 0.6;
}

/* Modale de mentions légales */
.legal-modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  padding-top: 60px;
}

.legal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 30px;
  border: 1px solid #888;
  width: 80%;
  max-width: 800px;
  border-radius: 10px;
  color: #000;
}

.legal-content h2,
.legal-content h3 {
  margin-top: 20px;
}

/* =====================================================
   10. ZONE TITRE DES MODES (emoji-hint-zone)
   Boîte bleue dégradée utilisée comme en-tête dans tous
   les modes sauf le mode Classique.
   ===================================================== */

.emoji-hint-zone {
  background: linear-gradient(to bottom right, #1875d1bd, #1d92dac2);
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  margin: 30px auto;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.emoji-hint-zone h2 {
  font-size: 1.3rem;
  color: white;
  margin-bottom: 20px;
}

.emoji-hint-zone p {
  font-size: 0.95rem;
  color: #d0e6ff;
  margin-top: 10px;
}

/* =====================================================
   11. BOÎTE DE VICTOIRE
   Affichée quand le joueur trouve la bonne réponse.
   ===================================================== */

.victory-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 25px auto;
  padding: 20px 25px;
  max-width: 600px;
  border-radius: 16px;
  background-color: #e7e7e7;
  border: 3px solid #000000;
  box-shadow: 0 0 18px #147501bb;
  font-family: "Arial Black", Impact, sans-serif;
  text-align: center;
  animation: pulseWin 0.5s ease-in-out;
}

/* Image du personnage révélé */
.victory-box img {
  max-height: 200px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Portraits Summer — format paysage, taille fixe */
.victory-box img[src*="Summer"] {
  width: 300px;
  height: auto;
}

/* Message vert (win-message) — emoji, silhouette, allOutAttack */
.win-message {
  text-align: center;
  font-size: 1.4rem;
  color: #2e7d32;
  font-weight: bold;
}

/* Message blanc avec ombre (victory-message) — personae, music */
.victory-message {
  margin-top: 12px;
  color: rgb(255, 255, 255);
  font-size: 1.1rem;
  line-height: 1.4;
  text-shadow:
    1px 1px 0 #000,
    2px 2px 0 #857679;
}

/* Nom du Persona dans le message de victoire */
.persona-name {
  color: #e53935;
  letter-spacing: 1.2px;
  font-weight: bold;
  text-shadow:
    0 0 4px #fcfcfc,
    0 0 8px #b71c1c;
  animation: appear-glow 0.8s ease forwards;
  opacity: 0;
}

/* Nom du joueur (ex: "Ryuji") dans le message */
.user-name {
  color: #3498db;
  letter-spacing: 1px;
  font-weight: bold;
  text-shadow:
    0 0 4px #ffffff,
    0 0 6px #2c3e50;
}

/* Marges pour les noms */
.persona-name,
.user-name {
  margin: 0 6px;
}

/* Connecteur entre persona et utilisateur */
.connector {
  margin: 0 4px;
}

/* Lien cliquable dans la victoire (ex : vers une chanson) */
.victory-link {
  color: #ffa500;
  text-decoration: underline;
  font-weight: bold;
}

.victory-link:hover {
  color: #ffd700;
}

/* Statistique communautaire post-partie ("X% of N players found this today") */
.community-stats {
  margin-top: 10px;
  font-size: 0.85rem;
  opacity: 0.75;
  font-style: italic;
  text-align: center;
  color: inherit;
}

/* =====================================================
   12. LISTE DES MAUVAISES RÉPONSES
   Cartes miniatures affichées sous la zone de saisie.
   ===================================================== */

/* Conteneur flex wrap centré */
#wrongGuessList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Carte d'erreur avec portrait et nom */
.wrong-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffdddd;
  border: 3px solid #ff3c3c;
  border-radius: 12px;
  padding: 10px;
  animation: fadeIn 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
  min-width: 110px;
}

.wrong-mini img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 6px;
}

.wrong-mini p {
  font-size: 14px;
  font-weight: bold;
  color: #a10000;
  margin: 0;
  text-align: center;
}

/* Classe shake appliquée aux .wrong-mini par les JS */
.shake {
  animation: shake 0.5s;
}

/* =====================================================
   13. NAVIGATION ENTRE MODES
   Boutons "Mode précédent" et "Mode suivant" affichés
   après la résolution d'une partie.
   ===================================================== */

.nav-button {
  background: linear-gradient(135deg, #f7f7f7, #e5e5e5);
  color: #222;
  padding: 18px 28px;
  font-size: 1.4em;
  font-weight: bold;
  border-radius: 15px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  text-align: center;
  width: 220px;
}

.nav-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 18px #000000;
}

/* Bouton précédent (rouge) */
.prev-mode {
  margin-left: 5%;
  color: #c62828;
  box-shadow: 0 0 12px rgba(198, 40, 40, 0.5);
}

.prev-mode:hover {
  box-shadow: 0 0 18px #ff5252;
}

/* Bouton suivant (doré) */
.next-mode {
  margin-right: 5%;
  color: #b8860b;
  box-shadow: 0 0 12px rgba(184, 134, 11, 0.5);
}

.next-mode:hover {
  box-shadow: 0 0 18px #f0c60c;
}

/* =====================================================
   14. CONFETTIS DE VICTOIRE
   Emojis animés en diagonale lors d'une victoire.
   ===================================================== */

.confetti-emoji {
  position: fixed;
  font-size: 2.2rem;
  z-index: 9999;
  pointer-events: none;
  animation: explode-diagonal 1s ease-out forwards;
  transform: translate(0, 0);
}

/* =====================================================
   15. FOOTER
   ===================================================== */

footer {
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 15px;
  font-size: 14px;
  width: 100%;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
}

footer p {
  margin: 5px 0;
}

footer a {
  color: #bbb;
}
footer a:visited {
  color: #bbb;
}
footer a:hover {
  color: #fff;
  text-decoration: underline;
}

/* =====================================================
   16. KEYFRAMES / ANIMATIONS GLOBALES
   ===================================================== */

/* Tilt + bounce de l'image active au survol des boutons */
@keyframes tiltBounce {
  0% {
    transform: scale(1) rotate(-7deg);
  }
  50% {
    transform: scale(1.5) rotate(-7deg);
  }
  100% {
    transform: scale(1.15) rotate(-7deg);
  }
}

@keyframes tiltBounceAlt {
  0% {
    transform: scale(1) rotate(7deg);
  }
  50% {
    transform: scale(1.5) rotate(7deg);
  }
  100% {
    transform: scale(1.15) rotate(7deg);
  }
}

/* Oscillation jelly des formes SVG décoratives */
@keyframes jelly {
  0% {
    transform: scale(1.05, 1) skewX(8deg) translateY(1px) rotateX(10deg) rotateY(5deg)
      rotateZ(-5deg);
  }
  50% {
    transform: scale(1.05, 1.05) skewX(-5deg) translateY(-1px) translateZ(-10px);
  }
  100% {
    transform: scale(1.05, 1) skewX(8deg) translateY(1px) rotateX(-10deg) rotateY(-5deg)
      rotateZ(-5deg);
  }
}

/* Secouement horizontal lors d'une erreur */
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Apparition en fondu (wrong-mini, etc.) */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Explosion diagonale des confettis de victoire */
@keyframes explode-diagonal {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x-move), var(--y-move)) rotate(var(--rotate));
    opacity: 0;
  }
}

/* Pulsation d'entrée de la victory-box */
@keyframes pulseWin {
  0% {
    transform: scale(0.95);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Apparition progressive du nom du Persona */
@keyframes appear-glow {
  to {
    opacity: 1;
  }
}

/* Lueur animée sur les noms (usage futur / décoratif) */
@keyframes glow {
  from {
    text-shadow:
      0 0 4px #8e44ad,
      0 0 10px #8e44ad;
  }
  to {
    text-shadow:
      0 0 6px #9b59b6,
      0 0 14px #9b59b6;
  }
}

/* Apparition de la victory-box (silhouette) */
@keyframes fadeInVictory {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =====================================================
   17. DARK MODE — OVERRIDES GLOBAUX
   ===================================================== */

/* Champ de saisie */
body.darkmode input[type="text"],
body.darkmode #textbar {
  background-color: #111;
  color: #fff !important;
  border: 2px solid #666;
}

/* Autocomplete */
body.darkmode .autocomplete-items,
body.darkmode #autocompleteList {
  background-color: #222;
  color: #fff !important;
  border: 2px solid #666;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

body.darkmode .list-options {
  border-bottom: 1px solid #555;
  color: #fff;
}

body.darkmode .list-options:hover {
  background-color: #333 !important;
}

body.darkmode .list-options span {
  color: #ffffff !important;
}

/* La pastille d'opus garde son fond en darkmode — la règle générique ci-dessus
   force le texte en blanc, illisible sur le rose clair d'origine. */
body.darkmode .opus-tag {
  border-color: #b48ead;
  background-color: #4a2c47;
  color: #f0d9ed !important;
}

body.darkmode .list-options img {
  background-color: #000;
  border: 1px solid #555;
}

/* Compteur d'essais */
body.darkmode .counter {
  background-color: #444;
  color: #fdd835;
  border-color: #888;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

body.darkmode .counter.activated {
  background-color: #fdd835;
  color: #000;
  border-color: #888;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

/* Modale */
body.darkmode .modal-content {
  background-color: #1f1f1f;
  color: #ffffff;
  box-shadow: 0 0 20px #000;
}

body.darkmode .modal-content h2,
body.darkmode .modal-content strong {
  color: #c1c1c1;
}

body.darkmode .modal-content ul {
  color: #dddddd;
}
body.darkmode .modal-content p {
  color: #cccccc;
}

body.darkmode .modal .close {
  color: #aaa;
}
body.darkmode .modal .close:hover {
  color: #fff;
}

/* Force le blanc pour les strong dans les règles */
body.darkmode #rulesText strong {
  color: #ffffff !important;
}

/* Boîte de victoire */
body.darkmode .victory-box {
  background-color: #2f2f45;
  color: #f0f0f0;
  border: 3px solid #45bd00;
  box-shadow: 0 0 22px rgba(69, 189, 0, 0.6);
}

/* Messages de victoire */
body.darkmode .victory-message {
  color: #ffffff;
  text-shadow:
    1px 1px 0 #000,
    2px 2px 3px #888;
}

body.darkmode .persona-name {
  text-shadow:
    0 0 4px #ffffff00,
    0 0 8px #630000;
}

body.darkmode .user-name {
  text-shadow:
    0 0 4px #d0d0d000,
    0 0 8px #001727;
}

/* Navigation entre modes */
body.darkmode .nav-button {
  background: linear-gradient(135deg, #222, #333);
  color: #f0c60c;
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.2);
}

body.darkmode .nav-button:hover {
  background: linear-gradient(135deg, #333, #444);
  box-shadow: 0 0 18px #f0c60c;
}

body.darkmode .prev-mode {
  color: #ff5050;
  box-shadow: 0 0 12px rgba(255, 80, 80, 0.7);
}

body.darkmode .prev-mode:hover {
  box-shadow: 0 0 18px #ff5050;
}

body.darkmode .next-mode {
  color: #f0c60c;
  box-shadow: 0 0 12px rgba(240, 198, 12, 0.7);
}

body.darkmode .next-mode:hover {
  box-shadow: 0 0 18px #f0c60c;
}

/* =====================================================
   18. TAILLES MINIMALES (accessibilité tactile)
   ===================================================== */

button,
.link-wrapper,
.persona-btn {
  min-height: 48px;
  padding: 12px 20px;
}

/* =====================================================
   19. RESPONSIVE
   ===================================================== */

/* -----------------------------------------------
   GRANDE TABLETTE / PETIT DESKTOP (≤ 1024px)
   Ajustements légers pour écrans intermédiaires
----------------------------------------------- */
@media (max-width: 1024px) {
  /* Logo légèrement réduit */
  #imgHomePage {
    width: min(380px, 75vw);
  }

  /* Autocomplete légèrement plus étroit */
  .autocomplete-items {
    width: 300px;
  }
}

/* -----------------------------------------------
   TABLETTE / MOBILE (≤ 768px)
   Adaptations structurelles importantes :
   - Filtres repositionnés dans le flux (plus d'absolu)
   - Input row : le champ passe au-dessus des boutons
   - Bouton Rules : réintégré dans le flux du header
   - Autocomplete réduit
   - Victoire, navigation, confettis adaptés
----------------------------------------------- */
@media (max-width: 768px) {
  /* ---- Base body ---- */
  /* padding-top: 55px = espace pour le .darkmode-toggle fixe (top: 10px ~44px de hauteur)
     Empêche le logo et les filtres de passer sous le toggle en haut à droite. */
  body {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
    padding: 55px 10px 10px 10px;
  }

  body::before {
    background-attachment: scroll !important;
    background-size: cover;
    background-position: center top;
  }

  /* ---- Logo ---- */
  #imgHomePage {
    width: min(300px, 70vw);
    margin: 10px auto;
    display: block;
  }

  /* ---- Filtres opus : sortent du positionnement absolu ----
     Sur mobile les filtres s'insèrent dans le flux normal du
     document, centrés sous le logo, pour éviter tout overlap.
  ---------------------------------------------------------- */
  .filter-buttons,
  .filter-switches {
    position: static; /* Retire l'absolu du desktop */
    display: flex;
    flex-wrap: wrap; /* Retour à la ligne si nécessaire */
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    margin: 8px auto 0;
    max-width: 95%;
    z-index: 100;
  }

  /* Boutons filtres plus compacts */
  .filter-btn {
    padding: 5px 10px;
    font-size: 12px;
    min-height: 36px;
  }

  /* ---- Bouton Rules : réintégré dans le flux ----
     Les boutons Rules ont un inline style "position: absolute"
     que l'on neutralise ici pour les remettre en flux normal.
  ----------------------------------------------- */
  .emoji-hint-zone > div:first-child,
  .personadle-box > div:first-child {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: flex;
    justify-content: center;
    margin: 0 auto 8px auto;
  }

  /* Taille de l'image Rules réduite sur mobile */
  .rules-link-wrapper .img-wrapper img {
    height: 60px !important;
  }

  /* ---- Zone titre des modes ---- */
  .emoji-hint-zone {
    padding: 20px 15px;
    margin: 15px auto;
    max-width: 95%;
    overflow: visible; /* Pour que le bouton Rules ne soit pas rogné */
  }

  /* ---- Zone d'input : reorganisation complète ----
     Sur tablette : le champ texte remonte au-dessus
     des boutons Replay/Submit qui restent côte à côte.
  ------------------------------------------------- */
  .input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
  }

  .input-row {
    display: flex;
    flex-wrap: wrap; /* Autorise le retour à la ligne */
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: min(380px, 95vw); /* Largeur max absolue adaptée à l'écran */
  }

  /* Champ texte : occupe toute la première "rangée" */
  .textbar-container {
    order: -1; /* Passe en premier visuellement */
    flex: 0 0 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
  }

  #textbar {
    width: 100%;
    max-width: 100%;
    padding: 10px 14px;
    font-size: 15px;
  }

  /* Boutons Replay et Submit restent côte à côte */
  .button-left,
  .button-right {
    flex: 0 0 auto;
    order: 0;
  }

  /* Taille des boutons image réduite */
  #guessButton,
  #resetButton {
    height: 70px;
    display: block;
  }

  /* ---- Autocomplete ---- */
  .autocomplete-items {
    width: 90%;
    max-width: 300px;
    max-height: 250px;
    left: 50%;
    transform: translateX(-50%);
  }

  .list-options {
    padding: 10px 12px;
    font-size: 15px;
    min-height: 60px;
  }

  .list-options img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }

  .list-options span {
    max-width: 200px;
    font-size: 14px;
  }

  /* ---- Hint / Give Up ---- */
  .hint-giveup-row {
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
  }

  /* Réduction des boutons Hint et Give Up */
  .hint-block .img-wrapper img,
  .giveup-block .img-wrapper img {
    height: 70px !important;
  }

  /* ---- Boîte de victoire ---- */
  .victory-box {
    max-width: 95%;
    margin: 20px auto;
    padding: 15px;
  }

  .victory-box img {
    width: 120px;
    display: block;
    margin: 0 auto;
  }

  .win-message {
    font-size: 1.2rem;
  }

  /* ---- Boutons de navigation entre modes ---- */
  .nav-button {
    width: 160px;
    font-size: 1.1em;
    padding: 14px 18px;
  }

  .prev-mode {
    margin-left: 2%;
  }
  .next-mode {
    margin-right: 2%;
  }

  /* ---- Confettis ---- */
  .confetti-emoji {
    font-size: 1.8rem;
  }

  /* ---- Toggle dark mode ---- */
  .darkmode-toggle {
    top: 10px;
    right: 10px;
    z-index: 1000;
  }

  /* ---- Boutons link-wrapper (accueil) : espacement réduit ---- */
  .link-wrapper {
    margin: 0 8px;
  }
}

/* -----------------------------------------------
   MODALES — RESPONSIVE MOBILE
   Sur petit écran les modales utilisent toute la
   hauteur disponible et réduisent leur padding.
----------------------------------------------- */
@media (max-width: 768px) {
  .modal-content {
    margin: 2% auto;
    padding: 22px 18px;
    max-height: 92vh;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .modal-content {
    margin: 1% auto;
    padding: 18px 14px;
    width: 95%;
    max-height: 95vh;
    border-radius: 10px;
  }

  .modal-content .close {
    right: 10px;
    top: 8px;
    font-size: 20px;
  }
}

/* -----------------------------------------------
   PETITS MOBILES (≤ 480px)
   Compactage supplémentaire : labels cachés,
   input en colonne stricte, boutons plus petits.
----------------------------------------------- */
@media (max-width: 480px) {
  /* padding-top conservé pour le toggle dark mode, côtés réduits */
  body {
    padding: 50px 5px 5px 5px;
  }

  /* ---- Filtres encore plus compacts ---- */
  .filter-btn {
    padding: 4px 8px;
    font-size: 11px;
    min-height: 32px;
  }

  /* ---- Input : empilage vertical complet ----
     Sur très petit écran, tout est en colonne :
     champ texte, puis Replay, puis Submit.
  --------------------------------------------- */
  .input-row {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(300px, 95vw);
  }

  .textbar-container {
    order: 0;
    flex: 0 0 auto;
    max-width: 260px;
    width: 100%;
  }

  #textbar {
    width: 100%;
    font-size: 16px; /* 16px minimum prevents iOS auto-zoom on focus */
    padding: 9px 12px;
  }

  #guessButton,
  #resetButton {
    height: 60px;
  }

  /* ---- Toggle dark mode : label masqué ----
     Sur mini mobile, le texte "Dark Mode" est caché
     pour économiser de l'espace en haut à droite.
  ----------------------------------------------- */
  .label-text {
    display: none;
  }

  .darkmode-toggle {
    padding: 6px 8px;
    gap: 4px;
  }

  /* ---- Victoire ---- */
  .victory-box img {
    width: 100px;
    display: block;
    margin: 0 auto;
  }
  .win-message {
    font-size: 1.1rem;
  }

  /* ---- Navigation modes ---- */
  .nav-button {
    width: 130px;
    font-size: 1em;
    padding: 12px 14px;
  }

  /* ---- Emoji-hint-zone ---- */
  .emoji-hint-zone h2 {
    font-size: 1.1rem;
  }
}

/* =============================================================================
   CHALLENGE A FRIEND — bouton + modale
   ============================================================================= */

/* ── Bouton "Challenge a Friend" dans la navigation entre modes ── */
.btn-challenge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 22px;
  background: linear-gradient(135deg, #c00 0%, #e63946 100%);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 0 0 0 rgba(230, 57, 70, 0.55),
    0 3px 12px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease,
    background 0.2s ease;
  animation: challengeIdle 2.8s ease-in-out infinite;
}

/* Icône épée — légère rotation au repos pour l'effet "prêt au combat" */
.btn-challenge > span:first-child {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes challengeIdle {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(230, 57, 70, 0.55),
      0 3px 12px rgba(0, 0, 0, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 7px rgba(230, 57, 70, 0),
      0 3px 16px rgba(0, 0, 0, 0.3);
  }
}

.btn-challenge:hover {
  background: linear-gradient(135deg, #a00 0%, #c1121f 100%);
  transform: scale(1.07) translateY(-2px);
  box-shadow:
    0 0 18px rgba(230, 57, 70, 0.65),
    0 6px 20px rgba(0, 0, 0, 0.35);
  animation: none;
}
.btn-challenge:hover > span:first-child {
  transform: rotate(-20deg) scale(1.25);
}
.btn-challenge:active {
  transform: scale(0.96) translateY(0);
  box-shadow:
    0 0 8px rgba(230, 57, 70, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

body.darkmode .btn-challenge {
  background: linear-gradient(135deg, #c00 0%, #e63946 100%);
  box-shadow:
    0 0 0 0 rgba(255, 80, 80, 0.5),
    0 3px 14px rgba(0, 0, 0, 0.5);
}
body.darkmode .btn-challenge:hover {
  background: linear-gradient(135deg, #e63946 0%, #ff5555 100%);
  box-shadow:
    0 0 22px rgba(255, 80, 80, 0.6),
    0 6px 22px rgba(0, 0, 0, 0.5);
}

/* ── Overlay de la modale ── */
.challenge-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
  animation: fadeInOverlay 0.15s ease;
}
@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ── Carte modale ── */
.challenge-card {
  background: var(--challenge-bg, #fff);
  border: 1.5px solid rgba(200, 0, 0, 0.25);
  border-radius: 16px;
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  animation: slideUpCard 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUpCard {
  from {
    transform: translateY(20px) scale(0.97);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Variables CSS pour les deux modes */
:root {
  --challenge-bg: #ffffff;
  --challenge-header-bg: rgba(200, 0, 0, 0.06);
  --challenge-header-text: #b00000;
  --challenge-border: rgba(200, 0, 0, 0.15);
  --challenge-row-hover: rgba(200, 0, 0, 0.04);
  --challenge-text: #1a1a1a;
  --challenge-text-muted: #666;
}

body.darkmode {
  --challenge-bg: #181818;
  --challenge-header-bg: rgba(220, 0, 0, 0.1);
  --challenge-header-text: #ff6060;
  --challenge-border: rgba(220, 0, 0, 0.2);
  --challenge-row-hover: rgba(220, 0, 0, 0.07);
  --challenge-text: #f0f0f0;
  --challenge-text-muted: #999;
}

/* ── Pied de la modale ── */
.challenge-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--challenge-border);
}
.challenge-card__footer-label {
  font-size: 0.75rem;
  color: var(--challenge-text-muted);
  font-style: italic;
  letter-spacing: 0.04em;
}
.challenge-card__footer-close {
  background: none;
  border: none;
  color: var(--challenge-text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition:
    background 0.12s,
    color 0.12s;
}
.challenge-card__footer-close:hover {
  background: var(--challenge-row-hover);
  color: var(--challenge-text);
}

/* ── Liste d'amis (scrollable, style leaderboard) ── */
.challenge-card__list {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 0, 0, 0.4) var(--challenge-bg, #fff);
}
.challenge-card__empty {
  color: var(--challenge-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 16px;
}

/* ── Ligne ami ── */
.challenge-friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--challenge-border);
  border-left: 3px solid transparent;
  transition:
    background 0.12s,
    border-left-color 0.15s,
    transform 0.1s;
  cursor: default;
}
.challenge-friend-row:last-child {
  border-bottom: none;
}
.challenge-friend-row:hover {
  background: var(--challenge-row-hover);
  border-left-color: rgba(200, 0, 0, 0.5);
  transform: translateX(2px);
}
.challenge-friend-row__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--challenge-border);
  flex-shrink: 0;
  background: var(--challenge-row-hover);
  transition: transform 0.15s;
}
.challenge-friend-row:hover .challenge-friend-row__avatar {
  transform: scale(1.06);
}
.challenge-friend-row__info {
  flex: 1;
  min-width: 0;
}
.challenge-friend-row__pseudo {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--challenge-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.challenge-friend-row__code {
  font-size: 0.72rem;
  color: var(--challenge-text-muted);
  font-family: monospace;
  margin-top: 1px;
}
.challenge-friend-row__send {
  padding: 5px 14px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 100px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.challenge-friend-row__send:hover:not(:disabled) {
  background: #22c55e;
  color: #fff;
  border-color: #22c55e;
}
.challenge-friend-row__send:disabled {
  color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: default;
}
.challenge-friend-row__send.sent {
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* -----------------------------------------------
   APPAREILS TACTILES (sans hover natif)
   Zones de tap agrandies, hover effects désactivés
----------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  /* Zones de tap minimum 44px pour tous les boutons */
  .gamemode-button,
  #guessButton,
  #hintButton,
  #resetButton,
  #giveUpButton,
  .filter-btn {
    touch-action: manipulation;
    min-height: 44px;
  }

  /* Désactive les effets hover non utilisables sur tactile */
  .link-wrapper:hover {
    transform: none;
  }

  .link-wrapper:hover .shape-wrapper {
    display: none;
  }
}

/* -----------------------------------------------
   SOCIAL LINK — RANK-UP ANIMATION (Persona-style)
----------------------------------------------- */
/* ═══════════════════════════════════════════════
   SOCIAL LINK RANK-UP — Animation Persona style v2
   ═══════════════════════════════════════════════ */

#sl-rankup-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: none;
  overflow: hidden;
  gap: 0;
  padding: 16px;
  box-sizing: border-box;
}
#sl-rankup-overlay.sl-ru--in {
  pointer-events: all;
}

/* Backdrop */
.sl-ru-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 12, 0);
  transition: background 0.42s ease;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-backdrop {
  background: rgba(0, 0, 12, 0.96);
}
#sl-rankup-overlay.sl-ru--out .sl-ru-backdrop {
  background: rgba(0, 0, 12, 0);
  transition: background 0.35s ease 0.12s;
}

/* Background ambient glow */
.sl-ru-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(230, 57, 70, 0.12) 0%,
    rgba(255, 150, 0, 0.07) 45%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease 0.3s;
  pointer-events: none;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-glow {
  transform: translate(-50%, -50%) scale(1);
}

/* Floating sparkle field */
.sl-ru-sparkle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sl-ru-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd700;
  opacity: 0;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-sparkle {
  animation: sl-ru-sparkle-drift 3.2s ease-out forwards;
}
@keyframes sl-ru-sparkle-drift {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  12% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: var(--spark-tx, translate(50px, -130px)) scale(0.15);
  }
}

/* ── SCENE: two avatar nodes + beam ───────────────── */
.sl-ru-scene {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(400px, 90vw);
  margin-bottom: 20px;
}

/* Nodes */
.sl-ru-node {
  position: relative;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.25);
}
#sl-rankup-overlay.sl-ru--in .sl-ru-node--me {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.32s ease 0.38s,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.38s;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-node--friend {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.32s ease 0.54s,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.54s;
}
#sl-rankup-overlay.sl-ru--out .sl-ru-node {
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.sl-ru-node-img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: contain;
  background: #0e0e0e;
  display: block;
  position: relative;
  z-index: 1;
}
.sl-ru-node--me .sl-ru-node-img {
  border: 3px solid #e63946;
  box-shadow:
    0 0 14px rgba(230, 57, 70, 0.6),
    0 0 34px rgba(230, 57, 70, 0.2);
}
.sl-ru-node--friend .sl-ru-node-img {
  border: 3px solid #ffd700;
  box-shadow:
    0 0 14px rgba(255, 215, 0, 0.6),
    0 0 34px rgba(255, 215, 0, 0.2);
}

.sl-ru-node-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}
.sl-ru-node--me .sl-ru-node-ring {
  border-color: #e63946;
}
.sl-ru-node--friend .sl-ru-node-ring {
  border-color: #ffd700;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-node-ring {
  animation: sl-ru-ring-pulse 2.2s ease-out infinite 1.1s;
}
@keyframes sl-ru-ring-pulse {
  0% {
    transform: scale(1);
    opacity: 0.65;
  }
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

/* ── Beam ──────────────────────────────────────────── */
.sl-ru-beam {
  flex: 1;
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 2px;
}
.sl-ru-beam-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-50%);
}
.sl-ru-beam-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  width: 0%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #e63946 0%, #ff7700 45%, #ffd700 100%);
  border-radius: 2px;
  box-shadow:
    0 0 8px rgba(255, 180, 0, 0.75),
    0 0 22px rgba(255, 100, 0, 0.35);
  transition: width 0.78s cubic-bezier(0.4, 0, 0.2, 1) 0.78s;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-beam-fill {
  width: 100%;
}

/* Central diamond marker */
.sl-ru-beam-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  font-size: 1rem;
  color: #ffd700;
  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.95),
    0 0 26px rgba(255, 215, 0, 0.5);
  z-index: 2;
  line-height: 1;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-beam-center {
  transform: translate(-50%, -50%) scale(1.15) rotate(45deg);
}
#sl-rankup-overlay.sl-ru--out .sl-ru-beam-center {
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

/* Traveling dots */
.sl-ru-dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  left: 0;
}
.sl-ru-dot--1 {
  background: #ffd700;
}
.sl-ru-dot--2 {
  background: #ff8800;
}
.sl-ru-dot--3 {
  background: #fff;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-dot--1 {
  animation: sl-ru-dot-travel 1.5s ease-in-out infinite 1.7s;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-dot--2 {
  animation: sl-ru-dot-travel 1.5s ease-in-out infinite 2.1s;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-dot--3 {
  animation: sl-ru-dot-travel 1.5s ease-in-out infinite 2.5s;
}
@keyframes sl-ru-dot-travel {
  0% {
    left: 0%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  8% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  92% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    left: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
}

/* ── Rank card ─────────────────────────────────────── */
.sl-ru-card {
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: "Oswald", "Persona5", Arial, sans-serif;
  opacity: 0;
  transform: translateY(20px);
  user-select: none;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease 0.88s,
    transform 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) 0.88s;
}
#sl-rankup-overlay.sl-ru--out .sl-ru-card {
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.sl-ru-card-title {
  font-size: 0.62rem;
  letter-spacing: 0.44em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sl-ru-rank-num {
  font-size: clamp(2.8rem, 10.5vw, 5rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow:
    0 0 36px rgba(230, 57, 70, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.7);
}
.sl-ru-rank-num strong {
  color: #e63946;
  text-shadow:
    0 0 38px rgba(230, 57, 70, 1),
    0 0 64px rgba(230, 57, 70, 0.45);
}
.sl-ru-separator {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.55), transparent);
  margin: 10px auto 9px;
}
.sl-ru-name {
  font-size: clamp(1rem, 3.6vw, 1.55rem);
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.5);
  margin-bottom: 18px;
}
.sl-ru-phrase {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.82rem, 2.3vw, 1rem);
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.03em;
  min-height: 1.45em;
  margin: 0 auto 22px;
  max-width: min(310px, 82vw);
  line-height: 1.55;
}
/* Blinking cursor while typing */
.sl-ru-phrase.sl-ru-typing::after {
  content: "▌";
  color: rgba(255, 255, 255, 0.55);
  animation: sl-ru-cursor 0.65s step-end infinite;
}
@keyframes sl-ru-cursor {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.sl-ru-hint {
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.22);
  text-transform: uppercase;
  opacity: 0;
}
#sl-rankup-overlay.sl-ru--in .sl-ru-hint {
  animation: sl-ru-hint-blink 1.7s ease-in-out infinite 2.4s;
}
@keyframes sl-ru-hint-blink {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.6;
  }
}

/* ═══════════════════════════════════════════════
   SOCIAL LINK RANK-UP — Intensity tiers
   ═══════════════════════════════════════════════ */

/* ── TIER 2 (ranks 4-6) — stronger glow, thicker beam ── */
#sl-rankup-overlay.sl-ru--tier2 .sl-ru-glow {
  width: 680px;
  height: 680px;
  background: radial-gradient(
    circle,
    rgba(230, 57, 70, 0.2) 0%,
    rgba(255, 150, 0, 0.13) 45%,
    transparent 70%
  );
}
#sl-rankup-overlay.sl-ru--tier2 .sl-ru-beam-fill {
  height: 4px;
  box-shadow:
    0 0 14px rgba(255, 180, 0, 0.9),
    0 0 36px rgba(255, 100, 0, 0.55);
}
#sl-rankup-overlay.sl-ru--tier2 .sl-ru-node-ring {
  animation-duration: 1.8s;
}
#sl-rankup-overlay.sl-ru--tier2 .sl-ru-rank-num {
  text-shadow:
    0 0 48px rgba(230, 57, 70, 1),
    0 2px 6px rgba(0, 0, 0, 0.7);
}

/* ── TIER 3 (ranks 7-9) — gold shift, pulsing beam, double rings ── */
#sl-rankup-overlay.sl-ru--tier3 .sl-ru-glow {
  width: 820px;
  height: 820px;
  background: radial-gradient(
    circle,
    rgba(255, 200, 0, 0.22) 0%,
    rgba(230, 57, 70, 0.16) 42%,
    transparent 68%
  );
}
#sl-rankup-overlay.sl-ru--tier3 .sl-ru-beam-fill {
  height: 5px;
  background: linear-gradient(90deg, #ff7700 0%, #ffd700 50%, #fff7a0 100%);
  box-shadow:
    0 0 18px rgba(255, 215, 0, 1),
    0 0 44px rgba(255, 180, 0, 0.65);
}
#sl-rankup-overlay.sl-ru--tier3.sl-ru--in .sl-ru-beam-fill {
  animation: sl-ru-beam-pulse 1s ease-in-out infinite 1.7s;
}
@keyframes sl-ru-beam-pulse {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
  }
  50% {
    box-shadow:
      0 0 28px rgba(255, 215, 0, 1),
      0 0 56px rgba(255, 180, 0, 0.8);
  }
}
#sl-rankup-overlay.sl-ru--tier3 .sl-ru-node-ring {
  animation-duration: 1.4s;
}
#sl-rankup-overlay.sl-ru--tier3 .sl-ru-node-ring--outer {
  inset: -16px;
  animation-duration: 2s;
  animation-delay: 1.35s;
}
#sl-rankup-overlay.sl-ru--tier3.sl-ru--in .sl-ru-node-ring--outer {
  animation: sl-ru-ring-pulse 2s ease-out infinite 1.35s;
}
#sl-rankup-overlay.sl-ru--tier3 .sl-ru-node--me .sl-ru-node-img {
  box-shadow:
    0 0 20px rgba(230, 57, 70, 0.85),
    0 0 50px rgba(230, 57, 70, 0.3);
}
#sl-rankup-overlay.sl-ru--tier3 .sl-ru-node--friend .sl-ru-node-img {
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.85),
    0 0 50px rgba(255, 215, 0, 0.3);
}
#sl-rankup-overlay.sl-ru--tier3 .sl-ru-rank-num strong {
  color: #ffd700;
  text-shadow:
    0 0 42px rgba(255, 215, 0, 1),
    0 0 72px rgba(255, 215, 0, 0.5);
}
#sl-rankup-overlay.sl-ru--tier3 .sl-ru-beam-center {
  font-size: 1.2rem;
  text-shadow:
    0 0 14px rgba(255, 215, 0, 1),
    0 0 30px rgba(255, 215, 0, 0.6);
}

/* ── RANK 10 — True Confidant : full gold spectacle ── */

/* Gold flash on entry */
.sl-ru-gold-flash {
  position: fixed;
  inset: 0;
  background: #ffd700;
  pointer-events: none;
  z-index: 99998;
  opacity: 0;
  animation: sl-ru-gold-flash-anim 0.5s ease-out 0.28s forwards;
}
@keyframes sl-ru-gold-flash-anim {
  0% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
  }
}

#sl-rankup-overlay.sl-ru--rank10 .sl-ru-glow {
  width: 1000px;
  height: 1000px;
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.3) 0%,
    rgba(255, 120, 0, 0.18) 38%,
    rgba(230, 57, 70, 0.1) 60%,
    transparent 75%
  );
  animation: sl-ru-glow-breathe 2.2s ease-in-out infinite 1.8s;
}
@keyframes sl-ru-glow-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.12);
  }
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-backdrop {
  background: rgba(0, 0, 4, 0.97);
}

/* Beam — full gold, thick, always-pulsing */
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-beam-fill {
  height: 6px;
  background: linear-gradient(90deg, #e63946 0%, #ff8800 30%, #ffd700 60%, #fffbe0 100%);
  box-shadow:
    0 0 22px rgba(255, 215, 0, 1),
    0 0 60px rgba(255, 180, 0, 0.8),
    0 0 100px rgba(255, 150, 0, 0.4);
}
#sl-rankup-overlay.sl-ru--rank10.sl-ru--in .sl-ru-beam-fill {
  animation: sl-ru-beam-pulse10 0.8s ease-in-out infinite 1.6s;
}
@keyframes sl-ru-beam-pulse10 {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.8);
    filter: brightness(1);
  }
  50% {
    box-shadow:
      0 0 36px rgba(255, 215, 0, 1),
      0 0 80px rgba(255, 200, 0, 0.9);
    filter: brightness(1.25);
  }
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-beam-track {
  background: rgba(255, 215, 0, 0.12);
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-beam-center {
  font-size: 1.4rem;
  color: #fff7a0;
  text-shadow:
    0 0 18px rgba(255, 215, 0, 1),
    0 0 40px rgba(255, 215, 0, 0.8);
  animation: sl-ru-diamond-spin 3s linear infinite 2s;
}
@keyframes sl-ru-diamond-spin {
  from {
    transform: translate(-50%, -50%) scale(1.15) rotate(45deg);
  }
  to {
    transform: translate(-50%, -50%) scale(1.15) rotate(405deg);
  }
}
/* Override beam-center entry so spin starts from the right base */
#sl-rankup-overlay.sl-ru--rank10.sl-ru--in .sl-ru-beam-center {
  transform: translate(-50%, -50%) scale(1.25) rotate(45deg);
}

/* Avatar nodes — gold border for friend, both glow intensely */
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-node--me .sl-ru-node-img {
  border-color: #ffd700;
  box-shadow:
    0 0 24px rgba(255, 215, 0, 0.9),
    0 0 60px rgba(255, 215, 0, 0.4);
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-node--friend .sl-ru-node-img {
  border-color: #ffd700;
  box-shadow:
    0 0 24px rgba(255, 215, 0, 0.9),
    0 0 60px rgba(255, 215, 0, 0.4);
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-node-ring {
  border-color: #ffd700 !important;
  animation-duration: 1.2s;
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-node-ring--outer {
  inset: -18px;
  border-color: rgba(255, 215, 0, 0.5) !important;
  animation-duration: 1.9s;
  animation-delay: 1.45s;
}
#sl-rankup-overlay.sl-ru--rank10.sl-ru--in .sl-ru-node-ring--outer {
  animation: sl-ru-ring-pulse 1.9s ease-out infinite 1.45s;
}

/* Rank card — full gold palette */
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-card-title {
  color: rgba(255, 215, 0, 0.55);
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-rank-num {
  color: #ffd700;
  text-shadow:
    0 0 48px rgba(255, 215, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.7);
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-rank-num strong {
  color: #fff7a0;
  text-shadow:
    0 0 52px rgba(255, 255, 200, 1),
    0 0 88px rgba(255, 215, 0, 0.7);
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-separator {
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), transparent);
  width: 80px;
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-name {
  color: #fff7a0;
  text-shadow: 0 0 24px rgba(255, 215, 0, 0.8);
  font-size: clamp(1.1rem, 4vw, 1.75rem);
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-phrase {
  color: rgba(255, 240, 180, 0.85);
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-hint {
  color: rgba(255, 215, 0, 0.35);
}
#sl-rankup-overlay.sl-ru--rank10 .sl-ru-phrase.sl-ru-typing::after {
  color: rgba(255, 215, 0, 0.7);
}

/* Extra dots (rank10 only) */
#sl-rankup-overlay.sl-ru--rank10.sl-ru--in .sl-ru-dot--4 {
  background: #fff7a0;
  animation: sl-ru-dot-travel 1.5s ease-in-out infinite 2s;
}
#sl-rankup-overlay.sl-ru--rank10.sl-ru--in .sl-ru-dot--5 {
  background: #ffd700;
  animation: sl-ru-dot-travel 1.5s ease-in-out infinite 2.85s;
}

/* -----------------------------------------------
   BADGE NOTIFICATION — disponible sur toutes les pages
----------------------------------------------- */
.badge-notification {
  position: fixed;
  top: -200px;
  right: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 99999;
  min-width: min(300px, calc(100vw - 40px));
  max-width: min(360px, calc(100vw - 40px));
  transition: top 0.5s ease;
  border: 2px solid #ffd700;
  cursor: pointer;
}
.badge-notification.show {
  top: 20px;
}
.badge-notif-content {
  display: flex;
  align-items: center;
  gap: 15px;
}
.badge-notif-content img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px solid #ffd700;
  flex-shrink: 0;
}
.badge-notif-content h4 {
  margin: 0 0 4px;
  color: #ffd700;
  font-size: 1em;
}
.badge-notif-content p {
  margin: 0;
  font-weight: bold;
  font-size: 0.95em;
  color: #fff;
}
.badge-notif-content small {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82em;
}

/* Badge zoom modal — accessible depuis toutes les pages (modes de jeu inclus) */
.badge-zoom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(5px);
}
.badge-zoom-modal.show {
  opacity: 1;
}

.badge-zoom-content {
  position: relative;
  text-align: center;
  padding: 40px;
  background: rgba(20, 20, 20, 0.98);
  border-radius: 25px;
  border: 3px solid #ffd700;
  box-shadow: 0 0 50px rgba(255, 215, 0, 0.6);
  max-width: 550px;
  width: 90%;
  animation: zoomPopup 0.25s ease forwards;
  transform: scale(0.6);
  opacity: 0;
}
.badge-zoom-content img {
  width: 280px;
  height: 280px;
  border-radius: 20px;
  margin-bottom: 25px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 215, 0, 0.3);
}
.badge-zoom-content h3 {
  color: #ffd700;
  font-size: 2.2em;
  margin: 15px 0 10px;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
  font-weight: bold;
}
.badge-zoom-content .badge-condition {
  color: #2ecc71;
  font-size: 1.05em;
  font-weight: bold;
  margin: 12px 0;
  padding: 8px 16px;
  background: rgba(46, 204, 113, 0.15);
  border-radius: 10px;
  display: inline-block;
}
.badge-zoom-content .badge-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.15em;
  line-height: 1.7;
  margin: 20px auto;
  font-style: italic;
  padding: 0 20px;
  text-align: center;
  max-width: 450px;
}
.badge-zoom-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2.2em;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.badge-zoom-close:hover {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.2);
  transform: rotate(90deg);
}
@keyframes zoomPopup {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* =====================================================
   RULES MODAL — Redesign v2 : adaptatif clair/sombre
   Animation d'entrée, sections visuellement claires,
   scroll interne uniquement (pas de double scroll).
   ===================================================== */

@keyframes rulesModalIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Overlay : fond non-scrollable ─────────────────────── */
#rulesModal.modal {
  overflow: hidden;
  align-items: center;
}

/* ── Fenêtre : large, épurée ────────────────────────────── */
#rulesModal .modal-content {
  background: #fff;
  color: #1e1e1e;
  border: none;
  border-radius: 14px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.07);
  max-width: 920px;
  width: 96%;
  max-height: 88vh;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  animation: rulesModalIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 0, 0, 0.16) transparent;
}
#rulesModal .modal-content::-webkit-scrollbar {
  width: 3px;
}
#rulesModal .modal-content::-webkit-scrollbar-track {
  background: transparent;
}
#rulesModal .modal-content::-webkit-scrollbar-thumb {
  background: rgba(180, 0, 0, 0.16);
  border-radius: 3px;
}

/* ── Header gradient Persona ───────────────────────────── */
#rulesModal .modal-content h2 {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0;
  padding: 15px 52px 15px 22px;
  background: linear-gradient(120deg, #c80000 0%, #7a0000 100%);
  color: #fff;
  font-family: "Oswald", "Arial Black", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px 14px 0 0;
}
#rulesModal .modal-content h2::before {
  content: "◆";
  font-size: 0.5em;
  opacity: 0.6;
  flex-shrink: 0;
}

/* ── Bouton × ───────────────────────────────────────────── */
#rulesModal .modal-content .close {
  position: absolute;
  top: 12px;
  right: 18px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 22px;
  float: none;
  z-index: 11;
  line-height: 1;
  transition:
    color 0.15s,
    transform 0.15s;
}
#rulesModal .modal-content .close:hover {
  color: #fff;
  transform: scale(1.2);
}

/* ── Corps ──────────────────────────────────────────────── */
#rulesModal [data-i18n-block] {
  padding: 16px 22px 20px;
}

/* ── Séparateurs : discrets ─────────────────────────────── */
#rulesModal hr.separator {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin: 8px 0;
}

/* ── En-têtes de section : typographiques, sans boîte ────── */
#rulesModal strong {
  display: block;
  font-family: "Oswald", "Arial Black", Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c00;
  margin: 10px 0 4px;
  padding: 0 0 4px 0;
  border-bottom: 1px solid rgba(204, 0, 0, 0.18);
  background: none;
}

/* ── Strong inline dans les li et les p ─────────────────── */
#rulesModal ul li strong,
#rulesModal p strong {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #222;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* ── Listes : simples, propres ──────────────────────────── */
#rulesModal ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#rulesModal ul li {
  position: relative;
  font-size: 0.875rem;
  line-height: 1.52;
  color: #444;
  padding: 4px 6px 4px 18px;
  background: none;
  border: none;
  border-radius: 0;
}
#rulesModal ul li::before {
  content: "›";
  position: absolute;
  left: 4px;
  top: 3px;
  color: rgba(204, 0, 0, 0.45);
  font-size: 1rem;
  line-height: 1.52;
  font-weight: 700;
}

/* ── Texte courant ──────────────────────────────────────── */
#rulesModal p,
#rulesModal #rulesText {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* ── Texte de clôture (em) ──────────────────────────────── */
#rulesModal em {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.28);
  margin-top: 10px;
  font-style: italic;
  letter-spacing: 0.05em;
}

/* ── Responsive modal rules ─────────────────────────────── */
@media (max-width: 960px) {
  #rulesModal .modal-content {
    max-width: 96vw;
    width: 96%;
    max-height: 90vh;
    border-radius: 12px;
  }
  #rulesModal .modal-content h2 {
    border-radius: 12px 12px 0 0;
    font-size: 0.88rem;
  }
}
@media (max-width: 600px) {
  #rulesModal .modal-content {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 12px 12px 0 0;
    margin: auto auto 0;
  }
  #rulesModal.modal {
    align-items: flex-end;
  }
  #rulesModal .modal-content h2 {
    border-radius: 12px 12px 0 0;
    font-size: 0.85rem;
    padding: 13px 48px 13px 18px;
  }
  #rulesModal [data-i18n-block] {
    padding: 12px 16px 16px;
  }
  #rulesModal ul li {
    font-size: 0.83rem;
  }
}

/* ══ DARK MODE ════════════════════════════════════════════ */

body.darkmode #rulesModal .modal-content {
  background: #13131a;
  color: #ddd;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.75),
    0 4px 16px rgba(0, 0, 0, 0.5);
  scrollbar-color: rgba(210, 40, 50, 0.24) transparent;
}
body.darkmode #rulesModal .modal-content::-webkit-scrollbar-thumb {
  background: rgba(210, 40, 50, 0.24);
}

body.darkmode #rulesModal .modal-content h2 {
  background: linear-gradient(120deg, #960010 0%, #480006 100%);
}

body.darkmode #rulesModal .modal-content .close {
  color: rgba(255, 255, 255, 0.35);
}
body.darkmode #rulesModal .modal-content .close:hover {
  color: #fff;
}

body.darkmode #rulesModal hr.separator {
  border-top-color: rgba(255, 255, 255, 0.06);
}

body.darkmode #rulesModal strong {
  color: #f05050;
  border-bottom-color: rgba(220, 50, 50, 0.2);
}

body.darkmode #rulesModal ul li strong,
body.darkmode #rulesModal p strong {
  color: #ddd;
}

body.darkmode #rulesModal ul li {
  color: #bbb;
}
body.darkmode #rulesModal ul li::before {
  color: rgba(220, 70, 70, 0.5);
}

body.darkmode #rulesModal p,
body.darkmode #rulesModal #rulesText {
  color: #999;
}

body.darkmode #rulesModal em {
  color: rgba(255, 255, 255, 0.22);
}

/* -----------------------------------------------
   ACCESSIBILITÉ : MOUVEMENT RÉDUIT
----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* `*` seul ne couvre PAS ::before/::after : on les ajoute pour neutraliser
     aussi les animations décoratives portées par les pseudo-éléments
     (flashs P5, flocons Jack Frost, halos…). Le webp animé des modes
     (All-Out Attack, silhouette) reste, car c'est du contenu de jeu. */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #imgHomePage:hover,
  .gamemode-button:hover img,
  .emoji-unit:hover {
    transform: none;
  }
}

/* =====================================================
   MODALE DISCORD — collab PersonaDLE × Le Grimoire du Cœur
   Palette officielle Discord (blurple #5865F2, surfaces #313338/#2b2d31).
   Partagée entre index.html et pages/faq.html (bouton Discord sur les deux).
   ===================================================== */

.discord-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  /* display togglé en flex par le script (none ↔ flex) */
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.discord-modal-content {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  background: #313338;
  color: #dbdee1;
  border-radius: 16px;
  border: 1px solid #232428;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  padding: clamp(20px, 4vw, 34px);
  font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  animation: discordPop 0.22s ease-out;
}

@keyframes discordPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.discord-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: #b5bac1;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.discord-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.discord-modal-head {
  text-align: center;
  margin-bottom: 22px;
}
.discord-modal-logo {
  display: block;
  margin: 0 auto 10px;
  /* Le SVG de base est sombre → invisible sur le fond #313338. On le force en
     blanc (brightness(0) = tout noir, invert(1) = tout blanc). */
  filter: brightness(0) invert(1);
}
.discord-modal-head h2 {
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 800;
  color: #fff;
  font-family: inherit;
}
.discord-modal-sub {
  margin: 0;
  font-size: 0.9rem;
  color: #949ba4;
}

.discord-servers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.discord-server-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 18px;
  background: #2b2d31;
  border: 1px solid #232428;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.discord-server-card:hover {
  transform: translateY(-3px);
  border-color: #5865f2;
  box-shadow: 0 8px 26px rgba(88, 101, 242, 0.35);
}

.discord-server-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: #1e1f22;
  border: 2px solid #232428;
}

.discord-server-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.discord-tag-fr {
  background: rgba(88, 101, 242, 0.18);
  color: #c7ccf8;
}
.discord-tag-intl {
  background: rgba(59, 165, 93, 0.18);
  color: #a8e0bd;
}

.discord-server-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}
.discord-server-desc {
  font-size: 0.83rem;
  line-height: 1.4;
  color: #b5bac1;
  flex: 1;
}

.discord-join-btn {
  margin-top: 6px;
  padding: 9px 22px;
  background: #5865f2;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.discord-server-card:hover .discord-join-btn {
  background: #4752c4;
}

/* Empilé en colonne sur mobile */
@media (max-width: 600px) {
  .discord-servers {
    grid-template-columns: 1fr;
  }
}


/* ═════════════════════════════════════════════════════════════════════════════
   MODE EXPERT — bascule partagée par les modes
   Le bouton et le halo de page sont identiques pour Classique, AOA, Silhouette et
   Music : ils vivent ici plutôt que dupliqués dans les quatre feuilles de mode.
   L'indice propre à chaque mode (paroles, flou, dézoom) reste dans son CSS.
   ═════════════════════════════════════════════════════════════════════════════ */

.expert-toggle-zone {
  display: flex;
  justify-content: center;
  /* Marge basse : le bouton précède directement le bandeau de consigne du mode
     (« Devinez le personnage Persona du jour ! »), les deux se touchaient. */
  margin: 14px auto 22px;
}

.expert-toggle {
  display: inline-block;
  padding: 8px 22px;
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: #1a1a1a;
  border: 2px solid #e63946;
  /* Angles coupés — même vocabulaire graphique que les cartes Persona 5 */
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}

/* Survol : même vocabulaire que les boutons Submit / Abandonner (.link-wrapper)
   — grossissement puis rebond incliné, plutôt qu'un simple changement de couleur.
   On réutilise l'animation tiltBounce déjà définie dans css/global.css au lieu
   d'en écrire une variante. */
.expert-toggle:hover,
.expert-toggle:focus-visible {
  background: #e63946;
  box-shadow: 0 0 22px rgba(230, 57, 70, 0.75);
  animation: tiltBounce 0.15s ease forwards;
}

.expert-toggle:active {
  transform: scale(0.96) rotate(-7deg);
}

/* Les formes décoratives du survol restent un effet, pas une info : coupées si le
   joueur a demandé moins d'animations. */
@media (prefers-reduced-motion: reduce) {
  .expert-toggle:hover,
  .expert-toggle:focus-visible {
    animation: none;
    transform: scale(1.05);
  }
}

/* Déjà en Expert : le bouton devient la sortie de secours, donc il se calme. */
.expert-toggle.active {
  border-color: #7a7a7a;
  color: #cfcfcf;
}

.expert-toggle.active:hover,
.expert-toggle.active:focus-visible {
  background: #333;
  box-shadow: none;
}

/* Bouton Expert verrouillé — condition de déblocage pas encore remplie.
   Le rouge vif du bouton actif devient un gris éteint : le cadenas dit « pas
   encore », pas « cassé ». La condition chiffrée est dans l'infobulle (title) et
   dans aria-label, posés par setupExpertToggle(). */
.expert-toggle.expert-locked {
  color: #8a8a8a;
  background: #141414;
  border-color: #4a4a4a;
  cursor: not-allowed;
}

/* Neutralise le survol du bouton actif (fond rouge, halo, tiltBounce) : un
   verrou qui réagit comme un bouton cliquable laisserait croire qu'il l'est. */
.expert-toggle.expert-locked:hover,
.expert-toggle.expert-locked:focus-visible {
  background: #141414;
  box-shadow: none;
  animation: none;
  transform: none;
}

/* Le focus clavier doit rester visible : le bouton est atteignable au Tab
   (tabindex=0) pour que les lecteurs d'écran lisent la condition. */
.expert-toggle.expert-locked:focus-visible {
  outline: 2px solid #8a8a8a;
  outline-offset: 2px;
}

/* ── Infobulle de déblocage ────────────────────────────────────────────────
   Remplace le title natif (lent, illisible, non stylable). Ancrée sur la zone
   du bouton, qui devient le référentiel de positionnement. */
.expert-toggle-zone {
  position: relative;
}

.expert-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: max-content;
  min-width: 220px;
  /* Ne jamais déborder de l'écran sur mobile, où la zone est proche des bords. */
  max-width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  background: #101010;
  border: 2px solid #e63946;
  /* Mêmes angles coupés que le bouton et les cartes Persona 5. */
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-5px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

/* `:focus` et pas seulement `:focus-visible` : sur mobile il n'y a pas de survol,
   c'est l'appui sur le bouton (tabindex=0) qui doit révéler la condition. */
.expert-toggle.expert-locked:hover + .expert-tooltip,
.expert-toggle.expert-locked:focus + .expert-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.expert-tooltip-title {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e63946;
}

.expert-tooltip-cond {
  font-size: 0.82rem;
  line-height: 1.35;
  color: #f2f2f2;
}

.expert-tooltip-bar {
  display: block;
  height: 6px;
  background: #2b2b2b;
  overflow: hidden;
}

.expert-tooltip-bar > i {
  display: block;
  height: 100%;
  background: #e63946;
  transition: width 0.3s ease;
}

.expert-tooltip-count {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #9a9a9a;
}

@media (prefers-reduced-motion: reduce) {
  .expert-tooltip {
    transition: opacity 0.16s ease, visibility 0.16s;
    transform: translateX(-50%);
  }
  .expert-toggle.expert-locked:hover + .expert-tooltip,
  .expert-toggle.expert-locked:focus + .expert-tooltip {
    transform: translateX(-50%);
  }
  .expert-tooltip-bar > i {
    transition: none;
  }
}

/* Le halo rouge derrière toute la page signale qu'on n'est plus dans le mode
   normal, même après avoir scrollé loin du bouton. */
body.expert-mode {
  background-image: radial-gradient(circle at 50% 0%, rgba(230, 57, 70, 0.16), transparent 60%);
  background-attachment: fixed;
}

/* Bouton Abandonner verrouillé — le marqueur est aria-disabled et non l'attribut
   `disabled`, qui n'a aucun effet sur un <div class="link-wrapper"> (ce qu'est ce
   bouton dans les 6 modes). Sans cette règle, rien ne distinguait visuellement un
   bouton cliquable d'un bouton qui ignore le clic. */
.link-wrapper[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.link-wrapper[aria-disabled="true"]:hover {
  transform: none;
}

.link-wrapper[aria-disabled="true"]:hover .img-wrapper .normal {
  display: block;
}

.link-wrapper[aria-disabled="true"]:hover .img-wrapper .active,
.link-wrapper[aria-disabled="true"]:hover .shape-wrapper {
  display: none;
}

/* =====================================================
   MODALE DE DÉFI — VARIANTE MODE EXPERT
   =====================================================
   Un défi Expert n'est pas le même jeu qu'un défi normal : cible tirée dans un
   autre pool, barème propre, et destinataire restreint. L'écart visuel évite
   qu'on croie lancer un défi ordinaire depuis une page qui, elle, ne l'est pas.

   Volontairement construit en surcharges de la carte de base plutôt qu'en
   second composant : une seule structure à maintenir, et le jour où la carte
   normale évolue, l'Expert suit. */

.challenge-overlay--expert {
  background: rgba(6, 2, 10, 0.88);
  backdrop-filter: blur(4px);
}

.challenge-card--expert {
  /* Les variables sont redéfinies ICI plutôt que les règles filles réécrites :
     tout ce qui lit --challenge-* (lignes d'amis, pied, bouton de fermeture)
     bascule d'un coup, sans duplication. */
  --challenge-bg: #14101c;
  --challenge-border: rgba(178, 106, 255, 0.28);
  --challenge-text: #ede8f7;
  --challenge-text-muted: #a99cc4;

  background: linear-gradient(165deg, #191325 0%, #100b18 55%, #0b0710 100%);
  border-color: rgba(178, 106, 255, 0.45);
  color: var(--challenge-text);
  box-shadow:
    0 0 0 1px rgba(178, 106, 255, 0.12),
    0 10px 48px rgba(0, 0, 0, 0.6),
    0 0 60px -18px rgba(150, 70, 255, 0.55);
}

/* Liseré supérieur : la seule touche « énergie » de la carte, assez discrète
   pour ne pas concurrencer les avatars des amis juste en dessous. */
.challenge-card--expert::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b26aff 35%, #ff4d8d 65%, transparent);
  opacity: 0.9;
}

.challenge-card--expert .challenge-friend-row {
  border-bottom-color: rgba(178, 106, 255, 0.14);
}
.challenge-card--expert .challenge-friend-row:hover {
  background: rgba(178, 106, 255, 0.09);
}
.challenge-card--expert .challenge-friend-row__pseudo {
  color: var(--challenge-text);
}
.challenge-card--expert .challenge-friend-row__code {
  color: var(--challenge-text-muted);
}
.challenge-card--expert .challenge-friend-row__avatar {
  background: #0d0914;
  border-color: rgba(178, 106, 255, 0.35);
}
.challenge-card--expert .challenge-friend-row__send {
  background: linear-gradient(135deg, #7b3fd4, #b26aff);
  border-color: rgba(178, 106, 255, 0.6);
  color: #fff;
}
.challenge-card--expert .challenge-friend-row__send:hover:not(:disabled) {
  background: linear-gradient(135deg, #8f4ae8, #c98cff);
}

/* Texte explicatif : pourquoi la liste est plus courte qu'à l'ordinaire.
   Sans lui, un joueur croirait avoir perdu des amis. */
.challenge-card__note {
  margin: 0;
  padding: 12px 16px 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--challenge-text-muted);
  border-bottom: 1px solid var(--challenge-border);
}
.challenge-card--expert .challenge-card__note {
  color: #c3b4e0;
  background: rgba(178, 106, 255, 0.06);
}

.challenge-card--expert .challenge-card__empty {
  color: var(--challenge-text-muted);
}

/* Le mouvement d'entrée est le seul effet animé : pas de pulsation permanente,
   qui fatiguerait sur une carte qu'on garde ouverte le temps de choisir. */
@media (prefers-reduced-motion: reduce) {
  .challenge-card--expert {
    animation: none;
  }
}