:root {
  /* guardian Design System - Change these to update the theme everywhere */
  --guardian-font: 'Courier New', monospace;
  --guardian-text: #ffffff;
  --guardian-primary: #7b6fb8;
  --guardian-accent: #d2caff;
  --guardian-bg-dark: rgba(40, 35, 50, 0.75);
  --guardian-bg-glow: rgba(123, 111, 184, 0.25);
  --comic-stroke: #000000;

  /* Effects & Transitions */
  --guardian-shadow: 0 0 15px rgba(123, 111, 184, 0.25), 0 0 30px rgba(123, 111, 184, 0.15);
  --guardian-glow-inset: inset 0 0 30px rgba(123, 111, 184, 0.15), inset 0 0 0 2px rgba(0, 0, 0, 0.3);
  --guardian-transition-fast: opacity 0.2s ease;
  --guardian-transition-slow: opacity 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease;
  --guardian-blur: blur(8px);

  /* Layer Management (Z-Index) */
  --z-guardian-basest: 1;
  --z-guardian-hands: 5;
  --z-guardian-tongue: 6;
  --z-guardian-timer: 100035;
  --z-guardian-overlay: 100010;
  --z-guardian-container: 100020;
  --z-guardian-bubble: 100040;
}

/* Removed overflow: hidden from body to allow scrolling when integrated in other pages */
/* body {
      margin: 0;
      overflow: hidden;
      background-color: #1a1a2e;
      background-image: none;
    } */
#digitalGuardian-container {
  position: fixed;
  left: 24px;
  bottom: 0px;
  z-index: var(--z-guardian-container);
  width: 100px;
  height: 100px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* Glow animation is now in container-glow keyframe */
  transition: var(--guardian-transition-slow);
}

/* Prevent selection on all images inside guardian container */
#digitalGuardian-container img {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  pointer-events: none;
}

#digitalGuardian-container:hover {
  filter: drop-shadow(0 0 12px rgba(90, 85, 150, 0.6)) !important;
}

#digitalGuardian {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#digitalGuardian-hands {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-guardian-hands);
  will-change: transform;
  animation: guardian-opacity-pulse 3.5s ease-in-out infinite;
}

#digitalGuardian-hands-bone {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  will-change: transform;
  /* No opacity pulse */
}

#digitalGuardian {
  z-index: 1;
  cursor: pointer;
  animation: guardian-opacity-pulse 3.5s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

@keyframes guardian-opacity-pulse {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 0.5;
  }
}

@keyframes guardian-glow {
  0% {
    filter: drop-shadow(0 0 4px rgba(124, 143, 255, 0.25));
  }

  50% {
    filter: drop-shadow(0 0 8px rgba(124, 143, 255, 0.5));
  }

  100% {
    filter: drop-shadow(0 0 4px rgba(124, 143, 255, 0.25));
  }
}

#digitalGuardian-skull {
  animation: guardian-glow 3.5s ease-in-out infinite;
  will-change: transform, filter;
  pointer-events: auto; /* Indispensable pour capter les clics ! */
  cursor: pointer;
}

/* Zone d'interaction - Nettoyée de l'aide visuelle */
.digital-guardian-container {
  pointer-events: auto;
  cursor: pointer;
  will-change: transform, left, top;
}

/* Animated glow for the entire container - synchronized with body opacity */
#digitalGuardian-container {
  animation: container-glow 3.5s ease-in-out infinite;
}

@keyframes container-glow {
  0% {
    filter: drop-shadow(0 0 4px rgba(124, 143, 255, 0.2));
  }

  50% {
    filter: drop-shadow(0 0 8px rgba(124, 143, 255, 0.45));
  }

  100% {
    filter: drop-shadow(0 0 4px rgba(124, 143, 255, 0.2));
  }
}

#digitalGuardian-eyes,
.digital-pupil {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.digital-pupil {
  z-index: 15;
  object-fit: contain;
  /* La taille est gérée dynamiquement en JS pour respecter l'asymétrie */
}

/* Les formes sont désormais gérées par des fichiers images distincts */
.pupil-none {
  display: none !important;
}

#digitalGuardian-eyes-wrapper {
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

#digitalGuardian-mouth {
  pointer-events: none;
}

