/* Easter egg styles: sleepy-monster. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ================================================================
   Halloween pack — Sleepy Monster head (elenatorro CodePen BWzPZR).
   Namespaced .csleepy-*; head only (no purple page wash). Centered hold + closeEyes blink.
   ================================================================ */
.csleepy-wrap {
  position: fixed;
  inset: 0;
  z-index: 8100;
  pointer-events: none;
  overflow: visible;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.csleepy-wrap.is-in {
  opacity: 1;
}

.csleepy {
  width: 200px;
  height: 200px;
  background-color: #731fbd;
  border-radius: 50% 50% 10% 10%;
  position: relative;
  margin: 0;
  flex-shrink: 0;
  /* Match Goo Monster ~400px footprint (was scale 0.85→1) */
  transform: scale(1.7);
  transition: transform 0.28s ease;
  will-change: transform;
}

.csleepy-wrap.is-in .csleepy {
  transform: scale(2);
}

.csleepy-horn {
  width: 30px;
  height: 30px;
  background-color: #00dc24;
  position: absolute;
  border-radius: 0 0 50% 50%;
  top: 20px;
  box-shadow: 0 5px 0 #451274;
  background-size: 10px;
  background-image: linear-gradient(0deg, #00d022 5px, transparent 0);
  background-repeat: repeat;
}

.csleepy-horn.csleepy-horn-left {
  left: 20px;
  transform: rotate(-45deg);
  z-index: 1;
}

.csleepy-horn.csleepy-horn-left::before {
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  border-left: 30px solid #00d022;
  border-radius: 100% 0 0 0;
  bottom: 30px;
}

.csleepy-horn.csleepy-horn-right {
  right: 20px;
  transform: rotate(45deg);
}

.csleepy-horn.csleepy-horn-right::before {
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  border-left: 30px solid #00d022;
  border-radius: 0 0 0 100%;
  bottom: 30px;
  right: 0;
  transform: rotate(180deg);
}

.csleepy-eyes {
  display: flex;
  justify-content: center;
  padding: 60px 0 10px 0;
}

.csleepy-eye {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: yellow;
  margin: 0 15px;
  position: relative;
  border-bottom: 10px solid #5c1997;
}

.csleepy-eye.csleepy-eye-medium::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 25px;
  border-radius: 100px 100px 0 0;
  background-color: #511686;
  top: 0;
  left: 0;
  animation: csleepy-closeEyes 3s infinite;
}

.csleepy-eye::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  top: 20px;
  left: 20px;
}

.csleepy-mouth {
  background-color: #340e57;
  width: 150px;
  height: 50px;
  margin: 0 auto;
  border-radius: 25% 25% 50% 50%;
  position: relative;
}

.csleepy-mouth::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 20px;
  background-color: red;
  bottom: -1px;
  border-radius: inherit;
  left: 35px;
}

.csleepy-mouth::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 50px;
  background-color: transparent;
  background-size: 30px 100%;
  background-image:
    linear-gradient(45deg, yellow 10px, transparent 0),
    linear-gradient(-45deg, yellow 10px, transparent 0),
    linear-gradient(135deg, yellow 10px, transparent 0),
    linear-gradient(-135deg, yellow 10px, transparent 0);
  background-repeat: repeat;
  border-radius: inherit;
}

@keyframes csleepy-closeEyes {
  0% { height: 25px; }
  5% { height: 40px; }
  7% { height: 25px; }
  9% { height: 40px; }
  11% { height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .csleepy-wrap { display: none; }
}