/* === Infobulle de base === */
#tooltip-box {
  position: fixed;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
  padding: 0.6rem 1rem;
  font-family: "Cinzel", "Garamond", serif;
  font-size: 1rem;
  border-radius: 10px;
}

/* Apparition fluide */
#tooltip-box.show {
  opacity: 1;
  transform: scale(1);
}

/* === STEAMPUNK (mat, cuivré, sobre et texturé) === */
#tooltip-box.steampunk {
  background: radial-gradient(circle at top left, rgba(70, 45, 20, 0.95), rgba(30, 20, 10, 0.9));
  color: #e8d8b8;
  border: 1px solid rgba(140, 100, 60, 0.6);
  box-shadow: inset 0 0 6px rgba(60, 40, 20, 0.8),
              0 2px 6px rgba(0,0,0,0.4);
  text-shadow: 1px 1px 2px rgba(20,10,0,0.6);
}

/* === CRAIE SUR TABLEAU (mat, poudreux, léger grain) === */
#tooltip-box.chalk {
  background: 
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02), transparent 60%),
    linear-gradient(rgba(15, 25, 15, 0.95), rgba(10, 18, 10, 0.95)); /* fond tableau */

  color: #f5f5f5;

  border: 1px solid rgba(255,255,255,0.15); /* effet craie légère */

  box-shadow: 
    inset 0 0 8px rgba(0,0,0,0.6),   /* profondeur tableau */
    0 2px 6px rgba(0,0,0,0.5);

  text-shadow:
    0 0 1px rgba(255,255,255,0.6),   /* effet poudre */
    0 0 2px rgba(255,255,255,0.3);

  backdrop-filter: blur(1px); /* léger effet “poussiéreux” */

  border-radius: 6px;
  
  font-family: "Comic Sans MS", "Chalkboard", cursive;
  letter-spacing: 0.5px;
}

/* === ASTRAL (portails actifs) === */
#tooltip-box.astral {
  background: radial-gradient(
    circle at top left,
    rgba(40, 60, 120, 0.95),
    rgba(15, 20, 45, 0.92)
  );
  color: #e6ebff;
  border: 1px solid rgba(120, 160, 255, 0.55);
  box-shadow:
    inset 0 0 8px rgba(120, 160, 255, 0.25),
    0 0 12px rgba(90, 120, 255, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.45);
  text-shadow:
    0 0 4px rgba(120, 160, 255, 0.5),
    1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* === ASTRAL SILENCIEUX (portails muets) === */
#tooltip-box.astral-silencieux {
  background: radial-gradient(
    circle at top left,
    rgba(90, 90, 95, 0.92),
    rgba(35, 35, 40, 0.9)
  );
  color: #c8c8cc;
  border: 1px solid rgba(160, 160, 170, 0.35);
  box-shadow:
    inset 0 0 6px rgba(160, 160, 170, 0.2),
    0 0 8px rgba(120, 120, 130, 0.25),
    0 4px 10px rgba(0, 0, 0, 0.45);
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.7);
}


/* === ZONE DÉSAFFECTÉE (sobre, inquiétant, administratif) === */
#tooltip-box.zone-danger {
  background: radial-gradient(
    circle at top left,
    rgba(60, 45, 25, 0.95),
    rgba(25, 20, 12, 0.9)
  );
  color: #e2d3b0;
  border: 1px solid rgba(170, 130, 80, 0.6);
  box-shadow: inset 0 0 6px rgba(50, 35, 20, 0.8),
              0 2px 6px rgba(0,0,0,0.4);
  text-shadow: 1px 1px 2px rgba(15, 10, 0, 0.6);
}


/* === COURRIER, MISSIVE === */
#tooltip-box.missive {
  background-color: #f7f2e8; /* papier clair */
  color: #3a2f25;            /* encre brun doux */

  border: 1px solid #cbb89d;
  border-radius: 6px;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25);

  font-family: "Cormorant Garamond", "Libre Baskerville", serif;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-top: 8px;
  font-style: italic;

  padding: 12px 14px;

  text-shadow: none;

  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: -4px;
}

