html, body { margin: 0; height: 100%; background: #08090b; overflow: hidden; }
canvas { display: block; cursor: pointer; }

.vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

#hint {
  position: fixed; left: 18px; bottom: 16px; pointer-events: none;
  font: 12px/1 'Courier New', monospace; letter-spacing: 2px;
  color: rgba(245,245,242,0.4); transition: opacity .6s;
}
#hint.hidden { opacity: 0; }

#replay {
  position: fixed; right: 18px; bottom: 16px;
  font: 13px/1 'Courier New', monospace; letter-spacing: 2px;
  color: rgba(245,245,242,0.45); background: none;
  border: 1px solid rgba(245,245,242,0.25); border-radius: 4px;
  padding: 8px 14px; cursor: pointer; transition: color .2s, border-color .2s;
}
#replay:hover { color: #f5f5f2; border-color: rgba(245,245,242,0.7); }

#ig {
  position: fixed; left: 50%; top: 50%; z-index: 6;
  transform: translate(-50%, -50%) scale(0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .5s, transform .5s cubic-bezier(.2,.9,.3,1.3);
}
#ig.show {
  opacity: 1; pointer-events: auto; cursor: pointer;
  transform: translate(-50%, -50%) scale(1);
  animation: igpulse 1.7s ease-in-out .6s infinite;
}
@keyframes igpulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    filter: drop-shadow(0 0 8px rgba(238,42,123,.35)); }
  50%      { transform: translate(-50%, -50%) scale(1.1);  filter: drop-shadow(0 0 24px rgba(238,42,123,.8)); }
}