:root {
  --egg-night: #120d1d;
  --egg-violet: #291b40;
  --egg-moon: #f3cf65;
  --egg-coral: #e57a70;
  --egg-paper: #f6efe2;
  --egg-ink: #221630;
}

.egg-crumb {
  position: absolute;
  z-index: 18;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--egg-paper);
  border: 0;
  background: transparent;
  cursor: help;
  font: 800 16px/1 "Baloo 2", system-ui, sans-serif;
  opacity: .08;
  text-shadow: 0 0 8px rgba(246, 239, 226, .45);
  transition: opacity .2s ease, transform .2s ease;
}

.egg-crumb:hover,
.egg-crumb:focus-visible {
  opacity: .72;
  outline: 2px dashed var(--egg-moon);
  outline-offset: 2px;
  transform: rotate(12deg) scale(1.08);
}

body > .egg-crumb {
  position: fixed;
  right: 27%;
  bottom: 7px;
  pointer-events: auto;
}

.hero-art .egg-crumb {
  right: 19%;
  bottom: 22%;
}

.method-rako .egg-crumb {
  right: 13%;
  bottom: 9%;
}

.egg-clue-toast {
  position: fixed;
  z-index: 90;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  max-width: min(390px, calc(100vw - 36px));
  padding: 11px 15px;
  color: var(--egg-paper);
  border: 2px solid var(--egg-ink);
  border-radius: 9px;
  background: rgba(18, 13, 29, .94);
  box-shadow: 4px 5px 0 var(--egg-ink);
  font: 800 11px/1.35 "Baloo 2", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px) rotate(-1deg);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.egg-clue-toast.visible {
  opacity: 1;
  transform: translateY(0) rotate(-1deg);
}