/* === PANNEAU BOIS VIEUX, TEXTURÉ === */
#tooltip-box.wood {
  /* Fond bois texturé */
  background: 
    linear-gradient(135deg, #a47142 0%, #7b4f2e 25%, #a47142 50%, #7b4f2e 75%, #a47142 100%),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.05) 0px,
      rgba(0,0,0,0.05) 1px,
      transparent 1px,
      transparent 3px
    );
  
  background-blend-mode: multiply;

  color: #f8f0d4; /* texte crème */
  border: 2px solid rgba(80, 50, 20, 0.8); /* bord sombre */
  border-radius: 6px;
  
  /* Ombres pour relief bois */
  box-shadow: 
    inset 0 0 8px rgba(0,0,0,0.4),  /* relief interne pour grain */
    0 5px 12px rgba(0,0,0,0.35);   /* ombre portée */
  
  text-shadow: 1px 1px 2px rgba(50, 30, 10, 0.7); /* texte gravé */
  
  padding: 0.8rem 1.2rem;
  font-family: 'Garamond', 'Palatino Linotype', serif;
  font-size: 0.88rem;
  
  /* Optionnel : légère rotation des lignes pour simuler les veines du bois */
  line-height: 1.6;
}


/* === MAGIQUE BLEU === */
@keyframes pulseMagicBlue {
  0% { box-shadow: 0 0 10px rgba(100, 200, 255, 0.5); }
  50% { box-shadow: 0 0 25px rgba(150, 220, 255, 0.9); }
  100% { box-shadow: 0 0 10px rgba(100, 200, 255, 0.5); }
}

#tooltip-box.portail-bleu {
  background: radial-gradient(circle at top left, #b0e0ff 0%, #0090ff 100%);
  border: 2px solid #0080cc;
  color: #001a33;
  animation: pulseMagicBlue 2s ease-in-out infinite;
}

/* === MAGIQUE ROUGE === */
@keyframes pulseMagicRed {
  0% { box-shadow: 0 0 10px rgba(255,100,100,0.5); }
  50% { box-shadow: 0 0 25px rgba(255,150,150,0.9); }
  100% { box-shadow: 0 0 10px rgba(255,100,100,0.5); }
}

#tooltip-box.portail-rouge {
  background: radial-gradient(circle at top left, #ffb0b0 0%, #ff0000 100%);
  border: 2px solid #cc0000;
  color: #330000;
  animation: pulseMagicRed 2s ease-in-out infinite;
}

/* === MAGIQUE VERT === */
@keyframes pulseMagicGreen {
  0% { box-shadow: 0 0 10px rgba(100,255,150,0.5); }
  50% { box-shadow: 0 0 25px rgba(150,255,200,0.9); }
  100% { box-shadow: 0 0 10px rgba(100,255,150,0.5); }
}

#tooltip-box.portail-vert {
  background: radial-gradient(circle at top left, #b0ffb0 0%, #00cc00 100%);
  border: 2px solid #009900;
  color: #003300;
  animation: pulseMagicGreen 2s ease-in-out infinite;
}

/* === MAGIQUE JAUNE === */
@keyframes pulseMagicYellow {
  0% { box-shadow: 0 0 10px rgba(255,255,100,0.5); }
  50% { box-shadow: 0 0 25px rgba(255,255,150,0.9); }
  100% { box-shadow: 0 0 10px rgba(255,255,100,0.5); }
}

#tooltip-box.portail-jaune {
  background: radial-gradient(circle at top left, #fff8b0 0%, #ffdd00 100%);
  border: 2px solid #ccaa00;
  color: #332a00;
  animation: pulseMagicYellow 2s ease-in-out infinite;
}

/* === MAGIQUE VIOLET === */
@keyframes pulseMagicViolet {
  0% { box-shadow: 0 0 10px rgba(180,100,255,0.5); }
  50% { box-shadow: 0 0 25px rgba(220,150,255,0.9); }
  100% { box-shadow: 0 0 10px rgba(180,100,255,0.5); }
}

#tooltip-box.portail-violet {
  background: radial-gradient(circle at top left, #e5d4ff 0%, #a17fff 100%);
  border: 2px solid #8a52c0;
  color: #2e1b3b;
  animation: pulseMagicViolet 2s ease-in-out infinite;
}

/* === ÉTINCELLES (neutre, magique, universel) === */
@keyframes sparkle {
  0%   { box-shadow: 0 0 8px rgba(255,215,120,0.4); }
  50%  { box-shadow: 0 0 18px rgba(255,235,180,0.8); }
  100% { box-shadow: 0 0 8px rgba(255,215,120,0.4); }
}

#tooltip-box.etincelles {
  background: radial-gradient(
    circle at top left,
    rgba(40, 30, 15, 0.95),
    rgba(10, 8, 5, 0.95)
  );
  color: #f5e6b8;
  border: 1px solid rgba(255, 215, 120, 0.6);
  text-shadow: 0 0 4px rgba(255, 220, 150, 0.6);
  animation: sparkle 2.2s ease-in-out infinite;
}