/* Easter egg styles: underwear-monster. Moved verbatim out of static/app.css (egg rebuild); linked right after app.css in index.html. */
/* ================================================================
   Halloween pack — Underwear Monster (guuslieben CodePen yYEEGg).
   Namespaced .chmon-*; transparent wrap (no #111 wash). Eye/feet anim.
   Corners: bl / br (upright) · tl / tr (rotate 180° from top). JS peeks.
   ================================================================ */
.chmon-wrap {
  position: fixed;
  z-index: 8100;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
  width: 160px;
  height: 280px;
  --chmon-scale: 1.35; /* original peek size (2.7 clipped in wrap) */
}

/* Left inset set in JS (past .shell sidebar); 36px fallback when side-hidden / narrow. */
.chmon-wrap--bl { left: 36px; bottom: 0; }

.chmon-wrap--br { right: 36px; bottom: 0; }

.chmon-wrap--tl { left: 36px; top: 0; }

.chmon-wrap--tr { right: 36px; top: 0; }

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

.chmon {
  position: absolute;
  width: 100px;
  height: 190px;
  will-change: transform;
}

.chmon-flip {
  position: relative;
  width: 100%;
  height: 100%;
}

.chmon-wrap--bl .chmon {
  left: 0; bottom: 0;
  transform-origin: bottom left;
}

.chmon-wrap--br .chmon {
  right: 0; bottom: 0; left: auto;
  transform-origin: bottom right;
}

.chmon-wrap--tl .chmon {
  left: 0; top: 0; bottom: auto;
  transform-origin: top left;
}

.chmon-wrap--tr .chmon {
  right: 0; top: 0; left: auto; bottom: auto;
  transform-origin: top right;
}

/* BR: mirror in-place (JS scaleX used to flip outside the overflow wrap). */
.chmon-wrap--br .chmon-flip {
  transform: scaleX(-1);
  transform-origin: center center;
}

/* Top corners: hang upside-down (180°) from the ceiling */
.chmon-wrap--tl .chmon-flip {
  transform: rotate(180deg);
  transform-origin: center center;
}

.chmon-wrap--tr .chmon-flip {
  transform: rotate(180deg) scaleX(-1);
  transform-origin: center center;
}

.chmon-horns {
  position: absolute;
  z-index: 1;
  top: -28px;
  left: 0;
  width: 88px;
  height: 77px;
  border-radius: 45%;
  background-color: transparent;
  box-shadow: 0 -18px 0 #8A0F0F inset;
}

.chmon-head {
  position: relative;
  z-index: 2;
  top: 7px;
  left: 11px;
  width: 65px;
  height: 59px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: #C22828;
}

.chmon-head::after {
  position: absolute;
  top: 4px;
  left: 29px;
  display: block;
  width: 4px;
  height: 4px;
  content: '';
  border-radius: 50%;
  background-color: #3C0303;
}

.chmon-head::before {
  position: absolute;
  top: 9px;
  left: 23px;
  display: block;
  width: 6px;
  height: 6px;
  content: '';
  border-radius: 50%;
  background-color: #3C0303;
  box-shadow: 10px 2px 0 #3C0303;
}

.chmon-eye {
  position: absolute;
  z-index: 2;
  top: 21px;
  left: 21px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
}

.chmon-eye::before {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  display: block;
  width: 8px;
  height: 8px;
  content: '';
  border-radius: 50%;
  background-color: #3C0303;
  animation-name: chmon-moveEye;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.2s;
  animation-iteration-count: infinite;
}

.chmon-eye::after {
  position: absolute;
  left: -8px;
  display: block;
  width: 38px;
  height: 8px;
  content: '';
  border-radius: 55%;
  background-color: transparent;
  box-shadow: 0 3px 0 #3C0303 inset;
}

.chmon-teeth {
  position: absolute;
  bottom: 0;
  left: 18px;
  width: 42px;
  height: 10px;
}

.chmon-teeth::before {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  display: block;
  width: 8px;
  height: 8px;
  content: '';
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: white;
}