.egg-dock {
  position: fixed;
  z-index: 72;
  right: max(15px, env(safe-area-inset-right));
  bottom: max(15px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 7px;
}

.egg-dock button {
  min-width: 43px;
  min-height: 43px;
  padding: 8px 11px;
  color: var(--egg-paper);
  border: 2px solid #09060e;
  border-radius: 50%;
  background: rgba(18, 13, 29, .92);
  box-shadow: 3px 4px 0 #09060e;
  cursor: pointer;
  font: 800 18px/1 "Baloo 2", system-ui, sans-serif;
}

.egg-dock button:hover,
.egg-dock button:focus-visible {
  color: var(--egg-ink);
  outline: 2px dashed var(--egg-moon);
  outline-offset: 3px;
  background: var(--egg-moon);
}

.egg-dock .egg-room-button {
  width: auto;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .09em;
}

html.midnight-watch body::before {
  background:
    radial-gradient(circle at 20% 12%, rgba(243, 207, 101, .18) 0 1px, transparent 1.8px) 0 0 / 31px 31px,
    radial-gradient(circle at 80% 24%, rgba(183, 157, 219, .2) 0 1px, transparent 1.8px) 0 0 / 47px 47px,
    radial-gradient(ellipse at 50% -8%, #392354 0%, var(--egg-violet) 31%, var(--egg-night) 68%, #08060d 100%);
}

html.midnight-watch body.health-page,
html.midnight-watch body.whales-page {
  background-color: #08060d;
  background-image:
    radial-gradient(circle at 16% 11%, rgba(243, 207, 101, .32) 0 1px, transparent 1.7px),
    radial-gradient(circle at 81% 23%, rgba(183, 157, 219, .26) 0 1px, transparent 1.7px),
    radial-gradient(circle at 52% -4%, rgba(102, 70, 137, .48), transparent 42%),
    linear-gradient(155deg, #21142f 0%, #120c1c 48%, #08060d 100%);
  background-position: 0 0, 9px 13px, 0 0, 0 0;
  background-size: 37px 37px, 61px 61px, auto, auto;
  background-attachment: scroll;
}

html.midnight-watch body.landing-page {
  background: #08060d;
}

html.midnight-watch .site-header {
  background:
    linear-gradient(180deg, rgba(243, 207, 101, .07), transparent 45%),
    rgba(18, 13, 29, .96);
  border-color: #09060e;
  box-shadow:
    inset 0 1px 0 rgba(243, 207, 101, .13),
    6px 7px 0 #09060e;
}

html.midnight-watch .page-noise {
  opacity: .07;
}

html.midnight-watch .gate-whales {
  background:
    radial-gradient(circle at 18% 18%, rgba(243, 207, 101, .3) 0 1px, transparent 1.8px) 0 0 / 37px 37px,
    radial-gradient(circle at 76% 32%, rgba(183, 157, 219, .2) 0 1px, transparent 1.8px) 0 0 / 59px 59px,
    linear-gradient(145deg, #2d1c43, #110b1a 72%, #08060d);
}

html.midnight-watch .gate-health {
  background:
    radial-gradient(circle at 84% 20%, rgba(243, 207, 101, .26) 0 1px, transparent 1.8px) 0 0 / 43px 43px,
    radial-gradient(circle at 24% 38%, rgba(183, 157, 219, .18) 0 1px, transparent 1.8px) 0 0 / 67px 67px,
    linear-gradient(150deg, #191024, #08060d 78%);
}

html.midnight-watch .gate::after {
  background: linear-gradient(180deg, transparent, rgba(8, 6, 13, .31) 48%, rgba(8, 6, 13, .9));
}

html.midnight-watch .landing-footer > span:last-child {
  background: rgba(8, 6, 13, .86);
}

html.midnight-watch .gate-copy strong,
html.midnight-watch .health-page h1 em {
  color: var(--egg-moon);
}

.egg-logo-target {
  cursor: pointer;
  pointer-events: auto !important;
}

.site-header .brand.egg-logo-target {
  position: relative;
}

.egg-logo-target::after {
  position: absolute;
  z-index: 30;
  top: -9px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--egg-moon);
  content: "☾";
  filter: drop-shadow(1px 2px 0 var(--egg-ink));
  font: 900 21px/1 Georgia, serif;
  opacity: .23;
  transform: rotate(-15deg);
  transition: opacity .2s ease, transform .2s ease;
}

.egg-logo-target:hover::after,
.egg-logo-target:focus-visible::after {
  opacity: .95;
  transform: rotate(8deg) scale(1.12);
}

.method-rako.egg-logo-target {
  outline-offset: 8px;
}

/* Midnight Watch field gear: CSS-only, transform-only, and isolated from app layout. */
.egg-night-vision,
.egg-whale-school {
  visibility: hidden;
  pointer-events: none;
}

.egg-night-vision {
  position: absolute;
  z-index: 7;
  top: 51%;
  left: 67%;
  width: min(62%, 305px);
  aspect-ratio: 2.35;
  opacity: 0;
  transform: translate(-50%, -118%) rotate(-7deg) scale(.72);
  transform-origin: 50% 18%;
}

.egg-night-vision-landing {
  top: 51%;
  left: 67%;
  width: 62%;
}

html.midnight-watch .egg-night-vision {
  visibility: visible;
  animation: egg-nvg-equip .72s cubic-bezier(.2, .9, .25, 1.15) .12s both;
}

.egg-nvg-strap {
  position: absolute;
  z-index: -1;
  top: 39%;
  right: -14%;
  left: -34%;
  height: 27%;
  border: 4px solid #090b08;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 3px, transparent 3px 10px),
    #34392a;
  box-shadow: 2px 4px 0 rgba(9, 11, 8, .78);
  transform: rotate(-2deg);
}

.egg-nvg-mount {
  position: absolute;
  z-index: 3;
  top: -17%;
  left: 50%;
  width: 27%;
  height: 45%;
  border: 4px solid #090b08;
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .12), transparent 40%),
    #343a38;
  box-shadow: 3px 4px 0 rgba(9, 11, 8, .78);
  transform: translateX(-50%);
}

.egg-nvg-mount::before,
.egg-nvg-mount::after {
  position: absolute;
  top: 35%;
  width: 8px;
  height: 8px;
  border: 2px solid #090b08;
  border-radius: 50%;
  background: #879493;
  content: "";
}

.egg-nvg-mount::before { left: 12%; }
.egg-nvg-mount::after { right: 12%; }

.egg-nvg-lenses {
  position: absolute;
  z-index: 2;
  inset: 18% 4% 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: rotate(-1deg);
}

.egg-nvg-lenses > i {
  position: relative;
  width: 46%;
  aspect-ratio: 1;
  border: clamp(4px, .8vw, 7px) solid #090b08;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .95) 0 3%, transparent 4%),
    radial-gradient(circle at 50% 48%, #f4fbfc 0 7%, #cbd9dc 24%, #82979a 43%, #314245 65%, #0b1112 100%);
  box-shadow:
    inset 0 0 0 5px #353d3c,
    inset 0 0 0 8px #111817,
    inset 0 0 20px rgba(224, 244, 247, .72),
    3px 5px 0 rgba(9, 11, 8, .86),
    0 0 10px 2px rgba(218, 241, 245, .46);
  filter: drop-shadow(0 0 4px rgba(229, 247, 249, .34));
}

.egg-nvg-lenses > i::after {
  position: absolute;
  right: 9%;
  bottom: 8%;
  width: 22%;
  height: 12%;
  border: 2px solid #090b08;
  border-radius: 999px;
  background: #687472;
  content: "";
  transform: rotate(-18deg);
}

@keyframes egg-nvg-equip {
  0% {
    opacity: 0;
    transform: translate(-50%, -118%) rotate(-7deg) scale(.72);
  }
  64% {
    opacity: 1;
    transform: translate(-50%, -47%) rotate(2deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-1deg) scale(1);
  }
}

.egg-whale-school {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  transition: opacity .45s ease;
  contain: strict;
}

html.midnight-watch .egg-whale-school {
  visibility: visible;
  opacity: 1;
}

html.midnight-watch .whales-page > main,
html.midnight-watch .whales-page > footer {
  position: relative;
  z-index: 1;
}

.egg-swim-whale {
  position: absolute;
  left: -170px;
  display: block;
  width: var(--whale-size, 84px);
  opacity: var(--whale-opacity, .5);
  filter: drop-shadow(2px 3px 0 rgba(9, 6, 14, .28));
  animation: egg-whale-swim var(--whale-speed, 27s) linear infinite;
  animation-delay: var(--whale-delay, 0s);
  will-change: transform;
}

.egg-swim-whale > img {
  display: block;
  width: 100%;
  height: auto;
}

.egg-whale-one {
  --whale-size: 96px;
  --whale-speed: 31s;
  --whale-delay: -19s;
  top: 14%;
}

.egg-whale-two {
  --whale-opacity: .34;
  --whale-size: 62px;
  --whale-speed: 24s;
  --whale-delay: -6s;
  top: 34%;
}

.egg-whale-three {
  --whale-size: 76px;
  --whale-speed: 29s;
  --whale-delay: -25s;
  top: 57%;
}

.egg-whale-four {
  --whale-opacity: .3;
  --whale-size: 54px;
  --whale-speed: 22s;
  --whale-delay: -14s;
  top: 76%;
}

.egg-whale-five {
  --whale-size: 68px;
  --whale-speed: 35s;
  --whale-delay: -2s;
  top: 88%;
}

@keyframes egg-whale-swim {
  0% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  24% { transform: translate3d(calc(30vw + 80px), -10px, 0) rotate(1deg); }
  51% { transform: translate3d(calc(65vw + 120px), 7px, 0) rotate(-1deg); }
  76% { transform: translate3d(calc(96vw + 145px), -6px, 0) rotate(1deg); }
  100% { transform: translate3d(calc(125vw + 220px), 0, 0) rotate(-2deg); }
}

.egg-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100svh - 28px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--egg-paper);
  border: 3px solid #09060e;
  border-radius: 18px;
  background: var(--egg-night);
  box-shadow: 10px 12px 0 rgba(9, 6, 14, .72);
}

.egg-dialog::backdrop {
  background: rgba(9, 6, 14, .82);
  backdrop-filter: blur(5px);
}

.egg-unlock-card {
  display: grid;
  justify-items: center;
  padding: clamp(30px, 8vw, 72px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(243, 207, 101, .14), transparent 31%),
    radial-gradient(circle at 15% 30%, rgba(183, 157, 219, .11) 0 1px, transparent 2px) 0 0 / 31px 31px;
}

.egg-unlock-card .moon {
  color: var(--egg-moon);
  font: 400 clamp(62px, 12vw, 104px)/1 Georgia, serif;
  transform: rotate(-13deg);
}

.egg-unlock-card h2,
.egg-room h2 {
  margin: 10px 0 4px;
  color: var(--egg-moon);
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-size: clamp(34px, 6vw, 66px);
  font-weight: 400;
  letter-spacing: .04em;
}

.egg-unlock-card p {
  max-width: 560px;
  margin: 12px auto 24px;
  color: #d7c8e7;
  font-weight: 700;
}

.egg-action {
  padding: 10px 15px;
  color: var(--egg-ink);
  border: 2px solid #09060e;
  border-radius: 9px;
  background: var(--egg-moon);
  box-shadow: 3px 4px 0 #09060e;
  cursor: pointer;
  font: 800 11px/1 "Baloo 2", system-ui, sans-serif;
  letter-spacing: .09em;
}

.egg-room {
  padding: clamp(18px, 4vw, 34px);
  background:
    radial-gradient(circle at 50% 10%, rgba(102, 70, 137, .32), transparent 48%),
    var(--egg-night);
}

.egg-room-head,
.egg-room-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.egg-room-head p,
.egg-room-foot {
  color: #b9a7cb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}

.egg-room-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: var(--egg-paper);
  border: 2px solid var(--egg-paper);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 21px;
}

.egg-sky {
  display: block;
  width: 100%;
  height: clamp(330px, 55vh, 560px);
  margin: 18px 0;
  border: 2px solid rgba(246, 239, 226, .28);
  border-radius: 13px;
  background: #09070f;
  touch-action: none;
}

.egg-room-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 15px;
}

.egg-room-summary span {
  padding: 5px 9px;
  color: var(--egg-ink);
  border-radius: 999px;
  background: var(--egg-paper);
  font-size: 10px;
  font-weight: 800;
}

.egg-star-list {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

body.egg-dialog-open {
  overflow: hidden;
}

@media (max-width: 680px) {
  body > .egg-crumb {
    right: 11px;
    bottom: 5px;
  }

  .egg-room-head,
  .egg-room-foot {
    align-items: flex-start;
  }

  .egg-room-head {
    flex-direction: column-reverse;
  }

  .egg-room-close {
    align-self: flex-end;
  }

  .egg-room-foot {
    flex-direction: column;
  }

  .egg-sky {
    height: 52svh;
    min-height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .egg-crumb,
  .egg-clue-toast,
  .egg-logo-target::after {
    transition: none;
  }

  html.midnight-watch .egg-night-vision {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-1deg);
  }

  .egg-whale-school {
    display: none;
  }
}

html.egg-effects-lite .egg-whale-school {
  display: none;
}

html.midnight-watch.egg-effects-lite .egg-night-vision {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-1deg);
}