/* Easter egg styles: goo-monster. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ================================================================
   Halloween pack — Goo Monster (cobra_winfrey CodePen LxBNxJ).
   Namespaced .cgoo-*; green goo head + drips + gnashing teeth (no peach/pink wash).
   Unit: 1vmin → 8px; head 400×320; centered hold ~3.2 s.
   ================================================================ */
.cgoo-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;
}

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

.cgoo-wrap *,
.cgoo-wrap *::before,
.cgoo-wrap *::after {
  box-sizing: border-box;
}

.cgoo-head {
  --cgoo: #00ca00;
  --cgoo-dark: #006400;
  --cgoo-light: #97ff97;
  --cgoo-teeth: #eceddc;
  --cgoo-teeth-shade: #dadcba;
  --cgoo-mouth: #b10420;
  --cgoo-eye: #0061aa;
  --cgoo-eye-dark: #002744;
  --cgoo-pupil: #000a11;
  position: relative;
  width: 400px;
  height: 320px;
  margin-top: -48px;
  flex-shrink: 0;
  background: var(--cgoo);
  border-radius: 2400px 2400px 0 0;
  box-shadow: 0 0 0 8px var(--cgoo-dark);
  transform: scale(0.85);
  transition: transform 0.28s ease;
  will-change: transform;
}

.cgoo-wrap.is-in .cgoo-head {
  transform: scale(1);
}

.cgoo-head::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  bottom: -80px;
  left: calc(50% - 72px);
  background: var(--cgoo);
  border-radius: 4000px;
  box-shadow: 0 0 0 8px var(--cgoo-dark);
  z-index: -2;
}

.cgoo-nose {
  position: absolute;
  width: 80px;
  height: 56px;
  left: calc(50% - 34px);
  top: 184px;
}

.cgoo-nose::before,
.cgoo-nose::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background: var(--cgoo-dark);
  border-radius: 3200px 800px 640px 640px / 5600px 800px 640px 640px;
}

.cgoo-nose::after {
  left: auto;
  right: 0;
  border-radius: 800px 3200px 640px 640px / 800px 5600px 640px 640px;
}

.cgoo-eye {
  position: absolute;
  width: 120px;
  height: 120px;
  background: var(--cgoo-teeth);
  border-radius: 4000px;
  left: -20px;
  top: 144px;
  overflow: hidden;
  transform: scaleX(1);
  box-shadow:
    0 0 0 8px var(--cgoo-dark),
    inset -12px 0 0 32px var(--cgoo-teeth),
    inset -12px 0 0 48px var(--cgoo-eye),
    inset -12px 0 0 72px var(--cgoo-pupil);
}

.cgoo-eye::before,
.cgoo-eye::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: inset -16px -20px 0 0 var(--cgoo-teeth-shade);
}

.cgoo-eye.cgoo-eye-right {
  left: auto;
  right: -20px;
  transform: scaleX(-1);
}

.cgoo-mouth {
  position: absolute;
  width: 112px;
  height: 56px;
  bottom: 0;
  left: 152px;
  z-index: 3;
  border-radius: 1600px 1600px 0 0;
  box-shadow: 0 0 0 8px var(--cgoo-dark);
  background-color: var(--cgoo-mouth);
  overflow: hidden;
}

.cgoo-mouth::before,
.cgoo-mouth::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background:
    linear-gradient(135deg, var(--cgoo-teeth) 25%, transparent 25%) -100px 0,
    linear-gradient(225deg, var(--cgoo-teeth) 25%, transparent 25%) -100px 0,
    linear-gradient(315deg, var(--cgoo-teeth) 25%, transparent 25%),
    linear-gradient(45deg, var(--cgoo-teeth) 25%, transparent 25%);
  background-size: 24px 56px;
  animation: cgoo-gnashing1 3s ease-in-out infinite;
}

.cgoo-mouth::after {
  top: auto;
  bottom: 0;
  background-position: 0 24px;
  animation: cgoo-gnashing2 3s ease-in-out infinite;
}

@keyframes cgoo-gnashing1 {
  0% { transform: translateY(-8px); }
  70% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

@keyframes cgoo-gnashing2 {
  0% { transform: translateY(8px); }
  70% { transform: translateY(0); }
  100% { transform: translateY(8px); }
}

.cgoo-goo {
  position: absolute;
  width: 56px;
  height: 160px;
  background: var(--cgoo);
  bottom: -160px;
  left: 0;
  z-index: 1;
  box-shadow:
    0 -8px 0 0 var(--cgoo),
    0 0 0 8px var(--cgoo-dark),
    inset 0 0 0 16px var(--cgoo),
    inset 0 -24px 0 0 var(--cgoo-light);
  border-radius: 0 0 1600px 1600px;
  transform-origin: 50% 0%;
  animation: cgoo-dripping 3s ease-in-out infinite;
}

.cgoo-goo:nth-of-type(1) { animation-delay: -0.5s; }

.cgoo-goo:nth-of-type(2) {
  width: 40px;
  height: 80px;
  left: 64px;
  bottom: -64px;
  animation-delay: -1s;
}

.cgoo-goo:nth-of-type(3) {
  width: 32px;
  height: 120px;
  left: 112px;
  bottom: -120px;
  animation-delay: -1.5s;
}

.cgoo-goo:nth-of-type(4) {
  width: 64px;
  height: 120px;
  left: 272px;
  bottom: -120px;
  animation-delay: -2s;
}

.cgoo-goo:nth-of-type(5) {
  width: 56px;
  height: 176px;
  left: 344.8px;
  bottom: -176px;
  animation-delay: -2.5s;
}

@keyframes cgoo-dripping {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(1.15); }
  100% { transform: scaleY(1); }
}

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