/* Three discoveries, with the existing artwork and no external animation runtime. */
.egg-piece[hidden], .egg-progress[hidden] { display:none !important; }
.tabletop-scene .egg-piece {
    border:0; padding:0; margin:0; background:transparent; color:inherit;
    pointer-events:auto; cursor:pointer; z-index:2; -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
/* Rear collectibles keep the same stacking order as the original decoration. */
.tabletop-scene .egg-piece.piece-behind { z-index:0; }
.egg-piece > .play-piece { overflow:hidden; transition:filter 180ms ease; }
.tabletop-scene .egg-piece > .play-piece { animation-play-state:paused; }
.tabletop-scene[data-scene-visible] .egg-piece > .play-piece { animation-play-state:running; }
html[data-playful-paused] .tabletop-scene .egg-piece > .play-piece { animation-play-state:paused; }
.egg-piece:hover > .play-piece { filter:drop-shadow(0 0 7px #ffd000b3); }
.egg-piece:focus-visible { outline:3px solid var(--color-teal-text); outline-offset:4px; border-radius:50%; }
.egg-progress {
    position:fixed; left:20px; bottom:24px; z-index:98; display:flex; align-items:center;
    gap:9px; padding:11px 15px; border:2px solid var(--color-ink); border-radius:999px;
    background:var(--color-paper); color:var(--color-ink); box-shadow:3px 3px 0 var(--color-ink);
    font:600 .85rem/1.2 var(--font-body); cursor:pointer; touch-action:manipulation;
}
.egg-progress > .ui-icon { width:19px; height:19px; flex:none; }
.egg-progress:hover { background:var(--color-teal-soft); }
.egg-progress:focus-visible, .egg-close:focus-visible { outline:3px solid var(--color-teal-text); outline-offset:5px; }
.egg-progress-dots { display:flex; gap:4px; }
.egg-progress-dots i { width:7px; height:7px; border:1px solid var(--color-ink); border-radius:50%; }
.egg-progress-dots i[data-found] { background:var(--color-teal); }
html.egg-discovering { overflow:hidden; }
.egg-dialog {
    position:fixed; inset:0; width:100%; height:100%; height:100dvh;
    max-width:none; max-height:none; margin:0; padding:0; border:0;
    background:transparent; color:var(--color-ink); overflow:auto; overscroll-behavior:contain;
}
.egg-dialog[open] { display:grid; place-items:center; }
.egg-dialog::backdrop { background:rgba(12,28,27,.62); animation:egg-backdrop-in 220ms ease both; }
.egg-panel {
    width:min(430px,calc(100% - 32px)); padding:24px 0;
    padding-block:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-bottom));
    text-align:center; margin:auto;
}
.egg-stage { position:relative; width:200px; height:200px; margin:0 auto 14px; display:grid; place-items:center; }
.egg-halo {
    position:absolute; inset:-20px; border-radius:50%; opacity:0;
    background:radial-gradient(circle,#ffd00080 0%,#ffd00026 35%,transparent 70%);
}
.egg-ring { position:absolute; inset:22px; border:2px solid #fff2ab; border-radius:50%; opacity:0; }
.egg-flight { position:fixed; pointer-events:none; z-index:1; transform-origin:center; }
.egg-flight > .play-piece { width:100%; height:100%; overflow:hidden; animation:none !important; rotate:none; transform:none; }
.egg-message {
    position:relative; background:var(--color-paper); border:3px solid var(--color-ink);
    border-radius:18px; padding:23px 26px 25px; box-shadow:5px 5px 0 #0005;
}
.egg-count {
    display:inline-block; margin:0 0 13px; padding:6px 13px; border-radius:999px;
    background:var(--color-yellow); border:2px solid var(--color-ink);
    font:600 .9rem/1 var(--font-body);
}
.egg-message h2 { margin:0 0 12px; font:clamp(1.6rem,5vw,2rem)/1.1 var(--font-display); text-transform:none; }
.egg-message > p:not(.egg-count) { margin:0; font:1rem/1.55 var(--font-body); }
.egg-close {
    display:inline-flex; align-items:center; justify-content:center; gap:10px; margin-top:21px;
    min-height:44px; padding:10px 18px; border:2px solid var(--color-ink); border-radius:999px;
    background:var(--color-teal); color:var(--color-ink); font:600 .9rem/1.2 var(--font-body);
    cursor:pointer; box-shadow:2px 2px 0 var(--color-ink);
}
.egg-close:hover { background:var(--color-yellow); }
.egg-spark { position:absolute; left:50%; top:50%; width:9px; height:9px; background:#ffec94; opacity:0; pointer-events:none; }
.egg-spark:nth-child(2n) { background:#9de6d6; width:6px; height:6px; border-radius:50%; }
.egg-spark:nth-child(3n) { clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%); width:15px; height:15px; }
.egg-keepsake { width:120px; height:120px; overflow:hidden; rotate:-10deg; filter:drop-shadow(0 0 18px #ffd00080); }
.egg-dialog[data-view="progress"] .egg-stage { width:150px; height:150px; }
@keyframes egg-backdrop-in { from { background:rgba(12,28,27,0); } }
@media(max-width:768px) {
    .egg-progress { left:14px; bottom:calc(88px + env(safe-area-inset-bottom)); padding:10px 12px; font-size:.8rem; }
    .egg-message { padding:20px; }
}
@media(max-height:600px) {
    .egg-stage { width:140px; height:140px; margin-bottom:8px; }
    .egg-message { padding:17px 20px; }
    .egg-message h2 { font-size:1.5rem; }
    .egg-panel { padding-block:16px; }
}
@media(prefers-reduced-motion:reduce) {
    .egg-dialog::backdrop { animation:none; }
    .egg-piece > .play-piece { transition:none; }
    .tabletop-scene .egg-piece > .play-piece { animation:none; }
}