body {
  margin:0;
  background:radial-gradient(circle at top,#1b2a4e,#000);
  overflow:hidden;
  font-family:Arial,sans-serif;
}

#container {
  position:relative;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* WRAPPER */
#chien-wrapper {
  display:inline-flex;
  z-index:2;
}

/* IMAGE */
#chien {
  max-width:90vw;
  max-height:90vh;
  cursor:pointer;
  transition:transform .6s ease;
  --hue:0deg;
  --invert:0;
  filter:hue-rotate(var(--hue)) invert(var(--invert)) saturate(150%);
}

/* CHAOS (sans rectangles) */
.glow { filter: drop-shadow(0 0 40px white); }
.shake { animation:shake .12s infinite; }
.blur { filter: blur(2px); }
.saturate { filter: saturate(300%); }
.shadows {
  filter:
    drop-shadow(10px 0 red)
    drop-shadow(-10px 0 cyan)
    drop-shadow(0 10px lime);
}
.flash { animation:flash .3s infinite; }
.chaos {
  animation:flash .15s infinite, shake .08s infinite;
}

/* UI */
#compteur,#mute {
  position:absolute;
  top:20px;
  background:rgba(0,0,0,.4);
  color:white;
  padding:8px 14px;
  border-radius:12px;
  z-index:10;
}
#compteur { right:20px;font-size:2rem; }
#mute { left:20px;font-size:1.5rem;border:none;cursor:pointer; }

#hint {
  position:absolute;
  bottom:20%;
  font-size:3rem;
  animation:hint 1.5s infinite;
  z-index:5;
  pointer-events:none;
}

/* CANVAS */
#snow { z-index:1; }
#fx { z-index:6; }
canvas {
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* FIN */
#end {
  display:none;
  width:100vw;
  height:100vh;
  background:black;
  color:white;
  font-size:2.5rem;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* ANIMS */
@keyframes shake {
  0%{transform:translate(0,0);}
  50%{transform:translate(4px,-4px);}
  100%{transform:translate(0,0);}
}
@keyframes flash {
  0%{filter:brightness(1);}
  50%{filter:brightness(2);}
  100%{filter:brightness(1);}
}
@keyframes hint {
  0%{transform:translateY(0);opacity:.6;}
  50%{transform:translateY(10px);opacity:1;}
  100%{transform:translateY(0);opacity:.6;}
}
