* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: Impact, 'Arial Black', sans-serif;
}

/* ---------- Le chaos ---------- */
#chaos {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: bg-strobe 0.15s infinite, screen-shake 0.08s infinite;
}

#strobe {
  position: fixed;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  animation: strobe-flash 0.1s infinite;
}

#title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 10;
}

#title .letter {
  display: inline-block;
  font-size: clamp(4rem, 16vw, 14rem);
  font-weight: 900;
  -webkit-text-stroke: 4px #000;
  animation:
    letter-jump 0.12s infinite,
    letter-spin 0.3s infinite,
    letter-color 0.2s infinite,
    letter-grow 0.25s infinite alternate;
  text-shadow:
    5px 5px 0 #f0f,
    -5px -5px 0 #0ff,
    0 0 30px #ff0;
}

#title .space {
  width: 5vw;
}

#subtitle {
  margin-top: 2rem;
  font-size: clamp(1.2rem, 4vw, 3rem);
  color: #fff;
  z-index: 10;
  letter-spacing: 0.3em;
  animation: sub-blink 0.18s infinite, letter-spin 0.5s infinite reverse;
  text-shadow: 3px 3px 0 #f00, -3px -3px 0 #00f;
}

.popup {
  position: fixed;
  z-index: 5;
  font-size: 3rem;
  font-weight: 900;
  pointer-events: none;
  animation: popup-life 0.6s linear forwards;
  text-shadow: 2px 2px 0 #000;
}

@keyframes bg-strobe {
  0%   { background: #f00; }
  20%  { background: #0f0; }
  40%  { background: #00f; }
  60%  { background: #ff0; }
  80%  { background: #f0f; }
  100% { background: #0ff; }
}

@keyframes strobe-flash {
  0%, 49% { background: transparent; }
  50%, 100% { background: #fff; }
}

@keyframes screen-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-12px, 8px) rotate(-1deg); }
  50%  { transform: translate(10px, -10px) rotate(1.5deg); }
  75%  { transform: translate(-8px, -6px) rotate(-0.5deg); }
  100% { transform: translate(12px, 10px) rotate(1deg); }
}

@keyframes letter-jump {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-40px); }
  100% { transform: translateY(15px); }
}

@keyframes letter-spin {
  0%   { rotate: -15deg; }
  50%  { rotate: 15deg; }
  100% { rotate: -15deg; }
}

@keyframes letter-color {
  0%   { color: #ff0; }
  25%  { color: #0ff; }
  50%  { color: #f0f; }
  75%  { color: #fff; }
  100% { color: #0f0; }
}

@keyframes letter-grow {
  from { scale: 0.8; }
  to { scale: 1.4; }
}

@keyframes sub-blink {
  0%, 49% { opacity: 1; color: #fff; }
  50%, 100% { opacity: 0.2; color: #f00; }
}

@keyframes popup-life {
  0%   { opacity: 1; scale: 0.2; rotate: 0deg; }
  100% { opacity: 0; scale: 3; rotate: 360deg; }
}