@media (max-width: 600px) {
  #digitalGuardian-container {
    left: 8px;
    bottom: 8px;
    width: 70px;
    height: 70px;
  }

  #digitalGuardian,
  #digitalGuardian-skull,
  #digitalGuardian-eyes,
  #digitalGuardian-mouth,
  #digitalGuardian {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* Le corps ne doit pas bloquer les clics sur le crâne ! */
  -webkit-user-drag: none;
}
}

#digitalGuardian-timer {
  z-index: var(--z-guardian-timer);
}

#digitalGuardian-tongue {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
  z-index: var(--z-guardian-tongue);
  pointer-events: none;
  display: none;
  opacity: 0;
}

@keyframes tongue-bounce {
  0% {
    transform: scaleY(0) translateY(0); /* Alignement pur sur le pivot */
  }

  60% {
    transform: scaleY(1) translateY(0px);
  }

  100% {
    transform: scaleY(1) translateY(0px);
  }
}

@keyframes tongue-retract {
  0% {
    transform: scaleY(1) translateY(0px);
  }

  60% {
    transform: scaleY(1) translateY(0px);
  }

  100% {
    transform: scaleY(0) translateY(20px);
  }
}

.tongue-active {
  animation: tongue-bounce 0.7s cubic-bezier(.7,1.7,.5,1) forwards !important;
}

.tongue-retracting {
  animation: tongue-retract 0.3s cubic-bezier(0, 0, 0, 0) forwards !important;
}

.catchme-text {
  font-size: 18px;
  font-weight: bold;
}

/* Add after existing keyframes in <style> */
@keyframes guardian-rock {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-7deg);
  }

  25% {
    transform: rotate(10deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(10deg);
  }

  75% {
    transform: rotate(-7deg);
  }

  90% {
    transform: rotate(4deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

#digitalGuardian-container.rocking {
  animation: guardian-rock 1.2s ease-in-out 1;
}

#digitalGuardian-jaw {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* transition: transform 0.18s cubic-bezier(.7,1.7,.5,1); */
  will-change: transform;
}

#digitalGuardian,
#digitalGuardian-skull,
#digitalGuardian-head-group,
#digitalGuardian-eyes-wrapper,
#digitalGuardian-eyes,
.digital-pupil,
#digitalGuardian-mouth,
#digitalGuardian-hands,
#digitalGuardian-hands-bone,
#digitalGuardian-tongue,
#digitalGuardian-jaw {
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* v2.0: Transform transitions removed for instant flip performance */
/* #digitalGuardian, #digitalGuardian-skull, #digitalGuardian-eyes-wrapper transitions removed */
#digitalGuardian-mouth,
#digitalGuardian-jaw {
  /* transition: transform 0.18s cubic-bezier(.7,1.7,.5,1); */
  will-change: transform;
}

/* v2.0 Performance optimizations */
#digitalGuardian-head-group,
#digitalGuardian-eyes-wrapper {
  will-change: transform;
}

/* v2.0 Enhanced speech bubble animations - Digital/Tech style */
/* Common styles for all digital bubbles - Inspired by coreSystem modals */
.digital-bubble {
  position: fixed;
  width: auto;
  min-width: 120px;
  max-width: 500px;
  display: inline-block;
  border: 2px solid var(--guardian-primary);
  border-radius: 10px;
  box-shadow:
    var(--guardian-shadow),
    var(--guardian-glow-inset);
  padding: 16px 18px 14px 18px;
  font-family: var(--guardian-font);
  font-size: 16px;
  color: var(--guardian-text);
  z-index: var(--z-guardian-bubble);
  overflow: visible;
  transition: var(--guardian-transition-slow);
  opacity: 0;
  visibility: hidden;
  /* Allow clicks to pass through when hidden, but allow interaction when visible */
  pointer-events: none;
  /* Background with scanline effect - simple and lightweight */
  background: var(--guardian-bg-dark);
  border: 1px solid var(--guardian-primary);
  backdrop-filter: var(--guardian-blur);
  -webkit-backdrop-filter: var(--guardian-blur);
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px);
  animation: hologramPulse 3.5s ease-in-out infinite, crtFlicker 0.15s infinite;
}

