body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center, #1a0a2a 0%, #0a0a1a 70%, #000 100%);
    overflow: hidden;
    cursor: default;
    position: relative;
}

.nebula {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(#noise)" opacity="0.1"/></svg>');
    mix-blend-mode: overlay;
    pointer-events: none;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    pointer-events: none;
    animation: twinkle 4s infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.5); }
    50% { opacity: 0.8; transform: scale(1); }
}

.celestial-egg {
    width: clamp(100px, 20vw, 150px);
    height: clamp(133px, 26.6vw, 200px);
    background: radial-gradient(circle at center, #fff3e0 10%, #ffb3ba 50%, #ff8080 90%);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 179, 186, 0.8),
                0 0 80px rgba(255, 128, 128, 0.5),
                inset 0 -10px 20px rgba(255, 255, 255, 0.5);
    position: absolute;
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: grab;
    filter: drop-shadow(0 0 15px rgba(255, 179, 186, 0.6));
    z-index: 1;
    overflow: hidden;
}

.celestial-egg::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    background: radial-gradient(circle at 50% 30%, 
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.3) 60%,
        transparent 100%);
    border-radius: 50%;
    mix-blend-mode: screen;
}

.dragon-emblem {
    position: absolute;
    width: 70%;
    height: 70%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(180deg) scale(0.7);
    opacity: 0.7;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.3));
}

.celestial-egg:active {
    cursor: grabbing;
}

.celestial-egg.glow {
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 40px rgba(255, 179, 186, 0.8), 0 0 80px rgba(255, 128, 128, 0.5); }
    50% { box-shadow: 0 0 60px rgba(255, 179, 186, 1), 0 0 120px rgba(255, 128, 128, 0.7); }
}