.egg-host { position: fixed; left: 0; right: 0; top: 110px; z-index: 99; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.egg-plaque { pointer-events: auto; cursor: pointer; max-width: min(760px, calc(100vw - 40px)); text-align: center; }
.egg-plaque .co-text { font-size: 24px; color: var(--ac); }
.egg-plaque .co-sub { font-size: 14px; max-width: 640px; line-height: 1.25; text-box: none; }
.egg-plaque:hover .co-text { filter: brightness(1.2); }

.egg-fx { position: fixed; inset: 0; z-index: 9100; pointer-events: none; overflow: hidden; }
.egg-coin { position: absolute; top: 0; will-change: transform; filter: drop-shadow(0 3px 0 rgba(0,0,0,.45)); }

.egg-say { position: fixed; z-index: 9200; pointer-events: none; white-space: nowrap; font-size: 15px; color: var(--fg); background: var(--bg3); padding: 8px 10px 10px; line-height: 1; box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), inset 0 -3px 0 0 var(--lo); }
.egg-say.big { font-size: 34px; font-weight: 700; color: #7ee0a0; padding: 14px 20px 18px; }

.egg-ghost { position: fixed; z-index: 30; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 6px rgba(200,220,255,.9)) drop-shadow(0 0 18px rgba(140,170,255,.6)); }

.shop .keeper.egg-asleep { filter: brightness(.72) saturate(.7); transition: filter 1.2s; }
.egg-zzz { position: fixed; z-index: 30; pointer-events: none; width: 0; height: 0; }
.egg-zzz span { position: absolute; left: 0; bottom: 0; font-size: 18px; font-weight: 700; color: #c9d4ff; text-shadow: 0 2px 0 var(--ink); opacity: 0; animation: egg-z 3s steps(12, end) infinite; }
.egg-zzz span:nth-child(2) { animation-delay: 1s; font-size: 22px; }
.egg-zzz span:nth-child(3) { animation-delay: 2s; font-size: 28px; }
@keyframes egg-z {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(26px, -60px); opacity: 0; }
}

.egg-pane, .egg-pumpkin { pointer-events: none; }
.egg-pumpkin { animation: egg-flicker 1.4s steps(1, end) infinite; }
@keyframes egg-flicker {
  0%, 100% { filter: drop-shadow(0 0 calc(var(--S) * 3) rgba(255,150,50,.55)); }
  50% { filter: drop-shadow(0 0 calc(var(--S) * 2) rgba(255,150,50,.35)); }
}
.egg-bit { position: absolute; top: 0; width: 9px; height: 6px; will-change: transform; box-shadow: 0 3px 0 rgba(0,0,0,.35); }

.shop .lamp.egg-off .cone, .shop .lamp.egg-off .bulb { opacity: 0 !important; }
.shop .lamp.egg-off > canvas, .shop .lamp.egg-off > .fb { filter: brightness(.55); }
.shop.egg-dark .layer > * { transition: filter .3s steps(3, end); }
.shop.egg-dark .layer > :not(.win-glow, .cab-glow, .lamp, .st-cab, .win-glow + .prop, :has(.neon)), .shop.egg-dark .lamp > canvas, .shop.egg-dark .lamp > .fb { filter: brightness(.1) saturate(.5); }
.shop.egg-dark .win-glow + .prop, .shop.egg-dark .st-cab { filter: brightness(.45); }

.egg-count { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.egg-count .num { font-size: 20px; font-weight: 700; color: #c99bff; }
.egg-progress { flex: none; width: 200px; height: 12px; background: var(--ink); box-shadow: 0 0 0 3px var(--ink); }
.egg-progress > div { height: 100%; background: #c99bff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); }

.egg-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; padding: 4px; }
.egg-slot { --px: 3px; margin: 3px; padding: 18px 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.egg-slot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #c99bff; }
.egg-slot.locked { background: color-mix(in srgb, var(--bg2) 60%, var(--bg)); }
.egg-slot.locked::after { background: var(--line); }
.egg-icon { height: 40px; display: flex; align-items: center; justify-content: center; }
.egg-name { font-size: 17px; font-weight: 600; text-box: trim-both cap alphabetic; }
.egg-slot.found .egg-name { color: #c99bff; }
.egg-slot.locked .egg-name { color: var(--muted); letter-spacing: 3px; }
.egg-text { font-size: 13px; line-height: 1.35; color: var(--fg); }
.egg-slot.locked .egg-text { color: var(--muted); }
.egg-date { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; text-box: trim-both cap alphabetic; }
.egg-empty { padding: 26px 4px 0; text-align: center; }
body:has(.stage) .egg-plaque { pointer-events: none; }