@keyframes hologramPulse {

  0%,
  100% {
    box-shadow:
      0 0 15px var(--guardian-bg-glow),
      0 0 30px rgba(0, 0, 0, 0.15),
      inset 0 0 30px var(--guardian-bg-glow),
      inset 0 0 0 2px rgba(0, 0, 0, 0.25);
    /* border-color removed to keep consistency with pointer tail */
  }

  50% {
    box-shadow:
      0 0 20px var(--guardian-bg-glow),
      0 0 40px rgba(0, 0, 0, 0.2),
      inset 0 0 40px var(--guardian-bg-glow),
      inset 0 0 0 2px rgba(0, 0, 0, 0.25);
    /* border-color removed to avoid transition to light lilac */
  }
}

@keyframes crtFlicker {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.98;
  }
}

/* Show animation when bubble is displayed - handled by JavaScript */
.digital-bubble.showing {
  opacity: 1 !important;
  visibility: visible !important;
  /* Transform is handled entirely by JavaScript to allow breathing animation */
  /* Enable pointer events when visible so buttons are clickable */
  pointer-events: auto !important;
}

/* Hide animation when bubble is hidden */
.digital-bubble.hiding {
  opacity: 0 !important;
  visibility: hidden !important;
  /* Transform is handled entirely by JavaScript */
  /* Disable pointer events when hiding so clicks pass through */
  pointer-events: none !important;
}

/* Speech bubble pointer (crochet) pointing to the character from bottom - default: right side (points left) */
.digital-bubble::before {
  content: '';
  position: absolute;
  left: -12px;
  bottom: 30px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid var(--guardian-bg-dark);
  filter: drop-shadow(-2px 0 4px var(--guardian-bg-glow));
  z-index: -1;
}

/* Inner pointer border to match bubble border - default: right side (points left) */
.digital-bubble::after {
  content: '';
  position: absolute;
  left: -14px;
  bottom: 30px;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-right: 13px solid var(--guardian-primary);
  z-index: -2;
}

/* When bubble is on left side, pointer should be on right side pointing right */
.digital-bubble.bubble-left::before {
  left: auto;
  right: -12px;
  border-right: none;
  border-left: 12px solid var(--guardian-bg-dark);
  filter: drop-shadow(2px 0 4px var(--guardian-bg-glow));
}

.digital-bubble.bubble-left::after {
  left: auto;
  right: -14px;
  border-right: none;
  border-left: 13px solid var(--guardian-primary);
}

.digital-bubble:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 40px var(--guardian-bg-glow),
    0 0 80px rgba(0, 0, 0, 0.2),
    inset 0 0 40px var(--guardian-bg-glow),
    inset 0 0 0 2px rgba(0, 0, 0, 0.25);
  border-color: var(--guardian-primary);
  /* Use primary instead of accent to avoid white look */
}

/* Name label style for all bubbles */
.digitalGuardianNameLabel {
  /* display is controlled by JavaScript, not CSS */
  position: absolute;
  left: 0;
  top: -13px;
  font-family: var(--guardian-font);
  font-size: 17px;
  font-weight: 900;
  color: var(--guardian-accent);
  pointer-events: none;
  user-select: none;
  min-width: 120px;
  text-align: left;
  box-sizing: border-box;
  text-shadow: 0 0 10px rgba(210, 202, 255, 0.8), 0 0 20px rgba(123, 111, 184, 0.6);
}

/* Digital text style */
.digital-text {
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--guardian-text);
  text-shadow: 0 0 6px rgba(123, 111, 184, 0.6), 0 0 12px rgba(123, 111, 184, 0.3);
  position: relative;
  z-index: 1;
}

.digital-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
  color: var(--guardian-accent);
  text-shadow: 0 0 6px rgba(210, 202, 255, 0.8), 0 0 12px rgba(210, 202, 255, 0.4);
  position: relative;
  z-index: 1;
}

