/* === Curseur personnalisé (normal <-> glitch) === */
/* Définition des variables CSS pour les curseurs */
:root {
  /* Chemins vers nos pointeurs personnalisés.  Les images sont
     placées dans le dossier img/ pour une meilleure organisation. */
  --cursor-normal: url('img/pointer_64.png') 15 8, auto;
  --cursor-glitch: url('img/pointer_glitch_64.png') 15 8, auto;
  /* Curseur rouge pour le mode maléfique */
  --cursor-evil: url('img/pointer_evil_64.png') 15 8, auto;
}

/* Application par défaut du curseur sur tout le document */
html,
body {
  cursor: var(--cursor-normal);
}

/* Curseur glitch : activé lorsque la barre atteint 100 % en mode normal */
body.cursor-glitch {
  cursor: var(--cursor-glitch);
}

/* Curseur evil : activé en mode maléfique */
body.cursor-evil {
  cursor: var(--cursor-evil);
}

/*html, body {  }
/*
 * Main stylesheet for LowRAM.fr.  The design embraces a vintage
 * neon aesthetic: glowing greens and yellows on a deep blue‑black
 * background.  Responsive adjustments ensure that the mascot and
 * status bar remain legible on both desktop and smaller devices.
 */

/* CSS variables for colours and fonts */
:root {
  --neon-green: #00ff88;
  --neon-yellow: #ccff33;
  --dark-bg: #040c12;
  --bubble-bg: #03181f;
  --bubble-border: var(--neon-yellow);
  /* Fonts: Press Start 2P for headings and labels; VT323 for the
     speech bubble (supports accented characters) */
  --font-pixel: 'Press Start 2P', monospace;
  /*--font-bubble: 'VT323', monospace;*/
  --font-bubble: 'Google Sans Code', monospace;
}

/* Reset margins and set the global background */
body {
  margin: 0;
  padding: 0;
  background: var(--dark-bg);
  color: var(--neon-green);
  font-family: var(--font-pixel);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
  /* Custom cursor to match the neon aesthetic */
  
}

/* Site header styling */
.site-header {
  width: 100%;
  padding-top: 2rem;
  text-align: center;
}

.site-title {
  /* Use the same pixel font as the RAM label for a cohesive look */
  font-family: var(--font-pixel);
  /* Slightly smaller to improve readability and reduce overpowering glow */
  font-size: 2.6rem;
  line-height: 1;
  margin: 0;
  /* Updated colour for the title to match the new palette */
  color: rgb(253, 248, 77);
  /* Apply a crisp neon glow using two layers of shadows */
  text-shadow: rgb(255, 255, 255) 0px 0px 2px, rgb(152, 140, 11) 0px 0px 4px;
  letter-spacing: 0.05em;

  /* Empêcher la sélection de texte dans le titre pour éviter
     l’effet bleu lors des clics répétés sur « RAM ». */
  user-select: none;
}

.site-title .highlight {
  color: rgb(29, 177, 0);
  /* Subtle glow for the highlighted RAM word using lighter shadows */
  text-shadow: rgb(255, 255, 255) 0px 0px 2px, rgb(0, 255, 37) 0px 0px 4px;

  /* Indique que le mot RAM est cliquable lorsqu’il sert à
     déclencher le mode maléfique. */
  cursor: inherit;
}

/* Main content area */
.site-main {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 4rem;
  /* Provide perspective for the 3D tilt effect on the mascot */
  perspective: 800px;
}

/* Container for Ramy.  Will be translated relative to the
 * window by script.js to follow the cursor. */
#ramy-container {
  position: relative;
  width: 35vmin;
  max-width: 360px;
  min-width: 180px;
  transition: transform 0.1s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin: 2rem 0;
  user-select: none;
  /* Enable 3D transforms to tilt the mascot based on cursor position */
  transform-style: preserve-3d;
}

#ramy-container img {
  width: 100%;
  height: auto;
  display: block;
  /* Remove the previous drop‑shadow to eliminate the outline around Ramy.  The
     glow effect comes directly from the artwork itself. */
  filter: none;
  pointer-events: none;
}

/* Speech bubble styling */
#speech-bubble {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80vw;
  /* Increase the width for better readability */
  width: 800px;
  padding: 0.8rem 1.2rem;
  background: var(--bubble-bg);
  border: 4px solid var(--bubble-border);
  border-radius: 6px;
  /* Override colours and font for legibility */
  color: rgb(255, 255, 255);
  font-family: var(--font-bubble);
  /* Larger font size for better readability */
  font-size: 2.1rem;
  font-weight: 550;
  line-height: 1.3;
  text-align: center;
  /* Updated neon-inspired text shadow */
  /*text-shadow: 0 0 4px #4f5250, 0 0 8px #d1ff00;*/
  /* Box shadow retains a subtle neon halo */
  box-shadow: 0 0 8px #4f5250, 0 0 16px #d1ff00;
  filter: saturate(1.4);
  z-index: 2;
  pointer-events: none;
}

/* Bouton de partage placé dans le coin inférieur droit de la bulle.
   Le curseur devient cliquable malgré le pointer-events:none de la
   bulle, car l’icône rétablit pointer-events automatiquement. */
#speech-bubble .share-icon {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  font-size: 1.4rem;
  cursor: inherit;
  pointer-events: auto;
  user-select: none;
}
#speech-bubble .share-icon:hover {
  transform: scale(1.1);
}