.chmon-teeth::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: block;
  width: 8px;
  height: 8px;
  content: '';
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: white;
}

.chmon-body {
  position: absolute;
  top: 66px;
  left: 11px;
  overflow: hidden;
  width: 80px;
  height: 95px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: #C22828;
}

.chmon-body::after {
  position: absolute;
  top: 23px;
  right: 15px;
  display: block;
  width: 4px;
  height: 4px;
  content: '';
  border-radius: 50%;
  background-color: #3C0303;
}

.chmon-body::before {
  position: absolute;
  top: 13px;
  right: 21px;
  display: block;
  width: 6px;
  height: 6px;
  content: '';
  border-radius: 50%;
  background-color: #3C0303;
  box-shadow: 12px 0 0 #3C0303;
}

.chmon-drool {
  position: absolute;
  top: 0;
  left: 12px;
  width: 20px;
  height: 20px;
}

.chmon-drool::before {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 2px;
  display: block;
  width: 4px;
  height: 19px;
  content: '';
  border-bottom-right-radius: 22%;
  border-bottom-left-radius: 22%;
  background-color: #8A0F0F;
  box-shadow: 17px -9px 0 #8A0F0F;
}

.chmon-drool::after {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 2px;
  display: block;
  width: 4px;
  height: 7px;
  content: '';
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  background-color: #8A0F0F;
}

.chmon-belly {
  position: absolute;
  z-index: 2;
  top: 54px;
  left: 27px;
  width: 17px;
  background-color: transparent;
}

.chmon-belly::before {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 12px;
  display: block;
  width: 3px;
  height: 3px;
  content: '';
  border-radius: 50%;
  background-color: #3C0303;
}

.chmon-belly::after {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 10px;
  display: block;
  width: 8px;
  height: 5px;
  content: '';
  border-radius: 50%;
  box-shadow: 0 1px 0 #3C0303 inset;
}

.chmon-underpants {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 26px;
  border-top: 3px solid #3C0303;
  background-color: #3C0303;
  box-shadow: 0 2px 0 #C22828 inset;
}

.chmon-underpants::before {
  position: absolute;
  bottom: -9px;
  left: 9px;
  width: 20px;
  height: 20px;
  content: '';
  border-radius: 50%;
  background-color: #C22828;
}

.chmon-underpants::after {
  position: absolute;
  right: 9px;
  bottom: -9px;
  width: 20px;
  height: 20px;
  content: '';
  border-radius: 50%;
  background-color: #C22828;
}

.chmon-legs {
  position: absolute;
  z-index: 2;
  bottom: -1px;
  left: 22px;
  width: 57px;
  height: 30px;
  animation-name: chmon-moveFeet;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

.chmon-legs::before {
  border-radius: 50%;
  content: '';
  height: 26px;
  right: 11px;
  position: absolute;
  top: 0;
  width: 10px;
  box-shadow: -3px 0 0 #C22828 inset;
}

.chmon-legs::after {
  border-radius: 50%;
  content: '';
  height: 26px;
  left: 11px;
  position: absolute;
  top: 0;
  width: 10px;
  box-shadow: 3px 0 0 #C22828 inset;
}

.chmon-feet {
  position: absolute;
  bottom: 0;
  width: 57px;
  height: 10px;
}

.chmon-feet::before {
  border-bottom: 0 solid transparent;
  border-right: 19px solid #c42b2e;
  border-top: 5px solid transparent;
  bottom: 4px;
  content: '';
  height: 0;
  left: -3px;
  position: absolute;
  width: 0;
}

.chmon-feet::after {
  border-bottom: 0 solid transparent;
  border-left: 19px solid #c42b2e;
  border-top: 5px solid transparent;
  bottom: 4px;
  content: '';
  height: 0;
  right: -3px;
  position: absolute;
  width: 0;
}

@keyframes chmon-moveEye {
  0% { left: 8px; top: 8px; }
  25% { left: 14px; top: 4px; }
  50% { left: 3px; top: 4px; }
  75% { left: 3px; top: 13px; }
  100% { left: 8px; top: 8px; }
}

@keyframes chmon-moveFeet {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

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