/* Digital button style */
.digital-button {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--guardian-primary);
  background: var(--guardian-bg-glow);
  color: var(--guardian-text);
  cursor: pointer;
  font-family: var(--guardian-font);
  font-size: 14px;
  text-shadow: 0 0 4px rgba(123, 111, 184, 0.6), 0 0 8px rgba(123, 111, 184, 0.3);
  transition: var(--guardian-transition-fast);
  /* opacity and visibility inherit from parent bubble, no separate transition */
}

.digital-button:hover {
  transform: translateY(-2px);
  background: rgba(145, 134, 200, 0.4) !important;
  box-shadow: 0 0 10px rgba(145, 134, 200, 0.4), inset 0 0 4px rgba(145, 134, 200, 0.15);
  border-color: #b4a8ff !important;
}

.digital-button:active {
  transform: translateY(0);
  background: rgba(123, 111, 184, 0.35) !important;
}

/* Legacy support for existing IDs */
#speech-bubble {
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

#speech-bubble:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 40px rgba(123, 111, 184, 0.6),
    0 0 80px rgba(123, 111, 184, 0.35),
    inset 0 0 40px rgba(123, 111, 184, 0.2),
    inset 0 0 0 2px rgba(0, 0, 0, 0.3);
  border-color: rgba(123, 111, 184, 0.9);
}

/* Digital style for text inside bubble */
#speech-bubble #speech-text {
  color: var(--guardian-text);
  text-shadow: 0 0 6px rgba(123, 111, 184, 0.6), 0 0 12px rgba(123, 111, 184, 0.3);
  letter-spacing: 0.5px;
  white-space: pre-wrap;
}

/* Style placeholder for dark background in chat input */
#ask-menu input::placeholder,
#ask-menu input::-webkit-input-placeholder,
#ask-menu input::-moz-placeholder {
  color: rgba(197, 212, 224, 0.5) !important;
  opacity: 1;
}

/* v2.0 Smooth button transitions - Digital style */
#speech-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: auto;
  max-width: 100%;
}

#speech-options button {
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  /* opacity and visibility inherit from parent bubble, no separate transition */
}

#speech-options button:hover {
  transform: translateY(-2px);
  background: rgba(123, 111, 184, 0.4) !important;
  box-shadow: 0 0 12px rgba(123, 111, 184, 0.6), inset 0 0 8px rgba(123, 111, 184, 0.2);
  border-color: var(--guardian-accent) !important;
}

#speech-options button:active {
  transform: translateY(0);
  background: rgba(123, 111, 184, 0.35) !important;
}



.digital-button-secondary {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(160, 160, 180, 0.6) !important;
  background: rgba(100, 100, 110, 0.15) !important;
  color: #ffffff !important;
  cursor: pointer;
  font-family: var(--guardian-font);
  font-size: 14px;
  text-shadow: 0 0 4px rgba(160, 160, 170, 0.4), 0 0 8px rgba(160, 160, 170, 0.2);
  transition: var(--guardian-transition-fast);
}

.digital-button-secondary:hover {
  transform: translateY(-2px);
  background: rgba(150, 150, 160, 0.3) !important;
  box-shadow: 0 0 10px rgba(150, 150, 160, 0.3), inset 0 0 4px rgba(150, 150, 160, 0.05) !important;
  border-color: rgba(230, 230, 255, 0.8) !important;
  color: #ffffff !important;
}

.digital-button-secondary:active {
  transform: translateY(0);
  background: rgba(100, 100, 110, 0.25) !important;
}

/* Customization Form Styles */
.cust-form-label {
  font-size: 14px;
  color: #ffffff !important;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

.cust-form-input {
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(123, 111, 184, 0.5);
  background: rgba(123, 111, 184, 0.15);
  color: #ffffff !important;
  font-family: 'Courier New', monospace;
}

.cust-form-input:focus {
  outline: none;
  border-color: var(--guardian-accent);
  box-shadow: 0 0 8px rgba(155, 140, 255, 0.3);
}

/* --- Comic Bubble Style (Theme) --- */
.digital-bubble.style-comic {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 2px solid var(--comic-stroke) !important;
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2) !important;
  color: var(--comic-stroke) !important;
}