/* Variantes pour le mode maléfique.  La bulle change de couleur pour un
   fond sombre et des bordures rouge sang.  Le texte est plus clair
   afin de rester lisible.  L’ombre autour de la bulle adopte également
   une teinte rouge. */
#speech-bubble.evil {
  background: #230306;
  border-color: #ff3333;
  color: #ffeeee;
  box-shadow: 0 0 8px #ff3333, 0 0 16px #ff3333;
}
#speech-bubble.evil::after {
  border-top-color: #ff3333;
  filter: drop-shadow(0 0 6px #ff3333);
}

/* Effet de clignotement lent pour le mot “RAM” dans le titre lors du
   passage en mode maléfique.  L’animation alterne entre la couleur
   verte normale et un rouge vif. */
@keyframes blinkRam {
  0%, 50% {
    color: rgb(75, 0, 0);
    text-shadow: #ff3333 0 0 2px, #ff6666 0 0 4px;
  }
  51%, 100% {
    color: #ff0000;
    text-shadow: #ff3333 0 0 4px, #ff6666 0 0 8px;
  }
}

/* Classe appliquée au span.highlight dans le titre lorsque l’on a cliqué
   six fois sur “RAM”.  La durée de l’animation est volontairement
   lente pour rappeler un battement lugubre. */
.blink-ram {
  animation: blinkRam 2.4s infinite;
}

/* Style spécial pour le titre entier en mode maléfique.  La couleur
   passe du jaune à un rouge atténué pour ne pas éclipser le mot
   clignotant “RAM”. */
.evil-title {
  color: #000000;
  text-shadow: 0 0 6px #ff3333, 0 0 12px #ff3333;
}

/* Lorsque le titre est en mode maléfique, le mot en surbrillance
   n’utilise pas la couleur verte par défaut.  La classe blink‑ram
   appliquée sur .highlight gère la transition vers le rouge. */
.evil-title .highlight {
  /* Couleur de base légèrement rouge; l’animation blink-ram prendra le
     relais une fois appliquée */
  color: #ff4444;
  text-shadow: #ff4444 0 0 2px, #ff6666 0 0 4px;
}

#speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--bubble-border);
  filter: drop-shadow(0 0 6px var(--neon-yellow));
}

.hidden {
  display: none;
}

/* RAM indicator container */
#ram-indicator {
  width: 80%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  gap: 0.5rem;
}

/* Bar background */
#ram-bar {
  width: 100%;
  height: 24px;
  background: rgba(0, 0, 0, 0.4);
  border: 3px solid var(--neon-green);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 8px var(--neon-green), 0 0 6px var(--neon-green);
}

/* Bar fill that changes width via JavaScript */
#ram-fill {
  height: 100%;
  width: 50%;
  /* Background colour is set dynamically via JavaScript based on the
     current percentage.  Start with a neutral green. */
  background-color: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green), 0 0 12px var(--neon-green);
  transition: width 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

/* Text associated with the RAM bar */
#ram-info {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-family: var(--font-pixel);
  color: var(--neon-yellow);
  text-shadow: 0 0 4px var(--neon-yellow);
  user-select: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .site-title {
    font-size: 2.2rem;
  }
  #speech-bubble {
    width: 300px;
    font-size: 1.3rem;
  }
  #ramy-container {
    width: 50vmin;
  }
  #ram-info {
    font-size: 0.6rem;
  }
}

@media (min-width: 1200px) {
  #ramy-container {
    max-width: 400px;
  }
  #ram-bar {
    height: 28px;
  }
  #ram-info {
    font-size: 0.9rem;
  }
}

/* Shaking animation for the RAM bar when it reaches 100 %.  The
 * transformation only affects the horizontal axis to simulate a
 * trembling overload. */
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-2px);
  }
  40% {
    transform: translateX(2px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

.shake {
  animation: shake 0.3s infinite linear;
}

/* === Share button next to RAM bar === */
.ram-bar-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.share-btn {
  height: 32px;
  min-width: 48px;
  padding: 0 0.8rem;
  border-radius: 999px; /* rounded pill */
  border: 3px solid var(--neon-green);
  background: rgba(0, 0, 0, 0.35);
  color: var(--neon-green);
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 8px var(--neon-green), 0 0 6px var(--neon-green);
  cursor: inherit;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.share-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: inset 0 0 10px var(--neon-yellow), 0 0 10px var(--neon-yellow);
  color: var(--neon-yellow);
  border-color: var(--neon-yellow);
}

.share-btn:active {
  transform: translateY(0) scale(0.98);
}

body.cursor-evil .share-btn {
  border-color: #ff3333;
  color: #ff6666;
  box-shadow: inset 0 0 8px #ff3333, 0 0 6px #ff3333;
}
body.cursor-evil .share-btn:hover {
  box-shadow: inset 0 0 10px #ff6666, 0 0 10px #ff6666;
  color: #ff9999;
  border-color: #ff6666;
}

/* Make the row stack on small screens */
@media (max-width: 600px) {
  .ram-bar-row {
    flex-direction: row;
  }
  .share-btn {
    height: 28px;
    min-width: 44px;
    font-size: 0.7rem;
  }
}


/* Normalize button appearance and SVG icon size for cross-browser (Safari) */
.share-btn {
  -webkit-appearance: none;
  appearance: none;
}
.share-btn .icon-link {
  width: 18px;
  height: 18px;
  display: block;
}


/* Safari hardening: ensure the share button is visible */
.share-btn {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}