.digital-bubble.style-comic .digitalGuardianNameLabel {
  background: var(--comic-stroke) !important;
  color: #ffffff !important;
  border: 2px solid var(--comic-stroke) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.digital-bubble.style-comic .digital-title,
.digital-bubble.style-comic .digital-text,
.digital-bubble.style-comic #speech-text,
.digital-bubble.style-comic .cust-form-label,
.digital-bubble.style-comic #ask-text,
.digital-bubble.style-comic .answer-text {
  color: var(--comic-stroke) !important;
  text-shadow: none !important;
}

.digital-bubble.style-comic .digital-button {
  background: var(--comic-stroke) !important;
  color: #ffffff !important;
  border: 2px solid var(--comic-stroke) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.digital-bubble.style-comic .digital-button:hover {
  background: #333333 !important;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.digital-bubble.style-comic .digital-button-secondary {
  background: #f0f0f0 !important;
  color: var(--comic-stroke) !important;
  border: 1px solid var(--comic-stroke) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.digital-bubble.style-comic .digital-button-secondary:hover {
  background: #e0e0e0 !important;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.digital-bubble.style-comic .cust-form-input,
.digital-bubble.style-comic select.cust-form-input {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--comic-stroke) !important;
  border: 1px solid var(--comic-stroke) !important;
}

/* Comic Theme Pointer (Tail) Fixes */
.digital-bubble.style-comic::before {
  border-right-color: rgba(255, 255, 255, 0.75) !important;
  border-left-color: rgba(255, 255, 255, 0.75) !important;
  filter: none !important;
}

.digital-bubble.style-comic::after {
  border-right-color: var(--comic-stroke) !important;
  border-left-color: var(--comic-stroke) !important;
  filter: none !important;
}

.digital-bubble.style-comic.bubble-left::before {
  border-left-color: rgba(255, 255, 255, 0.75) !important;
  border-right-color: transparent !important;
}

.digital-bubble.style-comic.bubble-left::after {
  border-left-color: var(--comic-stroke) !important;
  border-right-color: transparent !important;
}

/* --- BOUTONS DE TAILLE (P M G) --- */
.cust-size-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #5a4b8b;
    background: #1d1a34;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.cust-size-btn:hover {
    border-color: #7b6fb8;
    background: #2a264a;
    transform: scale(1.1);
}

.cust-size-btn.active {
    background: #7b6fb8;
    border-color: #b0b0ff;
    box-shadow: 0 0 8px rgba(176, 176, 255, 0.5);
    transform: scale(1.2);
}

digital-bubble.style-comic.bubble-left::after {
  border-left-color: var(--comic-stroke) !important;
  border-right-color: transparent !important;
}

/* --- RAIN CLOUD CSS (Backported) --- */
/* ... existing rain cloud styles if any ... */

/* --- GAME FOCUS OVERLAY --- */
.specter-game-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 5, 20, 0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: var(--z-guardian-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: all; /* Bloque les clics sur le fond */
  
  /* Scanlines subtiles */
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.05) 2px,
    rgba(255, 255, 255, 0.05) 4px
  );
}

.specter-game-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Verrouillage du scroll */
body.specter-game-locked {
  overflow: hidden !important;
  user-select: none;
}

/* Fin du flash de dégâts */
.digital-rain-cloud {
  position: absolute;
  width: 80px;
  height: 25px;
  background: #4a4a6e;
  border-radius: 50px;
  z-index: 20;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(123, 111, 184, 0.6));
  will-change: transform;
}

.digital-rain-cloud::after, 
.digital-rain-cloud::before {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.digital-rain-cloud::after {
  width: 35px;
  height: 35px;
  top: -15px;
  left: 10px;
}

.digital-rain-cloud::before {
  width: 45px;
  height: 45px;
  top: -25px;
  left: 25px;
}